/* ───────────────────────────────────────────────────────────────
   SIGNATURE SECTIONS — one per service.

   Home Addition earned its design by having UI built for its own
   subject: a house elevation with the addition types lit where they
   actually attach. These are the equivalent for each other service —
   the question that service's buyer is actually asking, made into
   something they can operate.

     laneway      .qual  does my lot qualify (7 real conditions)
     commercial   .burn  rent runs before revenue does
     permits      .route which approval route am I on
     custom build .rise  lot to key, assembling as you scroll
     kitchen      .plan  a kitchen plan with hotspots

   All per-instance and class-scoped. Readable before JS runs.
   ─────────────────────────────────────────────────────────────── */

:root { --accent-ink: #9a5200; }

.sig { padding: clamp(60px, 9vw, 100px) var(--pad); }
.sig--dark { background: var(--g-hero, #1c1714); color: #fcf6f2; }
.sig--tint { background: var(--g-svcs, #faf5f0); }
.sig--plain { background: var(--g-proc, #fff); }
.sig__top .sec-title { margin: .36em 0 .4em; }
.sig--dark .sec-title { color: #fff; }
.sig__top .sec-sub { margin-block-start: 18px; }
.sig--dark .sec-sub { color: var(--ink-200, #e8d9d1); }
/* .eyebrow carries a muted tone meant for light sections; on a dark signature
   panel it measured 2.91:1. Lift it to the light-on-dark token. */
.sig--dark .eyebrow { color: var(--ink-200, #e8d9d1); opacity: 1; }
.sig__body { margin-block-start: var(--rhythm, 40px); }

/* ══ LANEWAY — the lot qualifier ═══════════════════════════ */
.qual { display: grid; gap: clamp(20px,2.6vw,38px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) { .qual { grid-template-columns: minmax(0,1fr) 330px; } }
.qual__list { display: grid; gap: 9px; }
.qual__row {
  display: flex; gap: 13px; align-items: flex-start; inline-size: 100%; text-align: start;
  padding: 15px 17px; border-radius: 13px; border: 1px solid #e7ded4; background: #fff;
  cursor: pointer; font: inherit; appearance: none;
  transition: border-color .3s ease, background .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.qual__row:hover { transform: translateX(3px); border-color: #ddd0c0; }
.qual__row:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.qual__row[aria-pressed="true"] { border-color: var(--accent); background: #fffaf3; }
.qual__box {
  flex: none; inline-size: 22px; block-size: 22px; border-radius: 7px; margin-block-start: 1px;
  border: 2px solid #cdbba6; display: grid; place-items: center;
  transition: background .3s ease, border-color .3s ease;
}
.qual__row[aria-pressed="true"] .qual__box { background: var(--accent); border-color: var(--accent); }
.qual__box svg { opacity: 0; transition: opacity .25s ease; }
.qual__row[aria-pressed="true"] .qual__box svg { opacity: 1; }
.qual__t { display: block; font-weight: 600; font-size: 15px; color: var(--heading,#3a2e26); letter-spacing: -.01em; }
.qual__b { display: block; font-size: 13.5px; line-height: 1.55; color: #6b6259; margin-block-start: 4px; }

.qual__verdict {
  position: sticky; inset-block-start: 140px;
  padding: clamp(22px,2.4vw,30px); border-radius: 16px;
  background: var(--dark, #211a16); color: #fcf6f2;
}
.qual__score { font-size: clamp(38px,5vw,60px); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.qual__score span { font-size: .42em; letter-spacing: 0; opacity: .6; }
.qual__meter { block-size: 6px; border-radius: 99px; background: rgba(255,255,255,.17); margin-block: 16px 14px; overflow: hidden; }
.qual__fill { display: block; block-size: 100%; inline-size: 0%; background: var(--accent); border-radius: 99px; transition: inline-size .55s cubic-bezier(.2,.7,.2,1); }
.qual__say { font-size: 14.5px; line-height: 1.6; color: var(--ink-200,#e8d9d1); margin: 0; }
.qual__note { font-size: 12.5px; line-height: 1.5; color: rgba(252,246,242,.62); margin: 14px 0 0; }

/* ══ COMMERCIAL — rent runs before revenue ═════════════════ */
.burn { display: grid; gap: clamp(22px,3vw,44px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 940px) { .burn { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.burn__ctrl { display: grid; gap: 22px; }
.burn__f label { display: block; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: var(--ink-200,#e8d9d1); margin-block-end: 10px; }
.burn__f input[type="range"] { inline-size: 100%; accent-color: #f78c1e; block-size: 26px; cursor: pointer; }
/* 26px is a mouse target. On a phone the whole control has to be grabbable,
   and the browser keeps the track centred, so the extra height is all hit
   area and nothing moves. */
@media (max-width: 900px) {
  .burn__f input[type="range"] { block-size: 44px; }
}
.burn__v { font-size: clamp(22px,2.4vw,30px); letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.burn__out { padding: clamp(22px,2.6vw,34px); border-radius: 18px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.14); }
.burn__big { font-size: clamp(36px,5.4vw,66px); line-height: 1; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.burn__cap { font-size: 13.5px; color: var(--ink-200,#e8d9d1); margin: 10px 0 0; line-height: 1.55; }
.burn__bars { display: grid; gap: 11px; margin-block-start: 24px; }
.burn__bar b { display: block; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-200, #e8d9d1); margin-block-end: 6px; font-weight: 700; }
.burn__bar i { display: block; block-size: 12px; border-radius: 99px; background: rgba(255,255,255,.16); overflow: hidden; }
.burn__bar i span { display: block; block-size: 100%; inline-size: 0; border-radius: 99px; transition: inline-size .6s cubic-bezier(.2,.7,.2,1); }
.burn__bar--slow i span { background: #8d8178; }
.burn__bar--us i span { background: var(--accent); }
.burn__fine { font-size: 12.5px; line-height: 1.55; color: rgba(252,246,242,.6); margin: 18px 0 0; }

/* ══ PERMITS — which route am I on ═════════════════════════ */
.route__qs { display: grid; gap: 12px; max-inline-size: none; }
.route__q { padding: clamp(16px,1.8vw,22px); border: 1px solid #e7ded4; border-radius: 15px; background: #fff; }
.route__q p { margin: 0 0 12px; font-size: 15.5px; font-weight: 600; color: var(--heading,#3a2e26); }
.route__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.route__opts button {
  appearance: none; font: inherit; cursor: pointer; font-size: 14px; font-weight: 600;
  padding: 9px 17px; border-radius: 999px; border: 1px solid #ddd0c0; background: #fff; color: #6b6259;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.route__opts button:hover { transform: translateY(-2px); }
.route__opts button[aria-pressed="true"] { background: var(--dark,#211a16); color: #fff; border-color: var(--dark,#211a16); }
.route__opts button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.route__out { margin-block-start: clamp(22px,2.6vw,34px); padding: clamp(22px,2.6vw,34px); border-radius: 18px;
  background: var(--g-dc,#faf5f0); border: 1px solid #ddd0c0; max-inline-size: none; }
.route__badge { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--accent-ink); }
.route__name { font-size: clamp(21px,2.3vw,30px); letter-spacing: -.02em; margin: 9px 0 10px; color: var(--heading,#3a2e26); }
.route__say { margin: 0; font-size: 15px; line-height: 1.65; color: #6b6259; }
.route__steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 7px; }
.route__steps li { display: flex; gap: 9px; font-size: 14px; color: #6b6259; line-height: 1.5; }
.route__steps svg { flex: none; margin-block-start: 3px; }
.route__out[data-anim] { animation: routeIn .45s cubic-bezier(.2,.7,.2,1); }
@keyframes routeIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

/* ══ CUSTOM BUILD — lot to key, assembled on scroll ════════ */
.rise { display: grid; gap: clamp(22px,3vw,46px); grid-template-columns: 1fr; align-items: center; }
/* The six stages stacked in one column ran 830px while the drawing sat at
   505px in its own slot — the section came to 1247px and the picture was
   the smaller half of it. Two columns of stages cuts that run to three
   rows, and the taller drawing (320x360) now fills its side properly. */
@media (min-width: 940px)  { .rise { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); } }
@media (min-width: 1100px) { .rise__steps { grid-template-columns: repeat(2, minmax(0,1fr));
  column-gap: clamp(20px,2vw,32px); row-gap: clamp(20px,2.2vw,30px); } }
.rise__stage { position: sticky; inset-block-start: 150px; }
/* Stacked (below 940px) the drawing has the full column, and at 320x360 that
   made it 761px tall at tablet — taller than the six stages beside it had
   been. Cap and centre it there; the two-column desktop layout is where it
   is meant to be large. */
@media (max-width: 939px) { .rise__svg { max-inline-size: 420px; margin-inline: auto; } }
.rise__svg { inline-size: 100%; block-size: auto; display: block; }
.rise__layer { opacity: .12; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transform: translateY(14px); }
.rise__layer.is-on { opacity: 1; transform: none; }
.rise__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(18px,2.4vw,34px); }
.rise__s { padding-inline-start: 20px; border-inline-start: 2px solid #e0d3c4; opacity: .42; transition: opacity .45s ease, border-color .45s ease; }
.rise__s.is-on { opacity: 1; border-color: var(--accent); }
.rise__n { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--accent-ink); }
.rise__t { font-size: clamp(18px,1.9vw,24px); letter-spacing: -.015em; margin: 6px 0 7px; color: var(--heading,#3a2e26); }
.rise__b { margin: 0; font-size: 15px; line-height: 1.62; color: #6b6259; max-inline-size: none; }

/* ══ KITCHEN — a plan with hotspots ════════════════════════ */
.plan { display: grid; gap: clamp(20px,2.8vw,40px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 940px) { .plan { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); } }
.plan__fig { position: relative; margin: 0; }
.plan__svg { inline-size: 100%; block-size: auto; display: block; border-radius: 16px; background: #fff; border: 1px solid #e7ded4; }
.plan__hot {
  cursor: pointer; fill: rgba(247,140,30,.14); stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 4 3;
  transition: fill .3s ease, stroke-width .3s ease;
}
.plan__hot:hover, .plan__hot[aria-pressed="true"] { fill: rgba(247,140,30,.32); stroke-width: 2.6; stroke-dasharray: none; }
.plan__dot { fill: var(--accent); pointer-events: none; }
.plan__lbl { font-size: 10px; font-weight: 700; letter-spacing: .08em; fill: #3a2e26; pointer-events: none; text-transform: uppercase; }
.plan__panel { padding: clamp(22px,2.6vw,32px); border-radius: 16px; background: var(--g-dc,#faf5f0); border: 1px solid #ddd0c0; min-block-size: 200px; }
.plan__panel h3 { margin: 0 0 10px; font-size: clamp(19px,2vw,25px); letter-spacing: -.016em; color: var(--heading,#3a2e26); }
.plan__panel p { margin: 0; font-size: 15px; line-height: 1.65; color: #6b6259; }
.plan__panel[data-anim] { animation: routeIn .42s cubic-bezier(.2,.7,.2,1); }
.plan__tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-block-start: 16px; }

/* Stacked on a phone the order is drawing, description, tabs — so the tabs
   sit 287px below the drawing they change. Tapping a zone worked, you just
   could not see it happen without scrolling back up. Lift the tabs out of
   their wrapper and put them between the two regions they drive, so the
   drawing is directly above the control and the description directly
   below. The 940px two-column layout is untouched. */
@media (max-width: 939px) {
  .plan { display: flex; flex-direction: column; }
  .plan > div:not([class]) { display: contents; }
  .plan__fig   { order: 1; }
  .plan__tabs  { order: 2; margin-block-start: 0; }
  .plan__panel { order: 3; }
}
.plan__tabs button { appearance: none; font: inherit; cursor: pointer; font-size: 13px; padding: 8px 14px;
  border-radius: 999px; border: 1px solid #ddd0c0; background: #fff; color: #6b6259;
  transition: background .3s ease, color .3s ease; }
.plan__tabs button[aria-pressed="true"] { background: var(--dark,#211a16); color: #fff; border-color: var(--dark,#211a16); }
.plan__tabs button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .qual__row, .qual__fill, .burn__bar i span, .route__opts button, .rise__layer, .rise__s, .plan__hot { transition: none !important; }
  .route__out[data-anim], .plan__panel[data-anim] { animation: none; }
  .rise__layer { opacity: 1; transform: none; }
  .rise__s { opacity: 1; }
}

/* ══ HOME RENOVATION — what is behind the wall ═════════════ */
/* The diagram and the panel are a PAIR on the top row, aligned to the same
   top edge and the same height; the four layer buttons are a control strip
   under both. Previously the buttons sat under the diagram in a tall left
   column while `align-items:center` floated the panel 209px down its side,
   so the panel read as detached and the right half looked empty. */
.peel { display: grid; gap: clamp(18px,2.2vw,30px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) {
  .peel { grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr); }
  .peel__fig   { grid-column: 1; grid-row: 1; }
  .peel__panel { grid-column: 2; grid-row: 1; align-self: stretch; }
  .peel__ctrl  { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(4, 1fr); }
}
.peel__fig { margin: 0; position: relative; }
.peel__svg { inline-size: 100%; block-size: auto; display: block; border-radius: 16px; background: #fff; border: 1px solid #e7ded4; }
.peel__step { text-align: center; }
@media (min-width: 940px) { .peel__step { text-align: start; } }
.peel__l { transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.peel__l.is-off { opacity: 0; transform: translateX(26px); }
.peel__ctrl { display: grid; gap: 8px; margin-block-start: 0; }
.peel__step {
  appearance: none; font: inherit; cursor: pointer; text-align: start;
  padding: 14px 16px; border-radius: 13px; border: 1px solid #e7ded4; background: #fff;
  transition: border-color .3s ease, background .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.peel__step:hover { transform: translateX(3px); }
.peel__step[aria-pressed="true"] { background: var(--dark,#211a16); border-color: var(--dark,#211a16); }
.peel__step[aria-pressed="true"] .peel__st { color: #fff; }
.peel__step[aria-pressed="true"] .peel__sn { color: var(--accent); }
.peel__step:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.peel__sn { font-size: 11px; letter-spacing: .14em; font-weight: 700; color: var(--accent-ink); text-transform: uppercase; }
.peel__st { display: block; font-size: 15.5px; font-weight: 600; color: var(--heading,#3a2e26); margin-block-start: 4px; letter-spacing: -.01em; }
.peel__panel { padding: clamp(22px,2.6vw,32px); border-radius: 16px; background: var(--g-dc,#faf5f0); border: 1px solid #ddd0c0; display: flex; flex-direction: column; justify-content: center; }
.peel__panel h3 { margin: 0 0 10px; font-size: clamp(19px,2vw,25px); letter-spacing: -.016em; color: var(--heading,#3a2e26); }
.peel__panel p { margin: 0 0 .9em; font-size: 15px; line-height: 1.65; color: #6b6259; }
.peel__panel p:last-child { margin: 0; }
.peel__panel b { color: var(--heading,#3a2e26); }
.peel__panel[data-anim] { animation: routeIn .42s cubic-bezier(.2,.7,.2,1); }

/* ══ PROJECT MANAGEMENT — one coordinator, five jobs ═══════ */
.orbit { display: grid; gap: clamp(20px,2.8vw,42px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 940px) { .orbit { grid-template-columns: minmax(0,1fr) minmax(0,.92fr); } }
.orbit__fig { margin: 0; }
.orbit__svg { inline-size: 100%; block-size: auto; display: block; overflow: visible; }
.orbit__ring { fill: none; stroke: #e0d3c4; stroke-width: 1.5; stroke-dasharray: 5 5; }
.orbit__hub { fill: var(--dark,#211a16); }
.orbit__hubt { fill: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-anchor: middle; }
.orbit__node { cursor: pointer; }
.orbit__node circle { fill: #fff; stroke: #cdbba6; stroke-width: 2; transition: fill .35s ease, stroke .35s ease, r .35s cubic-bezier(.2,.7,.2,1); }
.orbit__node:hover circle, .orbit__node[aria-pressed="true"] circle { fill: var(--accent); stroke: var(--accent); }
.orbit__node text { font-size: 9px; font-weight: 700; letter-spacing: .06em; fill: #6b6259; text-anchor: middle; pointer-events: none; text-transform: uppercase; }
.orbit__node[aria-pressed="true"] text { fill: var(--heading,#3a2e26); }
.orbit__spoke { stroke: #e0d3c4; stroke-width: 1.5; transition: stroke .35s ease; }
.orbit__node[aria-pressed="true"] ~ .orbit__spoke { stroke: var(--accent); }
.orbit__panel { padding: clamp(22px,2.6vw,32px); border-radius: 16px; background: #fff; border: 1px solid #e7ded4; min-block-size: 190px; }
.orbit__panel h3 { margin: 0 0 10px; font-size: clamp(19px,2vw,25px); letter-spacing: -.016em; color: var(--heading,#3a2e26); }
.orbit__panel p { margin: 0; font-size: 15px; line-height: 1.65; color: #6b6259; }
.orbit__panel[data-anim] { animation: routeIn .42s cubic-bezier(.2,.7,.2,1); }

@media (prefers-reduced-motion: reduce) {
  .peel__l, .peel__step, .orbit__node circle { transition: none !important; }
  .peel__panel[data-anim], .orbit__panel[data-anim] { animation: none; }
}

/* Single column: the verdict sits after the list, so sticky buys nothing and
   can hover over the content below it. */
@media (max-width: 939px) { .qual__verdict { position: static; } }

/* Single column: put the controls between the diagram and the answer, so you
   pick a layer and read the result underneath — rather than clicking a button
   that changes a panel above it, off screen. */
@media (max-width: 939px) {
  .peel__fig   { order: 1; }
  .peel__ctrl  { order: 2; }
  .peel__panel { order: 3; }
}

/* A split header spans the row. The 62ch cap belongs to a stacked heading
   block; left on the split it held the whole header at 48% of the row with
   the right half empty — the exact thing the split exists to fix.
   (Repeated per stylesheet because pages load different subsets.) */
.split.sx__top, .split.sig__top, .split.pg__top, .split.ab-top {
  max-inline-size: none;
  inline-size: 100%;
}
/* A lede is CONTENT: it belongs under the title, full width between the page
   padding, not in a 44% column beside it. The old rule parked the heading in
   62ch on the left, the lede in 56ch on the right, and left the rest of the
   row empty — which is what read as cluttered and left-pushed. A short .link
   or .btn may still sit beside a heading; that is the homepage's own pattern
   and the only thing .split is still doing here. */
.sx__aside, .sig__aside, .pg__aside, .ab-aside {
  flex: 1 0 100%; min-inline-size: 0; max-inline-size: none;
}
.ab-aside p + p { margin-block-start: .85em; }

/* A heading block with no supporting line has nothing to pair with, so the
   62ch cap just parks a short title in a narrow column with the row empty
   beside it. Let it span; the body below is full width anyway. */
@supports selector(:has(*)) {
  .sx__top:not(:has(.sec-sub)), .pg__top:not(:has(.sec-sub)) { max-inline-size: none; }
}

/* The stage label beside its title, not stacked above it — see the note in
   v2-svc.css for why (Rashi, 2026-10-28). */
.rise__s {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: baseline;
}
.rise__n { grid-column: 1; grid-row: 1; }
.rise__t { grid-column: 2; grid-row: 1; margin: 0 0 7px; }
.rise__b { grid-column: 2; grid-row: 2; }

/* ── THE WALL SECTION, WITHOUT THE ANIMATION ───────────────────────────────
   Rashi, 2026-10-28: "only the animation" is to go, and "do not make the
   points clickable". The SVG is replaced by a photograph and the four layers
   are plain text instead of tabs, so .peel__ctrl / .peel__step no longer
   render — their rules above are dead but harmless.

   .peel__panel was `justify-content: center`, which was right for ONE layer
   and wrong for four: it centred a tall stack against the photo and left a
   ragged gap at the top. */
.peel__img { inline-size: 100%; block-size: auto; display: block;
  border-radius: 16px; border: 1px solid #e7ded4; }
.peel__cap { margin-block-start: 12px; font-family: var(--fd); font-style: italic;
  font-size: 14px; color: var(--ink-600,#6b6259); }
.peel--static .peel__panel { justify-content: flex-start; gap: 22px; }
.peel__layer { padding-block-start: 18px; border-block-start: 1px solid #ddd0c0; }
.peel__layer:first-child { padding-block-start: 0; border-block-start: 0; }
.peel__layer h3 { margin: 4px 0 10px; }

/* The photograph follows the layers down. With all four layers rendered as
   text the right column is roughly twice the height of the picture, so the
   picture used to sit at the top with a screen of empty space under it.
   Rashi, 2026-10-28: "can the image be sticky".

   Only above 940px, which is where .peel is two columns — stuck to the top
   of a single-column phone layout it would cover the text it belongs to.
   .peel already sets `align-items: start`, which sticky needs; a stretched
   grid item is full-height and can never scroll within its own track. */
@media (min-width: 940px) {
  .peel--static .peel__fig { align-self: stretch; }
  .peel--static .peel__stick { position: sticky; inset-block-start: 110px; }
}

/* ── THE SECOND FOLD'S PHOTOGRAPH ──────────────────────────────────────────
   Rashi, 2026-10-29: start it "against the heading so there are no
   unnecessary gaps", and stop it "getting cut off".

   .route__wrap is the section's own two-column grid, so the figure is a
   sibling of the ENTIRE left column — heading, lede, questions and outcome —
   rather than living inside the body below the heading. Its top edge lines
   up with the eyebrow.

   No aspect-ratio on .route__img on purpose. It carried ratio="4/5" against
   a 4:3 source, and object-fit:cover duly cut the ends off the room. The
   image now keeps its own proportions; if a future photograph needs a shape,
   crop the FILE, do not crop it in the box.

   .sig__top inside .route is a single column — the lede sits under the
   heading instead of beside it, because the shared .split would have put two
   columns inside a column that is already narrower. */
.route__fig { margin: 0; }
.route__img { inline-size: 100%; block-size: auto; display: block; border-radius: 16px; }
.route__cap { margin-block-start: 12px; font-family: var(--fd); font-style: italic;
  font-size: 14px; color: var(--ink-600,#6b6259); }
.route .sig__top { display: block; max-inline-size: none; }
.route__lede { margin-block-start: 16px; max-inline-size: 60ch; }
.route .sig__body { margin-block-start: clamp(26px,3vw,38px); }

@media (min-width: 940px) {
  .route__wrap { display: grid; align-items: start;
    grid-template-columns: minmax(0,1fr) minmax(0,.66fr);
    column-gap: clamp(28px,3.4vw,56px); }
  /* The figure tops out level with the eyebrow, which is what removes the
     gap she was looking at.

     ⚠ align-self: stretch is what makes the sticky work. .route__wrap sets
     `align-items: start`, which sizes every grid area to its own content —
     and a sticky box whose containing block is exactly its own height has
     nowhere to travel, so it never pins. Stretching the FIGURE to the full
     row height gives the inner .route__stick the run of the section. It
     releases at the section's end on its own, which is the behaviour she
     asked for: sticky for the section, not past it. */
  .route__fig { align-self: stretch; }
  .route__stick { position: sticky; inset-block-start: 110px; }
}
@media (max-width: 939px) { .route__fig { margin-block-start: clamp(22px,3vw,30px); } }

/* ── THE ORBIT DIAGRAM SHOULD NOT DWARF ITS PANEL ──────────────────────────
   Rashi, 2026-10-29: "make the image slightly smaller ... there's a lot of
   white space around the actual text. So make it smaller so that it aligns
   with the text."

   .orbit__svg was `inline-size: 100%`, so the diagram filled the whole left
   column — much taller than the panel beside it, which left the panel
   floating in the middle of a tall row with empty space above and below.

   Capping the SVG and centring it closes the gap without redrawing
   anything: the diagram is vector, so it just draws smaller. The grid stays
   align-items: center, so the two columns now read as a pair. */
.orbit__svg { max-inline-size: min(100%, 460px); margin-inline: auto; }
@media (min-width: 940px) { .orbit__svg { max-inline-size: min(100%, 420px); } }