/* ===========================================================================
   Inner pages. Same grounds, same accent stops, same span-free chrome.
   These read as documents, not as scroll experiences: the home page is the
   experience and these are where the substance lives.
   ========================================================================= */

body.inner { padding-bottom: 0; }

/* ======================================================= services page ===
   Three moves. The engagement drawn as one line; the two services as
   editorial spreads with the photograph bleeding off the page edge; the
   technology as an index you open one discipline at a time.               */

/* --------------------------------------------------------- the opening -- */
.svc-open { overflow: clip; }
.open-stage {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  column-gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(4.5rem, 11vh, 8rem) var(--sc-gutter) calc(var(--span-h, 0px) + clamp(2rem, 5vh, 3.5rem));
  background:
    radial-gradient(56% 58% at 8% 88%, rgb(224 188 99 / 0.13) 0%, transparent 66%),
    radial-gradient(50% 46% at 92% 6%, rgb(126 164 196 / 0.12) 0%, transparent 62%),
    var(--ink);
}
@media (max-width: 980px) {
  .open-stage { grid-template-columns: 1fr; align-content: center; row-gap: clamp(1.6rem, 5vw, 2.6rem); }
}
.open-h {
  margin: var(--sc-5) 0 0; max-width: 14ch;
  font-family: var(--sc-font-display);
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.4rem);
  font-weight: 500; line-height: 1.04; letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
}
.open-lede {
  margin: clamp(1.4rem, 3vw, 2.2rem) 0 0; max-width: 40ch;
  font-size: 1rem; line-height: 1.7; color: var(--sc-ink-soft);
}
@media (max-width: 980px) { .open-lede { display: none; } }
.open-canvas { min-width: 0; }
.open-canvas svg { display: block; width: 100%; height: auto; overflow: visible; }
.open-stat {
  grid-column: 1 / -1; margin: clamp(1.4rem, 3vh, 2.2rem) 0 0;
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--sc-font-mono); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.open-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--gold-lt); box-shadow: 0 0 0 4px rgb(224 188 99 / 0.14);
}

/* the line, its stations, and the ground they are drawn on */
.sv-grid { stroke: rgb(242 240 235 / 0.05); stroke-width: 1; }
.sv-env {
  fill: rgb(126 164 196 / 0.045);
  stroke: rgb(224 188 99 / 0.3); stroke-width: 1; stroke-dasharray: 5 5;
}
.sv-env-t {
  font-family: var(--sc-font-mono); font-size: 9.5px;
  letter-spacing: 0.2em; fill: var(--gold-lt); opacity: 0.85;
}
.sv-line { fill: none; stroke: var(--gold-lt); stroke-width: 1.6; stroke-linecap: round; }
.sv-line--ghost { stroke: rgb(242 240 235 / 0.09); stroke-width: 1.2; }
.sv-node { fill: var(--ink); stroke: var(--gold-lt); stroke-width: 1.6; }
.sv-core { fill: var(--gold-lt); }
.sv-halo { fill: none; stroke: var(--gold-lt); stroke-width: 1; }
.sv-t {
  font-family: var(--sc-font-mono); font-size: 10.5px;
  letter-spacing: 0.09em; fill: #E7EDF1;
  paint-order: stroke; stroke: rgb(10 13 16 / 0.7); stroke-width: 3px;
}
.sv-t--key { fill: var(--gold-lt); letter-spacing: 0.16em; }
.sv-pulse { fill: #FFF3D6; }

/* -------------------------------------------------------- the spreads --- */
.spread {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: stretch;
  overflow: clip;
}
.spread--flip .spread-fig { order: 2; }
@media (max-width: 900px) {
  .spread { grid-template-columns: 1fr; }
  .spread--flip .spread-fig { order: 0; }
}
/* the photograph runs to the edge of the page rather than sitting in a box */
.spread-fig {
  position: relative; margin: 0; overflow: hidden;
  min-height: clamp(22rem, 60vh, 44rem);
}
.spread-fig img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  clip-path: inset(0 calc((1 - var(--wp, 1)) * 100%) 0 0);
}
.spread--flip .spread-fig img { clip-path: inset(0 0 0 calc((1 - var(--wp, 1)) * 100%)); }
.spread-edge {
  position: absolute; top: 0; bottom: 0; width: 2px; z-index: 2;
  left: calc(var(--wp, 1) * 100%);
  background: linear-gradient(to bottom,
    transparent, var(--gold-lt) 14%, #FFF0CE 50%, var(--gold-lt) 86%, transparent);
  box-shadow: 0 0 12px 2px rgb(224 188 99 / 0.5), 0 0 30px 7px rgb(184 146 58 / 0.18);
  opacity: calc(clamp(0, var(--wp, 1) / 0.06, 1) * clamp(0, (1 - var(--wp, 1)) / 0.2, 1));
}
.spread--flip .spread-edge { left: calc((1 - var(--wp, 1)) * 100%); }
@media (prefers-reduced-motion: reduce) {
  .spread-fig img { clip-path: none; }
  .spread-edge { display: none; }
}

.spread-body {
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.5rem, 5vw, 5.5rem);
  display: grid; align-content: center;
  gap: clamp(2.4rem, 5vw, 3.8rem);
}
.spread-no {
  margin: 0 0 var(--sc-4); display: flex; align-items: baseline; gap: 0.9rem;
  font-family: var(--sc-font-mono); font-size: 0.66rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.spread-no span {
  font-family: var(--sc-font-display); font-size: 2.4rem; font-weight: 600;
  line-height: 1; letter-spacing: -0.02em; color: var(--sc-accent);
}
.spread-h {
  margin: 0; max-width: 15ch;
  font-family: var(--sc-font-display);
  font-size: clamp(1.7rem, 1.05rem + 2.1vw, 2.9rem);
  font-weight: 500; line-height: 1.06; letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
}
.spread-lede {
  margin: clamp(1.2rem, 2.6vw, 1.8rem) 0 0; max-width: 46ch;
  font-size: 1.04rem; line-height: 1.7; color: var(--sc-ink-soft);
}

/* the lists, set as a ledger on the ground rather than inside a card */
.ledger-h {
  margin: 0 0 var(--sc-5); padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--sc-hairline-strong);
  font-family: var(--sc-font-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-accent);
}
.ledger-rows { list-style: none; margin: 0; padding: 0; counter-reset: lr; }
.ledger-rows li {
  counter-increment: lr;
  position: relative; padding: 0.9rem 0 0.9rem 2.8rem;
  border-bottom: 1px solid var(--sc-hairline);
  font-size: 1rem; line-height: 1.6; color: var(--sc-ink-soft);
}
.ledger-rows li:last-child { border-bottom: 0; }
.ledger-rows li::before {
  content: counter(lr, decimal-leading-zero);
  position: absolute; left: 0; top: 1.05rem;
  font-family: var(--sc-font-mono); font-size: 0.64rem;
  letter-spacing: 0.1em; color: var(--sc-accent); opacity: 0.9;
}
.ledger--out .ledger-rows li::before { content: "\2192"; font-size: 0.78rem; top: 0.95rem; }

/* ------------------------------------------------------- the stack ------ */
.stack-sec { padding-block: clamp(4.5rem, 10vw, 8rem); }
.stack-head { margin-bottom: clamp(2.2rem, 5vw, 3.4rem); }
.stack-h {
  margin: var(--sc-5) 0 0; max-width: 20ch;
  font-family: var(--sc-font-display);
  font-size: clamp(1.6rem, 1.05rem + 1.9vw, 2.7rem);
  font-weight: 500; line-height: 1.08; letter-spacing: var(--sc-track-tight);
}
.disc { border-top: 1px solid var(--sc-hairline); }
.disc-row { border-bottom: 1px solid var(--sc-hairline); }
.disc-btn {
  width: 100%; display: grid; align-items: center;
  grid-template-columns: 3rem minmax(0, 1fr) 1.6rem;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  padding: clamp(0.9rem, 2vw, 1.35rem) 0;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  color: #8E9AA2;
  transition: color 240ms var(--sc-ease-out), padding-left 240ms var(--sc-ease-out);
}
.disc-btn:hover { color: #D7DEE3; padding-left: 0.5rem; }
.disc-btn:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: -3px; }
.disc-no { font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.14em; }
.disc-name {
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: clamp(1.05rem, 0.92rem + 0.55vw, 1.5rem); line-height: 1.2;
}
.disc-mark { position: relative; width: 14px; height: 14px; justify-self: end; }
.disc-mark::before, .disc-mark::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 300ms var(--sc-ease-out), opacity 240ms var(--sc-ease-out);
}
.disc-mark::before { width: 14px; height: 1.4px; }
.disc-mark::after { width: 1.4px; height: 14px; }
.disc-row.on .disc-btn { color: #FFF6E2; padding-left: 0.5rem; }
.disc-row.on .disc-no { color: var(--gold-lt); }
.disc-row.on .disc-mark { color: var(--gold-lt); }
.disc-row.on .disc-mark::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }

.disc-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--sc-ease-out);
}
.disc-row.on .disc-panel { grid-template-rows: 1fr; }
.disc-panel > div { overflow: hidden; min-height: 0; }
.disc-tools {
  list-style: none; margin: 0; padding: 0 0 clamp(1.2rem, 2.6vw, 1.9rem) 3rem;
  columns: 3; column-gap: clamp(1.5rem, 3vw, 3rem);
}
@media (max-width: 820px) { .disc-tools { columns: 2; padding-left: 2rem; } }
@media (max-width: 520px) { .disc-tools { columns: 1; } }
.disc-tools li {
  break-inside: avoid; padding: 0.28rem 0;
  font-size: 0.95rem; line-height: 1.5; color: #A9B7BE;
  opacity: 0; transform: translateY(6px);
  transition: opacity 320ms var(--sc-ease-out), transform 320ms var(--sc-ease-out);
}
.disc-row.on .disc-tools li { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .disc-panel { transition: none; }
  .disc-tools li { opacity: 1; transform: none; transition: none; }
}

.svc-close { padding-block: clamp(4.5rem, 10vw, 8rem); }
.close-h {
  margin: 0; max-width: 22ch;
  font-family: var(--sc-font-display);
  font-size: clamp(1.7rem, 1.05rem + 2.2vw, 3rem);
  font-weight: 500; line-height: 1.08; letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
}

/* --------------------------------------------------------- case studies --
   Below the demo the page turns into a dossier: a spec strip, the two
   columns a buyer reads, and then the numbers, set large, because the
   numbers are the argument.                                              */
.case-body { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(4rem, 9vw, 7rem); }

.dossier {
  margin: 0 0 clamp(3rem, 7vw, 5rem);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.6rem);
  border-top: 1px solid var(--sc-hairline-strong);
  border-bottom: 1px solid var(--sc-hairline-strong);
  padding-block: clamp(1rem, 2.4vw, 1.5rem);
}
@media (max-width: 620px) { .dossier { grid-template-columns: 1fr; gap: 0.9rem; } }
.dossier dt {
  font-family: var(--sc-font-mono); font-size: 0.6rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-accent);
  margin-bottom: 0.35rem;
}
.dossier dd {
  margin: 0; font-family: var(--sc-font-display);
  font-size: clamp(1rem, 0.9rem + 0.45vw, 1.28rem); font-weight: 500;
  line-height: 1.25; color: var(--sc-ink);
}

.sec-h {
  margin: 0 0 clamp(1rem, 2.4vw, 1.6rem);
  font-family: var(--sc-font-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.85rem);
  font-weight: 500; line-height: 1.15; letter-spacing: var(--sc-track-tight);
  color: var(--sc-ink);
}
.sec-k {
  display: block; margin-bottom: 0.6rem;
  font-family: var(--sc-font-mono); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-accent);
}

.cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.4rem, 6vw, 5rem);
}
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; gap: 3rem; } }
.col-lede {
  margin: 0 0 clamp(1.2rem, 2.6vw, 1.8rem); max-width: 46ch;
  font-size: 1.02rem; line-height: 1.65; color: var(--sc-ink-soft);
}

/* what the client was facing: a plain list, marked rather than numbered */
.probs { list-style: none; margin: 0; padding: 0; }
.probs li {
  position: relative; padding: 0.65rem 0 0.65rem 1.15rem;
  font-size: 0.98rem; line-height: 1.6; color: var(--sc-ink-soft);
}
/* the marker is centred on the first line rather than guessed at: the top
   padding, plus half a line box, less half the dot */
.probs li::before {
  content: ""; position: absolute; left: 0;
  top: calc(0.65rem + 0.8em - 2.5px);
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--sc-accent); opacity: 0.85;
}

/* what we built: the capability on its own line, the detail under it, so the
   name of the thing is not buried mid-sentence */
.caps { list-style: none; margin: 0; padding: 0; counter-reset: cp; }
.caps li {
  counter-increment: cp;
  position: relative; padding: 0.95rem 0 0.95rem 2.6rem;
  border-top: 1px solid var(--sc-hairline);
}
.caps li:last-child { border-bottom: 1px solid var(--sc-hairline); }
.caps li::before {
  content: counter(cp, decimal-leading-zero);
  position: absolute; left: 0; top: 1.15rem;
  font-family: var(--sc-font-mono); font-size: 0.62rem;
  letter-spacing: 0.1em; color: var(--sc-accent);
}
.cap-h {
  display: block; font-family: var(--sc-font-display);
  font-size: 1.02rem; font-weight: 500; line-height: 1.3;
  color: var(--sc-ink);
}
.cap-t {
  display: block; margin-top: 0.3rem;
  font-size: 0.94rem; line-height: 1.6; color: var(--sc-ink-soft);
}

/* the numbers, which are the whole argument, set at the size that says so */
.proof { margin-top: clamp(3.5rem, 8vw, 6rem); }
.figs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(1.2rem, 3vw, 2.4rem);
  border-top: 1px solid var(--sc-hairline-strong);
  padding-top: clamp(1.6rem, 3.4vw, 2.4rem);
}
.fig { min-width: 0; }
.fig-n {
  margin: 0; font-family: var(--sc-font-display);
  font-size: clamp(2.2rem, 1.3rem + 3vw, 4rem);
  font-weight: 600; line-height: 0.95; letter-spacing: -0.02em;
  color: var(--sc-accent);
}
.fig-u { font-size: 0.62em; font-weight: 500; margin-left: 0.04em; }
.fig-c {
  margin: 0.7rem 0 0; max-width: 24ch;
  font-size: 0.92rem; line-height: 1.5; color: var(--sc-ink-soft);
}
.notes {
  list-style: none; margin: clamp(2rem, 4.5vw, 3rem) 0 0; padding: 0;
  display: grid; gap: 0.7rem;
}
.notes li {
  position: relative; padding: 0.75rem 0 0.75rem 1.7rem;
  border-top: 1px solid var(--sc-hairline);
  font-size: 0.98rem; line-height: 1.6; color: var(--sc-ink-soft);
  max-width: 62ch;
}
/* a tick, because these are the outcomes that are not numbers */
.notes li::before {
  content: ""; position: absolute; left: 1px;
  top: calc(0.75rem + 0.8em - 5px);
  width: 9px; height: 5px;
  border-left: 1.6px solid var(--sc-accent);
  border-bottom: 1.6px solid var(--sc-accent);
  transform: rotate(-45deg);
}
.notes li b {
  font-family: var(--sc-font-display); font-weight: 500; color: var(--sc-ink);
}

.verdict {
  margin: clamp(2.4rem, 5vw, 3.4rem) 0 0; max-width: 44ch;
  padding-left: clamp(1rem, 2.4vw, 1.6rem);
  border-left: 2px solid var(--sc-accent);
  font-family: var(--sc-font-display);
  font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.5rem);
  font-weight: 400; line-height: 1.4; letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink);
}

.stackrow {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid var(--sc-hairline);
  display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 1rem clamp(1.5rem, 3vw, 2.4rem); align-items: start;
}
@media (max-width: 700px) { .stackrow { grid-template-columns: 1fr; } }
.stack-k {
  margin: 0; font-family: var(--sc-font-mono); font-size: 0.6rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-accent);
  padding-top: 0.4rem;
}
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chips li {
  padding: 0.34rem 0.75rem; border-radius: 999px;
  border: 1px solid var(--sc-hairline-strong);
  font-size: 0.86rem; color: var(--sc-ink-soft);
}

/* ======================================================= the case index ==
   Three entries, alternating sides, each a whole clickable block that opens
   its own page. Not three rows of text stacked line by line.            */
.index-list { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.entry {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  text-decoration: none; color: inherit;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--sc-hairline);
}
.entry:last-child { border-bottom: 0; }
.entry--flip .entry-fig { order: 2; }
@media (max-width: 820px) {
  .entry { grid-template-columns: 1fr; gap: 1.8rem; }
  .entry--flip .entry-fig { order: 0; }
}
.entry-fig {
  margin: 0; overflow: hidden; border-radius: var(--sc-r-md);
  aspect-ratio: 4 / 3; background: var(--concrete);
  box-shadow: var(--sc-e1);
  transition: box-shadow 340ms var(--sc-ease-out);
}
.entry-fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 760ms var(--sc-ease-out); }
.entry:hover .entry-fig { box-shadow: var(--sc-e3); }
@media (hover: hover) and (pointer: fine) { .entry:hover .entry-fig img { transform: scale(1.045); } }
.entry:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 10px; border-radius: var(--sc-r-md); }
.entry-meta {
  display: flex; gap: clamp(0.7rem, 1.8vw, 1.4rem); flex-wrap: wrap; align-items: center;
  font-family: var(--sc-font-mono); font-size: 0.64rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--sc-ink-soft); margin: 0 0 1.1rem;
}
.entry-meta span:first-child { color: var(--gold-deep); }
.entry-h {
  font-family: var(--sc-font-display);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  font-weight: 500; line-height: 1.08; letter-spacing: var(--sc-track-tight);
  color: var(--sc-ink); margin: 0; max-width: 22ch; text-wrap: balance;
  transition: color 200ms var(--sc-ease-out);
}
.entry:hover .entry-h { color: var(--gold-deep); }
.entry-sum { margin: 1.1rem 0 0; font-size: 1rem; line-height: 1.6; color: var(--sc-ink-soft); max-width: 54ch; }
.entry-facts {
  list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: grid; gap: 0.5rem;
}
.entry-facts li { font-size: 0.9rem; line-height: 1.5; color: var(--sc-ink-soft); }
.entry-facts b {
  font-family: var(--sc-font-display); font-weight: 500;
  color: var(--sc-ink); margin-right: 0.35rem;
}
.entry-go {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.8rem;
  font-family: var(--sc-font-mono); font-size: 0.7rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-deep);
  padding-bottom: 4px; border-bottom: 1px solid currentColor;
  transition: gap 200ms var(--sc-ease-out);
}
.entry:hover .entry-go { gap: 0.85rem; }

/* ============================================== a single case study page */
.case-top { padding-block: clamp(7.5rem, 15vh, 11rem) clamp(2rem, 5vw, 3.5rem); }
.crumb {
  font-family: var(--sc-font-mono); font-size: 0.68rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--sc-ink-soft); margin: 0;
  display: flex; gap: 0.7rem; align-items: center;
}
.crumb a { color: var(--gold-deep); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.case-h {
  font-family: var(--sc-font-display);
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.9rem);
  font-weight: 500; line-height: 1.03; letter-spacing: var(--sc-track-tight);
  margin: var(--sc-5) 0 0; max-width: 18ch; text-wrap: balance;
}
.case-sum { margin: var(--sc-6) 0 0; font-size: 1.12rem; line-height: 1.62; color: var(--sc-ink-soft); max-width: 58ch; }

.case-hero-wrap { margin-block: clamp(1rem, 3vw, 2.5rem); }
.case-hero-wrap > div {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
@media (max-width: 820px) { .case-hero-wrap > div { grid-template-columns: 1fr; gap: 2rem; } }
.case-hero { margin: 0; overflow: hidden; border-radius: var(--sc-r-md); aspect-ratio: 3 / 2; box-shadow: var(--sc-e2); }
.case-hero img { width: 100%; height: 100%; object-fit: cover; }
.case-hl {
  list-style: none; margin: 0; padding: 0 0 0 1.5rem;
  border-left: 2px solid var(--gold-deep);
}
.case-hl li {
  font-size: 1rem; line-height: 1.5; color: var(--sc-ink);
  padding: 0.85rem 0; border-bottom: 1px solid var(--sc-hairline);
}
.case-hl li:last-child { border-bottom: 0; }
.results-h {
  font-family: var(--sc-font-mono); font-size: 0.68rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sc-accent); margin: 0;
}
.case-next { margin-top: var(--sc-5); }

/* ------------------------------------------------- services, reinforced */
.svc-long__head { grid-template-columns: 4.5rem minmax(0, 1.15fr) minmax(0, 0.72fr); }
@media (max-width: 980px) { .svc-long__head { grid-template-columns: 4.5rem minmax(0, 1fr); } .svc-shot { display: none; } }
@media (max-width: 640px) { .svc-long__head { grid-template-columns: 1fr; } }
.svc-shot {
  margin: 0; overflow: hidden; border-radius: var(--sc-r-md);
  aspect-ratio: 4 / 5; box-shadow: var(--sc-e2);
}
.svc-shot img { width: 100%; height: 100%; object-fit: cover; }
.stack-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: end;
}
@media (max-width: 860px) { .stack-head { grid-template-columns: 1fr; gap: 1.4rem; } }
.stack-note { max-width: 46ch; font-size: 0.98rem; }


/* ------------------------------------------------------------- legal ----
   Nine documents that people read only when something has gone wrong or a
   procurement form demands it. One column, a generous measure, real headings,
   and nothing decorative in the way.                                      */
.legal-h { max-width: 22ch; }
.legal-date {
  margin: var(--sc-5) 0 0;
  font-family: var(--sc-font-mono); font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.legal { max-width: 72ch; }
.legal h2 {
  font-family: var(--sc-font-display);
  font-size: clamp(1.15rem, 1rem + 0.55vw, 1.5rem);
  font-weight: 500; line-height: 1.25;
  letter-spacing: var(--sc-track-snug);
  margin: clamp(2.4rem, 5vw, 3.4rem) 0 0;
  padding-top: clamp(1.4rem, 2.8vw, 2rem);
  border-top: 1px solid var(--sc-hairline);
  color: var(--sc-ink);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal p, .legal ul { margin: clamp(0.9rem, 2vw, 1.3rem) 0 0; }
.legal p, .legal li {
  font-size: 1rem; line-height: 1.75; color: var(--sc-ink-soft);
}
.legal strong { color: var(--sc-ink); font-weight: 500; }
.legal ul { padding-left: 0; list-style: none; }
.legal li { position: relative; padding-left: 1.5rem; margin-top: 0.55rem; }
/* a gold tick of a marker, the same hairline the rest of the site draws with */
.legal li::before {
  content: ""; position: absolute; left: 2px; top: 0.74em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--sc-accent); opacity: 0.8;
}
.legal a { color: var(--gold-deep); text-underline-offset: 3px; }
.legal a:hover { text-decoration-thickness: 2px; }


/* ==================================================== case simulations ===
   Each case page runs the thing it is describing. The stage is a pinned act,
   so the visitor scrubs the sequence rather than watching it.             */
.sim-sec { overflow: clip; }
.sim-stage {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(4.5rem, 10vh, 7rem) var(--sc-gutter) calc(var(--span-h, 0px) + clamp(2rem, 5vh, 3.5rem));
  background:
    radial-gradient(58% 60% at 12% 86%, rgb(224 188 99 / 0.14) 0%, transparent 68%),
    radial-gradient(52% 48% at 88% 8%, rgb(126 164 196 / 0.13) 0%, transparent 64%),
    var(--ink);
}
@media (max-width: 900px) {
  .sim-stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: center; }
}

.sim-tag {
  margin: 0 0 0.5rem;
  font-family: var(--sc-font-mono); font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-lt);
}
.sim-prompt {
  display: flex; gap: 0.6rem; align-items: flex-start;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--sc-hairline); border-radius: 8px;
  background: rgb(255 253 246 / 0.035);
  font-family: var(--sc-font-mono); font-size: 0.8rem; line-height: 1.6;
  color: #F2F0EB; min-height: 3.4rem;
}
.sim-prompt--two { margin-top: 0.7rem; opacity: 0; transition: opacity 260ms var(--sc-ease-out); }
.sim-chev { color: var(--gold-lt); flex: none; }
.sim-typed { word-break: break-word; }
.sim-caret {
  display: inline-block; width: 7px; height: 1em; margin-left: 1px;
  background: var(--gold-lt); vertical-align: -2px;
  animation: simBlink 1s steps(1) infinite;
}
@keyframes simBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.sim-caret.off { display: none; }
@media (prefers-reduced-motion: reduce) { .sim-caret { display: none; } }

.sim-checks { list-style: none; margin: clamp(1.4rem, 3vw, 2rem) 0 0; padding: 0; display: grid; gap: 0.5rem; }
.sim-checks li {
  position: relative; padding-left: 1.6rem;
  font-family: var(--sc-font-mono); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #7D8B95; transition: color 300ms var(--sc-ease-out);
}
.sim-checks li::before {
  content: ""; position: absolute; left: 0; top: 0.32em;
  width: 9px; height: 9px; border-radius: 2px;
  border: 1px solid rgb(242 240 235 / 0.28);
  transition: background-color 300ms var(--sc-ease-out), border-color 300ms var(--sc-ease-out);
}
.sim-checks li.on { color: #E7EDF1; }
.sim-checks li.on::before { background: var(--gold-lt); border-color: var(--gold-lt); }
.sim-stat {
  margin: clamp(1.4rem, 3vw, 2rem) 0 0;
  font-size: 0.86rem; color: var(--sc-ink-soft);
}

.sim-canvas { position: relative; min-width: 0; }
.sim-canvas svg { display: block; width: 100%; height: auto; overflow: visible; }
.sim-badge {
  position: absolute; right: 0; top: 0;
  padding: 0.4rem 0.8rem; border-radius: 999px;
  font-family: var(--sc-font-mono); font-size: 0.64rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #14181C; background: var(--gold-lt);
  opacity: 0; transform: translateY(-6px) scale(0.94);
  transition: opacity 320ms var(--sc-ease-out), transform 320ms var(--sc-ease-out);
}
.sim-badge.on { opacity: 1; transform: none; }

/* the plan itself */
.pl-floor { fill: rgb(224 188 99 / 0.07); }
.pl-edge { fill: none; stroke: var(--gold-lt); stroke-width: 1.6; stroke-linejoin: round; }
.pl-wall { stroke: rgb(224 188 99 / 0.5); stroke-width: 0.8; stroke-linejoin: round; }
.pl-wall[data-face="a"] { fill: rgb(226 205 158 / 0.2); }
.pl-wall[data-face="b"] { fill: rgb(226 205 158 / 0.1); }
.pl-name {
  font-family: var(--sc-font-mono); font-size: 11px;
  letter-spacing: 0.1em; fill: #FBFDFE;
  /* a thin dark outline behind the glyphs, so a label stays readable wherever
     the model happens to put a lit wall under it */
  paint-order: stroke; stroke: rgb(10 13 16 / 0.75); stroke-width: 3px;
}
.pl-area {
  font-family: var(--sc-font-mono); font-size: 9.5px; letter-spacing: 0.08em;
  fill: var(--gold-lt);
  paint-order: stroke; stroke: rgb(10 13 16 / 0.75); stroke-width: 3px;
}
/* the two rooms the edit touches, and only those, light up while it lands */
.pl-room.moved .pl-edge { stroke: #FFF0CE; stroke-width: 2.4; }
.pl-room.moved .pl-floor { fill: rgb(255 226 160 / 0.16); }


/* --------------------------------------------------------- the call ----- */
.sim-stage--call {
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  /* the transcript is shorter than the column beside it, so top-aligning it
     left it sitting high against a much taller neighbour */
  align-items: center; align-content: center;
}
@media (max-width: 900px) { .sim-stage--call { grid-template-columns: 1fr; } }

.call-panel {
  border: 1px solid var(--sc-hairline); border-radius: 14px;
  background: linear-gradient(to bottom right,
    rgb(255 246 224 / 0.06) 0%, rgb(255 253 246 / 0.015) 60%, transparent 100%);
  padding: clamp(1.1rem, 2.4vw, 1.7rem);
  box-shadow: 0 40px 90px -60px rgb(0 0 0 / 0.9);
}
.call-head {
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--sc-font-mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.call-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: rgb(242 240 235 / 0.25);
  transition: background-color 260ms var(--sc-ease-out), box-shadow 260ms var(--sc-ease-out);
}
.call-dot.on { background: var(--gold-lt); box-shadow: 0 0 0 4px rgb(224 188 99 / 0.16); }
.call-state { color: #E7EDF1; }
.call-clock { margin-left: auto; color: var(--gold-lt); }
/* the transcript can be heard, not only read. Off until asked for. */
.call-sound {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.6rem; border-radius: 999px;
  border: 1px solid rgb(224 188 99 / 0.35); background: transparent;
  color: var(--gold-lt); cursor: pointer;
  font-family: var(--sc-font-mono); font-size: 0.58rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: background-color 200ms var(--sc-ease-out), color 200ms var(--sc-ease-out);
}
.call-sound:hover { background: rgb(224 188 99 / 0.12); }
.call-sound:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 3px; }
.call-sound .cs-w1, .call-sound .cs-w2 { opacity: 0; }
.call-sound .cs-x { opacity: 1; }
.call-sound.on { background: var(--gold-lt); border-color: var(--gold-lt); color: #14181C; }
.call-sound.on .cs-w1, .call-sound.on .cs-w2 { opacity: 1; }
.call-sound.on .cs-x { opacity: 0; }
.call-sound + .call-clock { margin-left: 0; }
.call-wave { display: block; width: 100%; height: 44px; margin: 0.9rem 0 0.4rem; overflow: visible; }
.cw-bar { fill: var(--gold-lt); opacity: 0.75; }

.call-script { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.55rem; min-height: 17rem; }
.turn {
  display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0.8rem;
  padding: 0.5rem 0;
  opacity: 0; transform: translateY(6px);
  transition: opacity 300ms var(--sc-ease-out), transform 300ms var(--sc-ease-out);
}
.turn.in { opacity: 1; transform: none; }
.turn-who {
  font-family: var(--sc-font-mono); font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase; padding-top: 0.22rem;
  color: var(--sc-ink-soft);
}
.turn--agent .turn-who { color: var(--gold-lt); }
.turn-t { font-size: 0.94rem; line-height: 1.55; color: #E7EDF1; }
.turn--caller .turn-t { color: #AEBAC2; }
/* the line currently being spoken, so voice and text are visibly the same
   thing rather than two tracks running side by side */
.turn { position: relative; padding-left: 0; transition: opacity 240ms var(--sc-ease-out); }
.turn.saying::before {
  content: ""; position: absolute; left: -0.9rem; top: 0.35rem; bottom: 0.35rem;
  width: 2px; border-radius: 2px; background: var(--gold-lt);
  box-shadow: 0 0 10px rgb(224 188 99 / 0.6);
}
.turn.saying .turn-t { color: #FFF6E2; }
.turn.saying .turn-who { color: var(--gold-lt); }

.call-out { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); align-content: start; }
.crm { margin: 0.55rem 0 0; display: grid; gap: 0; }
.crm-block .sim-tag { margin-bottom: 0.35rem; }
.crm-block .crm { margin-top: 0; }
.crm-row {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.8rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--sc-hairline);
}
.crm-row dt {
  font-family: var(--sc-font-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: #7D8B95;
}
.crm-row dd {
  margin: 0; font-size: 0.92rem; color: #E7EDF1; min-height: 1.3em;
  opacity: 0; transform: translateX(-4px);
  transition: opacity 280ms var(--sc-ease-out), transform 280ms var(--sc-ease-out);
}
.crm-row.on dd { opacity: 1; transform: none; }

.cal {
  opacity: 0; transform: translateY(8px);
  transition: opacity 320ms var(--sc-ease-out), transform 320ms var(--sc-ease-out);
}
.cal.in { opacity: 1; transform: none; }
.cal-h {
  margin: 0 0 0.6rem; font-family: var(--sc-font-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: #7D8B95;
}
.cal-slots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cal-slots li {
  padding: 0.4rem 0.7rem; border-radius: 6px;
  border: 1px solid var(--sc-hairline);
  font-family: var(--sc-font-mono); font-size: 0.68rem; color: #8E9AA2;
  transition: all 300ms var(--sc-ease-out);
}
.cal-pick.on {
  background: var(--gold-lt); border-color: var(--gold-lt); color: #14181C;
  box-shadow: 0 0 0 4px rgb(224 188 99 / 0.15);
}

.call-tail { position: relative; min-height: 8.5rem; }
.call-tail > * { position: absolute; inset: 0 0 auto 0; }
@media (max-width: 900px) { .call-tail { min-height: 10.5rem; } }
.handover {
  padding: 0.9rem 1rem; border-radius: 10px;
  border: 1px solid rgb(224 188 99 / 0.28);
  border-left: 2px solid var(--gold-lt);
  background: rgb(224 188 99 / 0.07);
  opacity: 0; transform: translateY(8px);
  transition: opacity 320ms var(--sc-ease-out), transform 320ms var(--sc-ease-out);
}
.handover.in { opacity: 1; transform: none; }
.handover-h {
  margin: 0; font-family: var(--sc-font-mono); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-lt);
}
.handover-p { margin: 0.5rem 0 0; font-size: 0.88rem; line-height: 1.6; color: #C6D0D7; }
/* while the call is being handed over, the agent side visibly stands down */
.handover-live .call-panel { opacity: 0.42; filter: saturate(0.6); }
.call-panel { transition: opacity 400ms var(--sc-ease-out), filter 400ms var(--sc-ease-out); }

.audit { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem;
  opacity: 0; transition: opacity 340ms var(--sc-ease-out); }
.audit.in { opacity: 1; }
.audit li {
  position: relative; padding-left: 1.1rem;
  font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.06em;
  color: #7D8B95;
}
.audit li::before { content: "\2713"; position: absolute; left: 0; color: var(--gold-lt); }


/* ------------------------------------------------------ the stay ------- */
.sim-stage--stay {
  /* the rail and the phone were a third of the stage apart and hanging from
     the top; they are one composition, so they sit closer and centred */
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 0.78fr);
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: center; align-content: center;
  justify-content: center;
}
@media (max-width: 900px) {
  .sim-stage--stay {
    grid-template-columns: 1fr; justify-content: stretch; gap: 1.4rem;
    /* the base stage gives its second row 1fr on a phone, which stretched the
       row the thread sits in and left a hole above it */
    grid-template-rows: auto auto;
  }
  .stay-side { justify-self: stretch; max-width: none; }
  .phone { justify-self: center; }
  /* eight stations and a phone will not both fit on a phone screen at full
     size, so the rail tightens rather than pushing the thread off the fold */
  .rail li { padding-block: 0.4rem; font-size: 0.66rem; }
  .alert { margin-top: 1rem; }
}

.stay-side { align-self: center; max-width: 34rem; justify-self: end; }
.rail { list-style: none; margin: 0.6rem 0 0; padding: 0; counter-reset: st; }
.rail li {
  counter-increment: st;
  position: relative; padding: 0.62rem 0 0.62rem 2.4rem;
  font-family: var(--sc-font-mono); font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #67747D; transition: color 320ms var(--sc-ease-out);
}
/* the rail itself, drawn once down the whole list */
.rail li::after {
  content: ""; position: absolute; left: 5px; top: 1.35rem; bottom: -0.3rem;
  width: 1px; background: var(--sc-hairline);
}
.rail li:last-child::after { display: none; }
.rail li::before {
  content: ""; position: absolute; left: 0; top: 0.86rem;
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid rgb(242 240 235 / 0.28); background: var(--ink);
  transition: all 320ms var(--sc-ease-out);
}
.rail li.on { color: #C9D3D9; }
.rail li.on::before { border-color: var(--gold-lt); background: var(--gold-lt); }
.rail li.now { color: #FFF6E2; }
.rail li.now::before { box-shadow: 0 0 0 5px rgb(224 188 99 / 0.18); }

.alert {
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  padding: 0.9rem 1rem; border-radius: 10px;
  border: 1px solid rgb(224 188 99 / 0.3); border-left: 2px solid var(--gold-lt);
  background: rgb(224 188 99 / 0.07);
  max-width: 44ch;
  opacity: 0; transform: translateY(8px);
  transition: opacity 320ms var(--sc-ease-out), transform 320ms var(--sc-ease-out);
}
.alert.in { opacity: 1; transform: none; }
.alert-h {
  margin: 0; font-family: var(--sc-font-mono); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-lt);
}
.alert-p { margin: 0.5rem 0 0; font-size: 0.88rem; line-height: 1.6; color: #C6D0D7; }
.alarm .phone { box-shadow: 0 0 0 1px rgb(224 188 99 / 0.4), 0 40px 90px -55px rgb(0 0 0 / 0.9); }

.phone {
  justify-self: start; width: min(100%, 350px);
  border: 1px solid var(--sc-hairline); border-radius: 26px;
  background: linear-gradient(to bottom, rgb(255 253 246 / 0.05), rgb(255 253 246 / 0.012));
  padding: 0.5rem;
  box-shadow: 0 40px 90px -55px rgb(0 0 0 / 0.9);
  transition: box-shadow 340ms var(--sc-ease-out);
}
.phone-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.5rem 0.7rem 0.6rem;
  font-family: var(--sc-font-mono); font-size: 0.58rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: #7D8B95;
}
.phone-bar span:first-child {
  color: #14181C; background: var(--gold-lt);
  padding: 0.12rem 0.4rem; border-radius: 4px;
}
.phone-screen {
  /* the thread scrolls itself to the newest message by reading each bubble's
     offsetTop, which is measured against the nearest positioned ancestor:
     without this it was measured against something further up the page and
     the screen scrolled clean past the conversation */
  position: relative;
  height: clamp(21rem, 52vh, 31rem); overflow: hidden;
  border-radius: 20px; background: rgb(10 13 16 / 0.5);
  padding: 0.9rem 0.8rem; display: grid; gap: 0.5rem; align-content: start;
  scroll-behavior: auto;
}
.bub {
  max-width: 88%; padding: 0.6rem 0.75rem; border-radius: 12px;
  opacity: 0; transform: translateY(10px) scale(0.98);
  transition: opacity 300ms var(--sc-ease-out), transform 300ms var(--sc-ease-out);
}
.bub.in { opacity: 1; transform: none; }
.bub--in { justify-self: start; background: rgb(255 253 246 / 0.07); border-bottom-left-radius: 4px; }
.bub--out { justify-self: end; background: rgb(224 188 99 / 0.16); border-bottom-right-radius: 4px; }
.bub-t { margin: 0; font-size: 0.86rem; line-height: 1.5; color: #E7EDF1; }
.bub-m {
  display: block; margin-top: 0.35rem;
  font-family: var(--sc-font-mono); font-size: 0.55rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: #7D8B95;
}
/* the staff-side rendering, sitting under the message the guest actually got */
.bub-tr {
  margin: 0.45rem 0 0; padding-top: 0.45rem;
  border-top: 1px dashed rgb(224 188 99 / 0.28);
  font-size: 0.78rem; line-height: 1.5; color: #A9B7BE;
}
.bub-chip {
  display: inline-block; margin-right: 0.4rem;
  padding: 0.02rem 0.28rem; border-radius: 3px;
  background: rgb(224 188 99 / 0.18); color: var(--gold-lt);
  font-family: var(--sc-font-mono); font-size: 0.55rem;
  letter-spacing: 0.1em; vertical-align: 1px;
}


/* ------------------------------------------ the services page diagram --- */
.sim-stage--svc { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); align-content: center; }
@media (max-width: 960px) { .sim-stage--svc { grid-template-columns: 1fr; } }
.svc-say-fixed { align-self: center; }
.svc-say-fixed .svc-title { font-size: clamp(1.8rem, 1.1rem + 2.2vw, 3.1rem); max-width: 15ch; }
.svc-say-fixed .svc-open-lede { max-width: 42ch; font-size: 1rem; }
@media (max-width: 960px) { .sim-stage--svc .svc-open-lede { display: none; } }

.phases { list-style: none; margin: clamp(1.6rem, 3.4vw, 2.4rem) 0 0; padding: 0; display: grid; gap: 0.5rem; }
.phases li {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.7rem;
  padding: 0.6rem 0; border-top: 1px solid var(--sc-hairline);
  color: #67747D; transition: color 320ms var(--sc-ease-out);
}
.ph-no { font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.14em; }
.ph-h { font-family: var(--sc-font-display); font-size: 0.98rem; font-weight: 500; line-height: 1.3; }
.phases li.on { color: #AEBAC2; }
.phases li.on .ph-no { color: var(--gold-lt); }
.phases li.now { color: #FFF6E2; }

.sv-node { transition: none; }
.sv-rect {
  fill: rgb(255 253 246 / 0.035);
  stroke: rgb(224 188 99 / 0.55); stroke-width: 1;
}
.sv-node--box .sv-rect {
  fill: rgb(126 164 196 / 0.05);
  stroke: rgb(224 188 99 / 0.4); stroke-dasharray: 6 5;
}
.sv-node--doc .sv-rect { fill: rgb(255 253 246 / 0.06); }
.sv-t {
  font-family: var(--sc-font-mono); font-size: 11.5px;
  letter-spacing: 0.08em; fill: #E7EDF1;
}
.sv-node--box .sv-t { fill: var(--gold-lt); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; }
.sv-node--doc .sv-t { fill: var(--gold-lt); }
.sv-docline { stroke: rgb(242 240 235 / 0.22); stroke-width: 1; }
.sv-tick { fill: none; stroke: var(--gold-lt); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sv-edge { fill: none; stroke: rgb(224 188 99 / 0.55); stroke-width: 1.2; }
.sv-edge--dash { stroke: rgb(224 188 99 / 0.4); }
.sv-pulse { fill: #FFF0CE; filter: drop-shadow(0 0 5px rgb(224 188 99 / 0.9)); }


/* ---------------------------------------------- the specification sheet - */
.svc-ref {
  margin: 0 0 var(--sc-4);
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--sc-font-mono); font-size: 0.64rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-accent);
}
.svc-ref span {
  padding: 0.14rem 0.42rem; border-radius: 4px;
  border: 1px solid var(--sc-hairline-strong); color: var(--sc-ink-soft);
  letter-spacing: 0.12em;
}
.sheet {
  margin-top: clamp(2.6rem, 6vw, 4.5rem);
  border: 1px solid var(--sc-hairline);
  border-radius: 12px;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  position: relative;
  background: color-mix(in oklab, var(--sc-canvas) 92%, var(--sc-ink) 8%);
  box-shadow: 0 40px 80px -60px rgb(20 24 28 / 0.55);
}
/* the gold rule along the head, the same edge the contact pane carries */
.sheet::before {
  content: ""; position: absolute; inset: -1px 0 auto 0; height: 2px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(to right,
    transparent 3%, var(--sc-accent) 20%, var(--sc-accent) 58%, transparent 95%);
  opacity: 0.85;
}
.sheet-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 4vw, 3.6rem);
}
@media (max-width: 800px) { .sheet-cols { grid-template-columns: 1fr; gap: 2.4rem; } }
.sheet-h {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 0 0 var(--sc-5); padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--sc-hairline-strong);
  font-family: var(--sc-font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-ink);
}
.sheet-n {
  width: 20px; height: 20px; border-radius: 4px; flex: none;
  display: grid; place-items: center;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-size: 0.6rem; letter-spacing: 0;
}

/* ------------------------------------------------- the stack matrix ----- */
.stack-sec { padding-block: clamp(4.5rem, 10vw, 8rem); }
.stack-head { margin-bottom: clamp(2.2rem, 5vw, 3.6rem); }
.matrix {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 900px) { .matrix { grid-template-columns: 1fr; } }
.mx-list { list-style: none; margin: 0; padding: 0; }
.mx-list li { border-top: 1px solid var(--sc-hairline); }
.mx-list li:last-child { border-bottom: 1px solid var(--sc-hairline); }
.mx-list button {
  width: 100%; display: grid; align-items: center;
  grid-template-columns: 2.2rem minmax(0, 1fr) 2.2rem;
  gap: 0.8rem; padding: 0.72rem 0.2rem;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  color: #7D8B95;
  transition: color 220ms var(--sc-ease-out), padding-left 220ms var(--sc-ease-out);
}
.mx-list button:hover { color: #C6D0D7; padding-left: 0.5rem; }
.mx-list button:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: -2px; }
.mx-no { font-family: var(--sc-font-mono); font-size: 0.62rem; letter-spacing: 0.12em; }
.mx-t { font-family: var(--sc-font-display); font-size: clamp(0.98rem, 0.9rem + 0.35vw, 1.2rem); font-weight: 500; }
.mx-c {
  font-family: var(--sc-font-mono); font-size: 0.6rem; text-align: right;
  opacity: 0.6;
}
.mx-list button.on { color: #FFF6E2; padding-left: 0.5rem; }
.mx-list button.on .mx-no { color: var(--gold-lt); }
.mx-list button.on .mx-c { color: var(--gold-lt); opacity: 1; }

.mx-panel {
  position: relative;
  border: 1px solid var(--sc-hairline); border-radius: 14px;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: linear-gradient(to bottom right,
    rgb(255 246 224 / 0.06) 0%, rgb(255 253 246 / 0.015) 60%, transparent 100%);
  min-height: clamp(15rem, 30vh, 20rem);
  box-shadow: 0 40px 90px -60px rgb(0 0 0 / 0.9);
}
.mx-panel::before {
  content: ""; position: absolute; inset: -1px 0 auto 0; height: 2px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(to right, transparent 4%, var(--gold-lt) 22%, var(--gold-lt) 56%, transparent 94%);
}
.mx-kicker {
  margin: 0 0 clamp(1.1rem, 2.4vw, 1.6rem);
  display: flex; align-items: baseline; gap: 0.8rem;
  font-family: var(--sc-font-mono); font-size: 0.66rem;
  letter-spacing: 0.18em; text-transform: uppercase;
}
#mxNo { color: var(--gold-lt); }
#mxName { color: #E7EDF1; }
.mx-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mx-chips li {
  padding: 0.42rem 0.8rem; border-radius: 999px;
  border: 1px solid var(--sc-hairline-strong);
  font-family: var(--sc-font-text); font-size: 0.88rem; color: #C6D0D7;
  opacity: 0; transform: translateY(8px);
  transition: opacity 320ms var(--sc-ease-out), transform 320ms var(--sc-ease-out);
}
.mx-chips.in li { opacity: 1; transform: none; }
.mx-count {
  margin: clamp(1.2rem, 2.6vw, 1.8rem) 0 0;
  font-family: var(--sc-font-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: #7D8B95;
}
@media (prefers-reduced-motion: reduce) {
  .mx-chips li { opacity: 1; transform: none; transition: none; }
}

/* the same two floors for the pages that carry their own type ------------ */
@media (max-width: 720px) {
  .crumb, .sim-tag, .spread-no, .ledger-h, .sheet-h, .sec-k, .dossier dt,
  .stack-k, .call-state, .call-clock, .turn-who, .crm-row dt, .cal-h,
  .rail li, .disc-no, .mx-kicker, .fig-c, .audit li, .legal-date,
  .sim-badge, .handover-h, .alert-h, .sim-checks li, .cal-slots li,
  .call-sound, .phone-bar, .card-m li, .card-tag, .mx-no, .mx-c,
  .disc-tools li, .chips li, .entry-meta span, .meta span,
  .open-stat, .bub-chip, .bub-m { font-size: 0.72rem; }
  /* the breadcrumb is a link and needs something to hit */
  .crumb a { display: inline-block; padding-block: 0.35rem; }

  /* SVG text is in user units and these viewBoxes scale to about half on a
     phone, so a 10-unit label lands at five pixels. These are the sizes that
     arrive at eleven. The services diagram also staggers its labels across
     three levels on a phone, in case-sim.js, because at a readable size they
     are wider than the gap between stations. */
  /* at 24 these arrived at 11.7px and a station's label was wider than the
     gap to the next station, so neighbours ran into each other. Smaller is
     what makes them readable here: each one now sits inside its own gap. */
  .sv-t { font-size: 19px; }
  .sv-env-t { font-size: 20px; }
  .pl-name { font-size: 24px; }
  .pl-area { font-size: 23px; }
}

/* ============================== phone · the call fits inside the frame ====
   The act pins a fixed-height stage, and on a phone the panel plus the CRM
   ledger plus the calendar came to 950px inside an 844px frame. The overflow
   was split top and bottom by the centred grid, which put the panel's own
   head: the status, the clock, and the button that turns the voice on,
   permanently above the top edge, where it could neither be read nor tapped.
   Everything below trims the act to the height it has. Inside the query, so
   the wide layout is untouched.                                           */
@media (max-width: 720px) {
  /* the overflow was being split top and bottom by the centred grid, which
     is what put the head above the frame. Anchored to the top instead, the
     head sits at the stage's own padding, clear of the fixed chrome, and
     what little runs long runs into the empty band above the rail. */
  .sim-stage--call { align-content: start; }
  .sim-stage--call { padding-top: 4rem; padding-bottom: calc(var(--span-h, 0px) + 1.2rem); }
  .call-panel { padding: 0.7rem 0.9rem 0.8rem; }
  .call-tail { min-height: 9rem; }
  /* the head is three things on one narrow line: it needs the room */
  .call-head { gap: 0.45rem; }
  .call-sound { white-space: nowrap; letter-spacing: 0.08em; padding: 0.28rem 0.5rem; }
  .call-state { letter-spacing: 0.08em; }
  .turn-t { line-height: 1.4; }
  .cal-slots li { font-size: 0.62rem; }
  .call-wave { height: 26px; margin: 0.45rem 0 0.15rem; }
  .call-script { margin-top: 0.35rem; gap: 0.2rem; min-height: 0; }
  .turn { padding: 0.18rem 0; grid-template-columns: 4.1rem minmax(0, 1fr); gap: 0.6rem; }
  .turn-t { line-height: 1.45; }
  .call-out { gap: 0.85rem; }
  .call-out .sim-tag { margin-bottom: 0.3rem; }
  .crm { margin-top: 0.35rem; }
  .crm-row { padding: 0.28rem 0; grid-template-columns: 6.4rem minmax(0, 1fr); }
  .cal-h { margin-bottom: 0.4rem; }
  .cal-slots li { padding: 0.32rem 0.55rem; }
}

/* ============================= phone · the stay fits inside the frame =====
   This act pins a fixed-height stage too, and on a phone it asked for 980px
   inside 681: eight stations stacked in one column above a phone whose screen
   alone was 439px tall. The centred grid split the 300px of overflow top and
   bottom, so the journey began off the top edge and the newest messages ran
   off the bottom. The rail runs in two columns of four - it is a sequence,
   not a list, and reading down then across keeps the order - and the handset
   is sized for the frame it is in. Inside the query, so the wide layout is
   untouched.                                                              */
@media (max-width: 720px) {
  .rail {
    margin-top: 0.45rem;
    display: grid; grid-template-rows: repeat(4, auto);
    grid-auto-flow: column; grid-auto-columns: 1fr;
    column-gap: 0.5rem;
  }
  .rail li { padding: 0.34rem 0 0.34rem 1.7rem; letter-spacing: 0.08em; }
  .rail li::before { top: 0.55rem; }
  .rail li::after { top: 1.05rem; }
  /* the fourth station is the foot of the first column: the thread of the
     journey picks up again at the head of the second */
  .rail li:nth-child(4)::after { display: none; }

  .alert { margin-top: 0.8rem; padding: 0.7rem 0.85rem; }
  .alert-p { margin-top: 0.35rem; line-height: 1.5; }

  .phone { padding: 0.4rem; }
  .phone-bar { padding: 0.4rem 0.6rem 0.5rem; }
  /* the handset takes the room the shorter rail gave back, so the slot the
     escalation alert waits in reads as the space between two blocks rather
     than as a hole in the column */
  .phone-screen { height: clamp(15rem, 40vh, 22rem); }
}

/* ================================= phone · the screen Safari leaves you ===
   The demos were fitted to 844px of height. Safari hands an iPhone 15 Pro
   659 and an SE 568, so the call ran a third of its height past the fold.
   Behind a max-width as well as a max-height: no desktop window can reach
   this, however short.                                                    */
@media (max-width: 720px) and (max-height: 740px) {
  .sim-stage--call { padding-top: 2.6rem; padding-bottom: calc(var(--span-h, 0px) + 0.6rem); }
  .call-panel { padding: 0.55rem 0.75rem 0.65rem; }
  .call-head { font-size: 0.6rem; }
  /* the waveform is the one purely decorative thing in the panel, and it is
     the first to go when the frame is this short */
  .call-wave { display: none; }
  .call-script { margin-top: 0.5rem; gap: 0.12rem; }
  .turn { padding: 0.1rem 0; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 0.5rem; }
  .turn-t { font-size: 0.84rem; line-height: 1.34; }
  .turn-who { font-size: 0.55rem; }
  .call-out { gap: 0.6rem; }
  .crm-row { padding: 0.15rem 0; grid-template-columns: 5.6rem minmax(0, 1fr); }
  .crm-row dt { font-size: 0.58rem; }
  .crm-row dd { font-size: 0.82rem; }
  .cal-h { margin-bottom: 0.25rem; }
  .cal-slots { gap: 0.3rem; }
  .cal-slots li { padding: 0.22rem 0.42rem; font-size: 0.58rem; }
  .call-tail { min-height: 5.8rem; }
  .handover { padding: 0.6rem 0.75rem; }
  .handover-p { margin-top: 0.35rem; font-size: 0.82rem; line-height: 1.45; }
  .audit li { font-size: 0.62rem; }

  /* the stay, which was 11px over on the shortest screen */
  .rail li { padding: 0.26rem 0 0.26rem 1.6rem; }
  .alert { margin-top: 0.6rem; padding: 0.55rem 0.7rem; }
  .alert-p { font-size: 0.82rem; line-height: 1.45; }
  .phone-screen { height: clamp(12rem, 34vh, 20rem); }
}

/* ------------------------- and the shortest screen still in circulation --
   320 x 568: narrower as well as shorter, so the transcript wraps to more
   lines at the same time as there is less room for them.                  */
@media (max-width: 720px) and (max-height: 600px) {
  .sim-stage--call { padding-top: 1.8rem; padding-bottom: calc(var(--span-h, 0px) + 0.4rem); }
  /* at 320 the status wraps to two lines and takes the whole head with it */
  .call-state { flex: 0 1 auto; min-width: 0; white-space: nowrap;
                overflow: hidden; text-overflow: ellipsis; }
  .call-panel { padding: 0.45rem 0.6rem 0.55rem; }
  .call-script { margin-top: 0.35rem; }
  .turn { padding: 0.06rem 0; grid-template-columns: 3.1rem minmax(0, 1fr); gap: 0.4rem; }
  .turn-t { font-size: 0.76rem; line-height: 1.28; }
  .call-out { gap: 0.35rem; }
  .crm-row { padding: 0.06rem 0; }
  .crm-row { grid-template-columns: 4.8rem minmax(0, 1fr); }
  .crm-row dd { font-size: 0.78rem; }
  .call-tail { min-height: 2.9rem; }
  .handover-p { font-size: 0.78rem; line-height: 1.4; }
  .cal-slots li { padding: 0.18rem 0.36rem; font-size: 0.54rem; }
}