/* ============================================================================
   HYDRO2050 - PAGE 01, HOW IT WORKS
   ----------------------------------------------------------------------------
   Measured from Paper artboards 76C-0 (1440) and AK1-0 (375).

   THE HEADLINE OVERLAP, resolved. The defect list carried a 95px overlap
   between the h1 and the "Pattern, wave arriving" rectangle. Measured against
   the artboard it does not reproduce: the headline box is 725 wide starting at
   the 64 gutter, so it ends at 789, and the pattern's left edge is 789. They
   abut exactly. The 95 is what a rebuild WOULD collide by if it gave the h1
   this page's other headings' 820 measure: 64 + 820 = 884, and 884 - 789 = 95.

   So the fix is two lines rather than a redesign. The h1 keeps its measured
   725, not 820. And the pattern, which in Paper is the artboard's last child
   and therefore paints over the eyebrow, the headline and the deck at 0.4,
   is put behind them here and given pointer-events: none. Nothing measured
   moves; the paint order changes.
   ========================================================================== */

.p01-open {
  padding-top: var(--rhythm-open);
  position: relative;
  overflow-x: clip;
  isolation: isolate;
}
/* 1051 x 398 at left 789, top 148 of the artboard. The artboard's y 148 is the
   header's bottom edge, so this sits against the top of the opening. */
.p01-open > .wrap { position: relative; z-index: var(--z-content); }

.p01-open__eyebrow { margin-bottom: 28px; }
.p01-open__title { max-width: 725px; margin-bottom: 28px; }   /* 725, not 820 */
.p01-open__deck  { max-width: 680px; }
.p01-open__photo { margin-top: var(--rhythm-row-end); aspect-ratio: 1376 / 420; min-height: 190px; max-height: 420px; position: relative; z-index: var(--z-content); }
.p01-open__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ===== SHARED SECTION HEAD ===============================================
   Three sections open the same way: a 1px --rule top border, 56 above the
   heading, a 20 gap, and a 680 lead. */

.p01-head {
  border-top: 1px solid var(--rule);
  padding-top: 56px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.p01-head__title {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 42px;
  letter-spacing: -0.02em;
  font-weight: var(--wt-medium);
  color: var(--brand-navy);
}
.p01-head__lead { font-size: 18px; line-height: 30px; color: var(--ink); max-width: 680px; }

/* ===== THREE MODES ======================================================= */

.p01-modes { padding-top: var(--rhythm-section); }
.p01-modes__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  margin-top: 56px;
}
/* 405 x 3 + 48 x 2 = 1311 inside 1312, so the row is one pixel short of the
   column by the artboard's own arithmetic. Expressed as thirds. */
.mode {
  border-top: 2px solid var(--cat, var(--rule));
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mode__title {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 28px;
  font-weight: var(--wt-medium);
  color: var(--brand-navy);
}
.mode__line { font-size: 18px; line-height: 30px; color: var(--ink); }
.mode__note { font-size: 16px; line-height: 24px; color: var(--ink-muted); }

/* ===== THE PROCESS ======================================================= */

.p01-process {
  padding-top: var(--rhythm-section);
  position: relative;
  overflow-x: clip;
  isolation: isolate;
}
.p01-process > .wrap, .p01-process > .bleed-left { position: relative; z-index: var(--z-content); }

.p01-steps { margin-top: 44px; }
/* 56 + 48 + 320 + 48 + 660 = 1132 inside 1312. The artboard leaves the last
   180 empty rather than widening the body, so the grid names it. */
.step {
  border-top: 1px solid var(--rule);
  padding-top: 32px;
  padding-bottom: 36px;
  display: grid;
  /* The numeral lane stays a literal: it holds two digits and never has to
     give. The title lane is 320 / 1312 = 24.390%, so it resolves to the
     artboard's 320 at 1440 and gives way below it rather than holding 320
     while the step body fell to 252 at 900. */
  grid-template-columns: 56px minmax(200px, 24.390%) minmax(0, 660px) minmax(0, 1fr);
  column-gap: 48px;
}
.p01-steps .step:last-child { border-bottom: 1px solid var(--rule); }
.step__n {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 28px;
  font-weight: var(--wt-semi);
  letter-spacing: 0.14em;
  color: var(--ink-muted);
}
.step__title {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 28px;
  font-weight: var(--wt-medium);
  color: var(--brand-navy);
}
.step__body { font-size: 18px; line-height: 30px; color: var(--ink); }

/* MEASURED, NOT ASSUMED. The wave artwork behind this section puts
   rgb(214,224,239) behind the step numbers, where --ink-muted is 4.14:1 and
   fails the 4.5 body floor. --ink-muted-art is 5.35:1 on that same pixel.
   Found by tools/over-image-contrast.mjs, which reads real rendered pixels. */
.p01-process .step__n { color: var(--ink-muted-art); }

/* Bottom margin removed rather than halved: it stacked onto .p01-tech's own
   112 and opened a 152px run of white between the photograph and the rule
   above "The technology behind it". The next section's padding is the space. */
.p01-photo { margin-block: var(--rhythm-block) 0; height: clamp(220px, 26.4vw, 380px); }
.p01-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ===== THE TECHNOLOGY ==================================================== */

/* The bottom is the tight step, not the section step, because .band follows
   this section directly and the band brings 112px of its own PAINTED top
   padding. Two full section steps back to back put 139px of white above a
   navy edge that then held another 112 before its headline. The band's ground
   is the separation; this only has to stop the last figure touching it. */
.p01-tech {
  padding: var(--rhythm-section) 0 var(--rhythm-sm);
  position: relative;
  overflow-x: clip;
  isolation: isolate;
}
.p01-tech > .wrap { position: relative; z-index: var(--z-content); }

/* The same measurement, on the same artwork. The eyebrow's --azure-ink is
   4.40:1 against rgb(239,242,245) here. --azure-hover, which the system
   already defines, is 5.92:1 on that pixel and 6.65:1 on page. */
.p01-tech .eyebrow { color: var(--azure-hover); }

.tech {
  border-top: 1px solid var(--rule);
  padding-top: 44px;
  padding-bottom: 56px;
  display: grid;
  /* 376 / 1312 = 28.659%, the same fraction treatment css/industry.css gives
     .row and css/partners.css already gave .partner. As a literal 376 this
     row read 376 heading against 300 copy at 900 and 376 against 400 at
     1000, so the identity column was wider than the column it introduces
     across the whole band between the breakpoint and 1280. */
  grid-template-columns: minmax(280px, 28.659%) minmax(0, 680px) minmax(0, 1fr);
  column-gap: 48px;
}
.tech--closed { border-bottom: 1px solid var(--rule); }
.tech__id { display: flex; flex-direction: column; gap: 12px; }
.tech__title {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 42px;
  letter-spacing: -0.02em;
  font-weight: var(--wt-medium);
  color: var(--brand-navy);
}
.tech__copy { display: flex; flex-direction: column; gap: 26px; }
.tech__copy > p { font-size: 18px; line-height: 30px; color: var(--ink); }

/* Paper sets this in Archivo 100 at 72px. Archivo is not a Hydro2050 brand
   face, so it is Montserrat 300 at the measured size, leading and tracking. */
.tech__stat {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-top: 16px;
  flex-wrap: wrap;
}
.tech__stat-value {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 72px;
  letter-spacing: -0.06em;
  font-weight: var(--wt-light);
  color: var(--brand-navy);
}
.tech__stat-note {
  font-size: 16px;
  line-height: 24px;
  color: var(--ink-muted);
  max-width: 320px;
}

/* The spec list. A 220 term against a 436 definition, 14 above and below.
   220 / 680 = 32.353%, held as that fraction rather than as a literal. The
   literal was the worst instance of this fault on the site: nested inside a
   copy column that was itself 400 at 1000 and 300 at 900, the definition
   track resolved to 156 and then to 56, and "Plug in power, connect water
   inlet and outlet." set one word per line down a six-line stack. */
.speclist__row {
  display: grid;
  grid-template-columns: minmax(150px, 32.353%) minmax(0, 1fr);
  gap: 24px;
  padding-block: 14px;
  border-top: 1px solid var(--rule);
}
.speclist__row:last-child { border-bottom: 1px solid var(--rule); }
.speclist__term {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 26px;
  font-weight: var(--wt-medium);
  color: var(--brand-navy);
}
.speclist__def { font-size: 16px; line-height: 26px; color: var(--ink-muted); }

/* Desktop shows the list open under no control at all. The summary is the
   375 artboard's disclosure header and does not exist here. */
.speclist > summary { display: none; }

/* ===== WHAT IT ACTS ON =================================================== */

.p01-acts { padding-top: 56px; display: flex; flex-direction: column; gap: 20px; }
.p01-acts__title {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 42px;
  letter-spacing: -0.02em;
  font-weight: var(--wt-medium);
  color: var(--brand-navy);
  max-width: 820px;
}
.p01-acts__lead { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; max-width: 680px; }
.p01-acts__lead p { font-size: 18px; line-height: 30px; color: var(--ink); }

/* One figure, not two. The artboard draws a radar chart beside the scope
   diagram carrying the same information, and drawn honestly it is a solid
   octagon, because nothing Hydro2050 publishes separates one class from
   another. The scope diagram says the same thing without implying a
   measurement nobody has made, so it is the one that is built. */
.figures {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 32px;
  padding-top: 38px;
  padding-bottom: 28px;
}
.figures > .figure { width: min(100%, 640px); }
.figure {
  border-top: 1px solid var(--rule);
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.figure__title {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 26px;
  font-weight: var(--wt-medium);
  color: var(--brand-navy);
}
/* 4.12:1 as --ink-muted against the rgb(220,223,225) the artwork puts behind
   it, 5.33:1 as --ink-muted-art. */
.figure__note { font-size: 16px; line-height: 26px; color: var(--ink-muted-art); max-width: 600px; }
.figure__caption { display: flex; flex-direction: column; gap: 6px; }

/* The plot. The artboard offsets the art 22px up inside its frame, and the
   labels are positioned in the frame's own coordinates, so the SVG carries
   the offset and the labels do not. */
.figure__plot { position: relative; width: 100%; aspect-ratio: 640 / 400; }
.figure__plot svg { position: absolute; left: 0; top: -5.5%; width: 100%; height: 100%; }
/* The eight labels ring the plot. Their positions are fractions of the plot
   box, which is what they always were, and they are declared here rather than
   as eight inline style attributes so no page carries geometry in its markup.
   The ring reads clockwise from the top; the spans follow it in source order,
   and .figure__centre is the first span in the box. */
.figure__plot > span:nth-of-type(2) { left: 34.3750%; top: 12.00%; width: 31.2500%; }
.figure__plot > span:nth-of-type(3) { left: 65.6250%; top: 22.00%; width: 31.2500%; }
.figure__plot > span:nth-of-type(4) { left: 71.5625%; top: 47.25%; width: 28.4375%; }
.figure__plot > span:nth-of-type(5) { left: 65.6250%; top: 72.50%; width: 31.2500%; }
.figure__plot > span:nth-of-type(6) { left: 34.3750%; top: 83.50%; width: 31.2500%; }
.figure__plot > span:nth-of-type(7) { left: 0;        top: 72.50%; width: 33.5938%; }
.figure__plot > span:nth-of-type(8) { left: 0;        top: 47.25%; width: 28.4375%; }
.figure__plot > span:nth-of-type(9) { left: 0;        top: 20.00%; width: 33.5938%; }

.figure__label {
  position: absolute;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--wt-medium);
  color: var(--brand-navy);
}
.figure__label--c { text-align: center; }
.figure__label--r { text-align: right; }
/* The scope ring's centre hub. Paper draws it as an SVG circle with the label
   floated over the top, which leaves the label's computed background reading
   as the page white and a contrast checker scoring it 1.00:1 against a navy
   it is actually sitting on. The hub is drawn here instead, as a real element
   behind its own text, so the 9.60:1 is what the DOM says as well as what the
   pixels say. The SVG's own hub circle is removed; nothing moves.
   r 34 of a 640 viewBox is 68, and the art is offset 22 up inside the frame,
   so the centre lands at frame (320, 198). */
.figure__centre {
  position: absolute;
  left: 44.6875%;
  top: 41%;
  width: 10.625%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brand-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 26px;
  font-weight: var(--wt-medium);
  color: var(--on-navy);        /* 9.60:1 on the navy hub */
}

.figure__key {
  border-top: 1px solid var(--rule);
  padding-top: 14px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
}
.figure__key-mark {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 26px;
  font-weight: var(--wt-medium);
  color: var(--brand-navy);
}
.figure__key-text { font-size: 16px; line-height: 26px; color: var(--ink-muted); }

/* Mobile-only replacements for the two figures. */
.p01-radical, .p01-classes { display: none; }

/* ===== MOBILE ============================================================
   From artboard AK1-0. It is a different arrangement rather than a narrower
   one, and the biggest departure is that both figures are DROPPED: eight
   radiating labels do not fit a 375 column. The artboard replaces them with a
   plain eight-item list, which is its own copy, quoted here verbatim. The
   bordered note that explained the decision beside it came off the page in
   September 2026 with the rest of the section's build commentary.

   The 375 artboard carries no decorative pattern rectangle at all, so nothing
   paints behind body copy at this width. */

@media (max-width: 899px) {
  .p01-open { padding-top: 32px; }
  .p01-open__eyebrow { margin-bottom: 14px; }
  .p01-open__title { margin-bottom: 14px; max-width: none; }
  .p01-open__deck { font-size: 17px; line-height: 27px; }
  .p01-open__photo { margin-top: 28px; height: 190px; }

  .p01-head { border-top: 0; padding-top: 0; gap: 12px; }
  .p01-head__title { font-size: 22px; line-height: 27px; }
  .p01-head__lead { font-size: 17px; line-height: 26px; }

  .p01-modes { padding-top: 48px; }
  .p01-modes__row { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 28px; }
  .mode { padding-top: 20px; gap: 10px; }
  .mode__title { font-size: 17px; line-height: 22px; font-weight: var(--wt-semi); }
  .mode__line { font-size: 17px; line-height: 26px; }
  .mode__note { font-size: 15px; line-height: 23px; }

  /* The process becomes a tinted full-bleed panel. */
  .p01-process {
    padding: 40px 0;
    margin-top: 56px;
    background: var(--surface);
  }

  .p01-steps { margin-top: 0; }
  /* The number sits in a 24px slot beside the title, and the body is indented
     under both by 36, which is that slot plus the 12 gap. */
  .step {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 12px;
    padding-top: 18px;
    padding-bottom: 0;
    margin-top: 22px;
  }
  .step__n { font-family: var(--font-body); font-size: 13px; line-height: 16px; letter-spacing: 0; color: var(--azure-ink); }
  .step__title { font-size: 17px; line-height: 22px; font-weight: var(--wt-semi); }
  .step__body { grid-column: 2; font-size: 17px; line-height: 26px; margin-top: 6px; }
  .p01-steps .step:last-child { border-bottom: 0; }

  .p01-photo { margin-block: 0; height: 180px; }

  .p01-tech { padding: 56px 0 0; }
  .tech {
    display: block;
    border-top: 1.5px solid var(--rule);
    padding-top: 20px;
    padding-bottom: 0;
    margin-top: 40px;
  }
  .p01-tech .tech:first-of-type { margin-top: 28px; }
  .tech--closed { border-bottom: 0; }
  .tech__id { gap: 6px; margin-bottom: 10px; }
  .tech__title { font-size: 22px; line-height: 28px; }
  .tech__copy { gap: 10px; }
  .tech__copy > p { font-size: 17px; line-height: 26px; }

  .tech__stat { padding-top: 10px; gap: 10px; }
  .tech__stat-value { font-size: 34px; line-height: 42px; letter-spacing: -0.03em; font-weight: var(--wt-medium); }
  .tech__stat-note { font-size: 13px; line-height: 20px; max-width: none; }

  /* The spec list becomes the artboard's disclosure. Same decision as the
     Page 03 benefits list: it ships OPEN, so nothing is hidden from a visitor
     who never taps and no JavaScript is needed to reach five short rows. */
  .speclist { margin-top: 10px; }
  .speclist > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    list-style: none;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 17px;
    line-height: 22px;
    font-weight: var(--wt-semi);
    color: var(--brand-navy);
  }
  .speclist > summary::-webkit-details-marker { display: none; }
  .speclist__chev {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--azure-ink);
    transition: transform var(--dur-hover) var(--ease-out);
  }
  /* Same hover pair as the benefits disclosure in css/industry.css, and for
     the same reason: below the breakpoint the layout is still reachable with a
     mouse in a narrow window, and this was the one control here that gave the
     pointer nothing back. */
  .speclist > summary:hover { color: var(--azure-hover); }      /* 6.65:1 on page */
  .speclist > summary:hover .speclist__chev { color: var(--azure-hover); }
  .speclist[open] > summary .speclist__chev { transform: rotate(180deg); }
  .speclist__row { display: block; padding-block: 14px; border-top: 0; border-bottom: 1px solid var(--rule); }
  .speclist__row:last-child { border-bottom: 1px solid var(--rule); }
  .speclist__term { font-size: 17px; line-height: 22px; font-weight: var(--wt-semi); margin-bottom: 2px; }
  .speclist__def { font-size: 17px; line-height: 25px; color: var(--ink); }

  .p01-acts { padding-top: 56px; gap: 12px; }
  .p01-acts__title { font-size: 22px; line-height: 28px; }
  .p01-acts__lead { gap: 8px; padding-top: 0; }
  .p01-acts__lead p { font-size: 17px; line-height: 26px; }

  /* Both figures and the desktop decision callout come out. */
  .figures { display: none; }

  /* The hydroxyl mark, a 64px navy disc beside its caption. */
  .p01-radical {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 28px;
  }
  .p01-radical__disc {
    width: 64px;
    height: 64px;
    border-radius: 32px;
    background: var(--brand-navy);
    color: var(--on-navy);              /* 9.60:1 */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 17px;
    line-height: 22px;
    font-weight: var(--wt-semi);
  }
  .p01-radical__cap { padding-top: 4px; font-size: 15px; line-height: 23px; color: var(--ink-muted); }

  /* The eight classes, as a plain list on a full-bleed tinted panel. */
  .p01-classes {
    display: block;
    background: var(--surface);
    padding: 8px var(--gutter-mob) 12px;
    margin: 24px calc(50% - 50vw) 0;
    width: 100vw;
    max-width: 100vw;
  }
  .p01-classes li {
    min-height: 46px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--rule);
    font-size: 17px;
    line-height: 22px;
    color: var(--brand-navy);
  }
  .p01-classes li:last-child { border-bottom: 0; }

  .p01-tech + .band { margin-top: 56px; }
}

/* ========================================================================
   SESSION 030, the client's change document.

   Four things are new on this page and all four are held here rather than
   threaded into the blocks above, so the whole of this pass can be read, or
   reverted, in one place.

     .p01-modes--tight / --two   three modes became two
     .speclist__row--accent      the blue Organic contaminants row
     .tp-figure                  the treatment process diagram
     .tp-outcomes                the client's numbered treatment results
   ==================================================================== */

/* Two sections of this kind stack on this page. Two full section rhythms
   stacked read as a gap rather than as a break, so whichever runs second takes
   a shorter top. Since the client's 10 September pack flipped the order, that
   is the three system formats. */
.p01-modes--tight { padding-top: calc(var(--rhythm-section) * 0.55); }

/* Two cards in a three-column grid would leave a third of the row empty and
   read as a card that failed to load. */
.p01-modes__row--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* "Add in blue (top)". The row keeps the list's own geometry and takes the
   brand azure on its rule and its term, which is enough to make it read as the
   headline row without turning the body copy into a colour no one can read.
   The tint is 6% so the 16px definition text stays on near-white. */
.speclist__row--accent {
  border-top-color: var(--brand-azure);
  border-top-width: 2px;
  background: rgba(0, 160, 224, 0.06);
  padding-inline: 12px;
  margin-inline: -12px;
}
.speclist__row--accent .speclist__term { color: var(--brand-azure); }

/* ---- THE TREATMENT PROCESS DIAGRAM ---------------------------------- */

.tp-figure { margin-top: 64px; }
.tp-figure__caption { margin-bottom: 20px; }
.tp-figure__title {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 36px;
  font-weight: var(--wt-light);
  letter-spacing: -0.02em;
  color: var(--brand-navy);
}

/* The figure scrolls sideways, the page never does. Eight nodes across cannot
   reflow into a phone column without becoming a different diagram, so below
   the width it needs, this container scrolls and the page does not. */
.tp-figure__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
.tp-figure__svg {
  display: block;
  width: 100%;
  min-width: 860px;
  height: auto;
}

.tp-figure__svg .tp-sym {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: var(--wt-light);
  fill: var(--brand-azure);
  text-anchor: middle;
}
.tp-figure__svg .tp-lab {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--wt-semi);
  letter-spacing: 0.02em;
  fill: var(--brand-navy);
  text-anchor: middle;
}
.tp-figure__svg .tp-cap {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--wt-semi);
  letter-spacing: 0.04em;
  fill: var(--brand-navy);
}
.tp-figure__svg .tp-sub {
  font-size: 14px;
  fill: var(--ink-muted);
}
.tp-figure__svg .tp-mid { text-anchor: middle; }

/* The same sequence in words. It is the accessible equivalent of the SVG, which
   is why the SVG is aria-hidden, and it is visible on narrow widths where the
   diagram has to be scrolled to be read at all. */
.tp-figure__steps {
  display: none;
  margin: 20px 0 0;
  padding-left: 20px;
}
.tp-figure__steps li {
  font-size: 16px;
  line-height: 26px;
  color: var(--ink-muted);
  padding-block: 2px;
}

/* ---- WHAT THE TREATMENT DOES ---------------------------------------- */

.tp-outcomes { margin-top: 56px; }
.tp-outcomes__title {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 28px;
  font-weight: var(--wt-medium);
  color: var(--brand-navy);
  margin-bottom: 20px;
}
.tp-outcomes__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tp-outcomes__list li {
  position: relative;
  font-size: 17px;
  line-height: 28px;
  color: var(--ink);
  padding: 12px 0 12px 26px;
  border-bottom: 1px solid var(--rule);
}
/* The marker is drawn rather than a list bullet, so it can be the brand
   turquoise and sit on the first line's optical centre at any wrap. */
.tp-outcomes__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 23px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-turq);
}
@media (max-width: 899px) {
  .p01-modes--tight { padding-top: 40px; }
  .p01-modes__row--two { grid-template-columns: minmax(0, 1fr); }

  .speclist__row--accent {
    border-top-width: 0;
    border-bottom-color: var(--brand-azure);
    border-bottom-width: 2px;
  }

  .tp-figure { margin-top: 40px; }
  .tp-figure__title { font-size: 20px; line-height: 27px; }
  /* The diagram still exists and can still be scrolled, but the written
     sequence appears beside it, because a figure you have to drag sideways
     should not be the only way to get its content. */
  .tp-figure__steps { display: block; }
  .tp-figure__steps li { font-size: 15px; line-height: 24px; }

  .tp-outcomes { margin-top: 40px; }
  .tp-outcomes__title { font-size: 17px; line-height: 22px; font-weight: var(--wt-semi); }
  .tp-outcomes__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tp-outcomes__list li { font-size: 16px; line-height: 25px; padding: 10px 0 10px 24px; }
  .tp-outcomes__list li::before { top: 20px; }
}

/* ========================================================================
   SESSION 041, the client's two station photographs.

   `.p01-stations`   the fixed and mobile pair under the three formats
   ==================================================================== */

/* TWO PHOTOGRAPHS FOR THREE FORMATS, so this is a pair under the row rather
   than one picture per column. The reasoning, and what is missing, is written
   out at the block itself in how-it-works.html.

   The lanes are one format column each and the gap is the row's own 48px, so
   each photograph is exactly as wide as a format column. 858 = 405 + 48 + 405,
   the row's own arithmetic. At 405 the file is rendered 1:1 on a 2x display,
   which is the most these two low resolution files can give.

   IT IS CENTRED, and that is the whole point of the margin. Left aligned at
   858 the two pictures land square under "Submersible system" and "In-line
   system" and read as captions to those two columns, which is the exact
   opposite of what they show. Centred they straddle the column gaps, so no
   picture sits under any one heading and the caption is what names the format.
   Spanning the full 1312 would have fixed that too, at 632 per lane, but these
   files are 274 and 337 pixels wide and 632 is a 2.3x blow-up before the
   display doubles it.

   4 / 3 with object-fit: cover matches `.pair__item` in css/industry.css. The
   two files arrive at 1.17:1 and 0.80:1 and a shared box is the only way two
   photographs of different shape read as one pair. Both are already cropped to
   4:3 in the file, so `cover` has nothing left to cut; it is stated so that a
   re-crop of either file cannot silently start cutting.

   height: auto is load-bearing, not tidiness. base.css sets max-width: 100% on
   img with no matching height rule, so a picture carrying width and height
   attributes keeps the attribute height as its SPECIFIED height, and a
   specified height leaves aspect-ratio nothing to resolve. css/industry.css
   carries the same note against the same defect. */
.p01-stations {
  margin-top: 48px;
  max-width: 858px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
}
.station { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.station img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}
.station__caption { font-size: 16px; line-height: 24px; color: var(--ink-muted); }
/* The format word carries the meaning, so it is the part that is weighted, and
   `.pair__state` in css/industry.css does the same job on the before and after
   pairs. --azure-ink rather than --brand-azure for the reason recorded there:
   measured 4.94:1 on --page, where the lighter brand azure is 2.96:1. */
.station__state {
  font-family: var(--font-display);
  font-weight: var(--wt-medium);
  color: var(--azure-ink);
}

@media (max-width: 899px) {
  .p01-stations { margin-top: 32px; max-width: none; gap: 24px; }
  .station__caption { font-size: 15px; line-height: 23px; }
}

/* Below 600 the two lanes are about 150px each, which is too small to tell a
   cabinet from a trailer. Stacked, each photograph gets the full column and
   the pair still reads as a pair because the captions name the two formats. */
@media (max-width: 599px) {
  .p01-stations { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}