@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-var.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
:root {
  --navy: #082847;
  --navy-deep: #062238;
  --teal: #34ebcd;
  --teal-press: #1fd0b4;
  --teal-on-light: #12a892;
  --paper: #ffffff;
  --tint: #f3f6f8;
  --ink: #0b2545;
  --slate: #5a6b80;
  --slate-soft: #5f7085;
  --line: #dfe4ea;
  --on-navy: #ffffff;
  --on-navy-soft: #eef3f8;
  --on-navy-mute: #c5d3e0;
  --tile-line: rgba(255, 255, 255, 0.7);
  /* one unit is one pixel of the 1536-wide design; desktop sizes scale with the viewport */
  --u: calc(min(100vw, 1680px) / 1536);
  /* above 1680px --u stops growing, so the side space takes up the rest and centres the page */
  --gutter: max(calc(52 * var(--u)), calc((100vw - 1432 * var(--u)) / 2));
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* one tempo for every entrance, reveal and loop (owner, 2026-10-15: "a little slower").
     CSS multiplies motion durations and delays by it; motion.js and request.js read it once.
     Hover, press and focus feedback is deliberately not scaled. */
  --tempo: 1.35;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--navy-deep); scroll-padding-top: calc(100 * var(--u)); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Figtree", "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: proportional-nums lining-nums;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--teal); color: var(--navy-deep); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
.services :focus-visible, .figures :focus-visible { outline-color: var(--navy); }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  background: var(--teal); color: var(--navy-deep); padding: 10px 16px; border-radius: 8px;
  font-weight: 700; text-decoration: none; transition: top 160ms var(--ease-out);
}
.skip:focus { top: 12px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal); color: var(--navy-deep);
  font-weight: 700; text-decoration: none; white-space: nowrap;
  border-radius: calc(8 * var(--u));
  transition: background-color 180ms ease, transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #5ff2da; } }
.btn:active { background: var(--teal-press); transform: scale(0.98); }

/* Hero */
.hero { background: var(--navy); color: var(--on-navy); }
.masthead {
  position: sticky; top: 0; z-index: 5;
  background: var(--navy); color: var(--on-navy);
  display: flex; align-items: center;
  height: calc(88 * var(--u));
  padding: 0 var(--gutter);
}
.wordmark {
  font-size: calc(41.2 * var(--u)); font-weight: 600; letter-spacing: -0.015em;
  text-decoration: none; line-height: 1;
}
.nav { margin-left: auto; display: flex; gap: calc(31 * var(--u)); }
.nav a {
  font-size: calc(17.8 * var(--u)); font-weight: 500; text-decoration: none;
  padding: calc(8 * var(--u)) 0;
  background: linear-gradient(var(--teal), var(--teal)) no-repeat 0 100% / 0 2px;
  transition: background-size 220ms var(--ease-out);
}
.nav a:hover { background-size: 100% 2px; }
.btn-nav {
  margin-left: calc(33 * var(--u));
  width: calc(241 * var(--u)); height: calc(49 * var(--u));
  font-size: max(calc(19.7 * var(--u)), 1rem);
}

.hero-body {
  display: grid;
  /* the diagram keeps its drawn width above 1680px, where --u stops growing */
  grid-template-columns: calc(621 * var(--u)) minmax(0, calc(811 * var(--u)));
  justify-content: space-between;
  align-items: center;
  /* the hero fills the first screen on ordinary laptops, but never balloons on tall monitors */
  min-height: clamp(calc(640 * var(--u)), calc(100svh - 88 * var(--u)), calc(760 * var(--u)));
  padding: calc(64 * var(--u)) var(--gutter) calc(80 * var(--u));
}
.pitch { padding-top: 0; }
h1 {
  font-size: calc(76.8 * var(--u)); font-weight: 800;
  line-height: 0.977; letter-spacing: -0.03em;
  max-width: calc(600 * var(--u));
  text-wrap: balance;
}
h1 .line { display: block; }
.lede {
  margin-top: calc(20 * var(--u));
  font-size: calc(26.7 * var(--u)); line-height: 1.24;
  color: var(--on-navy-soft);
  max-width: calc(545 * var(--u));
}
.btn-primary {
  margin-top: calc(30 * var(--u));
  width: calc(272 * var(--u)); height: calc(60 * var(--u));
  font-size: calc(22 * var(--u));
}

/* The estate diagram */
.estate { min-width: 0; }
.boundary {
  position: relative;
  height: calc(371 * var(--u));
  /* the border keeps the geometry; the visible line is the drawn .edge */
  --bw: calc(2 * var(--u)); --r: calc(14 * var(--u));
  border: var(--bw) solid transparent;
  border-radius: var(--r);
}
.boundary-label {
  position: absolute; left: calc(24 * var(--u)); top: calc(-16 * var(--u));
  padding: 0 calc(11 * var(--u));
  background: var(--navy); color: var(--teal);
  font-size: max(calc(18.7 * var(--u)), 0.9375rem); font-weight: 500; line-height: calc(26 * var(--u));
}
.steps {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(3, calc(118 * var(--u)));
  column-gap: calc(136.500 * var(--u));
  row-gap: calc(64 * var(--u));
  align-content: start;
  padding: calc(30 * var(--u)) 0 0 calc(79 * var(--u));
}
.step { position: relative; display: flex; flex-direction: column; align-items: center; }
.tile {
  --tb: calc(1.5 * var(--u));
  position: relative;
  display: grid; place-items: center;
  width: calc(118 * var(--u)); height: calc(96 * var(--u));
  border: calc(1.500 * var(--u)) solid var(--tile-line);
  border-radius: calc(10 * var(--u));
}
.tile svg {
  width: calc(68 * var(--u)); height: calc(68 * var(--u));
  fill: none; stroke: #fff; stroke-width: 2.200; stroke-linecap: round; stroke-linejoin: round;
}
.step-name {
  margin-top: calc(5 * var(--u));
  font-size: calc(19.2 * var(--u)); font-weight: 500; line-height: calc(27 * var(--u));
  letter-spacing: -0.01em;
  white-space: nowrap;
}
/* arrow from one tile to the next */
.step:not(:nth-child(3n))::before,
.step:not(:nth-child(3n))::after { content: ""; position: absolute; }
.step:not(:nth-child(3n))::before {
  left: calc(141 * var(--u)); top: calc(48 * var(--u));
  width: calc(78 * var(--u)); height: calc(2 * var(--u));
  background: var(--teal);
}
.step:not(:nth-child(3n))::after {
  left: calc(205 * var(--u)); top: calc(41 * var(--u));
  width: calc(14 * var(--u)); height: calc(14 * var(--u));
  border-top: calc(2 * var(--u)) solid var(--teal);
  border-right: calc(2 * var(--u)) solid var(--teal);
  transform: rotate(45deg);
}
/* the line that carries the flow from the first row round to the second */
.flow { position: absolute; border: 0 solid var(--teal); }
.flow-out {
  left: calc(722 * var(--u)); top: calc(81 * var(--u));
  width: calc(42 * var(--u)); height: calc(110 * var(--u));
  border-width: calc(2 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u)) 0;
  border-radius: 0 calc(14 * var(--u)) calc(14 * var(--u)) 0;
}
.flow-back {
  left: calc(138 * var(--u)); top: calc(189 * var(--u));
  width: calc(586 * var(--u)); height: calc(26 * var(--u));
  border-width: calc(2 * var(--u)) 0 0 calc(2 * var(--u));
  border-radius: calc(14 * var(--u)) 0 0 0;
}
.flow-back::after {
  content: ""; position: absolute;
  left: calc(-8 * var(--u)); bottom: calc(1 * var(--u));
  width: calc(14 * var(--u)); height: calc(14 * var(--u));
  border-right: calc(2 * var(--u)) solid var(--teal);
  border-bottom: calc(2 * var(--u)) solid var(--teal);
  transform: rotate(45deg);
}
.outside {
  margin-top: calc(18 * var(--u));
  height: calc(43 * var(--u));
  display: grid; place-items: center;
  border: calc(1.500 * var(--u)) dashed var(--on-navy-mute);
  border-radius: calc(12 * var(--u));
  color: var(--on-navy-mute);
  font-size: calc(18.7 * var(--u)); font-weight: 500;
}

/* Services */
.services { padding: calc(56 * var(--u)) var(--gutter) 0; }
.service {
  display: grid;
  grid-template-columns: calc(84 * var(--u)) calc(335 * var(--u)) 1fr auto;
  align-items: center;
  height: calc(70 * var(--u));
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background-color 180ms var(--ease-out);
}
.service-list li:last-child .service { height: calc(74 * var(--u)); }
@media (hover: hover) and (pointer: fine) {
  .service:hover { background: #eef2f5; }
  .service:hover .chevron { transform: translateX(calc(4 * var(--u))); stroke: var(--teal-on-light); }
}
.service-num {
  font-size: calc(32.8 * var(--u)); font-weight: 700; color: var(--slate-soft);
  line-height: 1;
}
.service-name { font-size: calc(23.9 * var(--u)); font-weight: 700; color: var(--ink); }
.service-line { font-size: max(calc(20.6 * var(--u)), 1rem); color: var(--slate); }
.chevron {
  width: calc(26 * var(--u)); height: calc(26 * var(--u));
  fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 180ms var(--ease-out), stroke 180ms ease;
}

/* Figures */
.figures { padding: calc(20 * var(--u)) var(--gutter) calc(40 * var(--u)); }
.figure-row { display: grid; grid-template-columns: 345fr 370fr 371fr 346fr; }
.figure:first-child { padding-right: calc(28 * var(--u)); }
.figure {
  display: flex; flex-direction: column-reverse; align-items: center;
  text-align: center;
}
.figure dd {
  font-size: calc(54.8 * var(--u)); font-weight: 800; line-height: 1.1; letter-spacing: -0.015em;
  color: var(--ink); font-variant-numeric: tabular-nums lining-nums; text-align: center;
}
.figure dt { font-size: calc(22 * var(--u)); color: var(--slate); line-height: 1.35; }

/* Method: four principles, each level with the layer of the platform it governs */
.method {
  padding: calc(120 * var(--u)) var(--gutter) calc(110 * var(--u));
  background: var(--tint);
}
h2 {
  font-size: calc(48.7 * var(--u)); font-weight: 700; line-height: 1.02; letter-spacing: -0.012em;
  color: var(--ink); text-wrap: balance;
}
.method-intro, .anatomy, .standards-row {
  display: grid; grid-template-columns: calc(520 * var(--u)) 1fr; column-gap: calc(100 * var(--u));
}
.method-intro { display: block; text-align: center; }
.method-intro p {
  margin: calc(20 * var(--u)) auto 0;
  font-size: max(calc(20.6 * var(--u)), 1rem); line-height: 1.45; color: var(--slate); max-width: 52ch;
}

.anatomy { margin-top: calc(64 * var(--u)); grid-template-rows: repeat(4, auto); }
.principle { padding: 0; }
.principle h3 { font-size: calc(23.9 * var(--u)); font-weight: 700; line-height: 1.2; color: var(--ink); }
.principle p {
  margin-top: calc(8 * var(--u));
  font-size: max(calc(19.7 * var(--u)), 1rem); line-height: 1.5; color: var(--slate); max-width: 50ch;
}
.anatomy { display: block; }
/* principles as four equal white cards; the standards panel below spans the same width, so every edge lines up */
.principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(24 * var(--u)); }
.principle {
  padding: calc(36 * var(--u)) calc(32 * var(--u));
  background: var(--paper); border-radius: calc(16 * var(--u));
}
.principles .principle p { margin-top: calc(12 * var(--u)); }

/* Compare: the usual public path beside the private one, drawn as mirror images */
.compare { padding: calc(120 * var(--u)) var(--gutter) calc(120 * var(--u)); background: var(--paper); }
.compare-intro { text-align: center; }
.compare-intro p {
  margin: calc(20 * var(--u)) auto 0;
  font-size: max(calc(20.6 * var(--u)), 1rem); line-height: 1.45; color: var(--slate); max-width: 56ch;
}
.ways { margin-top: calc(64 * var(--u)); display: grid; grid-template-columns: 1fr 1fr; gap: calc(28 * var(--u)); }

/* Each way is one navy panel. Both share one geometry, so every box, arrow and line sits in the
   same place on both sides; only what the boundary encloses changes. */
.highlight {
  background: var(--teal); color: var(--navy-deep);
  padding: 0 0.14em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.way {
  --inset: calc(22 * var(--u));
  position: relative; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; align-content: start;
  padding: calc(36 * var(--u)) calc(56 * var(--u)) calc(40 * var(--u));
  background: var(--navy); color: var(--on-navy); border-radius: calc(16 * var(--u));
}
.way-title, .way-frame, .way-top, .way-bottom, .way-notes { grid-column: 1 / -1; }
.way-title { grid-row: 1; font-size: max(calc(21 * var(--u)), 1rem); font-weight: 700; text-align: center; margin-bottom: calc(34 * var(--u)); }
.way-top, .way-bottom { position: relative; display: grid; justify-items: center; }
.way-top, .way-frame { --bw: calc(2 * var(--u)); --r: calc(14 * var(--u)); }
.way-top { grid-row: 2; grid-template-columns: 1fr 1fr; padding: calc(34 * var(--u)) 0 calc(24 * var(--u)); border: var(--bw) solid transparent; border-radius: var(--r); }
.way-private .way-top > .edge { display: none; }
.way-out { grid-row: 3; grid-column: 1; }
.way-back { grid-row: 3; grid-column: 2; }
.way-bottom {
  grid-row: 4; grid-template-columns: repeat(3, 1fr);
  margin: 0 var(--inset) var(--inset);
  padding: calc(34 * var(--u)) 0 calc(24 * var(--u));
  border: calc(1.5 * var(--u)) dashed var(--on-navy-mute); border-radius: calc(12 * var(--u));
}
.way-private .way-bottom { border-style: solid; border-color: var(--tile-line); }
/* the private boundary: drawn from the top box's edge round everything */
.way-frame {
  grid-row: 2 / 5; position: relative; pointer-events: none;
  border: var(--bw) solid transparent; border-radius: var(--r);
}
.way-label {
  position: absolute; left: 50%; top: calc(-15 * var(--u)); transform: translateX(-50%); white-space: nowrap;
  margin: 0; padding: 0 calc(10 * var(--u)); background: var(--navy);
  font-size: max(calc(17.8 * var(--u)), 0.875rem); font-weight: 500; line-height: calc(28 * var(--u));
}
.way-top .way-label, .way-frame .way-label { color: var(--teal); }
.way-bottom .way-label { color: var(--on-navy-mute); }
.way-private .way-bottom .way-label { color: var(--on-navy-soft); }
.way-step { display: flex; flex-direction: column; align-items: center; text-align: center; }
.way-step .tile { width: calc(100 * var(--u)); height: calc(82 * var(--u)); }
.way-step .tile svg { width: calc(54 * var(--u)); height: calc(54 * var(--u)); }
.way-public .way-bottom .tile { border-style: dashed; border-color: rgba(197, 211, 224, 0.5); }
.way-public .way-bottom .tile svg { stroke: var(--on-navy-mute); }
.way-public .way-bottom .step-name { color: var(--on-navy-mute); }
/* the two crossings, each centred under the tile it leaves from or returns to */
.way-flow {
  display: flex; flex-direction: column; align-items: center; height: calc(140 * var(--u)); margin: 0;
  color: var(--on-navy-mute); font-size: max(calc(17 * var(--u)), 0.875rem); font-weight: 500; line-height: 1.3; text-align: center;
}
.way-text { padding: calc(8 * var(--u)) 0; }
.way-line { --lw: max(2px, calc(2 * var(--u))); position: relative; flex: 1; border-left: var(--lw) solid transparent; }
/* the visible line: dashes for the public crossing, solid teal for the private one */
.dash { position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--lw)); width: var(--lw); overflow: hidden; }
.dash::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 60px);
  background: repeating-linear-gradient(to bottom, var(--on-navy-mute) 0 6px, transparent 6px 12px);
}
.way-back .dash::before { top: -60px; }
.way-private .dash::before { top: 0; height: 100%; background: var(--teal); }
.way-head-down::after, .way-head-up::after {
  content: ""; position: absolute; left: calc(-7 * var(--u) - 1px);
  width: calc(12 * var(--u)); height: calc(12 * var(--u));
  border: solid var(--on-navy-mute); border-width: 0 calc(2 * var(--u)) calc(2 * var(--u)) 0;
}
.way-head-down::after { bottom: 0; transform: rotate(45deg); }
.way-head-up::after { top: 0; transform: rotate(-135deg); }
.way-private .way-flow { color: var(--on-navy-soft); }
.way-private .way-head-down::after, .way-private .way-head-up::after { border-color: var(--teal); }
.way-notes {
  grid-row: 5; margin-top: calc(28 * var(--u));
  display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u));
  font-size: max(calc(17 * var(--u)), 0.875rem); line-height: 1.35; color: var(--on-navy-soft); text-align: center;
}
.way-private .way-notes { color: var(--on-navy); }

/* the standards: a centred title, then one white card holding all three */
.standards-row { display: block; margin-top: calc(80 * var(--u)); }
.standards-title { text-align: center; font-size: calc(30 * var(--u)); font-weight: 700; line-height: 1.2; color: var(--ink); }
.standards {
  margin-top: calc(32 * var(--u));
  display: grid; grid-template-columns: repeat(3, 1fr); column-gap: calc(56 * var(--u));
  padding: calc(40 * var(--u)) calc(48 * var(--u)) calc(44 * var(--u));
  background: var(--paper); border-radius: calc(16 * var(--u));
}
.standard dt { font-size: max(calc(19.7 * var(--u)), 1rem); font-weight: 700; line-height: 1.3; color: var(--ink); }
.standard dd {
  margin-top: calc(12 * var(--u));
  font-size: max(calc(18.7 * var(--u)), 0.9375rem); line-height: 1.5; color: var(--slate);
}

/* Service detail: four panels, two by two, everything on one left edge */
.detail { padding: calc(110 * var(--u)) var(--gutter) calc(120 * var(--u)); }
.detail > h2 { text-align: center; }
.offers {
  margin-top: calc(64 * var(--u));
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(28 * var(--u));
}
.offer {
  display: block;
  padding: calc(44 * var(--u)) calc(48 * var(--u)) calc(48 * var(--u));
  border-radius: calc(16 * var(--u)); background: var(--tint);
  scroll-margin-top: calc(110 * var(--u));
}
.offer h3 { font-size: calc(28.1 * var(--u)); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }
.offer p, .offer li { font-size: max(calc(19.7 * var(--u)), 1rem); line-height: 1.45; color: var(--ink); }
.offer p { margin-top: calc(16 * var(--u)); max-width: 52ch; color: var(--slate); }
.offer ul { margin-top: calc(26 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.offer li { position: relative; padding-left: calc(22 * var(--u)); }
/* a plain teal point, centred on the first line */
.offer li::before {
  content: ""; position: absolute; left: 0; top: calc(0.725em - 3px);
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal-on-light);
}

/* Contact */
.contact {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(36 * var(--u));
  padding: calc(96 * var(--u)) var(--gutter);
  background: var(--navy); color: var(--on-navy);
}
.contact h2 { color: var(--on-navy); }
.contact p { margin-top: calc(18 * var(--u)); font-size: max(calc(22.5 * var(--u)), 1.0625rem); line-height: 1.4; color: var(--on-navy-soft); max-width: 46ch; margin-inline: auto; }
.contact .btn-primary { margin-top: 0; flex: none; }

/* Request form: a white card on the navy band, so every field reads at full contrast */
.request {
  width: 100%; max-width: calc(880 * var(--u));
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(22 * var(--u)) calc(24 * var(--u));
  padding: calc(40 * var(--u)) calc(44 * var(--u)) calc(36 * var(--u));
  background: var(--paper); color: var(--ink); border-radius: calc(16 * var(--u));
  text-align: left;
}
.request[hidden] { display: none; }
.request :focus-visible { outline-color: var(--navy); }
.field { display: flex; flex-direction: column; gap: calc(8 * var(--u)); min-width: 0; }
.field-wide, .request-foot, .request-status { grid-column: 1 / -1; }
.field label { font-size: max(calc(17.8 * var(--u)), 0.9375rem); font-weight: 600; line-height: 1.3; }
.optional { font-weight: 400; color: var(--slate); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink);
  font-size: max(calc(18.7 * var(--u)), 1rem); line-height: 1.4;
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  background: var(--paper); border: 1.5px solid #7d8ca0; border-radius: calc(8 * var(--u));
  transition: border-color 160ms ease, box-shadow 200ms var(--ease-out);
}
.field select {
  appearance: none; padding-right: calc(44 * var(--u));
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right calc(14 * var(--u)) center / calc(20 * var(--u));
}
.field textarea { resize: vertical; min-height: calc(140 * var(--u)); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--slate); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--navy); outline: none;
  box-shadow: 0 0 0 4px rgba(52, 235, 205, 0.32);
}
.field label { transition: color 160ms ease; }
.field:focus-within label { color: var(--navy); }
.field input:user-invalid, .field textarea:user-invalid { border-color: #c2352b; }
.field input:user-invalid:focus, .field textarea:user-invalid:focus { box-shadow: 0 0 0 4px rgba(194, 53, 43, 0.16); }
.field-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.request-foot { display: flex; align-items: center; justify-content: space-between; gap: calc(24 * var(--u)); margin-top: calc(4 * var(--u)); }
.request-note { display: flex; flex-direction: column; gap: calc(6 * var(--u)); font-size: max(calc(16.8 * var(--u)), 0.9375rem); line-height: 1.45; color: var(--slate); }
.contact .request-note p { margin: 0; max-width: none; font-size: inherit; line-height: inherit; color: inherit; }
.request-note a, .request-status a { color: var(--ink); font-weight: 500; --rule: rgba(11, 37, 69, 0.3); --rule-on: var(--teal-on-light); }
.request .btn-primary { margin: 0; flex: none; width: auto; padding: 0 calc(32 * var(--u)); font: inherit; font-size: calc(22 * var(--u)); font-weight: 700; border: 0; cursor: pointer; }
.request .btn-primary:disabled { opacity: 0.6; cursor: progress; }
.contact .request-status { margin: 0; font-size: max(calc(17.8 * var(--u)), 0.9375rem); color: var(--ink); }
.contact .request-status:empty { display: none; }
.request-sent { display: none; }
.request-sent.is-shown, .request-sent:target {
  --bw: calc(2 * var(--u)); --r: calc(16 * var(--u));
  position: relative;
  display: block; max-width: calc(880 * var(--u)); width: 100%;
  padding: calc(36 * var(--u)) calc(44 * var(--u));
  border: var(--bw) solid transparent; border-radius: var(--r);
  color: var(--on-navy); font-size: max(calc(22.5 * var(--u)), 1.0625rem); font-weight: 500;
}

/* Footer: brand, contact and legal links in three columns, then the registration details */
.footer {
  padding: calc(64 * var(--u)) var(--gutter) calc(48 * var(--u));
  background: var(--navy-deep); color: var(--on-navy-mute);
  font-size: max(calc(17 * var(--u)), 0.9375rem); line-height: 1.6;
}
.footer-main { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: calc(48 * var(--u)); align-items: start; }
.footer-name { color: var(--on-navy); font-weight: 600; font-size: max(calc(24 * var(--u)), 1.25rem); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: calc(10 * var(--u)); }
.footer-brand p:not(.footer-name) { max-width: 34ch; }
/* column heads share the name's line box, so the second lines of all three columns sit level */
.footer-head { color: var(--on-navy); font-weight: 600; font-size: max(calc(24 * var(--u)), 1.25rem); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: calc(10 * var(--u)); }
.footer-col p + p { margin-top: calc(4 * var(--u)); }
.footer-legal { margin-top: calc(56 * var(--u)); font-size: max(calc(15 * var(--u)), 0.8125rem); line-height: 1.6; }
.footer a { color: var(--on-navy); --rule: rgba(255, 255, 255, 0.35); --rule-on: var(--teal); transition: color 180ms ease, background-size 260ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .footer a:hover { color: var(--teal); } }
/* underlines that draw across from the left on hover */
.request-note a, .request-status a, .footer a {
  text-decoration: none;
  background:
    linear-gradient(var(--rule-on), var(--rule-on)) no-repeat 0 100% / 0 1px,
    linear-gradient(var(--rule), var(--rule)) no-repeat 0 100% / 100% 1px;
  padding-bottom: 0.08em;
  transition: color 180ms ease, background-size 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .request-note a:hover, .request-status a:hover, .footer a:hover { background-size: 100% 1px, 100% 1px; }
}

/* Inner pages: privacy notice and the missing-page screen */
.page { padding: calc(88 * var(--u)) var(--gutter) calc(120 * var(--u)); background: var(--paper); }
.prose { max-width: 68ch; margin: 0 auto; }
.prose h1, .page-missing h1 { font-size: calc(56 * var(--u)); font-weight: 800; line-height: 1.05; letter-spacing: -0.015em; color: var(--ink); max-width: none; }
.prose-date { margin-top: calc(14 * var(--u)); color: var(--slate); }
.prose h2 { margin-top: calc(44 * var(--u)); font-size: calc(26 * var(--u)); line-height: 1.2; text-wrap: balance; }
.prose p, .page-missing p { margin-top: calc(14 * var(--u)); font-size: max(calc(19.7 * var(--u)), 1rem); line-height: 1.6; color: var(--ink); }
.prose .prose-date { font-size: max(calc(17.8 * var(--u)), 0.9375rem); color: var(--slate); }
.prose h1 + .prose-date + p { margin-top: calc(32 * var(--u)); }
.prose a { text-underline-offset: 0.15em; }
.page-missing { min-height: 50vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.page-missing p { color: var(--slate); max-width: 46ch; }
.page-missing .btn-primary { margin-top: calc(32 * var(--u)); }

/* Small screens: one column, sizes in rem so text follows the reader's settings */
@media (max-width: 1099px) {
  :root { --gutter: 1.250rem; }
  .btn { border-radius: 0.5rem; }
  /* the masthead stays pinned on small screens too (two rows, about 7.4rem), so jumps land below it */
  html { scroll-padding-top: 8.5rem; }
  .masthead { height: auto; flex-wrap: wrap; row-gap: 0.750rem; padding-top: 1rem; padding-bottom: 0.500rem; }
  .wordmark { font-size: 1.500rem; }
  .btn-nav { margin-left: auto; width: auto; height: 2.750rem; padding: 0 1rem; font-size: 1rem; }
  .nav { order: 3; width: 100%; margin: 0; gap: 1.500rem; }
  .nav a { font-size: 1rem; padding: 0.625rem 0; }

  .hero-body { grid-template-columns: 1fr; min-height: 0; padding: 2.750rem var(--gutter) 3.500rem; row-gap: 3rem; }
  .pitch { padding-top: 0; }
  h1 { font-size: clamp(2.500rem, 11vw, 4rem); max-width: 12ch; line-height: 0.95; }
  .lede { margin-top: 1.125rem; font-size: 1.188rem; line-height: 1.4; max-width: 34rem; }
  .btn-primary { margin-top: 1.500rem; width: auto; height: 3.250rem; padding: 0 1.500rem; font-size: 1.125rem; }

  .boundary { --bw: 2px; --r: 0.875rem; height: auto; padding: 1.750rem 1.125rem 1.250rem; }
  .boundary-label { left: 0.875rem; top: -0.813rem; padding: 0 0.500rem; font-size: 1rem; line-height: 1.500rem; }
  .steps { position: static; display: flex; flex-direction: column; gap: 1.125rem; padding: 0; }
  .step { flex-direction: row; align-items: center; gap: 1rem; }
  .tile { --tb: 1.5px; width: 3.500rem; height: 3.500rem; border-width: 1.500px; border-radius: 0.625rem; flex: none; }
  .tile svg { width: 2.125rem; height: 2.125rem; }
  .step-name { margin: 0; font-size: 1.063rem; line-height: 1.3; }
  .step:not(:nth-child(3n))::before, .step:not(:nth-child(3n))::after { content: none; }
  .step:not(:last-child)::before {
    content: ""; position: absolute; left: 1.750rem; top: 3.500rem;
    width: 2px; height: 1.125rem; background: var(--teal);
  }
  .flow { display: none; }
  .outside { margin-top: 0.875rem; height: auto; padding: 0.750rem 1rem; border-width: 1.500px; border-radius: 0.750rem; font-size: 1rem; text-align: center; }

  .services { padding: 2rem var(--gutter) 0; }
  .service, .service-list li:last-child .service {
    height: auto; grid-template-columns: 2.750rem 1fr auto; column-gap: 0.500rem; row-gap: 0.250rem;
    padding: 1.125rem 0; align-items: start;
  }
  .service-num { font-size: 1.375rem; padding-top: 0.125rem; }
  .service-name { font-size: 1.188rem; line-height: 1.25; }
  .service-line { grid-column: 2; font-size: 1rem; line-height: 1.4; }
  .chevron { grid-column: 3; grid-row: 1; width: 1.375rem; height: 1.375rem; }

  .figures { padding: 1.500rem var(--gutter) 2.500rem; }
  .figure-row { grid-template-columns: 1fr 1fr; row-gap: 1.750rem; }
  .figure:first-child { padding-right: 0; }
  .figure { padding: 0 0.500rem; justify-content: flex-end; }
  .figure dd { font-size: 2.375rem; }
  .figure dt { font-size: 1rem; }

  h2 { font-size: clamp(1.875rem, 7vw, 2.750rem); line-height: 1.05; }


  .contact { gap: 1.750rem; padding: 3.500rem var(--gutter); }
  .contact p { margin-top: 0.875rem; font-size: 1.125rem; }
  .request, .request-sent.is-shown, .request-sent:target { max-width: 40rem; }
  .request { grid-template-columns: 1fr; gap: 1.125rem; padding: 1.5rem 1.25rem 1.375rem; border-radius: 1rem; }
  .field { gap: 0.375rem; }
  .field input, .field select, .field textarea { padding: 0.75rem 0.875rem; border-radius: 0.5rem; }
  .field select { padding-right: 2.75rem; background-position: right 0.875rem center; background-size: 1.25rem; }
  .field textarea { min-height: 8rem; }
  .request-foot { flex-direction: column-reverse; align-items: stretch; gap: 1rem; }
  .request .btn-primary { width: 100%; padding: 0 1.5rem; font-size: 1.125rem; }
  .request-sent.is-shown, .request-sent:target { --bw: 2px; --r: 1rem; padding: 1.5rem 1.25rem; }
  .footer { padding: 2.5rem var(--gutter) 2.5rem; font-size: 0.9375rem; }
  .footer-main { grid-template-columns: 1fr 1fr; row-gap: 1.75rem; column-gap: 1.5rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-name { font-size: 1.25rem; margin-bottom: 0.5rem; }
  .footer-head { font-size: 1.0625rem; margin-bottom: 0.375rem; }
  .footer-legal { margin-top: 2rem; font-size: 0.8125rem; }
  .page { padding: 2.5rem var(--gutter) 4rem; }
  .prose h1, .page-missing h1 { font-size: clamp(2.125rem, 9vw, 3rem); }
  .prose-date, .prose .prose-date { margin-top: 0.75rem; font-size: 0.9375rem; }
  .prose h2 { margin-top: 2.25rem; font-size: 1.375rem; }
  .prose p, .page-missing p { margin-top: 0.875rem; font-size: 1.0625rem; }
  .prose h1 + .prose-date + p { margin-top: 1.75rem; }
  .page-missing .btn-primary { margin-top: 1.75rem; }
}
@media (min-width: 640px) and (max-width: 1099px) {
  .request { grid-template-columns: 1fr 1fr; padding: 2rem 1.75rem; }
  .request-foot { flex-direction: row; align-items: center; }
  .request .btn-primary { width: auto; }
  h1 { max-width: 16ch; }
  .step-name { line-height: 1.375rem; }
  /* arrows between tiles in a row */
  .step:not(:nth-child(3n))::before {
    content: ""; position: absolute; left: calc(50% + 2.250rem); top: 1.750rem;
    width: calc(100% - 3.500rem); height: 2px; background: var(--teal);
  }
  .step:not(:nth-child(3n))::after {
    content: ""; position: absolute; left: calc(150% - 2rem); top: calc(1.750rem - 5px);
    width: 0.750rem; height: 0.750rem;
    border-top: 2px solid var(--teal); border-right: 2px solid var(--teal); transform: rotate(45deg);
  }
  /* the return from the first row to the second */
  .flow { display: block; }
  .flow-out {
    left: calc(100% - 1.125rem - (100% - 4.250rem) / 6 + 2.150rem); right: 0.450rem; width: auto;
    top: 3.500rem; height: 4.380rem;
    border-width: 2px 2px 2px 0; border-radius: 0 0.875rem 0.875rem 0;
  }
  .flow-back {
    left: calc(1.125rem + (100% - 4.250rem) / 6); right: calc(1.125rem + (100% - 4.250rem) / 6 - 2.150rem); width: auto;
    top: calc(7.880rem - 2px); height: 0.875rem;
    border-width: 2px 0 0 2px; border-radius: 0.875rem 0 0 0;
  }
  .flow-back::after { left: -7px; bottom: 1px; width: 0.750rem; height: 0.750rem; border-width: 2px; border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal); }
  .steps { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.500rem 1rem; }
  .step { flex-direction: column; gap: 0.500rem; text-align: center; }
  .step:nth-child(3n)::before { content: none; }
  .figure-row { grid-template-columns: repeat(4, 1fr); }
}

/* Wide screens: running text never drops below a readable size as the layout scales down */
@media (min-width: 1100px) {
  .nav a { font-size: max(calc(17.8 * var(--u)), 0.875rem); }
  .step-name { font-size: max(calc(19.2 * var(--u)), 0.875rem); }
}
@media (max-width: 379px) {
  .masthead { column-gap: 0.750rem; }
  .wordmark { font-size: 1.125rem; }
  .btn-nav { height: 2.500rem; padding: 0 0.625rem; font-size: 0.8125rem; }
  .nav { gap: 0; justify-content: space-between; }
  .nav a { font-size: 0.9375rem; white-space: nowrap; }
  .figure dd { font-size: 2rem; }
}

/* Method and offers on small screens */
@media (max-width: 1099px) {
  .method { padding: 3.5rem var(--gutter) 3rem; }
  .method-intro, .anatomy, .standards-row { grid-template-columns: 1fr; }
  .method-intro p { margin-top: 1rem; font-size: 1.063rem; }
  .anatomy { margin-top: 2rem; grid-template-rows: none; }
  .compare { padding: 3.5rem var(--gutter); }
  .compare-intro p { margin-top: 1rem; font-size: 1.063rem; }
  .ways { margin-top: 2rem; grid-template-columns: 1fr; gap: 1rem; }
  .way { --inset: 0.625rem; padding: 1.5rem 1rem; border-radius: 1rem; }
  .way-title { margin-bottom: 1.75rem; font-size: 1rem; }
  .way-top { padding: 1.5rem 0.25rem 1rem; }
  .way-bottom { padding: 1.5rem 0.25rem 1rem; border-width: 1.5px; border-radius: 0.625rem; }
  .way-top, .way-frame { --bw: 2px; --r: 0.75rem; }
  .way-label { top: -0.8rem; padding: 0 0.5rem; line-height: 1.5rem; font-size: 0.9375rem; }
  /* on narrow panels the bottom label moves inside its box, clear of the two arrows */
  .way-bottom { padding-top: 0.875rem; }
  .way-bottom .way-label { position: static; transform: none; grid-column: 1 / -1; margin-bottom: 0.75rem; background: none; }
  .way-step .tile { --tb: 1.5px; width: 3.5rem; height: 3.25rem; border-width: 1.5px; border-radius: 0.625rem; }
  .way-step .tile svg { width: 2rem; height: 2rem; }
  .way-step .step-name { margin-top: 0.375rem; font-size: 0.875rem; line-height: 1.25; white-space: normal; }
  .way-flow { height: 6.5rem; font-size: 0.875rem; padding: 0 0.25rem; }
  .way-text { padding: 0.375rem 0; }
  .way-line { --lw: 2px; }
  .way-head-down::after, .way-head-up::after { left: -6px; width: 0.625rem; height: 0.625rem; border-width: 0 2px 2px 0; }
  .way-notes { margin-top: 1.25rem; gap: 0.375rem; font-size: 0.9375rem; }
  .principles { grid-template-columns: 1fr; gap: 1rem; }
  .principle { padding: 1.5rem 1.25rem 1.625rem; border-radius: 1rem; }
  .principle h3 { font-size: 1.188rem; }
  .principles .principle p { margin-top: 0.5rem; font-size: 1.063rem; }
  .standards-row { margin-top: 3rem; }
  .standards-title { font-size: 1.188rem; }
  .standards { margin-top: 1.25rem; grid-template-columns: 1fr; row-gap: 1.25rem; padding: 1.5rem 1.25rem 1.625rem; border-radius: 1rem; }
  .standard dd { margin-top: 0.25rem; }

  .detail { padding: 3rem var(--gutter) 3.5rem; }
  .offers { margin-top: 2rem; grid-template-columns: 1fr; gap: 1rem; }
  .offer { padding: 1.75rem 1.5rem; border-radius: 1rem; scroll-margin-top: 1rem; }
  .offer h3 { font-size: 1.375rem; }
  .offer p, .offer li { font-size: 1rem; }
  .offer p { margin-top: 0.625rem; }
  .offer ul { margin-top: 1rem; gap: 0.625rem; }
  .offer li { padding-left: 1.125rem; }
    }
@media (min-width: 640px) and (max-width: 1099px) {
  .standards { grid-template-columns: repeat(3, 1fr); column-gap: 1.5rem; }
  .principles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639px) {
  .offer { padding: 1.5rem 1.25rem; }
}


/* ------------------------------------------------------------------------------------------
   Gen 1: finish and motion. Everything below renders in its final state without JavaScript or
   under reduced motion. Hidden starting states need html.js, which boot.js sets before first
   paint only when the browser can run motion.js (and clears again if motion.js never starts).
   ------------------------------------------------------------------------------------------ */
p, li, dd { text-wrap: pretty; }
h3, .way-title { text-wrap: balance; }
.nav a.is-active { background-size: 100% 2px; }

/* Drawn boundaries: an SVG outline laid exactly over a transparent border of the same width */
.edge {
  position: absolute; pointer-events: none; overflow: visible;
  left: calc(var(--bw) * -0.5); top: calc(var(--bw) * -0.5);
  width: calc(100% + var(--bw)); height: calc(100% + var(--bw));
}
.edge rect { fill: none; stroke: var(--teal); stroke-width: var(--bw); rx: calc(var(--r) - var(--bw) / 2); ry: calc(var(--r) - var(--bw) / 2); }
.request-sent .edge { display: none; }
.request-sent.is-shown .edge, .request-sent:target .edge { display: block; }

/* the teal outline a tile shows as the route reaches it */
.tile::after {
  content: ""; position: absolute; inset: calc(-1 * var(--tb)); pointer-events: none;
  border: var(--tb) solid var(--teal); border-radius: inherit; opacity: 0;
}
.way-public .way-bottom .tile::after { border-color: var(--on-navy-mute); }

/* the data pulse that travels the diagrams; created by motion.js, never present without it */
.pulse {
  position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none;
  width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: #dcfff8; opacity: 0;
  box-shadow: 0 0 0 2px rgba(52, 235, 205, 0.35), 0 0 14px 3px rgba(52, 235, 205, 0.5);
}
.pulse-out { background: #f4f7fa; box-shadow: 0 0 0 2px rgba(197, 211, 224, 0.25), 0 0 12px 2px rgba(197, 211, 224, 0.35); }

@keyframes tile-light { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }
@keyframes flow-down { from { transform: translateY(-60px); } to { transform: translateY(0); } }
@keyframes flow-up { from { transform: translateY(60px); } to { transform: translateY(0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  /* Drawn lines start hidden along their length; until motion.js measures them, the fallback
     dash of zero length keeps them hidden too, so nothing flashes before the script runs */
  .js :is(.boundary, .way-top, .way-frame) > .edge .draw, .js .hero .tile svg > *, .js .way .tile svg > * {
    stroke-dasharray: var(--len, 1 100000); stroke-dashoffset: var(--off, 3);
  }
  .js .is-drawn > .edge .draw {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset var(--draw-ms, calc(850ms * var(--tempo))) var(--ease-out) var(--draw-delay, 0ms);
  }
  /* as specific as the hiding rule above, or a line measured at one width keeps that dash
     after a resize and the boundary opens (seen when a window goes fullscreen) */
  .js .draw.is-done, .js :is(.boundary, .way-top, .way-frame) > .edge .draw.is-done { stroke-dasharray: none; }

  /* Hero: the headline rises line by line, the boundary draws, then the route lights tile by tile */
  /* Gen 5: the headline lines rise without fading, so they paint at once (largest contentful paint) */
  .js .hero .line { transform: translateY(16px); }
  /* Gen 5: the lede also rises without fading, so it paints at once */
  .js .hero .lede { transform: translateY(16px); }
  .js .hero .pitch .btn { opacity: 0; transform: translateY(16px); }
  .js .boundary-label { opacity: 0; }
  .js .hero.is-ready .line, .js .hero.is-ready .lede, .js .hero.is-ready .pitch .btn, .js .hero.is-ready .boundary-label {
    opacity: 1; transform: none;
    transition: opacity calc(700ms * var(--tempo)) var(--ease-out) var(--d), transform calc(800ms * var(--tempo)) var(--ease-out) var(--d), background-color 180ms ease;
  }
  .js .hero .line:first-child { --d: 0ms; }
  .js .hero .line + .line { --d: calc(90ms * var(--tempo)); }
  .js .hero .lede { --d: calc(180ms * var(--tempo)); }
  .js .hero .pitch .btn { --d: calc(270ms * var(--tempo)); }
  .js .boundary-label { --d: calc(160ms * var(--tempo)); }
  .js .hero .boundary { --draw-delay: calc(90ms * var(--tempo)); --draw-ms: calc(850ms * var(--tempo)); }
  .js .hero.is-settled .pitch .btn { transition: background-color 180ms ease, transform 160ms var(--ease-out); }

  .js .hero .step, .js .hero .flow { opacity: 0.72; }
  .js .hero.is-ready .step, .js .hero.is-ready .flow { opacity: 1; transition: opacity calc(180ms * var(--tempo)) var(--ease-out) var(--d); }
  /* created paused with the page and only set running: starting a new animation in the same
     style change as the opacity transitions stops Chrome from running those transitions */
  .js .hero .step .tile::after { animation: tile-light calc(300ms * var(--tempo)) var(--ease-out) var(--d) both paused; }
  .js .hero.is-ready .step .tile::after { animation-play-state: running; }
  .js .hero.is-ready .tile svg > * { stroke-dashoffset: 0; transition: stroke-dashoffset calc(650ms * var(--tempo)) var(--ease-out) var(--d); }
  .js .hero .step:nth-child(1) { --d: calc(940ms * var(--tempo)); }
  .js .hero .step:nth-child(2) { --d: calc(1050ms * var(--tempo)); }
  .js .hero .step:nth-child(3) { --d: calc(1160ms * var(--tempo)); }
  .js .hero .flow { --d: calc(1215ms * var(--tempo)); }
  .js .hero .step:nth-child(4) { --d: calc(1270ms * var(--tempo)); }
  .js .hero .step:nth-child(5) { --d: calc(1380ms * var(--tempo)); }
  .js .hero .step:nth-child(6) { --d: calc(1490ms * var(--tempo)); }

  /* Scroll reveals: once, transform and opacity only. This list must match REVEAL in motion.js. */
  .js :is(.service-list > li, .figure, .compare-intro > *, .way, .method-intro > *, .principle, .standards-title, .standards, .detail > h2, .offer, .contact-copy > *, .request, .section-link, .page-section > h2, .page-body, .points > .panel, .steps-list > li, .qa, .answer):not(.is-in) {
    opacity: 0; transform: translateY(10px);
  }
  .js .is-in {
    transition: opacity calc(450ms * var(--tempo)) var(--ease-out) var(--d, 0ms), transform calc(450ms * var(--tempo)) var(--ease-out) var(--d, 0ms);
  }

  /* Compare: both boundaries draw and the icons draw in; the public crossing flows out once,
     the private one grows in its direction of travel */
  .js .way-public .way-top { --draw-delay: calc(150ms * var(--tempo)); --draw-ms: calc(700ms * var(--tempo)); }
  .js .way-frame { --draw-delay: calc(150ms * var(--tempo)); --draw-ms: calc(950ms * var(--tempo)); }
  .js .way.is-playing .tile svg > * { stroke-dashoffset: 0; transition: stroke-dashoffset calc(600ms * var(--tempo)) var(--ease-out) var(--d); }
  .js .way-top .way-step:nth-of-type(1) { --d: calc(250ms * var(--tempo)); }
  .js .way-top .way-step:nth-of-type(2) { --d: calc(340ms * var(--tempo)); }
  .js .way-bottom .way-step:nth-of-type(1) { --d: calc(520ms * var(--tempo)); }
  .js .way-bottom .way-step:nth-of-type(2) { --d: calc(610ms * var(--tempo)); }
  .js .way-bottom .way-step:nth-of-type(3) { --d: calc(700ms * var(--tempo)); }
  .js .way-public.is-playing .way-out .dash::before { animation: flow-down calc(800ms * var(--tempo)) var(--ease-out) calc(150ms * var(--tempo)) both; }
  .js .way-public.is-playing .way-back .dash::before { animation: flow-up calc(800ms * var(--tempo)) var(--ease-out) calc(150ms * var(--tempo)) both; }
  .js .way-private .dash::before { transform: scaleY(0); }
  .js .way-private .way-out .dash::before { transform-origin: 50% 0; }
  .js .way-private .way-back .dash::before { transform-origin: 50% 100%; }
  .js .way-private.is-playing .dash::before { transform: none; transition: transform calc(400ms * var(--tempo)) var(--ease-out) var(--d); }
  .js .way-private .way-out .way-line:first-child .dash::before { --d: calc(450ms * var(--tempo)); }
  .js .way-private .way-out .way-line:last-child .dash::before { --d: calc(560ms * var(--tempo)); }
  .js .way-private .way-back .way-line:last-child .dash::before { --d: calc(450ms * var(--tempo)); }
  .js .way-private .way-back .way-line:first-child .dash::before { --d: calc(560ms * var(--tempo)); }
  .js .way-private .way-line::after { opacity: 0; }
  .js .way-private.is-playing .way-line::after { opacity: 1; transition: opacity calc(200ms * var(--tempo)) ease calc(760ms * var(--tempo)); }

  /* Request form: the thank-you arrives with its boundary already closed */
  .js .request-sent.is-shown { animation: fade-in calc(160ms * var(--tempo)) ease both; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pulse { display: none; }
  .btn:active { transform: none; }
  .service:hover .chevron { transform: none; }
  .skip, .nav a, .request-note a, .request-status a, .footer a { transition: none; }
}

/* ------------------------------------------------------------------------------------------
   Gen 2: inner pages (services, Oxford, sectors, questions, guides), the four-column footer
   and the in-content links. Same grounds and edges as the home page: a navy band at the top
   and bottom, Paper and Cool Tint between, centred section headings, left-aligned panels.
   ------------------------------------------------------------------------------------------ */
/* Page hero: breadcrumb, title, lede and button on the left; the page's contents on the right */
.page-hero { background: var(--navy); color: var(--on-navy); }
.page-hero-body {
  display: grid; grid-template-columns: minmax(0, 1fr) calc(400 * var(--u)); column-gap: calc(120 * var(--u));
  align-items: end;
  padding: calc(64 * var(--u)) var(--gutter) calc(88 * var(--u));
}
.page-hero h1 { margin-top: calc(26 * var(--u)); font-size: calc(64 * var(--u)); line-height: 1.02; max-width: calc(820 * var(--u)); }
.page-hero .lede { max-width: calc(700 * var(--u)); }
.page-date { margin-top: calc(16 * var(--u)); font-size: max(calc(17.8 * var(--u)), 0.9375rem); color: var(--on-navy-mute); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: calc(12 * var(--u)); font-size: max(calc(17.8 * var(--u)), 0.9375rem); font-weight: 500; color: var(--on-navy-mute); }
.crumbs li { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.crumbs li + li::before {
  content: ""; width: 6px; height: 6px; flex: none;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg);
}
.crumbs a, .toc a .toc-text {
  color: var(--on-navy); text-decoration: none;
  background: linear-gradient(var(--teal), var(--teal)) no-repeat 0 100% / 0 2px;
  transition: background-size 220ms var(--ease-out);
}
.crumbs a:hover, .toc a:hover .toc-text { background-size: 100% 2px; }
.toc-title { font-size: max(calc(18.7 * var(--u)), 0.9375rem); font-weight: 600; color: var(--on-navy-mute); margin-bottom: calc(12 * var(--u)); }
.toc ol { display: flex; flex-direction: column; }
.toc a { display: flex; align-items: baseline; gap: calc(16 * var(--u)); padding: calc(6 * var(--u)) 0; text-decoration: none; }
.toc-num { flex: none; min-width: 2ch; font-weight: 700; color: var(--on-navy-mute); font-variant-numeric: tabular-nums lining-nums; font-size: max(calc(17.8 * var(--u)), 0.9375rem); }
.toc a .toc-text { font-size: max(calc(19.7 * var(--u)), 1rem); font-weight: 500; color: var(--on-navy-soft); padding-bottom: 2px; }
.toc a:hover .toc-text { color: var(--on-navy); }

/* Sections */
.page-section { padding: calc(104 * var(--u)) var(--gutter); background: var(--paper); scroll-margin-top: calc(88 * var(--u)); }
.page-section-tint { background: var(--tint); }
.page-section > h2 { max-width: calc(1000 * var(--u)); margin-inline: auto; text-align: center; }
.page-section > h2 + * { margin-top: calc(44 * var(--u)); }
.page-section > * + * { margin-top: calc(40 * var(--u)); }
.page-body { max-width: 68ch; margin-inline: auto; font-size: max(calc(19.7 * var(--u)), 1rem); line-height: 1.6; color: var(--ink); }
.page-body > * + * { margin-top: 1em; }
.page-body ul, .page-body ol.numbered { display: flex; flex-direction: column; gap: 0.5em; }
.page-body ul li { position: relative; padding-left: 1.2em; }
.page-body ul li::before {
  content: ""; position: absolute; left: 0; top: calc(0.8em - 3px);
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal-on-light);
}
.page-body ol.numbered { counter-reset: n; }
.page-body ol.numbered li { counter-increment: n; position: relative; padding-left: 2.2em; }
.page-body ol.numbered li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; font-weight: 700; color: var(--slate-soft); font-variant-numeric: tabular-nums lining-nums; }
.page-body strong { font-weight: 700; }

/* Panels: rounded, flat, no icons; Cool Tint on Paper and Paper on Cool Tint */
.points { display: grid; gap: calc(24 * var(--u)); margin-inline: auto; max-width: calc(1240 * var(--u)); }
.points-2 { grid-template-columns: repeat(2, 1fr); max-width: calc(1000 * var(--u)); }
.points-3 { grid-template-columns: repeat(3, 1fr); }
.panel, .qa { background: var(--tint); border-radius: calc(16 * var(--u)); padding: calc(36 * var(--u)) calc(36 * var(--u)) calc(38 * var(--u)); }
.page-section-tint :is(.panel, .qa) { background: var(--paper); }
:is(.panel, .qa, .steps-list) h3 { font-size: calc(23.9 * var(--u)); font-weight: 700; line-height: 1.2; color: var(--ink); }
:is(.panel, .qa, .steps-list) p { margin-top: calc(12 * var(--u)); font-size: max(calc(19.7 * var(--u)), 1rem); line-height: 1.5; color: var(--slate); }

/* Numbered steps: the service-row numerals without the rules */
.steps-list { max-width: calc(880 * var(--u)); margin-inline: auto; display: flex; flex-direction: column; gap: calc(36 * var(--u)); }
.steps-list li { display: grid; grid-template-columns: calc(84 * var(--u)) 1fr; align-items: baseline; }
.step-num { font-size: calc(32.8 * var(--u)); font-weight: 700; line-height: 1; color: var(--slate-soft); }
.steps-list p { margin-top: calc(8 * var(--u)); }

/* Questions: visible, never collapsed, so the FAQ markup always matches the page */
.faq { max-width: calc(1000 * var(--u)); margin-inline: auto; display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.qa p { margin-top: calc(10 * var(--u)); }

/* Guides: the short answer leads the page */
.page-answer { padding-bottom: calc(72 * var(--u)); }
.answer { max-width: calc(1000 * var(--u)); margin-inline: auto; background: var(--tint); border-radius: calc(16 * var(--u)); padding: calc(40 * var(--u)) calc(48 * var(--u)) calc(44 * var(--u)); }
.answer .answer-title { font-size: max(calc(19.7 * var(--u)), 1rem); font-weight: 700; line-height: 1.3; color: var(--slate); text-align: left; }
.answer p { margin-top: calc(12 * var(--u)); font-size: max(calc(24 * var(--u)), 1.125rem); line-height: 1.42; color: var(--ink); }

/* A single centred onward link under a section */
.section-link { text-align: center; font-size: max(calc(20.6 * var(--u)), 1rem); line-height: 1.45; }
.compare .section-link, .method .section-link { margin-top: calc(48 * var(--u)); }

/* In-content links share the footer's drawn underline, in Ink with a Teal on Light draw */
:is(.page-body, .panel, .qa, .section-link) a, .offer h3 a {
  color: var(--ink); font-weight: 600; text-decoration: none;
  --rule: rgba(11, 37, 69, 0.3); --rule-on: var(--teal-on-light);
  background:
    linear-gradient(var(--rule-on), var(--rule-on)) no-repeat 0 100% / 0 2px,
    linear-gradient(var(--rule), var(--rule)) no-repeat 0 100% / 100% 1px;
  padding-bottom: 0.08em;
  transition: background-size 260ms var(--ease-out);
}
.panel h3 a, .offer h3 a { font-weight: inherit; }
.offer h3 a { --rule: transparent; }
@media (hover: hover) and (pointer: fine) {
  :is(.page-body, .panel, .qa, .section-link) a:hover, .offer h3 a:hover { background-size: 100% 2px, 100% 1px; }
}
:is(.page-body, .panel, .qa, .section-link, .offer) a:focus-visible { outline-color: var(--navy); }

/* Footer: brand, services, guides and contact */
.footer-main { grid-template-columns: 1.15fr 1fr 1.15fr 1fr; }

@media (max-width: 1099px) {
  .page-hero-body { grid-template-columns: 1fr; row-gap: 2.25rem; padding: 2.5rem var(--gutter) 3rem; }
  .page-hero h1 { margin-top: 1.25rem; font-size: clamp(2.125rem, 8.5vw, 3.25rem); max-width: 20ch; line-height: 1.02; }
  /* every max-width set in u collapses below 1100px, so each is reset here */
  .page-hero .lede { max-width: 38rem; }
  .page-section > h2, .page-body, .points, .points-2, .steps-list, .faq, .answer { max-width: 44rem; }
  .page-date { margin-top: 0.875rem; }
  .crumbs ol, .crumbs li { gap: 0.625rem; }
  .toc-title { margin-bottom: 0.5rem; }
  .toc a { gap: 0.875rem; padding: 0.375rem 0; }
  .page-section { padding: 3.5rem var(--gutter); scroll-margin-top: 0; }
  .page-section > h2 + * { margin-top: 1.75rem; }
  .page-section > * + * { margin-top: 1.5rem; }
  .page-body { font-size: 1.0625rem; }
  .points { gap: 1rem; }
  .points-2, .points-3 { grid-template-columns: 1fr; }
  .panel, .qa { padding: 1.5rem 1.25rem 1.625rem; border-radius: 1rem; }
  :is(.panel, .qa, .steps-list) h3 { font-size: 1.188rem; }
  :is(.panel, .qa, .steps-list) p { margin-top: 0.5rem; font-size: 1.0625rem; }
  .steps-list { gap: 1.5rem; }
  .steps-list li { grid-template-columns: 2.75rem 1fr; }
  .step-num { font-size: 1.375rem; }
  .faq { gap: 0.75rem; }
  .page-answer { padding-bottom: 2.5rem; }
  .answer { padding: 1.5rem 1.25rem 1.625rem; border-radius: 1rem; }
  .answer p { margin-top: 0.5rem; font-size: 1.125rem; }
  .compare .section-link, .method .section-link { margin-top: 2rem; }
  .footer-main { grid-template-columns: 1fr 1fr 1fr; }
}
@media (min-width: 640px) and (max-width: 1099px) {
  .points-2, .points-3 { grid-template-columns: 1fr 1fr; }
  .points-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .footer-main { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Page hero: the same rise as the home headline, then the contents list one line at a time */
  .js .page-hero :is(.crumbs, .page-date, .page-pitch .btn, .toc-title, .toc li) { opacity: 0; transform: translateY(16px); }
  .js .page-hero .lede { transform: translateY(16px); }
  /* Gen 5: the page title rises without fading, so it paints at once (largest contentful paint) */
  .js .page-hero h1 { transform: translateY(16px); }
  .js .page-hero.is-ready :is(.crumbs, h1, .lede, .page-date, .page-pitch .btn, .toc-title, .toc li) {
    opacity: 1; transform: none;
    transition: opacity calc(700ms * var(--tempo)) var(--ease-out) var(--d, 0ms), transform calc(800ms * var(--tempo)) var(--ease-out) var(--d, 0ms), background-color 180ms ease;
  }
  .js .page-hero .crumbs { --d: 0ms; }
  .js .page-hero h1 { --d: calc(60ms * var(--tempo)); }
  .js .page-hero .lede { --d: calc(150ms * var(--tempo)); }
  .js .page-hero .page-date { --d: calc(210ms * var(--tempo)); }
  .js .page-hero .page-pitch .btn { --d: calc(240ms * var(--tempo)); }
  .js .page-hero .toc-title { --d: calc(300ms * var(--tempo)); }
  .js .page-hero .toc li:nth-child(1) { --d: calc(360ms * var(--tempo)); }
  .js .page-hero .toc li:nth-child(2) { --d: calc(410ms * var(--tempo)); }
  .js .page-hero .toc li:nth-child(3) { --d: calc(460ms * var(--tempo)); }
  .js .page-hero .toc li:nth-child(4) { --d: calc(510ms * var(--tempo)); }
  .js .page-hero .toc li:nth-child(5) { --d: calc(560ms * var(--tempo)); }
  .js .page-hero .toc li:nth-child(6) { --d: calc(610ms * var(--tempo)); }
  .js .page-hero .toc li:nth-child(n+7) { --d: calc(660ms * var(--tempo)); }
  .js .page-hero.is-settled .page-pitch .btn { transition: background-color 180ms ease, transform 160ms var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) {
  .crumbs a, .toc a .toc-text, :is(.page-body, .panel, .qa, .section-link) a, .offer h3 a { transition: none; }
}

/* ------------------------------------------------------------------------------------------
   Gen 2: the request form waits behind one button. request.js (marked by html.req, which
   boot.js clears again if the script never starts) collapses it; without it the form shows.
   The button's row closes as the card's row opens, so the card grows from where it stood.
   ------------------------------------------------------------------------------------------ */
.request-area { width: 100%; display: flex; flex-direction: column; align-items: center; }
.request-wrap, .request-clip { width: 100%; }
.request-clip { display: flex; justify-content: center; }
.req .request-gate, .req .request-wrap { display: grid; width: 100%; }
.req .request-gate { grid-template-rows: 1fr; }
.req .request-wrap { grid-template-rows: 0fr; }
.req .request-gate-inner, .req .request-clip { min-height: 0; overflow: hidden; }
/* room for the button's focus ring inside the clipped row */
.req .request-gate-inner { display: flex; justify-content: center; padding: 8px; margin: -8px; }
.req .request-area.is-open .request-gate { grid-template-rows: 0fr; }
.req .request-area.is-open .request-wrap { grid-template-rows: 1fr; }
.req .request-area.is-done .request-clip { overflow: visible; }
.request-open[hidden] { display: none; }
/* a real <button>, styled exactly as the link buttons */
.contact .request-open { margin: 0; border: 0; font: inherit; font-size: calc(22 * var(--u)); font-weight: 700; cursor: pointer; }
@media (max-width: 1099px) { .contact .request-open { font-size: 1.125rem; } }

@media (prefers-reduced-motion: no-preference) {
  .req .request-gate, .req .request-wrap { transition: grid-template-rows calc(500ms * var(--tempo)) var(--ease-out); }
  .req .request-open { transition: background-color 180ms ease, transform 160ms var(--ease-out), opacity calc(200ms * var(--tempo)) ease; }
  .req .request-area.is-open .request-open { opacity: 0; transform: scale(0.96); }
  .req .request-area:not(.is-open) .request { opacity: 0; transform: scale(0.985); }
  .req .request-area.is-open .request {
    opacity: 1; transform: none; transform-origin: 50% 0;
    transition: opacity calc(240ms * var(--tempo)) ease calc(60ms * var(--tempo)), transform calc(500ms * var(--tempo)) var(--ease-out);
  }
  /* then the fields, one after another */
  .req .request-area:not(.is-open) .request > * { opacity: 0; transform: translateY(8px); }
  .req .request-area.is-open .request > * {
    opacity: 1; transform: none;
    transition: opacity calc(360ms * var(--tempo)) var(--ease-out) var(--fd, calc(200ms * var(--tempo))), transform calc(420ms * var(--tempo)) var(--ease-out) var(--fd, calc(200ms * var(--tempo)));
  }
  .req .request > :nth-child(1) { --fd: calc(200ms * var(--tempo)); }
  .req .request > :nth-child(2) { --fd: calc(250ms * var(--tempo)); }
  .req .request > :nth-child(3) { --fd: calc(300ms * var(--tempo)); }
  .req .request > :nth-child(4) { --fd: calc(350ms * var(--tempo)); }
  .req .request > :nth-child(5) { --fd: calc(400ms * var(--tempo)); }
  .req .request > .request-foot { --fd: calc(450ms * var(--tempo)); }
}

/* inner page buttons size to their label ("Discuss an architect retainer" is longer than the home label) */
/* (Gen 5: the closing band's button is now the request form's gate; the form's own Send button keeps its sizes) */
.page-hero .btn-primary, .page-cta .request-open { width: auto; padding: 0 calc(32 * var(--u)); }
.contact-copy a { color: var(--on-navy); text-decoration-color: rgba(255, 255, 255, 0.45); text-underline-offset: 0.18em; }
@media (hover: hover) and (pointer: fine) { .contact-copy a:hover { text-decoration-color: var(--teal); } }
@media (max-width: 1099px) { .page-hero .btn-primary, .page-cta .request-open { padding: 0 1.5rem; } }

/* ------------------------------------------------------------------------------------------
   Gen 3: inspectable trust. The assurance page (numbered sections, By default / You decide /
   You can check panels, the illustrative architecture, the architecture pack, security and
   procurement, terms), the scope blocks on the service pages, home page notes, and print.
   ------------------------------------------------------------------------------------------ */
/* numbered section headings, so a reviewer can write "see section 4" */
.sec-num {
  display: block; margin-bottom: calc(14 * var(--u));
  font-size: max(calc(20 * var(--u)), 0.9375rem); font-weight: 700; letter-spacing: 0.02em;
  color: var(--slate-soft); font-variant-numeric: tabular-nums lining-nums;
}
.section-intro {
  max-width: 60ch; margin-inline: auto; text-align: center;
  font-size: max(calc(20.6 * var(--u)), 1rem); line-height: 1.5; color: var(--slate);
}
.page-subhead { text-align: center; font-size: calc(28.1 * var(--u)); font-weight: 700; line-height: 1.15; color: var(--ink); text-wrap: balance; }

/* lists inside the assurance and scope panels share the offers' teal point */
:is(.assure, .scope) ul { margin-top: calc(16 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
:is(.assure, .scope) li {
  position: relative; padding-left: calc(22 * var(--u));
  font-size: max(calc(19.7 * var(--u)), 1rem); line-height: 1.5; color: var(--ink);
}
:is(.assure, .scope) li::before {
  content: ""; position: absolute; left: 0; top: calc(0.75em - 3px);
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal-on-light);
}
:is(.assure, .scope) li strong { font-weight: 700; }
:is(.assure, .scope, .proc, .terms, .changes, .compare-note, .standards-note, .section-intro) a {
  color: var(--ink); font-weight: 600; text-decoration: none;
  --rule: rgba(11, 37, 69, 0.3); --rule-on: var(--teal-on-light);
  background:
    linear-gradient(var(--rule-on), var(--rule-on)) no-repeat 0 100% / 0 2px,
    linear-gradient(var(--rule), var(--rule)) no-repeat 0 100% / 100% 1px;
  padding-bottom: 0.08em; transition: background-size 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  :is(.assure, .scope, .proc, .terms, .changes, .compare-note, .standards-note, .section-intro) a:hover { background-size: 100% 2px, 100% 1px; }
}
:is(.assure, .scope, .proc, .terms, .changes, .compare-note, .standards-note) a:focus-visible { outline-color: var(--navy); }

/* By default and You decide side by side; You can check runs the full width beneath */
.assure { display: grid; grid-template-columns: 1fr 1fr; gap: calc(24 * var(--u)); max-width: calc(1240 * var(--u)); margin-inline: auto; }
.assure .assure-check { grid-column: 1 / -1; }
.assure-check ul { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: calc(36 * var(--u)); }

/* Service pages: In scope / Decisions required / Delivered, then what is not included */
.scope { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(24 * var(--u)); max-width: calc(1240 * var(--u)); margin-inline: auto; }
.scope .panel > p, .assure .panel > .assure-note { margin-top: calc(10 * var(--u)); }
.scope-out { max-width: 68ch; margin-inline: auto; text-align: center; font-size: max(calc(19.7 * var(--u)), 1rem); line-height: 1.5; color: var(--slate); }
.scope-out strong { color: var(--ink); font-weight: 600; }
.scope-out a { color: var(--ink); font-weight: 600; }

/* Home page: the honest notes under the compare panels and the standards, and each offer's end */
.compare-note { margin-top: calc(28 * var(--u)); text-align: center; font-size: max(calc(17.8 * var(--u)), 0.9375rem); line-height: 1.5; color: var(--slate); }
.compare .compare-note + .section-link { margin-top: calc(20 * var(--u)); }
.standards-note { margin-top: calc(22 * var(--u)); text-align: center; font-size: max(calc(17.8 * var(--u)), 0.9375rem); line-height: 1.5; color: var(--slate); }
.method .section-link-next { margin-top: calc(12 * var(--u)); }
.offer .offer-ends { margin-top: calc(24 * var(--u)); max-width: none; color: var(--ink); }
.offer-ends strong { font-weight: 700; }

/* ---------------------------------------------------------------- illustrative architecture */
.arch { max-width: calc(1432 * var(--u)); margin-inline: auto; }
.arch-tag { font-size: max(calc(17.8 * var(--u)), 0.9375rem); line-height: 1.4; color: var(--slate); margin-bottom: calc(14 * var(--u)); }
.arch-tag strong { color: var(--ink); font-weight: 700; }
.arch-panel { background: var(--navy); border-radius: calc(16 * var(--u)); padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(30 * var(--u)); }
.arch-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.arch-tall { display: none; }
.arch-legend { margin-top: calc(16 * var(--u)); font-size: max(calc(17.8 * var(--u)), 0.9375rem); line-height: 1.45; color: var(--slate); }
/* the key is pulled out by its items' padding, so their text lines up with the legend and the panel edge */
.arch-key { margin: calc(28 * var(--u)) calc(-16 * var(--u)) 0; display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: calc(6 * var(--u)) calc(24 * var(--u)); }
.arch-key-col { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(6 * var(--u)); }
.arch-key li {
  padding: calc(10 * var(--u)) calc(16 * var(--u)); border-radius: calc(10 * var(--u));
  font-size: max(calc(18.7 * var(--u)), 0.9375rem); line-height: 1.45; color: var(--slate);
  transition: color 180ms ease, background-color 180ms ease;
}
.arch-key li strong { display: block; color: var(--ink); font-weight: 700; }
.arch-key li:target { color: var(--ink); background: var(--paper); }

/* drawing: teal for the boundary, its gates and the flows inside; solid white for what is yours;
   dashed mute for what is outside (DESIGN.md: dashed means outside) */
.ax-boundary { fill: none; stroke: var(--teal); stroke-width: 2; }
.ax-patch { fill: var(--navy); }
.ax-bl { fill: var(--teal); font-size: 18px; font-weight: 500; }
.ax-zone { fill: rgba(255, 255, 255, 0.03); stroke: var(--tile-line); stroke-width: 1.5; }
.ax-node { fill: none; stroke: rgba(255, 255, 255, 0.42); stroke-width: 1.5; }
.ax-flow, .ax-head { fill: none; stroke: var(--teal); stroke-width: 2; }
.ax-head { stroke-linecap: round; stroke-linejoin: round; }
.ax-gate { fill: var(--navy); stroke: var(--teal); stroke-width: 2; }
.ax-out { fill: transparent; stroke: var(--on-navy-mute); stroke-width: 1.5; stroke-dasharray: 6 6; }
.ax-out-line { fill: none; stroke: var(--on-navy-mute); stroke-width: 1.5; stroke-dasharray: 6 6; }
.ax-own-box { fill: transparent; stroke: var(--on-navy-mute); stroke-width: 1.5; }
.ax-own-line { fill: none; stroke: var(--on-navy-mute); stroke-width: 1.5; }
.ax-hitbox { fill: transparent; stroke: none; }
.ax-t { fill: var(--on-navy); font-size: 22px; font-weight: 700; }
.ax-s { fill: var(--on-navy-soft); font-size: 19px; }
.ax-nt, .ax-own, .ax-ot { fill: var(--on-navy); font-size: 19px; font-weight: 500; }
.ax-own { font-size: 20px; }
.ax-m { fill: var(--on-navy-mute); font-size: 17px; }
.ax-strong { font-weight: 500; }
.ax-gn { fill: var(--on-navy); font-size: 16px; font-weight: 700; }
.arch-tall .ax-t { font-size: 27px; }
.arch-tall :is(.ax-s, .ax-m) { font-size: 23px; }
.arch-tall :is(.ax-nt, .ax-own, .ax-ot) { font-size: 24px; }
.arch-tall .ax-bl { font-size: 22px; }
.arch-tall .ax-gn { font-size: 24px; }
.arch-tall :is(.ax-boundary, .ax-flow, .ax-head, .ax-gate) { stroke-width: 2.5; }

/* calm interaction: hover or focus one zone or gate; the rest steps back and its line shows */
.hit { outline: none; cursor: pointer; }
.hit, .hit :is(rect, path, text) { transition: opacity 180ms ease, fill 180ms ease, stroke 180ms ease; }
.arch:has(.hit:is(:hover, :focus-visible)) .hit:not(:hover, :focus-visible),
.arch:has(.hit:is(:hover, :focus-visible)) .arch-svg > path { opacity: 0.45; }
.hit:is(:hover, :focus-visible) .ax-zone { fill: rgba(255, 255, 255, 0.08); stroke: var(--on-navy); }
.hit:is(:hover, :focus-visible) :is(.ax-out, .ax-own-box) { stroke: var(--on-navy); }
.hit:focus-visible :is(.ax-zone, .ax-out, .ax-own-box) { stroke: var(--teal); stroke-width: 3; }
.hit:focus-visible .ax-hitbox { stroke: var(--teal); stroke-width: 3; }
.hit:focus-visible .ax-gate { stroke-width: 3.5; }
.arch-readout {
  display: grid; margin-top: calc(18 * var(--u)); min-height: 2.9em;
  font-size: max(calc(18.7 * var(--u)), 0.9375rem); line-height: 1.45; color: var(--on-navy-soft);
}
.arch-readout > span { grid-area: 1 / 1; opacity: 0; transition: opacity 180ms ease; }
.arch-readout > [data-k="default"] { opacity: 1; color: var(--on-navy-mute); }
.arch:has(.hit:is(:hover, :focus-visible)) .arch-readout > [data-k="default"] { opacity: 0; }
.arch:has(.hit[data-k="people"]:is(:hover, :focus-visible)) .arch-readout [data-k="people"],
.arch:has(.hit[data-k="identity"]:is(:hover, :focus-visible)) .arch-readout [data-k="identity"],
.arch:has(.hit[data-k="data"]:is(:hover, :focus-visible)) .arch-readout [data-k="data"],
.arch:has(.hit[data-k="model"]:is(:hover, :focus-visible)) .arch-readout [data-k="model"],
.arch:has(.hit[data-k="ops"]:is(:hover, :focus-visible)) .arch-readout [data-k="ops"],
.arch:has(.hit[data-k="admin"]:is(:hover, :focus-visible)) .arch-readout [data-k="admin"],
.arch:has(.hit[data-k="gate-1"]:is(:hover, :focus-visible)) .arch-readout [data-k="gate-1"],
.arch:has(.hit[data-k="gate-2"]:is(:hover, :focus-visible)) .arch-readout [data-k="gate-2"],
.arch:has(.hit[data-k="gate-3"]:is(:hover, :focus-visible)) .arch-readout [data-k="gate-3"],
.arch:has(.hit[data-k="gate-4"]:is(:hover, :focus-visible)) .arch-readout [data-k="gate-4"],
.arch:has(.hit[data-k="gate-5"]:is(:hover, :focus-visible)) .arch-readout [data-k="gate-5"] { opacity: 1; }
.arch:has(.hit[data-k="people"]:is(:hover, :focus-visible)) .arch-key [data-k="people"],
.arch:has(.hit[data-k="identity"]:is(:hover, :focus-visible)) .arch-key [data-k="identity"],
.arch:has(.hit[data-k="data"]:is(:hover, :focus-visible)) .arch-key [data-k="data"],
.arch:has(.hit[data-k="model"]:is(:hover, :focus-visible)) .arch-key [data-k="model"],
.arch:has(.hit[data-k="ops"]:is(:hover, :focus-visible)) .arch-key [data-k="ops"],
.arch:has(.hit[data-k="admin"]:is(:hover, :focus-visible)) .arch-key [data-k="admin"],
.arch:has(.hit[data-k="gate-1"]:is(:hover, :focus-visible)) .arch-key [data-k="gate-1"],
.arch:has(.hit[data-k="gate-2"]:is(:hover, :focus-visible)) .arch-key [data-k="gate-2"],
.arch:has(.hit[data-k="gate-3"]:is(:hover, :focus-visible)) .arch-key [data-k="gate-3"],
.arch:has(.hit[data-k="gate-4"]:is(:hover, :focus-visible)) .arch-key [data-k="gate-4"],
.arch:has(.hit[data-k="gate-5"]:is(:hover, :focus-visible)) .arch-key [data-k="gate-5"] { color: var(--ink); background: var(--paper); }

/* the pulse that walks the request route; created by motion.js, never present without it */
.ax-pulse { opacity: 0; pointer-events: none; }
.ax-pulse-halo { fill: rgba(52, 235, 205, 0.32); }
.ax-pulse-core { fill: #dcfff8; }

@keyframes ax-dash { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  /* Entrance, once at 15% in view: the boundary draws from its label, the zones settle in
     reading order with the flows that enter them, then the gates appear and their dashes flow
     out once. Lines carry pathLength="1", so nothing is measured or written inline. Every
     duration and delay is written as calc(N * var(--tempo)), as in Gen 2. The
     hover highlight is a micro-interaction and keeps its fixed 180ms. */
  .js .arch .draw { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
  .js .arch.is-playing .draw { stroke-dashoffset: 0; transition: stroke-dashoffset var(--ms, calc(400ms * var(--tempo))) var(--ease-out) var(--d, 0ms); }
  .js .arch .ax-boundary { --ms: calc(850ms * var(--tempo)); --d: calc(90ms * var(--tempo)); }
  .js .arch .ax-head { opacity: 0; }
  .js .arch.is-playing .ax-head { opacity: 1; transition: opacity calc(200ms * var(--tempo)) ease calc(var(--d, 0ms) + 260ms * var(--tempo)); }
  .js .arch .hit > * { opacity: 0.72; }
  .js .arch .hit[data-k^="gate"] > * { opacity: 0; }
  .js .arch.is-playing .hit > * {
    opacity: 1;
    transition: opacity calc(180ms * var(--tempo)) var(--ease-out) var(--d, 0ms), stroke-dashoffset calc(400ms * var(--tempo)) var(--ease-out) var(--d, 0ms), fill 180ms ease, stroke 180ms ease;
  }
  .js .arch.is-playing .hit[data-k^="gate"] :is(.ax-out, text) { transition: opacity calc(300ms * var(--tempo)) ease calc(var(--d, 0ms) + 120ms * var(--tempo)), fill 180ms ease, stroke 180ms ease; }
  .js .arch .ax-out-line { animation: ax-dash calc(800ms * var(--tempo)) var(--ease-out) calc(var(--d, 0ms) + 120ms * var(--tempo)) both paused; }
  .js .arch.is-playing .ax-out-line { animation-play-state: running; }
  .js .arch :is(.f1, .f1 + .ax-head), .js .arch .hit[data-k="people"] { --d: calc(500ms * var(--tempo)); }
  .js .arch .hit[data-k="identity"] { --d: calc(600ms * var(--tempo)); }
  .js .arch :is(.f2, .f3, .f2 + .ax-head, .f3 + .ax-head), .js .arch .hit[data-k="data"] { --d: calc(710ms * var(--tempo)); }
  .js .arch :is(.f4, .f4 + .ax-head), .js .arch .hit[data-k="model"] { --d: calc(820ms * var(--tempo)); }
  .js .arch :is(.f5, .f5 + .ax-head), .js .arch .hit[data-k="ops"] { --d: calc(930ms * var(--tempo)); }
  .js .arch .hit[data-k="admin"] { --d: calc(1040ms * var(--tempo)); }
  .js .arch .hit[data-k="gate-1"] { --d: calc(1300ms * var(--tempo)); }
  .js .arch .hit[data-k="gate-2"] { --d: calc(1390ms * var(--tempo)); }
  .js .arch .hit[data-k="gate-3"] { --d: calc(1480ms * var(--tempo)); }
  .js .arch .hit[data-k="gate-4"] { --d: calc(1570ms * var(--tempo)); }
  .js .arch .hit[data-k="gate-5"] { --d: calc(1660ms * var(--tempo)); }
}
@media (prefers-reduced-motion: reduce) {
  .ax-pulse { display: none; }
  .hit, .hit :is(rect, path, text), .arch-readout > span, .arch-key li { transition: none; }
}

/* ---------------------------------------------------------------- the architecture pack */
.pack { max-width: calc(880 * var(--u)); margin-inline: auto; background: var(--paper); border-radius: calc(16 * var(--u)); overflow: hidden; }
.pack-cover {
  display: flex; align-items: center; justify-content: space-between; gap: calc(24 * var(--u));
  background: var(--navy); color: var(--on-navy); padding: calc(34 * var(--u)) calc(72 * var(--u));
}
.pack-title { font-size: calc(28.1 * var(--u)); font-weight: 700; line-height: 1.1; }
.pack-sub { margin-top: calc(8 * var(--u)); font-size: max(calc(17.8 * var(--u)), 0.9375rem); font-weight: 500; color: var(--on-navy-mute); }
.pack-brand { font-size: max(calc(20 * var(--u)), 1rem); font-weight: 600; letter-spacing: -0.01em; color: var(--on-navy-soft); }
.pack-meta { display: flex; flex-wrap: wrap; gap: calc(14 * var(--u)) calc(44 * var(--u)); padding: calc(30 * var(--u)) calc(72 * var(--u)) 0; font-size: max(calc(16.8 * var(--u)), 0.875rem); line-height: 1.4; }
.pack-meta dt { color: var(--slate); }
.pack-meta dd { color: var(--ink); font-weight: 600; }
.pack-toc { padding: calc(40 * var(--u)) calc(72 * var(--u)) 0; display: flex; flex-direction: column; gap: calc(26 * var(--u)); }
.pack-toc li { display: grid; grid-template-columns: calc(56 * var(--u)) 1fr; align-items: baseline; }
.pack-num { font-size: calc(23.9 * var(--u)); font-weight: 700; line-height: 1; color: var(--slate-soft); font-variant-numeric: tabular-nums lining-nums; }
.pack-toc h3 { font-size: calc(23.9 * var(--u)); font-weight: 700; line-height: 1.2; color: var(--ink); }
.pack-toc p { margin-top: calc(6 * var(--u)); font-size: max(calc(19.7 * var(--u)), 1rem); line-height: 1.5; color: var(--slate); }
.pack-excerpt { margin: calc(48 * var(--u)) calc(72 * var(--u)) 0; padding-bottom: calc(64 * var(--u)); }
.pack-excerpt h3 { font-size: calc(23.9 * var(--u)); font-weight: 700; color: var(--ink); }
.pack-note { margin-top: calc(6 * var(--u)); font-size: max(calc(16.8 * var(--u)), 0.875rem); color: var(--slate); }
.pack-table { margin-top: calc(18 * var(--u)); width: 100%; border-collapse: separate; border-spacing: 0; font-size: max(calc(17.8 * var(--u)), 0.9375rem); line-height: 1.4; text-align: left; }
.pack-table th { padding: calc(10 * var(--u)) calc(16 * var(--u)); font-weight: 600; color: var(--ink); }
.pack-table td { padding: calc(14 * var(--u)) calc(16 * var(--u)); color: var(--ink); vertical-align: top; }
.pack-table tbody tr:nth-child(odd) td { background: var(--tint); }
.pack-table tbody tr td:first-child { border-radius: calc(8 * var(--u)) 0 0 calc(8 * var(--u)); }
.pack-table tbody tr td:last-child { border-radius: 0 calc(8 * var(--u)) calc(8 * var(--u)) 0; }
.pack-cell { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.section-outro { font-size: max(calc(17.8 * var(--u)), 0.9375rem); }

/* ---------------------------------------------------------------- procurement, terms, changes */
.proc {
  max-width: calc(940 * var(--u)); margin-inline: auto; background: var(--tint); border-radius: calc(16 * var(--u));
  padding: calc(40 * var(--u)) calc(48 * var(--u)); display: flex; flex-direction: column; gap: calc(20 * var(--u));
}
.proc > div { display: grid; grid-template-columns: calc(240 * var(--u)) 1fr; gap: calc(24 * var(--u)); }
.proc dt { font-size: max(calc(19.7 * var(--u)), 1rem); font-weight: 600; color: var(--ink); line-height: 1.5; }
.proc dd { font-size: max(calc(19.7 * var(--u)), 1rem); color: var(--slate); line-height: 1.5; }
.terms { max-width: calc(1100 * var(--u)); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: calc(30 * var(--u)) calc(56 * var(--u)); }
.terms dt { font-size: max(calc(19.7 * var(--u)), 1rem); font-weight: 700; color: var(--ink); }
.terms dd { margin-top: calc(6 * var(--u)); font-size: max(calc(19.7 * var(--u)), 1rem); line-height: 1.5; color: var(--slate); }
.changes { max-width: calc(1100 * var(--u)); margin-inline: auto; }
.page-section > .changes { margin-top: calc(64 * var(--u)); }
.changes h3 { font-size: max(calc(19.7 * var(--u)), 1rem); font-weight: 700; color: var(--ink); }
.changes ul { margin-top: calc(8 * var(--u)); font-size: max(calc(16.8 * var(--u)), 0.875rem); line-height: 1.6; color: var(--slate); }
.changes strong { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- page tools: Save as PDF */
.page-tools { margin-top: calc(10 * var(--u)); font-size: max(calc(17.8 * var(--u)), 0.9375rem); color: var(--on-navy-mute); }
.print-link {
  margin: 0; padding: 0 0 2px; border: 0; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--on-navy);
  background: linear-gradient(var(--teal), var(--teal)) no-repeat 0 100% / 0 2px;
  transition: background-size 220ms var(--ease-out);
}
.print-link:hover { background-size: 100% 2px; }
.print-link[hidden], .print-ready .print-hint { display: none; }
.print-only { display: none; }

/* the new items reveal like every other inner page item; this list must match REVEAL in motion.js */
@media (prefers-reduced-motion: no-preference) {
  .js :is(.assure > .panel, .scope > .panel, .scope-out, .page-subhead, .section-intro, .pack, .proc, .terms, .changes, .arch-tag, .arch-key, .compare-note, .standards-note):not(.is-in) {
    opacity: 0; transform: translateY(10px);
  }
  .js .page-hero .page-tools { opacity: 0; transform: translateY(16px); }
  .js .page-hero.is-ready .page-tools { opacity: 1; transform: none; transition: opacity calc(700ms * var(--tempo)) var(--ease-out) calc(230ms * var(--tempo)), transform calc(800ms * var(--tempo)) var(--ease-out) calc(230ms * var(--tempo)); }
}
@media (prefers-reduced-motion: reduce) { .print-link { transition: none; } }

@media (max-width: 1099px) {
  .sec-num { margin-bottom: 0.5rem; }
  .section-intro, .scope-out { max-width: 44rem; font-size: 1.0625rem; }
  .page-subhead { font-size: 1.375rem; }
  .assure, .scope { grid-template-columns: 1fr; max-width: 44rem; gap: 1rem; }
  .assure-check ul { grid-template-columns: 1fr; }
  :is(.assure, .scope) ul { margin-top: 0.75rem; gap: 0.5rem; }
  :is(.assure, .scope) li { padding-left: 1.2em; font-size: 1.0625rem; }
  .compare-note { margin-top: 1.5rem; }
  .compare .compare-note + .section-link { margin-top: 1rem; }
  .standards-note { margin-top: 1rem; }
  .method .section-link-next { margin-top: 0.75rem; }
  .offer .offer-ends { margin-top: 1rem; }
  .arch { max-width: 44rem; }
  .arch-tag { margin-bottom: 0.75rem; }
  .arch-panel { padding: 1.25rem 1rem 1rem; border-radius: 1rem; }
  .arch-wide { display: none; }
  .arch-tall { display: block; max-width: 30rem; margin-inline: auto; }
  .arch-readout { margin-top: 0.75rem; }
  .arch-key { grid-template-columns: 1fr; margin: 1rem -0.75rem 0; gap: 0.25rem; }
  .arch-key-col { gap: 0.25rem; }
  .arch-key li { padding: 0.5rem 0.75rem; border-radius: 0.625rem; }
  .pack { max-width: 44rem; border-radius: 1rem; }
  .pack-cover { padding: 1.5rem; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .pack-title { font-size: 1.375rem; }
  .pack-meta { padding: 1.25rem 1.5rem 0; gap: 0.5rem 1.5rem; }
  .pack-toc { padding: 1.5rem 1.5rem 0; gap: 1.125rem; }
  .pack-toc li { grid-template-columns: 2.5rem 1fr; }
  .pack-num, .pack-toc h3, .pack-excerpt h3 { font-size: 1.125rem; }
  .pack-excerpt { margin: 2rem 1.5rem 0; padding-bottom: 2rem; }
  .proc { max-width: 44rem; padding: 1.5rem 1.25rem; border-radius: 1rem; gap: 1rem; }
  .proc > div { grid-template-columns: 11rem 1fr; gap: 1rem; }
  .terms, .changes { max-width: 44rem; gap: 1.25rem 2rem; }
  .page-section > .changes { margin-top: 2.5rem; }
  .page-tools { margin-top: 0.5rem; }
}
@media (max-width: 639px) {
  .proc > div { grid-template-columns: 1fr; gap: 0.125rem; }
  .terms { grid-template-columns: 1fr; }
  .pack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pack-table, .pack-table tbody, .pack-table tr, .pack-table td { display: block; }
  .pack-table tr { padding: 0.5rem 0.75rem; border-radius: 0.5rem; }
  .pack-table tbody tr:nth-child(odd) { background: var(--tint); }
  .pack-table tbody tr td { padding: 0.25rem 0; background: none !important; border-radius: 0 !important; }
  .pack-cell { position: static; width: auto; height: auto; clip: auto; display: block; font-size: 0.8125rem; color: var(--slate); }
}

/* ---------------------------------------------------------------- print: a briefing paper
   Prints at A4 in the small-screen layout (the page box is under 1100px wide), scaled down by
   the root size. Everything motion would hide is forced to its final state, the navy grounds
   turn white, teal marks become Teal on Light, and only the pack's cover strip keeps its navy. */
@page arch-land { size: A4 landscape; margin: 14mm 16mm 18mm; }
@page { size: A4; margin: 18mm 17mm 20mm; @bottom-left { content: "TLG Solutions · tlgsolutions.co.uk"; font-family: Figtree, Arial, sans-serif; font-size: 8pt; color: #5a6b80; } @bottom-right { content: "Page " counter(page) " of " counter(pages); font-family: Figtree, Arial, sans-serif; font-size: 8pt; color: #5a6b80; } }
@media print {
  html { font-size: 12.5px; background: #fff; scroll-behavior: auto; }
  body { background: #fff; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js :is(.service-list > li, .figure, .compare-intro > *, .way, .method-intro > *, .principle, .standards-title, .standards, .detail > h2, .offer, .contact-copy > *, .section-link, .page-section > h2, .page-body, .points > .panel, .steps-list > li, .qa, .answer, .assure > .panel, .scope > .panel, .scope-out, .page-subhead, .section-intro, .pack, .proc, .terms, .changes, .arch-tag, .arch-key, .compare-note, .standards-note, .page-tools),
  .js .page-hero :is(.crumbs, h1, .lede, .page-date, .page-pitch .btn, .toc-title, .toc li),
  .js .arch :is(.hit > *, .ax-head) { opacity: 1 !important; transform: none !important; }
  .js .arch .draw { stroke-dashoffset: 0 !important; stroke-dasharray: none !important; }
  .masthead, .skip, .crumbs, .page-tools, .page-cta, .contact, .footer-main, .btn, .arch-readout, .ax-pulse, .pulse { display: none !important; }
  .print-only { display: block; }

  .page-hero { background: #fff; color: var(--ink); }
  .page-hero-body { padding: 0 0 1.5rem; row-gap: 1.5rem; }
  .print-kicker { font-size: 1rem; font-weight: 600; color: var(--slate); margin-bottom: 0.25rem; }
  .page-hero h1 { color: var(--ink); margin-top: 0.25rem; max-width: none; }
  .page-hero .lede { color: var(--ink); }
  .page-date, .print-url { color: var(--slate); font-size: 1rem; margin-top: 0.5rem; }
  .toc-title { color: var(--slate); }
  .toc a .toc-text { color: var(--ink); background: none; }
  .toc-num { color: var(--slate-soft); }

  .page-section, .page-section-tint { background: #fff; padding: 1.75rem 0; }
  .page-section > h2 { break-after: avoid; }
  h2, h3 { break-after: avoid; break-inside: avoid; }
  .highlight { background: none; color: var(--ink); padding: 0; }
  :is(.panel, .qa, .answer, .proc) { background: #fff; padding-left: 0; padding-right: 0; }
  :is(.panel, .qa, .proc > div, .terms > div, .arch-key li, .pack-toc li, .steps-list li) { break-inside: avoid; }
  /* like a briefing paper, each numbered section from 02 opens a page (the glossary too, so the change log never spills onto a page of its own), so no heading is left at a page foot */
  .assure-section:not(#architecture) { break-before: page; }
  /* a heading and its intro always travel with what follows */
  .assure-section > h2, .assure-section > .page-body, .assure-section > .section-intro, .panel > h3 { break-after: avoid; }
  .page-section a[href^="http"]::after { content: " (" attr(href) ")"; font-weight: 400; font-size: 0.85em; color: var(--slate); word-break: break-all; }

  /* the architecture in its light version, always the wide drawing, on a landscape page of its own
     so its labels print at a readable size; the key follows on the next portrait page */
  .arch { max-width: none; }
  .arch-tag, .arch-panel, .arch-legend { page: arch-land; }
  .arch-panel { background: #fff; border: 1px solid var(--navy); padding: 0.75rem 1rem; }
  .arch-wide { display: block !important; }
  .arch-tall { display: none !important; }
  .ax-zone { fill: none; stroke: var(--navy); }
  .ax-node { stroke: var(--slate); }
  :is(.ax-boundary, .ax-flow, .ax-head) { stroke: var(--teal-on-light); }
  .ax-gate { fill: #fff; stroke: var(--teal-on-light); }
  .ax-patch { fill: #fff; }
  .ax-bl { fill: var(--teal-on-light); }
  :is(.ax-t, .ax-nt, .ax-own, .ax-ot, .ax-gn) { fill: var(--ink); }
  :is(.ax-s, .ax-m) { fill: var(--slate); }
  :is(.ax-out, .ax-out-line, .ax-own-box, .ax-own-line) { stroke: var(--slate); }
  .arch-key { grid-template-columns: 1fr 1fr; margin-inline: 0; }
  .arch-key li { padding: 0.25rem 0; }

  .pack { border: 1px solid var(--navy); }
  .pack-excerpt, .pack-table { break-inside: avoid; }
  .pack-cover { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pack-table tbody tr:nth-child(odd) td { background: none; }

  .footer { background: #fff; color: var(--slate); padding: 1.5rem 0 0; }
  .footer-legal { margin-top: 0; }
}
/* only zones and gates take the pointer; the boundary, its label and the flows are drawing */
.arch-svg > :not(.hit) { pointer-events: none; }

/* ------------------------------------------------------------------------------------------
   Gen 4: Oxford buying situations. The prototype to operated platform decision map, its key
   and printable worksheet (oxford.html), the five buying situations, labelled next panels,
   and the hub's second onward line.
   ------------------------------------------------------------------------------------------ */
.page-section > .section-link-next { margin-top: calc(12 * var(--u)); }
.next-label { font-size: max(calc(17.8 * var(--u)), 0.9375rem); font-weight: 600; color: var(--slate); margin-bottom: calc(8 * var(--u)); }
.next .panel .next-label { margin-top: 0; }
.panel .panel-link { color: var(--ink); }

/* five buying situations: one aligned table built from panels, no rules */
.situations { max-width: calc(1240 * var(--u)); margin-inline: auto; display: flex; flex-direction: column; gap: calc(24 * var(--u)); }
.situation { background: var(--tint); border-radius: calc(16 * var(--u)); padding: calc(36 * var(--u)) calc(40 * var(--u)) calc(38 * var(--u)); scroll-margin-top: calc(110 * var(--u)); }
.page-section-tint .situation { background: var(--paper); }
.situation h3 { font-size: calc(23.9 * var(--u)); font-weight: 700; line-height: 1.2; color: var(--ink); }
.sit-grid { margin-top: calc(18 * var(--u)); display: grid; grid-template-columns: repeat(3, 1fr); column-gap: calc(40 * var(--u)); }
.sit-label { font-size: max(calc(17.8 * var(--u)), 0.9375rem); font-weight: 600; color: var(--slate); }
.sit-grid p:not(.sit-label) { margin-top: calc(6 * var(--u)); font-size: max(calc(19.7 * var(--u)), 1rem); line-height: 1.5; color: var(--ink); }
.situation a {
  color: var(--ink); font-weight: 600; text-decoration: none;
  --rule: rgba(11, 37, 69, 0.3); --rule-on: var(--teal-on-light);
  background:
    linear-gradient(var(--rule-on), var(--rule-on)) no-repeat 0 100% / 0 2px,
    linear-gradient(var(--rule), var(--rule)) no-repeat 0 100% / 100% 1px;
  padding-bottom: 0.08em; transition: background-size 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .situation a:hover { background-size: 100% 2px, 100% 1px; } }
.situation a:focus-visible { outline-color: var(--navy); }

/* ---------------------------------------------------------------- the decision map */
.route { max-width: calc(1432 * var(--u)); margin-inline: auto; }
.route-tag { font-size: max(calc(17.8 * var(--u)), 0.9375rem); line-height: 1.4; color: var(--slate); margin-bottom: calc(14 * var(--u)); }
.route-tag strong { color: var(--ink); font-weight: 700; }
.route-panel { background: var(--navy); border-radius: calc(16 * var(--u)); padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(30 * var(--u)); }
.route-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.route-tall { display: none; }
.route-legend { margin-top: calc(16 * var(--u)); font-size: max(calc(17.8 * var(--u)), 0.9375rem); line-height: 1.45; color: var(--slate); }
.route-readout {
  display: grid; margin-top: calc(18 * var(--u)); min-height: 1.5em;
  font-size: max(calc(18.7 * var(--u)), 0.9375rem); line-height: 1.45; color: var(--on-navy);
}
.route-readout > span { grid-area: 1 / 1; opacity: 0; transition: opacity 180ms ease; }
.route-readout > [data-k="default"] { opacity: 1; color: var(--on-navy-mute); }
.route:has(.decide:is(:hover, :focus-visible)) .route-readout > [data-k="default"] { opacity: 0; }

/* the key: five lanes in five columns on the panel's own edges; states are in the drawing at
   this width, so they are read out but not shown */
.route-key { margin: calc(32 * var(--u)) calc(-14 * var(--u)) 0; display: grid; grid-template-columns: calc(200 * var(--u)) 1fr 1fr; column-gap: calc(28 * var(--u)); row-gap: calc(18 * var(--u)); }
/* one row per lane: its name, then its two decisions, on the same three columns all the way down */
.route-key > li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: start; }
.rk-lane { font-size: calc(23.9 * var(--u)); font-weight: 700; line-height: 1.2; color: var(--ink); padding: calc(12 * var(--u)) calc(14 * var(--u)) 0; }
.rk-states { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rk-q {
  padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(10 * var(--u));
  font-size: max(calc(19.7 * var(--u)), 1rem); line-height: 1.5; color: var(--slate);
  scroll-margin-top: calc(110 * var(--u)); transition: color 180ms ease, background-color 180ms ease;
}
.rk-when { display: block; font-weight: 600; color: var(--slate); }
.rk-q strong { display: block; margin-bottom: calc(4 * var(--u)); color: var(--ink); font-weight: 700; }
.rk-q:target { color: var(--ink); background: var(--tint); }

/* drawing: teal is the boundary, the lanes inside it and the decisions; dashed mute is outside */
.rt-boundary { fill: none; stroke: var(--teal); stroke-width: 2; }
.rt-patch { fill: var(--navy); }
.rt-bl { fill: var(--teal); font-size: 18px; font-weight: 500; }
.rt-stage { fill: var(--on-navy); font-size: 20px; font-weight: 700; }
.rt-stage-out { fill: var(--on-navy-mute); }
.rt-name { fill: var(--on-navy); font-size: 20px; font-weight: 700; }
.rt-out { fill: none; stroke: var(--on-navy-mute); stroke-width: 1.5; stroke-dasharray: 6 6; }
.rt-line, .rt-head { fill: none; stroke: var(--teal); stroke-width: 2; }
.rt-head { stroke-linecap: round; stroke-linejoin: round; }
.rt-golive { fill: none; stroke: var(--tile-line); stroke-width: 1.5; }
.rt-proto { fill: var(--on-navy-mute); font-size: 18px; }
.rt-state { fill: var(--on-navy); font-size: 18px; font-weight: 500; }
.rt-col { fill: var(--on-navy-mute); font-size: 16px; font-weight: 500; }
.rt-q { fill: var(--on-navy-soft); font-size: 16px; }
.rt-managed { fill: transparent; stroke: var(--on-navy-mute); stroke-width: 1.5; stroke-dasharray: 6 6; }
.rt-managed-t { fill: var(--on-navy); font-size: 16px; font-weight: 500; }
.rt-managed-s { fill: var(--on-navy-mute); font-size: 15px; }
.rt-mark { fill: var(--navy); stroke: var(--teal); stroke-width: 2; stroke-linejoin: round; }
.rt-ring { fill: none; stroke: transparent; stroke-width: 2.5; stroke-linejoin: round; }
.rt-hit { fill: transparent; stroke: none; }
.route-tall :is(.rt-name, .rt-stage) { font-size: 19px; }
.route-tall .rt-q { font-size: 17px; fill: var(--on-navy); }
.route-tall .rt-bl { font-size: 15px; }
.route-tall .rt-managed-t { font-size: 15px; }
.route-tall .rt-managed-s { font-size: 14px; }
.route-svg > :not(.rt-lane), .rt-lane > :not(.decide) { pointer-events: none; }

/* calm interaction: hover or focus a decision; its lane stays, the other lanes step back */
.decide { outline: none; cursor: pointer; }
.rt-lane, .decide :is(.rt-mark, .rt-ring) { transition: opacity 180ms ease, fill 180ms ease, stroke 180ms ease; }
.route:has(.decide:is(:hover, :focus-visible)) .rt-lane:not(:has(.decide:is(:hover, :focus-visible))) { opacity: 0.45; }
.decide:is(:hover, :focus-visible) .rt-mark { fill: rgba(52, 235, 205, 0.22); stroke: var(--on-navy); }
.decide:focus-visible .rt-ring { stroke: var(--teal); }
.route:has(.decide[data-k="data-a"]:is(:hover, :focus-visible)) .route-readout [data-k="data-a"],
.route:has(.decide[data-k="data-b"]:is(:hover, :focus-visible)) .route-readout [data-k="data-b"],
.route:has(.decide[data-k="access-a"]:is(:hover, :focus-visible)) .route-readout [data-k="access-a"],
.route:has(.decide[data-k="access-b"]:is(:hover, :focus-visible)) .route-readout [data-k="access-b"],
.route:has(.decide[data-k="model-a"]:is(:hover, :focus-visible)) .route-readout [data-k="model-a"],
.route:has(.decide[data-k="model-b"]:is(:hover, :focus-visible)) .route-readout [data-k="model-b"],
.route:has(.decide[data-k="running-a"]:is(:hover, :focus-visible)) .route-readout [data-k="running-a"],
.route:has(.decide[data-k="running-b"]:is(:hover, :focus-visible)) .route-readout [data-k="running-b"],
.route:has(.decide[data-k="evidence-a"]:is(:hover, :focus-visible)) .route-readout [data-k="evidence-a"],
.route:has(.decide[data-k="evidence-b"]:is(:hover, :focus-visible)) .route-readout [data-k="evidence-b"] { opacity: 1; }
.route:has(.decide[data-k="data-a"]:is(:hover, :focus-visible)) .route-key [data-k="data-a"],
.route:has(.decide[data-k="data-b"]:is(:hover, :focus-visible)) .route-key [data-k="data-b"],
.route:has(.decide[data-k="access-a"]:is(:hover, :focus-visible)) .route-key [data-k="access-a"],
.route:has(.decide[data-k="access-b"]:is(:hover, :focus-visible)) .route-key [data-k="access-b"],
.route:has(.decide[data-k="model-a"]:is(:hover, :focus-visible)) .route-key [data-k="model-a"],
.route:has(.decide[data-k="model-b"]:is(:hover, :focus-visible)) .route-key [data-k="model-b"],
.route:has(.decide[data-k="running-a"]:is(:hover, :focus-visible)) .route-key [data-k="running-a"],
.route:has(.decide[data-k="running-b"]:is(:hover, :focus-visible)) .route-key [data-k="running-b"],
.route:has(.decide[data-k="evidence-a"]:is(:hover, :focus-visible)) .route-key [data-k="evidence-a"],
.route:has(.decide[data-k="evidence-b"]:is(:hover, :focus-visible)) .route-key [data-k="evidence-b"] { color: var(--ink); background: var(--paper); }

/* the pulse that walks a lane; created by motion.js, never present without it */
.rt-pulse { opacity: 0; pointer-events: none; }
.rt-pulse-halo { fill: rgba(52, 235, 205, 0.32); }
.rt-pulse-core { fill: #dcfff8; }

/* worksheet: a text link under the key; the sheet itself only exists in print */
.route-tools { text-align: center; }
.print-worksheet-link { color: var(--ink); background-image: linear-gradient(var(--teal-on-light), var(--teal-on-light)); background-size: 0 2px; box-shadow: inset 0 -1px 0 rgba(11, 37, 69, 0.3); }
.print-worksheet-link:hover { background-size: 100% 2px; }
.print-worksheet-link:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.route-tools:has(.print-link[hidden]) { display: none; }
.worksheet { display: none; }

@keyframes rt-dash { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  /* Entrance, once at 15% in view: headers and names fade in, the prototype dashes flow once,
     the boundary draws from its label, the first decisions appear on it, the lanes grow from the
     boundary to their arrows with their states, the go live line draws, then the second
     decisions. Every duration and delay is calc(N * var(--tempo)); the hover highlight is a
     micro-interaction and keeps its fixed 180ms. Lines carry pathLength="1". */
  .js .route .draw { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
  .js .route.is-playing .draw { stroke-dashoffset: 0; transition: stroke-dashoffset var(--ms, calc(700ms * var(--tempo))) var(--ease-out) var(--d, 0ms); }
  .js .route .rt-boundary { --ms: calc(850ms * var(--tempo)); --d: calc(200ms * var(--tempo)); }
  .js .route .rt-golive { --ms: calc(500ms * var(--tempo)); --d: calc(1250ms * var(--tempo)); }
  .js .route .rt-line { --d: var(--ld); }
  .js .route :is(.rt-stage, .rt-name, .rt-proto, .rt-state, .rt-head, .rt-col, .rt-bl, .rt-patch, .decide, .rt-q, .rt-managed, .rt-managed-t, .rt-managed-s) { opacity: 0; }
  .js .route .decide { transform: scale(0.9); transform-box: fill-box; transform-origin: center; }
  .js .route.is-playing :is(.rt-stage, .rt-name, .rt-col, .rt-bl, .rt-patch) { opacity: 1; transition: opacity calc(300ms * var(--tempo)) ease; }
  .js .route.is-playing .rt-proto { opacity: 1; transition: opacity calc(240ms * var(--tempo)) ease calc(120ms * var(--tempo)); }
  .js .route.is-playing :is(.rt-managed, .rt-managed-t, .rt-managed-s) { opacity: 1; transition: opacity calc(300ms * var(--tempo)) ease calc(var(--ma) + 120ms * var(--tempo)); }
  .js .route.is-playing .rt-qa { opacity: 1; transition: opacity calc(240ms * var(--tempo)) ease calc(var(--ma) + 60ms * var(--tempo)); }
  .js .route.is-playing .rt-qb { opacity: 1; transition: opacity calc(240ms * var(--tempo)) ease calc(var(--mb) + 60ms * var(--tempo)); }
  .js .route.is-playing .rt-pilot { opacity: 1; transition: opacity calc(240ms * var(--tempo)) ease calc(var(--ld) + 100ms * var(--tempo)); }
  .js .route.is-playing .rt-op { opacity: 1; transition: opacity calc(240ms * var(--tempo)) ease calc(var(--ld) + 450ms * var(--tempo)); }
  .js .route.is-playing .rt-head { opacity: 1; transition: opacity calc(200ms * var(--tempo)) ease calc(var(--ld) + 600ms * var(--tempo)); }
  .js .route.is-playing .decide { opacity: 1; transform: none; transition: opacity calc(180ms * var(--tempo)) var(--ease-out) var(--md), transform calc(180ms * var(--tempo)) var(--ease-out) var(--md); }
  .js .route .decide[data-k$="-a"] { --md: var(--ma); }
  .js .route .decide[data-k$="-b"] { --md: var(--mb); }
  .js .route .rt-out { animation: rt-dash calc(800ms * var(--tempo)) var(--ease-out) calc(120ms * var(--tempo)) both paused; }
  .js .route.is-playing .rt-out { animation-play-state: running; }
  .js .route [data-lane="data"] { --ld: calc(1000ms * var(--tempo)); --ma: calc(900ms * var(--tempo)); --mb: calc(1500ms * var(--tempo)); }
  .js .route [data-lane="access"] { --ld: calc(1110ms * var(--tempo)); --ma: calc(990ms * var(--tempo)); --mb: calc(1590ms * var(--tempo)); }
  .js .route [data-lane="model"] { --ld: calc(1220ms * var(--tempo)); --ma: calc(1080ms * var(--tempo)); --mb: calc(1680ms * var(--tempo)); }
  .js .route [data-lane="running"] { --ld: calc(1330ms * var(--tempo)); --ma: calc(1170ms * var(--tempo)); --mb: calc(1770ms * var(--tempo)); }
  .js .route [data-lane="evidence"] { --ld: calc(1440ms * var(--tempo)); --ma: calc(1260ms * var(--tempo)); --mb: calc(1860ms * var(--tempo)); }
  .js :is(.route-tag, .route-key, .route-legend):not(.is-in) { opacity: 0; transform: translateY(10px); }
  .js .situation:not(.is-in) { opacity: 0; transform: translateY(10px); }
}
@media (prefers-reduced-motion: reduce) {
  .rt-pulse { display: none; }
  .rt-lane, .decide :is(.rt-mark, .rt-ring), .route-readout > span, .rk-q { transition: none; }
}

@media (max-width: 1099px) {
  .situations { max-width: 44rem; gap: 1rem; }
  .situation { padding: 1.5rem 1.25rem 1.625rem; border-radius: 1rem; scroll-margin-top: 1rem; }
  .situation h3 { font-size: 1.188rem; }
  .sit-grid { grid-template-columns: 1fr; row-gap: 0.875rem; margin-top: 0.75rem; }
  .sit-grid p:not(.sit-label) { margin-top: 0.25rem; font-size: 1.0625rem; }
  .next-label { margin-bottom: 0.375rem; }
  .page-section > .section-link-next { margin-top: 0.75rem; }
  .route { max-width: 44rem; }
  .route-tag { margin-bottom: 0.75rem; }
  .route-panel { padding: 1.25rem 1rem 1rem; border-radius: 1rem; }
  .route-wide { display: none; }
  .route-tall { display: block; max-width: 30rem; margin-inline: auto; }
  .route-readout { margin-top: 0.75rem; min-height: 2.9em; }
  .route-key { grid-template-columns: 1fr 1fr; margin: 1.25rem -0.75rem 0; gap: 1.25rem 1rem; }
  .route-key > li { display: block; grid-column: auto; }
  .rk-lane { font-size: 1.188rem; padding: 0 0.75rem; }
  .rk-states { position: static; width: auto; height: auto; clip: auto; white-space: normal; margin-top: 0.375rem; padding-inline: 0.75rem; font-size: 0.9375rem; line-height: 1.45; color: var(--slate); }
  .rk-states span { display: block; }
  .rk-q { margin-top: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.625rem; scroll-margin-top: 1rem; font-size: 1rem; }
  .rk-q strong { margin-bottom: 0.125rem; }
}
@media (max-width: 639px) {
  .route-key { grid-template-columns: 1fr; }
}

/* print: the map in its light version, always the wide drawing. Normal print keeps the key;
   the worksheet mode (print.js adds .print-worksheet) prints only the map and the worksheet */
@media print {
  .js .route :is(.rt-stage, .rt-name, .rt-proto, .rt-state, .rt-head, .rt-col, .rt-bl, .rt-patch, .decide, .rt-q, .rt-managed, .rt-managed-t, .rt-managed-s),
  .js :is(.route-tag, .route-key, .route-legend, .situation, .section-intro) { opacity: 1 !important; transform: none !important; }
  .js .route .draw { stroke-dashoffset: 0 !important; stroke-dasharray: none !important; }
  .route-readout, .rt-pulse, .route-tools { display: none !important; }
  .route { max-width: none; }
  .route-panel, .route-key > li { break-inside: avoid; }
  .page-section > .section-intro { break-after: avoid; }
  .route-panel { background: #fff; border: 1px solid var(--navy); padding: 0.75rem 1rem; }
  .route-wide { display: block !important; }
  .route-tall { display: none !important; }
  :is(.rt-boundary, .rt-line, .rt-head) { stroke: var(--teal-on-light); }
  .rt-mark { fill: #fff; stroke: var(--teal-on-light); }
  .rt-patch { fill: #fff; }
  .rt-bl { fill: var(--teal-on-light); }
  :is(.rt-stage, .rt-name, .rt-state) { fill: var(--ink); }
  :is(.rt-stage-out, .rt-proto, .rt-col, .rt-q, .rt-managed-s) { fill: var(--slate); }
  .rt-managed-t { fill: var(--ink); }
  :is(.rt-out, .rt-managed) { stroke: var(--slate); }
  .rt-golive { stroke: var(--navy); }
  .route-key { grid-template-columns: repeat(2, 1fr); gap: 1rem 1.5rem; margin-inline: 0; }
  .route-key > li { display: block; grid-column: auto; }
  .rk-states { position: static; width: auto; height: auto; clip: auto; white-space: normal; }
  .situation { background: #fff; padding: 0.5rem 0; break-inside: avoid; }

  html.print-worksheet body > :not(main), html.print-worksheet main > :not(#route),
  html.print-worksheet #route > :not(.route):not(.worksheet), html.print-worksheet .route > :not(.route-panel) { display: none !important; }
  html.print-worksheet #route { padding: 0; }
  /* the sheet's heading goes above the map, its decisions below: the worksheet's parts join the
     section's own column and are ordered round the figure */
  html.print-worksheet #route { display: flex; flex-direction: column; }
  html.print-worksheet .worksheet { display: contents; color: var(--ink); }
  html.print-worksheet .ws-head { order: 0; }
  html.print-worksheet .route { order: 1; margin-top: 1rem; width: 100%; }
  html.print-worksheet .ws-cols { order: 2; }
  html.print-worksheet .ws-foot { order: 3; }
  html.print-worksheet .route-panel { border: 0; padding: 0; }
  .ws-head { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 1rem; }
  .ws-title { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.01em; }
  .ws-kicker { font-size: 1rem; font-weight: 600; color: var(--slate); text-align: right; }
  .ws-team { grid-column: 1 / -1; margin-top: 0.875rem; }
  .ws-cols { margin-top: 1rem; display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.75rem; }
  .ws-col { font-size: 1rem; font-weight: 700; color: var(--teal-on-light); margin-bottom: 0.25rem; }
  .ws-cols li { break-inside: avoid; padding-top: 0.625rem; }
  .ws-q { font-size: 0.95rem; line-height: 1.35; font-weight: 600; }
  .ws-q span { color: var(--slate); }
  /* writing lines: on paper a rule is a place to write, not a divider */
  .ws-line { height: 2.1rem; border-bottom: 1px solid #9aa8b8; display: flex; justify-content: space-between; align-items: flex-end; font-size: 0.8rem; color: var(--slate); }
  .ws-line span { padding-bottom: 0.15rem; }
  .ws-line span:last-child { width: 38%; }
  .ws-foot { margin-top: 1rem; font-size: 0.8rem; color: var(--slate); }
}

/* Gen 4 fix pass: the life sciences hero offers the first choice; the hub's sector chooser */
.hero-choices { margin-top: calc(22 * var(--u)); display: flex; flex-direction: column; gap: calc(8 * var(--u)); font-size: max(calc(19.7 * var(--u)), 1rem); line-height: 1.45; color: var(--on-navy-soft); }
.hero-choices a {
  color: var(--on-navy); font-weight: 600; text-decoration: none;
  background: linear-gradient(var(--teal), var(--teal)) no-repeat 0 100% / 0 2px, linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)) no-repeat 0 100% / 100% 1px;
  padding-bottom: 0.08em; transition: background-size 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .hero-choices a:hover { background-size: 100% 2px, 100% 1px; } }
.hero-choices + .btn { margin-top: calc(26 * var(--u)); }
.panel .panel-start { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .js .page-hero .hero-choices { opacity: 0; transform: translateY(16px); }
  .js .page-hero.is-ready .hero-choices { opacity: 1; transform: none; transition: opacity calc(700ms * var(--tempo)) var(--ease-out) calc(200ms * var(--tempo)), transform calc(800ms * var(--tempo)) var(--ease-out) calc(200ms * var(--tempo)); }
}
@media (prefers-reduced-motion: reduce) { .hero-choices a { transition: none; } }
@media (max-width: 1099px) { .hero-choices { margin-top: 1rem; gap: 0.375rem; font-size: 1.0625rem; } .hero-choices + .btn { margin-top: 1.25rem; } }
@media print { .js .page-hero .hero-choices { opacity: 1 !important; transform: none !important; } .hero-choices a { color: var(--ink); } .hero-choices { color: var(--ink); } }

/* ------------------------------------------------------------------------------------------
   Gen 5: the decision brief (decision-brief.html), how an engagement starts, the colleagues
   block, the carried brief on the home form, and the arrival boundary. Without brief.js the six
   steps show as one printable checklist; html.scripted (boot.js) hides steps 2 to 6 until
   brief.js marks html.brief-ready, and is cleared after 2.5s if it never does.
   ------------------------------------------------------------------------------------------ */
/* a secondary action is a text link, never a second button style */
.link-button {
  margin: 0; padding: 0 0 0.08em; border: 0; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--ink);
  background:
    linear-gradient(var(--teal-on-light), var(--teal-on-light)) no-repeat 0 100% / 0 2px,
    linear-gradient(rgba(11, 37, 69, 0.3), rgba(11, 37, 69, 0.3)) no-repeat 0 100% / 100% 1px;
  transition: background-size 260ms var(--ease-out);
}
.link-button[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .link-button:hover { background-size: 100% 2px, 100% 1px; } }
.link-button:focus-visible { outline-color: var(--navy); }

/* Home: the quieter way in under the contact lede, and the note above a carried brief */
.contact .contact-alt { margin-top: calc(14 * var(--u)); font-size: max(calc(19.7 * var(--u)), 1rem); color: var(--on-navy-mute); }
.contact .request-carried {
  margin: 0 0 calc(4 * var(--u)); max-width: none; text-align: left;
  font-size: max(calc(16.8 * var(--u)), 0.9375rem); line-height: 1.45; color: var(--slate);
}
.request-carried[hidden] { display: none; }

/* The card: white on Cool Tint, the request card's width, with its own boundary for progress */
.brief-card {
  --bw: calc(2 * var(--u)); --r: calc(16 * var(--u));
  position: relative; max-width: calc(880 * var(--u)); margin-inline: auto;
  padding: calc(52 * var(--u)) calc(52 * var(--u)) calc(48 * var(--u));
  background: var(--paper); border: var(--bw) solid transparent; border-radius: var(--r);
}
.brief-edge { display: none; }
.brief-ready .brief-edge { display: block; }
/* drawn round the card one sixth per step; the path is one unit long, so nothing is measured */
.brief-edge rect { stroke: var(--teal-on-light); stroke-dasharray: 1 2; stroke-dashoffset: 1; }
/* the step count sits in the line, as "Your estate boundary" sits on the hero */
.brief-label {
  position: absolute; top: calc(var(--bw) * -0.5); left: calc(36 * var(--u)); transform: translateY(-50%);
  padding: 0 calc(10 * var(--u));
  background: linear-gradient(var(--tint) 50%, var(--paper) 50%);
  font-size: max(calc(17.8 * var(--u)), 0.9375rem); font-weight: 600; line-height: 1.6; color: var(--ink);
}
.brief-label[hidden] { display: none; }
.brief-nojs { font-size: max(calc(19.7 * var(--u)), 1rem); line-height: 1.5; color: var(--slate); margin-bottom: calc(28 * var(--u)); }
.brief-nojs a, .brief-output a, .colleagues a {
  color: var(--ink); font-weight: 600; text-decoration: none;
  background:
    linear-gradient(var(--teal-on-light), var(--teal-on-light)) no-repeat 0 100% / 0 2px,
    linear-gradient(rgba(11, 37, 69, 0.3), rgba(11, 37, 69, 0.3)) no-repeat 0 100% / 100% 1px;
  padding-bottom: 0.08em; transition: background-size 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { :is(.brief-nojs, .brief-output, .colleagues) a:hover { background-size: 100% 2px, 100% 1px; } }
:is(.brief-card, .colleagues) :focus-visible { outline-color: var(--navy); }

/* Progress: the six step names, the current one in Ink, the ones behind you led by a teal point */
.brief-progress { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)) calc(26 * var(--u)); margin-bottom: calc(30 * var(--u)); }
.brief-progress[hidden] { display: none; }
.brief-progress button {
  display: inline-flex; align-items: center; gap: calc(8 * var(--u));
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: max(calc(17.8 * var(--u)), 0.9375rem); font-weight: 500; color: var(--slate);
}
.brief-progress button:disabled { cursor: default; }
.brief-progress li.is-done button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-on-light); }
.brief-progress li[aria-current="step"] button { color: var(--ink); font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .brief-progress button:not(:disabled):hover span { color: var(--ink); } }

/* One step: heading, why, then the question groups */
.brief-step + .brief-step { margin-top: calc(56 * var(--u)); }
.brief-ready .brief-step + .brief-step { margin-top: 0; }
.scripted:not(.brief-ready) .brief-step + .brief-step, .scripted .brief-settle, .scripted .brief-nojs,
.brief-ready .brief-settle, .brief-ready .brief-nojs { display: none; }
/* headings take focus only so the step is announced; they are not controls, so no ring */
.brief-title:focus, .brief-out-title:focus { outline: none; }
.brief-title { font-size: calc(28.1 * var(--u)); font-weight: 700; line-height: 1.15; color: var(--ink); outline: none; }
.brief-num { margin-right: calc(14 * var(--u)); color: var(--slate-soft); font-variant-numeric: tabular-nums lining-nums; }
.brief-why { margin-top: calc(10 * var(--u)); font-size: max(calc(19.7 * var(--u)), 1rem); line-height: 1.5; color: var(--slate); }
.brief-group { margin: calc(30 * var(--u)) 0 0; padding: 0; border: 0; min-width: 0; }
.brief-q { padding: 0; margin-bottom: calc(14 * var(--u)); font-size: max(calc(19.7 * var(--u)), 1rem); font-weight: 600; line-height: 1.35; color: var(--ink); }
.brief-options { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)); }

/* Options: the native input, drawn as a rounded box or circle; the field border, not a divider */
.option {
  position: relative; display: flex; align-items: center; gap: calc(14 * var(--u));
  padding: calc(13 * var(--u)) calc(16 * var(--u));
  background: var(--tint); border: 1.5px solid var(--line); border-radius: calc(10 * var(--u));
  font-size: max(calc(18.7 * var(--u)), 1rem); font-weight: 500; line-height: 1.35; color: var(--ink);
  cursor: pointer; transition: background-color 180ms var(--ease-out), border-color 160ms ease;
}
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.option:has(input:focus-visible) { outline: 3px solid var(--navy); outline-offset: 3px; }
.option:has(input:checked) { background: var(--paper); border-color: var(--navy); }
@media (hover: hover) and (pointer: fine) { .option:hover { background: #e9eef2; } .option:has(input:checked):hover { background: var(--paper); } }
.option-mark {
  position: relative; flex: none; width: max(calc(20 * var(--u)), 18px); height: max(calc(20 * var(--u)), 18px);
  border: 1.5px solid #7d8ca0; border-radius: 5px; background: var(--paper);
  transition: background-color 160ms ease, border-color 160ms ease;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.option input[type="radio"] + .option-mark { border-radius: 50%; }
.option input:checked + .option-mark { background: var(--navy); border-color: var(--navy); }
/* the tick: one round capped stroke; the radio: a white dot */
.option-mark::after {
  content: ""; position: absolute; left: 50%; top: 45%; width: 30%; height: 55%;
  border: solid #fff; border-width: 0 2px 2px 0; border-radius: 1px;
  transform: translate(-50%, -50%) rotate(45deg) scale(0.6); opacity: 0;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.option input[type="radio"] + .option-mark::after { top: 50%; width: 40%; height: 40%; border: 0; border-radius: 50%; background: #fff; transform: translate(-50%, -50%) scale(0.6); }
.option input:checked + .option-mark::after { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1); }
.option input[type="radio"]:checked + .option-mark::after { transform: translate(-50%, -50%) scale(1); }

/* The questions printed with the checklist (no JavaScript, or a plain print) */
.brief-settle { margin-top: calc(26 * var(--u)); }
.brief-settle-title { font-size: max(calc(17.8 * var(--u)), 0.9375rem); font-weight: 600; color: var(--slate); }
.brief-settle ul, .brief-list { display: flex; flex-direction: column; gap: 0.4em; margin-top: calc(10 * var(--u)); }
:is(.brief-settle, .brief-list) li { position: relative; padding-left: 1.2em; font-size: max(calc(19.7 * var(--u)), 1rem); line-height: 1.5; color: var(--ink); }
:is(.brief-settle, .brief-list) li::before {
  content: ""; position: absolute; left: 0; top: calc(0.75em - 3px);
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal-on-light);
}

/* Continue and Back, on the card's left edge */
.brief-controls { display: flex; align-items: center; gap: calc(32 * var(--u)); margin-top: calc(40 * var(--u)); }
.brief-controls[hidden] { display: none; }
:is(.brief-controls, .brief-actions) .btn-primary { margin: 0; width: auto; padding: 0 calc(32 * var(--u)); font: inherit; font-size: calc(22 * var(--u)); font-weight: 700; border: 0; cursor: pointer; }
.brief-controls .link-button, .brief-links .link-button { font-size: max(calc(19.7 * var(--u)), 1rem); }
.brief-controls .btn-primary:focus-visible, .brief-actions .btn-primary:focus-visible { outline-color: var(--navy); }
.brief-stage.is-moving { overflow: clip; }

/* The brief */
.brief-out-title { font-size: calc(28.1 * var(--u)); font-weight: 700; line-height: 1.15; color: var(--ink); outline: none; }
.brief-out-meta { margin-top: calc(10 * var(--u)); font-size: max(calc(17.8 * var(--u)), 0.9375rem); line-height: 1.5; color: var(--slate); }
.brief-part { margin-top: calc(34 * var(--u)); }
.brief-part-title { font-size: max(calc(21 * var(--u)), 1.0625rem); font-weight: 700; line-height: 1.3; color: var(--ink); }
.brief-summary { display: flex; flex-direction: column; gap: calc(10 * var(--u)); margin-top: calc(12 * var(--u)); }
.brief-summary > div { display: grid; grid-template-columns: calc(150 * var(--u)) 1fr; gap: calc(20 * var(--u)); }
.brief-summary dt { font-size: max(calc(19.7 * var(--u)), 1rem); font-weight: 600; color: var(--ink); line-height: 1.5; }
.brief-summary dd { font-size: max(calc(19.7 * var(--u)), 1rem); color: var(--slate); line-height: 1.5; }
.brief-area { margin-top: calc(18 * var(--u)); font-size: max(calc(17.8 * var(--u)), 0.9375rem); font-weight: 600; color: var(--slate); }
.brief-ol { list-style: decimal; padding-left: 2.1em; margin-top: calc(6 * var(--u)); display: flex; flex-direction: column; gap: 0.4em; }
.brief-ol li { padding-left: 0.3em; font-size: max(calc(19.7 * var(--u)), 1rem); line-height: 1.5; color: var(--ink); }
.brief-ol li::marker { color: var(--slate-soft); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
.brief-output[hidden] { display: none; }
.brief-actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(20 * var(--u)) calc(36 * var(--u)); margin-top: calc(44 * var(--u)); }
.brief-actions[hidden] { display: none; }
.brief-links { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)) calc(28 * var(--u)); }
.brief-status { flex-basis: 100%; font-size: max(calc(17.8 * var(--u)), 0.9375rem); color: var(--slate); }
.brief-status:empty { display: none; }
.brief-copytext {
  flex-basis: 100%; min-height: calc(220 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u));
  font: inherit; font-size: max(calc(16.8 * var(--u)), 0.9375rem); line-height: 1.5; color: var(--ink);
  border: 1.5px solid #7d8ca0; border-radius: calc(8 * var(--u)); resize: vertical;
}
.brief-copytext[hidden] { display: none; }

/* For your colleagues: one white panel of links, space between, no rules */
.colleagues {
  max-width: calc(880 * var(--u)); margin-inline: auto; display: flex; flex-direction: column; gap: calc(22 * var(--u));
  padding: calc(40 * var(--u)) calc(44 * var(--u)); background: var(--paper); border-radius: calc(16 * var(--u));
}
.colleagues p { font-size: max(calc(19.7 * var(--u)), 1rem); line-height: 1.5; color: var(--slate); }
.colleagues .colleague-link { font-weight: 600; color: var(--ink); }

/* Arrival boundary: drawn by motion.js round the panel a link lands on, then faded and removed */
.arrive-host { position: relative; }
.arrive {
  position: absolute; left: -8px; top: -8px; width: calc(100% + 16px); height: calc(100% + 16px);
  overflow: visible; pointer-events: none; z-index: 1;
}
.arrive rect { fill: none; stroke: var(--teal-on-light); stroke-width: 2px; stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.arrive-on-navy rect { stroke: var(--teal); }
/* without motion (no JavaScript or reduced motion): the same line, still, for as long as it is the target */
html:not(.js) :is(.offer, .situation, .colleagues, .request):target,
html:not(.js) :target > :is(.scope, .proc, .colleagues),
html:not(.js) #engagement:target .steps-list { outline: 2px solid var(--teal-on-light); outline-offset: 8px; }
html:not(.js) .contact .request:target { outline-color: var(--teal); }

@media (max-width: 1099px) {
  .brief-card, .colleagues { max-width: 44rem; }
  .brief-card { --bw: 2px; --r: 1rem; padding: 2.25rem 1.25rem 1.75rem; }
  .brief-label { left: 1rem; padding: 0 0.5rem; }
  .brief-nojs { margin-bottom: 1.5rem; }
  .brief-progress { gap: 0.375rem 1.125rem; margin-bottom: 1.5rem; }
  .brief-progress button { gap: 0.4rem; }
  .brief-step + .brief-step { margin-top: 2.5rem; }
  .brief-title, .brief-out-title { font-size: 1.438rem; }
  .brief-num { margin-right: 0.625rem; }
  .brief-why { margin-top: 0.5rem; }
  .brief-group { margin-top: 1.5rem; }
  .brief-q { margin-bottom: 0.75rem; }
  .brief-options { gap: 0.5rem; }
  .option { gap: 0.75rem; padding: 0.75rem 0.875rem; border-radius: 0.625rem; }
  .brief-settle { margin-top: 1.25rem; }
  .brief-controls { gap: 1.5rem; margin-top: 2rem; }
  :is(.brief-controls, .brief-actions) .btn-primary { height: 3.25rem; padding: 0 1.5rem; font-size: 1.125rem; }
  .brief-part { margin-top: 1.75rem; }
  .brief-summary > div { grid-template-columns: 7.5rem 1fr; gap: 0.75rem; }
  .brief-actions { gap: 1.25rem 1.5rem; margin-top: 2rem; }
  .brief-links { gap: 0.75rem 1.25rem; }
  .colleagues { gap: 1.125rem; padding: 1.5rem 1.25rem; border-radius: 1rem; }
  .contact .contact-alt { margin-top: 0.75rem; }
}
@media (max-width: 639px) {
  .brief-options { grid-template-columns: 1fr; }
  .brief-summary > div { grid-template-columns: 1fr; gap: 0.125rem; }
  .brief-controls { flex-direction: row-reverse; justify-content: flex-end; }
}

@media (prefers-reduced-motion: no-preference) {
  .js :is(.brief-card, .colleagues):not(.is-in) { opacity: 0; transform: translateY(10px); }
}
@media (prefers-reduced-motion: reduce) {
  .option, .option-mark, .option-mark::after, .link-button, :is(.brief-nojs, .brief-output, .colleagues) a { transition: none; }
}

@media print {
  .js :is(.brief-card, .colleagues) { opacity: 1 !important; transform: none !important; }
  /* a plain print: the six steps as a checklist, ticks as they stand */
  .brief-card { border: 0; padding: 0; max-width: none; }
  .brief-edge, .brief-label, .brief-progress, .brief-controls, .brief-actions, .brief-nojs, .brief-output { display: none !important; }
  .brief-print-head { display: block; margin-bottom: 12pt; font-size: 9pt; color: #5a6b80; }
  .brief-step, .brief-step[hidden] { display: block !important; break-inside: avoid; margin-top: 16pt !important; opacity: 1 !important; transform: none !important; }
  .brief-settle { display: block !important; }
  .option { background: #fff; border: 1px solid #7d8ca0; padding: 3pt 6pt; font-size: 9.5pt; opacity: 1 !important; transform: none !important; }
  .brief-options { gap: 4pt; }
  .brief-title { font-size: 13pt; }
  .colleagues { padding: 0; background: #fff; }
  /* the brief only, with the colleagues block */
  .print-brief main > :not(#questions):not(#colleagues),
  .print-brief #questions > :not(.brief-card),
  .print-brief .brief-card > :not(.brief-stage),
  .print-brief .brief-stage > form { display: none !important; }
  .print-brief .brief-output { display: block !important; }
  .print-brief .brief-out-head { padding: 10pt 12pt; border: 1px solid #12a892; border-radius: 6pt; }
  .print-brief .brief-part { break-inside: avoid; margin-top: 14pt; }
  .print-brief #questions, .print-brief #colleagues { padding: 0; background: #fff; }
  .print-brief #colleagues { margin-top: 18pt; break-inside: avoid; }
  .print-brief #colleagues > .section-intro { display: none; }
  .print-brief #colleagues > h2 { text-align: left; font-size: 13pt; }
  .brief-output a::after, .colleagues a[href^="http"]::after { content: none; }
  .arrive { display: none; }
}

/* ------------------------------------------------------------------------------------------
   Gen 5, red team pass (2026-10-16): figures caption, the offers intro, the visible no
   JavaScript failure message, inline field errors, the hero's quiet link, and disclosures that
   are open everywhere but start closed on phones (disclose.js).
   ------------------------------------------------------------------------------------------ */
.figures-note {
  margin: calc(28 * var(--u)) auto 0; max-width: 62ch; text-align: center;
  font-size: max(calc(17.8 * var(--u)), 0.9375rem); line-height: 1.5; color: var(--slate);
}
.detail-intro {
  max-width: 62ch; margin: calc(20 * var(--u)) auto 0; text-align: center;
  font-size: max(calc(20.6 * var(--u)), 1rem); line-height: 1.5; color: var(--slate);
}
.detail .detail-brief { margin: calc(14 * var(--u)) 0 calc(44 * var(--u)); }
.offer-ends a, .scope-fee a {
  color: var(--ink); font-weight: 600; text-decoration: none;
  background:
    linear-gradient(var(--teal-on-light), var(--teal-on-light)) no-repeat 0 100% / 0 2px,
    linear-gradient(rgba(11, 37, 69, 0.3), rgba(11, 37, 69, 0.3)) no-repeat 0 100% / 100% 1px;
  padding-bottom: 0.08em; transition: background-size 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .offer-ends a:hover { background-size: 100% 2px, 100% 1px; } }
.offer-ends a:focus-visible { outline-color: var(--navy); }
.scope-out.scope-fee { margin-top: calc(10 * var(--u)); }

/* the platform page's quiet link under its hero button */
.page-hero-link { margin-top: calc(18 * var(--u)); font-size: max(calc(18.7 * var(--u)), 0.9375rem); font-weight: 600; }
.page-hero-link a {
  color: var(--on-navy); text-decoration: none;
  background: linear-gradient(var(--teal), var(--teal)) no-repeat 0 100% / 0 2px, linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45)) no-repeat 0 100% / 100% 1px;
  padding-bottom: 2px; transition: background-size 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .page-hero-link a:hover { background-size: 100% 2px, 100% 1px; } }

/* F7: a no JavaScript post that fails lands here, with the email route */
.request-not-sent { display: none; }
.request-not-sent:target {
  display: block; max-width: calc(880 * var(--u)); width: 100%;
  padding: calc(28 * var(--u)) calc(36 * var(--u)); border-radius: calc(16 * var(--u));
  background: var(--paper); color: var(--ink); text-align: left;
  font-size: max(calc(20.6 * var(--u)), 1.0625rem); font-weight: 500; line-height: 1.5;
}
.request-not-sent a { color: var(--ink); font-weight: 700; }
.request-not-sent a:focus-visible { outline-color: var(--navy); }

/* F8: the message under a field that needs attention */
.contact .field-error, .field-error {
  margin: 0; max-width: none; text-align: left;
  font-size: max(calc(16.8 * var(--u)), 0.9375rem); line-height: 1.4; font-weight: 500; color: #b02a20;
}
.field-error[hidden] { display: none; }
.field [aria-invalid="true"] { border-color: #c2352b; }

/* Disclosures: the summary reads as the heading it replaces; a chevron appears only on phones */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
:is(.toc-details, .assure > details, .arch-key-d) > summary { cursor: default; }
.assure > details > summary h3 { display: inline; }
.arch-key-d > summary { display: none; }
@media (max-width: 639px) {
  :is(.toc-details, .assure > details, .arch-key-d) > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; cursor: pointer;
  }
  :is(.toc-details, .assure > details, .arch-key-d) > summary::after {
    content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg);
  }
  :is(.toc-details, .assure > details, .arch-key-d)[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
  .toc-details > summary { margin-bottom: 0; padding: 0.5rem 0; color: var(--on-navy); }
  .toc-details[open] > summary { margin-bottom: 0.25rem; }
  .assure > details:not([open]) { padding-bottom: 1.5rem; }
  .arch-key-d > summary { padding: 0.75rem 0; font-weight: 600; color: var(--ink); }
  .figures-note { margin-top: 1.25rem; }
  .detail-intro { margin-top: 1rem; }
  .detail .detail-brief { margin: 0.75rem 0 1.75rem; }
  .request-not-sent:target { padding: 1.25rem; border-radius: 1rem; }
}
@media (max-width: 1099px) {
  .figures-note, .detail-intro { max-width: 40rem; }
  .request-not-sent:target { max-width: 40rem; }
  .page-hero-link { margin-top: 0.875rem; }
}
@media (prefers-reduced-motion: reduce) { .offer-ends a, .page-hero-link a { transition: none; } }
@media print {
  .detail-brief { display: none; }
  details > summary::after { content: none; }
}

/* Safari: a pathLength dash is dropped once its line is fully drawn (brief card closed; diagrams
   marked lines-done by motion.js after their entrance), so no gap or dots can remain */
.brief-card.is-closed .brief-edge rect { stroke-dasharray: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .arch.lines-done .draw, .js .route.lines-done .draw { stroke-dasharray: none; transition: none; }
}

/* phones: until disclose.js has closed them, the closed-by-default disclosures show only their summary,
   so closing them causes no layout shift (boot.js sets html.dc, and clears it if disclose.js never runs) */
.dc:not(.dc-ready) :is(.toc-details, details[data-phone="closed"]) > :not(summary) { display: none; }
@media (max-width: 639px) {
  .dc:not(.dc-ready) :is(.toc-details, details[data-phone="closed"]) > summary::after { transform: translateY(-3px) rotate(45deg); }
}

/* ------------------------------------------------------------------------------------------
   Masthead menus: Services and Guides open a white panel of pages. Plain <details>, so they work
   without JavaScript; nav.js keeps one open at a time and closes them on Escape or an outside click.
   ------------------------------------------------------------------------------------------ */
.nav { align-items: center; }
.nav-menu { position: relative; }
.nav-menu summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: calc(8 * var(--u));
  font-size: max(calc(17.8 * var(--u)), 0.875rem); font-weight: 500;
  padding: calc(8 * var(--u)) 0;
  background: linear-gradient(var(--teal), var(--teal)) no-repeat 0 100% / 0 2px;
  transition: background-size 220ms var(--ease-out);
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::after {
  content: ""; width: calc(7 * var(--u)); height: calc(7 * var(--u)); min-width: 6px; min-height: 6px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform 200ms var(--ease-out);
}
.nav-menu[open] summary::after { transform: translateY(25%) rotate(-135deg); }
.nav-menu summary:hover, .nav-menu[open] summary, .nav-menu summary.is-active { background-size: 100% 2px; }
.nav-menu summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 2px; }
.nav-panel {
  position: absolute; top: calc(100% + 14 * var(--u)); left: calc(-22 * var(--u)); z-index: 10;
  margin: 0; padding: calc(8 * var(--u)); list-style: none;
  min-width: calc(300 * var(--u));
  background: var(--paper); color: var(--ink);
  border-radius: calc(12 * var(--u));
  box-shadow: 0 calc(18 * var(--u)) calc(44 * var(--u)) rgba(6, 34, 56, 0.32);
}
.nav .nav-panel a {
  display: block; white-space: nowrap;
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  border-radius: calc(8 * var(--u));
  font-size: max(calc(17 * var(--u)), 0.875rem); font-weight: 500; color: var(--ink);
  background: none; transition: background-color 160ms ease;
}
.nav .nav-panel a:hover { background: var(--tint); }
.nav .nav-panel a:focus-visible { background: var(--tint); outline: 2px solid var(--teal-on-light); outline-offset: -2px; }
.nav-menu[open] .nav-panel { animation: nav-panel-in 180ms var(--ease-out); }
@keyframes nav-panel-in { from { opacity: 0; transform: translateY(calc(-6 * var(--u))); } }
@media (prefers-reduced-motion: reduce) {
  .nav-menu summary, .nav-menu summary::after, .nav .nav-panel a { transition: none; }
  .nav-menu[open] .nav-panel { animation: none; }
}
/* Small screens: the panel hangs from the nav row's left edge, so it lines up with the page text */
@media (max-width: 1099px) {
  .nav { position: relative; }
  .nav-menu { position: static; }
  .nav-menu summary { font-size: 1rem; padding: 0.625rem 0; gap: 0.4rem; }
  .nav-panel {
    top: calc(100% + 0.25rem); left: -0.875rem; padding: 0.375rem; border-radius: 0.75rem;
    min-width: 0; width: min(22rem, calc(100vw - 2 * var(--gutter) + 1.75rem));
    /* the pinned masthead never scrolls away, so a long panel scrolls inside itself on a short screen */
    max-height: calc(100svh - 8.5rem); overflow-y: auto; overscroll-behavior: contain;
  }
  .nav .nav-panel a { white-space: normal; font-size: 1rem; padding: 0.75rem 0.5rem; border-radius: 0.5rem; }
}
@media (max-width: 379px) {
  .nav-menu summary { font-size: 0.9375rem; white-space: nowrap; }
}
/* Phones: Method and How to start are sections of the home page, reached there by scrolling; the row
   keeps Services, Guides and Assurance so it never wraps */
@media (max-width: 639px) {
  .nav > .nav-home { display: none; }
  .nav { gap: 1.75rem; justify-content: flex-start; }
  .nav a, .nav-menu summary { white-space: nowrap; }
}