/*
  The Leadership chapter -- public screens between "Who's Roman?" and the
  Resume. REBUILT from 2026-09-18 one screen at a time (Step 14 in plan.md);
  the four drafts of 2026-09-17 and their drawings are in git (`3fcd622`,
  `d357bda`, `317b28d`, `02c7701`), and what carried over from them is the
  surface rule, the icon disc and the height-driven type scale below.

      .aim     Philosophy & Vision: one card; principles 2-5 pointing in
               at a target labelled "Outcome", principle 1 under it
      .ops     Operations & Team: one card; the process line with its two
               gates and the loop, the foundations under it, Team beside
      .inf     Partnerships & Influence: one card; Design at the base, an
               arrow up to the executives, arrows across to the partners
      .ai      AI in Design: one card; the stance, the flow from an idea to
               UX/UI review, the shifts, the experts and the guardrails

  ---- The one rule that makes this safe: `.surf` ----

  The standing rule is that no text sits directly on the waves (body copy
  over the artwork measures 1.19:1). These drawings DO sit on the waves, and
  keep the rule by giving every word its own surface: `.surf` is the card's
  fill (--card-fill-top / --card-fill-bottom) with its blur and border, and
  `.surf--warm` / `.surf--cool` lay the card's warm or cool tint over it.
  SVG shapes that carry words are filled with the same --card-fill-* and
  tint tokens. Those are exactly the pairs tools/check-contrast.js proves
  over every wave colour in both themes. Coral fills only icons, arrows and
  outlines. Inks are --card-text* throughout.

  So a surface here is a SHAPE -- a plate, a ring, a tag -- not a rectangle
  holding a layout, which is what reads as "a card".

  ---- Type and fit ----

  One height-driven scale, --lead-fs-*, on `.lead-canvas`: a clamp on `vh`,
  with a `min()` against `vw` that only bites on a narrow paging screen.
  Paging mode fits one screen (`overflow: hidden` on the section), and
  1280x720 is where it binds. Below 1024px (flow mode) every layout lets go
  of its height and stacks, and the scale takes the site's phone floors. The
  1024px breakpoint is the one written in the five files plan.md lists.
*/

/* ---- The canvas and its type scale ---- */

.lead-canvas {
  --lead-fs-kicker: min(clamp(0.625rem, 0.15rem + 0.95vh, 0.9375rem), calc(0.98vw - 0.03rem));
  --lead-fs-small: min(clamp(0.75rem, 0.15rem + 1.25vh, 1.0625rem), calc(1.56vw - 0.31rem));
  --lead-fs-body: min(clamp(0.8125rem, 0.2rem + 1.4vh, 1.25rem), calc(2.03vw - 0.55rem));
  --lead-fs-statement: min(clamp(0.9375rem, 0.2rem + 1.65vh, 1.4375rem), calc(2.6vw - 0.85rem));
  --lead-fs-name: min(clamp(1rem, 0.25rem + 1.75vh, 1.5rem), calc(2.9vw - 0.98rem));
  --lead-fs-title: min(clamp(1.125rem, 0.2rem + 2.3vh, 2rem), calc(3.5vw - 1.18rem));
  --lead-gap: clamp(0.6rem, 1.8vh, 1.75rem);
  --surf-radius: clamp(0.9rem, 1.6vh, 1.4rem);
  display: grid;
  gap: var(--lead-gap) clamp(1rem, 3vw, 3.5rem);
  height: 100%;
  min-height: 0;
  align-content: center;
}


/* ---- The surface: words on their own shape ---- */

.surf {
  --surf-top: var(--card-fill-top);
  --surf-bottom: var(--card-fill-bottom);
  color: var(--card-text);
  border: 1px solid var(--surf-line, var(--card-border));
  background-image:
    linear-gradient(var(--tint-a, transparent), var(--tint-b, transparent)),
    linear-gradient(var(--surf-top), var(--surf-bottom));
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px -18px rgba(10, 8, 18, 0.7);
}

.surf--warm {
  --tint-a: var(--tint-warm-top);
  --tint-b: var(--tint-warm-bottom);
  --surf-line: var(--tint-warm-line);
}

.surf--cool {
  --tint-a: var(--tint-cool-top);
  --tint-b: var(--tint-cool-bottom);
  --surf-line: var(--tint-cool-line);
}

/* A coral disc holding an icon, drawn in --band-ink. */
.principle__icon {
  display: grid;
  flex: none;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background-image: linear-gradient(145deg, var(--coral-400), var(--coral-600));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 6px 14px -6px rgba(226, 80, 58, 0.75);
  color: var(--band-ink);
}

.principle__icon .icon {
  width: 54%;
  height: 54%;
  stroke-width: 2;
}


/* ---- Philosophy & Vision ----
   ONE card holds the screen (`.lead-board`): the positioning line, then a
   three-column grid -- principles 2 and 4 on the left, 3 and 5 on the
   right, and the middle column holding the target over principle 1. The
   principles are plain text on the card, not cards of their own. The
   column gaps are the arrows' room; js/lead-aim.js draws them from each
   principle's inner edge to the target's ring, into `.aim__arrows`, on the
   card's surface where coral reads. The left column is set flush right,
   so its inner edge is where the text actually ends. */

.lead-canvas--philosophy {
  grid-template-rows: minmax(0, 1fr);
  align-content: center;
}

.lead-board {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: center;
  gap: clamp(1rem, 3.4vh, 2.75rem);
  min-height: 0;
  padding: clamp(1.1rem, 3.2vh, 2.75rem) clamp(1.25rem, 3vw, 3.25rem);
}

.lead-statement {
  justify-self: center;
  max-width: 56rem;
  margin: 0;
  padding-bottom: clamp(0.8rem, 2.4vh, 1.8rem);
  border-bottom: 1px solid var(--card-border);
  text-align: center;
}

.lead-statement__line {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--lead-fs-title);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--card-text);
  text-wrap: balance;
}

.card .lead-statement__sub {
  margin: 0.5em 0 0;
  font-size: var(--lead-fs-body);
  line-height: 1.45;
  color: var(--card-text-muted);
  text-wrap: balance;
}

.aim {
  --aim-mid: clamp(13rem, 21vw, 23rem);
  --aim-gap: clamp(2.5rem, 5vw, 6rem);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--aim-mid) minmax(0, 1fr);
  grid-template-areas:
    "tl centre tr"
    "bl centre br";
  align-items: center;
  align-self: center;
  gap: clamp(1rem, 4vh, 3rem) var(--aim-gap);
  min-height: 0;
}

.aim__arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.aim__arrow {
  fill: none;
  stroke: var(--coral-400);
  stroke-width: 2;
  stroke-linecap: round;
}

.aim__arrow-head,
.aim__arrow-dot {
  fill: var(--coral-400);
}

.aim__centre {
  grid-area: centre;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Air between the ring and principle 1, which the lower arrows pass on
     their way up to the ring. */
  gap: clamp(1.25rem, 3.6vh, 2.5rem);
  min-width: 0;
}

/* One coral ring round a disc with the word in it. The disc is the warm
   tint over the card's own fill -- the pair `.surf--warm` and the tinted
   cards are proved on -- and the ring is an outline, so nothing but the
   word sits inside it. js/lead-aim.js reads the outline's offset and width
   to land the arrows on the ring. */
.aim__target {
  --ring-gap: clamp(0.4rem, 1.1vh, 0.75rem);
  display: grid;
  place-items: center;
  container-type: inline-size;
  width: min(100% - 2 * var(--ring-gap), clamp(7.5rem, 26vh - 2.5rem, 14rem));
  aspect-ratio: 1;
  border: 2px solid var(--coral-400);
  border-radius: 50%;
  outline: 2px solid rgba(242, 117, 92, 0.55);
  outline-offset: var(--ring-gap);
  background-image: linear-gradient(var(--tint-warm-top), var(--tint-warm-bottom));
  box-shadow: 0 0 36px -8px rgba(242, 117, 92, 0.45);
}

.aim__word {
  font-family: var(--font-display);
  font-size: 17cqw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--card-text);
}

.principle {
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 1vh, 0.7rem);
  min-width: 0;
  margin: 0;
}

.principle--tl { grid-area: tl; }
.principle--tr { grid-area: tr; }
.principle--bl { grid-area: bl; }
.principle--br { grid-area: br; }

/* The left column faces right, at the target: flush right, icon on the
   inner side. */
.principle--tl,
.principle--bl {
  text-align: right;
}

.principle--tl .principle__head,
.principle--bl .principle__head {
  flex-direction: row-reverse;
}

.principle--outcome {
  width: 100%;
  text-align: center;
}

.principle__head {
  display: flex;
  align-items: center;
  gap: 0.65em;
}

.principle__icon {
  width: clamp(1.9rem, 0.4rem + 3.2vh, 2.75rem);
}

.principle__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--lead-fs-name);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--card-text);
  text-wrap: balance;
}

.principle--outcome .principle__name {
  color: var(--card-text-accent);
}

.card .principle__line {
  margin: 0;
  font-size: var(--lead-fs-body);
  line-height: 1.45;
  color: var(--card-text-muted);
  text-wrap: pretty;
}

/* A narrow paging screen: the middle column gives the principles more of
   the width, or at 1024 they wrapped to eight lines beside the target. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .aim {
    --aim-mid: 16vw;
    --aim-gap: 5vw;
  }
}


/* ---- Operations & Team ----
   ONE card again, two columns: the work (the process line over the
   foundations) and the Team column, split by a hairline. Everything is on
   the card's own surface; the foundations panel adds the cool tint, the
   pair the tinted cards are proved on. Coral draws the icons, the line,
   the gates and the loop, never words. */

.lead-canvas--ops {
  grid-template-rows: minmax(0, 1fr);
}

.ops {
  --stage: clamp(2.1rem, 0.3rem + 4.4vh, 3.4rem);
  --line: 2px;
  --head: 8px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.4fr);
  grid-template-rows: none;
  align-items: stretch;
  gap: 0;
}

.ops__work {
  display: grid;
  grid-template-rows: auto auto;
  align-content: space-evenly;
  gap: clamp(1rem, 3.6vh, 2.75rem);
  min-width: 0;
  padding-right: clamp(1.25rem, 2.6vw, 3rem);
}

.ops__team {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.8rem, 2.6vh, 1.75rem);
  min-width: 0;
  padding-left: clamp(1.25rem, 2.6vw, 3rem);
  border-left: 1px solid var(--card-border);
}

.card .ops__kicker {
  margin: 0 0 clamp(0.5rem, 1.6vh, 1.1rem);
  font-family: var(--font-body);
  font-size: var(--lead-fs-kicker);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--card-text-accent);
}

.card .ops__team .ops__kicker {
  margin-bottom: 0;
}

/* The process line. Each item after the first draws the connector that
   leads into it (`::before`, a coral rule with an arrowhead into a stage,
   plain into a gate) at the icons' centre height. The words hang under
   their icons without widening them, so the line meets each disc; the
   gates' names hang ABOVE the line, where nothing else is, so they can be
   wider than their stretch of it. The two paddings reserve that room. */
.flow {
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: calc(var(--lead-fs-small) * 1.3 + 0.55rem) 0 calc(var(--lead-fs-name) * 1.2 + 0.45rem);
  list-style: none;
}

.flow__item {
  position: relative;
  display: flex;
  flex: 1 1 0;
  align-items: flex-start;
  min-width: 0;
}

.flow__item:first-child {
  flex: none;
}

/* A gate halves the stretch it sits on, so every stage-to-stage span is
   the same length whether it carries a gate or not. */
.flow__item--gate,
.flow__item--gate + .flow__item {
  flex-grow: 0.5;
}

.flow__item + .flow__item::before {
  content: "";
  flex: 1 1 0;
  min-width: 1.25rem;
  height: var(--stage);
  margin: 0 0.3rem;
  background:
    linear-gradient(var(--coral-400), var(--coral-400)) left center / calc(100% - var(--head) + 1px) var(--line) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M0 0L8 5L0 10Z' fill='%23F2755C'/%3E%3C/svg%3E") right center / var(--head) 10px no-repeat;
}

.flow__item--gate + .flow__item::before,
.flow__item + .flow__item--gate::before {
  margin-inline: 0.15rem;
}

.flow__item + .flow__item--gate::before {
  background: linear-gradient(var(--coral-400), var(--coral-400)) center / 100% var(--line) no-repeat;
}

.flow__stage {
  position: relative;
  display: block;
  flex: none;
}

.flow__stage .principle__icon {
  width: var(--stage);
}

.flow__word {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: var(--lead-fs-name);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  white-space: nowrap;
  color: var(--card-text);
}

/* A sign-off gate: a coral diamond with a check, on the line. */
.gate {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  height: var(--stage);
}

.gate__mark {
  display: grid;
  place-items: center;
  width: calc(var(--stage) * 0.5);
  aspect-ratio: 1;
  border-radius: 3px;
  background-image: linear-gradient(145deg, var(--coral-400), var(--coral-600));
  box-shadow: 0 4px 10px -4px rgba(226, 80, 58, 0.75);
  color: var(--band-ink);
  transform: rotate(45deg);
}

.gate__mark .icon {
  width: 68%;
  height: 68%;
  transform: rotate(-45deg);
}

.gate__name {
  position: absolute;
  bottom: calc(50% + var(--stage) * 0.36 + 0.3rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--lead-fs-small);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--card-text);
}

/* "Review" and "QA" where the row is at its narrowest, a tablet (the
   user's call). The short word is aria-hidden and the full name only
   hidden visually, so a screen reader still hears "Design review". */
.gate__short {
  display: none;
}

@media (min-width: 700px) and (max-width: 1023.98px) {
  .gate__short {
    display: inline;
  }

  .gate__full {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Measure back to Outcome: a coral U under the words, from the last icon's
   centre to the first's, a dot where it leaves and an arrowhead where it
   arrives. */
.flow-wrap {
  position: relative;
}

.flow__loop {
  position: relative;
  height: clamp(0.9rem, 2.4vh, 1.6rem);
  margin: 0.2rem calc(var(--stage) / 2 - var(--line) / 2) 0;
  border: var(--line) solid var(--coral-400);
  border-top: 0;
  border-radius: 0 0 0.9rem 0.9rem;
}

.flow__loop::before,
.flow__loop::after {
  content: "";
  position: absolute;
  top: 0;
}

.flow__loop::before {
  left: calc(var(--line) / -2 - 5px);
  width: 10px;
  height: var(--head);
  transform: translateY(-100%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M0 8L5 0L10 8Z' fill='%23F2755C'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.flow__loop::after {
  right: calc(var(--line) / -2 - 3.5px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--coral-400);
}

/* The foundations: one tinted panel under the process. */
.ops__found {
  min-width: 0;
  padding: clamp(0.75rem, 2.2vh, 1.5rem) clamp(0.9rem, 1.6vw, 1.6rem);
  border: 1px solid var(--tint-cool-line);
  border-radius: var(--surf-radius);
  background-image: linear-gradient(var(--tint-cool-top), var(--tint-cool-bottom));
}

.found {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: clamp(0.6rem, 2vh, 1.25rem) clamp(1.25rem, 2.6vw, 2.75rem);
}

.found__block--ds {
  grid-row: span 2;
  padding-right: clamp(1.25rem, 2.6vw, 2.75rem);
  border-right: 1px solid var(--tint-cool-line);
}

.card .found__name {
  margin: 0 0 0.45em;
  font-family: var(--font-display);
  font-size: var(--lead-fs-statement);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--card-text);
}

.card .found__value,
.card .found__note {
  margin: 0;
  font-size: var(--lead-fs-body);
  line-height: 1.4;
  color: var(--card-text-muted);
}

.card .found__value {
  font-weight: 600;
  color: var(--card-text);
}

.card .found__note {
  margin-top: 0.6em;
  font-size: var(--lead-fs-small);
}

/* The Resume's pill (`.chip` in css/content.css): the lighter --chip-fill
   and its border, the user's call. The dashed, emerging pills keep a clear
   fill so the two paths still read apart. */
.ops-chip {
  display: inline-block;
  padding: 0.2em 0.65em;
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  background-color: var(--chip-fill);
  font-size: var(--lead-fs-small);
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  color: var(--card-text);
}

.ops-chip--next {
  border-style: dashed;
  border-color: var(--coral-400);
  background-color: transparent;
}

.ops-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The design system, drawn: today's path along the top, the emerging one
   (dashed) under it, rising into Storybook. */
.ds {
  display: grid;
  grid-template-columns: auto 1.6rem auto 1.6rem auto;
  grid-template-areas:
    "a1 to1 a2 to2 a3"
    ".  .   up .   ."
    "b1 to3 b2 tag tag";
  align-items: center;
  justify-items: center;
}

.ds__a1 { grid-area: a1; }
.ds__a2 { grid-area: a2; }
.ds__a3 { grid-area: a3; }
.ds__b1 { grid-area: b1; }
.ds__b2 { grid-area: b2; }
.ds__to1 { grid-area: to1; }
.ds__to2 { grid-area: to2; }
.ds__to3 { grid-area: to3; }

.ds__to {
  width: 100%;
  height: 10px;
  background:
    linear-gradient(var(--coral-400), var(--coral-400)) 0.2rem center / calc(100% - 0.4rem - 7px) var(--line) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M0 0L8 5L0 10Z' fill='%23F2755C'/%3E%3C/svg%3E") right 0.2rem center / 7px 9px no-repeat;
}

.ds__to--next {
  background:
    repeating-linear-gradient(90deg, var(--coral-400) 0 4px, transparent 4px 7px) 0.2rem center / calc(100% - 0.4rem - 7px) var(--line) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M0 0L8 5L0 10Z' fill='%23F2755C'/%3E%3C/svg%3E") right 0.2rem center / 7px 9px no-repeat;
}

.ds__up {
  grid-area: up;
  width: 10px;
  height: clamp(0.9rem, 2.2vh, 1.4rem);
  margin-block: 0.15rem;
  background:
    repeating-linear-gradient(0deg, var(--coral-400) 0 4px, transparent 4px 7px) center bottom / var(--line) calc(100% - 7px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M0 8L5 0L10 8Z' fill='%23F2755C'/%3E%3C/svg%3E") center top / 9px 7px no-repeat;
}

.ds__tag {
  grid-area: tag;
  justify-self: start;
  margin-left: 0.5rem;
  font-size: var(--lead-fs-kicker);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--card-text-accent);
}

/* The Team column: four blocks, the chapter's icon disc and a line each. */
.team-item {
  display: flex;
  flex-direction: column;
  gap: clamp(0.25rem, 0.8vh, 0.5rem);
  margin: 0;
}

.team-item .principle__icon {
  width: clamp(1.6rem, 0.3rem + 2.8vh, 2.4rem);
}

.team-item__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--lead-fs-name);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--card-text);
}

.card .team-item__line {
  margin: 0;
  font-size: var(--lead-fs-body);
  line-height: 1.42;
  color: var(--card-text-muted);
  text-wrap: pretty;
}

/* A narrow paging screen cannot hold six stages beside a Team column (at
   1024 the words ran into it), so the card stacks: the process across the
   full width, the foundations in one row of three, and Team as two by two
   under a hairline. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .ops {
    grid-template-columns: minmax(0, 1fr);
    align-content: space-evenly;
    gap: clamp(0.75rem, 2.4vh, 1.5rem);
  }

  .ops__work {
    gap: clamp(0.75rem, 2.4vh, 1.5rem);
    padding-right: 0;
  }

  .ops__team {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.6rem, 1.8vh, 1.1rem) clamp(1rem, 2.6vw, 2rem);
    padding: clamp(0.75rem, 2.4vh, 1.5rem) 0 0;
    border-left: 0;
    border-top: 1px solid var(--card-border);
  }

  .ops__team .ops__kicker {
    grid-column: 1 / -1;
  }

  /* Three rows instead of two, so the air comes down a step to keep
     1024x720 inside the card. */
  .ops,
  .ops__work {
    gap: clamp(0.5rem, 1.6vh, 1.25rem);
  }

  .ops {
    padding-block: clamp(0.9rem, 2.4vh, 2.25rem);
  }

  .ops__team {
    padding-top: clamp(0.5rem, 1.6vh, 1.25rem);
  }

  .card .ops__kicker {
    margin-bottom: clamp(0.3rem, 0.9vh, 0.75rem);
  }

  .flow__loop {
    height: clamp(0.6rem, 1.6vh, 1.2rem);
  }

  .ops__found {
    padding-block: clamp(0.6rem, 1.6vh, 1.2rem);
  }

  /* Body copy a step smaller on a short screen here: at 1150x720 the
     height-driven size, not yet capped by the width term, ran the Team
     blocks 3px past the card. 1024 already sits at this size. */
  .lead-canvas--ops {
    --lead-fs-body: min(clamp(0.75rem, 0.1rem + 1.4vh, 1.25rem), calc(2.03vw - 0.55rem));
  }
}


/* ---- AI in Design ----
   ONE card: the stance over a hairline, the flow from an idea to clients
   and stakeholders, the three shifts, the experts (warm) beside how the
   user leads it, and the guardrails as a footer line. The flow is five
   equal columns; every picture is centred in a box of the document's
   height, so the arrows (each step's `::after`) run along one line from
   one picture's edge to the next's. `--pic` / `--pic-next` are the two
   pictures' widths: the document is wider than a disc. */

.lead-canvas--ai {
  grid-template-rows: minmax(0, 1fr);
}

.ai {
  --disc: clamp(2.1rem, 0.3rem + 4.4vh, 3.4rem);
  --pic-h: calc(var(--disc) * 1.2);
  --doc-w: calc(var(--pic-h) * 0.8);
  --reach: 0.55rem;
  --line: 2px;
  --head: 8px;
  grid-template-rows: none;
  align-content: space-evenly;
  gap: clamp(0.55rem, 1.6vh, 2.25rem);
  padding-block: clamp(0.9rem, 2.6vh, 2.75rem);
}

.ai .lead-statement {
  max-width: 50rem;
  padding-bottom: clamp(0.7rem, 1.8vh, 1.8rem);
}

.ai-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-flow__item {
  --pic: var(--disc);
  --pic-next: var(--disc);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
  padding-inline: 0.35rem;
  text-align: center;
}

.ai-flow__item--before-doc { --pic-next: var(--doc-w); }
.ai-flow__item--doc { --pic: var(--doc-w); }

.ai-flow__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--pic-h) / 2 - 5px);
  left: calc(50% + var(--pic) / 2 + var(--reach));
  width: calc(100% - var(--pic) / 2 - var(--pic-next) / 2 - 2 * var(--reach));
  height: 10px;
  background:
    linear-gradient(var(--coral-400), var(--coral-400)) left center / calc(100% - var(--head) + 1px) var(--line) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M0 0L8 5L0 10Z' fill='%23F2755C'/%3E%3C/svg%3E") right center / var(--head) 10px no-repeat;
}

.ai-flow__pic {
  display: grid;
  place-items: center;
  height: var(--pic-h);
  margin-bottom: 0.2rem;
}

.ai-flow__pic .principle__icon {
  width: var(--disc);
}

/* The review step wears a ring, the safety net the experts panel names. */
.ai-flow__item--review .principle__icon {
  outline: 2px solid rgba(242, 117, 92, 0.55);
  outline-offset: 0.3rem;
}

.ai-flow__name {
  font-family: var(--font-display);
  font-size: var(--lead-fs-statement);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--card-text);
  text-wrap: balance;
}

.ai-flow__note {
  font-size: var(--lead-fs-small);
  line-height: 1.35;
  color: var(--card-text-muted);
}

/* Two by two, always: free wrapping gave three rows on a narrow screen. */
.ai-flow__who {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.ai-flow__who .ops-chip {
  padding-block: 0.1em;
}

/* The document: a page a little taller than a disc (the cool tint over the
   card, a coral edge and fold, ruled lines), with its name on the Resume's
   pill under it (the user's call: first drawn across the page's foot). */
.ai-doc {
  position: relative;
  display: block;
  width: var(--doc-w);
  height: var(--pic-h);
}

.ai-doc__page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ai-doc__sheet {
  fill: var(--tint-cool-top);
}

.ai-doc__sheet,
.ai-doc__fold {
  stroke: var(--coral-400);
  stroke-width: 1.75;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.ai-doc__fold {
  fill: none;
}

.ai-doc__rule {
  fill: none;
  stroke: var(--card-text-muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.45;
  vector-effect: non-scaling-stroke;
}

.ai-flow__file {
  margin-bottom: 0.15rem;
  padding: 0.1em 0.55em;
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  background-color: var(--chip-fill);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: var(--lead-fs-small);
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  color: var(--card-text);
}

/* The three shifts: the chapter's icon disc, a name and a line each. Each
   shift is a subgrid of the two rows, so a name that wraps to two lines
   does not push its line below the others'. */
.ai-shifts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: clamp(0.3rem, 0.9vh, 0.6rem) clamp(1rem, 2.6vw, 3rem);
}

.ai-shift {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  align-items: start;
  min-width: 0;
  margin: 0;
}

.ai-shift .principle__icon {
  width: clamp(1.6rem, 0.3rem + 2.8vh, 2.4rem);
}

.ai-shift__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--lead-fs-name);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--card-text);
  text-wrap: balance;
}

.card .ai-shift__line {
  margin: 0;
  font-size: var(--lead-fs-body);
  line-height: 1.42;
  color: var(--card-text-muted);
  text-wrap: pretty;
}

/* The experts, highlighted on the warm tint, beside how the user leads it. */
.ai-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(1rem, 2.6vw, 3rem);
  align-items: stretch;
}

.ai-experts,
.ai-how {
  min-width: 0;
  padding: clamp(0.6rem, 1.5vh, 1.4rem) clamp(0.9rem, 1.6vw, 1.6rem);
  border-radius: var(--surf-radius);
}

.ai-experts {
  border: 1px solid var(--tint-warm-line);
  background-image: linear-gradient(var(--tint-warm-top), var(--tint-warm-bottom));
}

.ai-how {
  border: 1px solid var(--card-border);
}

.card .ai-lead .ops__kicker {
  margin-bottom: clamp(0.3rem, 0.9vh, 0.6rem);
}

.card .ai-experts__line {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--lead-fs-statement);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--card-text);
  text-wrap: pretty;
}

.card .ai-how__line {
  margin: 0;
  font-size: var(--lead-fs-body);
  line-height: 1.45;
  color: var(--card-text-muted);
  text-wrap: pretty;
}

/* The guardrails: a quiet footer line, the items split by dots. */
.card .ai-guard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.3rem 0;
  margin: 0;
  font-size: var(--lead-fs-small);
  line-height: 1.35;
  color: var(--card-text-muted);
}

.ai-guard__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-right: 0.6em;
  font-weight: 700;
  color: var(--card-text-accent);
}

.ai-guard__label .icon {
  width: 1.15em;
  height: 1.15em;
}

.ai-guard__item + .ai-guard__item::before {
  content: "\00B7";
  margin: 0 0.7em;
  font-weight: 700;
  color: var(--card-text-accent);
}

/* A narrow paging screen: the columns are narrower, so the lines wrap
   more; the body copy comes down a step, as it does on screen 2. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .ai-flow__item {
    padding-inline: 0.2rem;
  }

  .lead-canvas--ai {
    --lead-fs-body: min(clamp(0.75rem, 0.1rem + 1.4vh, 1.25rem), calc(2.03vw - 0.55rem));
  }

  .ai-lead {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  }

  /* A step down, or "Anyone with an idea" took two lines at 1150. */
  .ai-flow__name {
    font-size: var(--lead-fs-body);
  }
}


/* ---- Partnerships & Influence ----
   ONE card, "up and across": Design at the base, one arrow up to the
   executives (a warm panel across the top), arrows left and right to the
   partners (two cool panels flanking the hub). One grid; the partners'
   <section> is `display: contents` here, so its kicker and panels take the
   board's cells either side of the hub. The hub is screen 1's target. The
   arrows are boxes in their own cells: the side ones sit level with the
   hub's centre (the hub is top-aligned in its row, so that is a fixed
   offset), and every arrow stops short of the hub's outline ring. */

.lead-canvas--inf {
  grid-template-rows: minmax(0, 1fr);
}

.inf {
  --hub: clamp(6.5rem, 17vh - 0.5rem, 11rem);
  --ring: clamp(0.4rem, 1.1vh, 0.75rem);
  --clear: calc(var(--ring) + 2px + 0.45rem);
  --arm: clamp(3.5rem, 7vw, 8rem);
  --line: 2px;
  --head: 8px;
  grid-template-columns: minmax(0, 1fr) var(--arm) var(--hub) var(--arm) minmax(0, 1fr);
  grid-template-rows: auto clamp(1.75rem, 5.5vh, 4rem) auto auto;
  grid-template-areas:
    "up   up   up   up   up"
    ".    .    rise .    ."
    "left la   hub  ra   right"
    "left kick kick kick right";
  align-content: center;
  gap: 0;
}

.inf-up {
  grid-area: up;
  min-width: 0;
  padding: clamp(0.75rem, 2.2vh, 1.6rem) clamp(0.9rem, 1.8vw, 1.8rem);
  border: 1px solid var(--tint-warm-line);
  border-radius: var(--surf-radius);
  background-image: linear-gradient(var(--tint-warm-top), var(--tint-warm-bottom));
}

.card .inf-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  text-align: center;
}

.inf-kicker .icon {
  flex: none;
  width: 1.35em;
  height: 1.35em;
}

.inf-hub {
  grid-area: hub;
  align-self: start;
  display: grid;
  place-items: center;
}

.inf-hub__disc.aim__target {
  --ring-gap: var(--ring);
  width: var(--hub);
}

.inf-across {
  display: contents;
}

.card .inf-across__kicker {
  grid-area: kick;
  align-self: start;
  margin: calc(var(--clear) + 0.2rem) 0 0;
  text-wrap: balance;
}

.inf-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.75rem, 2.2vh, 1.5rem);
  min-width: 0;
  padding: clamp(0.75rem, 2.2vh, 1.5rem) clamp(0.9rem, 1.6vw, 1.6rem);
  border: 1px solid var(--tint-cool-line);
  border-radius: var(--surf-radius);
  background-image: linear-gradient(var(--tint-cool-top), var(--tint-cool-bottom));
}

.inf-side--left { grid-area: left; }
.inf-side--right { grid-area: right; }

.partner {
  display: flex;
  flex-direction: column;
  gap: clamp(0.2rem, 0.6vh, 0.4rem);
  margin: 0;
}

.partner__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--lead-fs-name);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--card-text);
}

.card .partner__line {
  margin: 0;
  font-size: var(--lead-fs-body);
  line-height: 1.42;
  color: var(--card-text-muted);
  text-wrap: pretty;
}

/* The executives face the middle, screen 1's trick: the first item is set
   flush right with its icon on the inner side, the second is centred over
   the arrow, the third stays flush left. Only while they sit three across;
   a phone's single column reads left (see the 700px block below). */
.inf-up__items .ai-shift:first-child {
  text-align: right;
}

.inf-up__items .ai-shift:first-child .principle__head {
  flex-direction: row-reverse;
}

.inf-up__items .ai-shift:nth-child(2) {
  text-align: center;
}

.inf-up__items .ai-shift:nth-child(2) .principle__head {
  justify-content: center;
}

/* The arrows: a coral rule with a head at the far end, the chapter's data
   URI. The up arrow runs from above the hub's ring to the panel's edge; the
   side ones from beside the ring to the panels' inner edges. */
.inf-arm--up {
  grid-area: rise;
  justify-self: center;
  width: 10px;
  margin: 0.35rem 0 var(--clear);
  background:
    linear-gradient(var(--coral-400), var(--coral-400)) center bottom / var(--line) calc(100% - var(--head) + 1px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M0 8L5 0L10 8Z' fill='%23F2755C'/%3E%3C/svg%3E") center top / 10px var(--head) no-repeat;
}

.inf-arm--left,
.inf-arm--right {
  align-self: start;
  height: 10px;
  margin-top: calc(var(--hub) / 2 - 5px);
}

.inf-arm--left {
  grid-area: la;
  margin-inline: 0.35rem var(--clear);
  background:
    linear-gradient(var(--coral-400), var(--coral-400)) right center / calc(100% - var(--head) + 1px) var(--line) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M8 0L0 5L8 10Z' fill='%23F2755C'/%3E%3C/svg%3E") left center / var(--head) 10px no-repeat;
}

.inf-arm--right {
  grid-area: ra;
  margin-inline: var(--clear) 0.35rem;
  background:
    linear-gradient(var(--coral-400), var(--coral-400)) left center / calc(100% - var(--head) + 1px) var(--line) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M0 0L8 5L0 10Z' fill='%23F2755C'/%3E%3C/svg%3E") right center / var(--head) 10px no-repeat;
}

/* A narrow paging screen: shorter arms give the partner panels the width,
   and the body copy comes down a step, as it does on screens 2 and 4. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .inf {
    --arm: 3.25rem;
  }

  .lead-canvas--inf {
    --lead-fs-body: min(clamp(0.75rem, 0.1rem + 1.4vh, 1.25rem), calc(2.03vw - 0.55rem));
  }
}


/* ---- Flow mode: below 1024px everything lets go of its height ---- */

@media (max-width: 1023.98px) {
  .lead-canvas {
    --lead-fs-kicker: 0.8125rem;
    --lead-fs-small: 0.9375rem;
    --lead-fs-body: 1rem;
    --lead-fs-statement: 1.0625rem;
    --lead-fs-name: 1.1875rem;
    --lead-fs-title: 1.375rem;
    --lead-gap: var(--space-4);
    height: auto;
    align-content: start;
  }

  .lead-board {
    padding: var(--space-5) var(--space-4);
  }

  /* Vertical: "surrounded by" cannot fit a narrow screen, so the target
     goes on top with principle 1 under it, and principles 2-5 follow in a
     centred column, each with a coral arrow above it pointing up toward
     the target. The measured arrows are off. */
  .aim {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "centre" "tl" "tr" "bl" "br";
    justify-items: center;
    gap: 0;
  }

  .aim__arrows {
    display: none;
  }

  .aim__centre {
    width: min(100%, 34rem);
  }

  .aim__target {
    width: min(48vw, 11rem);
  }

  .principle {
    width: min(100%, 34rem);
    align-items: center;
    text-align: center;
  }

  .principle--tl,
  .principle--bl {
    text-align: center;
  }

  .principle--tl .principle__head,
  .principle--bl .principle__head {
    flex-direction: row;
  }

  .principle[data-aim-from]::before {
    content: "";
    display: block;
    width: 14px;
    height: 2.75rem;
    margin: var(--space-3) auto var(--space-3);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 44' preserveAspectRatio='none'%3E%3Cpath d='M7 12V42' stroke='%23F2755C' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M7 1L13 12H1Z' fill='%23F2755C'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
}

@media (max-width: 640px) {
  .lead-statement {
    text-align: left;
  }
}

/* Operations & Team in flow mode: one column, the foundations and Team
   under the process. */
@media (max-width: 1023.98px) {
  .ops {
    --stage: 2.5rem;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .ops__work {
    gap: var(--space-5);
    padding-right: 0;
  }

  .ops__team {
    gap: var(--space-4);
    padding: var(--space-5) 0 0;
    border-left: 0;
    border-top: 1px solid var(--card-border);
  }

  /* The first and last words overhang their icons; the card's padding
     alone left them 4px from its edge on a tablet. */
  .flow-wrap {
    padding-inline: 1.25rem;
  }

  .found {
    grid-template-columns: minmax(0, 1fr);
  }

  .found__block--ds {
    grid-row: auto;
    padding-right: 0;
    border-right: 0;
  }

  .ds {
    grid-template-columns: auto 1.25rem auto 1.25rem auto;
    justify-content: start;
  }
}

/* Only a phone is too narrow for the process as a row (a tablet holds it;
   the user asked for it there): the stages become a vertical list, the
   gates sit between them with their names beside the diamond, and the loop
   runs down the left from Measure back up to Outcome. Measured: at 700px
   the row still leaves 17px between the two gate names and 26px between
   stage words; at 641px the gate names were 5px apart. */
@media (max-width: 699.98px) {
  .flow-wrap {
    padding-inline: 1.75rem 0;
  }

  .flow {
    flex-direction: column;
    padding: 0;
  }

  .flow__item,
  .flow__item:first-child {
    flex: none;
    flex-direction: column;
  }

  .flow__item + .flow__item::before,
  .flow__item--gate + .flow__item::before {
    flex: none;
    width: var(--stage);
    min-width: 0;
    height: 1.5rem;
    margin: 0.2rem 0;
    background:
      linear-gradient(var(--coral-400), var(--coral-400)) center top / var(--line) calc(100% - var(--head) + 1px) no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M0 0L10 0L5 8Z' fill='%23F2755C'/%3E%3C/svg%3E") center bottom / 10px var(--head) no-repeat;
  }

  .flow__item + .flow__item--gate::before {
    flex: none;
    width: var(--stage);
    min-width: 0;
    height: 0.9rem;
    margin: 0.2rem 0;
    background: linear-gradient(var(--coral-400), var(--coral-400)) center / var(--line) 100% no-repeat;
  }

  .flow__stage {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .flow__word {
    position: static;
    transform: none;
  }

  .gate {
    grid-template-columns: var(--stage) auto;
    justify-items: center;
    gap: var(--space-3);
    height: auto;
  }

  .gate__name {
    position: static;
    transform: none;
    justify-self: start;
  }

  .flow__loop {
    position: absolute;
    top: calc(var(--stage) / 2);
    bottom: calc(var(--stage) / 2);
    left: 0;
    width: 1.75rem;
    height: auto;
    margin: 0;
    border: var(--line) solid var(--coral-400);
    border-right: 0;
    border-radius: 0.9rem 0 0 0.9rem;
  }

  .flow__loop::before {
    top: calc(var(--line) / -2 - 5px);
    left: auto;
    right: 0;
    width: var(--head);
    height: 10px;
    transform: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M0 0L8 5L0 10Z' fill='%23F2755C'/%3E%3C/svg%3E");
  }

  .flow__loop::after {
    top: auto;
    bottom: calc(var(--line) / -2 - 3.5px);
    right: -3.5px;
    transform: none;
  }
}


/* A phone cannot hold three chips in a row, so the design system turns on
   its side: today's path down the left, the emerging one down the right,
   joining Storybook from the side. */
@media (max-width: 640px) {
  .ds {
    grid-template-columns: auto 1.5rem auto;
    grid-template-areas:
      "a1  .  b1"
      "to1 .  to3"
      "a2  up b2"
      "to2 .  ."
      "a3  .  tag";
  }

  .ops-chip {
    font-size: 0.8125rem;
  }

  .ds__to {
    width: 10px;
    height: 1.1rem;
    margin-block: 0.15rem;
    background:
      linear-gradient(var(--coral-400), var(--coral-400)) center top / var(--line) calc(100% - 7px) no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M0 0L10 0L5 8Z' fill='%23F2755C'/%3E%3C/svg%3E") center bottom / 9px 7px no-repeat;
  }

  .ds__to--next {
    background:
      repeating-linear-gradient(180deg, var(--coral-400) 0 4px, transparent 4px 7px) center top / var(--line) calc(100% - 7px) no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M0 0L10 0L5 8Z' fill='%23F2755C'/%3E%3C/svg%3E") center bottom / 9px 7px no-repeat;
  }

  .ds__up {
    width: 100%;
    height: 10px;
    margin-block: 0;
    background:
      repeating-linear-gradient(270deg, var(--coral-400) 0 4px, transparent 4px 7px) right 0.2rem center / calc(100% - 0.4rem - 7px) var(--line) no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M8 0L0 5L8 10Z' fill='%23F2755C'/%3E%3C/svg%3E") left 0.2rem center / 7px 9px no-repeat;
  }

  .ds__tag {
    justify-self: center;
    margin-left: 0;
  }
}


/* AI in Design in flow mode: one column of blocks. The flow stays a row
   on a tablet, as screen 2's process does; below 700px it turns vertical,
   the pictures down the left (in a column the document's width) with the
   arrows between them and the words beside each. */
@media (max-width: 1023.98px) {
  .ai {
    --disc: 2.5rem;
    gap: var(--space-5);
  }

  .ai-flow__item {
    padding-inline: 0.2rem;
  }

  /* A tablet column is narrower than two pills side by side. */
  .ai-flow__who {
    display: flex;
    flex-wrap: wrap;
  }

  .ai-lead {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}

@media (max-width: 699.98px) {
  .ai-shifts {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: var(--space-4);
  }

  .ai-shift {
    grid-row: auto;
    grid-template-rows: none;
    gap: var(--space-2);
  }

  .ai-flow {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-5);
  }

  .ai-flow__item {
    --pic-v: var(--disc);
    display: grid;
    grid-template-columns: var(--doc-w) minmax(0, 1fr);
    align-content: start;
    justify-items: start;
    column-gap: var(--space-4);
    row-gap: 0.2rem;
    padding: 0;
    text-align: left;
  }

  .ai-flow__item--doc {
    --pic-v: var(--pic-h);
  }

  /* The review's ring stands 0.3rem + 2px outside its disc; the arrows
     in and out stop short of it. */
  .ai-flow__item--review {
    --pic-v: calc(var(--disc) + 0.6rem + 4px);
  }

  .ai-flow__item--review .ai-flow__pic {
    padding-block: calc(0.3rem + 2px);
  }

  .ai-flow__item--review .ai-flow__name {
    padding-top: calc(var(--disc) / 2 - 0.65em + 0.3rem + 2px);
  }

  .ai-flow__pic {
    grid-column: 1;
    grid-row: 1 / span 3;
    justify-self: center;
    height: auto;
    margin: 0;
  }

  .ai-flow__file,
  .ai-flow__name,
  .ai-flow__note,
  .ai-flow__who {
    grid-column: 2;
  }

  .ai-flow__file {
    justify-self: start;
    margin-top: calc(var(--pic-h) / 2 - 0.8em);
  }

  .ai-flow__item--doc .ai-flow__name {
    padding-top: 0;
  }

  .ai-flow__name {
    padding-top: calc(var(--disc) / 2 - 0.65em);
  }

  .ai-flow__who {
    justify-content: start;
  }

  .ai-flow__item:not(:last-child)::after {
    top: calc(var(--pic-v) + 0.4rem);
    bottom: calc(-1 * var(--space-5) + 0.4rem);
    left: calc(var(--doc-w) / 2 - 5px);
    width: 10px;
    height: auto;
    background:
      linear-gradient(var(--coral-400), var(--coral-400)) center top / var(--line) calc(100% - var(--head) + 1px) no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M0 0L10 0L5 8Z' fill='%23F2755C'/%3E%3C/svg%3E") center bottom / 10px var(--head) no-repeat;
  }

  .card .ai-guard {
    flex-direction: column;
    align-items: flex-start;
  }

  .ai-guard__item + .ai-guard__item::before {
    content: none;
  }
}


/* Partnerships & Influence in flow mode: one column in reading order --
   Design, the executives, then the partners (the plan's order). The drawn
   arrows go; the kickers' icons still say up and across. On a tablet the
   two partner panels stay side by side. */
@media (max-width: 1023.98px) {
  .inf {
    --hub: 8rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: none;
    gap: var(--space-5);
  }

  .inf-hub {
    grid-area: auto;
    padding-block: var(--ring);
  }

  .inf-hub__disc.aim__target {
    width: var(--hub);
  }

  .inf-arm {
    display: none;
  }

  .inf-up {
    grid-area: auto;
  }

  .inf-across {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .card .inf-across__kicker {
    grid-area: auto;
    grid-column: 1 / -1;
    margin: 0;
  }

  .inf-side--left,
  .inf-side--right {
    grid-area: auto;
    justify-content: start;
  }
}

@media (max-width: 699.98px) {
  .inf-across {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* One column on a phone: the executives read flush left again. */
@media (max-width: 699.98px) {
  .inf-up__items .ai-shift:first-child,
  .inf-up__items .ai-shift:nth-child(2) {
    text-align: left;
  }

  .inf-up__items .ai-shift:first-child .principle__head {
    flex-direction: row;
  }

  .inf-up__items .ai-shift:nth-child(2) .principle__head {
    justify-content: flex-start;
  }
}