@layer pages {
  [data-page="story"] {
    --st-gap: var(--s5);
    --st-fs-num: clamp(46px, 18px + 5.2vw, 96px);
    --st-sand: var(--bb-sand);
    --st-sand-line: color-mix(in srgb, var(--bb-ink) 12%, transparent);
    --st-kick: calc(var(--fs-18) * 1.3 + var(--s4));
    .st-kicker { margin-bottom: var(--s4); font-size: var(--fs-18); }
    .st-hero {
      overflow: clip; padding: clamp(20px, 2px + 4vw, 56px) 0 var(--section-pad);
      background-color: var(--bb-white);
      background-image:
        radial-gradient(40% 70% at 82% 50%, color-mix(in srgb, var(--purple-100) 92%, transparent) 0%, transparent 76%),
        radial-gradient(32% 42% at 0% 0%, color-mix(in srgb, var(--purple-50) 90%, transparent) 0%, transparent 80%);
    }
    .wrap.st-hero__row {
      display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--st-gap); align-items: center;
      width: min(calc(100% - var(--gutter) * 2), 1320px);
    }
    .st-crumbs { grid-column: 1 / -1; margin-bottom: clamp(24px, 4px + 2.8vw, 48px); }
    .st-hero__copy { grid-column: 1 / span 7; padding-right: clamp(0px, 3vw, 56px); }
    .st-h1 { max-width: 13em; }
    .st-hero__lede { margin-top: var(--s5); max-width: 40ch; }
    .st-hero__row:not(:has(.st-hero__fig)) .st-hero__copy { grid-column: 1 / span 10; }
    .st-hero__fig { grid-column: 8 / span 5; justify-self: end; position: relative; isolation: isolate; width: min(100%, 500px); }
    .st-hero__fig img { position: relative; width: 100%; height: auto; border-radius: var(--radius-3); box-shadow: var(--shadow-picture); }
    .st-hero__fig::before, .st-hero__fig::after { content: ""; position: absolute; z-index: -1; aspect-ratio: 1; border-radius: 50%; pointer-events: none; }
    .st-hero__fig::before { width: 76%; right: -15%; top: -8%; background: var(--purple-200); opacity: .6; }
    .st-hero__fig::after { width: 62%; left: -17%; bottom: -9%; background: var(--green-100); opacity: .7; }
    .st-figs-wrap { width: min(calc(100% - var(--gutter) * 2), 1320px); margin: clamp(28px, 10px + 2.4vw, 48px) auto 0; }
    .st-figs {
      padding: clamp(28px, 8px + 3vw, 56px) clamp(20px, 4px + 4vw, 72px) clamp(24px, 6px + 2.2vw, 40px);
      border-radius: var(--radius-3); background: var(--bb-white) var(--fill-tint); box-shadow: inset 0 0 0 1px var(--bb-line);
    }
    .st-figs__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .st-figs__list:has(> :last-child:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .st-figs__list:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-figs__list:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
    .st-fig { min-width: 0; padding-inline: clamp(16px, 2.6vw, 44px); }
    .st-fig:first-child { padding-left: 0; }
    .st-fig + .st-fig { border-left: 1px solid var(--line); }
    .st-num {
      padding-top: .04em; font-size: var(--st-fs-num); line-height: var(--lh-giant); font-weight: var(--fw-medium);
      letter-spacing: var(--tr-giant); color: var(--ink); white-space: nowrap; font-variant-numeric: lining-nums;
    }
    .st-num .sign { margin-right: .02em; }
    @media (width >= 640px) {
      .st-figs--long { --st-fs-num: clamp(30px, 4.5vw - 1px, 64px); }
    }
    .st-fig__l { margin-top: var(--s3); font-size: var(--fs-20); line-height: 1.3; color: var(--ink); }
    .st-figs__when {
      margin-top: clamp(24px, 8px + 2vw, 36px); padding-top: var(--s4); border-top: 1px solid var(--line);
      font-size: var(--fs-14); line-height: 1.4; color: var(--muted);
    }
    .st-about__body {
      display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--st-gap); align-items: start;
      margin-top: clamp(40px, 16px + 3.4vw, 72px);
    }
    .st-about__p { grid-column: 1 / span 6; max-width: 46ch; font-size: var(--fs-20); line-height: 1.55; color: var(--text); text-wrap: pretty; }
    .st-challenges {
      grid-column: 8 / span 5; padding: var(--s2) clamp(20px, 2.4vw, 32px);
      border-radius: var(--radius-3); background: var(--bb-white); box-shadow: inset 0 0 0 1px var(--bb-line), var(--shadow-picture);
    }
    .st-challenges li {
      display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: var(--s2); padding-block: 14px;
      font-size: var(--fs-18); line-height: 1.45; color: var(--ink); text-wrap: pretty;
    }
    .st-challenges li + li { border-top: 1px solid var(--line); }
    .st-challenges li::before { content: "–" / ""; color: var(--accent-text); font-weight: var(--fw-strong); }
    .st-approach { --line: var(--st-sand-line); background: var(--st-sand); }
    .st-approach__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--st-gap); align-items: start; }
    .st-approach__why { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + var(--s6)); }
    .st-approach__p { margin-top: var(--s5); max-width: 44ch; font-size: var(--fs-18); line-height: 1.55; color: var(--text); text-wrap: pretty; }
    .st-approach__pic { margin-top: var(--s6); width: 100%; height: auto; border-radius: var(--radius-3); box-shadow: var(--shadow-picture); }
    .st-approach__how { grid-column: 7 / span 6; padding-top: var(--st-kick); }
    .st-steps { margin-top: clamp(24px, 8px + 2vw, 40px); border-bottom: 1px solid var(--line); list-style: none; }
    .st-step { display: grid; padding-block: clamp(22px, 8px + 1.6vw, 32px); border-top: 1px solid var(--line); }
    .st-step__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); font-size: var(--fs-16); }
    .st-step__t { padding-top: 2px; font-size: var(--fs-24); line-height: 1.25; font-weight: var(--fw-display); color: var(--ink); text-wrap: balance; }
    .st-step__t span { font-weight: 400; color: var(--text); }
    .st-step__p { margin-top: var(--s3); max-width: 52ch; font-size: var(--fs-18); line-height: 1.55; color: var(--text); text-wrap: pretty; }
    .st-mark {
      flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-2);
      background: var(--bb-white); box-shadow: inset 0 0 0 1px var(--bb-line);
    }
    .st-mark img { width: auto; height: 20px; max-width: 26px; }
    .st-approach__in--one .st-approach__why, .st-approach__in--one .st-approach__how { grid-column: 1 / span 8; position: static; }
    .st-approach__in--one .st-approach__how { padding-top: 0; }
    .st-prose { margin-top: var(--s5); max-width: 52ch; font-size: var(--fs-18); line-height: 1.55; color: var(--text); text-wrap: pretty; }
    .st-prose > * + * { margin-top: var(--s4); }
    .st-prose > h3 { margin-top: var(--s6); font-size: var(--fs-24); line-height: 1.25; font-weight: var(--fw-display); color: var(--ink); text-wrap: balance; }
    .st-prose > h3:first-child { margin-top: 0; }
    .st-prose ul { display: grid; row-gap: var(--s2); }
    .st-prose li { position: relative; padding-left: 22px; }
    .st-prose li::before { content: "–" / ""; position: absolute; left: 0; color: var(--accent-text); font-weight: var(--fw-strong); }
    .st-prose ol { padding-left: 1.4em; list-style: decimal; }
    .st-prose blockquote { padding-left: var(--s5); border-left: 3px solid var(--accent-text); color: var(--ink); }
    .st-prose__fig img, .st-prose img { width: 100%; height: auto; border-radius: var(--radius-3); box-shadow: var(--shadow-picture); }
    .st-prose figcaption { margin-top: var(--s2); font-size: var(--fs-14); color: var(--muted); }
    .st-about__body > .st-prose { grid-column: 1 / span 8; margin-top: 0; max-width: 62ch; }
    .st-results__main > .st-prose { max-width: 62ch; }
    .st-review { overflow: clip; }
    .st-orbit { fill: none; stroke: var(--bb-white); stroke-opacity: .22; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
    .wrap.st-review__in { width: min(calc(100% - var(--gutter) * 2), 1040px); }
    .st-quote {
      display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(28px, 4vw, 64px); row-gap: var(--s5);
      align-items: center;
    }
    .st-quote--bare { grid-template-columns: minmax(0, 1fr); }
    .st-quote .face { --f: clamp(96px, 40px + 11vw, 208px); --d: clamp(12px, 6px + 1vw, 20px); grid-row: 1 / 3; }
    .st-quote__q p {
      max-width: 30ch; font-size: var(--fs-40); line-height: 1.25; font-weight: var(--fw-medium); color: var(--ink);
      text-indent: -.4em; text-wrap: pretty;
    }
    .st-quote:not(:has(> .face)) { grid-template-columns: minmax(0, 1fr); }
    .st-who { align-self: start; display: grid; gap: 2px; font-size: var(--fs-16); line-height: 1.4; color: var(--text); }
    .st-who b { font-size: var(--fs-18); color: var(--ink); }
    .st-results__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--st-gap); align-items: start; }
    .st-results__art { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + var(--s6)); padding-right: clamp(0px, 2.4vw, 40px); }
    .st-results__art svg { width: 100%; height: auto; max-height: calc(100vh - var(--header-h) - 64px); }
    .st-stop--tint-ice { stop-color: var(--tint-ice); }  .st-stop--tint-lilac { stop-color: var(--tint-lilac); }
    .st-stop--tint-snow { stop-color: var(--tint-snow); }  .st-stop--tint-frost { stop-color: var(--tint-frost); }
    .st-stop--tint-mint { stop-color: var(--tint-mint); }  .st-stop--tint-mint-2 { stop-color: var(--tint-mint-2); }
    .st-stop--tint-mint-3 { stop-color: var(--tint-mint-3); }  .st-stop--tint-mist { stop-color: var(--tint-mist); }
    .st-stop--tint-periwinkle { stop-color: var(--tint-periwinkle); }  .st-stop--purple { stop-color: var(--bb-purple); }  .st-stop--mint { stop-color: var(--bb-green); }
    .st-rings { fill: none; }
    .st-fill--purple { fill: var(--bb-purple); }  .st-fill--mint { fill: var(--bb-green); }
    .st-results__main { grid-column: 6 / span 7; container-type: inline-size; }
    .st-ba { margin-top: clamp(28px, 10px + 2.4vw, 48px); border-top: 1px solid var(--line); }
    .st-ba__row { padding-block: clamp(20px, 8px + 1.4vw, 28px); border-bottom: 1px solid var(--line); }
    .st-ba__what { font-size: var(--fs-18); line-height: 1.3; font-weight: var(--fw-strong); color: var(--ink); }
    .st-ba__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin-top: var(--s3); }
    @container (width <= 560px) {
      .st-ba__line { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s2) var(--s3); }
      .st-ba__from { grid-column: 1 / -1; justify-self: start; }
    }
    .st-ba__from {
      display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: var(--radius-2);
      background: var(--neutral-100); box-shadow: inset 0 0 0 1px var(--bb-line); font-size: var(--fs-16); line-height: 1.3; color: var(--text);
    }
    .st-ba__to { display: inline-flex; color: var(--accent-text); }
    .st-ba__to svg { width: 24px; height: 24px; }
    .st-ba__now { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3); }
    .st-ba__n {
      font-size: var(--fs-40); line-height: 1; font-weight: var(--fw-medium); letter-spacing: -.01em; color: var(--ink);
      white-space: nowrap; font-variation-settings: normal; font-variant-numeric: lining-nums;
    }
    .st-ba__n .sign { margin-right: .02em; }
    .st-ba__n :is(.site-num__s, .site-num__f) { display: inline; }
    .st-ba__when { font-size: var(--fs-16); line-height: 1.3; color: var(--muted); }
    .st-results__p { margin-top: clamp(28px, 8px + 2vw, 40px); max-width: 60ch; font-size: var(--fs-18); line-height: 1.6; color: var(--text); text-wrap: pretty; }
    .st-say {
      margin-top: var(--s6); padding: clamp(20px, 8px + 1.6vw, 32px) clamp(20px, 8px + 2vw, 40px);
      border-radius: var(--radius-3); background: var(--bb-white) var(--fill-tint); box-shadow: inset 0 0 0 1px var(--bb-line);
      font-size: var(--fs-20); line-height: 1.5; font-weight: var(--fw-medium); color: var(--ink); text-wrap: pretty;
    }
    .st-say strong { font-weight: var(--fw-poster); color: var(--accent-text); }
    .st-close {
      position: relative; isolation: isolate; overflow: clip; padding-block: var(--section-pad);
      background: var(--purple-800) linear-gradient(105deg, var(--bb-deep) 0%, var(--purple-900) 30%, var(--purple-800) 62%, var(--purple-600) 100%);
      box-shadow: var(--edge-light);
    }
    .st-close__art {
      position: absolute; z-index: 0; top: 50%; translate: 0 -50%; width: clamp(300px, 48vw, 740px); height: auto;
      left: calc(max(var(--gutter), (100% - var(--wrap-width)) / 2) - 9vw); overflow: visible; pointer-events: none;
    }
    .st-close__disc { fill: var(--purple-700); fill-opacity: .4; }
    .st-close__crest { fill: var(--purple-600); fill-opacity: .3; }
    .st-close__ring { fill: none; stroke: var(--bb-green); stroke-opacity: .6; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
    .st-close__dot { fill: var(--bb-green); }
    .st-close__dot--w { fill: var(--bb-white); }
    .st-close__in { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--st-gap); }
    .st-close__copy { --st-cfs: clamp(36px, 18px + 3.2vw, 64px); --st-step: calc(var(--st-cfs) * 1.15); grid-column: 7 / span 6; }
    .st-close__h {
      display: grid; justify-items: start; font-size: var(--st-cfs); line-height: 1.08; font-weight: var(--fw-poster);
      letter-spacing: var(--tr-poster); color: var(--ink);
    }
    .st-close__h .line:nth-child(2) { margin-left: var(--st-step); }
    .st-close__h .line:nth-child(3) { margin-left: calc(var(--st-step) * 2); }
    .st-close__p { margin: var(--s5) 0 0 calc(var(--st-step) * 2); max-width: 34ch; font-size: var(--fs-18); line-height: 1.5; color: var(--text); text-wrap: pretty; }
    .st-close__btn { margin: var(--s6) 0 0 calc(var(--st-step) * 2); }
    @media (900px <= width < 1280px) {
      .st-close__copy { grid-column: 6 / span 7; }
      .st-close__art { width: 40vw; }
    }
    @media (width < 900px) {
      .st-hero__row { row-gap: var(--s7); }
      .st-hero__copy, .st-hero__fig { grid-column: 1 / -1; padding-right: 0; }
      .st-hero__fig { justify-self: center; width: min(100%, 520px); }
      .st-figs__list:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .st-figs__list:has(> :nth-child(4)) > .st-fig:nth-child(odd) { padding-left: 0; border-left: 0; }
      .st-figs__list:has(> :nth-child(4)) > .st-fig:nth-child(-n+2) { padding-bottom: var(--s6); }
      .st-figs__list:has(> :nth-child(4)) > .st-fig:nth-child(n+3) { padding-top: var(--s6); border-top: 1px solid var(--line); }
      .st-about__body { row-gap: var(--s6); }
      .st-about__p, .st-challenges, .st-about__body > .st-prose { grid-column: 1 / -1; }
      .st-approach__in--one .st-approach__why, .st-approach__in--one .st-approach__how { grid-column: 1 / -1; }
      .st-about__p { max-width: 54ch; }
      .st-challenges { max-width: 640px; }
      .st-approach__in { row-gap: var(--s8); }
      .st-approach__why, .st-approach__how { grid-column: 1 / -1; position: static; padding-top: 0; }
      .st-approach__pic { max-width: 560px; }
      .st-results__in { row-gap: var(--s6); }
      .st-results__art { grid-column: 1 / -1; position: static; padding-right: 0; }
      .st-results__art svg { width: auto; height: clamp(200px, 30vw, 260px); max-height: none; margin-inline: auto; }
      .st-results__main { grid-column: 1 / -1; }
      .st-close__copy { grid-column: 1 / -1; }
      .st-close__art { left: auto; right: -150px; width: 380px; }
    }
    @media (640px <= width < 900px) {
      .st-hero__fig { width: 100%; }
      .st-hero__fig img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 48%; }
      .st-hero__fig::before { width: 52%; right: -8%; top: -12%; }
      .st-hero__fig::after { width: 40%; left: -9%; bottom: -14%; }
    }
    @media (width < 640px) {
      .st-hero { padding-top: var(--s5); }
      .st-hero__row { row-gap: var(--s6); }
      .st-hero__lede { font-size: var(--fs-18); }
      .st-hero__fig img { aspect-ratio: 1; object-fit: cover; object-position: 50% 42%; }
      .st-hero__fig::before { width: 64%; right: -10%; top: -6%; }
      .st-hero__fig::after { width: 52%; left: -10%; bottom: -7%; }
      .st-figs__list:has(> :nth-child(3)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .st-figs__list:has(> :nth-child(3)) > .st-fig:nth-child(odd) { padding-left: 0; border-left: 0; }
      .st-figs__list:has(> :nth-child(3)) > .st-fig:nth-child(-n+2) { padding-bottom: var(--s5); }
      .st-figs__list:has(> :nth-child(3)) > .st-fig:nth-child(n+3) { padding-top: var(--s5); border-top: 1px solid var(--line); }
      .st-figs__list:has(> :last-child:nth-child(3)) { grid-template-columns: minmax(0, 1fr); }
      .st-figs__list:has(> :last-child:nth-child(3)) > .st-fig { padding: var(--s5) 0; border: 0; border-top: 1px solid var(--line); }
      .st-figs__list:has(> :last-child:nth-child(3)) > .st-fig:first-child { padding-top: 0; border-top: 0; }
      .st-figs__list:has(> :last-child:nth-child(3)) > .st-fig:last-child { padding-bottom: 0; }
      .st-fig { padding-inline: var(--s4) 0; }
      .st-fig__l { font-size: var(--fs-18); }
      .st-about__p { font-size: var(--fs-18); }
      .st-challenges li { font-size: var(--fs-16); padding-block: 12px; }
      .st-approach__p, .st-step__p, .st-prose { font-size: var(--fs-16); }
      .st-step__t { font-size: var(--fs-20); padding-top: 0; }
      .st-mark { width: 36px; height: 36px; }
      .st-quote { grid-template-columns: minmax(0, 1fr); }
      .st-quote .face { grid-row: auto; }
      .st-ba__n { font-size: var(--fs-32); }
      .st-results__p { font-size: var(--fs-16); }
      .st-say { font-size: var(--fs-18); }
      .st-close { padding-bottom: calc(var(--section-pad) + 170px); }
      .st-close__art { top: auto; bottom: -110px; translate: none; right: auto; left: -60px; width: 280px; }
      .st-close__p { font-size: var(--fs-16); }
    }
    @media print {
      .st-close__art, .st-review .curves__art, .st-hero__fig::before, .st-hero__fig::after { display: none; }
      .st-approach__why, .st-results__art { position: static; }
      }
  }
}
@layer sections {
  bb-numbers { display: block; }
  .site-logo {
    display: flex; align-items: center; justify-content: center; flex: none; width: 104px; height: 52px; padding: 8px 12px;
    border-radius: var(--radius-2); background: var(--bb-white);
  }
  .site-logo img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
  .site-num {
    padding-top: .04em; font-size: clamp(44px, 24px + 2.2vw, 60px); line-height: var(--lh-giant);
    font-weight: var(--fw-medium); letter-spacing: var(--tr-giant); color: var(--ink); white-space: nowrap;
    font-variant-numeric: lining-nums;
  }
  .site-num .sign { margin-right: .02em; }
  .site-num__s, .site-num__f { display: inline-block; }
  .site-fig__l { margin-top: var(--s2); font-size: var(--fs-16); line-height: 1.3; color: var(--ink); }
  @keyframes site-slide-in {
    from { translate: 40px 0; opacity: 0; }
    to   { translate: 0 0;    opacity: 1; }
  }
  @keyframes site-rise {
    from { translate: 0 calc(100% + .2em); clip-path: inset(-.3em -1em 100% -1em); }
    to   { translate: 0 0;                 clip-path: inset(-.3em -1em -.25em -1em); }
  }
  @media screen and (prefers-reduced-motion: no-preference) {
    html:not(.rm) bb-numbers:not([rise]).is-armed .site-fig:not(.is-in) :is(.site-num__s, .site-num__f) { opacity: 0; }
    html:not(.rm) bb-numbers:not([rise]).is-armed .site-fig.is-in :is(.site-num__s, .site-num__f) { animation: site-slide-in .7s var(--ease) var(--site-d, 0s) backwards; }
    html:not(.rm) bb-numbers:not([rise]).is-armed .site-fig.is-in .site-num__f { animation-delay: calc(var(--site-d, 0s) + .08s); }
    html:not(.rm) bb-numbers[rise].is-armed .site-fig:not(.is-in) :is(.site-num__s, .site-num__f) { clip-path: inset(0 0 100% 0); }
    html:not(.rm) bb-numbers[rise].is-armed .site-fig.is-in :is(.site-num__s, .site-num__f) { animation: site-rise 1.1s var(--ease) var(--site-d, 0s) backwards; }
    html:not(.rm) bb-numbers[rise].is-armed .site-fig.is-in .site-num__f { animation-delay: calc(var(--site-d, 0s) + .14s); }
    html:not(.rm) bb-numbers.is-armed .site-fig.site-now :is(.site-num__s, .site-num__f) { animation: none; }
  }
}
@layer sections {
  .face {
    --f: 64px; --d: 10px; --rw: 2px;
    position: relative; display: block; flex: none; width: var(--f); height: var(--f);
    border: var(--rw) solid var(--bb-white); border-radius: 50%;
  }
  .face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
  .face::after {
    content: ""; position: absolute; width: var(--d); height: var(--d); border-radius: 50%; background: var(--bb-green);
    left: calc(var(--f) * .828 - var(--d) / 2 - var(--rw)); top: calc(var(--f) * .123 - var(--d) / 2 - var(--rw));
  }
}