/* Our Approach: the section page, the four stages and the DX Audit (assets/bodies-approach.js). Every block has a plain
   readable layout of its own, which is what a phone without the scenes, reduced motion and no script get; the scenes
   take over only under html.bodies-live. No picture stands beside the words: each section is set in type, in a
   composition of its own. */

[data-topic="approach"] { --b-bg: #07090d; }
[data-topic="build"] { --b-bg: #090c11; }
[data-topic="operate"] { --b-bg: #0b0e13; }
[data-topic="diagnose"] { --b-bg: #05070a; }   /* the dark room: the header lays this ground behind itself while the room passes under it */

/* the endings: the closing section stands outside the body's .b (tools/build-standalone.cjs moves it into .t-end), so
   the body's margin reset does not reach its heading, which kept the browser's own margins (most of a line above and
   below) and pushed the ending past one screen */
:where(.t-end > .b-close) :where(h2) { margin: 0; }

/* ---- the heroes: each composed for its own painting, at its own scale ---- */
/* Our Approach: the largest name in the section, over the sky; on a phone the words hold the middle of the left side */
[data-topic="approach"] .t-hero-text { width: min(1000px, calc(100vw - 2 * var(--gutter))); }
[data-topic="approach"] .t-title { font-size: clamp(60px, 9.4vw, 180px); line-height: .92; letter-spacing: -.02em; }
[data-topic="approach"] .t-line { max-width: 38ch; }
/* Diagnose: a heavy name low on the left, over the dark crates; on a phone the name holds the top, the promise the foot */
.t-hero-text.at-dia .t-title { font-size: clamp(64px, 10.4vw, 200px); line-height: .9; letter-spacing: -.025em; }
.t-hero-text.at-dia .t-statement { margin-top: .5em; font-size: clamp(24px, 2.4vw, 46px); }
.t-hero-text.at-dia::before { content: ""; position: absolute; inset: -20% -14% -18% -10%; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(6, 8, 11, .55), rgba(6, 8, 11, 0)); }
/* Design: the smallest name of the section, so the promise carries the frame. The words sit high on the right, on the
   dark wall beside the window, clear of the lit table below */
[data-topic="design"] .t-title { font-size: clamp(48px, 5.8vw, 112px); }
[data-topic="design"] .t-statement { font-size: clamp(30px, 3.4vw, 64px); }
[data-topic="design"] .t-hero-text.at-mr { bottom: 24%; }
[data-topic="design"] .t-line { position: relative; color: #e3e7ea; }
/* the painting's ceiling lamp runs right under the header on a wide screen, behind the search, and the growing picture
   carried it up through the logo and the search as it became the hero: it is dimmed in the picture itself, so the
   dimming travels with the picture into the hero and nothing changes behind the header once it lands. The rest is the
   shade of every hero with its words high on the right (.t-hero:has(.at-mr) in topic-bodies.css), which this outranks.
   (On a phone the picture stands higher, below, and the lamp is above the screen) */
@media (min-width: 761px) {
  body[data-topic="design"] .t-hero .t-media::after { background: linear-gradient(180deg, rgba(8, 10, 10, .86) 0%, rgba(8, 10, 10, .82) 8%, rgba(8, 10, 10, .55) 11.5%, rgba(8, 10, 10, 0) 17%), linear-gradient(270deg, rgba(8, 10, 10, .82) 0%, rgba(8, 10, 10, .45) 34%, rgba(8, 10, 10, 0) 58%), linear-gradient(180deg, rgba(8, 10, 10, .4) 0%, rgba(8, 10, 10, 0) 22%, rgba(8, 10, 10, 0) 80%, rgba(8, 10, 10, .5) 100%); }
}
[data-topic="dx-audit"] .t-title { font-size: clamp(64px, 9vw, 168px); }
/* Build: a smaller name in its corner, a larger promise at the foot */
[data-topic="build"] .t-title { font-size: clamp(52px, 6.4vw, 124px); }
[data-topic="build"] .t-statement { font-size: clamp(30px, 3.6vw, 68px); }
/* Build's closing line is long: set a size down so its ending stays one screen */
[data-topic="build"] .t-end .b-h { font-size: clamp(40px, 4vw, 76px); }
@media (min-width: 761px) {
  [data-topic="operate"] .t-hero-text { width: min(620px, 43vw); }
}
@media (max-width: 760px) {
  /* on a phone the name and the promise stand high on the right, and the line drops to the foot of the frame, onto the
     dark desk below the lit table */
  [data-topic="design"] .t-hero-text.at-mr { top: 0; bottom: 5vh; justify-content: flex-start; padding-top: 20vh; }
  [data-topic="design"] .t-line { margin-top: auto; }
  /* the words' soft dark starts under the header: the box runs the whole height, so it reached up behind the logo */
  [data-topic="design"] .t-hero-text.at-scrim-m::before { top: 11vh; }
  /* the picture stands a little higher, so the ceiling lamp that ran through the logo and the search sits above the
     screen and the header stands on the window and the red sky; the helmet and the table keep their places */
  [data-topic="design"] .t-img { top: -20%; }
  /* Build's name rides above the helmets */
  [data-topic="build"] .t-hero-text.at-splitr { top: 9vh; }
  [data-topic="approach"] .t-hero-text.at-top { top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; }
  /* the trail's lanterns drift under the small line as the camera climbs: it keeps a shade of its own */
  [data-topic="approach"] .t-hero-text .t-line { position: relative; max-width: 29ch; }
  [data-topic="approach"] .t-hero-text .t-line::before { content: ""; position: absolute; inset: -40% -10%; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(6, 8, 11, .6), rgba(6, 8, 11, 0)); }
  [data-topic="approach"] .t-title { font-size: clamp(56px, 17vw, 84px); }
  .t-hero-text.at-dia.at-pos { top: 13vh; bottom: 8vh; display: flex; flex-direction: column; }
  .t-hero-text.at-dia .t-statement { margin-top: auto; }
  .t-hero-text.at-dia .t-title { font-size: clamp(60px, 19vw, 92px); }
  .t-hero-text.at-dia::before { inset: auto -10% -12% -10%; height: 60%; }
  /* the name at the top crosses a white helmet on a phone: it gets a soft dark of its own */
  .t-hero-text.at-dia::after { content: ""; position: absolute; left: -12%; right: -16%; top: -9%; height: 30%; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(6, 8, 11, .7), rgba(6, 8, 11, 0)); }
}

/* the DX Audit hero: a baseline drawn under the name, six ticks on it, the last one crimson, and a reading light */
@media (prefers-reduced-motion: no-preference) { .js .t-baseline { --draw: 0; } .js .t-baseline i { transform: scaleY(0); } .js .t-baseline b { opacity: 0; } }
.t-baseline { --draw: 1; position: absolute; left: var(--gutter); right: var(--gutter); top: 76%; height: 1px; z-index: 1; pointer-events: none; }
.t-baseline::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(236, 240, 244, 0), rgba(236, 240, 244, .5) 12%, rgba(236, 240, 244, .5) 88%, rgba(236, 240, 244, 0)); transform: scaleX(var(--draw)); }
.t-baseline i { position: absolute; top: -9px; width: 1px; height: 18px; background: rgba(236, 240, 244, .7); transform-origin: 50% 100%; }
.t-baseline i:nth-of-type(1) { left: 8.33%; } .t-baseline i:nth-of-type(2) { left: 25%; } .t-baseline i:nth-of-type(3) { left: 41.67%; }
.t-baseline i:nth-of-type(4) { left: 58.33%; } .t-baseline i:nth-of-type(5) { left: 75%; } .t-baseline i:nth-of-type(6) { left: 91.67%; }
.t-baseline i.is-risk { background: #e0707f; }
.t-baseline b { position: absolute; left: 0; top: -3px; width: 7px; height: 7px; margin-left: -3px; border-radius: 50%; background: #dfe9f2; box-shadow: 0 0 14px 4px rgba(156, 195, 224, .55); opacity: 0; }
[data-topic="dx-audit"] .t-hero.is-type { background: radial-gradient(ellipse 78% 24% at 50% 76%, rgba(47, 111, 154, .24), transparent 70%), linear-gradient(180deg, #05070a 0%, #0a0e14 74%, #06080b 100%); }
.t-hero.is-type .t-hero-text.at-audit { top: 0; bottom: 24%; left: 0; right: 0; width: auto; padding: 0 var(--gutter) 7vh; justify-content: flex-end; align-items: center; text-align: center; }
@media (max-width: 760px) { .t-hero.is-type .t-hero-text.at-audit { bottom: 22%; } .t-baseline { top: 80%; } }

/* ---- Our Approach: the four stages cut in one after another, each in its own painting ---- */
/* Each frame is that stage's own hero painting (it grows into that hero when followed), and its words stand where the
   painting is dark. Without the scene (reduced motion, no script) the reel stands as four stills, one under another,
   each painting across the page with its words set into it, as the scene leaves them; never words beside a picture */
.b-apr-reel { position: relative; padding: 16vh var(--gutter) 12vh; }
.b-apr-card { max-width: 1000px; }
.b-apr-card .b-lede { max-width: 21ch; margin: 0; text-align: left; font-size: clamp(34px, 4.2vw, 78px); line-height: 1.1; }
.b-apr-card .b-p { max-width: 44ch; margin: 30px 0 0; text-align: left; color: #b4bcc4; }
.b-apr-frames { display: grid; gap: 7vh; margin-top: 12vh; }
.b-apr-stage { display: block; position: relative; overflow: hidden; border-radius: 3px; color: inherit; }
.b-apr-frame { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0b0d10; }
.b-apr-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--apr-shade); }
.b-apr-pic { position: absolute; inset: 0; background-size: cover; background-position: var(--apr-ph, 50%) 50%; }
.b-apr-text { display: block; position: absolute; z-index: 2; width: min(500px, 44%); }
.b-apr-text::before { content: ""; position: absolute; inset: -22% -16%; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(5, 7, 10, .62), rgba(5, 7, 10, 0)); transition: opacity .6s var(--sys-ease); }
.b-apr-name { display: block; font: 200 clamp(44px, 5.4vw, 104px)/.98 var(--sys-display); letter-spacing: -.015em; }
.b-apr-what { display: block; max-width: 34ch; margin-top: 20px; font: 400 clamp(17px, 1.3vw, 21px)/1.5 var(--sys-body); color: #d5d9dd; }
.b-apr-leave { display: block; max-width: 40ch; margin-top: 14px; font: 400 15px/1.45 var(--sys-body); color: #aeb7c0; }
.b-apr-stage:focus-visible { outline: 2px solid #9cc3e0; outline-offset: 8px; border-radius: 2px; }
/* each painting keeps a soft dark where its words stand (the same in the stills and in the scene) */
.b-apr-stage:nth-child(1) { --apr-shade: linear-gradient(30deg, rgba(5, 7, 10, .8) 0%, rgba(5, 7, 10, .35) 34%, rgba(5, 7, 10, 0) 58%); }
.b-apr-stage:nth-child(2) { --apr-shade: linear-gradient(270deg, rgba(5, 7, 10, .82) 0%, rgba(5, 7, 10, .4) 30%, rgba(5, 7, 10, 0) 52%); }
.b-apr-stage:nth-child(3) { --apr-shade: linear-gradient(150deg, rgba(5, 7, 10, .82) 0%, rgba(5, 7, 10, .38) 34%, rgba(5, 7, 10, 0) 56%); }
.b-apr-stage:nth-child(4) { --apr-shade: linear-gradient(210deg, rgba(5, 7, 10, .82) 0%, rgba(5, 7, 10, .38) 34%, rgba(5, 7, 10, 0) 56%); }
.b-apr-stage:nth-child(1) .b-apr-text { left: 4%; bottom: 9%; }
.b-apr-stage:nth-child(2) .b-apr-text { right: 4%; top: 30%; text-align: right; }
.b-apr-stage:nth-child(3) .b-apr-text { left: 4%; top: 9%; }
.b-apr-stage:nth-child(4) .b-apr-text { right: 4%; top: 9%; text-align: right; }
.b-apr-stage:is(:nth-child(2), :nth-child(4)) :is(.b-apr-what, .b-apr-leave) { margin-left: auto; }
/* the scene: one frame at a time over the whole screen */
.bodies-live .b-apr-reel { height: 100vh; padding: 0; overflow: hidden; }
.bodies-live .b-apr-card { position: absolute; z-index: 3; left: var(--gutter); top: 50%; width: min(1000px, calc(100vw - 2 * var(--gutter))); transform: translateY(-50%); }
.bodies-live .b-apr-frames { position: absolute; inset: 0; display: block; margin: 0; }
.bodies-live .b-apr-stage { position: static; overflow: visible; border-radius: 0; pointer-events: none; }
.bodies-live .b-apr-stage.is-on { pointer-events: auto; }
.bodies-live .b-apr-frame { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; background: none; will-change: transform; }
.bodies-live .b-apr-pic { inset: -1.5%; will-change: transform; }
.bodies-live .b-apr-text { width: min(540px, calc(100vw - 2 * var(--gutter))); }
/* only the stage in hand keeps the shadow behind its words: the others' would darken the painting on screen */
.bodies-live .b-apr-stage:not(.is-on) .b-apr-text::before { opacity: 0; }
.bodies-live .b-apr-stage:nth-child(1) .b-apr-text { left: var(--gutter); bottom: 12vh; }
.bodies-live .b-apr-stage:nth-child(2) .b-apr-text { right: var(--gutter); top: 34vh; }
.bodies-live .b-apr-stage:nth-child(3) .b-apr-text { left: var(--gutter); top: 17vh; }
.bodies-live .b-apr-stage:nth-child(4) .b-apr-text { right: var(--gutter); top: 15vh; }
@media (max-width: 760px) {
  /* on a phone each painting stands upright, its words along its foot */
  .b-apr-frame { aspect-ratio: 4 / 5; }
  .b-apr-stage:nth-child(n) { --apr-shade: linear-gradient(0deg, rgba(5, 7, 10, .92) 0%, rgba(5, 7, 10, .6) 34%, rgba(5, 7, 10, 0) 58%); }
  .b-apr-stage:nth-child(n) .b-apr-text { left: 6%; right: 6%; top: auto; bottom: 6%; width: auto; text-align: left; }
  .b-apr-stage:nth-child(n) :is(.b-apr-what, .b-apr-leave) { margin-left: 0; }
  .bodies-live .b-apr-card .b-lede { font-size: clamp(32px, 9vw, 44px); }
  .bodies-live .b-apr-stage:nth-child(n) .b-apr-text { left: var(--gutter); right: var(--gutter); top: auto; bottom: 8vh; width: auto; }
  .b-apr-stage:nth-child(1) .b-apr-pic { --apr-ph: 62%; }
  .b-apr-stage:nth-child(2) .b-apr-pic { --apr-ph: 44%; }
  .b-apr-stage:nth-child(3) .b-apr-pic { --apr-ph: 46%; }
  .b-apr-stage:nth-child(4) .b-apr-pic { --apr-ph: 36%; }
  .b-apr-name { font-size: clamp(44px, 12vw, 60px); }
  .b-apr-what { margin-top: 12px; font-size: 16px; }
  .b-apr-leave { margin-top: 10px; font-size: 14px; }
}

/* ---- Diagnose: the room goes dark and the torch on the crate examines it, one question at a time ---- */
/* The room comes up out of the hand-off with a soft top: clear at its edge and the room's own dark by 40vh, on the same
   eased curve as the page's dissolve (systems-topic.css), so no band of dark rises over the picture. The dissolve lands
   in this dark (the room is the body's first section, data-header="deep"; with the scene, bodies-approach.js says so) */
.b-dia-room { position: relative; padding: 24vh var(--gutter) 16vh; color: var(--sys-text);
  background: linear-gradient(180deg, rgba(5, 7, 10, 0) 0, rgba(5, 7, 10, .043) 5vh, rgba(5, 7, 10, .156) 10vh, rgba(5, 7, 10, .316) 15vh, rgba(5, 7, 10, .5) 20vh, rgba(5, 7, 10, .684) 25vh, rgba(5, 7, 10, .844) 30vh, rgba(5, 7, 10, .957) 35vh, #05070a 40vh); }
.b-dia-dark { display: none; }
/* without the scene (a phone, reduced motion) the room holds the brief as a sheet: the opening, then the questions in
   large type, each over the line it is answered on; on a wide screen each question stands beside its line */
.b-dia-steps { max-width: 1240px; margin: 0 auto; }
.b-dia-brief { margin-top: 15vh; }
.b-dia-q, .b-dia-send { margin-top: 9vh; }
.b-dia-step .b-lede { max-width: 22ch; margin: 0; text-align: left; font-size: clamp(30px, 3.2vw, 58px); }
.b-dia-step .b-p { max-width: 44ch; margin: 24px 0 0; text-align: left; color: #b9c1c9; }
.b-dia-step .b-h { text-align: left; font-size: clamp(40px, 4.6vw, 84px); }
.b-dia-q h3 { max-width: 16ch; font: 200 clamp(32px, 3.4vw, 62px)/1.06 var(--sys-display); letter-spacing: -.012em; text-wrap: balance; }
.b-dia-q h3 label { cursor: text; }
.b-dia-q textarea { display: block; width: 100%; max-width: 560px; margin-top: 3.5vh; padding: 10px 2px 12px; resize: none; border: 0; border-bottom: 1px solid rgba(214, 224, 234, .42); background: none; color: #f1f3f5; font: 400 clamp(17px, 1.3vw, 20px)/1.5 var(--sys-body); transition: border-color .2s var(--sys-ease); }
@media (min-width: 761px) {
  html:not(.bodies-live) :is(.b-dia-q, .b-dia-send) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 6vw; align-items: end; }
  html:not(.bodies-live) .b-dia-q textarea { max-width: none; margin-top: 0; }
  html:not(.bodies-live) .b-dia-send > * { grid-column: 2; justify-self: start; }
}
.b-dia-q textarea::placeholder { color: #a3aeb9; }
.b-dia-q textarea:focus { outline: none; border-bottom-color: #f1f3f5; }
.b-dia-room :focus-visible { outline: 2px solid #9cc3e0; outline-offset: 6px; border-radius: 2px; }
.b-dia-room .btn { border: 0; cursor: pointer; background: var(--sys-text); color: var(--sys-graphite); }
.b-dia-room .btn:hover { background: #ffffff; }
.b-dia-note { margin-top: 18px; font: 400 15px/1.4 var(--sys-body); color: #b9c1c9; }
.b-dia-pic { position: absolute; inset: 0; background-size: cover; background-position: 50% 50%; }
@media (min-width: 761px) {
  .bodies-live .b-dia-room { height: 100vh; padding: 0; overflow: hidden; }
  .bodies-live .b-dia-dark { display: block; position: absolute; inset: 0; overflow: hidden; }
  .bodies-live .b-dia-night { position: absolute; inset: 0; background: rgba(4, 6, 9, .86); }
  .bodies-live .b-dia-pic.is-torch, .bodies-live .b-dia-pic.is-seen, .bodies-live .b-dia-pic.is-lit { opacity: 0; }
  .bodies-live .b-dia-beam { position: absolute; opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity; -webkit-mask-composite: source-in; mask-composite: intersect; }
  .bodies-live .b-dia-beam.is-ray { -webkit-mask-image: conic-gradient(from -17deg at 50% 50%, transparent 0deg, #000 8deg, #000 26deg, transparent 34deg, transparent 360deg), radial-gradient(closest-side, #000 46%, transparent 100%); mask-image: conic-gradient(from -17deg at 50% 50%, transparent 0deg, #000 8deg, #000 26deg, transparent 34deg, transparent 360deg), radial-gradient(closest-side, #000 46%, transparent 100%); }
  .bodies-live .b-dia-beam.is-spill { -webkit-mask-image: conic-gradient(from -32deg at 50% 50%, transparent 0deg, #000 18deg, #000 46deg, transparent 64deg, transparent 360deg), radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: conic-gradient(from -32deg at 50% 50%, transparent 0deg, #000 18deg, #000 46deg, transparent 64deg, transparent 360deg), radial-gradient(closest-side, #000 30%, transparent 100%); }
  /* the lit wedge is the painting brighter than painted, with the torch's own cold haze in it */
  .bodies-live .b-dia-beam > .b-dia-pic { inset: auto; will-change: transform; filter: brightness(1.75) saturate(1.08); }
  .bodies-live .b-dia-beam::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(closest-side, rgba(170, 214, 255, .34), rgba(170, 214, 255, .1) 55%, rgba(170, 214, 255, 0) 80%); }
  .bodies-live .b-dia-pic.is-seen { filter: brightness(1.35); }
  .bodies-live .b-dia-shade { position: absolute; left: 0; bottom: 0; width: 64%; height: 80%; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 24% 68%, rgba(4, 6, 9, .78), rgba(4, 6, 9, 0) 72%); }
  /* the room's own top stays its dark, under the header; it is part of the scene, so it comes in with the painting */
  .bodies-live .b-dia-dark::after { content: ""; position: absolute; inset: 0 0 auto; height: 22vh; pointer-events: none; background: linear-gradient(#05070a, rgba(5, 7, 10, 0)); }
  /* (the words stand over the dark crates at the lower left, high enough to be on the screen as the room settles in) */
  .bodies-live .b-dia-steps { position: absolute; z-index: 2; left: var(--gutter); bottom: 19vh; width: min(620px, 44vw); max-width: none; margin: 0; }
  .bodies-live .b-dia-step { position: absolute; left: 0; bottom: 0; width: 100%; margin: 0 !important; opacity: 0; pointer-events: none; transition: opacity .18s ease-out; }
  .bodies-live .b-dia-step.is-on { opacity: 1; pointer-events: auto; transition-duration: .32s; }
  .bodies-live .b-dia-q h3 { font-size: clamp(38px, 3.6vw, 64px); }
}

/* ---- Design: what the plan settles, set down as a ruled list; then the plan drawn a layer of decisions at a time ---- */
/* the opening is the list of what is settled first, one decision to a line, each ruled off as it is set down (the rule is
   the plan's blue); the sentence lands on its last line, and how the plan is made stands beside that line */
.b-des-open { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 7vw; align-items: end; max-width: 1360px; margin: 0 auto; padding: 20vh var(--gutter) 15vh; }
.b-des-list { max-width: none; margin: 0; text-align: left; font: 300 clamp(30px, 3.2vw, 60px)/1.12 var(--sys-display); letter-spacing: -.014em; text-wrap: wrap; }
.b-des-list > span { display: block; position: relative; padding: .16em 0 .2em; }
.b-des-list > span:not(:last-child)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(47, 95, 138, .34); transform: scaleX(var(--rule, 1)); transform-origin: 0 50%; }
.b-des-list > span:last-child { padding-top: .3em; }
.b-des-list .accent { font-size: 1.06em; color: #24527a; }
.b-des-open > .b-p { max-width: 40ch; margin: 0 0 .5em; text-align: left; }
.b-des-sheet { position: relative; padding: 4vh var(--gutter) 6vh; }
.b-des-paper { position: relative; width: min(1100px, 100%); margin: 0 auto; aspect-ratio: 1200 / 760; overflow: hidden; border-radius: 3px; background: #f7f8fa linear-gradient(rgba(47, 95, 138, .07) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(47, 95, 138, .07) 1px, transparent 1px) 0 0 / 24px 24px; box-shadow: 0 30px 70px -40px rgba(13, 17, 23, .4), 0 0 0 1px rgba(13, 17, 23, .06); }
.b-des-draw { position: absolute; inset: 0; width: 100%; height: 100%; }
.b-des-draw :is(rect, path) { fill: none; stroke: #2f5f8a; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.b-des-draw .is-bound { stroke-dasharray: 8 7; }
.b-des-draw text { font: 400 30px/1 var(--sys-display); fill: #24527a; letter-spacing: .005em; }
.b-des-draw .is-own { stroke: #9a2b3c; }
.b-des-draw text.is-own { fill: #8a2536; stroke: none; }
.b-des-notes { display: grid; gap: 7vh; max-width: 620px; margin: 9vh auto 0; text-align: center; }
.b-des-note h3 { font: 200 clamp(34px, 3.4vw, 60px)/1.05 var(--sys-display); letter-spacing: -.01em; }
.b-des-note p { max-width: 40ch; margin: 14px auto 0; font: 400 clamp(17px, 1.3vw, 20px)/1.55 var(--sys-body); color: #3f4954; }
/* without the scene, the sheet and its decisions stand side by side, so the drawing is in view beside every note */
@media (min-width: 761px) {
  html:not(.bodies-live) .b-des-sheet { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); column-gap: 5vw; align-items: center; max-width: 1400px; margin: 0 auto; }
  html:not(.bodies-live) .b-des-notes { margin: 0; text-align: left; }
  html:not(.bodies-live) .b-des-note p { margin-left: 0; }
}
.bodies-live .b-des-sheet { height: 100vh; padding: 10vh var(--gutter) 0; display: flex; flex-direction: column; align-items: center; }
.bodies-live .b-des-paper { width: min(1060px, 100%, 104vh); }
.bodies-live .b-des-notes { position: relative; display: block; width: min(620px, 100%); height: 22vh; margin: 4.5vh auto 0; }
.bodies-live .b-des-note { position: absolute; left: 0; right: 0; top: 0; }
@media (max-width: 760px) {
  .b-des-open { display: block; padding: 14vh var(--gutter) 10vh; }
  .b-des-list { font-size: clamp(28px, 8.2vw, 36px); }
  .b-des-open > .b-p { margin: 5vh 0 0; }
  /* on a phone the sheet is drawn at a size its words can be read at, and the view moves to each layer as it goes down */
  .b-des-sheet { padding: 4vh 0 6vh; overflow: hidden; }
  .b-des-paper { width: 100%; margin: 0; border-radius: 0; }
  .b-des-draw text { font-size: 42px; }
  .bodies-live .b-des-draw text { font-size: 38px; }
  .b-des-notes { padding: 0 var(--gutter); }
  .bodies-live .b-des-sheet { padding: 6vh 0 0; align-items: flex-start; justify-content: center; }
  .bodies-live .b-des-paper { width: 132vw; max-width: none; will-change: transform; }
  .bodies-live .b-des-notes { height: 15vh; margin-top: 5vh; padding: 0 var(--gutter); }
}
/* the close: the promise on the left, and beside it what you leave with and the way on */
.t-end > .b-des-close { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 6vw; align-content: center; align-items: center; width: 100%; max-width: 1360px; margin: 0 auto; text-align: left; }
.b-des-close .b-h { max-width: 11ch; font-size: clamp(44px, 4.8vw, 92px); }
.b-des-close .b-p { max-width: 36ch; margin: 0; text-align: left; }
.t-end > .b-des-close .b-actions { justify-content: flex-start; margin-top: 4vh; }
@media (max-width: 760px) {
  .t-end > .b-des-close { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
  .b-des-close .b-h { max-width: none; font-size: clamp(34px, 9.4vw, 40px); }
  .b-des-close .b-p { margin-top: 2.6vh; font-size: 16px; }
  .t-end > .b-des-close .b-actions { margin-top: 3vh; }
}

/* ---- Build & deploy ---- */
/* Without motion (and without script) the body reads on its own: the opening, then the four steps as a staircase, each
   a step further along and lower down, from the first connection to the release. With motion the scene plays on the
   hero instead (topic-bodies.js heroStage, as Architecture does): these two blocks give their words to the hero and step
   out of the page */
.b-bld-open { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 6vw; align-items: start; padding: 18vh var(--gutter) 12vh; }
.b-bld-open .b-lede { max-width: 22ch; margin: 0; text-align: left; font-size: clamp(30px, 3.3vw, 62px); }
.b-bld-open .b-p { margin: .6em 0 0; text-align: left; color: #b4bcc4; }
.b-bld-stack { position: relative; padding: 0 var(--gutter) 12vh; }
.b-bld-bands { max-width: 1240px; margin: 0 auto; }
.b-bld-row { --k: 0; --w: min(520px, 100%); width: var(--w); margin-left: calc(var(--k) * (100% - var(--w)) / 3); }
.b-bld-row:nth-child(2) { --k: 1; } .b-bld-row:nth-child(3) { --k: 2; } .b-bld-row:nth-child(4) { --k: 3; }
.b-bld-row + .b-bld-row { margin-top: 6vh; }
.b-bld-row h3 { font: 200 clamp(44px, 4.8vw, 92px)/.96 var(--sys-display); letter-spacing: -.02em; }
.b-bld-row p { max-width: 34ch; margin-top: 14px; font: 400 clamp(17px, 1.3vw, 20px)/1.5 var(--sys-body); color: #b4bcc4; }
.bodies-live :is(.b-bld-open, .b-bld-stack).is-staged { display: none; }
@media (max-width: 760px) {
  .b-bld-open { display: block; padding: 14vh var(--gutter) 9vh; }
  .b-bld-open .b-p { margin-top: 24px; }
  .b-bld-row { --w: auto; margin-left: calc(var(--k) * 7vw); }
  .b-bld-row + .b-bld-row { margin-top: 5vh; }
}

/* the scene on the hero: the painting in four bands over the grid of the plan (bodies-approach.js puts them inside the
   hero's picture, under its light, so they move with its camera). The hero's picture is laid out at the painting's own
   shape, centred, at the size the cover framing gave it: it arrives framed exactly as before, and the camera can reach
   every part of the room, which on a phone is far wider than the frame (--pa is the painting's width over its height) */
[data-topic="build"] .t-img { --pa: 1.7768; --fw: max(108vw, max(100vh, 560px) * 1.14 * var(--pa)); left: calc(50% - var(--fw) / 2); right: auto; width: var(--fw); top: calc(50% - var(--fw) / var(--pa) / 2); bottom: auto; height: calc(var(--fw) / var(--pa)); }
.b-bld-floor, .b-bld-band { display: none; }
.t-hero.has-bands .b-bld-floor, .t-hero.has-bands .b-bld-band { display: block; }
.b-bld-floor { position: absolute; inset: 0; background: #06080b linear-gradient(rgba(156, 195, 224, .075) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(156, 195, 224, .075) 1px, transparent 1px) 0 0 / 56px 56px; }
.b-bld-band { position: absolute; left: 0; right: 0; overflow: hidden; will-change: transform; }
.b-bld-paint { position: absolute; left: 0; right: 0; background-size: cover; background-repeat: no-repeat; background-position: var(--vt-pos, 50% 50%); }
.b-bld-dim { position: absolute; inset: 0; background: #05070a; opacity: 0; }
/* the light a band catches as it locks */
.b-bld-glint { position: absolute; top: 0; bottom: 0; left: 0; width: 42%; opacity: 0; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(100deg, rgba(214, 230, 248, 0) 0%, rgba(214, 230, 248, .16) 46%, rgba(240, 246, 252, .3) 50%, rgba(214, 230, 248, .16) 54%, rgba(214, 230, 248, 0) 100%); will-change: transform, opacity; }
/* the words: a column on the left, over a shade of the hero's own that holds the left side of the frame */
.b-bld-stage { --stage-shade: linear-gradient(90deg, rgba(5, 7, 10, .86) 0%, rgba(5, 7, 10, .8) 25%, rgba(5, 7, 10, .34) 43%, rgba(5, 7, 10, 0) 58%), linear-gradient(180deg, rgba(5, 7, 10, .5) 0%, rgba(5, 7, 10, 0) 16%); --stage-shade-m: linear-gradient(180deg, rgba(5, 7, 10, .5) 0%, rgba(5, 7, 10, .2) 22%, rgba(5, 7, 10, .2) 100%); }
.t-hero.is-staging.is-whole .b-bld-stage::before { opacity: .5; }
.b-bld-say { position: absolute; left: var(--gutter); top: 50%; width: min(640px, 40vw); transform: translateY(-50%); }
.b-bld-say .b-lede { max-width: 20ch; margin: 0; text-align: left; font: 300 clamp(30px, 3.1vw, 58px)/1.14 var(--sys-display); letter-spacing: -.012em; color: #f3f5f7; text-wrap: balance; }
.b-bld-say .b-p { max-width: 40ch; margin: 28px 0 0; text-align: left; font: 400 clamp(17px, 1.3vw, 21px)/1.55 var(--sys-body); color: #e3e7ea; }
.b-bld-stage .b-bld-words { position: absolute; left: var(--gutter); top: 0; width: min(520px, 35vw); margin: 0; will-change: transform; }
.b-bld-stage .b-bld-words::before { content: ""; position: absolute; inset: -36% -22%; z-index: -1; pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity .45s var(--sys-ease); background: radial-gradient(closest-side, rgba(5, 7, 10, .62), rgba(5, 7, 10, 0)); }
.b-bld-stage .b-bld-words.is-on::before { opacity: 1; }   /* only the block in hand darkens the picture behind it */
.b-bld-stage h3 { margin: 0; font: 200 clamp(48px, 4.8vw, 92px)/.96 var(--sys-display); letter-spacing: -.02em; color: #f3f5f7; }
.b-bld-stage .b-bld-words p { max-width: 30ch; margin: 14px 0 0; font: 400 clamp(17px, 1.3vw, 21px)/1.5 var(--sys-body); color: #e3e7ea; }
@media (max-width: 760px) {
  .b-bld-say { right: var(--gutter); width: auto; }
  .b-bld-say .b-lede { font-size: clamp(28px, 7.8vw, 36px); }
  .b-bld-say .b-p { margin-top: 20px; font-size: 16px; }
  .b-bld-stage .b-bld-words { right: var(--gutter); width: auto; }
  /* (on a phone the words cross the whole frame, so their shade is a broad soft oval that keeps its strength out to the
     ends of the lines) */
  .b-bld-stage .b-bld-words::before { inset: -50% -45%; background: radial-gradient(closest-side, rgba(5, 7, 10, .86) 66%, rgba(5, 7, 10, 0)); }
  .b-bld-say::before { content: ""; position: absolute; inset: -18% -14%; z-index: -1; pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity .45s var(--sys-ease); background: radial-gradient(closest-side, rgba(5, 7, 10, .74), rgba(5, 7, 10, 0)); }
  .b-bld-say.is-on::before { opacity: 1; }
  .b-bld-stage h3 { font-size: clamp(40px, 11vw, 48px); }
  .b-bld-stage .b-bld-words p { margin-top: 10px; font-size: 16px; }
}

/* ---- Operate: what a live system needs and what we do about it, then who does what after launch, as an exchange ---- */
/* the opening already speaks across the exchange's line: the need on the left, set against the line, and our answer on
   the right, a beat lower, with the line itself coming down between them */
.b-opr-open { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 8vw; max-width: calc(980px + 2 * var(--gutter)); margin: 0 auto; padding: 22vh var(--gutter) 16vh; }
.b-opr-open .b-lede { grid-column: 1; grid-row: 1; max-width: 13ch; margin: 0 0 0 auto; font-size: clamp(36px, 3.9vw, 72px); line-height: 1.06; text-align: right; }
.b-opr-open .b-p { grid-column: 2; grid-row: 2; max-width: 34ch; margin: 5vh 0 0; text-align: left; color: #b4bcc4; }
.b-opr-open::before { content: ""; position: absolute; left: 50%; top: 22vh; bottom: 0; width: 1px; pointer-events: none; background: linear-gradient(rgba(236, 240, 244, .22), rgba(236, 240, 244, .16) 60%, rgba(236, 240, 244, 0)); transform: scaleY(var(--axis, 1)); transform-origin: 50% 0; }
.b-opr-log { position: relative; padding: 4vh var(--gutter) 8vh; }
.b-opr-sides { display: none; }
.b-opr-feed { display: grid; gap: 4vh; max-width: 980px; margin: 0 auto; padding: 0; list-style: none; }
.b-opr-feed li { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8vw; }
.b-opr-who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.b-opr-v { max-width: 24ch; font: 300 clamp(22px, 2.1vw, 36px)/1.22 var(--sys-display); letter-spacing: -.01em; text-wrap: balance; }
.b-opr-feed li.is-you .b-opr-v { grid-column: 1; justify-self: end; text-align: right; }
.b-opr-feed li.is-us .b-opr-v { grid-column: 2; color: #e7c3c9; }
/* the two sides named once, as column titles set in the same voice as the lines beneath them */
.bodies-live .b-opr-log { height: 100vh; padding: 0 var(--gutter); overflow: hidden; }
.bodies-live .b-opr-sides { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8vw; position: absolute; left: var(--gutter); right: var(--gutter); top: 13vh; z-index: 1; max-width: 980px; margin: 0 auto; padding-bottom: 14px; border-bottom: 1px solid rgba(236, 240, 244, .16); font: 300 clamp(24px, 2vw, 34px)/1.1 var(--sys-display); letter-spacing: -.01em; color: #f1f3f5; }
.bodies-live .b-opr-sides span:first-child { text-align: right; }
.bodies-live .b-opr-sides::after { content: ""; position: absolute; left: 50%; top: calc(100% + 1px); height: 70vh; width: 1px; background: linear-gradient(rgba(236, 240, 244, .16), rgba(236, 240, 244, 0)); }
.bodies-live .b-opr-feed { position: absolute; left: var(--gutter); right: var(--gutter); top: 26vh; max-width: 980px; margin: 0 auto; will-change: transform; }
@media (max-width: 760px) {
  .b-opr-open { display: block; padding: 14vh var(--gutter) 10vh; }
  .b-opr-open::before { display: none; }
  .b-opr-open .b-lede { max-width: 15ch; margin: 0; font-size: clamp(32px, 9vw, 40px); text-align: left; }
  .b-opr-open .b-p { margin-top: 4vh; }
  .b-opr-feed li, .bodies-live .b-opr-sides { column-gap: 6vw; }
  .b-opr-v { font-size: 18px; }
  .bodies-live .b-opr-sides { font-size: 21px; }
}

/* ---- DX Audit ---- */
/* the opening: the audit in one sentence, at the middle of the page like the hero's reading, and what it looks at under it */
.b-dxa-open { padding: 20vh var(--gutter) 9vh; text-align: center; }
.b-dxa-open .b-lede { max-width: 26ch; margin: 0 auto; font-size: clamp(32px, 3.6vw, 68px); line-height: 1.12; }
.b-dxa-open .b-p { max-width: 50ch; margin: 5vh auto 0; }
/* the baseline. Without the scene (a phone, reduced motion) it stands upright down the left: a tick at each measure,
   the last one crimson as under the hero, each measure named beside its tick and defined under the name */
.b-dxa-read { position: relative; padding: 8vh 0 6vh; }
.b-dxa-read > .b-h { padding: 0 var(--gutter); text-align: center; font-size: clamp(40px, 4.4vw, 84px); }
.b-dxa-stage { position: relative; max-width: 940px; margin: 9vh auto 0; padding: 0 var(--gutter); }
.b-dxa-rule { display: none; }
.b-dxa-measures { --gap: 7vh; --in: 64px; --ty: calc(clamp(32px, 3.2vw, 58px) * .56); display: grid; gap: var(--gap); padding-left: var(--in); }
.b-dxa-measures li { position: relative; }
.b-dxa-measures li::before { content: ""; position: absolute; left: calc(-1 * var(--in)); top: var(--ty); width: 24px; height: 1px; background: #2f5f8a; transform: scaleX(var(--tick, 1)); transform-origin: 0 50%; }
.b-dxa-measures li:last-child::before { background: #9a2b3c; }
/* (the line runs from each tick down to the next one) */
.b-dxa-measures li:not(:last-child)::after { content: ""; position: absolute; left: calc(-1 * var(--in)); top: var(--ty); bottom: calc(-1 * (var(--gap) + var(--ty))); width: 1px; background: rgba(13, 17, 23, .26); transform: scaleY(var(--run, 1)); transform-origin: 50% 0; }
.b-dxa-measures h3 { font: 200 clamp(32px, 3.2vw, 58px)/1.06 var(--sys-display); letter-spacing: -.01em; text-wrap: balance; }
.b-dxa-measures p { max-width: 40ch; margin-top: 14px; font: 400 clamp(17px, 1.3vw, 20px)/1.55 var(--sys-body); color: #3f4954; }
/* with the scene: the definition of the measure in hand, large, standing on the line; every measure named along it
   (the three together held about the middle of the screen) */
@media (min-width: 761px) {
  .bodies-live .b-dxa-stage { height: 100vh; max-width: none; margin: 4vh 0 0; padding: 0; }
  .bodies-live .b-dxa-rule { display: block; position: absolute; left: var(--gutter); right: var(--gutter); top: 60vh; height: 1px; }
  .bodies-live .b-dxa-measures { position: absolute; left: var(--gutter); right: var(--gutter); top: 10vh; height: 42vh; display: block; padding: 0; }
  .bodies-live .b-dxa-measures li { position: absolute; left: 50%; bottom: 0; width: min(1040px, 100%); text-align: center; transform: translateX(-50%); }
  .bodies-live .b-dxa-measures li::before, .bodies-live .b-dxa-measures li::after { display: none; }
  /* (the name is read out along the line, so here it is kept for screen readers only) */
  .bodies-live .b-dxa-measures h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bodies-live .b-dxa-measures p { max-width: 25ch; margin: 0 auto; font: 300 clamp(30px, 3.2vw, 60px)/1.14 var(--sys-display); letter-spacing: -.014em; color: #12161c; text-wrap: balance; }
}
.b-dxa-line { position: absolute; inset: 0; background: rgba(13, 17, 23, .3); transform-origin: 0 50%; }
.b-dxa-tick { position: absolute; top: -10px; width: 1px; height: 20px; margin-left: -.5px; background: #2f5f8a; transform-origin: 50% 100%; transition: background-color .3s var(--sys-ease); }
.b-dxa-tick.is-risk { background: #9a2b3c; }
.b-dxa-tick.is-on { background: #0d1117; }
.b-dxa-name { position: absolute; top: 26px; width: 15ch; margin-left: -7.5ch; padding-bottom: 6px; text-align: center; font: 300 clamp(15px, 1.15vw, 18px)/1.25 var(--sys-display); color: #39424d; background: linear-gradient(currentColor, currentColor) 50% 100% / 0% 1.5px no-repeat; transition: color .3s var(--sys-ease), background-size .5s var(--sys-ease); }
.b-dxa-name.is-on { color: #0d1117; background-size: 42% 1.5px; }
/* when to run one: the question held on the left while the moments pass by on the right, the last one in crimson */
.b-dxa-when { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 6vw; align-items: start; max-width: 1360px; margin: 0 auto; padding: 14vh var(--gutter) 18vh; }
.b-dxa-when-say { position: sticky; top: 24vh; }
.b-dxa-when-say .b-h { text-align: left; font-size: clamp(40px, 4.4vw, 84px); }
.b-dxa-when-say .b-p { margin: 28px 0 0; text-align: left; }
.b-dxa-list { display: grid; gap: 6.5vh; padding-top: 1vh; }
.b-dxa-list li { max-width: 18ch; font: 200 clamp(28px, 3vw, 56px)/1.1 var(--sys-display); letter-spacing: -.012em; text-wrap: balance; }
.b-dxa-list li:last-child { font: italic 400 clamp(30px, 3.2vw, 60px)/1.1 var(--sys-accent); letter-spacing: 0; color: #8a2536; }
/* the close names where the engagement runs; the way on below it is that product */
.t-end > .b-dxa-sk { align-items: flex-start; width: 100%; max-width: 1360px; margin: 0 auto; text-align: left; }
.b-dxa-sk .b-h { max-width: 15ch; font-size: clamp(44px, 4.8vw, 92px); }
.b-dxa-sk .b-p { max-width: 44ch; margin: 3.5vh 0 0; text-align: left; }
.t-end > .b-dxa-sk .b-actions { justify-content: flex-start; margin-top: 4.5vh; }
@media (max-width: 760px) {
  .b-dxa-open { padding: 14vh var(--gutter) 6vh; text-align: left; }
  .b-dxa-open .b-lede { margin: 0; text-align: left; }
  .b-dxa-open .b-p { margin: 4vh 0 0; text-align: left; }
  .b-dxa-read { padding-top: 6vh; }
  .b-dxa-read > .b-h { text-align: left; font-size: 38px; }
  .b-dxa-stage { margin-top: 6vh; }
  .b-dxa-measures { --gap: 5.5vh; --in: 34px; --ty: calc(30px * .56); }
  .b-dxa-measures li::before { width: 16px; }
  .b-dxa-measures h3 { font-size: 30px; }
  .b-dxa-measures p { margin-top: 10px; font-size: 16px; }
  .b-dxa-when { display: block; padding: 10vh var(--gutter) 12vh; }
  .b-dxa-when-say { position: static; }
  .b-dxa-when-say .b-h { font-size: 38px; }
  .b-dxa-when-say .b-p { margin-top: 16px; }
  .b-dxa-list { gap: 2.6vh; margin-top: 5vh; }
  .b-dxa-list li { font-size: 25px; }
  .b-dxa-list li:last-child { font-size: 28px; }
  .b-dxa-sk .b-h { font-size: clamp(34px, 9.4vw, 40px); }
  .b-dxa-sk .b-p { margin-top: 2.6vh; font-size: 16px; }
  .t-end > .b-dxa-sk .b-actions { margin-top: 3vh; }
}

/* the endings on a phone: each close is set a size down, so with the way on and the footer it is one screen even on a
   short phone (375 x 667) */
@media (max-width: 760px) {
  .t-end > .b-close .b-h { font-size: clamp(32px, 9.4vw, 40px); }
  .t-end > .b-close .b-p { margin-top: 2.4vh; }
}