/* ============================================================================
   InfraEdge — site-wide infographics.

   Partner to partials/diagrams.js. Same rules as concepts.css: tokens only, no
   raw hex, no shadows, separation from hairlines and mist fills.

   Most of these are .schematic .draw drawings, so the stroke-draw and label
   fade already come free from the generic `.draw [data-draw]` rules in
   base.css. What lives here is layout, the two scroll-scrubbed scenes, and the
   handful of shapes the schematic primitives do not already cover.
   ========================================================================= */

/* ==========================================================================
   1. toolFunnel — sticky scroll scene for the controlled change model.

   Tall outer section + sticky stage; --p scrubbed 0..1 by js/motion.js.
   Stages highlight diagram zones (estate → InfraEdge → Git/CI/CD → review/AWS).
   HTML/CSS composition so labels stay website-readable.
   ========================================================================== */
.fun { position: relative; height: 170vh; }
.fun-sticky {
  position: sticky; top: 0; height: 100vh;
  overflow-x: hidden; overflow-y: auto;
  display: flex; align-items: flex-start;
  padding-top: 72px;
  padding-bottom: 1.25rem;
  box-sizing: border-box;
}
.fun-inner { width: 100%; }
.fun-head { margin-bottom: clamp(.75rem, 1.6vh, 1.15rem); }
.fun-head h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  max-width: 34ch; margin: .55rem 0 0;
  line-height: 1.15;
}
.fun-support {
  margin: .75rem 0 0;
  max-width: 54ch;
  font-size: var(--t-body);
  color: var(--ink-soft);
  line-height: 1.5;
}

.fun-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(16rem, .85fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}

/* --- diagram --- */
.fun-diagram {
  margin: 0;
  display: grid;
  gap: .55rem;
  min-width: 0;
  padding: clamp(1rem, 1.6vw, 1.35rem);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--white);
}

.fun-zone {
  transition: opacity 320ms var(--ease), border-color 320ms ease, background 320ms ease;
}
.fun:not([data-hover])[data-stage='0'] .fun-zone:not([data-fun-layer='0']),
.fun:not([data-hover])[data-stage='1'] .fun-zone:not([data-fun-layer='1']),
.fun:not([data-hover])[data-stage='2'] [data-fun-layer]:not([data-fun-layer='2']),
.fun:not([data-hover])[data-stage='3'] [data-fun-layer]:not([data-fun-layer='3']),
.fun[data-hover='0'] .fun-zone:not([data-fun-layer='0']),
.fun[data-hover='1'] .fun-zone:not([data-fun-layer='1']),
.fun[data-hover='2'] [data-fun-layer]:not([data-fun-layer='2']),
.fun[data-hover='3'] [data-fun-layer]:not([data-fun-layer='3']) {
  opacity: .5;
}
.fun:not([data-hover])[data-stage='0'] .fun-zone[data-fun-layer='0'],
.fun:not([data-hover])[data-stage='1'] .fun-zone[data-fun-layer='1'],
.fun:not([data-hover])[data-stage='2'] [data-fun-layer='2'],
.fun:not([data-hover])[data-stage='3'] [data-fun-layer='3'],
.fun[data-hover='0'] .fun-zone[data-fun-layer='0'],
.fun[data-hover='1'] .fun-zone[data-fun-layer='1'],
.fun[data-hover='2'] [data-fun-layer='2'],
.fun[data-hover='3'] [data-fun-layer='3'] {
  opacity: 1;
}

/* Keep path shell readable when only one segment is highlighted. */
.fun:not([data-hover])[data-stage='2'] .fun-zone-path,
.fun:not([data-hover])[data-stage='3'] .fun-zone-path,
.fun[data-hover='2'] .fun-zone-path,
.fun[data-hover='3'] .fun-zone-path {
  opacity: 1;
}

.fun-zone-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .35rem .85rem;
  margin-bottom: .7rem;
}
.fun-zone-kicker {
  margin: 0;
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--sky-700);
}
.fun-zone-meta {
  margin: 0;
  font-family: var(--font); font-size: .6875rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-quiet);
}
.fun-zone-caption {
  margin: .85rem 0 0;
  font-size: var(--t-small); color: var(--ink-soft); line-height: 1.4;
  max-width: 48ch;
}

.fun-estate {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .65rem;
}

.fun-node {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .45rem;
  min-height: 5.25rem;
  padding: .75rem .5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  background: var(--mist);
  text-align: center;
  box-sizing: border-box;
}
.fun-node-mark {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  flex: none;
}
.fun-node-mark .pmark { display: block; width: 100%; height: auto; }
.fun-node-label {
  font-size: var(--t-small); font-weight: 600;
  color: var(--ink); line-height: 1.25;
}

.fun-down {
  display: grid; place-items: center;
  height: 1.35rem;
}
.fun-down span {
  display: block; width: 1px; height: 100%;
  background: var(--navy-900);
  position: relative;
}
.fun-down span::after {
  content: '';
  position: absolute; left: 50%; bottom: -1px;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--navy-900);
  border-bottom: 1.5px solid var(--navy-900);
  transform: translateX(-50%) rotate(45deg);
}

.fun-zone-ie {
  display: grid; gap: .65rem; justify-items: center;
  padding: 1.1rem 1.25rem 1.15rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--mist);
}
.fun-ie-brand { display: grid; place-items: center; }
.fun-logo { display: block; height: 40px; width: auto; }
.fun-logo--dark { display: none; }
:root[data-resolved-theme='dark'] .fun-logo--light { display: none; }
:root[data-resolved-theme='dark'] .fun-logo--dark { display: block; }
.fun-ie-label {
  margin: 0;
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-quiet);
}
.fun-products {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem .5rem;
}
.fun-products li {
  font-family: var(--font); font-size: .75rem; font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink);
  padding: .3rem .65rem;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--white);
}
.fun-verbs {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem .55rem;
}
.fun-verbs li {
  font-family: var(--font); font-size: var(--t-small); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--sky-700);
  padding: .4rem .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
}

.fun-zone-path { display: grid; gap: .7rem; }
.fun-path {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: stretch; gap: .45rem;
}
.fun-path-seg {
  display: flex; flex: 1 1 12rem; align-items: stretch; gap: .45rem;
  min-width: 0;
  transition: opacity 320ms var(--ease);
}
.fun-path-bridge {
  display: flex; align-items: center; flex: none;
}
.fun-path .fun-node {
  flex: 1 1 0;
  min-width: 0;
  min-height: 4.5rem;
  flex-direction: row;
  gap: .55rem;
  padding: .85rem 1rem;
  background: var(--white);
}
/* Must beat .fun-path .fun-node — otherwise gold fill is lost in dark mode and
   --ink-on-gold (navy) lands on a dark card. */
.fun-path .fun-node-git {
  background: var(--gold-400);
  border-color: var(--ink-on-gold);
}
.fun-path .fun-node-git .fun-node-label { color: var(--ink-on-gold); }
.fun-path .fun-node-git .fun-node-mark { color: var(--ink-on-gold); }
.fun-path .fun-node-cloud {
  flex: 1.15 1 0;
  min-height: 5rem;
  padding: .4rem .55rem;
  background: transparent;
  border-color: var(--line-strong);
  overflow: hidden;
}
.fun-cloud-lockup {
  display: block;
  width: min(8rem, 100%);
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}

.fun-arrow {
  display: block; align-self: center; flex: none;
  width: .85rem; height: 1.5px;
  background: var(--navy-900);
  position: relative;
}
.fun-arrow::after {
  content: '';
  position: absolute; right: -1px; top: 50%;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--navy-900);
  border-top: 1.5px solid var(--navy-900);
  transform: translateY(-50%) rotate(45deg);
}

.fun-outcome {
  margin: 0;
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); text-align: center;
}

/* Active zone emphasis beyond opacity */
.fun:not([data-hover])[data-stage='0'] .fun-zone-estate,
.fun[data-hover='0'] .fun-zone-estate {
  outline: 1.5px solid var(--sky-600);
  outline-offset: 4px;
  border-radius: var(--r-s);
  background: color-mix(in srgb, var(--sky-tint) 45%, transparent);
}
.fun:not([data-hover])[data-stage='1'] .fun-zone-ie,
.fun[data-hover='1'] .fun-zone-ie {
  border-color: var(--sky-600);
  outline: 1px solid color-mix(in srgb, var(--sky-600) 40%, transparent);
  outline-offset: 0;
}
.fun:not([data-hover])[data-stage='2'] [data-fun-layer='2'] .fun-node,
.fun[data-hover='2'] [data-fun-layer='2'] .fun-node {
  border-color: var(--sky-600);
}
.fun:not([data-hover])[data-stage='3'] [data-fun-layer='3'] .fun-node,
.fun[data-hover='3'] [data-fun-layer='3'] .fun-node {
  border-color: var(--gold-400);
}

/* --- step rail --- */
.fun-rail { min-width: 0; position: sticky; top: 0; }
.fun-steps { display: grid; gap: .55rem; list-style: none; margin: 0; padding: 0; }
.fun-step {
  display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start;
  padding: .85rem .95rem; border-radius: var(--r-s); border: 1px solid transparent;
  transition: background 300ms ease, border-color 300ms ease, color 300ms ease;
  cursor: pointer;
}
.fun-step:not(.is-on):hover {
  border-color: var(--hover-border); background: var(--mist);
}
.fun-step:not(.is-on):hover strong { color: var(--hover-ink); }
.fun-step:focus-visible {
  outline: 2px solid var(--sky-600);
  outline-offset: 2px;
}
.fun-step b {
  font-family: var(--font); font-size: var(--t-micro);
  letter-spacing: .1em; color: var(--slate-500); padding-top: .15rem;
}
.fun-step strong { display: block; font-size: var(--t-body); line-height: 1.3; }
.fun-step p {
  font-size: var(--t-small); margin: 0; color: var(--ink-soft); line-height: 1.45;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 340ms var(--ease), opacity 240ms ease, margin 340ms var(--ease);
}
.fun-step.is-on p { max-height: 12rem; opacity: 1; margin-top: .35rem; }
.fun-step.is-on { background: var(--white); border-color: var(--line); }
.fun-step.is-on b { color: var(--sky-700); }
.fun-step.is-done { border-left: 2px solid var(--gold-400); }
.fun-step:not(.is-on) strong { color: var(--ink-quiet); font-weight: 500; }
.fun-step:not(.is-on) b { color: var(--ink-quiet); }

@media (max-height: 860px) and (min-width: 1101px) {
  .fun-diagram { gap: .4rem; padding: .85rem 1rem; }
  .fun-node { min-height: 4.5rem; padding: .55rem .4rem; }
  .fun-path .fun-node { min-height: 3.85rem; padding: .65rem .85rem; }
  .fun-zone-ie { padding: .85rem 1rem; }
  .fun-head { margin-bottom: .5rem; }
  .fun-support { margin-top: .5rem; }
}
  .fun-stage {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .fun-rail { position: static; }
  .fun-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
  }
  .fun-step p { max-height: none; opacity: 1; margin-top: .35rem; }
  .fun-step { background: var(--white); border-color: var(--line); }
  .fun-step:not(.is-on) strong { color: var(--ink); font-weight: 600; }
  .fun [data-fun-layer] { opacity: 1 !important; }
  .fun-zone-estate {
    outline: none !important;
    background: transparent !important;
  }
}

/* --- mobile: vertical story, no sticky scrub --- */
@media (max-width: 1000px) {
  .fun { height: auto; }
  .fun-sticky { position: static; height: auto; padding-block: var(--section); }
}

@media (max-width: 720px) {
  .fun-estate { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fun-estate .fun-node:last-child { grid-column: 1 / -1; max-width: 12rem; justify-self: center; }
  .fun-path { flex-direction: column; gap: .55rem; }
  .fun-path-seg { flex-direction: column; flex: none; width: 100%; }
  .fun-path-bridge {
    justify-content: center;
    transform: rotate(90deg);
    height: 1rem;
  }
  .fun-path .fun-node { width: 100%; min-height: 3.75rem; }
  .fun-steps { grid-template-columns: 1fr; }
  .fun-verbs { gap: .4rem; }
  .fun-verbs li { font-size: .75rem; padding: .35rem .55rem; }
  .fun-products li { font-size: .6875rem; padding: .25rem .5rem; }
  .fun-cloud-lockup { width: min(7rem, 70%); }
  .fun-outcome { letter-spacing: .06em; }
}

@media (prefers-reduced-motion: reduce) {
  .fun { height: auto; }
  .fun-sticky { position: static; height: auto; padding-block: var(--section); }
  .fun [data-fun-layer] { opacity: 1 !important; transition: none; }
  .fun-zone { transition: none; }
  .fun-step p { max-height: none; opacity: 1; margin-top: .35rem; }
  .fun-steps { grid-template-columns: 1fr; }
  .fun-step { background: var(--white); border-color: var(--line); }
  .fun-zone-estate {
    outline: none !important;
    background: transparent !important;
  }
}

/* ==========================================================================
   2. chaosToClarity — organic estate → engineered model.
   Desktop: before | InfraEdge spine | after, three rows (State / Change /
   Assurance). Mobile: stack before → spine → after per category.
   ========================================================================== */
.c2c { max-width: 1080px; margin: 0 auto; }
.c2c-head { margin-bottom: clamp(1rem, 2vh, 1.5rem); }
.c2c-head .eyebrow { margin-bottom: .55rem; }
.c2c-title {
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  font-weight: 700; letter-spacing: -0.02em;
  color: var(--navy-900); margin: 0; max-width: 28ch; line-height: 1.2;
}

.c2c-heads {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr) 120px minmax(0, 1fr);
  gap: .75rem 1rem;
  align-items: end;
  margin-bottom: .85rem;
}
.c2c-heads-spacer { display: block; }
.c2c-kicker {
  margin: 0;
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sky-700);
}
.c2c-kicker-mid {
  text-align: center;
  color: var(--ink-quiet);
}

.c2c-rows {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .85rem;
}
.c2c-row {
  margin: 0;
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr) 120px minmax(0, 1fr);
  gap: .75rem 1rem;
  align-items: stretch;
}
.c2c-row-label {
  margin: 0;
  display: flex; align-items: center; justify-content: flex-start;
}
.c2c-row-label span {
  font-family: var(--font); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--sky-700);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

.c2c-card {
  margin: 0;
  border-radius: var(--r-s);
  padding: .85rem 1rem .9rem;
  display: flex; flex-direction: column; gap: .55rem;
  min-height: 100%;
}
.c2c-card-before {
  background: var(--mist);
  border: 1.4px dashed var(--line-strong);
  color: var(--ink-soft);
}
.c2c-card-after {
  background: var(--white);
  border: 1.5px solid var(--line-strong);
  border-left: 3px solid var(--gold-400);
  color: var(--navy-900);
}
.c2c-card-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .5rem;
}
.c2c-card-title {
  margin: 0;
  font-size: var(--t-body); font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.25;
  color: var(--navy-900);
}
.c2c-card-before .c2c-card-title { color: var(--ink-quiet); font-weight: 600; }
.c2c-icons {
  display: flex; align-items: center; gap: .35rem; flex-shrink: 0;
}
.c2c-icon {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--mist);
}
.c2c-points {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .28rem;
}
.c2c-points li {
  position: relative;
  padding-left: .85rem;
  font-size: var(--t-small);
  line-height: 1.4;
  color: inherit;
}
.c2c-points li::before {
  content: '';
  position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--slate-500);
}
.c2c-card-after .c2c-points li::before { background: var(--sky-600); }

/* Centre spine: Discover → Standardise → Automate → Assure */
.c2c-spine {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 100%;
  padding: .35rem 0;
}
.c2c-spine-line {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: var(--sky-600);
  opacity: .45;
  transform: translateX(-50%);
}
.c2c-spine-steps {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; gap: .35rem;
}
.c2c-step {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  text-align: center;
  padding: .35rem .4rem;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  min-width: 5.5rem;
}
.c2c-step-num {
  font-family: var(--font); font-size: 10px; font-weight: 600;
  letter-spacing: .12em; color: var(--sky-700);
}
.c2c-step-verb {
  font-size: 11px; font-weight: 700;
  letter-spacing: .02em; color: var(--navy-900);
  text-transform: uppercase;
}
.c2c-step-join {
  width: 1px; height: .45rem;
  background: var(--sky-600); opacity: .55;
}

/* Outcome bar — gold accent, not a full yellow plate */
.c2c-outcome {
  margin: 1.15rem 0 0;
  padding: .85rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--gold-400);
  border-radius: var(--r-s);
  background: var(--white);
}
.c2c-outcome-lead {
  margin: 0;
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy-900); line-height: 1.45;
}
.c2c-outcome-body {
  margin: .45rem 0 0;
  font-size: var(--t-small); color: var(--ink-soft);
  max-width: 68ch; line-height: 1.45;
}
.c2c-aside {
  display: block;
  margin: .7rem 0 0;
  font-size: var(--t-small); color: var(--ink-quiet); max-width: 62ch;
}

@media (max-width: 900px) {
  .c2c-heads {
    grid-template-columns: 1fr 1fr;
  }
  .c2c-heads-spacer,
  .c2c-kicker-mid { display: none; }
  .c2c-row {
    grid-template-columns: 1fr;
    gap: .55rem;
    padding: .85rem 0;
    border-top: 1px solid var(--line);
  }
  .c2c-row:first-child { border-top: 0; padding-top: 0; }
  .c2c-row-label {
    justify-content: flex-start;
  }
  .c2c-row-label span {
    writing-mode: horizontal-tb;
    transform: none;
    letter-spacing: .12em;
  }
  .c2c-spine {
    min-height: 0;
    padding: .15rem 0;
  }
  .c2c-spine-line { display: none; }
  .c2c-spine-steps {
    flex-direction: row; flex-wrap: wrap; justify-content: center;
    gap: .4rem;
  }
  .c2c-step-join {
    width: .55rem; height: 1px;
  }
  /* Mobile order: label → before → spine → after */
  .c2c-row-label { order: 0; }
  .c2c-card-before { order: 1; }
  .c2c-spine { order: 2; }
  .c2c-card-after { order: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .c2c-card, .c2c-step { transition: none; }
}

/* ==========================================================================
   3b. heroLedger — first-screen artefact. Navy head, gold bind, sky rail.
   ========================================================================== */
.hec {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--white);
  overflow: hidden;
  max-width: 520px;
  margin-left: auto;
}
.hec-wrap .hec { margin-inline: auto; }
.how-step3-split {
  align-items: start;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.how-step3-split .sec-head { margin-bottom: var(--s-3); }
.how-step3-split .hec-wrap { min-width: 0; }
.how-step3-split .hec {
  margin-left: 0;
  margin-inline: 0;
  max-width: none;
  width: 100%;
}
.how-chain-list {
  margin: var(--s-3) 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .85rem;
}
.how-chain-list li {
  padding-left: 0;
  font-size: var(--t-body);
  color: var(--ink-soft);
  line-height: 1.45;
  max-width: 42ch;
}
.how-chain-list b {
  display: block;
  font-family: var(--font);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sky-700);
  margin-bottom: .2rem;
}
@media (max-width: 900px) {
  .how-step3-split .hec { max-width: 520px; margin-inline: auto; }
}
.hec:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hec-head {
  background: var(--tone-navy-bg);
  color: var(--tone-navy-ink);
  padding: 1.15rem 1.35rem 1.25rem;
}
.hec-rule {
  display: block; width: 40px; height: 2px;
  background: var(--gold-400); margin-bottom: .7rem;
}
.hec-kicker {
  margin: 0;
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-navy-quiet);
}
.hec-id {
  margin: .45rem 0 .35rem;
  font-size: var(--t-h2); font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.1;
}
.hec-head-meta {
  margin: 0;
  font-size: var(--t-small); color: var(--on-navy-quiet);
  max-width: 42ch; line-height: 1.45;
}
.hec-steps {
  margin: 0; padding: 1.15rem 1.25rem 1.05rem;
  display: grid; gap: 0;
}
.hec-step {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 0 .9rem;
  position: relative;
  padding-bottom: 1.15rem;
}
.hec-step:last-child { padding-bottom: .15rem; }
/* Rail runs from under this node into the centre of the next. Nodes sit
   above it (z-index), so a negative bottom closes the visible gap without
   changing the scaleY grow animation. */
.hec-step::before {
  content: '';
  position: absolute;
  left: 10px;
  top: calc(.35rem + 11px);
  bottom: calc(-1 * (.35rem + 6px));
  width: 2px; background: var(--sky-500);
  transform-origin: top;
  transition: transform 520ms var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms + 160ms);
}
html.js .hec .hec-step::before { transform: scaleY(0); }
html.js .hec.revealed .hec-step::before { transform: scaleY(1); }
.hec-step:last-child::before { display: none; }
/* Last node is 14px / .28rem — reach its centre from the previous rail. */
.hec-step:nth-last-child(2)::before {
  bottom: calc(-1 * (.28rem + 7px));
}
.hec-node {
  width: 12px; height: 12px; margin: .35rem auto 0;
  border-radius: 999px;
  border: 2px solid var(--sky-700);
  background: var(--white);
  position: relative; z-index: 1;
}
.hec-step:last-child .hec-node {
  width: 14px; height: 14px; margin-top: .28rem;
  background: var(--gold-400); border-color: var(--navy-900);
}
.hec-key {
  margin: 0 0 .25rem;
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sky-700);
}
.hec-title {
  margin: 0 0 .45rem;
  font-size: var(--t-body); font-weight: 600; color: var(--navy-900);
  line-height: 1.4; letter-spacing: -0.011em;
}
.hec-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.hec-chips { display: contents; }
.hec-chip {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .02em; color: var(--slate-600);
  background: var(--mist); border: 1px solid var(--line);
  border-radius: 4px; padding: .22rem .5rem; line-height: 1.3;
}
.hec-bind {
  display: flex; align-items: center; gap: .85rem;
  margin: 0;
  background: var(--gold-400); color: var(--ink-on-gold);
  padding: .7rem 1.1rem .75rem;
  text-decoration: none;
}
.hec-bind:hover { background: var(--gold-hover); }
.hec-bind:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* base.css sets strong/b to --ink, which flips light in dark mode — keep navy on gold. */
.hec-bind strong, .hec-bind b { color: inherit; }
.hec-bind-mark {
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 32px;
  background: var(--white);
  border-radius: 6px;
}
.hec-bind-mark img { width: 32px; height: auto; }
.hec-bind-copy {
  display: grid; gap: .12rem; min-width: 0;
}
.hec-bind-copy strong {
  font-size: var(--t-body); font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.15;
}
.hec-bind-copy span {
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .04em; color: var(--ink-on-gold);
}

.hec-deck { display: grid; }
.hec-card { grid-area: 1 / 1; min-width: 0; }
.hec-card:not(.is-on) { display: none; }
html.js .hec-card { display: block; }
html.js .hec-card {
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
html.js .hec-card:not(.is-on) {
  display: block;
  opacity: 0;
  transform: translateX(var(--hec-dx, 18px));
  pointer-events: none;
}
html.js .hec-card.is-on {
  opacity: 1;
  transform: none;
  z-index: 1;
}
html.js .hec.revealed .hec-card.is-on .hec-step::before { transform: scaleY(1); }
html.js .hec-card:not(.is-on) .hec-step::before { transform: scaleY(0); transition-delay: 0s; }

.hec-nav {
  display: flex; align-items: center; gap: .65rem;
  padding: .7rem 1rem .75rem;
  border-top: 1px solid var(--line);
  background: var(--mist);
}
.hec-dots { display: flex; align-items: center; justify-content: center; gap: 0; flex: 1; }
/* The dot reads as 8px but the button is 24px, the WCAG 2.5.8 minimum. It was
   an 8x8 target, which is not reliably tappable. The negative margin pulls the
   larger targets back to roughly the original visual spacing. */
.hec-dot {
  width: 24px; height: 24px; padding: 0; border: 0; margin-inline: -5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; cursor: pointer; border-radius: 999px;
}
.hec-dot::before {
  content: ''; width: 8px; height: 8px; border-radius: 999px;
  background: var(--line-strong);
  transition: background var(--dur-fast) ease;
}
.hec-dot.is-on::before { background: var(--gold-400); }
.hec-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.hec-dir {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-s);
  background: var(--white); color: var(--navy-900);
}
.hec-dir:hover { border-color: var(--hover-border); color: var(--hover-ink); }
.hec-dir:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hec-pos {
  margin: 0 0 0 .15rem;
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .08em; color: var(--slate-500); min-width: 4.8ch;
}

html.js .hec .hec-body {
  opacity: 0; transform: translateY(10px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html.js .hec.revealed .hec-body { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hec-step::before { transform: none; transition: none; }
  html.js .hec .hec-body { opacity: 1; transform: none; transition: none; }
  html.js .hec-card { transition: none; transform: none; }
  html.js .hec-card.is-on { opacity: 1; }
  html.js .hec-card:not(.is-on) { opacity: 0; }
}

@media (max-width: 900px) {
  .hec { max-width: none; margin-left: 0; }
}

/* ==========================================================================
   3. lifecycleRing — Assess, Resolve, Assure.
   ========================================================================== */
.ring-wrap {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: .65rem;
  max-width: 520px;
  margin-inline: auto;
  width: 100%;
}
.ring-wrap > * { min-width: 0; }
.ring-svg {
  width: min(100%, 400px);
  max-width: 100%;
  height: auto;
  overflow: visible;
  margin-inline: auto;
  display: block;
}

.ring-caption {
  margin: 0;
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--slate-500); text-align: center; line-height: 1.35;
  max-width: 28ch;
}

.ring-track-outer,
.ring-track-inner {
  stroke: var(--line-strong);
  stroke-width: 1.2;
}
.ring-arc {
  fill: var(--sky-tint);
  stroke: none;
  transition: fill 300ms ease;
}

.ring-seg { cursor: pointer; }
.ring-seg:not(.is-active):hover .ring-arc,
.ring-seg:not(.is-active):focus-visible .ring-arc { fill: var(--sky-tint); }
.ring-seg.is-active .ring-arc { fill: var(--gold-400); }
.ring-seg:focus-visible { outline: 2px solid var(--sky-700); outline-offset: 2px; }

.ring-legend {
  list-style: none; margin: .35rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem;
  width: 100%; max-width: 520px;
}
.ring-legend a {
  display: block; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--white); text-decoration: none; color: var(--ink);
  text-align: center; font-size: var(--t-small); line-height: 1.35;
  transition: border-color var(--dur-fast) ease;
}
.ring-legend a:hover { border-color: var(--hover-border); }
.ring-legend a:hover b { color: var(--hover-ink); }
.ring-legend b { display: block; color: var(--sky-700); font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; margin-bottom: .15rem; }
.ring-legend span { display: block; font-weight: 600; }
.ring-legend .is-active a, .ring-legend li.is-active a { border-color: var(--navy-900); background: var(--mist); }

/* Narrow column beside copy — stack the legend so it fits the float. */
.ring-wrap.is-compact {
  max-width: 340px;
  gap: .5rem;
}
.ring-wrap.is-compact .ring-svg { width: 100%; max-width: 300px; }
.ring-wrap.is-compact .ring-caption { display: none; } /* legend carries the labels */
.ring-wrap.is-compact .ring-legend {
  grid-template-columns: 1fr;
  max-width: none;
}
.ring-wrap.is-compact .ring-legend a {
  text-align: left; display: flex; align-items: baseline; gap: .45rem; padding: .55rem .7rem;
}
.ring-wrap.is-compact .ring-legend b { display: inline; margin-bottom: 0; }
.ring-wrap.is-compact .ring-legend span::before { content: '— '; font-weight: 400; color: var(--ink-quiet); }

/* On navy the arcs need to read against a dark ground. */
.tone-navy .ring-arc { fill: var(--navy-800); }
.tone-navy .ring-track-outer,
.tone-navy .ring-track-inner { stroke: var(--navy-line-2); }
.tone-navy .ring-caption { color: var(--on-navy-quiet); }
.tone-navy .ring-legend a { background: transparent; border-color: var(--navy-line); color: var(--on-navy); }
.tone-navy .ring-legend b { color: var(--gold-400); }
.tone-navy .ring-legend .is-active a,
.tone-navy .ring-legend li.is-active a { background: var(--tone-navy-card); border-color: var(--gold-400); }

@media (max-width: 640px) {
  .ring-legend { grid-template-columns: 1fr; }
  .ring-legend a { text-align: left; display: flex; align-items: baseline; gap: .45rem; }
  .ring-legend b { display: inline; margin-bottom: 0; }
  .ring-legend span::before { content: '— '; font-weight: 400; color: var(--ink-quiet); }
}

/* ==========================================================================
   4. productArchitecture — the two-track spine.
   ========================================================================== */
/* productArchitecture — three products in sequence, the return that closes
   them into a loop, and the investor entry alongside. HTML, not a drawing:
   see the note above the component in partials/diagrams.js. */
.pa { max-width: 1040px; margin: 0 auto; display: grid; gap: var(--s-3); }

.pa-track {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3); list-style: none; margin: 0; padding: 0;
  counter-reset: none;
}
.pa-step { position: relative; display: flex; }

/* The arrow between steps sits in the gap rather than inside either card, so
   it never reflows the text it is pointing away from. */
.pa-step + .pa-step::before {
  content: ''; position: absolute; top: 2.35rem; left: calc(var(--s-3) * -1);
  width: var(--s-3); height: 1px; background: var(--line-strong);
}
.pa-step + .pa-step::after {
  content: ''; position: absolute; top: calc(2.35rem - 3px); left: -7px;
  border-left: 6px solid var(--line-strong);
  border-block: 4px solid transparent;
}

.pa-card {
  display: grid; gap: .4rem; align-content: start;
  width: 100%; padding: var(--s-3);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-m);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur-fast) ease;
}
.pa-card:hover { border-color: var(--hover-border); }
.pa-card:hover .pa-name { color: var(--hover-ink); }
.pa-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pa-num {
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .1em; color: var(--sky-700);
}
.pa-name { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.02em; }
.pa-q { font-size: var(--t-body); font-weight: 600; color: var(--ink); }
.pa-keeps { font-size: var(--t-small); color: var(--ink-quiet); }

/*
  The return. It was missing entirely from the old drawing, which is why that
  one argued a line while every sentence around it argued a loop — so here it
  is the widest thing in the component. Gold as a rule and an arrowhead, never
  as the type: see the gold rule in base.css.
*/
.pa-return {
  /* base.css puts a 68ch measure on every <p>. This one is a band that has to
     span the whole track to read as a return, so it opts out; the note inside
     keeps a measure of its own. */
  max-width: none;
  position: relative; margin: 0; padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) + 1.4rem);
  border: 1px solid var(--line); border-left: 3px solid var(--gold-400);
  border-radius: var(--r-s); background: var(--mist);
  display: grid; gap: .25rem;
}
.pa-return::before {
  content: ''; position: absolute; left: var(--s-3); top: calc(var(--s-3) + .35rem);
  border-right: 7px solid var(--gold-400);
  border-block: 5px solid transparent;
}
.pa-return-label {
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.pa-return-note { font-size: var(--t-small); color: var(--ink-quiet); max-width: 78ch; }

.pa-investor { display: grid; gap: .6rem; }
.pa-investor-tag {
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-quiet);
}
.pa-card-investor { background: var(--mist); border-style: dashed; }

@media (max-width: 900px) {
  .pa-track { grid-template-columns: 1fr; }
  /* The connector turns to point down the stack rather than across it. */
  .pa-step + .pa-step::before {
    top: calc(var(--s-3) * -1); left: var(--s-4);
    width: 1px; height: var(--s-3);
  }
  .pa-step + .pa-step::after {
    top: -7px; left: calc(var(--s-4) - 4px);
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 6px solid var(--line-strong); border-bottom: 0;
  }
}

/* ==========================================================================
   5. compoundCurve — doing it early compounds.
   ========================================================================== */
.cpd { display: grid; gap: var(--s-3); }
.cpd-svg { width: 100%; height: auto; overflow: visible; }
.cpd-early { fill: none; stroke: var(--sky-600); stroke-width: 3; stroke-linecap: round; }
.cpd-late { fill: none; stroke: var(--navy-900); stroke-width: 3; stroke-linecap: round; }
.cpd-void { stroke: var(--slate-500); stroke-width: 1.2; stroke-dasharray: 6 5; }
.cpd-dot { fill: var(--gold-400); stroke: var(--navy-900); stroke-width: 1.2; }
.cpd-annot { font-size: 11.5px; font-weight: 600; fill: var(--navy-900); }

.cpd-key { display: flex; flex-wrap: wrap; gap: var(--s-3); font-size: var(--t-small); color: var(--ink-soft); }
.cpd-key span { display: inline-flex; align-items: center; gap: .5rem; }
.cpd-swatch { width: 14px; height: 3px; border-radius: 2px; flex: none; }
.cpd-swatch-early { background: var(--sky-600); }
.cpd-swatch-late { background: var(--navy-900); }

@media (max-width: 700px) {
  .cpd-annot { display: none; } /* they overlap once the chart is a third of its design width */
}

/* ==========================================================================
   6. readOnlySecurity — the boundary, then the two live demonstrations.
   ========================================================================== */
.ros { display: grid; gap: var(--s-5); }
.ros-svg { width: 100%; height: auto; overflow: visible; }
.ros-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.ros-detail > div { display: grid; gap: var(--s-2); align-content: start; }
@media (max-width: 900px) { .ros-detail { grid-template-columns: 1fr; } }

/* The section this sits in is deliberately light — see the comment in
   scripts/pages/home.js. The tone-navy overrides that used to live here were
   removed with it: they inverted the wrapper SVG but not the two interactive
   components embedded below it, which is how "Revoke the role" ended up
   rendering white on white. */

/* ==========================================================================
   7. hireBridge — three HTML cards (homepage and /how-it-works).
   ========================================================================== */
.hire-intro-split {
  margin-top: clamp(2.5rem, 5vw, 3rem);
  margin-bottom: 1.5rem;
  align-items: center;
  /* Photo is landscape with two people — give it the wider column. */
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.hire-intro-copy { min-width: 0; }
.hire-intro-copy .h3 { max-width: 18ch; }
.hire-intro-copy p { max-width: 36ch; }
.hire-intro-photo { margin: 0; }
.hire-intro-photo img {
  object-fit: cover;
  /* Bias slightly left so both faces stay in frame. */
  object-position: 42% 40%;
  /* Do not cap height below the native 3:2 frame — that zooms and crops the second person. */
  max-height: none;
  width: 100%;
  aspect-ratio: 3 / 2;
}
@media (max-width: 900px) {
  .hire-intro-split { grid-template-columns: 1fr; }
  .hire-intro-copy .h3,
  .hire-intro-copy p { max-width: none; }
  .hire-intro-photo img {
    max-height: none;
    object-position: 40% 38%;
  }
}

.hb-cards { margin: 0; }
.hb-track {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3);
}
.hb-card {
  position: relative;
  display: grid; gap: .55rem; align-content: start;
  margin: 0; padding: var(--s-3);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-m);
  transition: border-color var(--dur-fast) ease;
}
.hb-card:hover { border-color: var(--hover-border); }
.hb-card:hover .hb-title { color: var(--hover-ink); }
.hb-card + .hb-card::before {
  content: '';
  position: absolute; top: 2.1rem; left: calc(var(--s-3) * -1);
  width: var(--s-3); height: 2px; background: var(--sky-500);
}
.hb-card + .hb-card::after {
  content: '';
  position: absolute; top: calc(2.1rem - 3px); left: -7px;
  border-left: 6px solid var(--sky-500);
  border-block: 4px solid transparent;
}
.hb-icon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  color: var(--sky-700);
  background: var(--mist); border-radius: var(--r-s);
}
.hb-svg { width: 28px; height: 28px; }
.hb-kicker {
  margin: 0;
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sky-700);
}
.hb-title { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.02em; }
.hb-points { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .45rem; }
.hb-points li {
  font-size: var(--t-small); color: var(--ink-quiet); line-height: 1.45;
  padding-left: .85rem; position: relative;
}
.hb-points li::before {
  content: '';
  position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 999px; background: var(--gold-400);
}
.hb-note {
  margin: var(--s-3) 0 0;
  font-size: var(--t-small); color: var(--ink-quiet); max-width: 68ch;
}
@media (max-width: 800px) {
  .hb-track { grid-template-columns: 1fr; }
  .hb-card + .hb-card::before {
    top: auto; bottom: 100%; left: 1.65rem;
    width: 2px; height: var(--s-3);
  }
  .hb-card + .hb-card::after {
    top: auto; bottom: calc(100% - 2px); left: calc(1.65rem - 3px);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid var(--sky-500);
    border-bottom: 0;
  }
}
.pbo {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3);
}
.pbo-card {
  display: grid; gap: .45rem; align-content: start;
  margin: 0; padding: var(--s-3);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-m);
  transition: border-color var(--dur-fast) ease;
}
.pbo-card:hover {
  border-color: var(--hover-border);
}
.pbo-card:hover .pbo-name { color: var(--hover-ink); }
.pbo-num {
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .1em; color: var(--sky-700);
}
.pbo-name { font-size: var(--t-body); font-weight: 700; letter-spacing: -0.02em; }
.pbo-copy { margin: 0; font-size: var(--t-small); color: var(--ink-quiet); line-height: 1.45; }
@media (max-width: 900px) { .pbo { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pbo { grid-template-columns: 1fr; } }

/* ==========================================================================
   8. handoverDeliverable — full-width repo pack, then operating extras below.
   ========================================================================== */
.handover-deliverable {
  display: grid;
  gap: var(--s-3);
}
.handover-deliverable-repo .pack { margin: 0; }
.ho-foot { margin: 0; max-width: 68ch; }

.ho-wrap { display: grid; gap: var(--s-2); min-width: 0; }
.ho-intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-2);
  align-items: center;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--mist);
}
.ho-intro-copy {
  margin: 0; max-width: 42ch; font-size: var(--t-small); color: var(--ink-soft);
}

.ho-devops {
  display: block;
  flex: none;
  width: min(240px, 100%);
  margin: 0;
}
.ho-devops img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-s);
}

.ho-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
  align-items: start;
}
.ho-card {
  padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--white);
  transition: border-color var(--dur-fast) ease;
}
.ho-card:hover { border-color: var(--hover-border); }
.ho-card-head { margin-bottom: .65rem; }
.ho-card-title {
  margin: 0 0 .2rem; font-size: var(--t-body); font-weight: 600; color: var(--ink);
}
.ho-card-tag { margin: 0; font-size: var(--t-micro); color: var(--ink-quiet); }

.ho-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ho-item {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: .45rem .55rem;
  align-items: start; font-size: var(--t-small);
}
.ho-pass {
  display: inline-flex; flex: none; width: 16px; height: 16px; margin-top: .08rem;
  color: var(--pass-ok);
}
.ho-pass svg { display: block; width: 16px; height: 16px; }
.ho-item-mark {
  display: inline-flex; flex: none; width: 16px; height: 16px; margin-top: .05rem;
  opacity: .92;
}
.ho-item-body {
  display: grid; gap: .05rem; min-width: 0;
}
.ho-item-body strong {
  font-size: var(--t-micro); font-weight: 600; color: var(--ink);
}
.ho-item-body span { font-size: var(--t-micro); color: var(--ink-quiet); line-height: 1.35; }

html.js .ho-item {
  opacity: 0; transform: translateX(-6px);
  transition: opacity 320ms ease, transform 360ms var(--ease);
  transition-delay: calc(var(--i, 0) * 40ms + 80ms);
}
html.js .ho-card.revealed .ho-item { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .ho-cards { grid-template-columns: 1fr; }
  .ho-intro { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
@media (max-width: 900px) {
  .handover-deliverable .pack { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .ho-item { opacity: 1; transform: none; transition: none; }
}