/* =========================================================
   BSD Strategic Advisors — Why BSD
   Builds on styles.css and stage.css (hero, problem, cards, stages, footer).

    1. Hero
    2. (Make complexity work: removed 2026-11-02)
    3. A network built over a career (groups, Growth Stages layout)
       then Ways To Work Together (styles.css)
    4. Are you launching, scaling or institutionalizing? (homepage stages)
   ========================================================= */

/* =========================================================
   1. HERO
   ========================================================= */
.wb-hero .hero__img { object-position: 50% 36%; }
@media (min-width: 900px) { .wb-hero .hero__img { object-position: 50% 34%; } }

/* =========================================================
   3. A NETWORK BUILT OVER A CAREER
   Growth Stages layout: title + intro left, the five groups right.
   ========================================================= */
.wb-net { border-top: 1px solid rgba(12, 15, 17, .18); }
/* Weighing the Parts section removed (copy in _backups/on-hold-sections-2026-11-02) 2026-11-02 (Bruce): the network section picks up the sand from the card above */
.wb-value + .wb-net { border-top: 0; background: linear-gradient(to bottom, var(--sand), var(--bg) 320px); }
.wb-net__sticky { padding-block: var(--section-y); }
/* Desktop: pinned while scrolling opens the five groups in turn (set by why-bsd.js) */
.wb-net.is-pinned { height: calc(100svh + 5 * 45svh); }
.wb-net.is-pinned .wb-net__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  padding-block: 0;
}
.wb-net.is-pinned .wb-net__inner { width: 100%; }
.wb-net.is-measuring * { transition: none !important; }
.wb-net__inner { display: grid; gap: 32px; }
.wb-net__intro { display: grid; gap: 26px; justify-items: start; }
.wb-net__intro .body-l { max-width: 400px; display: grid; gap: 1em; }

.wb-net__list { list-style: none; margin: 0; padding: 0; }
.wb-grp + .wb-grp { border-top: 1px solid rgba(12, 15, 17, .14); }   /* a hairline between groups */
.wb-grp h3 { margin: 0; font: inherit; }
.wb-grp__head {
  width: 100%;
  display: grid;
  grid-template-columns: 44px 1fr 26px;
  align-items: baseline;
  padding: 18px 0;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--f-display);
  font-size: var(--t-list);
  line-height: 1.1;
  color: var(--grey-500);
  cursor: pointer;
  transition: color .6s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.wb-grp.is-open .wb-grp__head { color: var(--ink); }
.wb-grp.is-open .wb-grp__name { font-weight: 600; }
@media (hover: hover) { .wb-grp__head:hover { color: var(--ink); } }
.wb-grp__head:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* the people in the open group pop up one after another */
.wb-grp__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease-out), margin .7s var(--ease-out); }
.wb-grp.is-open .wb-grp__body { grid-template-rows: 1fr; margin-top: -8px; }   /* the people sit close under their group name */
.wb-grp__inner { overflow: hidden; }
.wb-grp__items { list-style: none; margin: 0; padding: 0 0 20px 44px; line-height: 1.3; }
.wb-grp__items li {
  color: rgba(12, 15, 17, .5);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
}
.wb-grp.is-open .wb-grp__items li {
  opacity: 1;
  transform: none;
  transition: opacity .8s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: calc(.15s + var(--i, 0) * .06s);
}
.wb-grp__items li:nth-child(2) { --i: 1; }
.wb-grp__items li:nth-child(3) { --i: 2; }
.wb-grp__items li:nth-child(4) { --i: 3; }
.wb-grp__items li:nth-child(5) { --i: 4; }
.wb-grp__items li:nth-child(6) { --i: 5; }

@media (min-width: 900px) {
  /* as in the design: title top left, intro below it, groups in the right half */
  .wb-net__sticky { padding-block: 127px 135px; }
  .wb-net__inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "title list" "intro list";
    grid-template-rows: auto 1fr;
    row-gap: 32px;   /* label 32px under the headline, as on the other sections (was 82px, 2026-10-27) */
    column-gap: 0;
  }
  .wb-net__title { grid-area: title; max-width: 466px; }
  .wb-net__intro { grid-area: intro; gap: clamp(56px, 7.4vw, 128px); align-self: start; }   /* label to text: the homepage design gap */
  .wb-net__list { grid-area: list; align-content: start; margin-top: -30px; }
  .wb-grp__head { grid-template-columns: 92px 1fr 26px; padding-block: 30px; }
  .wb-grp__items { padding: 0 0 35px 92px; }
  .wb-grp.is-open .wb-grp__body { margin-top: -14px; }
}

/* plus that turns into a minus */
.wb-grp__icon { position: relative; align-self: center; width: 14px; height: 14px; justify-self: end; }
.wb-grp__icon::before, .wb-grp__icon::after {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 14px; height: 1px;
  background: currentColor;
  transition: transform .6s var(--ease-out);
}
.wb-grp__icon::after { transform: rotate(90deg); }
.wb-grp.is-open .wb-grp__icon::after { transform: rotate(0deg); }

/* the closing card follows straight on from the list */
.page-why .wb-net + .cta { padding-top: 0; }

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  
  .wb-grp__body, .wb-grp__items li { transition: none !important; }
}

/* =========================================================
   SOME DECISIONS BENEFIT FROM A WIDER VIEW
   The stage pages' blue card (st-why, no texture): title + tag left, text right,
   then Bruce's seven points as a grid (2026-10-29, replaced the timeline that
   made it look like the About page).
   ========================================================= */
.wb-value {
  padding-bottom: clamp(40px, 5.5vw, 96px);
  /* fades into the sand that the next section starts with, so there is no hard line (2026-10-27) */
  background: linear-gradient(to bottom, var(--bg) 45%, var(--sand));
}
.wb-value__content { position: relative; padding-block: 72px 64px; }
.wb-value__top { display: grid; gap: 32px; }
.wb-value__top .tag { margin-top: 32px; }

.wb-value__grid { list-style: none; margin: 64px 0 0; padding: 0; display: grid; gap: 0 40px; }
.wb-value__grid li { display: grid; gap: 10px; align-content: start; padding-block: 24px 28px; border-top: 1px solid rgba(255, 255, 255, .18); }
.wb-value__num { font-size: 13px; letter-spacing: .04em; color: rgba(255, 255, 255, .5); }
.wb-value__name { font-family: var(--f-display); font-size: 26px; line-height: 1.25; margin-top: 14px; }
.wb-value__note { font-size: 16px; line-height: 1.4; color: rgba(255, 255, 255, .62); max-width: 340px; }
@media (min-width: 600px) { .wb-value__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phones/tablets: compact rows (number beside the name, note under it) so the seven points
   read as one short list instead of seven tall blocks (2026-10-29); desktop unchanged */
@media (max-width: 899px) {
  .wb-value__grid { margin-top: 40px; }
  .wb-value__grid li { grid-template-columns: 28px 1fr; column-gap: 8px; row-gap: 4px; align-items: baseline; padding-block: 16px 18px; }
  .wb-value__num { grid-row: span 2; font-size: 12px; }
  .wb-value__name { margin-top: 0; font-size: 19px; }
  .wb-value__note { grid-column: 2; font-size: 15px; }
}
@media (min-width: 900px) {
  .wb-value__content { padding-block: 120px 104px; padding-left: var(--card-pad-left); }
  .wb-value__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px; align-items: start; }   /* title and text top-aligned (2026-10-29) */
  .wb-value__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 96px; }
  /* titles scale with the column so the longest ("Deep Industry Relationships") stays on one line,
     all eight at the same size (2026-11-02, Bruce) */
  .wb-value__grid li { container-type: inline-size; }
  .wb-value__name { font-size: clamp(18px, 7.2cqi, 26px); }
}