/* The existing Onest / paper / graphite system, extended to three urban models. */
.masterplan-page { --housing: #9cacc0; --commerce: #ce947d; --park: #9ba98b; --social: #e0ac3c; }
/* Header glass is shared with the landing in styles.css; only the contents
   and their proportions differ on these detail pages. */
.mp-header .site-nav { gap: clamp(18px, 2.6vw, 40px); }
.mp-header .brand { width: 102px; }
.mp-header .lang-switch { margin-left: 0; }
/* The commercial page uses the familiar section-nav language for its three
   operating modes. The nav owns the flexible space, just as on masterplan. */
.commercial-architecture-page .mp-header .mp-motion { margin-left: 0; }
.ca-mode-nav { min-width: 0; gap: clamp(14px, 1.8vw, 28px) !important; }
.ca-mode-nav button {
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  white-space: nowrap;
  font-size: clamp(11px, .82vw, 13px);
  line-height: 1;
  transition: opacity 160ms ease;
}
.ca-mode-nav button::before {
  content: "";
  width: 6px;
  height: 6px;
  position: absolute;
  bottom: 2px;
  left: calc(50% - 3px);
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transition: opacity 160ms ease;
}
.ca-mode-nav button[aria-pressed="true"]::before { opacity: 1; }
.mp-header .lang-switch button { opacity: 1; color: var(--muted); }
.mp-header .lang-switch button[aria-pressed="true"] { color: var(--ink); }
.masterplan-page svg:not(.brand__logo) { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.mp-motion { width: 44px; height: 44px; flex: 0 0 auto; padding: 12px; background: transparent; color: var(--ink); border: 1px solid var(--line-dark); }
.mp-motion svg { width: 18px; height: 18px; }
.mp-play-icon { display: none; }
.is-paused .mp-pause-icon { display: none; }
.is-paused .mp-play-icon { display: initial; }
.mp-motion[hidden] { display: none; }
.mp-intro {
  --ink: #f6f6f6;
  --muted: rgb(246 246 246 / .84);
  --line: rgb(246 246 246 / .26);
  --line-dark: rgb(246 246 246 / .4);
  padding: 112px var(--edge) 46px;
  background:
    linear-gradient(180deg, rgb(13 17 23 / .34), rgb(13 17 23 / 0) 44%),
    linear-gradient(100deg, rgb(13 17 23 / .34), rgb(13 17 23 / .42) 48%, rgb(13 17 23 / .7)),
    url("assets/photo/masterplan-aerial.jpg") center 58% / cover no-repeat,
    #0d1117;
  color: #f6f6f6;
}
.mp-back { display: inline-flex; gap: 12px; align-items: center; min-height: 44px; font-size: 12px; text-transform: uppercase; }
.mp-back svg { width: 19px; height: 19px; }
.mp-intro__row { display: grid; grid-template-columns: 1.7fr 1fr; gap: 6vw; align-items: end; margin-top: 30px; }
.mp-intro h1 { margin: 0; font-weight: 500; font-size: clamp(42px, 4.7vw, 78px); line-height: 1.04; letter-spacing: -.04em; }
.mp-title-quiet { color: var(--muted); }
.mp-intro__aside { max-width: 350px; padding-bottom: 4px; }
.mp-intro__aside p { margin: 0; font-size: 17px; line-height: 1.45; }
.mp-intro__aside p:first-child { margin-bottom: 18px; font-size: 12px; text-transform: uppercase; }
.mp-intro__aside p:last-child { color: var(--muted); }
.mp-step { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(40px, 5.5vw, 100px); align-items: center; padding: 64px var(--edge) 70px; }
.mp-visual { min-width: 0; align-self: stretch; display: flex; flex-direction: column; position: relative; }
.mp-visual figcaption { display: flex; gap: 12px; align-items: center; min-height: 40px; font-size: 11px; line-height: 1.35; letter-spacing: -.02em; text-transform: uppercase; }
.mp-canvas-wrap { position: relative; width: 100%; height: clamp(360px, 36vw, 550px); flex: 1; min-height: 360px; }
.mp-canvas, .mp-fallback, .mp-diagram, .mp-still { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* The daylight maquette ships as a still: it never changed while the page
   ran, and a live context cost a frame's hitch every time it scrolled in. */
.mp-still { object-fit: contain; object-position: center; }
/* The option diagram sits over the model and must never catch a pointer. */
.mp-diagram { pointer-events: none; }
.mp-canvas { opacity: 0; }
.mp-visual.is-ready .mp-canvas { opacity: 1; }
.mp-visual.is-ready .mp-fallback { visibility: hidden; }
.mp-visual figcaption { min-height: 40px; margin-top: 4px; color: var(--muted); }
.mp-visual__note { margin-left: auto; font-size: 11px; }
.mp-copy { max-width: 500px; padding: 20px 0; }
.mp-copy h2 { font-size: clamp(32px, 3vw, 50px); line-height: 1.08; letter-spacing: -.04em; font-weight: 500; margin: 0 0 26px; text-wrap: balance; }
.mp-copy > p,
.mp-scenarios__summary { font-size: clamp(16px, 1.3vw, 20px); line-height: 1.5; color: var(--muted); margin: 0; max-width: 37ch; }
/* Stacked paragraphs need air between them. Scoped to this block: in the
   scenario copy the paragraphs are grid items, and a margin there would
   push them out of their own rows. The step is the one the premise uses. */
.mp-people .mp-copy > p + p { margin-top: 1.1em; }
/* The premise, between the first screen and the impact strip: one statement at
   heading size, then the argument set as a quotation against it. */
.mp-premise {
  --ink: #f6f6f6; --muted: #b2b5b9; --line: rgb(246 246 246 / .22);
  padding: clamp(56px, 6vw, 104px) var(--edge) clamp(54px, 5.6vw, 96px);
  background: #202124; color: var(--ink);
}
.mp-premise__lead {
  margin: 0; max-width: 30ch;
  font-weight: 500; font-size: clamp(28px, 3vw, 50px); line-height: 1.1; letter-spacing: -.04em;
  text-wrap: balance;
}
.mp-premise__body {
  display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 2fr);
  gap: clamp(26px, 4vw, 70px);
  margin-top: clamp(38px, 4.4vw, 76px);
}
.mp-premise__mark, .mp-premise__text { border-top: 1px solid var(--line); padding-top: clamp(20px, 2vw, 34px); }
.mp-premise__mark { margin: 0; font-size: clamp(40px, 4vw, 66px); line-height: .6; }
.mp-premise__text { display: flex; flex-direction: column; gap: 1.1em; max-width: 78ch; }
.mp-premise__text p { margin: 0; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.55; color: var(--muted); }

.mp-people { --ink: #f6f6f6; --muted: #afb2b6; --line: rgb(246 246 246 / .22); color: var(--ink); background: #202124; overflow: hidden; }
/* The impact block, on the ShipOS pattern: a full-bleed strip of media with
   the heading laid over its top-left, then the lead, then the numbers. The
   proportions are Palantir's (96px display on a 576px band, a three-track
   lead, stats on two tracks with the first spanning both), expressed in this
   page's own tokens — one weight, one family, -.04em on display. */
/* The premise block above is the same graphite, so the strip starts against
   it instead of on a band of paper. */
.mp-impact { padding-block: 0 clamp(48px, 5.4vw, 88px); }
/* Four equal cells in a row, so the block is as tall as one cell is wide.
   --cols is the single source of truth: the strip reads it back to decide how
   many cells to draw, which is what keeps every cell square. */
.mp-impact__mood {
  --cols: 4;
  position: relative;
  aspect-ratio: var(--cols) / 1;
  overflow: hidden;
  background: #05070a;
}
.mp-impact__mood canvas { position: absolute; inset: 0; display: block; }
/* The strip is busy where the heading lands, so the ground is darkened under
   it and left alone everywhere else. */
.mp-impact__mood::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(96deg,
    rgb(3 6 10 / .84) 0%, rgb(3 6 10 / .6) 23%, rgb(3 6 10 / .18) 43%, rgb(3 6 10 / 0) 58%);
}
.mp-impact__over {
  position: absolute;
  left: var(--edge); right: var(--edge); top: clamp(20px, 2.3vw, 42px);
  z-index: 1;   /* over the canvas, which is the block's only other child */
  color: #f6f6f6;
}
.mp-impact__rule { height: 1px; margin: 0; border: 0; background: rgb(246 246 246 / .46); }
.mp-impact__heading {
  max-width: 16ch;
  margin: clamp(16px, 2vw, 34px) 0 0;
  font-size: clamp(28px, 5.1vw, 74px);
  line-height: .92;
  letter-spacing: var(--track);
}
.mp-impact__heading .mp-title-quiet { color: rgb(246 246 246 / .66); }

@media (max-width: 900px) { .mp-impact__mood { --cols: 3; } }
@media (max-width: 620px) { .mp-impact__mood { --cols: 2; } }

.mp-impact__lead,
.mp-impact__stats { display: grid; gap: clamp(22px, 4.17vw, 60px); padding-inline: var(--edge); }
.mp-impact__lead { grid-template-columns: repeat(3, 1fr); padding-top: clamp(34px, 4.17vw, 60px); }
/* Each column opens on a rule: the layers the software reads on the left, the
   statement on the right — the same reading order as the numbers below. Both
   start on that rule, so their first lines sit on one top edge. */
.mp-impact__lead > * { border-top: 1px solid var(--line); padding-top: clamp(16px, 1.8vw, 30px); }
.mp-impact__lead > p {
  grid-column: 2 / -1; margin: 0;
  font-size: clamp(17px, 1.95vw, 28px); line-height: 1.21; letter-spacing: var(--track-body);
}
.mp-impact__aside { grid-column: 1; align-self: start; }
.mp-impact__layers {
  margin-top: clamp(22px, 2.4vw, 40px); align-content: start; display: grid; gap: 11px;
  margin: 0; padding: 0; list-style: none;
  font-size: clamp(11px, 1.05vw, 15px); line-height: 1.2;
  text-transform: uppercase; letter-spacing: var(--track); color: var(--muted);
}
.mp-impact__layers li { display: flex; gap: 10px; }
.mp-impact__layers li::before { content: ""; flex: 0 0 auto; width: 5px; height: 5px; margin-top: .42em; background: var(--accent); }

.mp-impact__stats { grid-template-columns: repeat(2, 1fr); padding-top: clamp(40px, 4.6vw, 72px); }
.mp-stat--wide { grid-column: 1 / -1; }
.mp-stat__key { margin: 0 0 clamp(7px, .8vw, 12px); font-size: clamp(10px, .84vw, 12px); line-height: 1; letter-spacing: var(--track); color: var(--muted); }
/* The label sits above the rule, the number below it. */
.mp-stat__value {
  display: flex; align-items: baseline; flex-wrap: wrap;
  border-top: 1px solid var(--line);
  margin: 0; padding-top: clamp(14px, 1.9vw, 34px);
  font-size: clamp(40px, 7.78vw, 112px); line-height: 1; letter-spacing: var(--track);
}
.mp-stat__value b { font-weight: inherit; }
/* The unit is part of the figure, at the same size and weight: a word stands
   off the number, a sign sits tight against it. */
.mp-stat__unit { margin-left: .18em; }
.mp-stat__unit--sign { margin-left: 0; }
.mp-stat__arrow { width: .62em; height: .217em; flex: 0 0 auto; margin: 0 .2em; align-self: center; color: inherit; }
.masterplan-page .mp-stat__arrow { stroke-width: 2.8; }
.mp-stat__note {
  max-width: 34ch; margin: clamp(10px, 1.1vw, 18px) 0 0;
  font-size: clamp(14px, 1.67vw, 24px); line-height: 1.25; letter-spacing: var(--track-body);
}
.mp-impact__credit { margin: clamp(26px, 3vw, 44px) 0 0; padding-inline: var(--edge); font-size: 12px; letter-spacing: var(--track-body); color: var(--muted); }

/* The model runs off the block at the bottom and on the left, so the figure
   column is wider than the grid track and the section clips it. The copy is
   pulled in from the right edge, which keeps the block narrower than the page. */
.mp-people .mp-step { padding-top: 58px; padding-bottom: 58px; gap: clamp(34px, 3.8vw, 72px); grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); align-items: center; }
.mp-people .mp-copy { max-width: 480px; }
.mp-people :focus-visible { outline-color: var(--ink); }
/* The signals the model is reading, shown the way they arrive: as posts from a
   feed and as messages in a neighbourhood chat. They sit over the maquette,
   which is why the model is framed to fill the figure behind them. */
.mp-social-tags { position: absolute; z-index: 2; inset: 0; pointer-events: none; container-type: inline-size; }
.mp-signal { position: absolute; margin: 0; --card: #fdfdfc; }
.mp-signal__text { letter-spacing: -.02em; text-transform: none; color: #202124; }
.mp-signal__source { font-size: 9px; text-transform: uppercase; letter-spacing: -.02em; }

/* A post: header, photograph, the reactions row, the caption. */
.mp-signal--post { width: min(21cqw, 144px); background: var(--card); box-shadow: 0 16px 38px rgb(8 10 14 / .5); }
.mp-signal__head { display: flex; align-items: center; gap: 6px; padding: 7px 8px 6px; }
.mp-signal__avatar { width: 17px; height: 17px; flex: 0 0 auto; border-radius: 50%; background: #c9c4bb; }
.mp-signal--post .mp-signal__source { flex: 1 1 auto; min-width: 0; color: #6d7074; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-signal__more { width: 12px; height: 3px; flex: 0 0 auto; background: radial-gradient(circle, #a8aca8 45%, transparent 46%) 0 50% / 4px 4px repeat-x; }
.mp-signal__photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.mp-signal__body { display: flex; flex-direction: column; gap: 6px; padding: 7px 8px 9px; }
.mp-signal__glyphs { display: flex; gap: 9px; color: #202124; }
.mp-signal__glyphs svg { width: 13px; height: 13px; stroke-width: 1.6; }
.mp-signal--post .mp-signal__text { font-size: 11.5px; line-height: 1.3; }

/* A message: a bubble with the squared corner on the side it was sent from. */
.mp-signal--chat { width: min(22cqw, 150px); }
.mp-signal--chat .mp-signal__source { display: block; margin-bottom: 6px; color: rgb(246 246 246 / .52); }
.mp-signal__bubble {
  position: relative;
  display: flex; align-items: flex-end; gap: 9px;
  margin: 0; padding: 8px 10px 7px;
  background: var(--card);
  box-shadow: 0 14px 32px rgb(8 10 14 / .46);
}
.mp-signal__bubble::after { content: ""; position: absolute; bottom: 0; width: 8px; height: 12px; background: inherit; }
.mp-signal--chat .mp-signal__text { font-size: 11.5px; line-height: 1.3; }
.mp-signal__time { flex: 0 0 auto; font-size: 9px; color: #9aa0a6; }
.mp-signal--said .mp-signal__bubble { border-radius: 13px 13px 13px 2px; }
.mp-signal--said .mp-signal__bubble::after { left: -5px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.mp-signal--reply { text-align: right; --card: #e7e3da; }
.mp-signal--reply .mp-signal__source { margin-right: 2px; }
.mp-signal--reply .mp-signal__bubble { border-radius: 13px 13px 2px 13px; text-align: left; }
.mp-signal--reply .mp-signal__bubble::after { right: -5px; clip-path: polygon(0 0, 0 100%, 100% 100%); }

/* Scattered over the model the way notifications stack up on a screen. */
/* Laid out so no two of them overlap at any width: the posts hold the columns,
   the messages sit in the gaps between them. */
.mp-signal:nth-child(1) { left: 0;   top: 0; }
.mp-signal:nth-child(2) { left: 24%; top: 4%; }
.mp-signal:nth-child(3) { left: 49%; top: 0; }
.mp-signal:nth-child(4) { left: 74%; top: 8%; }
.mp-signal:nth-child(5) { left: 26%; top: 53%; }
.mp-signal:nth-child(6) { left: 0;   top: 58%; }
.mp-signal:nth-child(7) { left: 52%; top: 72%; }
/* How many signals fit is a property of the figure, not of the window. */
@container (max-width: 780px) { .mp-signal:nth-child(n + 6) { display: none; } }

/* They arrive once, when the model comes on screen. Without the script the
   markup stays visible, so the block never depends on the animation. */
.mp-social-tags.is-armed .mp-signal { opacity: 0; transform: translateY(16px) scale(.965); }
.mp-social-tags .mp-signal { transition: opacity .42s ease, transform .5s cubic-bezier(.2, .74, .3, 1); }
.mp-social-tags.is-armed.is-live .mp-signal { opacity: 1; transform: none; }
.mp-social-tags.is-armed.is-live .mp-signal:nth-child(1) { transition-delay: .04s; }
.mp-social-tags.is-armed.is-live .mp-signal:nth-child(2) { transition-delay: .19s; }
.mp-social-tags.is-armed.is-live .mp-signal:nth-child(3) { transition-delay: .34s; }
.mp-social-tags.is-armed.is-live .mp-signal:nth-child(4) { transition-delay: .49s; }
.mp-social-tags.is-armed.is-live .mp-signal:nth-child(5) { transition-delay: .64s; }
.mp-social-tags.is-armed.is-live .mp-signal:nth-child(6) { transition-delay: .79s; }
.mp-social-tags.is-armed.is-live .mp-signal:nth-child(7) { transition-delay: .94s; }

/* The model is enlarged and dropped by the camera in src/masterplan-model.js,
   not by stretching this canvas — stretching it covered the copy column. */
.mp-people {
  --bleed-x: calc(var(--edge) + clamp(30px, 6vw, 150px));
  --bleed-y: calc(58px + clamp(30px, 5vw, 110px));
}
.mp-people .mp-canvas-wrap {
  min-height: clamp(440px, 43vw, 680px);
  /* The figure grows to the left rather than sliding over: its right edge has
     to stay on the column, or the model ends up adrift from the copy. */
  width: calc(100% + var(--bleed-x));
  margin-left: calc(-1 * var(--bleed-x));
  margin-bottom: calc(-1 * var(--bleed-y));
}
.commercial-architecture-page [data-architecture-model] > .mp-canvas-wrap:not(.mp-architecture-model-wrap) { display: none; }
.mp-architecture-model-wrap { overflow: hidden; margin-bottom: 0 !important; background: #fff; }
.mp-architecture-model { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: #fff; }
/* The signals belong to the part of the figure the block actually shows, not
   to the part that runs off it. */
.mp-people .mp-social-tags { left: var(--bleed-x); bottom: var(--bleed-y); }
.mp-scenarios { --muted: #62666a; scroll-margin-top: 76px; background: var(--bone); padding-bottom: 64px; }
.mp-scenarios [hidden] { display: none !important; }
/* The heading and its explanation share one opening row before the scenario
   field. The smaller copy inherits the former supporting-text treatment. */
.mp-scenarios__head {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, .9fr);
  gap: clamp(40px, 5.5vw, 100px);
  align-items: start;
  padding: clamp(52px, 5.4vw, 88px) var(--edge) 0;
}
.mp-scenarios__title { margin: 0; font-weight: 500; font-size: clamp(34px, 4.65vw, 76px); line-height: 1.03; letter-spacing: -.04em; max-width: 22ch; text-wrap: balance; }
.mp-scenarios__summary { padding-top: .32em; }
/* The search runs edge to edge as a band — a field of nine on the left, the
   gate in the middle, the result at full size on the right — so the argument
   stands under it in two columns rather than squeezed into a side column. */
.mp-scenarios .mp-step { grid-template-columns: minmax(0, 1fr); padding-top: clamp(24px, 2.6vw, 44px); padding-bottom: 0; }
.mp-scenarios .mp-canvas-wrap { height: clamp(330px, 27vw, 440px); min-height: 0; flex: none; container: scenario-visual / inline-size; }
.mp-verification { position: absolute; z-index: 2; left: 45%; top: 9%; bottom: 9%; width: clamp(268px, 21.2vw, 376px); transform: translateX(-50%); display: grid; grid-template-columns: minmax(0, 1fr) clamp(42px, 3.4vw, 52px) minmax(0, .86fr); gap: clamp(6px, .6vw, 10px); pointer-events: none; }
.mp-verification__checks { display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: clamp(5px, .52vw, 8px); min-width: 0; margin: 0; padding: 0; list-style: none; }
.mp-verification__checks li { display: flex; align-items: center; min-width: 0; overflow: hidden; padding: 7px clamp(9px, .78vw, 13px); border: 1px solid rgb(32 33 36 / .32); border-radius: 12px; background: rgb(246 246 242 / .97); color: var(--ink); font-size: clamp(11px, .9vw, 14px); font-weight: 600; line-height: 1.14; letter-spacing: -.025em; text-transform: uppercase; }
.mp-verification__expert { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0; padding: 10px 0; border: 1px solid rgb(32 33 36 / .32); border-radius: 12px; background: rgb(246 246 242 / .97); color: var(--ink); font-size: clamp(9.5px, .78vw, 12px); font-weight: 600; line-height: 1.15; letter-spacing: -.025em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
.mp-verification__expert b { color: var(--accent); font-size: 15px; font-weight: 500; line-height: 1; }
/* The column keeps its outer edges; the joints inside move with the figures.
   masterplan.js writes flex-grow, so with no script the four stay equal. */
.mp-verification__programme { display: flex; flex-direction: column; gap: clamp(5px, .52vw, 8px); min-width: 0; margin: 0; padding: 0; list-style: none; }
.mp-programme-card { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; overflow: hidden; padding: 8px clamp(8px, .72vw, 12px); border: 1px solid rgb(32 33 36 / .18); border-radius: 12px; color: var(--ink); font-size: clamp(8.5px, .68vw, 11px); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; text-transform: uppercase; }
.mp-programme-card--housing { background: var(--housing); }.mp-programme-card--commerce { background: var(--commerce); }.mp-programme-card--social { background: var(--social); }.mp-programme-card--park { background: var(--park); }
.mp-programme-card__value { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; font-family: var(--font-body); font-size: clamp(13px, 1.06vw, 18px); font-weight: 700; line-height: 1; letter-spacing: -.035em; text-transform: none; font-variant-numeric: tabular-nums; }
.mp-programme-card__value strong { font: inherit; }.mp-programme-card__value small { font: inherit; font-size: .62em; font-weight: 600; letter-spacing: -.02em; }
.mp-scenarios .mp-copy { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 clamp(40px, 5.5vw, 100px); align-items: start; max-width: none; padding: clamp(26px, 2.8vw, 46px) var(--edge) 0; }
.mp-copy > .mp-copy__lead { grid-column: 1; grid-row: 1 / 5; margin: 0; font-size: clamp(21px, 2vw, 31px); line-height: 1.28; letter-spacing: -.038em; color: var(--ink); max-width: 36ch; }
.mp-copy > .mp-copy__body { grid-column: 2; grid-row: 1; }
.mp-scenarios .mp-copy > .mp-scenario-prompt { grid-column: 2; grid-row: 2; }
.mp-scenarios .mp-copy > .mp-priorities { grid-column: 2; grid-row: 3; margin-top: 14px; }
.mp-copy > .mp-scenario-outcome { grid-column: 2; grid-row: 4; }
/* The line that introduces the choice takes the same corner and paper as the
   boxes in the diagram above, and the width of the buttons it belongs to. */
.mp-copy > .mp-scenario-prompt { color: var(--ink); margin-top: 28px; max-width: none; padding: 11px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgb(246 246 242 / .97); }
.mp-scenario-outcome { border-top: 1px solid var(--line-dark); margin-top: 24px; padding-top: 20px; font-size: 14px; color: var(--muted); min-height: 100px; }
.mp-scenario-outcome > span { display: block; }
.mp-return { margin-top: 20px; }
.mp-return b { color: var(--ink); font-weight: 500; font-size: 28px; font-variant-numeric: tabular-nums; margin-right: 4px; }
.mp-comparison { padding: 0 var(--edge); }
.mp-priorities { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.22fr); gap: 10px; }
.mp-priorities button { display: flex; align-items: center; gap: 16px; min-width: 0; min-height: 64px; padding: 14px 18px; background: rgb(246 246 242 / .97); border: 1px solid var(--line-dark); border-radius: 12px; color: var(--ink); text-align: left; font-size: 14px; line-height: 1.25; letter-spacing: -.03em; transition: background-color 180ms ease, color 180ms ease; }
.mp-choice-index { font-size: 11px; opacity: .64; }
.mp-priorities button > span { min-width: 0; overflow-wrap: anywhere; }
.mp-priorities svg { width: 18px; height: 18px; margin-left: auto; opacity: 0; flex: 0 0 auto; }
.mp-priorities button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mp-priorities button[aria-pressed="true"] svg { opacity: 1; }
/* The five passes, named in the order of the gate in the diagram above: what
   the model puts every candidate through before one of them is drawn large. */
.mp-checks { padding: 0 var(--edge); margin-top: clamp(40px, 4.4vw, 68px); }
.mp-checks__head { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(40px, 5.5vw, 100px); align-items: end; padding-bottom: 24px; border-bottom: 1px solid var(--line-dark); }
.mp-checks__title { margin: 0; font-weight: 500; font-size: clamp(26px, 2.7vw, 44px); line-height: 1.08; letter-spacing: -.04em; }
.mp-checks__note { margin: 0; font-size: 15px; line-height: 1.5; letter-spacing: -.03em; color: var(--muted); max-width: 46ch; }
.mp-checks__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.mp-check { display: flex; flex-direction: column; border: 1px solid var(--line-dark); }
.mp-check__figure { display: block; width: 100%; height: auto; background: var(--paper); border-bottom: 1px solid var(--line); color: var(--ink); }
/* The drawing rules are set on the svg element, so weight and colour are given
   to the paths themselves: on a child, any rule beats what a parent hands down. */
.mp-check__figure path, .mp-check__figure circle { stroke-width: 1.4; }
.mp-check__ray { stroke: var(--accent); }
.mp-check__dash { stroke-dasharray: 7 5; }
.mp-check__solid { fill: rgb(32 33 36 / .3); stroke: none; }
.mp-check__shade { fill: rgb(32 33 36 / .14); stroke: none; }
.mp-check__body { display: flex; flex-direction: column; gap: 9px; padding: 16px 18px 20px; }
.mp-check__index { margin: 0; font-size: 11px; letter-spacing: -.02em; color: var(--muted); }
.mp-check h4 { margin: 0; font-weight: 500; font-size: 17px; line-height: 1.2; letter-spacing: -.035em; }
.mp-check__body p:last-child { margin: 0; font-size: 14px; line-height: 1.45; letter-spacing: -.02em; color: var(--muted); }
.mp-noscript { margin: 24px var(--edge); font-size: 14px; }
.mp-result { padding: 74px var(--edge) 80px; }
.mp-result__heading { display: flex; justify-content: space-between; gap: 32px; align-items: start; }
.mp-result h2 { font-size: clamp(38px, 4.6vw, 76px); font-weight: 500; line-height: 1.07; letter-spacing: -.04em; margin: 0; }
.mp-result__arrow { width: clamp(55px, 7vw, 96px); height: auto; flex: 0 0 auto; margin-top: 8px; }
.mp-result__body { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(40px, 5.5vw, 100px); margin-top: 54px; padding-top: 30px; border-top: 1px solid var(--line-dark); }
.mp-result__lead { font-size: clamp(22px, 2.4vw, 34px); line-height: 1.3; max-width: 33ch; margin: 0; }
.mp-result__body > div > p { font-size: 16px; line-height: 1.5; color: var(--muted); margin: 0 0 20px; }
.mp-result__body > div > .mp-result__handoff { color: var(--ink); }
.mp-result__trigger {
  appearance: none;
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 28px;
  padding: 16px 18px;
  border: 1px solid var(--accent);
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  letter-spacing: -.02em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}
.mp-result__trigger svg { width: 22px; height: 22px; flex: 0 0 auto; transition: transform 220ms var(--ease-out); }
.mp-result__trigger[aria-expanded="true"] { background: var(--accent); color: var(--paper); }
.mp-result__trigger[aria-expanded="true"] svg { transform: rotate(90deg); }
.mp-contact-form {
  display: grid;
  gap: 20px;
  margin-top: 22px;
  padding-top: 24px;
  border-top: 1px solid var(--line-dark);
}
.mp-contact-form[hidden] { display: none !important; }
.mp-contact-field { display: grid; gap: 8px; }
.mp-contact-field label {
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.mp-contact-field input,
.mp-contact-field textarea {
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  border-radius: 0;
  padding: 7px 0 12px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
}
.mp-contact-field textarea { min-height: 104px; resize: vertical; }
.mp-contact-field input::placeholder,
.mp-contact-field textarea::placeholder { color: color-mix(in srgb, var(--muted) 72%, transparent); opacity: 1; }
.mp-contact-field input:focus,
.mp-contact-field textarea:focus { outline: none; border-bottom-color: var(--accent); }
.mp-contact-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 11px; line-height: 1.5; color: var(--muted); }
.mp-contact-consent input { width: 16px; height: 16px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--accent); }
.mp-contact-consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.mp-contact-actions { display: grid; gap: 12px; }
.mp-contact-actions button {
  appearance: none;
  min-height: 54px;
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 14px 18px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.mp-contact-actions button:disabled { cursor: wait; opacity: .55; }
.mp-contact-status { min-height: 1.5em; font-size: 12px; line-height: 1.5; color: var(--muted); }
.mp-contact-status.is-success { color: var(--ink); }
.mp-contact-status.is-error { color: var(--accent); }
.mp-contact-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mp-result__trigger:focus-visible,
.mp-contact-actions button:focus-visible,
.mp-contact-consent a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.masterplan-page .site-footer { background: #202124; }
.masterplan-page .site-footer a { color: #f6f6f6; }
.masterplan-page .site-footer > * { font-size: inherit; letter-spacing: -.02em; }
.mp-back, .mp-choice-index { letter-spacing: -.02em; }
@media (hover: hover) {
  .mp-priorities button:not([aria-pressed="true"]):hover { background: rgb(32 33 36 / .06); }
  .mp-back:hover { color: var(--accent); }
  .mp-motion:hover { border-color: var(--ink); background: var(--bone); }
  .mp-result__trigger:hover { background: var(--accent); color: var(--paper); }
  .mp-contact-actions button:hover { background: var(--accent); border-color: var(--accent); }
}
@media (min-width: 1650px) { .mp-step { grid-template-columns: 1.5fr 1fr; }.mp-copy { max-width: 580px; }.mp-copy > p { max-width: 43ch; } }
@media (max-width: 1000px) { .mp-step { gap: 35px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }.mp-canvas-wrap { min-height: 340px; }
  .mp-copy h2 { font-size: 32px; }.mp-visual__note { display: none; }.mp-priorities button { gap: 10px; padding: 14px 12px; }
  .mp-checks__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }.mp-checks__head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
@container scenario-visual (max-width: 1150px) {
  .mp-verification { width: 268px; grid-template-columns: minmax(0, 1fr) 36px minmax(0, .86fr); gap: 6px; }
  .mp-verification__checks { gap: 5px; }
  .mp-verification__checks li { padding-inline: 7px; border-radius: 9px; font-size: 9px; }
  .mp-verification__expert { padding-block: 7px; border-radius: 9px; font-size: 8px; }
  .mp-verification__programme { gap: 5px; }
  .mp-programme-card { padding: 7px; border-radius: 9px; font-size: 8px; }
  .mp-programme-card__value { font-size: 13px; }
}
@container scenario-visual (max-width: 1119px) { .mp-verification { display: none; } }
@media (max-width: 700px) {
  .mp-header { height: 68px; gap: 16px; padding-block: 9px; }
  .mp-header .brand { width: 92px; }.mp-header .site-nav { display: none; }.mp-header .mp-motion { margin-left: auto; }.mp-header .lang-switch { font-size: 12px; }.mp-motion { width: 40px; height: 40px; padding: 10px; }
  .commercial-architecture-page .mp-header {
    height: auto;
    min-height: 68px;
    flex-wrap: wrap;
    align-content: center;
    row-gap: 5px;
    padding-bottom: 8px;
  }
  .commercial-architecture-page .mp-header .mp-motion { margin-left: auto; }
  .commercial-architecture-page .ca-mode-nav {
    order: 4;
    width: 100%;
    display: flex;
    margin: 0;
    padding-top: 3px;
    border-top: 1px solid var(--line);
    gap: 22px !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .commercial-architecture-page .ca-mode-nav::-webkit-scrollbar { display: none; }
  .commercial-architecture-page .ca-mode-nav button { flex: 0 0 auto; min-height: 44px; font-size: 10px; }
  .mp-intro { padding-top: 92px; padding-bottom: 32px; }.mp-intro__row { grid-template-columns: 1fr; gap: 24px; margin-top: 26px; }.mp-intro h1 { font-size: clamp(34px, 8.1vw, 54px); }.mp-intro__aside { max-width: 34ch; }.mp-intro__aside p:first-child { margin-bottom: 10px; font-size: 11px; }.mp-intro__aside p { font-size: 15px; }
  .mp-impact__lead, .mp-impact__stats { grid-template-columns: 1fr; }
  .mp-impact__lead > p { grid-column: 1; }
  .mp-impact__layers { grid-column: 1; display: flex; flex-wrap: wrap; gap: 9px 20px; }
  /* The longer heading has to stay inside the strip on one column. */
  .mp-impact__heading { max-width: none; font-size: clamp(23px, 7vw, 34px); }
  .mp-stat__note { max-width: none; }
  .mp-premise__body { grid-template-columns: 1fr; gap: 16px; }.mp-premise__mark { border-top: 0; padding-top: 0; }.mp-premise__text { border-top: 0; padding-top: 0; }
  .mp-step, .mp-people .mp-step { grid-template-columns: 1fr; gap: 26px; padding: 34px var(--edge) 46px; }
  .mp-visual { grid-row: auto; }.mp-copy { padding: 0; max-width: none; }.mp-copy h2 { font-size: 33px; margin-bottom: 18px; max-width: 17ch; }.mp-copy > p { font-size: 16px; max-width: 42ch; }
  .mp-canvas-wrap { height: 330px; min-height: 0; flex: auto; }.mp-visual figcaption { font-size: 11px; gap: 8px; }.mp-signal--post { width: 34cqw; }.mp-signal--chat { width: 40cqw; }
  .mp-signal:nth-child(1) { left: 0; top: 0; }.mp-signal:nth-child(2) { left: 0; top: 54%; }.mp-signal:nth-child(3) { left: 52%; top: 20%; }.mp-signal:nth-child(4) { left: 26%; top: 80%; }
  /* Four is as many as one column can hold over the model. */
  .mp-signal:nth-child(n + 5) { display: none; }
  .mp-people { --bleed-x: var(--edge); --bleed-y: 34px; }
  .mp-scenarios .mp-step { padding-top: 40px; padding-bottom: 22px; }.mp-copy > .mp-scenario-prompt { margin-top: 20px; }.mp-scenario-outcome { min-height: auto; margin-top: 18px; padding-top: 16px; font-size: 13px; }.mp-return { margin-top: 12px; }.mp-return b { font-size: 24px; }
  .mp-priorities { grid-template-columns: minmax(0, 1fr); gap: 8px; }.mp-priorities button { min-height: 52px; font-size: 13px; gap: 16px; padding: 12px 16px; }.mp-scenarios { padding-bottom: 38px; }
  .mp-scenarios .mp-canvas-wrap { height: 270px; }
  .mp-result { padding: 44px var(--edge); }.mp-result__heading { gap: 10px; }.mp-result h2 { font-size: clamp(30px, 7.6vw, 46px); }.mp-result__arrow { width: 35px; }.mp-result__body { grid-template-columns: 1fr; gap: 26px; margin-top: 30px; padding-top: 24px; }.mp-result__lead { font-size: 24px; }.mp-result__body > div > p { font-size: 15px; }
  /* Keep manual controls in the same viewport as the changing model. Grid
     flattens only neutral wrappers; figures, labels and buttons stay semantic. */
  .mp-scenarios { display: grid; grid-template-columns: minmax(0, 1fr); padding: 40px var(--edge) 38px; }
  .mp-scenarios .mp-step, .mp-scenarios .mp-comparison { display: contents; }
  .mp-scenarios__head { grid-row: 1; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 0 0 20px; }
  .mp-scenarios__title { padding: 0; font-size: clamp(31px, 8.2vw, 52px); max-width: 17ch; }
  .mp-scenarios__summary { padding-top: 0; max-width: 34ch; }
  .mp-scenarios .mp-visual { grid-row: 2; }
  .mp-scenarios .mp-copy { grid-row: 4; margin-top: 32px; display: block; padding: 0; }
  .mp-copy > .mp-copy__lead { font-size: 21px; max-width: 34ch; margin-bottom: 16px; }
  .mp-scenarios .mp-checks { grid-row: 5; padding: 0; margin-top: 34px; }
  .mp-scenarios   .mp-scenarios   .mp-checks__head { grid-template-columns: 1fr; gap: 14px; align-items: start; padding-bottom: 18px; }
  .mp-checks__title { font-size: 27px; }.mp-checks__note { font-size: 14px; max-width: 44ch; }
  .mp-check__body { padding: 14px 15px 17px; gap: 8px; }.mp-check h4 { font-size: 16px; }.mp-check__body p:last-child { font-size: 13px; }
}
@media (max-width: 520px) { .mp-checks__list { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .masterplan-page *, .masterplan-page *::before, .masterplan-page *::after { scroll-behavior: auto !important; transition: none !important; } }

/* ── Commercial architecture: the opening ────────────────────────────────
   Built on the palantir.com/warpspeed pattern — a photographic band with the
   bar floating over it, then the title and its one sentence of argument on
   graphite, then the companies. The proportions are
   measured from that page (a 45vw band; display at 10.9vw on a 1.0 leading;
   body at a third of the display; a 3.9vw subhead with the logo strip 70px
   under it) and written in this page's own tokens. The logos are prepared
   the way that page prepares its partners: one flat ink, one shared canvas
   of ratio 1.524, every mark optically centred and scaled to the same
   visual weight — see assets/logos/. */
.commercial-architecture-page .ca-hero,
.commercial-architecture-page .ca-partners {
  --ink: #f6f6f6;
  --muted: #b2b5b9;
  --line: rgb(246 246 246 / .22);
  color: var(--ink);
}
/* One continuous framed sequence links the photographic opening to the
   method below: identical outer gutters, graphite panels and 5px seams. */
.commercial-architecture-page .mp-territory {
  --ca-opening-outside: 20px;
  --ca-opening-seam: 5px;
  display: grid;
  gap: var(--ca-opening-seam);
  padding-inline: var(--ca-opening-outside);
  background: #111213;
}
.commercial-architecture-page .ca-hero {
  display: grid;
  gap: var(--ca-opening-seam);
  background: #111213;
}
.commercial-architecture-page .ca-hero__media,
.commercial-architecture-page .ca-hero__text,
.commercial-architecture-page .ca-partners { background: #1e2022; }
/* The bar is glass over the photograph, so the band starts at the page top
   and no padding is reserved for it. The band answers to the viewport's height
   as well as its width, so the title clears the fold on a laptop instead of
   waiting below it. */
.ca-hero__media { margin: 0; height: min(38vw, 58vh); min-height: 240px; }
.ca-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 54%; }
.ca-hero__text { padding: clamp(24px, 3.1vw, 40px) var(--edge) clamp(30px, 3.4vw, 44px); }
.ca-hero .mp-back { margin-bottom: clamp(14px, 1.8vw, 24px); }
.ca-hero h1 { margin: 0; font-weight: 500; font-size: clamp(40px, 10vw, 134px); line-height: 1; letter-spacing: -.035em; }
.ca-hero__body {
  margin: clamp(14px, 1.5vw, 20px) 0 0; max-width: 35ch;
  font-weight: 400; font-size: clamp(19px, 3.3vw, 42px); line-height: 1.14;
  letter-spacing: var(--track); color: var(--muted);
  /* Even lines rather than a single word left on the last one, as on the
     other display copy in this stylesheet. */
  text-wrap: balance;
}
.ca-partners { padding: clamp(50px, 5.6vw, 92px) var(--edge) clamp(44px, 5vw, 80px); }
.ca-partners__title { margin: 0; font-weight: 500; font-size: clamp(26px, 3.9vw, 50px); line-height: 1.06; letter-spacing: var(--track); }
/* Seven equal tracks: the cards carry their own padding, so an even grid
   reproduces the reference's spacing without measuring each mark. */
.ca-partners__strip {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: center;
  gap: clamp(12px, 1.6vw, 20px); margin: clamp(30px, 5.2vw, 70px) 0 0; padding: 0; list-style: none;
}
.ca-partners__strip img { display: block; width: 100%; height: auto; }
@media (max-width: 1000px) { .ca-partners__strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 3vw, 28px) 10px; } }
/* Seven marks never fill a narrow grid evenly, so the row centres itself and
   the remainder sits under the middle of the strip rather than off to one side. */
@media (max-width: 620px) {
  .ca-partners__strip { display: flex; flex-wrap: wrap; justify-content: center; }
  .ca-partners__strip li { flex: 0 0 calc((100% - 20px) / 3); }
}
@media (min-width: 960px) {
  .commercial-architecture-page .mp-territory { --ca-opening-outside: 50px; }
}

/* ── Commercial method: measured from Palantir Chain Reaction ───────────
   The page keeps Palantir's exact 5px seams, 50/20px outside gutters and
   blue-to-cream material, while the type remains the site's own Onest. */
.ca-method {
  --ca-method-outside: 20px;
  --ca-method-seam: 5px;
  --ca-method-black: #111213;
  --ca-method-panel: #1e2022;
  --ca-method-blue: #1290dd;
  --ca-method-cream: #fdefd6;
  padding: var(--ca-method-seam) var(--ca-method-outside) 0;
  background: var(--ca-method-black);
  color: var(--ca-method-cream);
}
.ca-method__statement {
  display: grid;
  place-items: center;
  margin-bottom: var(--ca-method-seam);
  padding: calc(2.25 * var(--ca-method-outside)) 0;
  background: var(--ca-method-panel);
}
.ca-method__statement h2 {
  width: 100%;
  margin: 0;
  padding-inline: clamp(18px, 4vw, 56px);
  background: linear-gradient(90deg, var(--ca-method-blue), var(--ca-method-cream));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font: 500 clamp(26px, 4.55vw, 58px)/1.05 var(--font-body);
  letter-spacing: -.03em;
  text-align: center;
  text-wrap: balance;
}
.ca-method__statement [hidden] { display: none; }
.ca-method__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ca-method-seam);
}
.ca-method__model,
.ca-method__content { aspect-ratio: 1; min-width: 0; }
.ca-method__model {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: linear-gradient(90deg, var(--ca-method-blue), var(--ca-method-cream));
}
.commercial-architecture-page[data-active-commercial-mode="retail"] .ca-method__model {
  background: var(--ca-method-cream);
}
.ca-method__model iframe {
  position: absolute;
  z-index: 1;
  top: -7%;
  left: 0;
  width: 100%;
  height: 114%;
  border: 0;
  background: transparent;
  pointer-events: none;
  transform: scale(.92);
  transform-origin: 50% 50%;
  transition: transform 1100ms cubic-bezier(.16, 1, .3, 1);
}
.ca-method__model[data-reveal="active"] iframe { transform: scale(1.1); }
.ca-method__model[data-motion="still"] iframe { transition: none; }
.ca-method__content [hidden] { display: none; }
.ca-method__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--ca-method-outside);
  background: var(--ca-method-cream);
  color: var(--ca-method-black);
}
.ca-method__content h3 {
  max-width: 300px;
  margin: 0;
  font: 500 clamp(22px, 3vw, 38px)/1.1 var(--font-body);
  letter-spacing: -.03em;
}
.ca-method__content p {
  max-width: 415px;
  margin: 0;
  font: 500 clamp(13px, 1.25vw, 16px)/1.25 var(--font-body);
  letter-spacing: -.03em;
}
@media (min-width: 960px) { .ca-method { --ca-method-outside: 50px; } }
@media (max-width: 759px) {
  .ca-method__grid { grid-template-columns: minmax(0, 1fr); }
  .ca-method__content { align-items: center; justify-content: center; gap: 32px; text-align: center; }
  .ca-method__content h3 { max-width: 280px; }
  .ca-method__content p { max-width: 300px; }
}

/* ── Commercial story: one method, three building types ──────────────────
   The approved opening remains untouched above. This continuation borrows
   the commercial page's 5px seams and blue / cream analytical material, then
   turns the brief into one legible route from demand to a project brief. */
.ca-story {
  --ca-story-outside: 20px;
  --ca-story-seam: 5px;
  --ca-story-black: #111213;
  --ca-story-panel: #1e2022;
  --ca-story-cream: #fdefd6;
  --ca-story-blue: #1290dd;
  --ca-story-paper: #f6f6f3;
  --ca-story-muted: #565957;
  display: flow-root;
  padding: 0 var(--ca-story-outside) var(--ca-story-outside);
  background: var(--ca-story-black);
  color: var(--ca-story-black);
}
.ca-story__mode[hidden] { display: none; }
.ca-story__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: clamp(48px, 7vw, 132px);
  align-items: end;
  padding: clamp(68px, 8vw, 136px) clamp(24px, 4.7vw, 76px) clamp(56px, 6.5vw, 108px);
  background: var(--ca-story-cream);
}
.ca-story__intro h2 {
  max-width: 12ch;
  margin: 0;
  font: 500 clamp(46px, 6.2vw, 92px)/.98 var(--font-body);
  letter-spacing: -.04em;
  text-wrap: balance;
}
.ca-story__lead {
  max-width: 610px;
  padding-top: clamp(20px, 2.2vw, 34px);
  border-top: 1px solid rgb(17 18 19 / .42);
}
.ca-story__lead p { margin: 0; font-size: clamp(16px, 1.28vw, 20px); line-height: 1.5; letter-spacing: var(--track-body); }
.ca-story__lead p + p { margin-top: 24px; color: var(--ca-story-muted); }
.ca-story__lead .ca-story__subtitle { color: var(--ca-story-black); font-size: clamp(20px, 1.7vw, 27px); line-height: 1.3; }

.ca-flow {
  position: sticky;
  z-index: 8;
  top: 100px;
  margin-top: var(--ca-story-seam);
  background: rgb(30 32 34 / .94);
  color: var(--ca-story-cream);
  backdrop-filter: blur(18px) saturate(85%);
  -webkit-backdrop-filter: blur(18px) saturate(85%);
}
.ca-flow ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.ca-flow li + li { border-left: 1px solid rgb(253 239 214 / .16); }
.ca-flow a {
  position: relative;
  min-height: 72px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 0 clamp(14px, 1.8vw, 28px);
  color: rgb(253 239 214 / .58);
  transition: color 160ms ease, background-color 160ms ease;
}
.ca-flow a::after {
  content: "";
  position: absolute;
  left: clamp(14px, 1.8vw, 28px);
  right: clamp(14px, 1.8vw, 28px);
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease-out);
}
.ca-flow a:hover,
.ca-flow a:focus-visible,
.ca-flow a[aria-current="step"] { color: var(--ca-story-cream); background: rgb(253 239 214 / .045); }
.ca-flow a[aria-current="step"]::after { transform: scaleX(1); }
.ca-flow span,
.ca-flow b { font: 500 11px/1 var(--font-body); letter-spacing: var(--track); text-transform: uppercase; }
.ca-flow span { color: var(--ca-story-blue); font-variant-numeric: tabular-nums; }

.ca-stage {
  scroll-margin-top: 184px;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: var(--ca-story-seam);
  margin-top: var(--ca-story-seam);
  background: var(--ca-story-black);
}
.ca-stage__copy {
  min-height: clamp(560px, 53vw, 760px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(38px, 4.2vw, 68px);
  background: var(--ca-story-paper);
}
.ca-stage__copy h3,
.ca-result__copy h3 {
  max-width: 15ch;
  margin: 0;
  font: 500 clamp(34px, 4vw, 62px)/1.02 var(--font-body);
  letter-spacing: -.04em;
  text-wrap: balance;
}
.ca-stage__copy > .ca-stage__subtitle,
.ca-stage__copy article > .ca-stage__subtitle,
.ca-result__subtitle {
  max-width: 34ch;
  margin: auto 0 18px;
  font-size: clamp(19px, 1.7vw, 26px);
  line-height: 1.28;
  letter-spacing: var(--track-body);
}
.ca-stage__copy > p:last-child,
.ca-stage__copy article > p:last-child,
.ca-result__copy > p:last-child {
  max-width: 67ch;
  margin: 0;
  color: var(--ca-story-muted);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.58;
  letter-spacing: var(--track-body);
}
.ca-stage__copy--stack { gap: 0; padding-block: 0; }
.ca-stage__copy--stack article {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: clamp(38px, 4.2vw, 68px);
}
.ca-stage__copy--stack article + article { border-top: 1px solid rgb(17 18 19 / .2); }
.ca-stage__copy--stack article h3 { font-size: clamp(28px, 3.05vw, 48px); }
.ca-stage__copy--stack article .ca-stage__subtitle { margin-top: clamp(54px, 6vw, 104px); }

.ca-signal-map,
.ca-system-flow,
.ca-plan-lab,
.ca-sync-board {
  position: relative;
  min-width: 0;
  min-height: clamp(560px, 53vw, 760px);
  overflow: hidden;
}
.ca-signal-map { background: var(--ca-story-panel); color: var(--ca-story-cream); }
.ca-signal-map > svg { position: absolute; inset: 8% 5% 13%; width: 90%; height: 79%; color: var(--ca-story-blue); }
.ca-signal-map > svg path { stroke-width: 1.4; opacity: .72; }
.ca-signal-map > svg circle { stroke-width: 1.2; opacity: .72; }
.ca-signal-map__node {
  position: absolute;
  min-width: clamp(112px, 11vw, 174px);
  min-height: 48px;
  display: grid;
  place-items: center;
  padding: 10px 14px;
  border: 1px solid rgb(253 239 214 / .36);
  background: rgb(30 32 34 / .86);
  color: var(--ca-story-cream);
  font-size: clamp(11px, .92vw, 14px);
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}
.ca-signal-map__node::before { content: ""; position: absolute; width: 7px; height: 7px; background: var(--ca-story-blue); border-radius: 50%; }
.ca-signal-map__node--a { top: 9%; left: 5%; }
.ca-signal-map__node--a::before { right: -4px; bottom: -4px; }
.ca-signal-map__node--b { top: 7%; right: 4%; }
.ca-signal-map__node--b::before { left: -4px; bottom: -4px; }
.ca-signal-map__node--c { top: 42%; left: 8%; }
.ca-signal-map__node--c::before { right: -4px; top: calc(50% - 4px); }
.ca-signal-map__node--d { right: 4%; bottom: 10%; }
.ca-signal-map__node--d::before { left: -4px; top: -4px; }
.ca-signal-map__node--e { left: 7%; bottom: 9%; }
.ca-signal-map__node--e::before { right: -4px; top: -4px; }
.ca-signal-map__core {
  position: absolute;
  inset: 50% auto auto 50%;
  width: clamp(112px, 13vw, 184px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 18px;
  border-radius: 50%;
  background: var(--ca-story-blue);
  color: var(--ca-story-black);
  font-size: clamp(15px, 1.32vw, 21px);
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}
.ca-signal-map > figcaption,
.ca-system-flow figcaption {
  position: absolute;
  right: clamp(20px, 2.3vw, 38px);
  bottom: clamp(18px, 2vw, 32px);
  left: clamp(20px, 2.3vw, 38px);
  padding-top: 14px;
  border-top: 1px solid rgb(253 239 214 / .24);
  color: rgb(253 239 214 / .72);
  font-size: 12px;
  line-height: 1.35;
  text-transform: uppercase;
}

.ca-stage--system .ca-stage__copy,
.ca-stage--economics .ca-stage__copy { order: 2; }
.ca-system-flow,
.ca-sync-board { order: 1; }
.ca-system-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, .72fr) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 30px);
  align-items: center;
  padding: clamp(44px, 5vw, 82px) clamp(22px, 3vw, 48px) clamp(82px, 7vw, 112px);
  background: var(--ca-story-blue);
  color: var(--ca-story-black);
}
.ca-system-flow::before,
.ca-system-flow::after { content: ""; position: absolute; top: 50%; height: 1px; background: rgb(17 18 19 / .45); }
.ca-system-flow::before { right: 52%; left: 23%; }
.ca-system-flow::after { right: 23%; left: 52%; }
.ca-system-flow__column { position: relative; z-index: 1; display: flex; flex-direction: column; border-top: 1px solid rgb(17 18 19 / .36); }
.ca-system-flow__column span {
  min-height: 54px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid rgb(17 18 19 / .36);
  background: rgb(253 239 214 / .86);
  font-size: clamp(11px, .9vw, 14px);
  line-height: 1.15;
  text-transform: uppercase;
}
.ca-system-flow__column--right span { justify-content: flex-end; text-align: right; }
.ca-system-flow__core {
  position: relative;
  z-index: 2;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgb(17 18 19 / .62);
  border-radius: 50%;
  background: var(--ca-story-cream);
  text-align: center;
}
.ca-system-flow__core span { color: var(--accent); font-size: clamp(28px, 3.4vw, 52px); line-height: .8; letter-spacing: -.04em; }
.ca-system-flow__core b { max-width: 11ch; font-size: clamp(11px, .95vw, 14px); line-height: 1.15; text-transform: uppercase; }
.ca-system-flow figcaption { border-color: rgb(17 18 19 / .28); color: rgb(17 18 19 / .72); }

.ca-plan-lab { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--ca-story-cream); }
.ca-plan-lab__variants { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; padding: clamp(22px, 2.8vw, 44px); background: var(--ca-story-cream); }
.ca-plan-lab__variants > span {
  position: relative;
  aspect-ratio: 1.35;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  grid-template-rows: .75fr 1.25fr;
  gap: 3px;
  padding: clamp(7px, 1vw, 13px);
  border: 1px solid rgb(17 18 19 / .25);
}
.ca-plan-lab__variants > span.is-selected { border-color: var(--ca-story-black); background: var(--ca-story-blue); }
.ca-plan-lab__variants > span.is-selected::after { content: ""; position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.ca-plan-lab__variants i { display: block; border: 1px solid currentColor; opacity: .58; }
.ca-plan-lab__variants i:nth-child(2) { grid-row: span 2; }
.ca-plan-lab__plan { position: relative; min-height: 360px; margin-inline: clamp(22px, 2.8vw, 44px); background: var(--ca-story-panel); color: var(--ca-story-cream); overflow: hidden; }
.ca-plan-lab__plan::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgb(253 239 214 / .08) 1px, transparent 1px), linear-gradient(90deg, rgb(253 239 214 / .08) 1px, transparent 1px); background-size: 12.5% 20%; }
.ca-plan-lab__zone {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  border: 1px solid rgb(253 239 214 / .48);
  background: rgb(30 32 34 / .8);
  font-size: clamp(10px, .82vw, 13px);
  line-height: 1.1;
  text-transform: uppercase;
}
.ca-plan-lab__zone--a { inset: 8% 62% 51% 5%; }
.ca-plan-lab__zone--b { inset: 17% 35% 20% 41%; }
.ca-plan-lab__zone--c { inset: 58% 70% 8% 8%; }
.ca-plan-lab__zone--d { inset: 10% 5% 46% 69%; }
.ca-plan-lab__plan svg { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; color: var(--ca-story-blue); }
.ca-plan-lab__plan svg path { stroke-width: 5; }
.ca-plan-lab__plan svg circle { fill: var(--accent); stroke: var(--ca-story-panel); stroke-width: 3; }
.ca-plan-lab figcaption {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  margin: clamp(20px, 2.5vw, 38px) clamp(22px, 2.8vw, 44px) clamp(22px, 2.8vw, 44px);
  padding-top: 14px;
  border-top: 1px solid rgb(17 18 19 / .28);
  font-size: 12px;
  line-height: 1.35;
  text-transform: uppercase;
}
.ca-plan-lab figcaption span { color: var(--ca-story-muted); }
.ca-plan-lab figcaption b { max-width: 42ch; text-align: right; }

.ca-sync-board {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: clamp(50px, 6vw, 96px) clamp(26px, 4vw, 64px);
  background: var(--ca-story-panel);
  color: var(--ca-story-cream);
}
.ca-sync-board > div { display: grid; grid-template-columns: minmax(125px, .48fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 48px); align-items: center; min-height: clamp(64px, 6vw, 86px); border-top: 1px solid rgb(253 239 214 / .22); }
.ca-sync-board > div:last-of-type { border-bottom: 1px solid rgb(253 239 214 / .22); }
.ca-sync-board span { font-size: clamp(12px, 1vw, 15px); line-height: 1.15; text-transform: uppercase; }
.ca-sync-board i { position: relative; height: 1px; background: rgb(253 239 214 / .22); }
.ca-sync-board i::before { content: ""; position: absolute; inset: -2px auto auto 0; width: var(--value); height: 5px; background: var(--ca-story-blue); }
.ca-sync-board i::after { content: ""; position: absolute; top: -5px; left: var(--value); width: 11px; height: 11px; border-radius: 50%; background: var(--ca-story-cream); transform: translateX(-50%); }
.ca-sync-board > div:last-of-type i::after { background: var(--accent); }
.ca-sync-board figcaption { margin-top: clamp(28px, 3vw, 48px); color: rgb(253 239 214 / .68); font-size: 12px; line-height: 1.35; text-transform: uppercase; }

.ca-result {
  scroll-margin-top: 184px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr);
  gap: clamp(46px, 7vw, 120px);
  margin-top: var(--ca-story-seam);
  padding: clamp(68px, 8vw, 132px) clamp(24px, 4.7vw, 76px) clamp(42px, 5vw, 80px);
  background: var(--ca-story-panel);
  color: var(--ca-story-cream);
}
.ca-result__copy h3 { max-width: 13ch; font-size: clamp(46px, 6vw, 88px); }
.ca-result__copy .ca-result__subtitle { margin-top: clamp(50px, 6vw, 94px); }
.ca-result__copy > p:last-child { color: rgb(253 239 214 / .66); }
.ca-result__deliverables { align-self: end; margin: 0; padding: 0; border-top: 1px solid rgb(253 239 214 / .32); list-style: none; }
.ca-result__deliverables li { min-height: 58px; display: flex; align-items: center; border-bottom: 1px solid rgb(253 239 214 / .32); font-size: clamp(12px, 1vw, 15px); line-height: 1.2; text-transform: uppercase; }
.ca-result__deliverables li::before { content: ""; width: 7px; height: 7px; flex: 0 0 auto; margin-right: 14px; border-radius: 50%; background: var(--ca-story-blue); }
.ca-result__cta {
  grid-column: 1 / -1;
  min-height: clamp(78px, 7vw, 104px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: clamp(22px, 3vw, 48px);
  padding: 0 clamp(22px, 3vw, 46px);
  background: var(--ca-story-blue);
  color: var(--ca-story-black);
  font-size: clamp(19px, 2vw, 31px);
  line-height: 1.1;
  letter-spacing: var(--track-body);
  transition: background-color 160ms ease, color 160ms ease;
}
.ca-result__cta:hover,
.ca-result__cta:focus-visible { background: var(--ca-story-cream); color: var(--ca-story-black); }
.ca-result__cta svg { width: 28px; height: 28px; flex: 0 0 auto; }

@media (min-width: 960px) { .ca-story { --ca-story-outside: 50px; } }
@media (max-width: 920px) {
  .ca-story__intro { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ca-story__lead { max-width: 680px; }
  .ca-stage { grid-template-columns: minmax(0, 1fr); }
  .ca-stage__copy,
  .ca-signal-map,
  .ca-system-flow,
  .ca-plan-lab,
  .ca-sync-board { min-height: 620px; }
  .ca-stage--system .ca-stage__copy,
  .ca-stage--economics .ca-stage__copy { order: 1; }
  .ca-system-flow,
  .ca-sync-board { order: 2; }
  .ca-result { grid-template-columns: minmax(0, 1fr); }
  .ca-result__deliverables { max-width: 680px; }
}
@media (max-width: 759px) {
  .ca-flow { position: static; overflow-x: auto; scrollbar-width: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .ca-flow::-webkit-scrollbar { display: none; }
  .ca-flow ol { width: max-content; grid-template-columns: repeat(5, 132px); }
  .ca-flow a { min-height: 62px; padding-inline: 14px; }
  .ca-flow a::after { right: 14px; left: 14px; }
  .ca-flow li + li { border-left-color: rgb(253 239 214 / .1); }
  .ca-stage,
  .ca-result { scroll-margin-top: 146px; }
}
@media (max-width: 620px) {
  .ca-story__intro { gap: 42px; padding: 58px 24px 50px; }
  .ca-story__intro h2 { max-width: 11ch; font-size: clamp(42px, 13vw, 64px); line-height: .98; }
  .ca-story__lead .ca-story__subtitle { font-size: 20px; }
  .ca-stage__copy { min-height: 520px; padding: 34px 24px; }
  .ca-stage__copy h3 { font-size: clamp(34px, 10vw, 48px); }
  .ca-stage__copy > .ca-stage__subtitle,
  .ca-stage__copy article > .ca-stage__subtitle { font-size: 19px; }
  .ca-stage__copy--stack { min-height: 0; padding-block: 0; }
  .ca-stage__copy--stack article { min-height: 520px; padding-block: 34px; }
  .ca-stage__copy--stack article .ca-stage__subtitle { margin-top: 58px; }
  .ca-signal-map,
  .ca-system-flow,
  .ca-plan-lab,
  .ca-sync-board { min-height: 520px; }
  .ca-signal-map__node { min-width: 104px; min-height: 42px; padding: 8px 10px; font-size: 10px; }
  .ca-signal-map__node--b { top: 11%; }
  .ca-signal-map__node--c { top: 39%; left: 3%; }
  .ca-signal-map__node--d { right: 3%; }
  .ca-signal-map__core { width: 116px; font-size: 14px; }
  .ca-system-flow { grid-template-columns: 1fr 104px 1fr; gap: 8px; padding: 34px 14px 78px; }
  .ca-system-flow__column span { min-height: 50px; padding: 8px; font-size: 9px; }
  .ca-system-flow__core { padding: 10px; }
  .ca-system-flow__core span { font-size: 28px; }
  .ca-system-flow__core b { font-size: 9px; }
  .ca-plan-lab__variants { padding: 20px 14px; }
  .ca-plan-lab__variants > span { padding: 6px; }
  .ca-plan-lab__plan { min-height: 330px; margin-inline: 14px; }
  .ca-plan-lab__zone { padding: 8px; font-size: 9px; }
  .ca-plan-lab figcaption { display: block; margin: 20px 14px 24px; }
  .ca-plan-lab figcaption b { display: block; margin-top: 8px; text-align: left; }
  .ca-sync-board { padding: 42px 24px; }
  .ca-sync-board > div { grid-template-columns: 112px 1fr; gap: 14px; min-height: 66px; }
  .ca-result { gap: 48px; padding: 58px 24px 30px; }
  .ca-result__copy h3 { font-size: clamp(42px, 13vw, 62px); }
  .ca-result__copy .ca-result__subtitle { margin-top: 58px; font-size: 20px; }
  .ca-result__cta { min-height: 92px; padding-inline: 20px; font-size: 19px; }
  .ca-result__cta svg { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .ca-flow a,
  .ca-flow a::after,
  .ca-result__cta { transition: none; }
}

/* Palantir Chain Reaction alignment: large framed scenes, sparse type and
   dark seams. Diagram UI stays out of this draft; each reserved surface is
   deliberately labelled until the final infographic is supplied. */
.ca-method__model.ca-visual-placeholder,
.ca-story__intro-visual {
  display: grid;
  place-items: center;
  color: var(--ca-method-black, #111213);
}
.ca-method__model.ca-visual-placeholder span,
.ca-story__intro-visual span,
.ca-story figure.ca-visual-placeholder::before {
  min-width: 154px;
  padding: 13px 18px;
  border: 1px solid currentColor;
  font: 500 11px/1 var(--font-body);
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}
.ca-story { padding-top: 0; }
.ca-story__intro {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto minmax(500px, 46vw);
  gap: 0 var(--ca-story-seam);
  align-items: stretch;
  padding: 0;
  background: var(--ca-story-black);
}
.ca-story__eyebrow {
  grid-column: 1 / -1;
  margin: 0;
  padding: clamp(74px, 7vw, 112px) 28px 22px;
  background: var(--ca-story-panel);
  color: var(--ca-story-cream);
  font: 500 11px/1 var(--font-body);
  letter-spacing: .14em;
  text-align: center;
}
.ca-story__eyebrow::before,
.ca-story__section-head > span::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 11px;
  background: var(--ca-story-cream);
}
.ca-story__intro h2 {
  grid-column: 1 / -1;
  max-width: 19ch;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 94px) clamp(78px, 7vw, 112px);
  background: var(--ca-story-panel);
  color: var(--ca-story-cream);
  font-size: clamp(48px, 5.5vw, 84px);
  line-height: .98;
  text-align: center;
}
.ca-story__intro-visual,
.ca-story__lead {
  min-width: 0;
  min-height: 100%;
  margin-top: var(--ca-story-seam);
}
.ca-story__intro-visual {
  background: linear-gradient(90deg, var(--ca-story-blue), var(--ca-story-cream));
  color: var(--ca-story-black);
}
.ca-story__lead {
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(42px, 4vw, 64px);
  border: 0;
  background: var(--ca-story-cream);
}
.ca-story__lead .ca-story__subtitle {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(28px, 3vw, 45px);
  line-height: 1.05;
  letter-spacing: -.035em;
}
.ca-story__lead p + p {
  max-width: 49ch;
  margin: auto 0 0;
  color: var(--ca-story-black);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.35;
}
.ca-story__section-head {
  min-height: clamp(380px, 40vw, 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(34px, 4vw, 58px);
  margin-top: var(--ca-story-seam);
  padding: clamp(60px, 7vw, 104px) 28px;
  background: var(--ca-story-panel);
  color: var(--ca-story-cream);
  text-align: center;
}
.ca-story__section-head > span {
  font: 500 11px/1 var(--font-body);
  letter-spacing: .14em;
}
.ca-story__section-head > p {
  max-width: 21ch;
  margin: 0;
  font: 500 clamp(40px, 5vw, 72px)/1.02 var(--font-body);
  letter-spacing: -.04em;
  text-wrap: balance;
}
.ca-story__section-head > p::first-line { color: var(--ca-story-blue); }
.ca-stage {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  scroll-margin-top: 130px;
}
.ca-stage__copy {
  min-height: clamp(460px, 43vw, 620px);
  padding: clamp(38px, 4vw, 62px);
  background: var(--ca-story-panel);
  color: var(--ca-story-cream);
}
.ca-stage__copy h3,
.ca-result__copy h3 {
  max-width: 17ch;
  color: var(--ca-story-cream);
  font-size: clamp(30px, 3.25vw, 50px);
  line-height: 1.03;
}
.ca-stage__copy > .ca-stage__subtitle,
.ca-stage__copy article > .ca-stage__subtitle,
.ca-result__subtitle {
  color: var(--ca-story-cream);
  font-size: clamp(18px, 1.65vw, 24px);
  line-height: 1.24;
}
.ca-stage__copy > p:last-child,
.ca-stage__copy article > p:last-child,
.ca-result__copy > p:last-child {
  color: rgb(253 239 214 / .68);
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.42;
}
.ca-stage__copy--stack {
  min-height: 0;
  gap: var(--ca-story-seam);
  padding: 0;
  background: var(--ca-story-black);
}
.ca-stage__copy--stack article {
  min-height: clamp(430px, 40vw, 570px);
  padding: clamp(38px, 4vw, 62px);
  border: 0;
  background: var(--ca-story-panel);
}
.ca-stage__copy--stack article + article { border-top: 0; }
.ca-stage__copy--stack article h3 { font-size: clamp(28px, 3vw, 46px); }
.ca-stage__copy--stack article .ca-stage__subtitle { margin-top: auto; }
.ca-story figure.ca-visual-placeholder {
  min-width: 0;
  min-height: clamp(460px, 43vw, 620px);
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  gap: 0;
  place-items: center;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--ca-story-black);
}
.ca-story figure.ca-visual-placeholder > * { display: none; }
.ca-story figure.ca-visual-placeholder::before {
  content: "ИНФОГРАФИКА";
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  background: transparent;
  transform: none;
}
.ca-story figure.ca-visual-placeholder::after { content: none; }
html[lang="en"] .ca-story figure.ca-visual-placeholder::before { content: "INFOGRAPHIC"; }
.ca-stage--signal figure.ca-visual-placeholder,
.ca-stage--scenarios figure.ca-visual-placeholder { background: linear-gradient(90deg, var(--ca-story-blue), var(--ca-story-cream)); }
.ca-stage--system figure.ca-visual-placeholder,
.ca-stage--economics figure.ca-visual-placeholder { background: var(--ca-story-cream); }
.ca-stage--scenarios figure.ca-visual-placeholder,
.ca-stage--economics figure.ca-visual-placeholder { min-height: auto; }

/* One continuous graphite field replaces the former pale gradient. The KRT
   social scan is reused here; only the city layer is mirrored. */
.ca-stage--social-scan {
  gap: 0;
  overflow: hidden;
  background: var(--ca-story-panel);
}
.ca-stage--social-scan .ca-stage__copy {
  position: relative;
  z-index: 3;
  justify-content: flex-start;
  background: transparent;
  color: var(--ca-story-cream);
}
.ca-stage--social-scan .ca-stage__copy h3,
.ca-stage--social-scan .ca-stage__subtitle { color: var(--ca-story-cream); }
.ca-stage--social-scan .ca-stage__subtitle { margin-top: clamp(32px, 2.6vw, 40px); }
.ca-stage--social-scan .ca-stage__copy > p:last-child { color: rgb(253 239 214 / .68); }
.ca-preference-evidence {
  display: flex;
  align-items: flex-start;
  gap: clamp(5px, .55vw, 9px);
  margin: clamp(26px, 2.8vw, 42px) clamp(-32px, -2.2vw, -20px) 0 0;
}
.ca-preference-evidence__item {
  min-width: 0;
  flex: var(--evidence-share) 1 0;
  display: grid;
  grid-template-rows: 24px 122px;
  gap: 6px;
  margin: 0;
  transition: flex-grow 1250ms cubic-bezier(.16, 1, .3, 1);
}
.ca-preference-evidence[data-motion="still"] .ca-preference-evidence__item { transition: none; }
.ca-preference-evidence__item figcaption {
  min-width: 0;
  min-height: 24px;
  display: block;
}
.ca-preference-evidence__item figcaption strong {
  color: rgb(253 239 214 / .72);
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ca-preference-evidence__item img {
  width: 100%;
  height: 122px;
  min-height: 122px;
  display: block;
  object-fit: cover;
  border-radius: 13px;
  filter: saturate(.78) contrast(.94);
  box-shadow: 0 13px 28px rgb(6 8 10 / .24);
}
.ca-preference-evidence__item:nth-child(3) img { object-position: 50% 45%; }
.ca-preference-evidence__item:nth-child(4) img { object-position: 57% 54%; }
.ca-preference-evidence__item:nth-child(5) img { object-position: 31% 55%; }
.ca-preference-evidence__note {
  max-width: 44ch;
  margin: 17px 0 0;
  color: rgb(253 239 214 / .82);
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.24;
  letter-spacing: -.018em;
  text-wrap: balance;
}
.ca-preference-evidence__note strong { color: var(--ca-story-cream); font-weight: 500; }
.ca-social-scan {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: clamp(460px, 43vw, 620px);
  margin: 0;
  overflow: hidden;
  background: transparent;
  container-type: inline-size;
}
.ca-social-scan__city {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: -2%;
  width: 112%;
  max-width: none;
  height: auto;
  object-position: left bottom;
  transform: scaleX(-1);
  transform-origin: 50% 100%;
  filter: saturate(.72) contrast(.98);
}
.ca-social-scan__signals {
  z-index: 2;
  inset: clamp(18px, 2.4vw, 38px) clamp(20px, 2.8vw, 44px) 0;
}
.ca-social-scan__sink {
  position: absolute;
  z-index: 5;
  left: 22px;
  top: 43%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: none;
  opacity: .86;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ca-social-scan__signals.is-live[data-motion="flow"] ~ .ca-social-scan__sink {
  animation: ca-social-sink-intake 2s cubic-bezier(.16, 1, .3, 1) infinite both;
}
.ca-social-scan .mp-signal {
  --signal-duration: 34s;
  --signal-drift: 0px;
  --signal-rise: -340px;
  --signal-sink-x: 0px;
  --signal-sink-y: -120px;
  --signal-sink-mid-x: 0px;
  --signal-sink-mid-y: -180px;
  display: block;
  right: auto;
  margin: 0;
  isolation: isolate;
  opacity: 1;
  transform-origin: 50% 50%;
  transition: none;
  will-change: transform, opacity;
}
.ca-social-scan .mp-signal--post {
  width: min(20cqw, 132px);
  background: transparent;
  box-shadow: none;
}
.ca-social-scan .mp-signal--chat { width: min(24cqw, 158px); }
.ca-social-scan .mp-signal--chat .mp-signal__source { color: rgb(253 239 214 / .52); }
.ca-social-scan .ca-social-signal--whatsapp { --card: #d9fdd3; }
.ca-social-scan .ca-social-signal--whatsapp .mp-signal__source { color: rgb(151 245 178 / .72); }
.ca-social-scan .ca-social-signal--whatsapp .mp-signal__bubble {
  color: #12251a;
  box-shadow: 0 13px 30px rgb(8 10 14 / .38);
}
.ca-social-scan .ca-social-signal--whatsapp .mp-signal__time { color: #66806e; }
.ca-social-signal__card {
  position: relative;
  display: block;
  margin: 0;
  transform-origin: 50% 100%;
  will-change: opacity, filter, transform;
}
.ca-social-signal > .ca-social-signal__card {
  z-index: 1;
}
.ca-social-scan .mp-signal--post .ca-social-signal__card {
  overflow: hidden;
  border-radius: 13px;
  background: var(--card);
  box-shadow: 0 15px 34px rgb(8 10 14 / .46);
}
.ca-social-signal__fragment-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  transform-origin: 50% 100%;
  pointer-events: none;
  will-change: opacity, transform;
}
.ca-social-signal__fragment {
  position: absolute;
  display: block;
  overflow: hidden;
  will-change: opacity, filter, transform;
}
.ca-social-signal__fragment-copy {
  position: absolute;
  margin: 0;
  max-width: none;
  transform: none !important;
  animation: none !important;
  will-change: auto;
}
.ca-social-signal__data {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--piece-columns), minmax(0, 1fr));
  grid-template-rows: repeat(var(--piece-rows), minmax(0, 1fr));
  width: auto;
  min-width: 0;
  padding: 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #79f29d;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(6.5px, 1.05cqw, 8.2px);
  font-weight: 680;
  line-height: .9;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 5px 12px rgb(72 238 122 / .2);
  pointer-events: none;
}
.ca-social-signal__code-piece {
  --intake-delay: 0s;
  --pile-x: 0px;
  --pile-y: 0px;
  --pile-mid-x: 0px;
  --pile-mid-y: 0px;
  --pile-rotate: 0deg;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: inherit;
  white-space: nowrap;
  opacity: 0;
  will-change: opacity, filter, transform;
}

/* Signals arrive every two seconds. Their longer card phase keeps two or three
   readable posts on screen while older signals resolve into data. */
.ca-social-scan .mp-signal:nth-child(1)  { left: 22%; top: 80%; --signal-delay: -.4s; }
.ca-social-scan .mp-signal:nth-child(2)  { left: 48%; top: 72%; --signal-delay: -2.4s; }
.ca-social-scan .mp-signal:nth-child(3)  { left: 67%; top: 54%; --signal-delay: -4.4s; }
.ca-social-scan .mp-signal:nth-child(4)  { left: 82%; top: 43%; --signal-delay: -6.4s; }
.ca-social-scan .mp-signal:nth-child(5)  { left: 33%; top: 74%; --signal-delay: -8.4s; }
.ca-social-scan .mp-signal:nth-child(6)  { left: 58%; top: 83%; --signal-delay: -10.4s; }
.ca-social-scan .mp-signal:nth-child(7)  { left: 76%; top: 68%; --signal-delay: -12.4s; }
.ca-social-scan .mp-signal:nth-child(8)  { left: 45%; top: 58%; --signal-delay: -14.4s; }
.ca-social-scan .mp-signal:nth-child(9)  { left: 87%; top: 74%; --signal-delay: -16.4s; }
.ca-social-scan .mp-signal:nth-child(10) { left: 63%; top: 77%; --signal-delay: -18.4s; }
.ca-social-scan .mp-signal:nth-child(11) { left: 28%; top: 66%; --signal-delay: -20.4s; }
.ca-social-scan .mp-signal:nth-child(12) { left: 54%; top: 52%; --signal-delay: -22.4s; }
.ca-social-scan .mp-signal:nth-child(13) { left: 79%; top: 84%; --signal-delay: -24.4s; }
.ca-social-scan .mp-signal:nth-child(14) { left: 20%; top: 82%; --signal-delay: -26.4s; }
.ca-social-scan .mp-signal:nth-child(15) { left: 72%; top: 63%; --signal-delay: -28.4s; }
.ca-social-scan .mp-signal:nth-child(16) { left: 65%; top: 86%; --signal-delay: -30.4s; }
.ca-social-scan .mp-signal:nth-child(17) { left: 90%; top: 57%; --signal-delay: -32.4s; }

.ca-social-scan__signals.is-armed:not(.is-live) .mp-signal { opacity: 0; }
.ca-social-scan__signals.is-armed.is-live[data-motion="flow"] .mp-signal {
  animation: ca-social-signal-flow var(--signal-duration) linear var(--signal-delay) infinite both;
}
.ca-social-scan__signals.is-armed.is-live[data-motion="flow"] .ca-social-signal > .ca-social-signal__card {
  animation: ca-social-card-pop var(--signal-duration) linear var(--signal-delay) infinite both;
}
.ca-social-scan__signals.is-armed.is-live[data-motion="flow"] .ca-social-signal__fragment-layer {
  animation: ca-social-fragment-shell var(--signal-duration) linear var(--signal-delay) infinite both;
}
.ca-social-scan__signals.is-armed.is-live[data-motion="flow"] .ca-social-signal__fragment {
  animation: ca-social-fragment-dissolve var(--signal-duration) linear calc(var(--signal-delay) + var(--piece-delay)) infinite both;
}
.ca-social-scan__signals.is-armed.is-live[data-motion="flow"] .ca-social-signal__code-piece {
  animation:
    ca-social-code-visibility var(--signal-duration) linear calc(var(--signal-delay) + var(--piece-delay)) infinite both,
    ca-social-code-intake var(--signal-duration) linear calc(var(--signal-delay) + var(--intake-delay)) infinite both;
}

/* Without script, and when motion is intentionally paused, the first four
   signals remain as a composed still rather than leaving an empty city. */
.ca-social-scan__signals:not(.is-armed) .mp-signal,
.ca-social-scan__signals[data-motion="still"] .mp-signal { display: none; opacity: 0; transform: none; animation: none; }
.ca-social-scan__signals:not(.is-armed) .mp-signal:nth-child(-n + 4),
.ca-social-scan__signals[data-motion="still"].is-live .mp-signal:nth-child(-n + 4) { display: block; opacity: 1; }
.ca-social-scan__signals:not(.is-armed) .mp-signal:nth-child(1),
.ca-social-scan__signals[data-motion="still"].is-live .mp-signal:nth-child(1) { left: 1%; top: 5%; }
.ca-social-scan__signals:not(.is-armed) .mp-signal:nth-child(2),
.ca-social-scan__signals[data-motion="still"].is-live .mp-signal:nth-child(2) { left: 31%; top: 17%; }
.ca-social-scan__signals:not(.is-armed) .mp-signal:nth-child(3),
.ca-social-scan__signals[data-motion="still"].is-live .mp-signal:nth-child(3) { left: 66%; top: 3%; }
.ca-social-scan__signals:not(.is-armed) .mp-signal:nth-child(4),
.ca-social-scan__signals[data-motion="still"].is-live .mp-signal:nth-child(4) { left: 48%; top: 56%; }
.ca-social-scan__signals:not(.is-armed) .ca-social-signal__card,
.ca-social-scan__signals[data-motion="still"] .ca-social-signal__card { opacity: 1; clip-path: inset(0); filter: none; animation: none; }
.ca-social-scan__signals:not(.is-armed) .ca-social-signal__fragment-layer,
.ca-social-scan__signals[data-motion="still"] .ca-social-signal__fragment-layer,
.ca-social-scan__signals:not(.is-armed) .ca-social-signal__data,
.ca-social-scan__signals[data-motion="still"] .ca-social-signal__data { display: none; }

@keyframes ca-social-signal-flow {
  0%, 2.75% { opacity: 1; transform: translate3d(-50%, -100%, 0); }
  11.25% { opacity: 1; transform: translate3d(calc(-50% + 4px), calc(-100% - 92px), 0); }
  17% {
    opacity: 1;
    transform: translate3d(calc(-50% + 1px), calc(-100% - 148px), 0);
    animation-timing-function: cubic-bezier(.58, .05, .82, .28);
  }
  18.75% {
    opacity: 1;
    transform: translate3d(calc(-50% + 3px), calc(-100% - 194px), 0);
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
  21.55% {
    opacity: 1;
    transform: translate3d(calc(-50% + var(--signal-sink-mid-x)), calc(-50% + var(--signal-sink-mid-y)), 0) rotate(-1deg);
    animation-timing-function: cubic-bezier(.24, .68, .3, 1);
  }
  23.4%, 28.2% {
    opacity: 1;
    transform: translate3d(calc(-50% + var(--signal-sink-x)), calc(-50% + var(--signal-sink-y)), 0);
  }
  28.5%, 100% {
    opacity: 0;
    transform: translate3d(calc(-50% + var(--signal-sink-x)), calc(-50% + var(--signal-sink-y)), 0);
  }
}
@keyframes ca-social-card-pop {
  0%, .45% { opacity: 0; filter: blur(2px); transform: translateY(7px) scale(.04); }
  .675% { opacity: 1; filter: none; transform: translateY(5px) scale(.1); }
  1.95% { opacity: 1; transform: translateY(-2px) scale(1.08); }
  2.7% { opacity: 1; transform: translateY(1px) scale(.985); }
  3.25%, 11% { opacity: 1; filter: none; transform: none; }
  12.25%, 100% { opacity: 0; filter: blur(1.6px); transform: scale(.99); }
}
@keyframes ca-social-fragment-shell {
  0%, .45% { opacity: 0; transform: translateY(7px) scale(.04); }
  .675% { opacity: 1; transform: translateY(5px) scale(.1); }
  1.95% { opacity: 1; transform: translateY(-2px) scale(1.08); }
  2.7% { opacity: 1; transform: translateY(1px) scale(.985); }
  3.25%, 100% { opacity: 1; transform: none; }
}
@keyframes ca-social-fragment-dissolve {
  0%, 11% { opacity: 1; filter: none; transform: none; }
  12% { opacity: .88; }
  14%, 100% { opacity: 0; filter: blur(1.2px); transform: translate3d(var(--piece-x), var(--piece-y), 0) rotate(var(--piece-rotate)) scale(.78); }
}
@keyframes ca-social-code-visibility {
  0%, 11.25% { opacity: 0; filter: blur(1.8px); }
  12.25% { opacity: .18; }
  14%, 27.8% { opacity: 1; filter: none; }
  28.45%, 100% { opacity: 0; filter: blur(.45px); }
}
@keyframes ca-social-code-intake {
  0%, 18.75% { transform: translate3d(var(--code-x), var(--code-y), 0) rotate(var(--code-rotate)) scale(1); }
  21.55% { transform: translate3d(var(--pile-mid-x), var(--pile-mid-y), 0) rotate(var(--pile-rotate)) scale(1); }
  23.4%, 100% { transform: translate3d(var(--pile-x), var(--pile-y), 0) rotate(0deg) scale(1); }
}
@keyframes ca-social-sink-intake {
  0%, 35%, 88%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(5.2); box-shadow: none; }
  42% { opacity: 1; transform: translate(-72%, -50%) scaleX(5.8) scaleY(3.6); box-shadow: none; }
  52%, 64% { opacity: .86; transform: translate(-50%, -50%) scale(1); box-shadow: none; }
  74% { opacity: .94; transform: translate(-50%, -50%) scale(3); box-shadow: none; }
}

/* The social scan's right-hand story is a photographic network: people stay
   legible while a restrained red signal layer shows data travelling from each
   device into one shared point. */
.ca-people-network .ca-social-scan__city,
.ca-people-network .ca-social-scan__signals,
.ca-people-network .ca-social-scan__sink { display: none !important; }
.ca-people-network {
  isolation: isolate;
  overflow: hidden;
  background: var(--ca-story-panel);
}
.ca-people-network__people,
.ca-people-network__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.ca-people-network__people {
  z-index: 2;
  object-fit: contain;
  object-position: 50% 50%;
  filter: saturate(.86) contrast(.98);
}
.ca-people-network__lines {
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.ca-people-network__lines--front { z-index: 3; }
.ca-people-network__paths path,
.ca-people-network__flows path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ca-people-network__paths path { stroke-width: 1.15; opacity: .48; }
.ca-people-network__flows path {
  stroke-width: 2.35;
  stroke-dasharray: 1.5 8.5;
  stroke-dashoffset: 0;
  opacity: 0;
  animation: ca-people-network-flow 2.8s linear var(--flow-delay, 0s) infinite;
  animation-play-state: paused;
  will-change: stroke-dashoffset, opacity;
}
.ca-people-network.is-live .ca-people-network__flows path {
  animation-play-state: running;
  opacity: .9;
}
.ca-people-network__nodes {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}
.ca-people-network__node,
.ca-people-network__sink {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 7px;
  height: 7px;
  display: block;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%) scale(.72);
  opacity: .42;
  animation: ca-people-network-node 1.9s ease-in-out var(--node-delay, 0s) infinite;
  animation-play-state: paused;
  will-change: transform, opacity;
}
.ca-people-network.is-live .ca-people-network__node,
.ca-people-network.is-live .ca-people-network__sink {
  animation-play-state: running;
}
.ca-people-network__node:nth-child(2n) { --node-delay: -.44s; }
.ca-people-network__node:nth-child(3n) { --node-delay: -.92s; }
.ca-people-network__node:nth-child(5n) { --node-delay: -1.28s; }
.ca-people-network__node i,
.ca-people-network__sink i {
  position: absolute;
  inset: -4px;
  border: 1px solid rgb(239 43 36 / .46);
  border-radius: 50%;
  opacity: .52;
}
.ca-people-network__sink {
  width: 11px;
  height: 11px;
  opacity: .92;
  transform: translate(-50%, -50%) scale(.9);
  animation-duration: 2.4s;
}
.ca-people-network__sink i { inset: -7px; opacity: .35; }
@keyframes ca-people-network-flow {
  0% { stroke-dashoffset: 0; opacity: .1; }
  12% { opacity: .88; }
  72% { opacity: .82; }
  100% { stroke-dashoffset: -20; opacity: .1; }
}
@keyframes ca-people-network-node {
  0%, 100% { opacity: .4; transform: translate(-50%, -50%) scale(.72); }
  48% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .ca-people-network__flows path { animation: none; opacity: .58; }
  .ca-people-network__node,
  .ca-people-network__sink { animation: none; opacity: .86; transform: translate(-50%, -50%) scale(1); }
}

/* Social observations now read as a single causal scene: signals rise from
   the city, then their red traces resolve into the architectural parameters
   fixed along the top edge. The previous people-network layers remain in the
   document as a fallback source, but are not painted in this authored scene. */
.ca-city-analysis {
  min-height: clamp(620px, 56vw, 780px);
  background: var(--ca-story-panel);
  isolation: isolate;
  overflow: hidden;
}
.ca-city-analysis > .ca-social-scan__city,
.ca-city-analysis > .ca-social-scan__signals,
.ca-city-analysis > .ca-social-scan__sink,
.ca-city-analysis > .ca-people-network__people,
.ca-city-analysis > .ca-people-network__lines,
.ca-city-analysis > .ca-people-network__nodes { display: none !important; }
.ca-city-analysis__city {
  position: absolute;
  z-index: 1;
  left: -7%;
  bottom: -4%;
  width: 120%;
  max-width: none;
  height: auto;
  display: block;
  filter: saturate(.66) brightness(.86) contrast(.96);
  opacity: .94;
  pointer-events: none;
}
.ca-city-analysis .ca-preference-evidence {
  position: absolute;
  z-index: 6;
  top: clamp(24px, 2.6vw, 38px);
  left: clamp(20px, 2.4vw, 36px);
  right: clamp(20px, 2.4vw, 36px);
  margin: 0;
  gap: clamp(5px, .55vw, 9px);
}
.ca-city-analysis .ca-preference-evidence__item {
  grid-template-rows: 26px clamp(104px, 9.5vw, 124px);
  gap: 7px;
  opacity: .82;
  animation: ca-city-parameter-read 18s linear var(--parameter-delay, 0s) infinite both;
  animation-play-state: paused;
  will-change: opacity, filter;
}
.ca-city-analysis.is-live .ca-preference-evidence__item { animation-play-state: running; }
.ca-city-analysis .ca-preference-evidence__item figcaption { min-height: 26px; }
.ca-city-analysis .ca-preference-evidence__item figcaption strong {
  color: rgb(253 239 214 / .78);
  font-size: clamp(16px, 1.35vw, 20px);
}
.ca-city-analysis .ca-preference-evidence__item img {
  height: clamp(104px, 9.5vw, 124px);
  min-height: clamp(104px, 9.5vw, 124px);
  border-radius: 13px;
  filter: saturate(.72) contrast(.94) brightness(.88);
  box-shadow: 0 14px 32px rgb(4 6 8 / .34);
}
.ca-city-analysis__links {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
}
.ca-city-analysis__links path {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  animation-duration: 18s;
  animation-timing-function: linear;
  animation-delay: var(--link-delay, 0s);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-play-state: paused;
  will-change: stroke-dashoffset, opacity;
}
.ca-city-analysis.is-live .ca-city-analysis__links path { animation-play-state: running; }
.ca-city-analysis__link-base path {
  stroke-width: 1.05;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  animation-name: ca-city-link-draw;
}
.ca-city-analysis__link-flow path {
  stroke-width: 2.1;
  stroke-dasharray: .012 .052;
  stroke-dashoffset: .18;
  opacity: 0;
  animation-name: ca-city-link-flow;
}
.ca-city-analysis__origins,
.ca-city-analysis__signals {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}
.ca-city-analysis__origins { z-index: 4; }
.ca-city-analysis__origins i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 7px;
  height: 7px;
  display: block;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.55);
  animation: ca-city-origin 18s linear var(--origin-delay, 0s) infinite both;
  animation-play-state: paused;
  will-change: opacity, transform;
}
.ca-city-analysis.is-live .ca-city-analysis__origins i { animation-play-state: running; }
.ca-city-analysis__signals .ca-city-signal {
  left: var(--x) !important;
  top: var(--y) !important;
  right: auto !important;
  margin: 0;
  opacity: 0;
  transform: translate3d(-50%, -100%, 0) translateY(12px) scale(.06);
  transform-origin: 50% 100%;
  animation: ca-city-signal-rise 18s linear var(--signal-delay, 0s) infinite both;
  animation-play-state: paused;
  will-change: transform, opacity, filter;
}
.ca-city-analysis.is-live .ca-city-signal { animation-play-state: running; }
.ca-city-analysis__signals .ca-city-signal.mp-signal--post {
  width: min(18cqw, 124px);
  overflow: hidden;
  border-radius: 13px;
  background: #fdfdfc;
  box-shadow: 0 16px 34px rgb(4 6 8 / .48);
}
.ca-city-analysis__signals .ca-city-signal.mp-signal--chat { width: min(22cqw, 148px); }
.ca-city-analysis__signals .ca-city-signal .mp-signal__body { gap: 0; }
.ca-city-analysis__signals .ca-city-signal .mp-signal__source { font-size: 8px; }
.ca-city-analysis__signals .ca-city-signal .mp-signal__text { font-size: 10.5px; }
.ca-city-analysis__signals .ca-city-signal--whatsapp { --card: #d9fdd3; }
.ca-city-analysis__signals .ca-city-signal--whatsapp .mp-signal__bubble {
  color: #12251a;
  box-shadow: 0 14px 30px rgb(4 6 8 / .42);
}
.ca-city-analysis__signals .ca-city-signal--whatsapp .mp-signal__source { color: rgb(151 245 178 / .72); }
.ca-city-analysis__signals .ca-city-signal--whatsapp .mp-signal__time { color: #66806e; }

/* A paused or not-yet-initialised block remains an intentional still. */
.ca-city-analysis:not(.is-live) .ca-city-signal:nth-child(-n + 4) {
  opacity: 1;
  filter: none;
  transform: translate3d(-50%, -100%, 0) translateY(-38px) scale(1);
}
.ca-city-analysis:not(.is-live) .ca-city-analysis__origins i:nth-child(-n + 4) {
  opacity: .86;
  transform: translate(-50%, -50%) scale(1);
}
.ca-city-analysis:not(.is-live) .ca-city-analysis__link-base path:nth-child(-n + 4) {
  stroke-dashoffset: 0;
  opacity: .32;
}

@keyframes ca-city-signal-rise {
  0%, 3.5% {
    opacity: 0;
    filter: blur(2px);
    transform: translate3d(-50%, -100%, 0) translateY(12px) scale(.06);
  }
  5.4% {
    opacity: 1;
    filter: none;
    transform: translate3d(-50%, -100%, 0) translateY(-5px) scale(1.06);
    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  }
  7.2% { opacity: 1; transform: translate3d(-50%, -100%, 0) translateY(-12px) scale(.99); }
  9%, 18% { opacity: 1; filter: none; transform: translate3d(-50%, -100%, 0) translateY(-16px) scale(1); }
  56% { opacity: 1; filter: none; transform: translate3d(-50%, -100%, 0) translateY(-48px) scale(1); }
  65% { opacity: 0; filter: blur(1.6px); transform: translate3d(-50%, -100%, 0) translateY(-70px) scale(.98); }
  65.1%, 100% { opacity: 0; transform: translate3d(-50%, -100%, 0) translateY(12px) scale(.06); }
}
@keyframes ca-city-link-draw {
  0%, 8% { opacity: 0; stroke-dashoffset: 1; }
  15% { opacity: .52; stroke-dashoffset: 0; }
  56% { opacity: .28; stroke-dashoffset: 0; }
  65%, 100% { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes ca-city-link-flow {
  0%, 12% { opacity: 0; stroke-dashoffset: .18; }
  16% { opacity: .92; }
  56% { opacity: .72; stroke-dashoffset: -.82; }
  65%, 100% { opacity: 0; stroke-dashoffset: -1; }
}
@keyframes ca-city-origin {
  0%, 3.5% { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
  5.4% { opacity: 1; transform: translate(-50%, -50%) scale(1.24); }
  9%, 56% { opacity: .84; transform: translate(-50%, -50%) scale(.86); }
  65%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
}
@keyframes ca-city-parameter-read {
  0%, 9%, 100% { opacity: .7; filter: saturate(.78); }
  15%, 28% { opacity: 1; filter: saturate(1); }
  45% { opacity: .82; filter: saturate(.86); }
}

@media (max-width: 920px) {
  .ca-stage--social-scan .ca-city-analysis { min-height: 680px; }
  .ca-city-analysis__city { left: -5%; bottom: -2%; width: 112%; }
}
@media (max-width: 620px) {
  .ca-stage--social-scan .ca-city-analysis { min-height: 610px; }
  .ca-city-analysis .ca-preference-evidence {
    top: 20px;
    left: 14px;
    right: 14px;
    gap: 4px;
  }
  .ca-city-analysis .ca-preference-evidence__item {
    min-width: 38px;
    grid-template-rows: 20px 88px;
    gap: 5px;
  }
  .ca-city-analysis .ca-preference-evidence__item figcaption { min-height: 20px; }
  .ca-city-analysis .ca-preference-evidence__item figcaption strong { font-size: 14px; }
  .ca-city-analysis .ca-preference-evidence__item img { height: 88px; min-height: 88px; border-radius: 11px; }
  .ca-city-analysis__city { left: -28%; bottom: 0; width: 152%; }
  .ca-city-analysis__signals .ca-city-signal.mp-signal--post { width: min(29cqw, 108px); }
  .ca-city-analysis__signals .ca-city-signal.mp-signal--chat { width: min(36cqw, 128px); }
  .ca-city-analysis__signals .ca-city-signal:nth-child(n + 5),
  .ca-city-analysis__origins i:nth-child(n + 5),
  .ca-city-analysis__links path:nth-child(n + 5) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ca-city-analysis .ca-preference-evidence__item,
  .ca-city-analysis__links path,
  .ca-city-analysis__origins i,
  .ca-city-analysis__signals .ca-city-signal { animation: none !important; }
  .ca-city-analysis .ca-preference-evidence__item { opacity: .9; filter: none; }
  .ca-city-analysis__signals .ca-city-signal { opacity: 0; }
  .ca-city-analysis__signals .ca-city-signal:nth-child(-n + 4) {
    opacity: 1;
    filter: none;
    transform: translate3d(-50%, -100%, 0) translateY(-38px) scale(1);
  }
  .ca-city-analysis__origins i:nth-child(-n + 4) { opacity: .84; transform: translate(-50%, -50%) scale(1); }
  .ca-city-analysis__link-base path:nth-child(-n + 4) { stroke-dashoffset: 0; opacity: .32; }
  .ca-city-analysis__link-flow path { opacity: 0; }
}

/* The following stage turns the same observations into a city-scale brief.
   The image carries three blue-white objects; the matching sentence fragment
   repeats that material so the association survives without a diagram key. */
.ca-system-city {
  position: relative;
  min-width: 0;
  min-height: clamp(620px, 56vw, 780px);
  margin: 0;
  overflow: hidden;
  background: #eef3f6;
}
.ca-system-city img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 52% 50%;
  filter: saturate(.88) contrast(.98);
}
.ca-system-city::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(255 255 255 / .03), transparent 42%, rgb(18 19 21 / .08));
  pointer-events: none;
}
#retail-data .ca-stage__copy { min-height: clamp(620px, 56vw, 780px); }
#retail-data .ca-stage__subtitle { max-width: 31ch; }
#retail-data .ca-stage__copy > p:last-child { max-width: 60ch; }
.ca-system-highlight {
  color: transparent;
  background: linear-gradient(90deg, #1290dd 0%, #88cdea 48%, #fdefd6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: 600;
}
@media (max-width: 920px) {
  .ca-stage .ca-system-city { order: 2; min-height: 560px; }
  #retail-data .ca-stage__copy { min-height: 500px; }
}
@media (max-width: 620px) {
  .ca-stage .ca-system-city { min-height: 430px; }
  .ca-system-city img { object-position: 54% 50%; }
  #retail-data .ca-stage__copy { min-height: 540px; }
}
.ca-result {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ca-story-seam);
  padding: 0;
  background: var(--ca-story-black);
}
.ca-result__copy {
  min-height: clamp(520px, 48vw, 690px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(64px, 8vw, 120px) clamp(28px, 8vw, 128px);
  background: var(--ca-story-panel);
  text-align: center;
}
.ca-result__copy h3 { max-width: 18ch; font-size: clamp(46px, 5.4vw, 82px); }
.ca-result__copy .ca-result__subtitle {
  max-width: 40ch;
  margin: clamp(48px, 6vw, 84px) auto 18px;
}
.ca-result__copy > p:last-child { max-width: 72ch; }
.ca-result__deliverables {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--ca-story-seam);
  align-self: stretch;
  border: 0;
  background: var(--ca-story-black);
}
.ca-result__deliverables li {
  min-height: clamp(150px, 15vw, 220px);
  align-items: flex-start;
  padding: clamp(26px, 2.7vw, 42px);
  border: 0;
  background: var(--ca-story-panel);
  color: var(--ca-story-cream);
  font-size: clamp(11px, .95vw, 14px);
}
.ca-result__cta { min-height: clamp(92px, 8vw, 116px); margin-top: 0; }
@media (max-width: 920px) {
  .ca-story__intro { grid-template-rows: auto auto auto auto; }
  .ca-story__eyebrow,
  .ca-story__intro h2,
  .ca-story__intro-visual,
  .ca-story__lead { grid-column: 1 / -1; }
  .ca-story__intro-visual,
  .ca-story__lead { min-height: 470px; }
  .ca-stage { grid-template-columns: minmax(0, 1fr); }
  .ca-stage .ca-stage__copy { order: 1; }
  .ca-stage figure.ca-visual-placeholder { order: 2; min-height: 470px; }
  .ca-stage--scenarios figure.ca-visual-placeholder,
  .ca-stage--economics figure.ca-visual-placeholder { min-height: 470px; }
  .ca-stage--social-scan { grid-template-columns: minmax(0, 1fr); }
  .ca-stage--social-scan .ca-stage__copy { min-height: 470px; }
  .ca-stage--social-scan .ca-social-scan { min-height: 560px; }
  .ca-result__deliverables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ca-result__deliverables li:last-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .ca-story__eyebrow { padding: 58px 20px 20px; }
  .ca-story__intro h2 {
    max-width: 12ch;
    padding: 0 20px 62px;
    font-size: clamp(42px, 12vw, 54px);
  }
  .ca-story__intro-visual,
  .ca-story__lead { min-height: 390px; }
  .ca-story__lead { padding: 32px 24px; }
  .ca-story__lead .ca-story__subtitle { font-size: 28px; }
  .ca-story__lead p + p { font-size: 15px; }
  .ca-story__section-head { min-height: 390px; gap: 34px; padding: 54px 24px; }
  .ca-story__section-head > p { max-width: 12ch; font-size: 40px; }
  .ca-stage__copy { min-height: 440px; padding: 32px 24px; }
  .ca-stage__copy h3 { font-size: 34px; }
  .ca-stage__copy--stack article { min-height: 440px; padding: 32px 24px; }
  .ca-stage__copy--stack article h3 { font-size: clamp(29px, 8.2vw, 32px); }
  .ca-stage figure.ca-visual-placeholder,
  .ca-stage--scenarios figure.ca-visual-placeholder,
  .ca-stage--economics figure.ca-visual-placeholder { min-height: 390px; }
  .ca-stage--social-scan .ca-stage__copy { min-height: 650px; }
  .ca-stage--social-scan .ca-stage__subtitle { margin-top: 34px; }
  .ca-stage--social-scan .ca-social-scan { min-height: 500px; }
  .ca-preference-evidence {
    min-height: 0;
    gap: 4px;
    margin: 24px 0 0;
  }
  .ca-preference-evidence__item { min-width: 38px; grid-template-rows: 22px 104px; gap: 5px; }
  .ca-preference-evidence__item figcaption { min-height: 22px; }
  .ca-preference-evidence__item figcaption strong { font-size: 16px; }
  .ca-preference-evidence__item img { height: 104px; min-height: 104px; border-radius: 12px; }
  .ca-preference-evidence__note { max-width: none; margin-top: 14px; font-size: 15px; line-height: 1.26; }
  .ca-social-scan__signals { inset: 14px 16px 0; }
  .ca-social-scan .mp-signal--post { width: min(36cqw, 110px); }
  .ca-social-scan .mp-signal--chat { width: min(44cqw, 134px); }
  .ca-social-scan .mp-signal:nth-child(2) { left: 54%; }
  .ca-social-scan__signals:not(.is-armed) .mp-signal:nth-child(1),
  .ca-social-scan__signals[data-motion="still"].is-live .mp-signal:nth-child(1) { left: 0; top: 2%; }
  .ca-social-scan__signals:not(.is-armed) .mp-signal:nth-child(2),
  .ca-social-scan__signals[data-motion="still"].is-live .mp-signal:nth-child(2) { left: 0; top: 57%; }
  .ca-social-scan__signals:not(.is-armed) .mp-signal:nth-child(3),
  .ca-social-scan__signals[data-motion="still"].is-live .mp-signal:nth-child(3) { left: 58%; top: 16%; }
  .ca-social-scan__signals:not(.is-armed) .mp-signal:nth-child(4),
  .ca-social-scan__signals[data-motion="still"].is-live .mp-signal:nth-child(4) { left: 54%; top: 61%; }
  .ca-social-scan__city { left: 0; bottom: -1%; width: 132%; }
  .ca-social-scan__sink { left: 22px; top: 42%; }
  .ca-result__copy { min-height: 540px; padding: 58px 24px; }
  .ca-result__copy h3 { font-size: 44px; }
  .ca-result__deliverables { grid-template-columns: minmax(0, 1fr); }
  .ca-result__deliverables li,
  .ca-result__deliverables li:last-child { grid-column: auto; min-height: 116px; padding: 26px 24px; }
}

/* ── Economics, read at the same moment as the architecture ──────────────
   The priorities are not a control panel under the block: they are the words
   of the sentence that names them, set as ovals so a reader can see that the
   sentence is the switch. The board on the right speaks the calculator's own
   vocabulary — payback, IRR, NOI — in the boxes of the diagram above. */
.mp-economics { padding: clamp(46px, 5vw, 84px) var(--edge) clamp(40px, 4.4vw, 72px); }
.mp-economics__head { max-width: 1180px; }
.mp-economics__title { margin: 0; font-weight: 500; font-size: clamp(28px, 3.1vw, 52px); line-height: 1.08; letter-spacing: var(--track); text-wrap: balance; }
.mp-economics__lead {
  margin: clamp(16px, 1.7vw, 26px) 0 0; max-width: 94ch;
  font-size: clamp(16px, 1.35vw, 21px); line-height: 1.62; letter-spacing: var(--track-body); color: var(--muted);
}
/* The switch reads as running text, so the ovals sit on the baseline of the
   sentence and only their ring and ink change with the choice. */
.mp-choice { display: inline; }
.mp-choice__sep { color: var(--muted); }
/* inline-block, not inline: an oval that wrapped mid-phrase would be drawn as
   two open halves. The baseline keeps it sitting in the sentence. */
.mp-choice button {
  display: inline-block; vertical-align: baseline; white-space: nowrap;
  margin: 0; padding: .18em .72em; border: 1px solid var(--line-dark); border-radius: 999px;
  background: transparent; color: var(--ink); font: inherit; letter-spacing: inherit; cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
@media (hover: hover) { .mp-choice button:not([aria-pressed="true"]):hover { background: rgb(32 33 36 / .06); } }
.mp-choice button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.mp-economics__body { display: grid; grid-template-columns: minmax(0, 1.66fr) minmax(0, 1fr); gap: clamp(22px, 2.7vw, 46px); margin-top: clamp(26px, 3vw, 48px); align-items: start; }
.mp-economics__model { margin: 0 0 0 calc(var(--edge) * -1); min-width: 0; }
.mp-economics__model iframe { display: block; width: 100%; height: auto; aspect-ratio: 1.4; border: 0; background: transparent; pointer-events: none; }
.mp-economics__board { min-width: 0; display: flex; flex-direction: column; }
/* Equal rows: two of the labels run to a second line, and a row that grew
   with them would step out of line with the rest of the board. */
.mp-economics__metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(8px, .8vw, 12px); margin: 0; padding: 0; list-style: none; }
.mp-metric { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: clamp(16px, 1.5vw, 22px); border: 1px solid var(--line); border-radius: 12px; background: rgb(246 246 242 / .97); }
.mp-metric__label { margin: 0; font-size: clamp(9.5px, .78vw, 11.5px); line-height: 1.16; letter-spacing: -.02em; text-transform: uppercase; color: var(--ink); }
.mp-metric__value { display: flex; align-items: baseline; gap: 6px; margin: 0; white-space: nowrap; font-family: var(--font-body); font-size: clamp(22px, 2.1vw, 33px); font-weight: 700; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.mp-metric__value small { font-size: .42em; font-weight: 600; letter-spacing: -.01em; color: var(--muted); }
.mp-metric__note { margin: 0; font-size: clamp(10px, .8vw, 12px); line-height: 1.3; letter-spacing: var(--track-body); color: var(--muted); }
@media (max-width: 1000px) {
  .mp-economics__body { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .mp-economics__model { margin-left: calc(var(--edge) * -1); margin-right: calc(var(--edge) * -1); }
  .mp-economics__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .mp-economics__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}
/* Under the board, an offer rather than another measurement: quiet type, the
   question in ink so it reads first, the rest in the muted voice of the notes. */
.mp-economics__offer { margin: clamp(20px, 2vw, 30px) 0 0; max-width: 48ch; font-size: clamp(14px, 1.12vw, 17px); line-height: 1.5; letter-spacing: var(--track-body); color: var(--muted); }
.mp-economics__offer-lead { color: var(--ink); }
/* The run marker: a dot that crosses the word it is showing, then steps to the
   next. It is the clock of the sequence made visible — the sentence says what
   the model is answering, and the dot says how long the answer has left. */
.mp-economics__lead { position: relative; }
.mp-choice__dot { position: absolute; left: 0; top: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); pointer-events: none; will-change: transform; }
.mp-choice__dot[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .mp-choice__dot { display: none; } }

/* Phone composition: keep the desktop and tablet band unchanged. */
@media (max-width: 700px) {
  .masterplan-page:not(.commercial-architecture-page) .mp-people .mp-copy { grid-row: 1; }
  .masterplan-page:not(.commercial-architecture-page) .mp-people .mp-visual { grid-row: 2; }
  .masterplan-page:not(.commercial-architecture-page) .mp-scenarios .mp-canvas-wrap {
    --mp-search-height: clamp(210px, 52vw, 250px);
    height: calc(var(--mp-search-height) + 20px + 270px);
  }
  .masterplan-page:not(.commercial-architecture-page) .mp-scenarios .mp-canvas,
  .masterplan-page:not(.commercial-architecture-page) .mp-scenarios .mp-fallback {
    inset: auto 0 0;
    height: 270px;
  }
  .masterplan-page:not(.commercial-architecture-page) .mp-scenarios .mp-verification {
    display: grid;
    left: 52%; top: 8px; bottom: auto; width: 48%;
    height: calc(var(--mp-search-height) - 16px);
    transform: none;
    grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
    gap: 4px;
  }
  .masterplan-page:not(.commercial-architecture-page) .mp-verification__checks,
  .masterplan-page:not(.commercial-architecture-page) .mp-verification__programme { gap: 4px; }
  .masterplan-page:not(.commercial-architecture-page) .mp-verification__checks li {
    padding: 5px 4px; font-size: clamp(7px, 1.85vw, 10px); border-radius: 7px;
  }
  .masterplan-page:not(.commercial-architecture-page) .mp-verification__expert {
    padding: 5px 0; font-size: 7px; border-radius: 7px; gap: 5px;
  }
  .masterplan-page:not(.commercial-architecture-page) .mp-programme-card {
    padding: 6px 4px; font-size: clamp(7px, 1.8vw, 10px); border-radius: 7px;
  }
  .masterplan-page:not(.commercial-architecture-page) .mp-programme-card__value {
    font-size: clamp(10px, 2.4vw, 13px); gap: 2px;
  }
  .masterplan-page:not(.commercial-architecture-page) .mp-choice {
    display: inline-flex; flex-wrap: wrap; align-items: baseline;
    max-width: 100%; column-gap: 4px; row-gap: 16px;
    margin-top: 8px; padding-bottom: 12px;
  }
}