/* =========================================================
   BSD Strategic Advisors — Stage pages (Launching / Scaling / Institutionalizing)
   Builds on styles.css (tokens, type, nav, menu, hero, problem, case study,
   clients, ways to work, CTA, footer).

    1. Hero (the homepage hero, with the three stages along the bottom)
    2. You may be here if
    3. What gets decided now (decision field, Launching)
    3b. What is usually underneath (Scaling)
    3c. Image + diagram sections (shares the homepage Problem layout)
    4. Why Bruce (timeline card)
    5. Typical priorities + related scope
    6. Closing
   ========================================================= */

/* =========================================================
   1. HERO
   Same structure and entrance as the homepage hero (.hero in styles.css):
   full-bleed image, grid texture, title left, intro right. The stage
   cells take the place of the homepage logo strip.
   ========================================================= */
.hero--stage .hero__img { object-position: 50% 50%; }
/* Desktop: the photo exactly fills the hero, as in the Figma frames (2026-10-27). With the
   shared 120%-tall box it was enlarged ~27%, and on Launching the quartz slid down behind
   the grey "from the Start". The scroll drift moves the photo down, so no gap ever shows. */
@media (min-width: 900px) {
  .hero--stage .hero__img { top: 0; height: 100%; }
}
/* Launching (2026-10-27): a square photo with a small quartz on plain navy, so the text sits
   on the blue background and needs no shade. The quartz is kept just above the text block. */
.hero--launch { background: #0c1a24; }   /* the photo's navy, low down */
.hero--launch .hero__shade { display: none; }
/* Phones and tablets: the photo fills the top of the hero only (the quartz above the
   headline) and melts into the matching navy below it */
@media (max-width: 899px) {
  .hero--launch .hero__img {
    top: 0; height: 60%;
    object-position: 50% 50%;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
    mask-image: linear-gradient(to bottom, #000 62%, transparent);
  }
}
/* Short phones (iPhone SE and similar): the text fills most of the screen, so the photo is
   smaller and the quartz fits in the strip between the nav and the headline */
@media (max-width: 899px) and (max-height: 740px) {
  .hero--launch .hero__img { height: 40%; }
}
/* Desktop: spacing as in the Figma frame (2313:3872): stages 32px from the bottom, 50px
   under the intro. stage.js then sizes and places the photo so the quartz sits where the
   mockup has it relative to the headline, intro column and nav. */
@media (min-width: 900px) {
  .hero--launch .hero__content { row-gap: 50px; padding-bottom: 32px; }
  /* the headline and intro start at 55% of the hero's height (half felt too high and left
     the quartz too small, 2026-10-27); the stages stay at the bottom. The hero is 100svh
     tall, between 720px and 1100px. */
  .hero--launch { flex-direction: column; justify-content: flex-end; align-items: stretch; }
  .hero--launch .hero__content {
    flex: 1;
    grid-template-rows: auto 1fr;
    padding-top: calc(clamp(720px, 100svh, 1100px) * .55);
  }
  .hero--launch .st-stages { align-self: end; }
  .hero--launch .hero__img { max-width: none; object-fit: fill; }
}
/* As in the design, the grid fades away toward the bottom left and is fully drawn at the top right */
.hero--stage .hero__grid:not(.hero__grid-glow) {
  -webkit-mask-image: linear-gradient(30deg, transparent 28%, #000 72%);
  mask-image: linear-gradient(30deg, transparent 28%, #000 72%);
}
.st-eyebrow { display: flex; align-items: flex-start; gap: 20px; max-width: 34ch; }
.st-eyebrow .bullet { margin-top: .2em; }
/* phones/tablets: as wide as the paragraph under it, so it runs to 1–2 lines instead of 3 (2026-10-29) */
@media (max-width: 899px) { .st-eyebrow { max-width: none; } }
.hero--stage .hero__right .body-l p + p { margin-top: 1.3em; }

/* The three stages, as cells sharing hairlines */
.st-stages {
  --rule: rgba(255, 255, 255, .16);
  display: grid;
  border-top: 1px solid var(--rule);
}
.st-stages__item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: baseline;
  gap: 8px;
  min-height: 56px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-display);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.5rem);
  line-height: 1.1;
  color: rgba(255, 255, 255, .6);
  transition: color .9s var(--ease-smooth), background-color .9s var(--ease-smooth);
}
.st-stages__num { font-size: 12px; letter-spacing: .04em; color: var(--grey-400); transition: color .9s var(--ease-smooth); }
.st-stages__arrow { width: 13px; height: 13px; align-self: center; transition: transform .9s var(--ease-out); }
.st-stages__item.glass { background: rgba(255, 255, 255, .04); }
.st-stages__arrow img { width: 100%; height: 100%; filter: invert(1); }
.st-stages__item[aria-current="page"] { color: var(--white); }
.st-stages__item[aria-current="page"] .st-stages__num { color: var(--white); }
.st-stages__item[aria-current="page"] .st-stages__name { font-weight: 600; letter-spacing: -0.019em; }
@media (hover: hover) {
  .st-stages__item:hover { color: var(--white); }
  .st-stages__item:hover .st-stages__arrow { transform: translate(3px, -3px); }
}

@media (min-width: 900px) {
  .hero--stage .hero__content { row-gap: clamp(56px, 6svh, 80px); }
  .hero--stage .hero__right .body-l { margin-bottom: 0; }
  .hero--stage .hero__right .st-eyebrow { margin-bottom: 37px; max-width: 551px; }
  .st-stages {
    grid-area: creds;
    grid-template-columns: repeat(3, 1fr);
    border-top: 0;
    border-left: 1px solid var(--rule);
  }
  .st-stages__item {
    grid-template-columns: 1fr auto;
    grid-template-areas: "num arrow" "name name";
    row-gap: 30px;
    min-height: 111px;
    padding: 20px 26px 22px;
    border-top: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
  }
  .st-stages__num { grid-area: num; }
  .st-stages__name { grid-area: name; align-self: end; }
  .st-stages__arrow { grid-area: arrow; }
  .st-stages__item[aria-current="page"] { background: rgba(255, 255, 255, .07); }
  @media (hover: hover) { .st-stages__item:not([aria-current]):hover { background: rgba(255, 255, 255, .025); } }
}
/* =========================================================
   2. YOU MAY BE HERE IF
   ========================================================= */
.st-here { padding-block: var(--section-y); }
.st-here__inner { display: grid; gap: 40px; }
.st-here__list {
  list-style: none;
  margin: 0; padding: 0;
  border-bottom: 1px solid rgba(12, 15, 17, .14);
}
.st-here__list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid rgba(12, 15, 17, .14);
  font-family: var(--f-display);
  font-size: var(--t-list);
  line-height: 1.2;
  text-wrap: pretty;
  transition: color .5s var(--ease-out), padding-left .7s var(--ease-out), opacity 1s var(--ease-out), transform 1.2s var(--ease-out);
}
.st-here__num { font-size: 13px; letter-spacing: .04em; color: var(--grey-500); transition: color .5s ease; }
.st-here__list.is-settled > li { transition-delay: 0s !important; }
@media (hover: hover) {
  .st-here__list:hover li { color: var(--grey-500); }
  .st-here__list li:hover { color: var(--ink); padding-left: 10px; }
  .st-here__list li:hover .st-here__num { color: var(--ink); }
}
/* Phones/tablets: a light, scannable list instead of a wall of big type (2026-10-29) */
@media (max-width: 899px) {
  .st-here__inner { gap: 28px; }
  .st-here__list li { grid-template-columns: 32px 1fr; padding-block: 14px; font-size: 17px; line-height: 1.3; }
  .st-here__num { font-size: 12px; }
}
@media (min-width: 900px) {
  .st-here__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 120px); }
  .st-here__head { position: sticky; top: 140px; align-self: start; }
  /* a touch smaller so the whole list fits one screen (Bruce, 2026-10-29) */
  .st-here__list li { padding-block: 22px; grid-template-columns: 64px 1fr; font-size: 22px; }
}

/* =========================================================
   3. WHAT GETS DECIDED NOW
   The section is a tall scroll track; field and phrases stay pinned on screen
   while scrolling moves through the steps (data-step on the section:
   1 all, 2 most turn hollow, 3 five are named). Each phrase is revealed in
   place with the heading line-mask; earlier ones stay, greyed.
   ========================================================= */
/* fades in from the page colour above it, on every screen (phones had a hard white→sand edge, 2026-10-29) */
.st-decide { position: relative; height: calc(100svh + 165svh); background: linear-gradient(to bottom, var(--bg), var(--sand) 18%); }
/* The section after it (Launching: Why Bruce) carries the sand back into the off-white,
   so there is no hard edge between the two (logo strip removed 2026-10-29) */
.st-decide + .st-why { background: linear-gradient(to bottom, var(--sand), var(--bg)); }
.st-decide__pin { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.st-decide__inner { display: grid; align-content: center; gap: 32px; padding-top: calc(env(safe-area-inset-top, 0px) + 56px); }
.st-decide__stage { display: grid; justify-items: center; }

.st-field {
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  width: min(100%, 34svh);
  aspect-ratio: 1;
}
.st-dot { position: relative; display: grid; place-items: center; }
.st-dot::before {
  content: "";
  width: 9px; height: 9.5px;
  background: var(--ink);
  opacity: 0;
  transform: scale(calc(.4 * var(--near, 1)));
  transition:
    opacity .9s var(--ease-out) var(--delay, 0s),
    transform 1s var(--ease-out) var(--delay, 0s),
    background-color .7s ease var(--delay, 0s),
    box-shadow .7s ease var(--delay, 0s);
}
/* 1 — a hundred decisions, all equal, gently alive */
.st-decide:not([data-step="0"]) .st-dot::before { opacity: .9; transform: scale(var(--near, 1)); }
.st-decide[data-step="1"] .st-dot::before { animation: st-pulse 3.2s ease-in-out var(--pulse, 0s) infinite; }
@keyframes st-pulse { 0%, 100% { opacity: .9; } 50% { opacity: .35; } }

/* 2 — most can be revisited: they turn hollow and step back */
.st-decide[data-step="2"] .st-dot:not(.is-key)::before,
.st-decide[data-step="3"] .st-dot:not(.is-key)::before {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(12, 15, 17, .6);
  opacity: .55;
  transform: scale(calc(.8 * var(--near, 1)));
}
/* 3 — a handful can't: five stay solid, grow and are named */
.st-decide[data-step="3"] .st-dot.is-key::before {
  transform: scale(calc(1.5 * var(--near, 1)));
  box-shadow: 0 0 0 5px rgba(12, 15, 17, .1);
  transition-delay: calc(var(--k) * .12s);
}

.st-key {
  position: absolute;
  z-index: 1;
  left: calc(var(--col) * 10% + 5%);
  top: calc(var(--row) * 10% + 5%);
  padding: 5px 9px;
  border-radius: 3px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translate(16px, -50%) translateX(-8px);
  transition: opacity .7s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: calc(.25s + var(--k) * .12s);
  pointer-events: none;
}
.st-key.is-left { transform: translate(calc(-100% - 16px), -50%) translateX(8px); }
.st-decide[data-step="3"] .st-key { opacity: 1; transform: translate(16px, -50%); }
.st-decide[data-step="3"] .st-key.is-left { transform: translate(calc(-100% - 16px), -50%); }

/* TEST (launching-a-firm-sphere.html): the hundred decisions as circles on a turning sphere.
   stage.js places every dot each frame; depth sets its size and opacity. */
.st-field--sphere { display: block; }
.st-orb {
  position: absolute;
  left: 0; top: 0;
  width: 10px; height: 10px;
  will-change: transform, opacity;
}
.st-orb::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  opacity: 0;
  transform: scale(.4);
  transition:
    opacity .9s var(--ease-out) var(--delay, 0s),
    transform 1s var(--ease-out) var(--delay, 0s),
    background-color .7s ease var(--delay, 0s),
    box-shadow .7s ease var(--delay, 0s);
}
.st-decide:not([data-step="0"]) .st-orb::before { opacity: 1; transform: none; }
/* 2 — most can be revisited: they turn into rings */
.st-decide:is([data-step="2"], [data-step="3"]) .st-orb:not(.is-key)::before {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(12, 15, 17, .75);
  transform: scale(.85);
}
/* 3 — a handful can't: five stay solid, grow and are named */
.st-decide[data-step="3"] .st-orb.is-key::before {
  transform: scale(1.7);
  box-shadow: 0 0 0 5px rgba(12, 15, 17, .1);
  transition-delay: calc(var(--k) * .12s);
}
.st-field--sphere .st-key { z-index: 101; }
.st-decide[data-step="3"] .st-field--sphere .st-key { opacity: var(--front, 1); }

/* Steps: revealed in place, never scrolled */
.st-decide__steps { display: grid; align-content: start; gap: 12px; }
.st-step { display: grid; gap: 20px; }
.st-step .tag { opacity: 0; transition: opacity .8s var(--ease-out); }
.st-step.is-in .tag { opacity: 1; }
.st-step__big {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-wrap: balance;
  color: var(--grey-500);
  transition: color .8s var(--ease-out);
}
.st-step.is-active .st-step__big { color: var(--ink); }

@media (min-width: 900px) {
  .st-decide__inner {
    width: 100%;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: clamp(48px, 6vw, 120px);
    align-items: center;
    padding-top: 40px;
  }
  .st-field { width: min(100%, 560px, 64svh); }
  .st-key { font-size: 11.5px; padding: 6px 11px; }
  .st-decide__steps { gap: 20px; }
  .st-step { gap: 24px; }
}

/* =========================================================
   3c. IMAGE + DIAGRAM SECTIONS
   "What Shapes The Firm", "Why It Is Easy To Wait", "What Is At Stake"
   use the homepage Problem layout (.problem in styles.css).
   ========================================================= */
.page-stage .problem__visual--shade .problem__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(12, 15, 17, .62), rgba(12, 15, 17, .82));
}
/* Coming straight after "You may be here if" (page colour), the sand fades in
   at the top instead of starting with a hard edge (Institutionalizing) */
.st-here + .problem { background: linear-gradient(to bottom, var(--bg), var(--sand) 16%, var(--bg)); }
.page-stage .problem__more { justify-self: start; align-self: flex-start; margin-top: 12px; }
@media (min-width: 900px) {
  .page-stage .problem__more { margin-top: 48px; }
  /* vertical placement comes from the shared .problem rule (text centred on the image) */
}

/* Diagrams drawn over the image; positions come from the 863 × 947 image frame */
.st-dia__glass {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  box-shadow: none;
  opacity: 0;
  transform: scale(.6);
  transition: opacity 1.4s var(--ease-out), transform 1.8s var(--ease-out);
}
.problem__visual.is-in .st-dia__glass { opacity: 1; transform: none; }
.st-dia__glass--panel { border-radius: 22px; transform: none; }   /* a "window" rather than a disc: fades in without growing */

/* Curves that draw across with time (a mask sweeps from left to right) */
.st-dia__curve {
  fill: none;
  stroke: rgba(255, 255, 255, .9);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.st-dia__curve--dash { stroke: rgba(255, 255, 255, .75); stroke-dasharray: 4 4; }
.st-dia__curve--chart { stroke-linejoin: round; stroke-linecap: round; stroke-width: 1.3; }
.st-dia__sweep {
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform 2.2s var(--ease-inout);
}
.problem__visual.is-in .st-dia__sweep { transform: none; }
.st-dia { position: absolute; inset: 0; pointer-events: none; }
.st-dia svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.st-dia__line {
  fill: none;
  stroke: rgba(255, 255, 255, .8);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity 1s var(--ease-out);
}
.st-dia__node { fill: var(--white); opacity: 0; transition: opacity .8s var(--ease-out); }
.st-dia__label, .st-dia__note {
  position: absolute;
  font-family: var(--f-display);
  color: var(--white);
  white-space: nowrap;
  text-align: center;
  translate: -50% 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.st-dia__label {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600;
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.st-dia__label .bullet { width: 7px; height: 7.4px; }
.st-dia__label--start { translate: 0 -50%; }
.st-dia__label--end { display: block; text-align: right; line-height: 1.5; translate: -100% -50%; }
/* phones/tablets: the two-line label sat on the Performance line; lift it clear (2026-10-29) */
@media (max-width: 899px) { .st-dia__label--lift { translate: -100% calc(-50% - 1.6em); } }
.st-dia__note { font-size: 11px; line-height: 1.25; color: rgba(255, 255, 255, .7); translate: -50% -50%; }
@media (min-width: 600px) {
  .st-dia__label { font-size: 10px; gap: 13px; }
  .st-dia__label .bullet { width: 13.5px; height: 14.3px; }
  .st-dia__note { font-size: clamp(12px, 0.93vw, 16px); }
}

.problem__visual.is-in .st-dia__line,
.problem__visual.is-in .st-dia__node,
.problem__visual.is-in .st-dia__label,
.problem__visual.is-in .st-dia__note { opacity: 1; transform: none; }
.st-dia [data-style*="--d"] { transition-delay: var(--d) !important; }
/* =========================================================
   4. WHY BRUCE
   ========================================================= */
.st-why { padding: clamp(40px, 5.5vw, 96px) clamp(12px, 2vw, 35px) 0; background: var(--bg); }
/* Last section before the footer (Launching): the same space under the card as Ways to Work Together */
.st-why:last-child { padding-bottom: clamp(56px, 6vw, 105px); }
.st-why__card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  color: var(--white);
  background: linear-gradient(176deg, #58778d 6%, #182127 92%);
  clip-path: inset(var(--inset, 0px) round var(--radius-xl));
  will-change: clip-path;
}
.st-why__texture {
  position: absolute;
  top: 0; right: -20%; bottom: 0;
  width: 90%;
  overflow: hidden;
  opacity: .12;
  pointer-events: none;
}
.st-why__texture img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; object-position: left center; }
.st-why__content { position: relative; display: grid; gap: 56px; padding-block: 64px; }
.st-why__text { display: grid; gap: 26px; justify-items: start; }
.st-why__text .body-l { color: rgba(255, 255, 255, .86); max-width: 40ch; }
.st-why__text .btn { margin-top: 8px; }

/* Timeline: a hairline that fills with scroll, three nodes that light as it reaches them */
.st-time {
  --fill: 0;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 34px;
  display: grid;
  gap: 44px;
}
.st-time::before, .st-time::after {
  content: "";
  position: absolute;
  left: 4px; top: 8px; bottom: 8px;
  width: 1px;
}
.st-time::before { background: rgba(255, 255, 255, .22); }
.st-time::after { background: var(--white); transform: scaleY(var(--fill)); transform-origin: top; }
.st-time__item { position: relative; display: grid; gap: 8px; opacity: .4; transition: opacity .8s var(--ease-out); }
.st-time__item.is-lit { opacity: 1; }
.st-time__item::before {
  content: "";
  position: absolute;
  left: -34px; top: .35em;
  width: 9px; height: 9.5px;
  background: #1f2a32;
  box-shadow: inset 0 0 0 1px var(--white);
  transition: background-color .6s ease, transform .8s var(--ease-out);
}
.st-time__item.is-lit::before { background: var(--white); transform: rotate(90deg); }
.st-time__when {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grey-400);
}
.st-time__what { font-family: var(--f-display); font-size: var(--t-list); line-height: 1.2; }
.st-time__note { font-size: 15px; line-height: 1.35; color: rgba(255, 255, 255, .62); }

@media (min-width: 900px) {
  .st-why__texture { left: 49.4%; right: 3.2%; width: auto; }
  .st-why__content {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: clamp(48px, 6vw, 120px);
    align-items: center;
    padding-block: clamp(96px, 8vw, 140px);
    padding-left: var(--card-pad-left);
  }
  .st-time { gap: 60px; padding-left: 44px; }
  .st-time__item::before { left: -44px; }
}

/* Why Bruce with two buttons: contact first, then About (stage pages, 2026-11-02) */
.st-why__text .st-why__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* =========================================================
   5. TYPICAL PRIORITIES
   ========================================================= */
.st-work { padding-block: var(--section-y); }   /* the stage tag sits close to its heading */

.st-scope { display: grid; gap: 14px; }

.st-scope__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; justify-items: start; }
.st-scope__item {
  display: inline-grid;
  grid-template-columns: 26px auto auto;
  align-items: baseline;
  gap: 8px;
  padding: 10px 16px 10px 14px;
  border: 1px solid rgba(12, 15, 17, .16);
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: 15px;
  line-height: 1.2;
  transition: background-color .5s var(--ease-out), color .5s var(--ease-out), border-color .5s var(--ease-out), opacity .5s ease;
}

.st-scope__item.is-lit { background: var(--ink); border-color: var(--ink); color: var(--white); }

.st-work.is-linking .st-scope__item:not(.is-lit) { opacity: .4; }

.st-pri {
  list-style: none;
  margin: 0; padding: 0;
  border-bottom: 1px solid rgba(12, 15, 17, .14);
}
.st-pri li {
  position: relative;
  display: block;
  padding: 18px 0 18px 30px;
  border-top: 1px solid rgba(12, 15, 17, .14);
  font-size: var(--t-body);
  line-height: 1.35;
  outline: none;
  cursor: default;
  transition: color .5s var(--ease-out), padding-left .7s var(--ease-out), opacity 1s var(--ease-out), transform 1.2s var(--ease-out);
}
.st-pri.is-settled > li { transition-delay: 0s !important; }
.st-pri li::before {
  content: "";
  position: absolute;
  left: 0; top: calc(18px + .42em);
  width: 9px; height: 9.5px;
  background: var(--ink);
  transform: scale(.45);
  opacity: .35;
  transition: transform .6s var(--ease-out), opacity .5s ease;
}
.st-pri li:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.st-work.is-linking .st-pri li { color: var(--grey-500); }
.st-work.is-linking .st-pri li.is-lit { color: var(--ink); padding-left: 38px; }
.st-pri li.is-lit::before { transform: rotate(90deg) scale(1); opacity: 1; }

.reveal-stagger.is-in > *:nth-child(6) { transition-delay: .5s; }
.reveal-stagger.is-in > *:nth-child(7) { transition-delay: .6s; }

@media (min-width: 900px) {
  
  .st-pri li { padding-block: 22px; }
  .st-pri li::before { top: calc(22px + .42em); }
}

/* Case study (Scaling): sits on the plain page colour here */
.page-stage .case { background: var(--bg); padding-top: clamp(24px, 4vw, 70px); }

/* =========================================================
   6. CLOSING
   ========================================================= */
.page-stage .cta { padding-top: clamp(40px, 5.5vw, 96px); }
/* button on the same horizontal axis as the title (2026-10-13; was pinned to the bottom) */
.page-stage .cta__content { align-items: center; }
.page-stage .cta__right { align-content: center; gap: 28px; }
/* Phones: the long closing button fits on one line where it can, and wraps centred where it can't */
@media (max-width: 899px) { .page-stage .cta .btn { padding-inline: 16px; text-align: center; } }
.page-stage .cta__title .line:nth-child(3) > span { transition-delay: .18s; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .st-decide[data-step="1"] .st-dot::before { animation: none; }
  
  .st-dia__glass, .st-dia__sweep, .st-dia__line, .st-dia__node, .st-dia__label, .st-dia__note { opacity: 1 !important; transform: none !important; }
}

/* 2026-10-13 — phones: the three stages as one compact row of cells (like desktop), so the hero text has more room */
@media (max-width: 899px) {
  .st-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; border-left: 1px solid var(--rule); }
  .st-stages__item {
    grid-template-columns: 1fr;
    gap: 14px;
    min-height: 0;
    padding: 12px 9px 14px;
    border-top: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
    font-size: clamp(11px, 3.3vw, 16px);
  }
  .st-stages__arrow { display: none; }
  .st-stages__item[aria-current="page"] { background: rgba(255, 255, 255, .07); }
}

@keyframes st-orbit { to { transform: rotate(360deg); } }

/* =========================================================
   DOES THIS SOUND FAMILIAR? (moved from the old Relationships page)
   The section pins; the items, in one aligned column, glide up past the
   marker on a large circle (as in the design). The item at the marker is
   dark; the ones above and below soften and fade. Without pinning (phones,
   reduced motion, short screens) it is a plain list.
   ========================================================= */
.st-fam { position: relative; padding-block: var(--section-y); }
.st-fam__dial { display: none; }
.st-fam__inner { display: grid; gap: 40px; }
.st-fam__list {
  list-style: none;
  margin: 0; padding: 0;
  border-bottom: 1px solid rgba(12, 15, 17, .14);
}
.st-fam__list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid rgba(12, 15, 17, .14);
  font-family: var(--f-display);
  font-size: var(--t-list);
  line-height: 1.2;
  text-wrap: pretty;
}
.st-fam__num { font-size: 13px; letter-spacing: .04em; color: var(--grey-500); }
/* the text is simply there (the movement comes from the list itself) */
.st-fam .st-fam__text .line > span { transform: none; }
/* plain list (phones, short screens): text runs the full width and the number sits on its first line */
.st-fam:not(.is-pinned) .st-fam__text .line > span { display: inline; }
/* Phones/tablets: same light list as "You may be here if" on the other stages (2026-10-29) */
@media (max-width: 899px) {
  .st-fam__inner { gap: 28px; }
  .st-fam__list li { grid-template-columns: 32px 1fr; padding-block: 14px; font-size: 17px; line-height: 1.3; }
  .st-fam__num { font-size: 12px; }
}
@media (min-width: 900px) {
  .st-fam__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 120px); }
  .st-fam__title { align-self: start; position: sticky; top: 140px; }
  .st-fam__list li { padding-block: 30px; grid-template-columns: 64px 1fr; }
}

/* ---- Pinned ---- */
.st-fam.is-pinned { height: calc(100svh + 7 * 42svh); padding: 0; }   /* one 42svh stretch per item after the first (8 items since 2026-10-30) */
.st-fam.is-pinned .st-fam__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.st-fam.is-pinned .st-fam__dial {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.st-fam__circle {
  fill: none;
  stroke: url(#st-fam-stroke);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.st-fam__marker { fill: #a6a6a6; }
/* each time a new item reaches the marker: the dot swells a little and a thin ring opens out and fades */
.st-fam__ring {
  fill: none;
  stroke: #a6a6a6;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.st-fam__dot.is-pulse .st-fam__ring { animation: st-fam-ring 1.4s var(--ease-out); }
.st-fam__dot.is-pulse .st-fam__marker { animation: st-fam-bump .9s var(--ease-out); transform-box: fill-box; transform-origin: center; }
@keyframes st-fam-ring {
  0% { opacity: .8; transform: scale(1); }
  100% { opacity: 0; transform: scale(3); }
}
@keyframes st-fam-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.st-fam.is-pinned .st-fam__inner { position: relative; height: 100%; display: block; }
.st-fam.is-pinned .st-fam__title {
  position: absolute;
  top: 45.2%;   /* level with the marker */
  left: var(--gutter);
  translate: 0 -50%;
  max-width: 34%;
  z-index: 1;
}
/* Items are placed by script on every frame (position on the curve, colour, fade) */
.st-fam.is-pinned .st-fam__list {
  position: absolute;
  inset: 0 auto 0 var(--list-x, 50%);
  width: min(677px, calc(100% - var(--list-x, 50%) - var(--gutter)));
  border: 0;
}
.st-fam.is-pinned .st-fam__list > li {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  display: block;
  padding: 26px 0 0;
  border-top: 1px solid rgba(12, 15, 17, var(--rule, .14));
  color: rgb(var(--tone, 12, 15, 17));
  opacity: var(--o, 0);
  filter: blur(var(--blur, 0px));
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0);
  transition: none;
  will-change: transform, opacity, filter;
}
.st-fam.is-pinned .st-fam__num { display: none; }

/* after the light list, the sand fades in at the top of the next section (no hard edge) */
.st-fam + .problem { background: linear-gradient(to bottom, var(--bg), var(--sand) 16%, var(--bg)); }
@media (prefers-reduced-motion: reduce) {
  .st-fam__dot.is-pulse .st-fam__ring, .st-fam__dot.is-pulse .st-fam__marker { animation: none; }
}

/* Phones: ten labels around the sphere need slightly smaller tags to fit the screen */
@media (max-width: 699px) {
  .st-field--sphere .st-key { font-size: 9.5px; letter-spacing: .08em; padding: 4px 7px; }
  /* tags sit closer to their dots, so the longer 2026-10-30 labels don't run off the edge */
  .st-decide[data-step="3"] .st-field--sphere .st-key { transform: translate(8px, -50%); }
  .st-decide[data-step="3"] .st-field--sphere .st-key.is-left { transform: translate(calc(-100% - 8px), -50%); }
}
/* Phones/tablets: the labels arrive together with "A few set the foundation", not one by one after it */
@media (max-width: 899px) {
  .st-key { transition-delay: calc(.05s + var(--k) * .04s); }
}

/* =========================================================
   INSTITUTIONALIZING — MAKE COMPLEXITY WORK (2026-10-29)
   Same section as Why BSD "How the Parts of a Firm Connect" (why-bsd.css),
   ========================================================= */

/* No hard cuts: a section ending on the page bg eases into the sand band of the section after it
   (logo strips removed 2026-10-29) */

.st-fam + .st-stake { background: linear-gradient(to bottom, var(--bg), var(--sand) 22%, var(--bg)); }

/* =========================================================
   CLOSING BANNER — PHOTO VERSION (her Figma "08 · CTA Banner", 2368:71, 2026-10-29)
   The site's .cta card with the lit boulder photo instead of the blue gradient:
   title (second line grey) and button stacked on the left. Card 504px tall at 1728.
   ========================================================= */
.cta--photo .cta__card { background: #182127; }
.cta__photo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* tall box so the stronger drift (data-parallax .2, desktop only) never shows an edge */
.cta__photo img { position: absolute; inset: -30% 0; width: 100%; height: 160%; object-fit: cover; object-position: 50% 100%; }
/* keeps the title readable where the rock is bright (phones: the text sits over more of it) */
.cta__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 15, 17, .62), rgba(12, 15, 17, .38) 70%, rgba(12, 15, 17, .2)); }
/* phones: the title covers the bright part of the photo, so the grey line is lighter */
@media (max-width: 899px) { .cta--photo .cta__title .muted-light { color: rgba(255, 255, 255, .72); } }
.cta--photo .cta__content { grid-template-columns: 1fr; gap: 40px; align-content: center; }
.cta--photo .cta__right { padding-left: 0; }
@media (min-width: 900px) {
  .cta--photo .cta__content { min-height: 504px; padding-block: 120px; }
  .cta--photo .cta__photo::after { background: linear-gradient(90deg, rgba(12, 15, 17, .25), rgba(12, 15, 17, 0) 50%); }
}
   /* phones: stone toward the right edge; desktop: x has no effect */

.cta-why .cta__photo img { object-position: 50% 62%; }   /* peaks and the band of mist */
/* light sky behind the title: darker on the left and a lighter grey line, so both lines read */
.cta-why .cta__title .muted-light { color: rgba(255, 255, 255, .72); }
@media (min-width: 900px) { .cta-why .cta__photo::after { background: linear-gradient(90deg, rgba(12, 15, 17, .55), rgba(12, 15, 17, .18) 55%, rgba(12, 15, 17, 0) 80%); } }