/* Editorial: a narrow label column against a wide content column, interrupted
     twice — once by the harbour, once by the deck's navy. Motion is reserved for
     things that mean something: four plans settling into one, figures counting,
     cards lifting under the cursor. Single theme on purpose: this is a mockup of
     a specific brand's site. */
:root {
  --paper: #f4f2ed;
  --card: #ffffff;
  --ink: #17242e;
  --body: #4a5157;
  /* Quiet meta: the geography line and the capability tags. #8B9096 was
     2.88:1 on --paper and failed AA. Measured in the browser across all 16
     pages at 1200px and 390px, it dressed exactly two elements -- .where on
     index and on partners, both 13px on --paper -- and twelve rules whose
     selectors match nothing. #61666C is the lightest value on that same hue
     ramp clearing 4.5:1 on every light surface in this palette: 5.18:1 on
     --paper, 5.79:1 on --card, 4.57:1 on --sand. AA at 13px leaves no room
     for a third grey tier beneath --body, so quiet is carried here by size
     and weight, not by lightness. */
  --muted: #61666c;
  --rule: #dcd7ce;
  --sand: #e9e4da;
  --gold: #b8893a;
  /* The one blue that is not the Blue Harbour navy. It marks a second party
     in the partners equation and the active row in the hero menu --
     --deep-mid and --deep-tint both sit too close to the house navy to
     distinguish anything from it. 4.78:1 on --paper: passes AA, but only
     just, so it is for headings, labels and active states, not body copy. */
  --accent: #2e6cb5;
  --deep: #0f2540;
  --deep-mid: #1e3a5f;
  --deep-tint: #254b7c;
  --deep-mark: #2b4869;
  --on-deep: #dce4ec;
  --on-deep-mu: #7e97b3;
  --on-mid-mu: #9db3cb;

  --sans: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;

  --s-meta: 13px;
  --s-body: 16px;
  --s-lead: clamp(18px, 1.9vw, 21px);
  --s-mid: clamp(25px, 3.1vw, 34px);
  --s-big: clamp(36px, 6.2vw, 64px);

  /* Figures. --s-big is a headline step at -0.032em; numbers need looser
       tracking and tabular lining figures so columns of counts align. */
  --s-fig: clamp(32px, 4.4vw, 52px);
  --s-fig-sm: clamp(22px, 2.6vw, 28px);
  --fig-track: -0.015em;
  --fig-feat: "tnum" 1, "lnum" 1;

  /* Provenance. A tier of its own, a step darker than --muted: provenance is
       what a sceptical reader goes looking for, so it must never be the least
       legible text on the page. */
  --s-cite: 13px;
  --cite-ink: #5f646a;
  --cite-rule: var(--rule);

  /* Evidence emphasis. Parent marine, at most once per page. Evidence states
       are carried by weight and label, never by hue -- see spec 10.5. */
  --ev-ink: #1e3a5f;

  --gutter: clamp(20px, 6vw, 128px);
  --colgap: clamp(36px, 7vw, 120px);
  --radius: 18px;
  --cardgap: clamp(16px, 2vw, 24px);
  --ease: cubic-bezier(0.22, 0.7, 0.2, 1);
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: var(--s-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
.wrap {
  max-width: 1184px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.bleed {
  width: 100%;
}
a {
  color: var(--ink);
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--deep-tint);
  outline-offset: 3px;
}
h1,
h2,
h3 {
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-block: 30px 28px;
}
.mark {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}
.mark svg {
  flex: none;
}
.mark b {
  font-size: var(--s-body);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.6vw, 36px);
}
.nav a {
  font-size: var(--s-body);
  color: var(--body);
  text-decoration: none;
  position: relative;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav a:hover::after {
  transform: scaleX(1);
}

.hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: clamp(56px, 9vw, 128px) clamp(52px, 8vw, 112px);
}
.where {
  font-size: var(--s-meta);
  color: var(--muted);
  margin-bottom: clamp(28px, 4vw, 46px);
}
.rota {
  font-size: var(--s-big);
  line-height: 1.1;
  letter-spacing: -0.032em;
  min-height: calc(var(--s-big) * 2.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity 400ms ease;
  margin-bottom: clamp(20px, 2.6vw, 32px);
}
.rota span {
  display: block;
}
.what {
  font-size: var(--s-lead);
  line-height: 1.5;
  color: var(--ink);
  max-width: 46ch;
  margin: 0 0 clamp(26px, 3.4vw, 38px);
}
.tick {
  width: 40px;
  height: 1px;
  background: var(--gold);
  margin-bottom: clamp(26px, 3.4vw, 38px);
}
.hero p.say {
  margin: 0 0 clamp(32px, 4.6vw, 48px);
  line-height: 1.8;
  max-width: 62ch;
}
.acts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 2.6vw, 32px);
  align-items: center;
  justify-content: center;
}

.btn {
  display: inline-block;
  font-size: var(--s-body);
  font-weight: 600;
  color: var(--paper);
  background: var(--ink);
  padding: 15px 30px;
  text-decoration: none;
  transition:
    background 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.btn:hover {
  background: var(--deep-mid);
  transform: translateY(-2px);
}
/* Two ways in means two links of equal weight: the paragraph above names
   both groups, so each gets its own door rather than one being the button
   and the other an afterthought. */
.ab-doors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(20px, 2.6vw, 34px);
}

.quiet {
  font-size: var(--s-body);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
}

.shotwrap {
  overflow: hidden;
}
/* The film is 1280x720 and this band is full-bleed, so on a retina desktop it
     upscales 2.25x. Nothing fixes that but a larger source. A restrained
     contrast and saturation lift raises perceived acuity without looking
     processed. No transform or will-change here: forcing a compositing layer
     makes the browser rasterise the frame and then scale the layer, which is
     softer than letting it scale the video directly. */
.shot {
  display: block;
  width: 100%;
  max-width: 100%;
  height: clamp(220px, 30vw, 440px);
  object-fit: cover;
  object-position: center 62%;
  filter: contrast(1.06) saturate(1.05) brightness(1.01);
}

.row {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--colgap);
  align-items: start;
  padding-block: 0 clamp(56px, 7vw, 100px);
}
.row > .side {
  padding-top: 4px;
}
.side h2 {
  font-size: var(--s-body);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.side p {
  margin: 0;
  font-size: var(--s-meta);
  line-height: 1.75;
  color: var(--muted);
}
.pad-top {
  padding-top: clamp(56px, 7vw, 112px);
}
@media (max-width: 860px) {
  .row {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

/* The four plans, and the one position under them.
     The four bars sit at DIFFERENT lengths at rest, because the disagreement is
     the point; an earlier version settled them all to equal, which hid it. No
     axis and no figures: these are schematic, and putting plausible-looking
     dollar values on them would be inventing data. The gold row is full width
     and sits below a rule, so it reads as the whole picture agreed rather than
     as a fifth, larger measurement. */
.plans {
  margin: 0;
  border-top: 1px solid var(--rule);
}
.plan {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 215px;
  gap: 24px;
  align-items: center;
  padding-block: 22px;
}
.plan + .plan {
  border-top: 1px solid var(--rule);
}
.plan dt {
  font-size: var(--s-body);
  font-weight: 600;
  color: var(--ink);
}
.plan dd {
  margin: 0;
  min-width: 0;
}
.plan .bar {
  display: block;
  height: 10px;
  background: var(--deep-mid);
  width: var(--w, 100%);
}
.plan small {
  font-size: var(--s-meta);
  line-height: 1.55;
  color: var(--muted);
  min-width: 0;
}

.joined {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 215px;
  gap: 24px;
  align-items: center;
  position: relative;
  padding-top: 30px;
}
.sweep {
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;
  width: 100%;
  background: var(--gold);
}
.joined dt {
  font-size: var(--s-lead);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.joined dd {
  margin: 0;
  min-width: 0;
}
.joined .bar {
  display: block;
  height: 14px;
  background: var(--gold);
  width: 100%;
}
.joined small {
  font-size: var(--s-meta);
  line-height: 1.55;
  color: var(--body);
  min-width: 0;
}

.js .in .plan .bar {
  animation: grow 0.85s var(--ease) both;
  animation-delay: var(--d, 0s);
}
@keyframes grow {
  from {
    width: 0;
  }
  to {
    width: var(--w, 100%);
  }
}
.js .in .sweep {
  animation: sweep 0.9s var(--ease) both;
  animation-delay: 0.72s;
}
@keyframes sweep {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
.js .in .joined .bar {
  animation: grow 0.9s var(--ease) both;
  animation-delay: 1.05s;
}
.js .in .joined dt,
.js .in .joined small {
  animation: arrive 0.55s var(--ease) both;
  animation-delay: 1.15s;
}

@media (max-width: 860px) {
  .plan,
  .joined {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .joined {
    padding-top: 24px;
  }
}

/* Figures, as cards */
.figs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}
.fig {
  background: var(--card);
  border-radius: var(--radius);
  text-align: center;
  padding: clamp(30px, 3.2vw, 44px) clamp(16px, 1.8vw, 26px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-shadow:
    0 1px 2px rgba(23, 36, 46, 0.05),
    0 10px 28px -16px rgba(23, 36, 46, 0.3);
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}
.fig:hover {
  transform: translateY(-7px);
  box-shadow:
    0 2px 4px rgba(23, 36, 46, 0.06),
    0 26px 50px -20px rgba(23, 36, 46, 0.42);
}
.fig b {
  display: block;
  font-size: var(--s-mid);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.028em;
  line-height: 1.1;
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}
.fig i {
  display: block;
  width: 26px;
  height: 1px;
  background: var(--gold);
  margin-bottom: 16px;
}
.fig span {
  font-size: var(--s-meta);
  line-height: 1.65;
  color: var(--muted);
  max-width: 22ch;
}
.js .in .fig {
  animation: arrive 0.65s var(--ease) both;
  animation-delay: var(--d, 0s);
}
@media (max-width: 860px) {
  .figs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Ground rhythm.
     The page used to be one unbroken field of paper for about 7,400 of its
     8,000 pixels, interrupted once. Three grounds now: paper as the default,
     white where a block should lift off it, blue where the page should stop.
     White bands carry no white cards, for obvious reasons, so the figures and
     the module cards stay on paper. The two blue bands are deliberately
     different depths -- the method band is the deck's cover navy and carries
     the glows; the work band is the brand blue, flat and quiet, so the page
     does not simply repeat itself. */
/* Sand, not white. The bands carry cards, and a white card on a white band is
     not a card. Sand sits the same distance below paper that white sits above
     it, so the band still reads as a band and the cards still read as cards. */
.band-sand {
  background: var(--sand);
  border-block: 1px solid var(--rule);
}
/* A band owns its own air, so it overrides whatever padding .row and .pad-top
     would have given the content inside it. The section after a band then only
     needs enough to clear the seam, not a full section's worth -- .seam-top. */
.band-sand .wrap {
  padding-block: clamp(48px, 6vw, 80px);
}
.seam-top {
  padding-top: clamp(36px, 4.5vw, 60px);
}
/* A paper section between two bands reads as short against them: the band
   carries clamp(48px, 6vw, 80px) of its own, .seam-top only 60. Where a page
   alternates band and paper the whole way down, the paper needs the band's
   measure so the rhythm is even. Scoped rather than folded into .seam-top,
   which other pages use for a single closing section after one band. */
.seam-band {
  padding-top: clamp(48px, 6vw, 80px);
}

/* Navy band */
.deepband {
  background: var(--deep);
  position: relative;
  overflow: hidden;
}
.band-deep {
  background: var(--deep-mid);
  position: relative;
  overflow: hidden;
}
.deepband .wrap,
.band-deep .wrap {
  padding-block: clamp(56px, 7vw, 96px);
  position: relative;
}
.deepband .deep-inner,
.band-deep .deep-inner {
  padding-bottom: clamp(56px, 7vw, 96px);
}
.band-deep .side h2 {
  color: #fff;
}
.band-deep .side p {
  color: var(--on-mid-mu);
}
.band-deep .case {
  border-top-color: var(--deep-tint);
}
.band-deep .case:last-of-type {
  border-bottom-color: var(--deep-tint);
}
.band-deep .case em {
  color: var(--on-mid-mu);
}
.band-deep .case b {
  color: #fff;
}
.band-deep .case span {
  color: var(--on-deep);
}
.band-deep .case:hover b {
  color: var(--gold);
}
.band-deep .more {
  display: inline-block;
  margin-top: 24px;
  font-size: var(--s-meta);
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
}
/* The side column is short and the case list is long, so the lower left of
     this band would otherwise be an empty field. The mark sits there instead --
     opposite corner and smaller than the one on the navy band above, so the two
     bands do not read as the same band twice. Lifted to --deep-tint because
     --deep-mark was mixed for the darker cover navy and vanishes on this one. */
.band-deep .brand-mark {
  right: auto;
  left: var(--gutter);
  bottom: -78px;
  width: clamp(160px, 20vw, 290px);
  fill: var(--deep-tint);
  opacity: 0.3;
}
@media (max-width: 860px) {
  .band-deep .brand-mark {
    display: none;
  }
}
.glow1,
.glow2 {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.glow1 {
  right: -170px;
  bottom: -260px;
  width: 760px;
  height: 760px;
  background: var(--deep-mid);
  opacity: 0.5;
}
.glow2 {
  right: -40px;
  bottom: -170px;
  width: 490px;
  height: 490px;
  background: var(--deep-tint);
  opacity: 0.3;
}
.js .glow1 {
  animation: drift1 26s ease-in-out infinite;
}
.js .glow2 {
  animation: drift2 19s ease-in-out infinite;
}
@keyframes drift1 {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: translate3d(-26px, -18px, 0) scale(1.05);
  }
}
@keyframes drift2 {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: translate3d(22px, -26px, 0) scale(0.94);
  }
}
.brand-mark {
  position: absolute;
  right: 6%;
  bottom: -50px;
  width: clamp(220px, 27vw, 380px);
  fill: var(--deep-mark);
  pointer-events: none;
}
.deepband h2 {
  color: #fff;
  font-size: var(--s-mid);
  line-height: 1.34;
  margin-bottom: clamp(26px, 3.4vw, 40px);
  max-width: 24ch;
}
.deepband .side p {
  color: var(--on-deep-mu);
}
.steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
}
.steps div {
  display: flex;
  gap: 28px;
  align-items: baseline;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.steps div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
/* Base = light surface. The dark values below are scoped to .deepband,
     because .steps was written only ever having lived inside it: on --paper,
     --on-deep (#DCE4EC) and --on-deep-mu (#7E97B3) are invisible. The
     component carried an undeclared dependency on its own background. */
.steps dt {
  flex: none;
  width: 92px;
  color: var(--ink);
  font-weight: 600;
  font-size: var(--s-body);
}
.steps dd {
  margin: 0;
  color: var(--body);
  font-size: var(--s-body);
  line-height: 1.7;
}
.deepband .steps div,
.band-deep .steps div {
  border-bottom-color: var(--deep-mid);
}
.deepband .steps dt,
.band-deep .steps dt {
  color: var(--on-deep-mu);
  font-weight: 400;
}
.deepband .steps div:last-child dt,
.band-deep .steps div:last-child dt {
  color: var(--gold);
}
.deepband .steps dd,
.band-deep .steps dd {
  color: var(--on-deep);
}
.js .in .steps div {
  animation: arrive 0.6s var(--ease) both;
  animation-delay: var(--d, 0s);
}
@media (max-width: 560px) {
  .steps div {
    flex-direction: column;
    gap: 4px;
  }
  .steps dt {
    width: auto;
  }
}

/* Floating cards */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cardgap);
}
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: clamp(28px, 3vw, 40px);
  box-shadow:
    0 1px 2px rgba(23, 36, 46, 0.05),
    0 8px 24px -14px rgba(23, 36, 46, 0.28);
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
  text-decoration: none;
  display: block;
}
a.card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 2px 4px rgba(23, 36, 46, 0.06),
    0 22px 46px -18px rgba(23, 36, 46, 0.4);
}
.card b {
  display: block;
  font-size: var(--s-lead);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: 14px;
}
.card p {
  margin: 0;
  font-size: var(--s-body);
  line-height: 1.7;
  color: var(--body);
}
.js .in .card {
  animation: arrive 0.6s var(--ease) both;
  animation-delay: var(--d, 0s);
}
/* Investment Planning is not a fifth problem. Dave: "investment planning is
     correct across the full, across like all of it" (2 Oct), so it spans the
     row under the four rather than taking a box beside them. */
.card.wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(22px, 3vw, 48px);
  align-items: start;
  border-top: 2px solid var(--gold);
}
.card.wide b {
  margin-bottom: 0;
}
.card em {
  display: block;
  font-style: normal;
  font-size: var(--s-meta);
  color: var(--muted);
  margin-bottom: 8px;
}
.card.wide em {
  color: var(--gold);
}
/* Four across, not two by two. At half the width the cards stop competing
     with the section around them, and four in a row states the count without
     the heading having to. Everything inside steps down a size to match. */
.cards.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
/* padding: 0 here is for the four picture cards, whose image bleeds to the
     edge and whose text lives in .body. Investment Planning carries no image,
     so it keeps its own padding -- without this its first line is clipped by
     the card's top border. */
.cards.four .card {
  padding: 0;
  overflow: hidden;
}
.cards.four .card .body {
  padding: clamp(18px, 1.8vw, 24px);
}
.cards.four .card.wide {
  padding: clamp(26px, 2.8vw, 34px);
}
.cards.four .card.wide p {
  font-size: var(--s-body);
  line-height: 1.7;
  margin-top: 0;
  max-width: 62ch;
}
.cards.four .card.wide b {
  font-size: var(--s-lead);
}
.cards.four .card em {
  margin-bottom: 7px;
}
.cards.four .card b {
  font-size: var(--s-body);
  letter-spacing: -0.012em;
  line-height: 1.3;
  margin-bottom: 0;
}
.cards.four .card p {
  font-size: var(--s-meta);
  line-height: 1.6;
  margin-top: 11px;
}
/* Four across only works at full width. Inside the right-hand column of a
     .row there is about 790px, which gives each card 180px and wraps every
     line to three words -- so a four-card set in a column goes two by two. */
.cards.four.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Five cards. Five columns would be 170px each; four leaves a single card
     stranded on its own row. Three gives each card the same width as the
     offering cards on the home page, and the full-width card below closes
     the one empty cell. */
.cards.four.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .cards.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .cards.four {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* The illustrations are 960x480 on a warm ground a shade below the page's
     paper, so they bleed to the card's edges and read as a panel rather than
     as a picture pasted onto white. aspect-ratio holds the row even before
     they load, so nothing jumps. */
.cards.four .card figure {
  margin: 0;
  background: var(--sand);
}
.cards.four .card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
}
@media (max-width: 700px) {
  .cards.four {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 860px) {
  .card.wide {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}
@media (max-width: 860px) {
  .cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Case rows */
.case {
  display: block;
  padding-block: 30px;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  position: relative;
  transition: padding-left 0.4s var(--ease);
}
.case:last-of-type {
  border-bottom: 1px solid var(--rule);
}
.case::before {
  content: "";
  position: absolute;
  left: 0;
  top: 30px;
  width: 2px;
  height: 0;
  background: var(--gold);
  transition: height 0.4s var(--ease);
}
.case:hover {
  padding-left: 22px;
}
.case:hover::before {
  height: calc(100% - 60px);
}
.case em {
  display: block;
  font-style: normal;
  font-size: var(--s-meta);
  color: var(--muted);
  margin-bottom: 10px;
}
.case b {
  display: block;
  font-size: var(--s-lead);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: 10px;
  transition: color 0.3s var(--ease);
}
.case span {
  display: block;
  color: var(--body);
  max-width: 62ch;
}
.case:hover b {
  color: var(--deep-tint);
}

.after {
  margin-top: 26px;
  font-size: var(--s-body);
}

/* Editorial marker, for the mockup only. Renamed to Early Issue Detection on
     2 October: the corpus showed the work happens on healthy projects at a
     design gate, so "forensics" was selling a rescue job. Four commercial
     fields are still Dave's. Delete this rule and the span when he signs off. */
.draft {
  display: inline-block;
  margin-bottom: 20px;
  padding: 7px 14px;
  border: 1px dashed var(--gold);
  font-size: var(--s-meta);
  color: var(--gold);
}

/* Early Issue Detection: the proof, set as a short record rather than a stat row */
.proof {
  margin-top: var(--cardgap);
  background: var(--card);
  border-radius: var(--radius);
  border-top: 2px solid var(--gold);
  padding: clamp(26px, 2.8vw, 34px);
  box-shadow:
    0 1px 2px rgba(23, 36, 46, 0.05),
    0 8px 24px -14px rgba(23, 36, 46, 0.28);
}
.proof h3 {
  font-size: var(--s-meta);
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.proof p {
  margin: 0;
  font-size: var(--s-body);
  line-height: 1.75;
  color: var(--body);
  max-width: 62ch;
}
.proof b {
  font-weight: 600;
  color: var(--ink);
}

/* The two offerings, named up front */
.pair {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cardgap);
}
.pair.duo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.offer {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  background: var(--card);
  border-top: 3px solid var(--ink);
  border-radius: 2px 2px var(--radius) var(--radius);
  padding: clamp(26px, 2.8vw, 34px);
  box-shadow:
    0 1px 2px rgba(23, 36, 46, 0.05),
    0 10px 28px -16px rgba(23, 36, 46, 0.3);
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}
.offer:hover {
  transform: translateY(-6px);
  box-shadow:
    0 2px 4px rgba(23, 36, 46, 0.06),
    0 24px 48px -18px rgba(23, 36, 46, 0.42);
}
.offer b {
  display: block;
  font-size: var(--s-lead);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 8px;
}
.offer em {
  display: block;
  font-style: normal;
  font-size: var(--s-body);
  color: var(--gold);
  margin-bottom: 18px;
}
.offer p {
  margin: 0 0 20px;
  font-size: var(--s-body);
  line-height: 1.7;
  color: var(--body);
}
.offer span {
  display: block;
  font-size: var(--s-meta);
  color: var(--muted);
}
.offer:hover b {
  color: var(--deep-tint);
}
/* Each offering card says what is inside it, because the three are not
     parallel in depth: Capital Planning contains four modules, the other two
     contain a spec. Naming the contents is the only honest affordance. */
.offer .go {
  align-self: flex-start;
  font-style: normal;
  margin-top: auto;
  padding-top: 22px;
  font-size: var(--s-meta);
  color: var(--ink);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
  transition: color 0.3s var(--ease);
}
.offer:hover .go {
  color: var(--deep-tint);
}
@media (max-width: 980px) {
  .pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
}

/* Track record. Full width on purpose: eight of this page's sections were the
     same small-heading-left, content-right shape, and that repetition was most
     of why it read as assembled rather than designed.
     These are Dave's programmes, not Blue Harbour clients, and the copy says so.
     Set out as an unlabelled logo wall they would read as clients, which would
     be false. */
.record {
  border-top: 1px solid var(--rule);
  padding-top: clamp(26px, 3vw, 34px);
}
.record .lede {
  margin: 0;
  font-size: var(--s-lead);
  line-height: 1.55;
  color: var(--ink);
  max-width: 64ch;
}
/* The portrait sits on the RIGHT deliberately. Eight sections on this page
     are already a small label left, content right; putting it on the left would
     rebuild that shape in the one section built to break it. Right also lets
     the sentence read before the face. The source photo is black and white on a
     white ground, so it is given the page's card treatment -- the white is then
     a deliberate panel against the paper rather than a visible box edge. */
.founder {
  margin-bottom: clamp(30px, 3.6vw, 42px);
}
/* A byline rather than a column. A portrait set beside this paragraph leaves
     roughly 200px of dead space under it, because the paragraph is three lines
     and a usable portrait is not. Under the sentence it costs nothing and puts
     the face next to the name. */
.portrait {
  margin: clamp(22px, 2.6vw, 30px) 0 0;
  display: flex;
  align-items: center;
  gap: 22px;
}
.portrait img {
  display: block;
  width: clamp(96px, 12vw, 132px);
  height: auto;
  flex: none;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow:
    0 1px 2px rgba(23, 36, 46, 0.05),
    0 10px 28px -16px rgba(23, 36, 46, 0.3);
}
.portrait figcaption {
  min-width: 0;
}
.portrait b {
  display: block;
  font-size: var(--s-body);
  font-weight: 600;
  color: var(--ink);
}
.portrait span {
  display: block;
  font-size: var(--s-meta);
  line-height: 1.6;
  color: var(--muted);
}
.names {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
}
.names > div {
  min-width: 0;
}
/* two lines reserved, so the scale sits on one baseline across all five
     whether the name wraps or not */
.names b {
  display: block;
  font-size: var(--s-body);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: 7px;
  min-height: 2.7em;
}
.names span {
  display: block;
  font-size: var(--s-meta);
  line-height: 1.5;
  color: var(--muted);
}
.js .in .names > div {
  animation: arrive 0.55s var(--ease) both;
  animation-delay: var(--d, 0s);
}
.record .foot {
  margin: clamp(28px, 3.4vw, 38px) 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-size: var(--s-meta);
  color: var(--muted);
}
@media (max-width: 980px) {
  .names {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 28px;
  }
}

/* AI OS: two short spec lists side by side */
/* Two cards rather than two bare lists. These sections were a lead line, a
     paragraph and two hairline lists, which is the plainest thing on the page.
     The rules between items stay, but they are now inside a panel that says
     where one answer ends and the next begins. */
/* Uneven on purpose: the inputs are short labels and the outputs are
     sentences, so an equal split made one column wrap three times while the
     other sat half empty. */
.specs {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: var(--cardgap);
  margin-top: clamp(26px, 3vw, 36px);
  align-items: start;
}
.specs > div {
  background: var(--card);
  border-radius: var(--radius);
  padding: clamp(24px, 2.6vw, 32px);
  box-shadow:
    0 1px 2px rgba(23, 36, 46, 0.05),
    0 8px 24px -14px rgba(23, 36, 46, 0.28);
}
.specs h3 {
  font-size: var(--s-meta);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.specs ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.specs li {
  padding-block: 12px;
  border-top: 1px solid var(--rule);
  font-size: var(--s-body);
  line-height: 1.6;
}
.specs li:first-child {
  border-top: 0;
}
@media (max-width: 700px) {
  .specs {
    grid-template-columns: minmax(0, 1fr);
  }
}

.close {
  border-top: 1px solid var(--ink);
  padding-top: clamp(28px, 3.6vw, 38px);
}
.close h2 {
  font-size: var(--s-mid);
  line-height: 1.32;
  max-width: 22ch;
  margin-bottom: clamp(22px, 2.8vw, 32px);
}
.close p {
  margin: 0 0 clamp(32px, 4.4vw, 44px);
  max-width: 56ch;
}

/* Scoped to the element: .foot is also a small-print paragraph class (the
   David's-programmes line on About), and a bare .foot would paint that sand
   too. Twelve of the thirteen pages end on paper, so an unpainted footer
   separated only by a hairline relied on the last section being a CTA --
   formally unlike a footer. The homepage now ends on a five-column strip that
   mirrors the footer's own, so the surface has to do the work. */
footer.foot {
  background: var(--sand);
  border-top: 1px solid var(--rule);
}
.foot .wrap {
  padding-block: clamp(40px, 5vw, 52px) clamp(44px, 5.4vw, 56px);
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--colgap);
  align-items: start;
}
.foot .addr {
  font-size: var(--s-meta);
  line-height: 1.8;
  color: var(--cite-ink);
  margin-top: 16px;
}
.cols {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 6vw, 96px);
}
.cols nav {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.cols a {
  font-size: var(--s-meta);
  color: var(--body);
  text-decoration: none;
}
.cols a:hover {
  color: var(--deep-tint);
}
@media (max-width: 860px) {
  .foot .wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .note {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .js .plan i {
    width: var(--to, 100%) !important;
  }
}

/* ---- Interior pages ---------------------------------------------------
   Every page other than the home page opens on the cover navy, so a visitor
   always knows which of the three offerings (or which company page) they are
   standing in. The home page keeps its paper hero: it is the only page that
   is not about one thing. */
.phero {
  background: var(--deep);
  position: relative;
  overflow: hidden;
}
.phero .wrap {
  padding-block: clamp(46px, 6vw, 86px);
  position: relative;
}
/* Scoped to .phero for the same reason .steps is scoped to .deepband: these
   colours are only legible on the navy, and an unscoped .crumbs on a light
   page would be invisible. Latent, not actual -- but the next person to reach
   for a breadcrumb on a light page would have found it the hard way. */
.crumbs {
  font-size: var(--s-meta);
  margin-bottom: 22px;
  color: var(--cite-ink);
}
.crumbs a {
  color: var(--cite-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--cite-rule);
}
.phero .crumbs {
  color: var(--on-deep-mu);
}
.phero .crumbs a {
  color: var(--on-deep-mu);
  border-bottom: 1px solid rgba(126, 151, 179, 0.45);
}
.phero .crumbs a:hover {
  color: #fff;
}
.phero h1 {
  color: #fff;
  font-size: var(--s-mid);
  line-height: 1.2;
  letter-spacing: -0.028em;
  max-width: 22ch;
  margin: 0 0 20px;
}
.phero .lede {
  color: var(--on-deep);
  max-width: 58ch;
  margin: 0;
  font-size: var(--s-lead);
  line-height: 1.6;
}
.phero .sub {
  color: var(--on-deep-mu);
  max-width: 62ch;
  margin: 18px 0 0;
  line-height: 1.75;
}

/* Numbered phases, for How we work */
.phase {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 44px);
  padding-block: 28px;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.phase:last-of-type {
  border-bottom: 1px solid var(--rule);
}
.phase .n {
  font-size: var(--s-body);
  font-weight: 600;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.phase h3 {
  font-size: var(--s-lead);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.phase p {
  margin: 0;
  line-height: 1.7;
}
.phase .gate {
  font-size: var(--s-meta);
  line-height: 1.65;
  color: var(--muted);
}
.phase .gate b {
  display: block;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 5px;
}
@media (max-width: 860px) {
  .phase {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .phase .gate {
    grid-column: 2;
    padding-top: 4px;
  }
}

/* A plain numbered list of commitments, for ownership and data terms */
.terms {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: t;
}
.terms li {
  counter-increment: t;
  position: relative;
  padding: 16px 0 16px 42px;
  border-top: 1px solid var(--rule);
  line-height: 1.7;
}
.terms li:last-child {
  border-bottom: 1px solid var(--rule);
}
.terms li::before {
  content: counter(t, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 16px;
  font-size: var(--s-meta);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* ---- Page diagrams ----------------------------------------------------
   Generated in the same hand as the four problem illustrations, on the same
   ground, so they bleed to their own edges rather than sitting inside a
   panel. The caption does the explaining; there is no text in the artwork. */
.dia {
  margin: 0;
}
.dia img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  border-radius: var(--radius);
  background: var(--sand);
  box-shadow:
    0 1px 2px rgba(23, 36, 46, 0.05),
    0 10px 28px -16px rgba(23, 36, 46, 0.3);
}
.dia.wide img {
  aspect-ratio: 5 / 2;
}
.dia figcaption {
  margin-top: clamp(16px, 2vw, 22px);
  font-size: var(--s-meta);
  line-height: 1.7;
  color: var(--muted);
  max-width: 64ch;
}

/* ---- Motion -----------------------------------------------------------
   `arrive` is the page's only entrance: a short rise out of nothing. Five
   rules referenced it long before it existed, which is why the cards, the
   figures, the navy-band steps and the track record never moved. Everything
   staggers off --d, which site.js assigns by position. */
@keyframes arrive {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.js .in .pair .offer,
.js .in .phase,
.js .in .case,
.js .in .specs > div {
  animation: arrive 0.6s var(--ease) both;
  animation-delay: var(--d, 0s);
}
.js .in .terms li {
  animation: arrive 0.5s var(--ease) both;
  animation-delay: var(--d, 0s);
}
.js .in .dia {
  animation: arrive 0.75s var(--ease) both;
}
.js .in .proof {
  animation: arrive 0.7s var(--ease) both;
  animation-delay: 0.12s;
}

/* Interior pages open on the navy, so the hero itself arrives rather than
   simply being there when the page paints. */
.js .phero .crumbs,
.js .phero h1,
.js .phero .lede,
.js .phero .sub {
  animation: arrive 0.7s var(--ease) both;
}
.js .phero .crumbs {
  animation-delay: 0.04s;
}
.js .phero h1 {
  animation-delay: 0.12s;
}
.js .phero .lede {
  animation-delay: 0.22s;
}
.js .phero .sub {
  animation-delay: 0.32s;
}

/* ---- Spec pairs -------------------------------------------------------
   These were two identical boxes of hairline rows, which is the plainest
   shape on the site. They are not the same kind of thing, so they no longer
   look the same: what goes in is a list of systems, what comes out is an
   ordered list of answers. */
.specs h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.specs h3 i {
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rule);
  font-variant-numeric: tabular-nums;
}
/* The inputs are rows with a small panel mark rather than pills. Pills read
   as filter buttons, and a ruled grid reads as a spreadsheet, which is the
   last thing the AI OS page should look like. The mark is the same rectangle
   the illustrations are built from, so the list and the artwork agree. */
.sysrows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sysrows li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid var(--rule);
  font-size: var(--s-body);
  line-height: 1.4;
  color: var(--ink);
}
.sysrows li:first-child {
  border-top: 0;
  padding-top: 4px;
}
.sysrows li:last-child {
  padding-bottom: 0;
}
.sysrows svg {
  flex: none;
}
.js .in .sysrows li {
  animation: arrive 0.5s var(--ease) both;
  animation-delay: var(--d, 0s);
}
.specs .outs {
  margin-top: 2px;
}
.specs .outs li {
  padding-left: 38px;
}
.specs .outs li:first-child {
  border-top: 0;
  padding-top: 6px;
}
.specs .outs li:first-child::before {
  top: 6px;
}
.specs .outs li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* ---- Booking -----------------------------------------------------------
   The calendar is embedded rather than linked so a visitor finishes on the
   site instead of being handed to Google mid-decision. The frame can be
   refused by a sandbox or blocked by a privacy extension, so the direct link
   sits underneath it and the page still works when the frame does not. */
.booker {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(23, 36, 46, 0.05),
    0 10px 28px -16px rgba(23, 36, 46, 0.3);
}
.booker iframe {
  display: block;
  width: 100%;
  height: 700px;
  border: 0;
}
.booker .fallback {
  padding: clamp(22px, 3vw, 32px);
  text-align: center;
}
.booker .fallback p {
  margin: 0 0 18px;
  color: var(--body);
}
@media (max-width: 700px) {
  .booker iframe {
    height: 820px;
  }
}
.bookfoot {
  margin: clamp(18px, 2.2vw, 26px) 0 0;
  font-size: var(--s-meta);
  /* This is one of only two pieces of text below the hero, and it carries the
     fallback link for anyone whose calendar did not load -- so it is exactly
     the line that has to be readable. --cite-ink is the darkest of the two
     small-text tokens, which is why it is set here rather than --muted. */
  color: var(--cite-ink);
}

/* Two bylines side by side. Pulled out of the .founder grid, because that
   layout exists to sit one portrait beside a paragraph and there are two now. */
.people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  margin: clamp(28px, 3.4vw, 40px) 0 clamp(30px, 3.6vw, 44px);
}
.people .portrait {
  margin: 0;
  align-items: flex-start;
}
@media (max-width: 700px) {
  .people {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
}

/* ---- Evidence ----------------------------------------------------------
   Namespaced .ev, NOT .fig: .fig/.figs above is a four-column card grid with a
   hover lift and b/i/span children, used on the interior pages. Redefining it
   would break them. */
.ev {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ev b {
  font-size: var(--s-fig);
  line-height: 1.05;
  letter-spacing: var(--fig-track);
  font-feature-settings: var(--fig-feat);
  font-weight: 600;
  color: var(--ink);
}
.ev.lead b {
  color: var(--ev-ink);
}
.ev em {
  font-size: var(--s-meta);
  font-style: normal;
  color: var(--cite-ink);
  line-height: 1.5;
  max-width: 34ch;
}
.ev em a {
  color: inherit;
  border-bottom: 1px solid var(--cite-rule);
  text-decoration: none;
}
.ev em a:hover {
  border-bottom-color: var(--ev-ink);
  color: var(--ink);
}
.evs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--colgap) var(--cardgap);
  margin-block: clamp(26px, 3vw, 38px);
}

/* A count inside running prose, which is what --s-fig-sm is for. Without these
   the token is defined and never spent, and the tokens check fails. */
.ev.sm b {
  font-size: var(--s-fig-sm);
}
.count {
  font-size: var(--s-fig-sm);
  font-weight: 600;
  color: var(--ev-ink);
  letter-spacing: var(--fig-track);
  font-feature-settings: var(--fig-feat);
}

.cite {
  font-size: var(--s-cite);
  color: var(--cite-ink);
  line-height: 1.6;
  border-top: 1px solid var(--cite-rule);
  padding-top: 10px;
  margin-top: 18px;
  max-width: 60ch;
}

.stakes {
  background: var(--sand);
  padding: clamp(22px, 3vw, 34px);
  border-left: 2px solid var(--ev-ink);
}
.stakes h3 {
  font-size: var(--s-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin: 0 0 10px;
}
.stakes p {
  margin: 0;
  max-width: 62ch;
}

.ord {
  font-size: var(--s-meta);
  font-feature-settings: var(--fig-feat);
  color: var(--cite-ink);
  letter-spacing: 0.06em;
  margin-right: 10px;
}

/* .phase .n and .terms li::before already render ordinals, both in --gold.
   Gold is a product-level accent; this is a parent Blue Harbour surface. */
.phase .n,
.terms li::before {
  color: var(--cite-ink);
}

/* .row is 300px + fluid and overflows below ~640px. The evidence grid
   collapses with it rather than leaving a count stranded beside a wrapped
   label. */
@media (max-width: 640px) {
  .row {
    grid-template-columns: minmax(0, 1fr);
  }
  .evs {
    grid-template-columns: minmax(0, 1fr);
  }
  .ev em {
    max-width: none;
  }
}

/* .steps labels are single words on the navy band ("Approved", "Loaded") and
   phrases everywhere else ("Bid the scope you cannot staff"). 92px shreds a
   phrase into five lines, so the narrow column is scoped to the band that
   actually has short labels rather than being the default. */
.steps dt {
  width: 210px;
}
.deepband .steps dt,
.band-deep .steps dt {
  width: 92px;
}
@media (max-width: 760px) {
  .steps dt {
    width: auto;
  }
}
@media (max-width: 760px) {
  [data-slot="anatomy"] .steps dt,
  [data-slot="how"] .steps dt {
    width: auto;
  }
}

/* ---- The scale ladder --------------------------------------------------
   The homepage spine (spec 3.0 / 5.2). One row per scale, ascending. The
   evidence count sits on the rung rather than in a separate block, so the
   page grows as it is read and no figure is stated twice. */
.rungs {
  margin: 0;
}
.rung {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  gap: clamp(18px, 3vw, 44px);
  align-items: baseline;
  padding-block: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--rule);
}
.rung:last-child {
  border-bottom: 1px solid var(--rule);
}
.rung .scale {
  font-size: var(--s-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cite-ink);
}
.rung .mod {
  text-decoration: none;
  display: block;
}
.rung .mod b {
  display: block;
  font-size: var(--s-mid);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.022em;
  line-height: 1.15;
  margin-bottom: 10px;
}
.rung .mod p {
  margin: 0 0 8px;
  max-width: 54ch;
  line-height: 1.65;
}
.rung .mod span {
  font-size: var(--s-meta);
  color: var(--cite-ink);
}
.rung .mod:hover b {
  color: var(--ev-ink);
}
.rung .mod:hover .go {
  border-bottom-color: var(--ev-ink);
}
.rung .num {
  text-align: right;
  white-space: nowrap;
}
.rung .num b {
  display: block;
  font-size: var(--s-fig-sm);
  font-weight: 600;
  color: var(--ev-ink);
  letter-spacing: var(--fig-track);
  font-feature-settings: var(--fig-feat);
  line-height: 1.1;
}
.rung .num em {
  display: block;
  font-size: var(--s-meta);
  font-style: normal;
  color: var(--cite-ink);
  margin-top: 4px;
  max-width: 18ch;
  white-space: normal;
}
@media (max-width: 860px) {
  .rung {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .rung .num {
    text-align: left;
  }
  .rung .num em {
    max-width: none;
  }
}

/* ---- Services disclosure in the nav ------------------------------------
   <details>/<summary>, so it works with JavaScript disabled and is keyboard
   reachable. The scale labels are the point: the menu teaches the organising
   idea every time it opens. */
.menu {
  position: relative;
}
.menu > summary {
  list-style: none;
  cursor: pointer;
  font-size: var(--s-body);
  color: var(--body);
  position: relative;
  /* room for the caret */
  padding-right: 15px;
  transition: color 0.2s var(--ease);
}
/* Nothing used to say this was a menu: a gold underline on hover is what
   every other nav link does too, so the only way to discover the five
   services was to click and find out. The caret is always visible, so the
   affordance is there before the pointer arrives and with JS off. */
.menu > summary::before {
  content: "";
  position: absolute;
  right: 1px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.5;
  transition:
    transform 0.25s var(--ease),
    opacity 0.2s var(--ease);
}
.menu:hover > summary,
.menu[open] > summary {
  color: var(--ink);
}
.menu:hover > summary::before {
  opacity: 1;
}
.menu[open] > summary::before {
  transform: rotate(-135deg);
  margin-top: -2px;
  opacity: 1;
}
.menu > summary::-webkit-details-marker {
  display: none;
}
.menu > summary::after {
  content: "";
  position: absolute;
  left: 0;
  right: 15px;
  bottom: -4px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.menu:hover > summary::after,
.menu[open] > summary::after {
  transform: scaleX(1);
}
.menu .sheet {
  position: absolute;
  z-index: 20;
  top: calc(100% + 14px);
  left: -20px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 10px;
  min-width: 390px;
  box-shadow:
    0 2px 4px rgba(23, 36, 46, 0.06),
    0 24px 48px -20px rgba(23, 36, 46, 0.34);
}
/* The dropdown mirrors the five-scales section: the SCALE is the primary link
   text and the offering is secondary beneath it, in the same order, with the
   same four-pip meter scaled down, so the menu and the section read as one
   system rather than two lists of the same five things.
   It stays a <details>: the mock opens on hover with a button and needs
   JavaScript for Escape and outside-click, and this site has to work with
   JavaScript off. <details> gives disclosure, keyboard access and a closed
   initial state for nothing. */
.menu .sheet .srow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 11px 12px;
  border-radius: 10px;
  text-decoration: none;
}
.menu .sheet .srow:hover {
  background: var(--paper);
}
.menu .sheet .ss {
  display: block;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
}
.menu .sheet .so {
  display: block;
  margin-top: 2px;
  font-size: var(--s-body);
  line-height: 1.4;
  color: var(--cite-ink);
}
.menu .sheet .srow:hover .so {
  color: var(--body);
}
.menu .sheet .sintro {
  margin: 8px 12px 10px;
  font-size: var(--s-meta);
  line-height: 1.5;
  color: var(--cite-ink);
}
.menu .sheet .sturn {
  margin: 8px 12px 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: var(--s-meta);
  color: var(--cite-ink);
}
.menu .sheet .sfoot {
  margin: 10px 12px 6px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.menu .sheet .sfoot a {
  font-size: var(--s-body);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}
/* The section's meter at menu size. */
.meter.sm {
  width: 56px;
  gap: 3px;
}
.meter.sm span {
  height: 3px;
}
@media (max-width: 860px) {
  .menu .sheet {
    position: static;
    min-width: 0;
    box-shadow: none;
    margin-top: 10px;
  }
}

/* ---- Partner model -----------------------------------------------------
   THEM + US = TOGETHER. The operators are content, not decoration: they are
   what makes it read as a combination rather than three lists. */
.combine {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: clamp(14px, 2vw, 26px);
  align-items: stretch;
  margin-block: clamp(26px, 3vw, 38px);
}
.combine .op {
  align-self: center;
  font-size: var(--s-mid);
  font-weight: 600;
  color: var(--cite-ink);
}
.combine .part {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(18px, 2.2vw, 26px);
}
.combine .part.sum {
  background: var(--sand);
  border-color: transparent;
}
.combine .part em {
  display: block;
  font-style: normal;
  font-size: var(--s-meta);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cite-ink);
  margin-bottom: 10px;
}
.combine .part b {
  display: block;
  font-size: var(--s-lead);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 14px;
  letter-spacing: -0.015em;
}
.combine .part ul {
  margin: 0;
  padding-left: 18px;
}
.combine .part li {
  font-size: var(--s-meta);
  line-height: 1.7;
  color: var(--body);
  margin-bottom: 7px;
}
@media (max-width: 900px) {
  .combine {
    grid-template-columns: minmax(0, 1fr);
  }
  .combine .op {
    justify-self: start;
  }
}

/* ---- Footer: services by scale -----------------------------------------
   Five across, mirroring the homepage ladder, so the spine is restated at the
   foot of every page. Company and Legal sit beneath a rule.

   .foot .wrap above is a 300px + fluid grid built for the old two-block
   footer. This structure stacks instead, so the grid is reset here rather
   than edited above -- the interior pages still use that rule elsewhere. */
.foot .wrap {
  display: block;
}
.foot .svc {
  padding-bottom: clamp(30px, 3.6vw, 44px);
}
.foot .svc h2 {
  font-size: var(--s-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cite-ink);
  font-weight: 400;
  margin: 0 0 clamp(18px, 2.2vw, 26px);
}
.scales {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
}
.scales a {
  text-decoration: none;
  display: block;
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}
.scales i {
  display: block;
  font-style: normal;
  font-size: var(--s-meta);
  color: var(--cite-ink);
  line-height: 1.4;
  margin-bottom: 8px;
}
.scales b {
  display: block;
  font-size: var(--s-body);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.scales a:hover b {
  color: var(--ev-ink);
}
.scales a:hover {
  border-top-color: var(--ev-ink);
}
/* Three columns so the navs sit in the middle of the footer rather than hard
   right. space-between with two children could only push them to the edge,
   and centring them by hand would move whenever the brand block changed
   width. The third column is deliberately empty: it is what makes the auto
   column the centre of the footer and not the centre of what is left over. */
.foot .base {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(26px, 5vw, 80px);
  align-items: start;
  padding-top: clamp(30px, 3.6vw, 44px);
  border-top: 1px solid var(--rule);
}
@media (max-width: 860px) {
  .foot .base {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 860px) {
  .scales {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .scales {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- The blueprint plate -----------------------------------------------
   Replaces the harbour film in the band between the claim and the ladder.
   Same five-scale argument the ladder makes in words, so it earns the
   position rather than interrupting it.

   .shot (the film) crops hard with object-fit: cover. This composition runs
   2.5:1 with all five scales in a horizontal band, so a cover crop keeps the
   content and loses mostly blank paper -- but only while the viewport stays
   wide. Below 720px the crop would eat the bolt and the map, which are the
   two ends of the argument, so there it shows whole. */
.plate {
  display: block;
  width: 100%;
  height: clamp(240px, 32vw, 500px);
  object-fit: cover;
  object-position: center;
  background: var(--paper);
}
@media (max-width: 720px) {
  .plate {
    height: auto;
  }
}

/* ---- The plate, drifting -----------------------------------------------
   A very slow drift and settle rather than a pan: the plate is 1983px across
   five scales, so there is no room to travel far without upscaling past 1:1.
   Ambient, not a slideshow -- it must not compete with the ladder below it.

   Annotations are real text, not baked pixels, so they stay selectable and
   translatable and can be reworded without re-rendering anything. They carry
   drawing scales, which is the honest annotation for this image: 1:5 up to
   1:5,000,000 says "at every scale" in the drawing's own language.

   No JavaScript: CSS keyframes only, and reduced motion stops all of it. */
.stage {
  position: relative;
  overflow: hidden;
  background: #f8f8ef;
}
.stage img.plate {
  animation: drift 54s var(--ease) infinite alternate;
  transform-origin: 50% 50%;
}
/* The still plate is cropped to a band by .plate's clamped height and
   object-fit: cover. The film must not be: its scale labels are baked near the
   top of the frame, and cover was cutting about 54px off each edge at desktop
   width. Let it keep its own 5:2 aspect instead. */
.stage video.plate {
  height: auto;
  aspect-ratio: 5 / 2;
  object-fit: contain;
}

/* The scale film. Contained to the text column rather than bled to the window:
   at 1184px it stands about 493px tall, which is roughly half a page, and a
   contained plate reads as a drawing sheet on the page rather than as a hero
   image shouting at the reader. The band's own cards carry the argument, so it
   does not need the width. */
.filmband {
  margin-top: clamp(26px, 3.4vw, 46px);
  margin-bottom: clamp(26px, 3.4vw, 46px);
}
.filmband video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1944 / 808;
  border-radius: var(--radius);
  background: var(--sand);
  box-shadow:
    0 1px 2px rgba(23, 36, 46, 0.05),
    0 10px 28px -16px rgba(23, 36, 46, 0.26);
}

@keyframes drift {
  from {
    transform: scale(1.06) translateX(1.4%);
  }
  to {
    transform: scale(1) translateX(-1.4%);
  }
}

/* Each annotation is lit for about a fifth of the cycle, with a gap, so only
   one is ever reading. 11% visible, then out of the way. */

@media (prefers-reduced-motion: reduce) {
  .stage img.plate {
    animation: none;
    transform: none;
  }
}

/* Programmes strip. Quietest possible marquee: one slow linear drift, no JS.
   Two identical tracks sit side by side inside a flex row; the row translates
   by exactly -50% so the loop has no jump. Reduced motion: static, wrapped. */
.progs {
  border-block: 1px solid var(--rule);
  padding-block: 18px;
  overflow: hidden;
}
.progs-lead {
  margin: 0 auto 12px;
  font-size: var(--s-cite);
  color: var(--cite-ink);
}
.progs-lead em {
  font-style: normal;
}
.progs-view {
  display: flex;
  width: max-content;
  animation: progs-drift 90s linear infinite;
}
.progs-view:hover {
  animation-play-state: paused;
}
.progs-track {
  display: flex;
  flex: none;
  min-width: 100vw;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  list-style: none;
}
.progs-track li {
  flex: none;
  padding-right: clamp(40px, 5vw, 72px);
  white-space: nowrap;
}
.progs-track b {
  font-weight: 600;
  color: var(--ev-ink);
  font-size: var(--s-body);
}
.progs-track span {
  margin-left: 10px;
  font-size: var(--s-cite);
  color: var(--cite-ink);
}
@keyframes progs-drift {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .progs-view {
    animation: none;
    transform: none;
    display: block;
    width: auto;
    padding-inline: var(--gutter);
  }
  .progs-track li {
    flex: 0 1 auto;
    max-width: 100%;
    white-space: normal;
  }
  .progs-track[aria-hidden="true"] {
    display: none;
  }
  .progs-track {
    min-width: 0;
    max-width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    row-gap: 8px;
  }
}

/* ---- The five scales, restructured --------------------------------------
   The SCALE leads and the offering is demoted to a tag beneath the body, so
   the column of figures reads as one measure -- how much is read -- rather
   than five unrelated numbers. The mock this follows used --muted for the
   tags and captions; these sit on --sand, the darkest light surface, where
   --cite-ink's 4.71:1 leaves more headroom than --muted's 4.57:1. The
   offering name stays a link: demoting
   it to plain text would have removed five routes to the capability pages. */
.ladder .lintro {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(20px, 2.6vw, 32px);
  padding-bottom: clamp(26px, 3vw, 40px);
  border-bottom: 1px solid var(--rule);
}
.ladder .ltitle {
  margin: 0;
  font-size: var(--s-mid);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--ink);
  max-width: 18ch;
}
.ladder .llede {
  margin: 0;
  font-size: var(--s-body);
  line-height: 1.55;
  color: var(--body);
  max-width: 38em;
}
.lrow {
  display: grid;
  grid-template-columns: 3fr 6fr 3fr;
  gap: clamp(20px, 2.6vw, 32px);
  padding: clamp(30px, 3.4vw, 44px) 0 clamp(26px, 3vw, 40px);
  border-bottom: 1px solid var(--rule);
}
/* Subordinate to .ltitle now, not competing with it: these are the five
   scales under the heading, not five headings. */
.lname {
  margin: 0 0 14px;
  font-size: var(--s-lead);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: var(--ink);
}
/* Four pips, filling one to four, so the progression is visible at a glance
   rather than inferred from the wording. */
.meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  width: 120px;
}
.meter span {
  height: 4px;
  background: var(--rule);
}
.meter span.on {
  background: var(--ev-ink);
}
.lread {
  margin: 0 0 12px;
  font-size: clamp(19px, 1.9vw, 22px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-width: 30em;
}
.lbody {
  margin: 0 0 18px;
  font-size: var(--s-body);
  line-height: 1.65;
  color: var(--body);
  max-width: 36em;
}
.ltag {
  margin: 0;
  font-size: var(--s-meta);
  line-height: 1.5;
  color: var(--cite-ink);
}
.ltag a {
  color: var(--ink);
  font-weight: 600;
  margin-right: 10px;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.ltag a:hover {
  text-decoration-color: var(--ev-ink);
}
.lfig {
  text-align: right;
}
.lfig b {
  display: block;
  font-size: var(--s-fig-sm);
  font-weight: 700;
  color: var(--ev-ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-bottom: 8px;
}
.lfig em {
  display: block;
  font-style: normal;
  font-size: var(--s-meta);
  line-height: 1.6;
  color: var(--cite-ink);
  max-width: 15em;
  margin-left: auto;
}
/* The firm is not a fifth rung on the same ladder, so it gets a heavier rule
   and a lead-in rather than a meter. */
.turn {
  margin-top: clamp(34px, 4vw, 56px);
  padding-top: 20px;
  border-top: 2px solid var(--ink);
}
.tlead {
  margin: 0;
  font-size: var(--s-body);
  font-weight: 600;
  line-height: 1.5;
}
.turn .lrow {
  border-bottom: none;
  padding-top: 28px;
}
@media (max-width: 860px) {
  .ladder .lintro {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .lrow {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .lfig {
    text-align: left;
  }
  .lfig em {
    margin-left: 0;
  }
}

/* ---- Partners page ------------------------------------------------------
   The equation that was three cards is now three prose rows, because the
   cards gave "You bring / We bring / The client gets" equal visual weight
   when the point is that they compose. The operators stay content, not
   decoration: they are what makes it read as a combination. */
.keyline {
  margin: clamp(22px, 2.6vw, 32px) auto 0;
  max-width: 24em;
  font-size: var(--s-mid);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--ink);
}
.hnote {
  margin: 18px 0 0;
  font-size: var(--s-meta);
  color: var(--cite-ink);
}
/* The promoted key line needs air before the buttons: at the hero's type size
   the two were landing about 23px apart and reading as one block. */
.keyline + .acts {
  margin-top: clamp(30px, 3.4vw, 48px);
}
.lede {
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  font-size: var(--s-lead);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 40ch;
}
.callout {
  border-left: 3px solid var(--ev-ink);
  padding-left: clamp(18px, 2.4vw, 32px);
}
.eq {
  margin: 12px 0 0;
  border-top: 1px solid var(--rule);
}
.eqrow {
  display: grid;
  grid-template-columns: 40px 160px minmax(0, 1fr);
  gap: 16px;
  padding: clamp(20px, 2.4vw, 26px) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.eqrow .op {
  font-size: var(--s-mid);
  font-weight: 500;
  color: var(--gold);
  line-height: 1;
}
.eqrow dt {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.eqrow dd {
  margin: 0;
}
.eqrow .what2 {
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
}
.eqrow.sum .what2 {
  font-weight: 600;
}
.eqrow .det {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--body);
}
.subhead {
  margin: clamp(36px, 4vw, 56px) 0 16px;
  font-size: var(--s-lead);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.fineprint {
  margin-top: clamp(20px, 2.4vw, 28px);
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: var(--s-meta);
  line-height: 1.6;
  color: var(--cite-ink);
  max-width: 40em;
}
.unlocks {
  margin-top: 8px;
  border-top: 1px solid var(--rule);
}
.unlock {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(18px, 2.4vw, 32px);
  padding: clamp(20px, 2.4vw, 26px) 0;
  border-bottom: 1px solid var(--rule);
}
.unlock h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
.unlock p {
  margin: 0;
  font-size: var(--s-body);
  line-height: 1.7;
  color: var(--body);
}
.closeline {
  margin-top: clamp(24px, 3vw, 32px);
  font-size: var(--s-lead);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 34ch;
}
@media (max-width: 860px) {
  .eqrow {
    grid-template-columns: 28px minmax(0, 1fr);
  }
  .eqrow dd {
    grid-column: 2;
  }
  .unlock {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

.scales a.inward {
  border-top-color: var(--ink);
}

/* ---- How we work --------------------------------------------------------
   .proof was already taken by the Early Issue Detection card, so the headline
   figure here is .figband. */
.phero .plede {
  margin: 0;
  font-size: var(--s-lead);
  line-height: 1.6;
  max-width: 56ch;
  color: var(--on-deep);
}
.phero .decide {
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  padding-left: 18px;
  border-left: 3px solid var(--gold);
  font-weight: 600;
  font-size: var(--s-lead);
  color: var(--on-deep);
}
.phero .acts {
  margin-top: clamp(28px, 3.4vw, 44px);
}
.figband {
  padding-block: clamp(48px, 6vw, 76px);
}
.figband .bigfig {
  margin: 0;
  font-size: var(--s-mid);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ev-ink);
}
.figband .bigfig b {
  font-size: clamp(54px, 8vw, 90px);
  font-weight: 700;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.figband .figsub {
  margin: clamp(12px, 1.6vw, 18px) 0 0;
  font-size: var(--s-lead);
  line-height: 1.5;
  color: var(--body);
  max-width: 34ch;
}
/* Three steps that are a sequence, not a grid of equals: the rule across the
   top of each is what makes them read in order. */
.hsteps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cardgap);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: hs;
}
.hsteps li {
  border-top: 1.5px solid var(--ink);
  padding-top: 20px;
  counter-increment: hs;
}
.hsteps li::before {
  content: counter(hs, decimal-leading-zero);
  display: block;
  font-size: var(--s-meta);
  color: var(--cite-ink);
  margin-bottom: 6px;
}
.hsteps b {
  display: block;
  font-size: var(--s-body);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.hsteps p {
  margin: 0;
  font-size: var(--s-body);
  line-height: 1.65;
  color: var(--body);
}
.who {
  margin-top: clamp(34px, 4vw, 56px);
  background: var(--card);
  border-radius: var(--radius);
  border-left: 3px solid var(--gold);
  padding: clamp(24px, 3vw, 36px) clamp(26px, 3.2vw, 40px);
}
.who p {
  margin: 0;
  font-size: var(--s-lead);
  line-height: 1.55;
  max-width: 52ch;
  color: var(--ink);
}
.yours {
  margin-top: clamp(20px, 2.4vw, 28px);
  font-size: var(--s-body);
  line-height: 1.7;
  color: var(--body);
}
.yours b {
  color: var(--ink);
  font-weight: 600;
}
/* On navy, a bare <p> and the quiet link both inherit the page's dark ink and
   vanish. .deepband already turns a bare h2 white; these two do not have a
   rule, so they need one. Scoped to .deepband, which context.mjs requires of
   anything painting with an on-deep token. */
.deepband .ctap {
  margin: 0 0 clamp(26px, 3.4vw, 36px);
  font-size: var(--s-lead);
  line-height: 1.6;
  max-width: 48ch;
  color: var(--on-deep-mu);
}
.deepband .quiet.onDeep,
.phero .quiet.onDeep {
  color: var(--on-deep);
}
/* The hero's copy is left-aligned, so its actions have to be too: .acts
   centres by default, which left the buttons floating mid-band. */
.phero .acts {
  justify-content: flex-start;
}
/* A navy band needs the inverse button: the dark default would disappear. */
.btn.light {
  background: var(--paper);
  color: var(--deep);
}
.btn.light:hover {
  background: #fff;
}
@media (max-width: 860px) {
  .hsteps {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Early Issue Detection, editorial treatment. Rules and hairlines instead of
   cards, shadows and a coloured tag -- the previous pass read as cartoonish.
   Every value is an existing token; nothing new enters the palette. */
.x-quote {
  margin: 0;
  font-size: clamp(21px, 2.3vw, 27px);
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: var(--ink);
  max-width: 34ch;
}
.x-ledger {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin: clamp(32px, 4vw, 48px) 0 18px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.x-ledger div {
  padding: 16px 16px 18px 0;
}
.x-ledger div + div {
  padding-left: 16px;
  border-left: 1px solid var(--rule);
}
.x-ledger dt {
  font-size: var(--s-fig-sm);
  font-weight: 600;
  letter-spacing: var(--fig-track);
  font-feature-settings: var(--fig-feat);
  color: var(--ink);
  line-height: 1.1;
}
.x-ledger dd {
  margin: 6px 0 0;
  font-size: var(--s-meta);
  color: var(--cite-ink);
}
.x-exhibit {
  border-top: 1px solid var(--ink);
}
.x-exhibit figure {
  margin: 0;
  padding: 22px 0 20px;
  border-bottom: 1px solid var(--rule);
}
.x-exhibit figcaption {
  font-size: var(--s-meta);
  color: var(--cite-ink);
  letter-spacing: 0.01em;
}
.x-exhibit blockquote {
  margin: 10px 0 0;
  padding-left: 18px;
  border-left: 1px solid var(--gold);
  font-size: var(--s-lead);
  line-height: 1.5;
  color: var(--ink);
  max-width: 56ch;
}
.x-verdict {
  margin: 0;
  padding: 20px 0 0;
  color: var(--body);
  max-width: 62ch;
}
.x-verdict span {
  display: inline-block;
  margin-right: 12px;
  font-size: var(--s-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.x-stakes {
  margin: clamp(36px, 4.5vw, 56px) 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-size: var(--s-lead);
  line-height: 1.5;
  color: var(--body);
  max-width: 52ch;
}
.x-stakes b {
  color: var(--ink);
  font-weight: 600;
}
.x-more {
  margin-top: 24px;
}
.x-more summary {
  cursor: pointer;
  font-size: var(--s-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  list-style: none;
}
.x-more summary::-webkit-details-marker {
  display: none;
}
.x-more summary::after {
  content: "  +";
  color: var(--gold);
}
.x-more[open] summary::after {
  content: "  \2212";
}
.x-more p {
  margin: 12px 0 0;
  max-width: 62ch;
}
@media (max-width: 640px) {
  .x-ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .x-ledger div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .x-ledger div:nth-child(n + 3) {
    border-top: 1px solid var(--rule);
  }
}

/* Benchmarking: the map plate, and the range chart that shows one forecast
   against its reference class. Both lean on existing tokens; the chart's
   fills are set inline on the SVG from the same variables. */
.bm-hero {
  padding-bottom: clamp(28px, 4vw, 48px);
}
.bm-hero p.say {
  margin-bottom: 0;
}
.bm-map {
  padding-bottom: clamp(56px, 7vw, 100px);
}
.bm-map figure {
  margin: 0;
}
.bm-map img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.bm-map figcaption {
  margin-top: 14px;
  font-size: var(--s-cite);
  color: var(--cite-ink);
  text-align: center;
}
.bm-range {
  padding-bottom: 12px;
}
.bm-range svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 14px;
  overflow: visible;
}
.bm-key {
  margin: 6px 0 0;
  font-size: var(--s-meta);
  color: var(--cite-ink);
}
.bm-key i {
  display: inline-block;
  width: 14px;
  height: 10px;
  margin-right: 8px;
  background: var(--deep-mid);
  opacity: 0.18;
  vertical-align: -1px;
}

/* The accordion. Dave wants this on every capability page: the detail is
   there for anyone who wants it, without the page asking everyone to read it.
   A native <details>, so it works with no JS and opens on find-in-page. */
.acc {
  border-top: 1px solid var(--ink);
}
.acc details {
  border-bottom: 1px solid var(--rule);
}
.acc summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--s-lead);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.acc summary::-webkit-details-marker {
  display: none;
}
.acc summary::after {
  content: "+";
  flex: none;
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  color: var(--gold);
  transition: transform 0.25s var(--ease);
}
.acc details[open] summary::after {
  transform: rotate(45deg);
}
.acc summary:hover {
  color: var(--deep-mid);
}
.acc summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.acc details > :not(summary) {
  margin: 0 0 24px;
}
.acc details > p {
  max-width: 62ch;
}
/* AI OS: the before-and-after chart key, and the claim under the standfirst. */
.ai-key {
  float: right;
  color: var(--cite-ink);
}
.ai-key i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin: 0 6px 0 14px;
  vertical-align: 0;
}
.ai-key i.b {
  background: var(--cite-ink);
}
.ai-key i.a {
  background: var(--gold);
}
.ai-ledger {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ai-claim {
  margin: clamp(26px, 3.4vw, 38px) auto 0;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: var(--s-lead);
  line-height: 1.45;
  color: var(--body);
  max-width: 44ch;
}
.ai-claim b {
  color: var(--ink);
  font-weight: 600;
}
.ai-b {
  font-weight: 600;
}
.bm-hero .ai-claim {
  margin-bottom: clamp(24px, 3.5vw, 48px);
}
@media (prefers-reduced-motion: reduce) {
  .acc summary::after {
    transition: none;
  }
}
@media (max-width: 640px) {
  .ai-ledger {
    grid-template-columns: minmax(0, 1fr);
  }
  .ai-ledger div + div {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
  .ai-key {
    float: none;
    display: block;
    margin-top: 6px;
  }
  .ai-key i:first-child {
    margin-left: 0;
  }
}

/* The four-step flow: what goes in, and the three things that come back.
   Shown rather than listed, so it carries the produces slot. The chevron
   between cells is drawn on the paper background, so it reads as the join
   rather than as an icon sitting on top of the rule. */
.fl-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.fl-row li {
  position: relative;
  padding: 22px 22px 26px;
}
.fl-row li:first-child {
  padding-left: 0;
}
.fl-row li + li {
  border-left: 1px solid var(--rule);
}
.fl-row li + li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 92px;
  width: 12px;
  height: 12px;
  background: var(--paper);
  border-top: 1.5px solid var(--gold);
  border-right: 1.5px solid var(--gold);
  transform: rotate(45deg);
}
/* The step number is a ring that fills gold when its step lights. The
   strip reads as a sequence being walked rather than four static cells. */
.fl-n {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--rule);
  font-size: 12px;
  font-weight: 700;
  color: var(--cite-ink);
  font-feature-settings: var(--fig-feat);
  margin-bottom: 12px;
  transition:
    background-color 0.3s var(--ease),
    border-color 0.3s var(--ease),
    color 0.3s var(--ease);
}
/* Dimmed until lit. Without .js every step is lit from the start, so the
   strip is complete and readable with no script at all. */
.js .fl-row li {
  opacity: 0.28;
  filter: grayscale(1);
  transition:
    opacity 0.45s var(--ease),
    filter 0.45s var(--ease);
}
.js .fl-row li.lit {
  opacity: 1;
  filter: none;
}
.fl-row li.lit .fl-n {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .js .fl-row li {
    opacity: 1;
    filter: none;
    transition: none;
  }
  .fl-n {
    transition: none;
  }
}
.fl-row svg {
  display: block;
  width: 100%;
  max-width: 208px;
  height: 130px;
  margin: 0 0 18px;
  overflow: visible;
}
.fl-row p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--body);
}
.fl-row p b {
  display: block;
  margin-bottom: 4px;
  font-size: var(--s-body);
  font-weight: 600;
  color: var(--ink);
}
/* An accordion panel that opens with a line of context before its content. */
.acc .accintro {
  margin: 0 0 18px;
  font-size: var(--s-meta);
  color: var(--cite-ink);
  max-width: 62ch;
}
@media (max-width: 1000px) {
  .fl-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fl-row li:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .fl-row li:nth-child(n + 3) {
    border-top: 1px solid var(--rule);
  }
  .fl-row li:nth-child(3)::before {
    display: none;
  }
}
@media (max-width: 600px) {
  .fl-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .fl-row li {
    padding-left: 0;
    border-left: 0;
  }
  .fl-row li + li {
    border-top: 1px solid var(--rule);
  }
  .fl-row li + li::before {
    display: block;
    left: 24px;
    top: -7px;
    transform: rotate(135deg);
  }
}

/* The flow strip as its own band. .hero already carries its bottom padding
   and the strip opens on a rule, so without the pull-up the two sit a long
   way apart. */
.fl {
  padding-bottom: clamp(56px, 7vw, 100px);
}
.hero + .fl {
  margin-top: calc(-1 * clamp(16px, 3.5vw, 56px));
}
/* A panel that opens with a line of context, then a block. */
.acc details > .si-note,
.acc details > div > .si-note {
  margin: -6px 0 14px;
  font-size: var(--s-meta);
  color: var(--cite-ink);
}
.acc details > div {
  margin-bottom: 24px;
}

/* hx:start  generated by hero/hero_gen.py -- do not edit by hand */
/* ---------- Home hero: a menu that ticks down ---------- */
.hx {
  padding-block: clamp(28px, 3.5vw, 52px) clamp(48px, 6vw, 88px);
}
.hx-title {
  margin: 0 0 clamp(24px, 2.8vw, 40px);
  padding-top: clamp(20px, 2.2vw, 30px);
  border-top: 1px solid var(--ink);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--ink);
}
.hx-grid {
  display: grid;
  grid-template-columns: minmax(170px, 3fr) minmax(0, 9fr);
  gap: clamp(28px, 4vw, 64px);
}
.hx-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* A row set apart without a heading over it: a rule does the work a
   group label would otherwise repeat. */
.hx-sepli {
  margin-top: clamp(18px, 2.2vw, 28px);
  padding-top: clamp(14px, 1.8vw, 20px);
  border-top: 1px solid var(--rule);
}
.hx-grp {
  margin: clamp(18px, 2.2vw, 28px) 0 10px;
  font-size: var(--s-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cite-ink);
}
.hx-menu li:first-child .hx-grp,
.hx-menu .hx-grp:first-child {
  margin-top: 0;
}
.hx-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 12px;
  width: 100%;
  margin-left: -14px;
  padding: 11px 14px;
  border-radius: 6px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--body);
  transition:
    color 0.25s var(--ease),
    background-color 0.25s var(--ease);
}
.hx-rk {
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--rule);
  transition:
    background 0.25s var(--ease),
    transform 0.25s var(--ease);
}
.hx-rt {
  font-size: var(--s-body);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.hx-rs {
  grid-column: 2;
  font-size: var(--s-meta);
  color: var(--cite-ink);
}
.hx-row:hover {
  color: var(--ink);
}
/* The active row is a navy block, so the on-dark tokens below are scoped to
   a surface that really is dark -- which is what context.mjs checks for. */
.hx-row.hx-on {
  background: var(--deep-mid);
  color: #fff;
}
.hx-row.hx-on .hx-rk {
  background: var(--gold);
  transform: scale(1.3);
}
.hx-row.hx-on .hx-rs {
  color: var(--on-mid-mu);
}
.hx-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* the tick: a line filling down the active row over its dwell */
.hx-rl {
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: var(--gold);
}
.hx-row.hx-on .hx-rl {
  animation: hx-tick var(--dwell, 7000ms) linear forwards;
}
@keyframes hx-tick {
  from {
    height: 0;
    top: 50%;
  }
  to {
    height: 100%;
    top: 0;
  }
}
.hx-play {
  margin-top: clamp(22px, 2.6vw, 34px);
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--s-meta);
  color: var(--cite-ink);
  cursor: pointer;
}
.hx-play:hover {
  color: var(--ink);
}
.hx-stage {
  display: grid;
  min-height: clamp(340px, 36vw, 470px);
}
.hx-pane {
  grid-area: 1/1;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s var(--ease),
    visibility 0s linear 0.5s;
}
.hx-pane.hx-on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.5s var(--ease),
    visibility 0s;
}
.hx-h {
  margin: 0 0 12px;
  font-size: clamp(26px, 3.1vw, 42px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.14;
  color: var(--ink);
  max-width: 22ch;
}
.hx-sub {
  margin: 0 0 clamp(20px, 2.6vw, 32px);
  font-size: var(--s-lead);
  line-height: 1.5;
  color: var(--body);
  max-width: 46ch;
}
/* One to four panels in a row. Each keeps the caption its page gives it,
   so a three-panel row still reads as a sequence rather than three
   unexplained pictures. */
.hx-art {
  display: grid;
  gap: clamp(10px, 1.4vw, 18px);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  padding: clamp(14px, 2vw, 24px);
}
.hx-n1 {
  grid-template-columns: minmax(0, 1fr);
}
.hx-n2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hx-n3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hx-n4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.hx-art figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hx-art figure > div {
  flex: 1;
  display: flex;
  align-items: center;
}
.hx-art svg {
  display: block;
  width: 100%;
  height: auto;
}
.hx-n1 svg {
  max-height: clamp(190px, 21vw, 280px);
}
.hx-n2 svg {
  max-height: clamp(150px, 16vw, 210px);
}
.hx-n3 svg {
  max-height: clamp(120px, 13vw, 170px);
}
.hx-n4 svg {
  max-height: clamp(100px, 11vw, 145px);
}
/* The caption leads the drawing, as the step title does on the page it came
   from: a numbered ring, then the step. */
.hx-art figcaption {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 2.6em;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  text-align: left;
}
.hx-n {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--rule);
  background: var(--card);
  font-size: 12px;
  font-weight: 700;
  color: var(--cite-ink);
  transition:
    background-color 0.3s var(--ease),
    border-color 0.3s var(--ease),
    color 0.3s var(--ease);
}
/* The partners equation gives each column a heading and a what-they-bring
   line, so the heading breaks onto its own. */
.hx-art figcaption b {
  display: block;
  color: var(--ink);
  font-weight: 600;
}
/* Unlit panels are dimmed and drained of colour, so the lit one is the only
   thing in colour on the row. Only when .js is on the document: with no
   script every panel is lit and the row is complete. */
.js .hx-art figure {
  opacity: 0.28;
  filter: grayscale(1);
  transition:
    opacity 0.45s var(--ease),
    filter 0.45s var(--ease);
}
.js .hx-art figure.lit {
  opacity: 1;
  filter: none;
}
.hx-art figure.lit .hx-n {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}
.hx-op {
  font-size: 14px;
  line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
  .js .hx-art figure {
    opacity: 1;
    filter: none;
    transition: none;
  }
  .hx-n {
    transition: none;
  }
  .js .hx-svc {
    background: var(--deep);
    color: #fff;
    box-shadow: none;
    transition: none;
  }
}
.hx-n1 figcaption {
  display: none;
}
@media (max-width: 700px) {
  .hx-n3,
  .hx-n4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hx-n3 svg,
  .hx-n4 svg {
    max-height: 150px;
  }
}
/* The way through is a filled pill on its own line, not a quiet underline
   at the end of a sentence. */
.hx-svc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(18px, 2.2vw, 28px);
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--deep);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s var(--ease);
}
.hx-svc::after {
  content: "→";
}
.hx-svc:hover {
  background: var(--deep-mid);
}
.hx-svc:focus-visible {
  outline: 2px solid var(--deep-mid);
  outline-offset: 3px;
}
/* Held back rather than disabled: muted until the panels have played,
   then it fills. It stays clickable and focusable the whole time, so a
   keyboard user is never held behind an animation, and anyone who
   focuses it early gets the full treatment immediately. */
.js .hx-svc {
  background: transparent;
  color: var(--cite-ink);
  box-shadow: inset 0 0 0 1px var(--rule);
  transition:
    background-color 0.45s var(--ease),
    color 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}
.js .hx-pane.hx-ready .hx-svc,
.js .hx-svc:hover,
.js .hx-svc:focus-visible {
  background: var(--deep);
  color: #fff;
  box-shadow: none;
}
.hx-pane {
  grid-template-rows: max-content;
}
.hx-mark {
  display: block;
  width: clamp(44px, 5vw, 64px);
  height: auto;
  fill: var(--deep-mid);
  margin-top: clamp(20px, 2.4vw, 30px);
}
.hx-say .hx-mark {
  margin-inline: auto;
}

/* The closing row is a statement, not a demonstration. With no drawing to
   balance it the type carries the panel, so it sets its own scale and
   centres. The complicated version of this rebuilt all five scales here,
   which the ladder already does a screen below. */
.hx-say {
  align-content: center;
  justify-items: center;
  text-align: center;
}
.hx-say .hx-h {
  font-size: clamp(30px, 4.4vw, 58px);
  max-width: 18ch;
  margin-bottom: 18px;
}
.hx-say .hx-sub {
  max-width: 44ch;
  margin: 0;
}
@media (max-width: 860px) {
  .hx-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 4vw, 32px);
  }
  .hx-stage {
    min-height: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hx-pane,
  .hx-row,
  .hx-rk {
    transition: none;
  }
  .hx-row.hx-on .hx-rl {
    animation: none;
  }
}
/* hx:end */

/* Five scales as expandable rows */
.lacc {
  border-bottom: 1px solid var(--rule);
}
.turn .lacc {
  border-bottom: none;
}
.lacc summary {
  display: grid;
  grid-template-columns: 3fr 6fr 3fr;
  gap: clamp(20px, 2.6vw, 32px);
  align-items: center;
  padding: clamp(22px, 2.6vw, 32px) 0;
  cursor: pointer;
  list-style: none;
}
.lacc summary::-webkit-details-marker {
  display: none;
}
.lacc .lname {
  margin: 0 0 12px;
}
.lacc .lhead .lname:last-child {
  margin-bottom: 0;
}
.lacc summary .lread {
  margin: 0;
}
.lacc .lx {
  justify-self: end;
  width: 22px;
  height: 22px;
  position: relative;
}
.lacc .lx::before,
.lacc .lx::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 10px;
  height: 1.5px;
  background: var(--gold);
  transition: transform 0.25s var(--ease);
}
.lacc .lx::after {
  transform: rotate(90deg);
}
.lacc[open] .lx::before {
  transform: rotate(45deg);
}
.lacc[open] .lx::after {
  transform: rotate(135deg);
}
.lacc summary:hover .lread {
  color: var(--ev-ink);
}
.lacc summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.lopen {
  display: grid;
  grid-template-columns: 3fr 6fr 3fr;
  gap: clamp(20px, 2.6vw, 32px);
  padding: 0 0 clamp(26px, 3vw, 40px);
}
.turn .tlead + .lacc summary {
  padding-top: 22px;
}
@media (max-width: 860px) {
  .lacc summary {
    grid-template-columns: minmax(0, 1fr) 22px;
    gap: 10px 16px;
  }
  .lacc .lhead {
    grid-column: 1;
  }
  .lacc summary .lread {
    grid-column: 1;
    grid-row: 2;
  }
  .lacc .lx {
    grid-column: 2;
    grid-row: 1;
  }
  .lopen {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .lopen > div:first-child {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lacc .lx::before,
  .lacc .lx::after {
    transition: none;
  }
}

/* Partners: the three-part flow is a sequence of roles rather than steps, so
   its joins carry a + from data-op instead of the chevron the capability
   pages use. */
.pt-ledger {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.acc details > .cite,
.acc details > .closeline {
  margin-bottom: 24px;
}

@media (max-width: 640px) {
  .pt-ledger {
    grid-template-columns: minmax(0, 1fr);
  }
  .pt-ledger div + div {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
}

/* Our work: three engagements as disclosures, each led by a drawing of what
   was built. A wider row than .acc because the thumbnail sits in the
   summary, so the heading, the one-line result and the toggle have to share
   it. */
.ow {
  border-top: 1px solid var(--ink);
}
.owc {
  border-bottom: 1px solid var(--rule);
}
.owc summary {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr) 22px;
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  padding: clamp(22px, 2.6vw, 32px) 0;
  cursor: pointer;
  list-style: none;
}
.owc summary::-webkit-details-marker {
  display: none;
}
.owc summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.owc svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--card);
}
.owc svg text {
  font-family: var(--sans);
}
.ow-l {
  font-size: 10px;
  fill: var(--cite-ink);
}
.ow-g {
  font-size: 11px;
  font-weight: 600;
  fill: var(--ink);
}
.owt em {
  display: block;
  font-style: normal;
  font-size: var(--s-meta);
  color: var(--cite-ink);
  margin-bottom: 8px;
}
.owt b {
  display: block;
  font-size: clamp(19px, 1.9vw, 23px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 8px;
}
.owt span {
  display: block;
  color: var(--body);
  max-width: 52ch;
}
.owc summary:hover .owt b {
  color: var(--ev-ink);
}
/* A plus that becomes a cross, drawn rather than typed, so it lines up with
   the thumbnail row whatever the heading wraps to. */
.owc .lx {
  justify-self: end;
  width: 22px;
  height: 22px;
  position: relative;
}
.owc .lx::before,
.owc .lx::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 10px;
  height: 1.5px;
  background: var(--gold);
  transition: transform 0.25s var(--ease);
}
.owc .lx::after {
  transform: rotate(90deg);
}
.owc[open] .lx::before {
  transform: rotate(45deg);
}
.owc[open] .lx::after {
  transform: rotate(135deg);
}
.owd {
  margin: 0 0 clamp(24px, 3vw, 36px)
    calc(min(300px, 100%) + clamp(20px, 3vw, 48px));
  max-width: 70ch;
}
@media (max-width: 760px) {
  .owc summary {
    grid-template-columns: minmax(0, 1fr) 22px;
  }
  .owc svg {
    grid-column: 1 / -1;
  }
  .owd {
    margin-left: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .owc .lx::before,
  .owc .lx::after {
    transition: none;
  }
}

.bm-map + .fl {
  margin-top: calc(-1 * clamp(16px, 3vw, 48px));
}

/* How we work: the standing claim and the one figure that backs it, side by
   side, so the sentence is read against the number rather than above it. */
.hw-lead {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
  padding-block: clamp(56px, 7vw, 100px) clamp(40px, 5vw, 72px);
}
.hw-say {
  margin: 0;
  font-size: clamp(24px, 2.9vw, 34px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--body);
  max-width: 24ch;
}
.hw-say b {
  color: var(--ink);
  font-weight: 600;
}
.hw-fig {
  border-left: 2px solid var(--gold);
  padding-left: clamp(18px, 2.4vw, 32px);
}
.hw-fig .bigfig {
  margin: 0;
}
.hw-fig .figsub {
  margin: 6px 0 0;
}
.hw-l {
  font-size: 10px;
  fill: var(--cite-ink);
}
.hw-g {
  font-size: 11px;
  font-weight: 600;
  fill: var(--ink);
}
.acc details > p {
  max-width: 62ch;
  margin: 0 0 24px;
}
@media (max-width: 860px) {
  .hw-lead {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .hw-say {
    max-width: none;
  }
}

/* Partners: the equation set in type. Three columns reading
   Blue Harbour + your company = what your client gets, each led by a
   drawing, with the operator carried in the heading rather than drawn
   between the cells. */
.pb {
  padding-bottom: clamp(56px, 7vw, 100px);
}
.hero + .pb {
  margin-top: calc(-1 * clamp(16px, 3.5vw, 56px));
}
.pb-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
}
.pb-col {
  padding: clamp(22px, 2.6vw, 34px) clamp(16px, 2vw, 28px) 4px;
}
.pb-col:first-child {
  padding-left: 0;
}
.pb-col + .pb-col {
  border-left: 1px solid var(--rule);
}
.pb-col svg {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 0 clamp(18px, 2vw, 26px);
}
.pb-col svg text {
  font-family: var(--sans);
}
.pb-l {
  font-size: 12px;
  fill: var(--cite-ink);
}
.pb-in {
  font-size: 13px;
  font-weight: 600;
  fill: #fff;
}
.pb-b {
  font-size: 13px;
  font-weight: 600;
  fill: var(--accent);
}
.pb-g {
  font-size: 13px;
  font-weight: 600;
  fill: var(--ink);
}
.pb-k {
  margin: 0 0 10px;
  font-size: clamp(26px, 2.9vw, 38px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}
.pb-k.pb-you {
  color: var(--accent);
}
.pb-op {
  color: var(--gold);
  font-weight: 400;
  margin-right: 0.3em;
}
.pb-t {
  margin: 0 0 8px;
  font-size: var(--s-body);
  font-weight: 600;
  color: var(--ink);
}
.pb-col p:last-child {
  margin: 0;
  color: var(--body);
  max-width: 32ch;
}
@media (max-width: 760px) {
  .pb-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .pb-col,
  .pb-col:first-child {
    padding-left: 0;
    padding-right: 0;
  }
  .pb-col + .pb-col {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
}

/* About: the partner position leads, with the two people beside it. */
.ab-lead {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  padding-block: clamp(56px, 7vw, 100px);
}
.ab-say h2 {
  margin: 0 0 14px;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}
.ab-say p {
  margin: 0 0 14px;
  font-size: var(--s-lead);
  line-height: 1.55;
  color: var(--body);
  max-width: 40ch;
}
.ab-say p:last-child {
  font-size: var(--s-body);
  margin-top: 20px;
}
.ab-people {
  border-left: 1px solid var(--rule);
  padding-left: clamp(20px, 3vw, 44px);
}
.ab-k {
  margin: 0 0 16px;
  font-size: var(--s-body);
  font-weight: 600;
  color: var(--ink);
}
.ab-ppl {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 2.4vw, 32px);
}
.ab-ppl figure {
  margin: 0;
  width: 128px;
}
.ab-ppl img {
  display: block;
  width: 128px;
  height: 128px;
  object-fit: cover;
  border-radius: var(--radius);
}
.ab-ppl figcaption {
  margin-top: 10px;
}
.ab-ppl figcaption b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.ab-ppl figcaption span {
  display: block;
  font-size: var(--s-meta);
  color: var(--cite-ink);
}
.ab-list b {
  color: var(--ink);
  font-weight: 600;
}
@media (max-width: 860px) {
  .ab-lead {
    grid-template-columns: minmax(0, 1fr);
  }
  .ab-people {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--rule);
    padding-top: 24px;
  }
}

/* A person's name links to their LinkedIn. Underlined only on hover, so
   the caption still reads as a caption rather than as navigation. */
.ab-ppl .ppl-li {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}
.ab-ppl .ppl-li:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.ab-ppl .ppl-li:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}