/* Membership page, local draft v2 (26 September 2026).
   Built on the Collins system in site.css (tokens, type, bands, header, footer, fill, features).
   This file only adds the page's own sections. Motion is scroll-linked with native CSS scroll timelines
   where the browser has them; membership.js supplies the same motion where it does not.
   Everything that moves sits behind prefers-reduced-motion: no-preference. */

@property --mb-open { syntax: "<number>"; inherits: true; initial-value: 0; }

/* ------------------------------------------------------------------ Hero head */
.mb-hero { gap: 0; padding-bottom: 3rem; }
@media (width >= 768px) { .mb-hero { padding-bottom: 4rem; } }
@media (width >= 960px) {
  .mb-hero { padding-top: calc(9rem + env(safe-area-inset-top)); }
  .mb-hero .fb-head__title { font-size: clamp(4.6875rem, 7.4vw, 8.5rem); line-height: .92; max-width: none; }
  .mb-hero .fb-head__kicker { padding-top: .6rem; }
}
.mb-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.75rem; }
.mb-ctas .all-link { min-height: 2.75rem; }
@media (width < 768px) { .mb-hero { padding-top: calc(8.5rem + env(safe-area-inset-top)); } }

/* ------------------------------------------------------------------ Hero photograph: opens from the grid to full bleed as you scroll */
.mb-reel { padding-bottom: calc(var(--section-padding) * 1.5); }
.mb-reel__frame {
  --mb-open: 0;
  position: relative;
  height: clamp(420px, 56vw, 84svh);
  overflow: clip;
  background: #1a1411;
  clip-path: inset(0 calc(var(--grid-padding) * (1 - var(--mb-open))) round calc(var(--radius) * (1 - var(--mb-open))));
}
@media (width < 768px) { .mb-reel__frame { height: 78svh; } }
.mb-reel__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 55%;
  transform: scale(calc(1.1 - var(--mb-open) * .1));
  transform-origin: 50% 60%;
}
@media (width < 768px) { .mb-reel__frame img { object-position: 38% 50%; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mb-reel__frame { animation: mb-open linear both; animation-timeline: view(); animation-range: entry 55% cover 55%; }
  }
}
@keyframes mb-open { from { --mb-open: 0; } to { --mb-open: 1; } }
@media (prefers-reduced-motion: reduce) { .mb-reel__frame { --mb-open: 1; } }

/* ------------------------------------------------------------------ Statement + meta */
.mb-story { padding-top: 0; }
.mb-logos { gap: 1rem 1.1rem; flex-wrap: nowrap; }
.mb-logos img { opacity: .78; }
/* The statement keeps the Collins ink-fill, with a darker unfilled tone so no line is unreadable while it is on screen. */
.mb-story { --grey-80: #aaa4a0; }
@media (width < 768px) {
  .features.mb-plain { padding-top: 1rem; }
  #sizes { padding-top: 3.5rem; }
  .mb-plain dl > div, .mb-faq dl > div { max-width: none; }
}

/* ------------------------------------------------------------------ What's Included: a dark band of photographs */
.mb-inc { padding: calc(var(--section-padding) * .75) 0 calc(var(--section-padding) * 2.5); overflow: clip; timeline-scope: --mb-inc; }
@media (width < 768px) { .mb-inc { padding-bottom: calc(var(--section-padding) * 1.5); } }
.mb-inc__head { padding: 0 var(--grid-padding); margin-bottom: 3.5rem; }
@media (width >= 960px) {
  .mb-inc__head { margin-bottom: 6rem; }
  .mb-inc__head .hgroup { display: grid; grid-template-columns: repeat(var(--columns), 1fr); column-gap: var(--gutter); max-width: none; }
  .mb-inc__head .hgroup > * { max-width: none; }
  .mb-inc__head .hgroup > :first-child { grid-column: 2 / span 3; }
  .mb-inc__head .hgroup > p { grid-column: 5 / span 4; max-width: 30rem; }
}
.mb-inc__grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(calc(100vw - var(--grid-padding) * 2 - 2.25rem), 360px); gap: 1rem;
  scroll-timeline: --mb-inc x;
  padding: 0 var(--grid-padding); scroll-padding: 0 var(--grid-padding);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.mb-inc__grid::-webkit-scrollbar { display: none; }
.mb-inc__col { display: contents; }
.mb-card { scroll-snap-align: start; display: flex; flex-direction: column; }
.mb-card__img { position: relative; aspect-ratio: .8; border-radius: var(--radius); overflow: clip; background: #221a16; }
.mb-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out-expo); }
.mb-card h3 { margin-top: 1.25rem; font: 430 var(--fs-primary)/var(--lh-primary) var(--serif); letter-spacing: -.018em; color: var(--color-foreground); font-size: calc(var(--fs-primary) * .8); }
.mb-card p { margin-top: .75rem; max-width: 32ch; color: var(--color-mid); font: 400 1rem/1.35 var(--sans); letter-spacing: -.01rem; }
@media (any-pointer: fine) { .mb-card:hover .mb-card__img img { transform: scale(1.035); } }
.mb-inc__progress { display: none; }
@media (width < 960px) {
  @supports (animation-timeline: view(x)) {
    .mb-card h3, .mb-card p { animation: mb-peek linear both; animation-timeline: view(x); animation-range: entry 0% entry 100%; }
    .mb-inc__progress { display: block; height: 2px; margin: 2rem var(--grid-padding) 0; border-radius: 2px; background: color-mix(in oklab, var(--color-foreground), transparent 85%); overflow: hidden; }
    .mb-inc__progress i { display: block; height: 100%; background: var(--color-foreground); transform-origin: left; animation: mb-bar linear both; animation-timeline: --mb-inc; }
  }
}
@keyframes mb-peek { from { opacity: 0; } 70% { opacity: 0; } to { opacity: 1; } }
@keyframes mb-bar { from { transform: scaleX(.18); } to { transform: scaleX(1); } }

@media (width >= 960px) {
  .mb-inc__grid {
    grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto;
    column-gap: calc(var(--gutter) * 2.5); align-items: start; overflow: visible;
  }
  .mb-inc__col { display: flex; flex-direction: column; gap: 4.5rem; }
  .mb-inc__col:nth-child(2) { padding-top: 8rem; }
  .mb-card p { min-height: 3lh; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Each photograph uncovers from the bottom as it enters, then the columns drift at different speeds (depth, as on Collins' programs index). */
    .mb-card__img { animation: mb-uncover linear both; animation-timeline: view(); animation-range: entry 0% entry 85%; }
    @media (width >= 960px) {
      .mb-inc__col:nth-child(2) { animation: mb-drift-b linear both; animation-timeline: view(); }
    }
  }
}
@keyframes mb-uncover { from { clip-path: inset(18% 0 0 0 round var(--radius)); } to { clip-path: inset(0 0 0 0 round var(--radius)); } }
@keyframes mb-drift-a { from { translate: 0 1rem; } to { translate: 0 -1rem; } }
@keyframes mb-drift-b { from { translate: 0 3.5rem; } to { translate: 0 -3.5rem; } }
@keyframes mb-drift-c { from { translate: 0 2rem; } to { translate: 0 -2rem; } }

/* ------------------------------------------------------------------ The Working Session: a product page for the first step */
.mb-kicker { color: var(--color-mid); font: 400 var(--fs-title-sm)/1.2 var(--sans); letter-spacing: 0; }
.mb-session {
  display: grid; grid-template-columns: repeat(var(--columns), 1fr); column-gap: var(--gutter); row-gap: 2.5rem;
  padding: calc(var(--section-padding) * 1.5) var(--grid-padding);
}
@media (width < 768px) { .mb-session__media img { aspect-ratio: 1; } }
.mb-session__media { grid-column: 1 / -1; }
.mb-session__media img { width: 100%; height: auto; aspect-ratio: .864; object-fit: cover; border-radius: var(--radius); background: #2a221e; }
.mb-session__body { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; }
.mb-session__body .t-xl { margin-top: 1.5rem; }
.mb-session__lead { margin-top: 2rem; max-width: 26em; font: 400 var(--fs-title-sm)/1.35 var(--sans); letter-spacing: -.01rem; color: var(--color-foreground); text-wrap: pretty; }
.mb-session__body > .btn { margin-top: 2rem; }
@media (width >= 768px) {
  .mb-session__media { grid-column: 1 / span 4; }
  .mb-session__body { grid-column: 5 / span 4; }
}
@media (width >= 960px) {
  .mb-session { padding-block: 8rem; align-items: start; }
  .mb-session__media { grid-column: 1 / span 5; position: sticky; top: max(2rem, calc((100svh - (var(--cw) * 5 + var(--gutter) * 4) / .864) / 2)); align-self: start; }
  .mb-session__body { grid-column: 7 / span 4; }
}

.mb-rows { width: 100%; margin-top: 4.5rem; font: 400 1.0625rem/1.4 var(--sans); letter-spacing: -.01rem; }
.mb-rows > div { display: grid; grid-template-columns: 1fr; gap: .6rem; padding: 1.75rem 0; border-top: 1px solid color-mix(in oklab, var(--color-foreground), transparent 82%); }
.mb-rows > div:last-child { border-bottom: 1px solid color-mix(in oklab, var(--color-foreground), transparent 82%); }
@media (width >= 640px) { .mb-rows > div { grid-template-columns: 9.5rem 1fr; gap: 1.5rem; } }
.mb-rows dt { color: var(--color-foreground); }
.mb-rows dd { color: var(--color-mid); }
.mb-steps { counter-reset: s; display: flex; flex-direction: column; gap: .8rem; }
.mb-steps li { counter-increment: s; display: grid; grid-template-columns: 1.75rem 1fr; }
.mb-steps li::before { content: counter(s); color: var(--color-foreground); }
.mb-days { display: flex; flex-direction: column; gap: .6rem; }
.mb-days li { display: grid; grid-template-columns: 4.75rem 1fr; gap: .5rem; }
.mb-days span { color: var(--color-foreground); }
.mb-note { margin-top: 1rem; font-size: .9375rem; }

/* ------------------------------------------------------------------ Sizes: a size guide */
.mb-sizes { padding: calc(var(--section-padding) * 2) var(--grid-padding); }
.mb-sizes__head { margin-bottom: 3.5rem; }
@media (width >= 960px) {
  .mb-sizes { display: grid; grid-template-columns: repeat(var(--columns), 1fr); column-gap: var(--gutter); padding-block: 8rem; }
  .mb-sizes > * { grid-column: 2 / span 8; }
  .mb-sizes__head { margin-bottom: 4.5rem; }
  .mb-sizes__head .hgroup { display: grid; grid-template-columns: repeat(8, 1fr); column-gap: var(--gutter); max-width: none; }
  .mb-sizes__head .hgroup > * { max-width: none; }
  .mb-sizes__head .hgroup > :first-child { grid-column: 1 / span 3; }
  .mb-sizes__head .hgroup > p { grid-column: 4 / span 4; max-width: 30rem; }
}
.mb-size-table { width: 100%; table-layout: fixed; border-collapse: collapse; font: 400 1rem/1.3 var(--sans); letter-spacing: -.01rem; text-align: left; }
.mb-size-table thead th { padding: 0 1rem .9rem 0; color: var(--color-mid); font-weight: 400; }
.mb-size-table tbody tr { border-top: 1px solid color-mix(in oklab, var(--color-foreground), transparent 80%); }
.mb-size-table tbody tr:last-child { border-bottom: 1px solid color-mix(in oklab, var(--color-foreground), transparent 80%); }
.mb-size-table tbody th { padding: 1.6rem 1rem 1.6rem 0; font: 400 var(--fs-primary)/var(--lh-primary) var(--serif); letter-spacing: -.018em; font-weight: 400; white-space: nowrap; vertical-align: baseline; }
.mb-size-table td { padding: 1.6rem 1rem 1.6rem 0; vertical-align: baseline; }
.mb-size-table td:nth-of-type(1) { font: 400 var(--fs-title-lg)/1.05 var(--sans); letter-spacing: 0; white-space: nowrap; }
.mb-size-table td:nth-of-type(n + 2) { color: var(--color-mid); }
.mb-size-table .mb-size-table__span { font: 400 1rem/1.3 var(--sans) !important; color: var(--color-mid); white-space: normal !important; }
.mb-size-table tbody tr { transition: background-color .25s var(--ease-out-cubic); }
.mb-size-table tbody tr:target, .mb-size-table tbody tr.is-yours { background: color-mix(in oklab, var(--color-foreground), transparent 95%); }
@media (width < 768px) {
  .mb-size-table thead { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
  .mb-size-table, .mb-size-table tbody, .mb-size-table tr, .mb-size-table th, .mb-size-table td { display: block; }
  .mb-size-table tbody tr { padding: 1.4rem 0; }
  .mb-size-table tbody th { padding: 0 0 .9rem; }
  .mb-size-table td { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: .3rem 0; }
  .mb-size-table td:nth-of-type(1) { font: 400 1rem/1.3 var(--sans); }
  .mb-size-table td::before { content: attr(data-label); color: var(--color-mid); }
  .mb-size-table td:nth-of-type(1) { color: var(--color-foreground); }
  .mb-size-table .mb-size-table__span { display: block; }
  .mb-size-table .mb-size-table__span::before { content: none; }
}
.mb-sizes__rule { margin-top: 2.5rem; display: grid; gap: 1.25rem; color: var(--color-mid); font: 400 1rem/1.35 var(--sans); letter-spacing: -.01rem; }
.mb-sizes__rule p { color: var(--color-foreground); max-width: 34rem; }
.mb-sizes__rule p span { display: block; margin-bottom: .5rem; color: var(--color-mid); }
@media (width >= 768px) {
  .mb-size-table col:nth-child(1), .mb-size-table col:nth-child(2), .mb-size-table col:nth-child(3) { width: 22%; }
  .mb-sizes__rule { grid-template-columns: 44% 56%; column-gap: 0; }
  .mb-sizes__rule p { padding-right: 1rem; }
  .mb-sizes .mb-sizes__rule ul { grid-template-columns: 22fr 34fr; column-gap: 0; max-width: none; }
  .mb-sizes__rule li { margin-right: 1rem; }
}
.mb-sizes__rule ul { display: grid; gap: .5rem 2rem; }
@media (width >= 768px) { .mb-sizes__rule ul { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 46rem; } }
.mb-sizes__rule li { padding-left: 1.1rem; position: relative; }
.mb-sizes__rule li::before { content: ""; position: absolute; left: 0; top: .55em; width: .35rem; height: .35rem; border-radius: 50%; background: currentColor; opacity: .6; }

/* ------------------------------------------------------------------ Questions: questions read as the heading of each answer */
.mb-faq dt { font: 400 var(--fs-title-sm)/1.2 var(--sans); letter-spacing: 0; }
.features-wrap:has(> .mb-faq) { padding-block: 0; }
.features.mb-faq { border-radius: 0; }
@media (width >= 960px) { .features.mb-faq { padding-block: 7rem 9rem; } }

.features.mb-plain { border-radius: 0; }
@media (width >= 768px) { .features.mb-plain { padding-block: 6rem 5rem; } }
@media (width < 768px) { .features.mb-plain, .features.mb-faq { padding-inline: 0; } }

.features-wrap:has(> .mb-plain) { padding-bottom: 0; }

/* ------------------------------------------------------------------ How it works: the rows, and one review card as the picture of the system */
.mb-how {
  display: grid; grid-template-columns: repeat(var(--columns), 1fr); column-gap: var(--gutter); row-gap: 3rem;
  padding: calc(var(--section-padding) * 1.75) var(--grid-padding);
}
.mb-how__head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2.25rem; }
.mb-how__title { font: 400 var(--fs-xl)/var(--lh-xl) var(--serif); letter-spacing: -.02em; margin-block: var(--trim); max-width: 11em; text-wrap: balance; }
.mb-how__head p { max-width: 36rem; color: var(--color-mid); font: 400 var(--fs-title-sm)/1.4 var(--sans); letter-spacing: -.01rem; }
.mb-how__rows { grid-column: 1 / -1; margin-top: 0; }
.mb-how__rows > div { grid-template-columns: 1fr !important; gap: .4rem !important; }
.mb-how__rows dt { font-size: var(--fs-title-sm); }
.mb-review { grid-column: 1 / -1; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
@media (width < 768px) { .mb-review { order: 2; } .mb-how__rows { order: 3; } }
@media (width >= 960px) {
  .mb-how { padding-block: 9rem; row-gap: 5rem; }
  .mb-how__head { grid-column: 2 / span 8; }
  .mb-how__rows { grid-column: 2 / span 4; }
  .mb-review { grid-column: 7 / span 4; position: sticky; top: 8rem; align-self: start; }
}

.mb-review__card {
  background: #fff; color: #1d1c1d; border-radius: 14px; padding: 1.25rem 1.25rem 1.35rem;
  font: 400 .9375rem/1.45 var(--sans); letter-spacing: -.005em;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
}
.mb-review__app { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.mb-review__mark { width: 2.25rem; height: 2.25rem; padding: .45rem; border-radius: .45rem; background: var(--ink); object-fit: contain; }
.mb-review__name { font-weight: 400; color: #1d1c1d; }
.mb-review__tag { padding: .05rem .3rem; border-radius: .2rem; background: #f1f1f1; color: #8a898a; font-size: .625rem; letter-spacing: .02em; }
.mb-review__time { color: #8a898a; font-size: .8125rem; }
.mb-review__title { font: 400 1.25rem/1.25 var(--sans); letter-spacing: -.015em; color: #1d1c1d; }
.mb-review__context { margin-top: .35rem; color: #616061; font-size: .875rem; }
.mb-review__fields { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; margin: 1.1rem 0; padding: 1rem 0; border-block: 1px solid #ececec; }
.mb-review__fields dt { color: #616061; font-size: .875rem; }
.mb-review__fields dd { color: #1d1c1d; }
.mb-review__label { color: #616061; font-size: .875rem; margin-bottom: .2rem; }
.mb-review__decision p:last-child { color: #1d1c1d; }
.mb-review__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.mb-review__actions span { display: inline-flex; align-items: center; height: 2.1rem; padding: 0 .85rem; border-radius: .45rem; border: 1px solid #cfcfcf; color: #1d1c1d; font-size: .875rem; }
.mb-review__actions .is-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.mb-review figcaption { color: var(--color-mid); font: 400 .875rem/1.35 var(--sans); letter-spacing: -.01rem; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .mb-review__card { animation: mb-card-in linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  }
}
@keyframes mb-card-in { from { translate: 0 2.5rem; rotate: -1.5deg; } to { translate: 0 0; rotate: 0deg; } }

/* ------------------------------------------------------------------ Version A: one-line size rule */
.mb-sizes__one { margin-top: 2rem; max-width: 40rem; color: var(--color-mid); font: 400 1rem/1.4 var(--sans); letter-spacing: -.01rem; }

/* ------------------------------------------------------------------ Version B: diagrams */
/* Tools with the gaps between them: today (by hand) and with membership (handled). */
.mb-how--diagram .mb-how__head { grid-column: 1 / -1; }
.mb-gaps { grid-column: 1 / -1; margin: 0; display: grid; gap: 3rem; }
.mb-gaps__row { display: grid; gap: 1.25rem; }
.mb-gaps__state { font: 430 calc(var(--fs-primary) * .8)/1.1 var(--serif); letter-spacing: -.018em; }
.mb-gaps__chain { display: grid; grid-template-columns: repeat(4, auto 1fr) auto; align-items: center; }
.mb-gaps__tool {
  display: grid; place-items: center; min-height: 3.75rem; padding: 0 1.1rem; border-radius: .75rem;
  font: 400 1rem/1.2 var(--sans); letter-spacing: -.01rem; white-space: nowrap;
  border: 1px solid color-mix(in oklab, var(--color-foreground), transparent 70%);
}
.mb-gaps__gap { position: relative; height: 3.75rem; display: grid; place-items: center; min-width: 5.5rem; }
.mb-gaps__gap::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed color-mix(in oklab, var(--color-foreground), transparent 55%); }
.mb-gaps__gap span { position: relative; top: 1.45rem; color: var(--color-mid); font: 400 .875rem/1.2 var(--sans); letter-spacing: -.01rem; white-space: nowrap; }
.mb-gaps__note { color: var(--color-mid); font: 400 1rem/1.35 var(--sans); letter-spacing: -.01rem; }
.mb-gaps__row[data-state="today"] .mb-gaps__tool { color: var(--color-mid); }
.mb-gaps__row[data-state="member"] .mb-gaps__tool { background: var(--color-foreground); color: var(--color-background); border-color: var(--color-foreground); }
.mb-gaps__row[data-state="member"] .mb-gaps__gap::before { border-top: 2px solid var(--color-foreground); }
.mb-gaps__row[data-state="member"] .mb-gaps__gap span { top: -1.45rem; color: var(--color-foreground); }
.mb-gaps__row[data-state="member"] { padding-top: 3rem; border-top: 1px solid color-mix(in oklab, var(--color-foreground), transparent 85%); }
@media (width < 960px) {
  .mb-gaps { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .mb-gaps__row[data-state="member"] { padding-top: 0; border-top: 0; }
  .mb-gaps__chain { grid-template-columns: 1fr; justify-items: stretch; }
  .mb-gaps__state { white-space: nowrap; font-size: 1.15rem; }
  .mb-gaps__tool { min-height: 0; height: 3rem; padding: 0 .5rem; white-space: nowrap; text-align: center; font-size: .9375rem; }
  .mb-gaps__gap { height: 3.25rem; min-width: 0; }
  .mb-gaps__row { align-content: start; }
  .mb-gaps__note { min-height: 4lh; }
  .mb-how--diagram { padding-top: calc(var(--section-padding) * 1.25); }
  .mb-gaps__gap::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1px dashed color-mix(in oklab, var(--color-foreground), transparent 55%); }
  .mb-gaps__row[data-state="member"] .mb-gaps__gap::before { border-top: 0; border-left: 2px solid var(--color-foreground); }
  .mb-gaps__gap span, .mb-gaps__row[data-state="member"] .mb-gaps__gap span { top: 0; left: auto; padding: .15rem .4rem; background: var(--color-background); font-size: .8125rem; white-space: normal; text-align: center; }
  .mb-gaps__note { font-size: .875rem; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .mb-gaps__row[data-state="member"] .mb-gaps__gap::before { transform-origin: left; animation: mb-draw linear both; animation-timeline: view(); animation-range: entry 40% cover 45%; }
    @media (width < 960px) { .mb-gaps__row[data-state="member"] .mb-gaps__gap::before { transform-origin: top; animation-name: mb-draw-v; } }
  }
}
@keyframes mb-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mb-draw-v { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.mb-how__pair { grid-column: 1 / -1; display: grid; gap: 2.5rem; }
@media (width >= 960px) {
  .mb-how--diagram .mb-gaps { grid-column: 2 / span 9; }
  .mb-how--diagram .mb-how__head { grid-column: 2 / span 9; }
  .mb-how__pair { grid-column: 2 / span 9; grid-template-columns: repeat(9, 1fr); column-gap: var(--gutter); align-items: start; margin-top: 2rem; }
  .mb-how__pair .mb-how__rows { grid-column: 1 / span 4; }
  .mb-how__pair .mb-review { grid-column: 6 / span 4; position: static; }
}

/* Day 0 / 5 / 10 / 30 */
.mb-daysg { position: relative; width: 100%; margin-top: 4rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.mb-daysg::before { content: ""; position: absolute; left: 0; right: 0; top: .4rem; border-top: 1px solid color-mix(in oklab, var(--color-foreground), transparent 70%); }
.mb-daysg li { position: relative; display: flex; flex-direction: column; padding-top: 1.5rem; }
.mb-daysg li::before { content: ""; position: absolute; top: 0; left: 0; width: .8rem; height: .8rem; border-radius: 50%; background: var(--color-foreground); }
.mb-daysg__d { color: var(--color-mid); font: 400 .875rem/1 var(--sans); }
.mb-daysg__n { font: 400 clamp(3rem, 5vw, 4.75rem)/1 var(--sans); letter-spacing: -.05em; margin: .35rem 0 .75rem; }
.mb-daysg p { color: var(--color-mid); font: 400 1rem/1.3 var(--sans); letter-spacing: -.01rem; max-width: 9em; }
.mb-daysg__note { margin-top: 2.25rem; max-width: 30rem; color: var(--color-mid); font: 400 1rem/1.4 var(--sans); letter-spacing: -.01rem; }
@media (width < 640px) { .mb-daysg { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; } .mb-daysg::before { display: none; } }

/* Size strip: sizes as steps, like a size bar */
.mb-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); align-items: end; }
.mb-strip li { display: flex; flex-direction: column; gap: .9rem; transition: opacity .3s var(--ease-out-cubic); }
.mb-strip__name { font: 400 var(--fs-primary)/var(--lh-primary) var(--serif); letter-spacing: -.018em; }
.mb-strip__bar { display: block; height: calc(3.5rem + var(--lvl) * 3.25rem); border-radius: .75rem; background: color-mix(in oklab, var(--color-foreground), transparent calc(100% - (18% + var(--lvl) * 16%))); transition: background-color .4s var(--ease-out-cubic); }
.mb-strip__sub { margin-top: -.5rem; color: var(--color-mid); font: 400 .9375rem/1.3 var(--sans); letter-spacing: -.01rem; }
.mb-strip__range { font: 400 var(--fs-title-sm)/1.2 var(--sans); }
.mb-strip li.is-yours .mb-strip__bar, .mb-strip li:target .mb-strip__bar { background: var(--accent); }
.mb-strip__caption { margin-top: 2rem; max-width: 40rem; color: var(--color-mid); font: 400 1rem/1.4 var(--sans); letter-spacing: -.01rem; }
@media (width < 640px) { .mb-strip__name { font-size: 1.4rem; } .mb-strip__range { font-size: .875rem; } .mb-strip__bar { height: calc(2.5rem + var(--lvl) * 2.25rem); } }

/* Below-the-fold sections render lazily. */
.mb-defer { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* ------------------------------------------------------------------ Apply: the application and the booking, on the page */
.mb-apply {
  display: grid; grid-template-columns: repeat(var(--columns), 1fr); column-gap: var(--gutter); row-gap: 3.5rem;
  padding: calc(var(--section-padding) * 2) var(--grid-padding) calc(var(--section-padding) * 2.5);
  scroll-margin-top: 0;
}
.mb-apply__intro { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 1.5rem; }
.mb-apply__intro .t-xl { max-width: 8em; }
.mb-apply__intro > p:last-child { max-width: 24rem; color: var(--color-mid); font: 400 1rem/1.35 var(--sans); letter-spacing: -.01rem; }
.mb-apply__panel { grid-column: 1 / -1; min-width: 0; }
@media (width >= 960px) {
  .mb-apply { padding-block: 9rem 10rem; }
  .mb-apply__intro { grid-column: 1 / span 4; align-self: start; }
  .mb-apply__panel { grid-column: 6 / span 5; }
}

.mb-form { display: flex; flex-direction: column; }
.mb-form__top { display: flex; flex-direction: column; gap: .9rem; margin-bottom: 2.75rem; padding-top: .35rem; }
.mb-form__bars { display: grid; grid-template-columns: repeat(8, 1fr); gap: .375rem; }
.mb-form__bars i { height: 3px; border-radius: 4px; background: color-mix(in oklab, var(--color-foreground), transparent 80%); overflow: hidden; position: relative; }
.mb-form__bars i::after { content: ""; position: absolute; inset: 0; background: var(--color-foreground); transform-origin: left; transform: scaleX(0); transition: transform .7s var(--ease-out-expo); }
.mb-form__bars i.is-done::after, .mb-form__bars i.is-current::after { transform: scaleX(1); }
.mb-form__bars i.is-current::after { opacity: .55; }
.mb-form__count { color: var(--color-mid); font: 400 .875rem/1 var(--sans); letter-spacing: -.01rem; }

.mb-step { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.js-steps .mb-step:not(.is-active) { display: none; }
.mb-step + .mb-step { margin-top: 4rem; }
.js-steps .mb-step + .mb-step { margin-top: 0; }
.mb-q { padding: 0; font: 430 var(--fs-primary)/var(--lh-primary) var(--serif); letter-spacing: -.018em; color: var(--color-foreground); text-wrap: balance; max-width: 22em; }
.mb-q--sub { margin-top: 1.25rem; font-size: calc(var(--fs-primary) * .72); }
.mb-hint { margin-top: -.5rem; color: var(--color-mid); font: 400 1rem/1.35 var(--sans); letter-spacing: -.01rem; }

.mb-input {
  width: 100%; padding: .7rem 0 .8rem; border: 0; border-bottom: 1px solid color-mix(in oklab, var(--color-foreground), transparent 65%);
  border-radius: 0; background: transparent; color: var(--color-foreground);
  font: 400 var(--fs-title-lg)/1.25 var(--sans); letter-spacing: -.01em;
  transition: border-color .25s var(--ease-out-cubic);
}
.mb-input::placeholder { color: color-mix(in oklab, var(--color-foreground), transparent 62%); }
.mb-input:focus { outline: none; border-bottom-color: var(--color-foreground); }
.mb-input:focus-visible { outline: none; }
.mb-input--area { resize: none; field-sizing: content; min-height: 3lh; max-height: 12lh; font-size: var(--fs-title-sm); line-height: 1.4; }
.mb-pair { display: grid; gap: 1.75rem; }
.mb-field { display: flex; flex-direction: column; gap: .15rem; }
.mb-field > span { color: var(--color-mid); font: 400 .875rem/1.3 var(--sans); letter-spacing: -.01rem; }
.mb-field .mb-input { font-size: var(--fs-title-sm); }
[aria-invalid="true"] { border-bottom-color: var(--accent) !important; }

.mb-chips { display: flex; flex-wrap: wrap; gap: .625rem; }
.mb-chips--stack { flex-direction: column; align-items: flex-start; }
.mb-chip { position: relative; display: inline-flex; cursor: pointer; }
.mb-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mb-chip span {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 2.8125rem; padding: .7rem 1.25rem;
  border: 1px solid color-mix(in oklab, var(--color-foreground), transparent 70%); border-radius: 6rem;
  font: 400 .9375rem/1.25 var(--sans); letter-spacing: -.01rem; text-wrap: balance;
  transition: background-color .2s var(--ease-in-out-sine), color .2s var(--ease-in-out-sine), border-color .2s var(--ease-in-out-sine), transform .8s var(--ease-out-expo);
}
.mb-chip input[type="checkbox"] + span::before {
  content: ""; flex: none; width: .75rem; height: .75rem; border-radius: 50%;
  border: 1px solid currentColor; opacity: .7; transition: background-color .2s var(--ease-in-out-sine);
}
.mb-chip input:checked + span { background: var(--color-foreground); color: var(--color-background); border-color: var(--color-foreground); }
.mb-chip input[type="checkbox"]:checked + span::before { background: currentColor; opacity: 1; }
.mb-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (any-pointer: fine) { .mb-chip:hover span { border-color: var(--color-foreground); } }
.mb-chip:active span { transform: scale(.98); }

.mb-error { color: var(--accent); font: 400 .875rem/1.3 var(--sans); letter-spacing: -.01rem; }
.mb-error:not([hidden]) { transition: opacity .3s var(--ease-in-out-sine), translate .5s var(--ease-out-expo); opacity: 1; translate: 0 0; }
@starting-style { .mb-error:not([hidden]) { opacity: 0; translate: 0 .35rem; } }

.mb-form__nav { display: flex; align-items: center; gap: 1.5rem; padding-top: 2.25rem; }
.mb-back { color: var(--color-mid); font: 400 .875rem/1 var(--sans); letter-spacing: -.01rem; padding: .75rem 0; }
.mb-back:hover { color: var(--color-foreground); }
.mb-next { min-width: 9rem; }
.mb-form__keys { color: color-mix(in oklab, var(--color-mid), transparent 30%); font: 400 .8125rem/1 var(--sans); }
@media (any-pointer: coarse) { .mb-form__keys { display: none; } }
main:has(> .mb-apply:last-child) + .site-footer { border-top: 1px solid rgba(255, 255, 255, .14); --color-background: #0a0706; }

/* Result and booking */
.mb-result { display: flex; flex-direction: column; gap: 1.25rem; }
.mb-result:focus { outline: none; }
.mb-result__size { font: 400 var(--fs-xl)/var(--lh-xl) var(--serif); letter-spacing: -.02em; margin-block: var(--trim); }
.mb-result__note { max-width: 34rem; color: var(--color-mid); font: 400 1rem/1.35 var(--sans); letter-spacing: -.01rem; }
.mb-result__pick { margin-top: 1.5rem; font: 400 var(--fs-title-sm)/1.3 var(--sans); }
.mb-cal { min-height: 34rem; margin-inline: -.5rem; border-radius: var(--radius); overflow: clip; background: color-mix(in oklab, var(--color-foreground), transparent 94%); }
.mb-cal[data-state="ready"] { background: transparent; }
.mb-cal__fallback { color: var(--color-mid); font: 400 .875rem/1.4 var(--sans); letter-spacing: -.01rem; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.mb-cal__fallback a { color: var(--color-foreground); text-decoration: underline; text-underline-offset: .2em; }
.mb-edit { color: var(--color-mid); text-decoration: underline; text-underline-offset: .2em; }
.mb-result:not([hidden]) { transition: opacity .6s var(--ease-in-out-sine), translate 1.2s var(--ease-out-expo); }
@starting-style { .mb-result:not([hidden]) { opacity: 0; translate: 0 1.5rem; } }

/* Step changes run as a same-document view transition. The page-level transition in site.css is switched off for these. */
.mb-vt::view-transition-old(root), .mb-vt::view-transition-new(root) { animation: none; }
.mb-vt::view-transition-image-pair(root) { background: none; }
.mb-step.is-active, .mb-result:not([hidden]) { view-transition-name: mb-step; }
::view-transition-old(mb-step) { animation: .28s mb-step-out var(--ease-in-out-sine) both; }
::view-transition-new(mb-step) { animation: .6s mb-step-in var(--ease-out-expo) both; }
.mb-vt--back::view-transition-new(mb-step) { animation-name: mb-step-in-back; }
@keyframes mb-step-out { to { opacity: 0; translate: 0 -.75rem; filter: blur(3px); } }
@keyframes mb-step-in { from { opacity: 0; translate: 0 1.5rem; filter: blur(4px); } }
@keyframes mb-step-in-back { from { opacity: 0; translate: 0 -1.5rem; filter: blur(4px); } }

@media (prefers-reduced-motion: reduce) {
  .mb-card__img img, .mb-chip span, .mb-form__bars i::after { transition: none; }
  ::view-transition-old(mb-step), ::view-transition-new(mb-step) { animation: none; }
}

/* ------------------------------------------------------------------ Mix: the first month as three figures (no track, no dots) */
@media (width >= 640px) { .mb-rows > .mb-rows__wide { grid-template-columns: 1fr; gap: 1.25rem; } }
.mb-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.mb-trio li { display: flex; flex-direction: column; }
.mb-trio__d { color: var(--color-mid); font: 400 .875rem/1 var(--sans); }
.mb-trio__n { margin: .3rem 0 .6rem; color: var(--color-foreground); font: 400 clamp(3rem, 5.2vw, 4.75rem)/1 var(--sans); letter-spacing: -.05em; }
.mb-trio p { color: var(--color-mid); font: 400 1rem/1.3 var(--sans); letter-spacing: -.01rem; max-width: 11em; }

/* ------------------------------------------------------------------ Mix: final spacing and phone layouts */
@media (width >= 960px) {
  .mb-session { padding-block: 7rem 6rem; }
  .mb-how { padding-block: 6.5rem 7rem; }
  .mb-sizes { padding-block: 6.5rem 4.5rem; }
  .mb-sizes__head { margin-bottom: 3.5rem; }
  .features.mb-faq { padding-block: 4.5rem 7rem; }
}
.mb-strip li { justify-content: flex-end; }
.mb-strip__bar { height: calc(2.5rem + var(--lvl) * 2.25rem); }
.mb-strip__name { margin-top: .25rem; }
@media (width < 640px) {
  .mb-story { row-gap: 3rem; }
  .mb-how { padding-top: calc(var(--section-padding) * 1.1); }
  .mb-trio { grid-template-columns: 1fr; gap: 1rem; }
  .mb-trio li { display: grid; grid-template-columns: 4.5rem 1fr; grid-template-rows: auto auto; column-gap: 1rem; align-items: end; }
  .mb-trio__d { grid-column: 1; grid-row: 1; }
  .mb-trio__n { grid-column: 1; grid-row: 2; margin: .2rem 0 0; font-size: 2.75rem; }
  .mb-trio p { grid-column: 2; grid-row: 1 / 3; align-self: end; max-width: none; padding-bottom: .3rem; }
  .mb-strip { grid-template-columns: 1fr; gap: 1.5rem; }
  .mb-strip li { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; row-gap: .4rem; }
  .mb-strip__bar { grid-column: 1 / -1; grid-row: 3; height: .6rem; width: calc(var(--lvl) * 25%); border-radius: 1rem; }
  .mb-strip__name { grid-column: 1; grid-row: 1; margin: 0; font-size: 1.5rem; }
  .mb-strip__range { grid-column: 2; grid-row: 1; align-self: end; font-size: 1rem; }
  .mb-strip__sub { grid-column: 1 / -1; grid-row: 2; margin: 0; }
}
@media (width < 640px) {
  .mb-trio { gap: 1.4rem; margin-top: .6rem; }
  .mb-sizes { padding-bottom: 3rem; }
  .mb-session { padding-bottom: 3rem; }
}

/* Statement meta: proof reads as a reason, and the section hands off tighter to the photographs */
.mb-proof dt { max-width: 16rem; }
.mb-proof + .mb-proof { margin-top: -.5rem; }
.mb-logos img { opacity: .85; }
@media (width >= 960px) {
  .mb-story { padding-bottom: 3rem; }
  .mb-inc { padding-top: 3.5rem; }
  .mb-inc__head { margin-bottom: 4rem; }
}

/* ------------------------------------------------------------------ Working Session, v3: aligned pair, then the first month as its own band */
.mb-session__media img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .07); }
.mb-session__rows { margin-top: 3rem; }
.mb-session__body > .btn { margin-top: 2.5rem; }
.mb-month { grid-column: 1 / -1; display: grid; gap: 2rem; margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid color-mix(in oklab, var(--color-foreground), transparent 82%); }
.mb-month__label { font: 430 var(--fs-primary)/var(--lh-primary) var(--serif); letter-spacing: -.018em; margin-block: var(--trim); }
.mb-month__foot { display: grid; gap: .5rem; }
.mb-month__refund { font: 400 var(--fs-title-sm)/1.3 var(--sans); letter-spacing: -.01rem; color: var(--color-foreground); }
.mb-month .mb-note { margin-top: 0; color: var(--color-mid); }
@media (width >= 960px) {
  .mb-session { align-items: start; }
  .mb-session__media { position: static; top: auto; grid-column: 1 / span 5; }
  .mb-session__body { grid-column: 7 / span 4; }
  .mb-session__body .t-xl { margin-top: 1.25rem; }
  .mb-month { grid-template-columns: repeat(10, 1fr); column-gap: var(--gutter); row-gap: 2.5rem; margin-top: 6rem; padding-top: 3.5rem; }
  .mb-month__label { grid-column: 1 / span 3; }
  .mb-trio--wide { grid-column: 4 / span 7; column-gap: calc(var(--gutter) * 2); }
  .mb-month__foot { grid-column: 4 / span 7; }
  .mb-trio--wide .mb-trio__n { font-size: clamp(4.5rem, 7.4vw, 7rem); margin: .4rem 0 .9rem; }
  .mb-trio--wide p { font-size: var(--fs-title-sm); max-width: 12em; }
}
.mb-session__rows dt { font: 400 var(--fs-title-sm)/1.3 var(--sans); letter-spacing: -.01rem; color: var(--color-foreground); }
.mb-session__media img { filter: brightness(1.1) contrast(1.05) saturate(.95); }
@media (width >= 960px) {
  .mb-session { padding-block: 8rem 7rem; }
  .mb-session__media { align-self: stretch; display: flex; }
  .mb-session__media img { height: 100%; min-height: 32rem; aspect-ratio: auto; }
  .mb-session__body { padding-block: .25rem; }
  .mb-trio--wide .mb-trio__n { font-size: clamp(3.75rem, 5.2vw, 4.6875rem); }
}
@media (width >= 960px) {
  .mb-session { padding-bottom: 5.5rem; }
  .mb-month { grid-column: 2 / -1; grid-template-columns: repeat(9, 1fr); }
  .mb-month__label { grid-column: 1 / span 3; }
  .mb-trio--wide, .mb-month__foot { grid-column: 4 / -1; }
}
@media (width < 640px) {
  .mb-trio li { align-items: center; }
  .mb-trio p { grid-row: 2; align-self: center; padding-bottom: 0; }
}

/* ------------------------------------------------------------------ Growth: two client quotes */
.mb-quotes { display: grid; grid-template-columns: 1fr; gap: 3rem; padding: calc(var(--section-padding) * 1.5) var(--grid-padding) 0; }
.mb-quote { margin: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.mb-quote blockquote { margin: 0; }
.mb-quote p { font: 430 var(--fs-primary)/var(--lh-primary) var(--serif); letter-spacing: -.018em; text-wrap: balance; }
.mb-quote figcaption { color: var(--color-mid); font: 400 1rem/1.3 var(--sans); letter-spacing: -.01rem; }
@media (width >= 960px) {
  .mb-quotes { grid-template-columns: repeat(var(--columns), 1fr); column-gap: var(--gutter); padding-top: 7rem; }
  .mb-quote:nth-child(2) { grid-column: 2 / span 4; }
  .mb-quote:nth-child(3) { grid-column: 7 / span 4; }
}
.mb-result__pick:first-child { margin-top: 0; }

/* ------------------------------------------------------------------ Home: the reel alternates the two practices; the practice doors */
.mb-reel-x img { transition: opacity 1.2s var(--ease-in-out-sine); }
.mb-reel-x img:nth-child(2) { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .mb-reel-x img:nth-child(2) { animation: mb-xfade 14s var(--ease-in-out-sine) infinite; }
}
@keyframes mb-xfade { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }

.mb-doors { display: flex; flex-direction: column; gap: 3rem; padding: var(--section-padding) var(--grid-padding) calc(var(--section-padding) * 1.5); }
.mb-doors__grid { display: grid; grid-template-columns: 1fr; gap: 3.5rem; }
.mb-door { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; color: inherit; }
.mb-door__img { width: 100%; aspect-ratio: .8; border-radius: var(--radius); overflow: clip; background: #221a16; margin-bottom: .6rem; }
.mb-door__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out-expo); }
.mb-door__kicker { color: var(--color-mid); font: 400 1rem/1.3 var(--sans); letter-spacing: -.01rem; }
.mb-door__title { font: 400 var(--fs-xl)/var(--lh-xl) var(--serif); letter-spacing: -.02em; margin-block: var(--trim); }
.mb-door__line { max-width: 28rem; color: var(--color-mid); font: 400 var(--fs-title-sm)/1.35 var(--sans); letter-spacing: -.01rem; }
.mb-door .all-link { margin-top: .4rem; }
@media (any-pointer: fine) { .mb-door:hover .mb-door__img img { transform: scale(1.03); } .mb-door:hover .all-link svg { transform: translateX(3px); } }
@media (width >= 960px) {
  .mb-doors { gap: 4.5rem; padding-block: 5rem 8rem; }
  .mb-doors__grid { grid-template-columns: repeat(var(--columns), 1fr); column-gap: var(--gutter); align-items: end; }
  .mb-door--lead { grid-column: 1 / span 6; }
  .mb-door--lead .mb-door__img { aspect-ratio: 1.05; }
  .mb-door:not(.mb-door--lead) { grid-column: 7 / span 4; }
}

/* ------------------------------------------------------------------ Home: client work as type, no generated art */
.mb-cases-plain .ccard { aspect-ratio: .8 !important; }
.mb-cases-plain .ccard__inner { background: #1c1613; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.mb-cases-plain .ccard__inner::after { display: none; }
.mb-cases-plain .ccard__link { align-items: flex-start; justify-content: space-between; padding: 1.5rem 1.5rem 1.6rem; text-align: left; }
.mb-cases-plain .ccard__sector { color: var(--mid-on-dark); font: 400 .9375rem/1.3 var(--sans); letter-spacing: -.01rem; }
.mb-cases-plain .ccard__logo { max-width: 70%; height: calc(var(--lh, 30px) * .8); transform: none !important; }
.mb-cases-plain .ccard__line { position: static; display: block; opacity: 1; transform: none; color: rgba(255, 255, 255, .88); font-size: 1rem; line-height: 1.35; }
.mb-cases-plain .ccard__link > .ccard__logo { margin-top: auto; margin-bottom: 1.25rem; }
@media (width < 768px) { .mb-cases-plain .ccard__line { display: block; font-size: .9375rem; } .cases.mb-cases-plain { padding-top: 4rem; } }

/* Home doors: both images end on one line, both headings start on one line */
@media (width >= 960px) {
  .mb-doors__grid { align-items: start; }
  .mb-door--lead .mb-door__img { aspect-ratio: auto; height: clamp(26rem, 40vw, 36rem); }
  .mb-door:not(.mb-door--lead) .mb-door__img { aspect-ratio: auto; height: clamp(26rem, 40vw, 36rem); }
}

/* Two dark sections in a row read as one band with a rule, not a void */
.mb-session + .mb-how { padding-top: 0; }
.mb-session + .mb-how::before { content: ""; grid-column: 1 / -1; height: 1px; margin-bottom: 2.5rem; background: color-mix(in oklab, var(--color-foreground), transparent 85%); }
@media (width >= 960px) {
  .mb-session + .mb-how::before { grid-column: 2 / -1; margin-bottom: 4.5rem; }
  /* The card sits beside the heading it proves */
  .mb-how:not(.mb-how--diagram) .mb-how__head { grid-column: 2 / span 5; grid-row: 2; }
  .mb-how:not(.mb-how--diagram) .mb-how__title { font-size: clamp(3rem, 4.4vw, 4rem); }
  .mb-how:not(.mb-how--diagram) .mb-how__rows { grid-column: 2 / span 5; grid-row: 3; }
  .mb-how:not(.mb-how--diagram) .mb-review { grid-column: 7 / span 4; grid-row: 2 / span 2; top: 6rem; }
}
.mb-quotes { padding-bottom: 3rem; }
.mb-session:has(+ .mb-how) { padding-bottom: 3.5rem; }
@media (width >= 960px) { .mb-session + .mb-how::before { margin-bottom: 3.5rem; } }
/* site.css hides these because the old card art had them baked in; the plain cards show them */
.mb-cases-plain .ccard__logo { position: static !important; width: auto !important; height: calc(var(--lh, 30px) * .8) !important; overflow: visible; clip-path: none; }
.mb-cases-plain .ccard__line { position: static !important; width: auto !important; height: auto !important; overflow: visible; clip-path: none; }
.mb-cases-plain .ccard { aspect-ratio: auto !important; height: clamp(17rem, 22vw, 20rem); }
@media (width >= 960px) {
  .mb-door--lead .mb-door__img, .mb-door:not(.mb-door--lead) .mb-door__img { height: clamp(20rem, 29vw, 26rem); }
}
.mb-cases-plain .ccard__logo { height: 22px !important; max-width: 60%; object-fit: contain; object-position: left center; }
.mb-cases-plain #case-founders-forum .ccard__logo, .mb-cases-plain #case-beluga .ccard__logo { height: 30px !important; }

/* ------------------------------------------------------------------ What's Included v2: heading at section scale, the finished work beside it, even rows */
.mb-inc__head { display: grid; gap: 2.5rem; }
.mb-inc__head .hgroup > :first-child { font: 400 var(--fs-xl)/var(--lh-xl) var(--serif); letter-spacing: -.02em; margin-block: var(--trim); }
.mb-inc__head .hgroup > p { max-width: 30rem; color: var(--color-mid); font: 400 var(--fs-title-sm)/1.4 var(--sans); letter-spacing: -.01rem; }
.mb-inc .mb-review { position: static; }
.mb-inc .mb-review__card { box-shadow: 0 28px 60px -28px rgba(18, 13, 11, .45), 0 0 0 1px rgba(18, 13, 11, .08); }
@media (width >= 960px) {
  .mb-inc__head { grid-template-columns: repeat(var(--columns), 1fr); column-gap: var(--gutter); align-items: center; margin-bottom: 5.5rem; }
  .mb-inc__head .hgroup { display: flex !important; flex-direction: column; gap: 2rem; grid-column: 2 / span 5; }
  .mb-inc__head .hgroup > :first-child, .mb-inc__head .hgroup > p { grid-column: auto !important; }
  .mb-inc__head .mb-review { grid-column: 7 / span 4; }
  .mb-inc__col:nth-child(2) { padding-top: 0 !important; animation: none !important; translate: none !important; }
  .mb-inc__col { gap: 4rem; }
}
@media (width >= 960px) {
  .mb-inc__head { align-items: start; }
  .mb-inc__head .hgroup { grid-column: 1 / span 6; padding-top: .5rem; }
}

/* ------------------------------------------------------------------ Software companies: proof cards (client each system was built for) instead of photographs */
.mb-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; min-height: 22rem; padding: 1.6rem 1.6rem 1.8rem; border-radius: var(--radius); background: #1c1613; color: #fff; scroll-snap-align: start; }
.mb-tile__top { display: flex; flex-direction: column; gap: .9rem; }
.mb-tile__logos { display: flex; align-items: center; gap: 1.1rem; min-height: 30px; }
.mb-tile__logo { height: var(--h, 24px); width: auto; max-width: 60%; opacity: .95; }
.mb-tile__for { color: var(--mid-on-dark); font: 400 .9375rem/1.3 var(--sans); letter-spacing: -.01rem; }
.mb-tile__body h3 { font: 430 calc(var(--fs-primary) * .8)/1.08 var(--serif); letter-spacing: -.018em; color: #fff; }
.mb-tile__body p { margin-top: .75rem; color: rgba(255, 255, 255, .8); font: 400 1rem/1.4 var(--sans); letter-spacing: -.01rem; max-width: 32ch; }
@media (width >= 960px) { .mb-inc__grid--tiles .mb-inc__col { gap: var(--gutter); } .mb-inc__grid--tiles { column-gap: var(--gutter); } .mb-tile { min-height: 25rem; } }

/* ------------------------------------------------------------------ Home: two equal practices, then the two sectors */
@media (width >= 960px) {
  .mb-doors__grid--even .mb-door, .mb-doors__grid--even .mb-door--lead { grid-column: span 5 !important; }
  .mb-doors__grid--even .mb-door__img { height: clamp(20rem, 29vw, 26rem) !important; aspect-ratio: auto !important; }
}
.mb-sectors { display: grid; gap: 2.5rem; margin-top: 1rem; padding-top: 2.5rem; border-top: 1px solid color-mix(in oklab, var(--color-foreground), transparent 85%); }
.mb-sector { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.mb-sector__title { font: 430 var(--fs-primary)/var(--lh-primary) var(--serif); letter-spacing: -.018em; margin-block: var(--trim); }
.mb-sector__line { max-width: 30rem; color: var(--color-mid); font: 400 var(--fs-title-sm)/1.35 var(--sans); letter-spacing: -.01rem; }
.mb-sector__proof { font: 400 .9375rem/1.3 var(--sans); letter-spacing: -.01rem; }
@media (width >= 960px) { .mb-sectors { grid-template-columns: repeat(var(--columns), 1fr); column-gap: var(--gutter); } .mb-sector { grid-column: span 5; } }
@media (width >= 960px) { .mb-doors { padding-bottom: 5rem; } }

/* =================================================================== Copy from the AI-native audit, set in the Collins system (27 Sep) */
.mb-offer { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; margin-top: 1.5rem; font: 400 1rem/1.35 var(--sans); letter-spacing: -.01rem; color: var(--color-mid); }
.mb-offer strong { font-weight: 400; color: var(--color-foreground); }
.mb-offer a { color: var(--color-foreground); text-decoration: underline; text-underline-offset: .2em; }
.hero .mb-offer { justify-content: center; margin-top: 0; }
.hero__kicker { color: var(--color-mid); font: 400 1rem/1.3 var(--sans); letter-spacing: -.01rem; }
.mb-reel__cap { padding: 1rem var(--grid-padding) 0; color: var(--color-mid); font: 400 .875rem/1.3 var(--sans); letter-spacing: -.01rem; }

/* A large illustrative work product in place of a photograph */
.mb-artifact-band { padding: 0 var(--grid-padding) calc(var(--section-padding) * 1.5); }
.mb-artifact-band__inner { display: grid; place-items: center; padding: clamp(2.5rem, 7vw, 6rem) 1.25rem; border-radius: var(--radius); background: var(--ink); }
.mb-artifact-band .mb-review { width: min(34rem, 100%); }
.mb-review--artifact .mb-review__fields { grid-template-columns: 1fr; gap: .8rem; }
.mb-review--artifact .mb-review__fields div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; }
.mb-review .mb-review__kicker { margin-bottom: .6rem; color: #8a898a; font-size: .8125rem; }
.mb-review figcaption { max-width: 34rem; }

/* The work, described once: statement left, work product right */
.mb-workflow { display: grid; grid-template-columns: repeat(var(--columns), 1fr); column-gap: var(--gutter); row-gap: 3rem; padding: calc(var(--section-padding) * 1.5) var(--grid-padding); }
.mb-workflow__copy { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 1.5rem; }
.mb-workflow__copy h2 { font: 400 var(--fs-xl)/var(--lh-xl) var(--serif); letter-spacing: -.02em; margin-block: var(--trim); max-width: 11em; }
.mb-workflow__copy p { max-width: 34rem; color: var(--color-mid); font: 400 var(--fs-title-sm)/1.4 var(--sans); letter-spacing: -.01rem; }
.mb-workflow__copy p.mb-workflow__note { font-size: 1rem; }
.mb-workflow .mb-review { grid-column: 1 / -1; }
.mb-workflow .mb-review__card { box-shadow: 0 28px 60px -28px rgba(18, 13, 11, .45), 0 0 0 1px rgba(18, 13, 11, .08); }
@media (width >= 960px) { .mb-workflow { align-items: center; padding-block: 7rem; } .mb-workflow__copy { grid-column: 1 / span 6; } .mb-workflow .mb-review { grid-column: 7 / span 4; } }

/* Illustrative example with before and after figures */
.mb-example { display: grid; grid-template-columns: repeat(var(--columns), 1fr); column-gap: var(--gutter); row-gap: 3rem; padding: calc(var(--section-padding) * 1.25) var(--grid-padding); border-top: 1px solid color-mix(in oklab, var(--color-foreground), transparent 85%); }
.mb-example__copy { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.mb-label { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .75rem; border-radius: 6rem; border: 1px solid color-mix(in oklab, var(--color-foreground), transparent 70%); color: var(--color-foreground); font: 400 .8125rem/1 var(--sans); letter-spacing: -.005em; }
.mb-label::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); }
.mb-example__copy h3 { font: 430 var(--fs-primary)/var(--lh-primary) var(--serif); letter-spacing: -.018em; margin-block: var(--trim); max-width: 16em; }
.mb-example__copy p { max-width: 30rem; color: var(--color-mid); font: 400 1rem/1.4 var(--sans); letter-spacing: -.01rem; }
.mb-example__copy .mb-example__fine { font-size: .875rem; }
.mb-figs { grid-column: 1 / -1; display: grid; gap: 2rem; }
.mb-fig { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; column-gap: 1rem; row-gap: .5rem; padding-bottom: 1.5rem; border-bottom: 1px solid color-mix(in oklab, var(--color-foreground), transparent 85%); }
.mb-fig__col { display: flex; flex-direction: column; gap: .35rem; }
.mb-fig__col span { color: var(--color-mid); font: 400 .8125rem/1.2 var(--sans); }
.mb-fig__col b { font: 400 clamp(2rem, 4vw, 3.4rem)/1 var(--sans); letter-spacing: -.028em; }
.mb-fig__col:first-child b { color: var(--color-mid); }
.mb-fig__arrow { align-self: center; width: 1.25rem; height: 1.25rem; fill: currentColor; opacity: .5; }
.mb-fig small { grid-column: 1 / -1; color: var(--color-mid); font: 400 .9375rem/1.35 var(--sans); }
@media (width >= 960px) { .mb-example { padding-block: 6rem; } .mb-example__copy { grid-column: 1 / span 4; } .mb-figs { grid-column: 6 / span 5; } }

/* Four items in one row */
@media (width >= 960px) {
  .mb-inc__grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .mb-inc__grid--four .mb-inc__col { display: contents; }
}
.mb-inc__grid--four .mb-card h3, .mb-inc__grid--four .mb-tile__body h3 { font-size: calc(var(--fs-primary) * .72); }
.mb-num { display: block; margin-bottom: .6rem; color: var(--color-mid); font: 400 .8125rem/1 var(--sans); }

/* List of client work, Collins row style */
.mb-list { display: grid; grid-template-columns: repeat(var(--columns), 1fr); column-gap: var(--gutter); row-gap: 2.5rem; padding: calc(var(--section-padding) * 1.5) var(--grid-padding); }
.mb-list > * { grid-column: 1 / -1; }
@media (width >= 960px) { .mb-list > .hgroup { grid-column: 1 / span 4; } .mb-list > .programs__list, .mb-list > .mb-list__note { grid-column: 5 / span 6; } }
.mb-list .hgroup > :first-child { font: 400 var(--fs-xl)/var(--lh-xl) var(--serif); letter-spacing: -.02em; margin-block: var(--trim); color: var(--color-foreground); }
.mb-list__note { color: var(--color-mid); font: 400 .875rem/1.4 var(--sans); }

/* Questions in two columns */
@media (width >= 960px) { .mb-faq--two dl > div { grid-column: span 4 !important; max-width: 26rem !important; } }

/* People */
.mb-people { display: grid; grid-template-columns: repeat(var(--columns), 1fr); column-gap: var(--gutter); row-gap: 2.5rem; padding: calc(var(--section-padding) * 1.5) var(--grid-padding); }
.mb-people > .hgroup { grid-column: 1 / -1; }
.mb-people .hgroup > :first-child { font: 400 var(--fs-xl)/var(--lh-xl) var(--serif); letter-spacing: -.02em; margin-block: var(--trim); color: var(--color-foreground); }
.mb-people .hgroup > p { max-width: 30rem; }
.mb-people__grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem var(--gutter); }
.mb-person { margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.mb-person img { width: 100%; aspect-ratio: .82; object-fit: cover; border-radius: var(--radius); filter: grayscale(.15) contrast(1.02); background: #d8d4d1; }
.mb-person figcaption, .mb-person__name { font: 400 1rem/1.3 var(--sans); letter-spacing: -.01rem; }
.mb-person figcaption span { display: block; color: var(--color-mid); }
@media (width >= 960px) {
  .mb-people > .hgroup { grid-column: 1 / span 4; }
  .mb-people__grid { grid-column: 5 / span 6; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mb-people__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 30rem; }
}

/* Closing section before the footer */
.mb-close { display: grid; grid-template-columns: repeat(var(--columns), 1fr); column-gap: var(--gutter); row-gap: 2rem; padding: calc(var(--section-padding) * 2) var(--grid-padding); }
.mb-close > * { grid-column: 1 / -1; }
.mb-close h2 { font: 400 var(--fs-xl)/var(--lh-xl) var(--serif); letter-spacing: -.02em; margin-block: var(--trim); max-width: 12em; }
.mb-close p { max-width: 34rem; color: var(--color-mid); font: 400 var(--fs-title-sm)/1.4 var(--sans); letter-spacing: -.01rem; }
.mb-close .mb-close__fine { font-size: .875rem; }
.mb-close .mb-ctas { margin-top: .5rem; }
@media (width >= 960px) { .mb-close { padding-block: 8rem; } .mb-close > * { grid-column: 2 / span 7; } }

/* Work page: client records */
.mb-clients { display: grid; grid-template-columns: 1fr; gap: var(--gutter); padding: 0 var(--grid-padding) calc(var(--section-padding) * 1.5); }
@media (width >= 768px) { .mb-clients { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (width >= 1100px) { .mb-clients { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mb-client { display: flex; flex-direction: column; gap: 1rem; min-height: 19rem; padding: 1.6rem; border-radius: var(--radius); background: #1c1613; color: #fff; scroll-margin-top: 6rem; }
.mb-client:target { box-shadow: 0 0 0 2px var(--accent); }
.mb-client__logo { height: 24px; width: auto; max-width: 60%; object-fit: contain; object-position: left; }
.mb-client__sector { color: var(--mid-on-dark); font: 400 .875rem/1.3 var(--sans); }
.mb-client h3 { font: 430 calc(var(--fs-primary) * .75)/1.1 var(--serif); letter-spacing: -.018em; }
.mb-client p { color: rgba(255, 255, 255, .85); font: 400 1rem/1.4 var(--sans); letter-spacing: -.01rem; }
.mb-client .mb-client__note { margin-top: auto; color: var(--mid-on-dark); font-size: .8125rem; }
.mb-client a { color: #fff; font: 400 .875rem/1.3 var(--sans); text-decoration: underline; text-underline-offset: .2em; }

/* Illustrative example cards */
.mb-examples { display: grid; grid-template-columns: 1fr; gap: 2.5rem var(--gutter); padding: 0 var(--grid-padding) calc(var(--section-padding) * 2); }
@media (width >= 960px) { .mb-examples { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mb-exc { display: flex; flex-direction: column; gap: .8rem; color: inherit; }
.mb-exc__img { aspect-ratio: .8; border-radius: var(--radius); overflow: clip; background: #221a16; margin-bottom: .5rem; }
.mb-exc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out-expo); }
.mb-exc__sector { color: var(--color-mid); font: 400 .9375rem/1.3 var(--sans); }
.mb-exc h3 { font: 430 calc(var(--fs-primary) * .85)/1.08 var(--serif); letter-spacing: -.018em; }
@media (any-pointer: fine) { .mb-exc:hover .mb-exc__img img { transform: scale(1.03); } }

/* Example pages */
.mb-case-flag { display: flex; flex-direction: column; gap: .5rem; max-width: 40rem; padding: 1rem 1.2rem; border-left: 2px solid var(--accent); background: color-mix(in oklab, var(--color-foreground), transparent 95%); font: 400 .9375rem/1.4 var(--sans); letter-spacing: -.01rem; }
.mb-case-flag strong { font-weight: 400; color: var(--color-foreground); }
.mb-case-intro { max-width: 36rem; color: var(--color-mid); font: 400 var(--fs-title-sm)/1.45 var(--sans); letter-spacing: -.01rem; }
.mb-case-figs { padding: 0 var(--grid-padding) calc(var(--section-padding) * 1.25); }
.mb-case-figs .mb-figs { display: grid; gap: 1.5rem; }
@media (width >= 960px) { .mb-case-figs .mb-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(var(--gutter) * 2); } }
.mb-story-grid { display: grid; grid-template-columns: repeat(var(--columns), 1fr); column-gap: var(--gutter); row-gap: 3rem; padding: calc(var(--section-padding) * 1.25) var(--grid-padding); }
.mb-story-grid article { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 1.1rem; }
.mb-story-grid article h2 { margin-top: 1.5rem; font: 430 var(--fs-primary)/var(--lh-primary) var(--serif); letter-spacing: -.018em; margin-block-end: var(--trim); }
.mb-story-grid article h2:first-child { margin-top: 0; }
.mb-story-grid article h3 { margin-top: .5rem; font: 400 var(--fs-title-sm)/1.3 var(--sans); }
.mb-story-grid article p { max-width: 36rem; color: var(--color-mid); font: 400 1.0625rem/1.5 var(--sans); letter-spacing: -.01rem; }
.mb-story-grid aside { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 1rem; }
.mb-story-grid aside img { width: 100%; aspect-ratio: .8; object-fit: cover; border-radius: var(--radius); }
.mb-story-grid aside .mb-cap { color: var(--color-mid); font: 400 .8125rem/1.3 var(--sans); }
.mb-story-grid aside h3 { margin-top: .5rem; font: 400 1rem/1.3 var(--sans); }
.mb-story-grid aside ul { display: grid; gap: .5rem; padding-left: 1.1rem; list-style: disc; color: var(--color-mid); font: 400 .9375rem/1.4 var(--sans); }
@media (width >= 960px) { .mb-story-grid article { grid-column: 1 / span 6; } .mb-story-grid aside { grid-column: 8 / span 3; position: sticky; top: 6rem; align-self: start; } }
.mb-measure { display: grid; grid-template-columns: repeat(var(--columns), 1fr); column-gap: var(--gutter); row-gap: 2rem; padding: calc(var(--section-padding) * 1.25) var(--grid-padding) calc(var(--section-padding) * 1.5); }
.mb-measure > * { grid-column: 1 / -1; }
.mb-measure h2 { font: 430 var(--fs-primary)/var(--lh-primary) var(--serif); letter-spacing: -.018em; }
.mb-measure dl { display: grid; gap: 1.75rem; }
@media (width >= 960px) { .mb-measure dl { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(var(--gutter) * 2); } }
.mb-measure dt { font: 400 1rem/1.3 var(--sans); color: var(--color-foreground); margin-bottom: .5rem; }
.mb-measure dd { color: var(--color-mid); font: 400 .9375rem/1.45 var(--sans); }
.mb-measure dd + dd { margin-top: .5rem; }
.mb-measure .mb-fine { color: var(--color-mid); font: 400 .875rem/1.4 var(--sans); max-width: 44rem; }
.mb-case-nav { display: flex; flex-wrap: wrap; gap: 1rem 2rem; padding: 0 var(--grid-padding) calc(var(--section-padding) * 1.5); }

/* Footer lead and draft note */
.mb-foot-lead { font: 400 1rem/1.3 var(--sans); color: var(--mid-on-dark); }
.mb-draft { max-width: 34rem; color: var(--mid-on-dark); font: 400 .8125rem/1.4 var(--sans); }
.mb-ctas--center { justify-content: center; }
.hero__head .mb-ctas { margin-top: .5rem; }
.mb-door__img--card { display: grid; place-items: center; padding: 1.5rem; background: var(--ink) !important; }
.mb-door__img--card .mb-review { width: min(26rem, 100%); }
.mb-door__img--card figcaption:empty { display: none; }
.mb-howband__link { grid-column: 1 / -1; }
@media (width >= 960px) { .mb-howband__link { grid-column: 2 / span 8; } }
.mb-howband .all-link { color: var(--color-foreground); }
.mb-trio__t { color: var(--color-foreground); }
.mb-clients-wrap { padding-top: 0; }
.mb-list--head { padding-bottom: 2.5rem; }
@media (width >= 960px) { .mb-list--head > .mb-list__note { grid-column: 5 / span 6; align-self: end; font-size: 1rem; } }
.mb-measure dd em { font-style: normal; color: var(--color-foreground); }
.site-footer__socials { flex-wrap: wrap; align-items: baseline; }
.mb-close .mb-kicker { color: var(--color-mid); }

/* ---------- Review fixes, 27 Sep */
/* Home hero: the logo strip sits closer under the offer, not at the fold */
[data-theme-mode="home"] .hero { min-height: auto; grid-template-rows: auto auto; padding-top: calc(10rem + env(safe-area-inset-top)); padding-bottom: 4rem; gap: 3.5rem; }
[data-theme-mode="home"] .hero__head, [data-theme-mode="home"] .hero__title { grid-row: 1; }
[data-theme-mode="home"] .hero__proof { grid-row: 2; }
.proof__row img { --h: 18px; }
/* Software door card: header on one tidy line */
.mb-door__img--card .mb-review__tag, .mb-door__img--card .mb-review__time { display: none; }
.mb-door__img--card .mb-review__mark { width: 1.75rem; height: 1.75rem; padding: .35rem; }
/* Engineering band: tighter */
@media (width >= 768px) { .features.mb-howband { row-gap: 3.5rem; } }
/* People: one crop and one grade */
.mb-person img { object-position: 50% 25%; filter: grayscale(1) contrast(1.05); aspect-ratio: .8; }
@media (width >= 960px) { .mb-people__grid--two { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Home client cards: shorter */
.mb-cases-plain .ccard { height: clamp(14rem, 17vw, 16rem) !important; }
.ccard__name { font: 430 1.5rem/1 var(--serif); letter-spacing: -.018em; color: #fff; margin-top: auto; margin-bottom: 1rem; }
/* Closing section into the footer */
main > .mb-close:last-child { padding-bottom: 4rem; }
.mb-foot-lead { font: 430 var(--fs-primary)/var(--lh-primary) var(--serif) !important; letter-spacing: -.018em; color: var(--color-foreground) !important; text-align: center; }
/* Figures: serif, no awkward wraps */
.mb-fig__col b { font: 430 clamp(1.75rem, 2.8vw, 2.6rem)/1.05 var(--serif); letter-spacing: -.02em; }
.mb-case-figs .mb-fig { grid-template-columns: 1fr; row-gap: .6rem; }
.mb-case-figs .mb-fig__arrow { display: none; }
.mb-case-figs .mb-fig__col:first-child b { font-size: clamp(1.2rem, 1.6vw, 1.5rem); }
.mb-example { padding-bottom: 3rem; }
@media (width >= 960px) { .mb-example { padding-block: 5rem 4rem; } }
/* Proof tiles: title and body sit with the logo, not across an empty middle */
.mb-tile { min-height: 0 !important; justify-content: flex-start; gap: 2.5rem; }
@media (width >= 960px) { .mb-tile { min-height: 20rem !important; justify-content: space-between; } }
.mb-inc { padding-bottom: calc(var(--section-padding) * 1.5); }
/* Software work-product band: copy beside the card */
.mb-artifact-band__inner { grid-template-columns: 1fr; gap: 2rem; padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 4rem); }
.mb-artifact-band__copy { display: flex; flex-direction: column; gap: 1rem; color: #fff; }
.mb-artifact-band__copy h2 { font: 400 var(--fs-primary)/var(--lh-primary) var(--serif); letter-spacing: -.018em; max-width: 13em; }
.mb-artifact-band__copy p { color: var(--mid-on-dark); font: 400 1rem/1.4 var(--sans); max-width: 26rem; }
@media (width >= 960px) { .mb-artifact-band__inner { grid-template-columns: 1fr 1fr; align-items: center; place-items: center start; } .mb-artifact-band .mb-review { justify-self: end; width: min(32rem, 100%); } }
.mb-artifact-band figcaption { display: none; }
/* Example pages: lift the aside photograph */
.mb-story-grid aside img { filter: brightness(1.18) contrast(1.04); }
/* Client cards with a square mark show the name as text */
.mb-client__name { font: 430 1.5rem/1 var(--serif); letter-spacing: -.018em; color: #fff; }
.mb-person__img { aspect-ratio: .8; border-radius: var(--radius); overflow: clip; background: #d8d4d1; }
.mb-person__img img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; object-position: 50% 50%; }
.mb-artifact-band__copy { width: 100%; max-width: 30rem; }
.mb-artifact-band .mb-review, .mb-door__img--card .mb-review { grid-column: auto !important; grid-row: auto !important; position: static !important; }

/* ---------- Premium pass: no pill badges, no status dots, no callout boxes */
.mb-note-label, .mb-case-note { color: var(--color-mid); font: 400 .875rem/1.4 var(--sans); letter-spacing: -.01rem; }
.mb-case-note { max-width: 36rem; padding-top: 1rem; border-top: 1px solid color-mix(in oklab, var(--color-foreground), transparent 85%); }
.mb-exc__sector { font-size: .875rem; }
/* Home hero: title, one line, logos, with Collins air */
[data-theme-mode="home"] .hero { padding-top: calc(12rem + env(safe-area-inset-top)); padding-bottom: 5rem; gap: 5rem; }
[data-theme-mode="home"] .hero__lead { max-width: 34rem; color: var(--color-mid); }
.mb-sectors-list { margin-top: 1.5rem; }
@media (width >= 960px) { .mb-sectors-list { margin-top: 2.5rem; } }

/* Figures as a plain table */
.mb-figt { width: 100%; border-collapse: collapse; font: 400 1rem/1.35 var(--sans); letter-spacing: -.01rem; }
.mb-figt thead th { padding: 0 0 .75rem; color: var(--color-mid); font-weight: 400; font-size: .875rem; text-align: left; }
.mb-figt tbody tr { border-top: 1px solid color-mix(in oklab, var(--color-foreground), transparent 85%); }
.mb-figt tbody tr:last-child { border-bottom: 1px solid color-mix(in oklab, var(--color-foreground), transparent 85%); }
.mb-figt th[scope="row"] { padding: 1.1rem 1.5rem 1.1rem 0; color: var(--color-mid); font-weight: 400; text-align: left; width: 50%; }
.mb-figt td { padding: 1.1rem 1.5rem 1.1rem 0; white-space: nowrap; vertical-align: baseline; }
.mb-figt__b { color: var(--color-mid); }
.mb-figt__a { font: 430 1.35rem/1.1 var(--serif); letter-spacing: -.015em; color: var(--color-foreground); }
@media (width < 640px) { .mb-figt th[scope="row"] { width: auto; } .mb-figt td { white-space: normal; } }
.mb-case-figs .mb-figs { display: block; max-width: 52rem; }
/* Home client work as rows on the dark page */
.mb-worklist { padding-top: calc(var(--section-padding) * 1.75); }
.mb-worklist .programs__list { display: flex; flex-direction: column; gap: 2rem; }
/* Door headings breathe; logos on one line; home close centred like the hero and footer */
.mb-door__title { margin-bottom: 1.25rem; }
@media (width >= 960px) { .mb-door__title { margin-bottom: 1.5rem; } .proof { max-width: none; } .proof__rows { grid-template-columns: repeat(7, 6.5rem); column-gap: 1.75rem; } }
[data-theme-mode="home"] .mb-close { justify-items: center; text-align: center; }
[data-theme-mode="home"] .mb-close > * { grid-column: 1 / -1; }
[data-theme-mode="home"] .mb-close h2, [data-theme-mode="home"] .mb-close p { margin-inline: auto; }
[data-theme-mode="home"] .mb-close .mb-ctas { justify-content: center; }

/* Home statement: the fill sentence on its own, centred in the grid */
.mb-statement { padding-block: calc(var(--section-padding) * 1.5) calc(var(--section-padding) * .5); }
@media (width >= 768px) { .mb-statement .story { grid-column: 3 / span 7; } }
.mb-howband .hgroup p { margin-top: .75rem; }
.mb-story + .mb-workflow { padding-top: 3.5rem; }

/* Long-title heroes (illustrative examples): smaller display size, wider measure, label on the title's first line */
@media (width >= 960px) {
  .mb-hero--long .fb-head__kicker { grid-column: span 3; }
  .mb-hero--long .fb-head__head { grid-column: span 7; }
  .mb-hero--long .fb-head__title { font-size: clamp(3.25rem, 4.9vw, 5.75rem); line-height: .98; max-width: 15em; text-wrap: balance; }
  .mb-hero--long .fb-head__excerpt { max-width: 34em; }
  .mb-hero--long .fb-head__kicker { padding-top: .35rem; }
}
.mb-hero .fb-head__title { text-wrap: balance; }
/* Hero type stops growing when the grid stops growing (container caps at 1440) */
@media (width >= 960px) {
  .mb-hero .fb-head__title { font-size: clamp(4.6875rem, 7.4vw, 6.66rem); }
  .mb-hero--long .fb-head__title { font-size: clamp(3.25rem, 4.9vw, 4.41rem); }
}
@media (width < 960px) { .mb-hero--long .fb-head__title { font-size: clamp(2.4rem, 7vw, 3.5rem); line-height: 1; } }

/* ---------- Coherence pass, 27 Sep evening ---------- */
/* One dark treatment: every dark section is a full-bleed band with square edges, like the sessions and the footer */
.features-wrap:has(> .mb-howband) { padding: 0; }
.features.mb-howband { border-radius: 0; padding-inline: 0; }
@media (width >= 960px) { .features.mb-howband { padding-block: 8rem; } }
.mb-artifact-band { padding: 0 0 calc(var(--section-padding) * 1.25); }
.mb-artifact-band__inner { border-radius: 0; padding: clamp(3.5rem, 8vw, 7rem) var(--grid-padding); }
.site-footer { border-top: 1px solid rgba(255, 255, 255, .09); }

/* One section-heading size across bands, lists, grids and questions */
.mb-howband .hgroup--secondary > :first-child,
.mb-faq .hgroup--secondary > :first-child { font-size: var(--fs-xl); line-height: var(--lh-xl); letter-spacing: -.02em; }
@media (width >= 960px) {
  .mb-howband > .hgroup > :first-child, .mb-faq > .hgroup > :first-child { grid-column: 1 / span 5; }
  .mb-howband > .hgroup > p, .mb-faq > .hgroup > p { grid-column: 7 / span 3; align-self: end; }
}

/* Day numerals in the serif; the milestone day carries the accent */
.mb-trio__n { font-family: var(--serif); font-weight: 400; letter-spacing: -.024em; }
.mb-trio li:last-child .mb-trio__n { color: var(--accent); }

/* Figures read as proof, not a spreadsheet */
.mb-figt__a { font-size: clamp(1.6rem, 2.3vw, 2.1rem); line-height: 1; }
.mb-case-figs .mb-figt__a { font-size: clamp(2rem, 3.4vw, 3.1rem); }
.mb-case-figs .mb-figt th[scope="row"] { font-size: 1.0625rem; color: var(--color-foreground); }
.mb-case-figs .mb-figt td { padding-block: 1.5rem; }

/* Footer and menu index: every item at full strength, the current page underlined in the accent */
.bignav a:has(~ a[aria-current="page"]), .bignav a[aria-current="page"] ~ a { color: inherit; }
.bignav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: .05em; text-underline-offset: .14em; }

/* Client work as an editorial index on paper, names in the serif */
.mb-clients { grid-template-columns: 1fr !important; gap: 0; padding-top: 1rem; }
.mb-client { display: grid; grid-template-columns: 1fr; gap: .6rem; min-height: 0; padding: 2rem 0; border-radius: 0; background: none; color: var(--color-foreground); border-top: 1px solid color-mix(in oklab, var(--color-foreground), transparent 85%); }
.mb-client:last-child { border-bottom: 1px solid color-mix(in oklab, var(--color-foreground), transparent 85%); }
.mb-client__logo, .mb-client__name { display: none; }
.mb-client h3 { font: 430 var(--fs-primary)/var(--lh-primary) var(--serif); }
.mb-client p { color: var(--color-mid); }
.mb-client__sector { color: var(--color-mid); }
.mb-client .mb-client__note { margin-top: 0; color: var(--color-mid); }
.mb-client a { color: var(--color-foreground); }
.mb-client:target { box-shadow: none; background: color-mix(in oklab, var(--accent), transparent 92%); }
@media (width >= 960px) {
  .mb-client { grid-template-columns: repeat(10, 1fr); column-gap: var(--gutter); align-items: baseline; padding: 2.4rem 0; }
  .mb-client h3 { grid-column: 1 / span 3; grid-row: 1 / span 2; }
  .mb-client__sector { grid-column: 4 / span 2; grid-row: 1; }
  .mb-client > p:not([class]) { grid-column: 6 / span 4; grid-row: 1; max-width: 32rem; color: var(--color-foreground); }
  .mb-client .mb-client__note { grid-column: 6 / span 4; grid-row: 2; }
  .mb-client > a { grid-column: 10; grid-row: 1; justify-self: end; white-space: nowrap; opacity: 0; transition: opacity .3s; }
  .mb-client:hover > a, .mb-client > a:focus-visible { opacity: 1; }
}

/* Example stories: a larger photograph beside the story */
@media (width >= 960px) {
  .mb-story-grid article { grid-column: 1 / span 5; }
  .mb-story-grid aside { grid-column: 7 / span 4; }
}

/* Scroll-filled statements start closer to ink, so they read before they fill */
.mb-story { --grey-80: #9e978f; }
/* Engagement band: heading across the band, the line beneath it */
@media (width >= 960px) {
  .mb-howband > .hgroup { display: flex !important; flex-direction: column; gap: 1.5rem; }
  .mb-howband > .hgroup > :first-child { max-width: 15em; }
  .mb-howband > .hgroup > p { max-width: 30rem; }
}
/* A light engagement band keeps its rhythm with a hairline above and below */
.mb-howband[data-theme-section="light"] { border-block: 1px solid color-mix(in oklab, var(--color-foreground), transparent 85%); }
/* Display-size figures */
.mb-case-figs .mb-figt__a { font-size: clamp(2.6rem, 4.4vw, 4.2rem); letter-spacing: -.025em; }
.mb-example .mb-figt__a { font-size: clamp(2rem, 3vw, 2.8rem); letter-spacing: -.02em; }
.mb-measure h2 { font-size: var(--fs-xl) !important; line-height: var(--lh-xl) !important; letter-spacing: -.02em; }
/* The enterprise close on paper, ruled off from the grid above */
#enterprise[data-theme-section="light"] { border-top: 1px solid color-mix(in oklab, var(--color-foreground), transparent 85%); }
/* Full-bleed band keeps the page grid inside it */
.features.mb-howband { padding-inline: var(--grid-padding); }
@media (width >= 960px) {
  .mb-howband > .hgroup > p { margin: 0; align-self: flex-start; }
  .mb-faq > .hgroup > p { grid-column: 6 / span 3; max-width: 24rem; }
  #enterprise { padding-top: 5rem; }
}
.mb-example .mb-figt__a { font-size: clamp(2.4rem, 3.6vw, 3.4rem); }
@media (width < 640px) {
  .mb-case-figs .mb-figt__a, .mb-example .mb-figt__a { font-size: 1.75rem; }
  .mb-case-figs .mb-figt th[scope="row"] { font-size: .9375rem; padding-right: .75rem; }
  .mb-case-figs .mb-figt td { padding-right: .75rem; }
}

/* ---------- Night shift imagery (A + C), 27 Sep evening ---------- */
/* Software: the accounts field under the opening, on the page grid */
.mb-field-band { padding: 0 var(--grid-padding) calc(var(--section-padding) * 1.25); }
.mb-field-band figure { display: grid; gap: .9rem; }
.mb-field-band img { width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; border-radius: var(--radius); background: #14110f; }
.mb-field-band figcaption { color: var(--color-mid); font: 400 .8125rem/1.3 var(--sans); }
@media (width < 768px) { .mb-field-band img { aspect-ratio: 3 / 2; object-position: 70% 50%; } }
@media (width >= 960px) {
  .mb-field-band figure { grid-template-columns: repeat(var(--columns), 1fr); column-gap: var(--gutter); }
  .mb-field-band img { grid-column: 2 / span 8; }
  .mb-field-band figcaption { grid-column: 2 / span 5; }
}
/* Graded photographs and fields carry their own grain; keep them unfiltered and give dark fields a dark placeholder */
img[src*="media/ns-field"] { background: #14110f; }
/* Software field band: shorter so it sits inside the first screen */
.mb-field-band img { aspect-ratio: 4 / 1; }
@media (width >= 960px) { body:has(.mb-field-band) .mb-hero { padding-bottom: 2.5rem; } }
@media (width < 768px) { .mb-field-band img { aspect-ratio: 2 / 1; } }
/* Client proof cards on paper: ruled, ink logos, no dark SaaS tiles */
.mb-tile { background: #ebe7e0; color: var(--color-foreground); border-radius: 0; border-top: 2px solid var(--color-foreground); padding: 1.4rem 0 1.6rem; background: none; }
.mb-tile__logo { filter: invert(1) brightness(.25); opacity: .9; }
.mb-tile__for { color: var(--color-mid); }
.mb-tile__body h3 { color: var(--color-foreground); }
.mb-tile__body p { color: var(--color-mid); }
/* Home software door: frame the field on its decision clusters and count */
.mb-door__img img[src*="ns-field"] { object-position: 78% 88%; }

/* Software: the selects sheet as a wide photograph before the client cards */
.mb-field-band--photo img { aspect-ratio: 3 / 2 !important; object-fit: cover; }
.mb-field-band--photo figcaption { font-size: 1rem; }
@media (width >= 960px) {
  .mb-field-band--photo img { grid-column: 1 / -1 !important; }
  .mb-field-band--photo figcaption { grid-column: 1 / span 6 !important; }
  body:has(.mb-field-band--photo) .mb-hero { padding-bottom: 4rem; }
}
@media (width < 768px) { .mb-field-band--photo img { aspect-ratio: 4 / 3 !important; object-position: 45% 50%; } }
/* Selects photograph: capped so it never runs past the screen */
.mb-field-band--photo img { aspect-ratio: 16 / 9 !important; max-height: 72vh; object-position: 50% 48%; }

/* Software client cards: photographs like the fashion cards, the client credit as one small line */
.mb-card__for { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .7rem; margin-top: .15rem; color: var(--color-mid); font: 400 .875rem/1.3 var(--sans); letter-spacing: -.01rem; }
.mb-card__logos { display: inline-flex; align-items: center; gap: .6rem; }
.mb-card__logo { height: var(--h, 14px); width: auto; opacity: .85; }
.mb-card__logo--inv { filter: invert(1) brightness(.2); }
/* Credit sits under the card text, one quiet line: "Built for" and the logos */
.mb-card--client { display: flex; flex-direction: column; }
.mb-card--client .mb-card__for { order: 3; margin-top: .9rem; font-size: .8125rem; gap: .6rem; }
.mb-card--client .mb-card__logo { opacity: .7; }

/* ---------- Manifesto structure: idea sections (software mock) ---------- */
.mb-idea { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding: calc(var(--section-padding) * 1.4) var(--grid-padding); }
.mb-idea__copy { display: flex; flex-direction: column; gap: 1.1rem; max-width: 30rem; }
.mb-idea__copy h2 { font: 400 var(--fs-xl)/var(--lh-xl) var(--serif); letter-spacing: -.02em; }
.mb-idea__copy p:not(.mb-kicker) { color: var(--color-mid); font: 400 var(--fs-title-sm)/1.4 var(--sans); letter-spacing: -.01rem; }
.mb-idea__visual { margin: 0; display: grid; gap: .8rem; }
.mb-idea__visual > img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.mb-idea__visual figcaption, .mb-pair__note { color: var(--color-mid); font: 400 .8125rem/1.3 var(--sans); }
.mb-idea--dark { background: var(--ink); color: #fff; }
.mb-idea--dark .mb-idea__copy p:not(.mb-kicker) { color: var(--mid-on-dark); }
@media (width >= 960px) {
  .mb-idea { grid-template-columns: repeat(var(--columns), 1fr); column-gap: var(--gutter); align-items: center; }
  .mb-idea__copy { grid-column: 1 / span 4; }
  .mb-idea__visual { grid-column: 6 / span 5; }
  .mb-idea--flip .mb-idea__copy { grid-column: 7 / span 4; grid-row: 1; }
  .mb-idea--flip .mb-idea__visual { grid-column: 1 / span 6; grid-row: 1; }
}
/* the account record */
.mb-record { width: 100%; max-width: 34rem; justify-self: end; }
.mb-record__use { margin: 1.1rem 0 .2rem; }
.mb-record__chart { display: block; width: 100%; height: 7rem; margin-top: .5rem; }
.mb-idea .mb-review__card { box-shadow: 0 28px 60px -28px rgba(18, 13, 11, .45), 0 0 0 1px rgba(18, 13, 11, .08); }
/* the pair of work items */
.mb-pair { grid-template-columns: 1fr; gap: 1.25rem; }
.mb-pair__item { margin: 0; }
.mb-pair__item--waiting .mb-review__kicker { color: var(--accent); }
.mb-pair__item--waiting .mb-review__card { box-shadow: 0 0 0 2px var(--accent), 0 28px 60px -28px rgba(0, 0, 0, .6); }
@media (width >= 960px) { .mb-pair { grid-template-columns: 1fr 1fr; align-items: start; } .mb-pair__item--waiting { margin-top: 3rem; } }

/* ---------- Manifesto page ---------- */
.mb-mf { padding-block: calc(var(--section-padding) * .9) 0; row-gap: 0; }
.mb-mf .story { grid-column: 1 / -1; }
@media (width >= 768px) { .mb-mf .story { grid-column: 3 / span 7; } }
.mb-mf-fig { margin: calc(var(--section-padding) * 1.3) var(--grid-padding) 0; }
.mb-mf-fig img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); display: block; }
@media (width >= 960px) { .mb-mf-fig { margin-inline: calc(var(--grid-padding) + (100% - 2 * var(--grid-padding)) * .1); } }
.mb-mf-line { padding: calc(var(--section-padding) * 1.6) var(--grid-padding) calc(var(--section-padding) * .6); text-align: center; }
.mb-mf-line p { margin-inline: auto; max-width: 16em; font: 400 var(--fs-xl)/var(--lh-xl) var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.mb-mf-line--last p { max-width: 20em; }
.mb-mf-pair { display: grid; grid-template-columns: 1fr; gap: var(--gutter); margin: calc(var(--section-padding) * 1.3) var(--grid-padding) 0; align-items: end; }
.mb-mf-pair figure { margin: 0; }
.mb-mf-pair img { width: 100%; height: auto; border-radius: var(--radius); display: block; object-fit: cover; }
@media (width >= 960px) {
  .mb-mf-pair { grid-template-columns: 5fr 3fr; }
  .mb-mf-pair--even { grid-template-columns: 1fr 1fr; margin-inline: calc(var(--grid-padding) + (100% - 2 * var(--grid-padding)) * .1); }
}
.mb-mf-sign { padding-top: calc(var(--section-padding) * 1.4); }
/* Software mock, second pass */
.mb-record { max-width: 40rem; padding: 2rem 2.2rem 2.2rem; }
.mb-record__name { font: 430 clamp(2rem, 2.6vw, 2.6rem)/1 var(--serif) !important; letter-spacing: -.02em; margin-top: .4rem; }
.mb-record__chart { height: 8.5rem; }
.mb-idea { padding-bottom: calc(var(--section-padding) * 1.8); }
@media (width >= 960px) {
  .mb-idea--dark { grid-template-rows: auto auto; row-gap: 3.5rem; }
  .mb-idea--dark .mb-idea__copy { grid-column: 1 / span 5; max-width: 34rem; }
  .mb-idea--dark .mb-idea__visual { grid-column: 1 / -1; }
  .mb-pair { grid-template-columns: 1fr 1fr; gap: calc(var(--gutter) * 2); }
  .mb-pair__item--waiting { margin-top: 0; }
  .mb-pair .mb-review__card { padding: 1.8rem 2rem; }
  .mb-pair .mb-review__title { font: 430 1.9rem/1.1 var(--serif); letter-spacing: -.018em; }
}

/* Manifesto, second pass: a display sentence per idea, supporting text beneath, no scroll fill */
.mb-mf-hero .fb-head__excerpt { font: 400 clamp(1.25rem, 1.7vw, 1.5rem)/1.35 var(--sans); letter-spacing: -.015em; color: var(--color-mid); max-width: 26em; }
.mb-mf-block { display: grid; grid-template-columns: 1fr; gap: 1.25rem; padding: calc(var(--section-padding) * 1.1) var(--grid-padding) 0; }
.mb-mf-block__lead { font: 400 clamp(2.1rem, 4vw, 3.6rem)/1.04 var(--serif); letter-spacing: -.022em; max-width: 18em; text-wrap: balance; }
.mb-mf-block__rest { color: var(--color-mid); font: 400 clamp(1.05rem, 1.3vw, 1.2rem)/1.5 var(--sans); letter-spacing: -.01rem; max-width: 36rem; }
@media (width >= 960px) {
  .mb-mf-block { grid-template-columns: repeat(var(--columns), 1fr); column-gap: var(--gutter); }
  .mb-mf-block > * { grid-column: 2 / span 7; }
  .mb-mf-block__rest { grid-column: 2 / span 5; }
}
.mb-mf-side { display: grid; gap: 2rem; padding: calc(var(--section-padding) * 1.3) var(--grid-padding) 0; align-items: end; }
.mb-mf-side figure, .mb-mf-end figure { margin: 0; }
.mb-mf-side img, .mb-mf-end img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.mb-mf-side__text { display: grid; gap: 1.25rem; }
.mb-mf-end { display: grid; gap: 2rem; padding: calc(var(--section-padding) * 1.8) var(--grid-padding) 0; align-items: center; }
.mb-mf-end__line { font: 400 var(--fs-xl)/var(--lh-xl) var(--serif); letter-spacing: -.02em; text-wrap: balance; }
@media (width >= 960px) {
  .mb-mf-side, .mb-mf-end { grid-template-columns: repeat(var(--columns), 1fr); column-gap: var(--gutter); }
  .mb-mf-side__text { grid-column: 2 / span 5; }
  .mb-mf-side figure { grid-column: 7 / span 4; }
  .mb-mf-end__line { grid-column: 1 / span 6; }
  .mb-mf-end figure { grid-column: 7 / span 4; }
}
.mb-mf-sign { padding-bottom: calc(var(--section-padding) * 1.5); }
.mb-mf-sign .mb-person img { filter: none !important; }
/* Fixes: the pair ignores older card positioning; the side statement ignores the body-column rule */
.mb-pair .mb-review { grid-column: auto !important; grid-row: auto !important; position: static !important; }
.mb-pair__note { grid-column: 1 / -1; }
.mb-mf-side__text > * { grid-column: auto !important; }
.mb-list + .mb-quotes { padding-top: 0; }

/* Footer and menu index: no underline on the current page */
.bignav a[aria-current="page"] { text-decoration: none; }

/* ==========================================================================
   Home page below the hero (28 September 2026)
   ========================================================================== */

/* ---------- PATCH: what a team receives, played once as the section arrives ---------- */
.lw-patch { background: var(--ink); color: #f3efe8; padding: calc(var(--section-padding) * 1.8) var(--grid-padding) calc(var(--section-padding) * 1.4); display: flex; flex-direction: column; gap: 3.25rem; overflow: clip; }
.lw-patch__head { display: grid; gap: 1.25rem; max-width: 64rem; }
.lw-label { color: var(--accent); font: 400 .9375rem/1.2 var(--sans); letter-spacing: .06em; }
.lw-patch__lead { font: 430 var(--fs-primary)/1.08 var(--serif); letter-spacing: -.018em; text-wrap: pretty; }
.lw-arts { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.lw-art { position: relative; margin: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.lw-art__cap { font: 400 var(--fs-primary)/1 var(--serif); letter-spacing: -.018em; color: #f3efe8; }
.lw-card { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 1.6rem; border-radius: 1.25rem; background: #f6f3ee; color: #1d1a17; box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 60px 100px -45px rgba(0, 0, 0, .8), 0 20px 44px -26px rgba(0, 0, 0, .65); font: 400 1.0625rem/1.35 var(--sans); letter-spacing: -.01em; }
.lw-card__app { display: flex; align-items: center; gap: .55rem; color: #5e574f; font-size: .9375rem; }
.lw-card__app img { width: 1.9rem; height: 1.9rem; padding: .38rem; border-radius: .45rem; background: var(--ink); }
.lw-card__app span { color: #1d1a17; }
.lw-card__app time { margin-left: auto; font-variant-numeric: tabular-nums; }
.lw-card__q { margin: 1.3rem 0 1.4rem; font: 400 1.75rem/1.08 var(--serif); letter-spacing: -.015em; color: #120d0b; text-wrap: balance; }
.lw-card__src { margin-top: auto; padding-top: 1.1rem; color: #5e574f; font-size: .9375rem; }

/* answers: the account that matters, large; the rest small */
.lw-hero-row { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .55rem 1rem; padding: 1.1rem 1.1rem 1rem; margin: 0 -.2rem 1.3rem; border-radius: .9rem; background: #fff; box-shadow: 0 1px 2px rgba(18, 13, 11, .06), 0 14px 30px -20px rgba(18, 13, 11, .35); }
.lw-hero-row__n { font-weight: 500; color: #120d0b; }
.lw-hero-row__v { color: #6e675e; font-size: .9375rem; text-align: right; }
.lw-hero-row__v span { font: 400 4.6rem/.78 var(--serif); letter-spacing: -.022em; color: #120d0b; margin-right: .2rem; font-variant-numeric: tabular-nums; }
.lw-hero-row__r { grid-column: 1 / -1; color: var(--accent); font-size: .9375rem; }
.lw-seats { display: grid; gap: 1rem; }
.lw-seats li { display: grid; grid-template-columns: 1fr auto; gap: .45rem 1rem; align-items: baseline; font-size: .9375rem; }
.lw-seats__n { color: #1d1a17; }
.lw-seats__c { color: #6e675e; font-variant-numeric: tabular-nums; }
.lw-seats__bar { grid-column: 1 / -1; height: .45rem; border-radius: .25rem; background: #e6e0d6; overflow: hidden; }
.lw-seats__bar--hero { height: 1rem; border-radius: .5rem; }
.lw-seats__bar i { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: inherit; background: #2b2622; transform-origin: 0 50%; }
.lw-seats__bar--hero i { background: var(--accent); }

/* prepared work: one document, the change drawn through it */
.lw-invoice { padding: 1rem 1.1rem .95rem; border-radius: .9rem; background: #fff; box-shadow: 0 1px 2px rgba(18, 13, 11, .06), 0 14px 30px -20px rgba(18, 13, 11, .35); }
.lw-invoice__h { display: flex; justify-content: space-between; margin-bottom: .7rem; color: #5e574f; font-size: .875rem; letter-spacing: .02em; }
.lw-invoice ul { display: grid; gap: .55rem; }
.lw-invoice li { position: relative; display: flex; justify-content: space-between; color: #2b2622; font-variant-numeric: tabular-nums; }
.lw-invoice li.is-cut { color: #9d968c; }
.lw-invoice li.is-cut::after { content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--accent); transform-origin: 0 50%; }
.lw-invoice__t { display: flex; justify-content: space-between; align-items: baseline; margin-top: .8rem; padding-top: .9rem; border-top: 1px solid #ece7df; color: #120d0b; font-weight: 500; }
.lw-invoice__t s { color: #a39c92; font: 400 1.6rem/1 var(--serif); margin-right: .55rem; text-decoration-thickness: 2px; }
.lw-invoice__t em { font: 400 4.6rem/.78 var(--serif); font-style: normal; letter-spacing: -.022em; color: var(--accent); }
.lw-card__also { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; color: #1d1a17; font-size: .9375rem; }
.lw-card__also::before, .lw-checks li::before { content: ""; flex: none; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: #2b2622 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3 6.8 11 12 5.3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.lw-card__need { display: flex; align-items: center; gap: .5rem; margin-top: auto; padding-top: 1.4rem; color: #1d1a17; font-size: .9375rem; }
.lw-card__need i { flex: none; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.2v4.6M8 11.3v.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 80% no-repeat; }

/* decision: one number, three checks, the button */
.lw-big { font: 400 1.25rem/1 var(--sans); color: #6e675e; }
.lw-big span { font: 400 5.6rem/.78 var(--serif); letter-spacing: -.024em; color: #120d0b; margin-right: .2rem; }
.lw-big__sub { margin-top: 1rem; color: #6e675e; font-size: .9375rem; }
.lw-checks { display: grid; gap: .6rem; margin: 1.4rem 0 1.6rem; color: #1d1a17; font-size: .9375rem; }
.lw-checks li { display: flex; align-items: center; gap: .55rem; }
.lw-approve { position: relative; margin-top: auto; height: 3.8rem; border-radius: .85rem; overflow: hidden; font: 400 1.125rem/3.8rem var(--sans); text-align: center; }
.lw-approve span { position: absolute; inset: 0; }
.lw-approve__a { background: var(--accent); color: #fff; }
.lw-approve__b { background: var(--ink); color: #f3efe8; opacity: 0; }
.lw-approve__b::before { content: ""; display: inline-block; width: .8rem; height: .45rem; margin: 0 .6rem .2rem 0; border: solid var(--accent); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }

/* the proof */
.lw-quote { margin: .5rem 0 0; display: grid; gap: 1.5rem; max-width: 60rem; padding-top: 2.5rem; border-top: 1px solid rgba(243, 239, 232, .14); }
.lw-quote p { font: 400 var(--fs-xl)/var(--lh-xl) var(--serif); letter-spacing: -.022em; text-wrap: balance; }
.lw-quote figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.25rem; color: rgba(243, 239, 232, .75); font: 400 1rem/1.3 var(--sans); }
.lw-quote figcaption img { height: 20px; width: auto; }
.lw-patch__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.lw-note { color: rgba(243, 239, 232, .62); font: 400 .875rem/1.35 var(--sans); }
.lw-note--cards { margin-top: -1.75rem; }
.lw-link-light { color: #f3efe8; }

/* choreography: one card after another, each with its own moment, then hold. Hidden states apply only once the
   script has taken over, so without it everything shows in its final state. */
.lw-arts.js-wait .lw-card { opacity: 0; transform: translateY(2.5rem); }
.lw-arts.is-playing .lw-card { opacity: 1; transform: none; transition: opacity .6s var(--ease-out-cubic), transform .9s var(--ease-out-expo); }
.lw-arts.is-playing .lw-art:nth-child(2) .lw-card { transition-delay: 1s; }
.lw-arts.is-playing .lw-art:nth-child(3) .lw-card { transition-delay: 2.1s; }
.lw-arts.js-wait .lw-seats__bar i { transform: scaleX(0); }
.lw-arts.is-playing .lw-seats__bar i { transform: none; transition: transform 1s var(--ease-out-expo) .35s; }
.lw-arts.is-playing .lw-seats li:nth-child(1) .lw-seats__bar i { transition-delay: .6s; }
.lw-arts.is-playing .lw-seats li:nth-child(2) .lw-seats__bar i { transition-delay: .7s; }
.lw-arts.is-playing .lw-seats li:nth-child(3) .lw-seats__bar i { transition-delay: .8s; }
.lw-arts.js-wait .lw-hero-row__v span { opacity: 0; }
.lw-arts.is-playing .lw-hero-row__v span { opacity: 1; transition: opacity .5s .5s; }
.lw-arts.js-wait .lw-invoice li.is-cut::after { transform: scaleX(0); }
.lw-arts.js-wait .lw-invoice li.is-cut { color: #2b2622; }
.lw-arts.is-playing .lw-invoice li.is-cut::after { transform: none; transition: transform .45s var(--ease-out-cubic) 1.55s; }
.lw-arts.is-playing .lw-invoice li.is-cut:nth-child(4)::after { transition-delay: 1.8s; }
.lw-arts.is-playing .lw-invoice li.is-cut { color: #9d968c; transition: color .35s 1.9s; }
.lw-arts.js-wait .lw-invoice__t s { text-decoration-color: transparent; color: #120d0b; }
.lw-arts.is-playing .lw-invoice__t s { transition: color .35s 2.05s, text-decoration-color .35s 2.05s; }
.lw-arts.js-wait .lw-invoice__t em, .lw-arts.js-wait .lw-card__also, .lw-arts.js-wait .lw-card__need { opacity: 0; transform: translateY(.4rem); }
.lw-arts.is-playing .lw-invoice__t em, .lw-arts.is-playing .lw-card__also, .lw-arts.is-playing .lw-card__need { opacity: 1; transform: none; transition: opacity .4s 2.2s, transform .5s 2.2s var(--ease-out-cubic); }
.lw-arts.is-playing .lw-card__also { transition-delay: 2.4s; }
.lw-arts.is-playing .lw-card__need { transition-delay: 2.6s; }
.lw-arts.js-wait .lw-checks li::before { transform: scale(0); }
.lw-arts.js-wait .lw-checks li { color: #b3aca2; }
.lw-arts.is-playing .lw-checks li::before { transform: none; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.lw-arts.is-playing .lw-checks li { color: #1d1a17; transition: color .3s; }
.lw-arts.is-playing .lw-checks li:nth-child(1), .lw-arts.is-playing .lw-checks li:nth-child(1)::before { transition-delay: 2.75s; }
.lw-arts.is-playing .lw-checks li:nth-child(2), .lw-arts.is-playing .lw-checks li:nth-child(2)::before { transition-delay: 3s; }
.lw-arts.is-playing .lw-checks li:nth-child(3), .lw-arts.is-playing .lw-checks li:nth-child(3)::before { transition-delay: 3.25s; }
.lw-arts.is-playing .lw-approve { animation: lw-press .45s 3.75s var(--ease-out-cubic) both; }
.lw-arts.is-playing .lw-approve__b { opacity: 1; transition: opacity .3s 3.95s; }
.lw-arts.is-done .lw-approve__b { opacity: 1; }
@keyframes lw-press { 40% { transform: scale(.965); } 100% { transform: none; } }

/* ---------- Who we work with ---------- */
.lw-doors { padding: calc(var(--section-padding) * 1.4) var(--grid-padding) calc(var(--section-padding) * 1.8); display: flex; flex-direction: column; gap: 2.75rem; }
.lw-doors .hgroup--primary > p, .lw-work .hgroup--secondary > :first-child { font-size: var(--fs-xl); line-height: var(--lh-xl); letter-spacing: -.02em; }
.lw-doors__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
.lw-door { display: flex; flex-direction: column; gap: 1.4rem; color: inherit; }
.lw-door__img { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: clip; background: #221a16; }
.lw-door__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out-expo); }
.lw-door:hover .lw-door__img img { transform: scale(1.025); }
.lw-door__body { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.lw-door__title { font: 400 calc(var(--fs-primary) * 1.12)/1 var(--serif); letter-spacing: -.018em; }
.lw-door__line { max-width: 30rem; color: var(--color-mid); font: 400 var(--fs-title-sm)/1.4 var(--sans); letter-spacing: -.01rem; }
.lw-door__logos { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; padding: .9rem 0; margin: .2rem 0; border-block: 1px solid rgba(18, 13, 11, .1); width: 100%; }
.lw-door__logos img { width: auto; opacity: .85; display: block; }
.lw-wordlogo { font: 500 1.05rem/1 var(--serif); letter-spacing: .01em; opacity: .85; }
.lw-inv { filter: invert(1); }
.lw-also { display: grid; grid-template-columns: 1fr; border-top: 1px solid rgba(18, 13, 11, .12); }
.lw-also a { display: grid; gap: .35rem; padding: 1.25rem 0; border-bottom: 1px solid rgba(18, 13, 11, .12); color: inherit; }
.lw-also__t { font: 400 var(--fs-title-lg)/1.15 var(--serif); letter-spacing: -.012em; }
.lw-also__d { color: var(--color-mid); font: 400 1rem/1.4 var(--sans); max-width: 34rem; }
.lw-also a:hover .lw-also__t { color: var(--accent); }

/* ---------- Selected client work: three featured cases, then the roster ---------- */
.lw-work { padding: calc(var(--section-padding) * 1.2) var(--grid-padding) calc(var(--section-padding) * 1.6); display: flex; flex-direction: column; gap: 2.75rem; }
.lw-work__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.lw-feat { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.lw-case { display: flex; flex-direction: column; gap: .8rem; color: inherit; }
.lw-case__img { position: relative; aspect-ratio: 4 / 5; min-height: 0; border-radius: var(--radius); overflow: clip; background: #221a16; }
.lw-case__img > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out-expo); }
.lw-case__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 8, 7, .86), rgba(10, 8, 7, .25) 38%, rgba(10, 8, 7, 0) 60%); pointer-events: none; }
.lw-case__logo { position: absolute; left: 1.5rem; bottom: 1.5rem; z-index: 1; width: auto; max-width: 62%; }
.lw-case__logo--word { color: #fff; font: 400 1.6rem/1 var(--serif); letter-spacing: -.005em; }
.lw-case__img .lw-inv { filter: invert(1); }
.lw-case:hover .lw-case__img > img:first-child { transform: scale(1.03); }
.lw-case__tag { margin-top: .4rem; color: var(--color-mid); font: 400 .9375rem/1.3 var(--sans); }
.lw-case__line { font: 400 var(--fs-title-lg)/1.18 var(--serif); letter-spacing: -.012em; max-width: 26rem; text-wrap: pretty; }
.lw-case:hover .lw-case__line { color: var(--accent); }
.lw-roster { display: grid; grid-template-columns: 1fr; border-top: 1px solid color-mix(in srgb, var(--color-foreground) 14%, transparent); }
.lw-roster a { display: grid; grid-template-columns: 9rem 1fr; align-items: center; gap: 1.5rem; padding: 1.4rem 0; border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 14%, transparent); color: inherit; }
.lw-roster img { width: auto; max-width: 9.5rem; display: block; opacity: .92; }
.lw-roster a > img { align-self: center; }
.lw-roster span { color: var(--color-mid); font: 400 1rem/1.4 var(--sans); }
.lw-roster a:hover span { color: var(--color-foreground); }

/* ---------- The close: one dark surface from the call to the footer ---------- */
.lw-cta { background: var(--ink); color: #f3efe8; display: grid; grid-template-columns: 1fr; }
.lw-cta__img { aspect-ratio: 16 / 9; overflow: clip; }
.lw-cta__img img { width: 100%; height: 100%; object-fit: cover; }
.lw-cta__copy { display: flex; flex-direction: column; gap: 1.5rem; padding: calc(var(--section-padding) * 1.2) var(--grid-padding); }
.lw-cta h2 { font: 400 var(--fs-xl)/var(--lh-xl) var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.lw-cta__lead { max-width: 30rem; color: rgba(243, 239, 232, .7); font: 400 var(--fs-title-sm)/1.45 var(--sans); letter-spacing: -.01rem; }
.lw-cta__who { display: flex; align-items: center; gap: .9rem; }
.lw-cta__who p { display: grid; gap: .2rem; }
.lw-who__t { font: 400 var(--fs-title-sm)/1.3 var(--sans); }
.lw-who__d { color: rgba(243, 239, 232, .75); font: 400 .9375rem/1.3 var(--sans); }
.lw-faces { display: flex; }
.lw-faces img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--ink); }
.lw-faces img + img { margin-left: -16px; }
.lw-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: .25rem; }
.lw-cta .btn--solid { background: #f3efe8; color: var(--ink); }
.lw-btn { height: 3.25rem; padding-inline: 1.6rem; font-size: 1.0625rem; }
.lw-mail { color: #f3efe8; font: 400 1rem/1.3 var(--sans); text-decoration: underline; text-decoration-color: rgba(243, 239, 232, .35); text-underline-offset: .25em; }
.lw-mail:hover { text-decoration-color: var(--accent); }

.lw-footer { background: var(--ink); color: #f3efe8; padding: var(--section-padding) var(--grid-padding) 2rem; display: flex; flex-direction: column; gap: 3rem; border-top: 1px solid rgba(243, 239, 232, .1); }
.lw-footer__top { display: grid; gap: 2.5rem; }
.lw-footer { gap: 2.5rem; }
.lw-footer__sign { font: 400 var(--fs-xl)/var(--lh-xl) var(--serif); letter-spacing: -.02em; }
.lw-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
.lw-footer__cols div { display: flex; flex-direction: column; gap: .55rem; font: 400 1rem/1.35 var(--sans); }
.lw-footer__cols a { color: #f3efe8; width: fit-content; }
.lw-footer__cols a:hover { color: var(--accent); }
.lw-footer__h { color: rgba(243, 239, 232, .62); font-size: .875rem; margin-bottom: .2rem; }
.lw-footer__base { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(243, 239, 232, .1); color: rgba(243, 239, 232, .72); font: 400 .9375rem/1.35 var(--sans); }
.lw-footer__mark { display: block; width: 100%; margin-top: 1rem; }
.lw-footer__mark img { display: block; width: 100%; height: auto; opacity: .95; }
.lw-partner { display: inline-flex !important; flex-direction: column; align-items: flex-start; gap: .45rem; margin-top: .6rem; color: rgba(243, 239, 232, .6) !important; font-size: .875rem; }
.lw-partner img { width: auto; filter: invert(1) brightness(1.2); display: block; }
.lw-partner:hover { color: #f3efe8; }
.lw-footer__draft { margin-left: auto; max-width: 34rem; color: rgba(243, 239, 232, .55); font-size: .875rem; }

@media (width >= 768px) {
  .lw-doors__grid { grid-template-columns: 1fr 1fr; gap: var(--gutter); column-gap: 1.5rem; }
  .lw-also { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .lw-feat { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .lw-roster { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .lw-cta { grid-template-columns: 1.1fr 1fr; align-items: stretch; }
  .lw-cta__img { aspect-ratio: auto; min-height: 34rem; }
  .lw-cta__copy { justify-content: center; padding: calc(var(--section-padding) * 1.4) var(--grid-padding) calc(var(--section-padding) * 1.4) 3.5rem; }
  .lw-footer__top { grid-template-columns: 1fr; }
  .lw-footer__cols { max-width: 52rem; }
  .lw-footer__cols { grid-template-columns: repeat(3, 1fr); }
}
@media (width >= 1200px) {
  .lw-roster { grid-template-columns: repeat(3, 1fr); }
  .lw-roster a { grid-template-columns: 1fr; grid-template-rows: 2.5rem auto; align-items: start; gap: .9rem; padding: 1.5rem 0 1.6rem; }
  .lw-roster a > img { align-self: end; }
}
@media (width < 768px) {
  .lw-roster a { grid-template-columns: 1fr; gap: .7rem; }
  .lw-case__img { aspect-ratio: 4 / 3; }
  .lw-door__logos { gap: .75rem 1.25rem; }
}


@media (width >= 768px) {
  .lw-arts { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .lw-card { min-height: 0; padding: 1.9rem; }
}
@media (width < 768px) {
  .lw-arts { min-width: 0; width: calc(100% + var(--grid-padding) * 2); grid-auto-flow: column; grid-auto-columns: 88%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--grid-padding); margin-inline: calc(var(--grid-padding) * -1); padding: 1rem var(--grid-padding) 2.5rem; gap: .9rem; scrollbar-width: none; }
  .lw-art { scroll-snap-align: start; }
  .lw-card { min-height: 29rem; }
  .lw-big span { font-size: 5.5rem; }
}
@media (prefers-reduced-motion: reduce) { .lw-arts * { transition: none !important; animation: none !important; } }

/* ---------- Fashion page: the worked example as a dark band ---------- */
#example.mb-example { display: grid; grid-template-columns: 1fr; gap: 2.25rem; padding: calc(var(--section-padding) * 1.6) var(--grid-padding); border: 0; background: var(--ink); color: #f3efe8; }
.mb-ex__img { display: block; position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: clip; background: #221a16; }
.mb-ex__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 46% 50%; transition: transform 1.2s var(--ease-out-expo); }
.mb-ex__img:hover img { transform: scale(1.03); }
.mb-ex__body { display: flex; flex-direction: column; justify-content: flex-start; gap: 2.25rem; min-width: 0; }
#example .mb-example__copy { gap: 1.1rem; }
#example .mb-example__copy h3 { font: 430 var(--fs-xl)/var(--lh-xl) var(--serif); letter-spacing: -.02em; max-width: 14em; margin-bottom: .55rem; }
#example .mb-example__copy p { max-width: 32rem; color: rgba(243, 239, 232, .72); font: 400 var(--fs-title-sm)/1.45 var(--sans); }
.mb-ex__figs { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0; }
.mb-ex__fig { display: flex; flex-direction: column; gap: 1.1rem; min-height: 15.5rem; padding: 1.5rem 1.5rem 1.35rem; border-radius: 1.15rem; background: #f6f3ee; color: #1d1a17; box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 50px 90px -45px rgba(0, 0, 0, .8), 0 18px 40px -26px rgba(0, 0, 0, .6); }
.mb-ex__fig dt { color: #4a443e; font: 400 1rem/1.35 var(--sans); letter-spacing: -.01em; max-width: 22rem; }
.mb-ex__fig dd { margin: 0; }
.mb-ex__to { margin-top: auto !important; display: flex; flex-direction: column; gap: .6rem; }
.mb-ex__v { font: 400 clamp(2.3rem, 2.9vw, 2.75rem)/1 var(--serif); letter-spacing: -.025em; color: #120d0b; text-wrap: balance; }
.mb-ex__to small { display: block; color: #b0360c; font: 600 .875rem/1 var(--sans); letter-spacing: .03em; }
.mb-ex__from { padding-top: .9rem; border-top: 1px solid #e3ddd3; color: #6e675e; font: 400 .9375rem/1.3 var(--sans); }
.mb-ex__from b { font-weight: 400; color: #1d1a17; margin-left: .3rem; }
.mb-ex__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.mb-ex__foot p { color: rgba(243, 239, 232, .8); font: 400 .9375rem/1.4 var(--sans); max-width: 26rem; }
#example .all-link { color: #f3efe8; }
@media (width >= 768px) {
  .mb-ex__figs { grid-template-columns: 1fr 1fr; }
}
@media (width >= 960px) {
  #example.mb-example { grid-template-columns: 5fr 7fr; column-gap: clamp(2.5rem, 5vw, 5rem); align-items: stretch; padding-block: calc(var(--section-padding) * 2); }
  .mb-ex__img { aspect-ratio: auto; min-height: 100%; }
}

/* ---------- Example pages: the outcomes, set large ---------- */
.mb-outs { display: grid; grid-template-columns: 1fr; margin: 0 var(--grid-padding); border-top: 1px solid color-mix(in oklab, var(--color-foreground), transparent 82%); }
.mb-out { display: flex; flex-direction: column; gap: .7rem; padding: 2rem 0 2.2rem; border-bottom: 1px solid color-mix(in oklab, var(--color-foreground), transparent 82%); }
.mb-out__v { font: 400 clamp(4rem, 7vw, 6.5rem)/.82 var(--serif); letter-spacing: -.028em; color: var(--color-foreground); font-variant-numeric: tabular-nums; }
.mb-out:first-child .mb-out__v { color: var(--accent); }
.mb-out:not(:first-child) .mb-out__v { font-size: clamp(2.6rem, 4vw, 3.6rem); }
.mb-out__l { max-width: 20rem; color: var(--color-foreground); font: 400 var(--fs-title-sm)/1.35 var(--sans); letter-spacing: -.01rem; }
.mb-out__was { color: var(--color-mid); font: 400 .9375rem/1.3 var(--sans); }
.mb-ex__to { margin-top: auto !important; }
.mb-ex__from { color: #5e574f; }
#example .mb-note-label { color: rgba(243, 239, 232, .62); letter-spacing: .02em; }
@media (width >= 768px) {
  .mb-outs { grid-template-columns: 1.6fr 1fr 1fr; border-bottom: 1px solid color-mix(in oklab, var(--color-foreground), transparent 82%); }
  .mb-out:first-child .mb-out__v { font-size: clamp(5.5rem, 9vw, 8.5rem); }
  .mb-out:not(:first-child) { justify-content: flex-end; }
  .mb-out { padding: 2.5rem 2rem 2.6rem 0; border-bottom: 0; }
  .mb-out + .mb-out { padding-left: 2rem; border-left: 1px solid color-mix(in oklab, var(--color-foreground), transparent 82%); }
}
/* band cards: the figure leads, the measure explains it */
.mb-ex__fig { gap: .8rem; }
.mb-ex__fig .mb-ex__to { order: -1; margin-top: 0 !important; }
.mb-ex__fig .mb-ex__v { font-size: clamp(3.2rem, 4.4vw, 4.2rem); line-height: .85; letter-spacing: -.024em; }
.mb-ex__fig dt { color: #1d1a17; }
.mb-ex__fig .mb-ex__from { margin-top: auto; }
.mb-exc__out { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.mb-exc__out b { font: 400 2.6rem/.9 var(--serif); letter-spacing: -.022em; color: var(--accent); }
.mb-exc__out span { color: var(--color-mid); font: 400 .9375rem/1.3 var(--sans); max-width: 14rem; }

/* ==========================================================================
   Review pass (29 September 2026)
   ========================================================================== */


/* example pages and How we work: the hero carries a photograph */
.ex-hero .fb-head__title, .hw-hero .fb-head__title { max-width: 16em; }
.ex-hero__img { margin: 2.5rem 0 0; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: clip; background: #221a16; }
.ex-hero__img img { width: 100%; height: 100%; object-fit: cover; }
@media (width >= 960px) { .ex-hero__img { margin-top: 3.5rem; aspect-ratio: 21 / 9; } }

/* example pages: the story reads at a comfortable size, the interface is the centrepiece */
.mb-story-grid article p { font-size: 1.0625rem; line-height: 1.55; max-width: 62ch; }
.mb-story-grid article h3 { font: 400 1.4rem/1.15 var(--serif); letter-spacing: -.01em; margin-top: 1.6rem; }
.mb-story-grid aside .ex-art { padding: 0; background: none; }
.mb-story-grid aside .ex-art .lw-card { box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 40px 80px -40px rgba(18, 13, 11, .45), 0 12px 30px -18px rgba(18, 13, 11, .3); border: 1px solid rgba(18, 13, 11, .06); }
@media (width >= 960px) { .mb-story-grid aside { position: sticky; top: 6.5rem; align-self: start; } }
.ex-card { min-height: 0; }
.ex-card .lw-approve__b { opacity: 1; }
.ex-booked { margin-top: 1.4rem; }
.ex-brief { display: grid; gap: .8rem; margin-bottom: 1.2rem; }
.ex-brief div { display: grid; grid-template-columns: 7.2rem 1fr; gap: 1rem; font-size: .9375rem; }
.ex-brief dt { color: #5e574f; }
.ex-brief dd { color: #1d1a17; }
.ex-intro { grid-template-columns: 1fr; gap: .45rem; }
.ex-intro__who { font: 400 1.35rem/1.15 var(--serif); letter-spacing: -.01em; color: #120d0b; }

/* example pages: finish on the next example and a call, not two small links */
.ex-next { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: calc(var(--section-padding) * .5) var(--grid-padding) calc(var(--section-padding) * 1.6); }
.ex-next__card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; padding: 1rem; border-radius: calc(var(--radius) * 1.25); background: color-mix(in oklab, var(--ink), transparent 95%); color: inherit; }
.ex-next__img { display: block; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: clip; }
.ex-next__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out-expo); }
.ex-next__card:hover .ex-next__img img { transform: scale(1.03); }
.ex-next__body { display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: .5rem .5rem 1rem; }
.ex-next__body small { color: var(--color-mid); font: 400 .9375rem/1.3 var(--sans); }
.ex-next__t { font: 430 var(--fs-xl)/var(--lh-xl) var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.ex-next__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.ex-next__cta p { font: 400 var(--fs-title-sm)/1.35 var(--sans); margin-right: auto; }
@media (width >= 960px) { .ex-next__card { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem; } .ex-next__body { padding: 1rem 2rem 1rem 0; } }

/* How we work: three shapes instead of four identical grids */
.hw-rows dl { display: block !important; border-top: 1px solid color-mix(in oklab, var(--color-foreground), transparent 85%); }
.hw-rows dl > div { display: grid; grid-template-columns: 1fr; gap: .6rem; max-width: none !important; padding: 1.5rem 0; border-bottom: 1px solid color-mix(in oklab, var(--color-foreground), transparent 85%); }
.hw-rows dt { font: 400 1.6rem/1.1 var(--serif) !important; letter-spacing: -.012em !important; }
.hw-rows dd { max-width: 40rem; }
@media (width >= 960px) { .hw-rows dl > div { grid-template-columns: 5fr 7fr; column-gap: 3rem; align-items: baseline; padding: 1.9rem 0; } }
.hw-statement { background: var(--ink); }
.hw-statement dl > div { padding-top: 1.25rem; border-top: 2px solid var(--accent); }
.hw-statement dt { font: 400 calc(var(--fs-primary) * .95)/1.05 var(--serif) !important; letter-spacing: -.015em !important; margin-bottom: .6rem; }
.hw-statement dd { color: rgba(243, 239, 232, .78) !important; }

/* home: the rest of the roster as one row of logos */
.lw-logorow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.75rem 2.5rem; padding: 2.25rem 0; border-block: 1px solid color-mix(in srgb, var(--color-foreground) 14%, transparent); }
.lw-logorow a { display: block; opacity: .82; transition: opacity .3s; }
.lw-logorow a:hover { opacity: 1; }
.lw-logorow img { display: block; width: auto; }
@media (width < 768px) { .lw-logorow { justify-content: flex-start; gap: 1.5rem 2rem; } }

/* client work: the logo carries the name */
.mb-client__logo { height: 30px; max-width: 70%; }
.mb-client .mb-client__note { font-size: .875rem; }
.mb-client a { font-size: .9375rem; }

/* practice pages: one lead photograph in each four-card set */
@media (width >= 960px) {
  .mb-inc__grid--four { grid-template-columns: 1.5fr 1fr 1fr 1fr !important; }
  .mb-inc__grid--four > .mb-inc__col:first-child .mb-card__img { aspect-ratio: 1.02; }
  .mb-inc__grid--four > .mb-inc__col:first-child .mb-card h3 { font-size: var(--fs-primary); }
}

/* phone: the next PATCH card visibly waits at the edge */
@media (width < 768px) { .lw-arts { grid-auto-columns: 82%; } }

/* slightly firmer secondary text */
:root { --mid-on-light: #524c49; }

/* Manifesto: a composed rhythm instead of the same beat ten times (text unchanged) */
@media (width >= 960px) {
  main > figure.mb-mf-fig:nth-of-type(odd) { margin-inline: 0; }
  main > figure.mb-mf-fig:nth-of-type(odd) img { border-radius: 0; aspect-ratio: 21 / 9; }
  main > figure.mb-mf-fig:nth-of-type(even) { margin-left: calc(var(--grid-padding) + 38%); }
  main > figure.mb-mf-fig:nth-of-type(even) img { aspect-ratio: 4 / 3; }
  .mb-mf-fig + .mb-mf-block { padding-left: calc(var(--grid-padding) + 38%); }
  .mb-mf-fig + .mb-mf-block .mb-mf-block__lead { max-width: 14em; }
}
.mb-mf-line { text-align: left; padding-block: calc(var(--section-padding) * 2.2) calc(var(--section-padding) * 1.2); }
.mb-mf-line p { margin-inline: 0; max-width: 11em; font-size: clamp(3.4rem, 8.2vw, 7.6rem); line-height: .92; letter-spacing: -.024em; }
.mb-mf-end__line { font-size: clamp(2.8rem, 5.6vw, 5.4rem); line-height: .96; letter-spacing: -.022em; }

/* figures: lining, tabular numerals for every stat */
.mb-out__v, .mb-ex__v, .mb-exc__out b, .lw-big span, .lw-hero-row__v span, .lw-invoice__t, .lw-seats__c, .mb-figt__a, .mb-trio__n, .lw-quote p { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }

/* ==========================================================================
   Openings per page type (29 September 2026)
   ========================================================================== */
/* practice pages: the headline over a full-bleed photograph */
.px-hero { position: relative; min-height: min(100svh, 62rem); justify-content: flex-end; padding-top: 9rem; padding-bottom: calc(var(--section-padding) * 1.1); color: #f3efe8; overflow: clip; }
.px-hero__img { position: absolute; inset: 0; margin: 0; z-index: 0; }
.px-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.px-hero__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 8, 7, .88) 0%, rgba(10, 8, 7, .55) 38%, rgba(10, 8, 7, .08) 70%, rgba(10, 8, 7, .2) 100%); }
.px-hero .fb-head { position: relative; z-index: 1; }
.px-hero .fb-head__title { font-size: clamp(3.6rem, 8.4vw, 8.2rem); line-height: .9; letter-spacing: -.028em; max-width: 9em; color: #fff; }
.px-hero .fb-head__kicker { color: rgba(243, 239, 232, .78); }
.px-hero .fb-head__excerpt { color: rgba(243, 239, 232, .86); max-width: 30rem; }
.px-hero .btn--solid { background: #f3efe8; color: var(--ink); }
.px-hero .all-link, .px-hero .mb-offer, .px-hero .mb-offer a { color: #f3efe8; }
.px-hero .mb-offer span { color: rgba(243, 239, 232, .7); }
@media (width >= 960px) { .px-hero .fb-head__head { max-width: 56rem; } }

/* example pages: the result and the product card open the page */
.ex-lead { display: flex; flex-direction: column; gap: .7rem; margin-bottom: .6rem; }
.ex-lead b { font: 400 clamp(5rem, 11vw, 10.5rem)/.8 var(--serif); letter-spacing: -.03em; color: var(--accent); font-variant-numeric: lining-nums tabular-nums; }
.ex-lead span { max-width: 26rem; color: var(--color-mid); font: 400 1rem/1.4 var(--sans); }
.ex-hero__card { margin-top: 2.5rem; }
.ex-hero__card .lw-card { max-width: 30rem; box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 50px 90px -45px rgba(18, 13, 11, .5), 0 14px 34px -20px rgba(18, 13, 11, .3); border: 1px solid rgba(18, 13, 11, .06); }
@media (width >= 960px) {
  .ex-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 6vw, 6rem); align-items: end; }
  .ex-hero__card { margin: 0; justify-self: end; width: 100%; max-width: 30rem; }
  .ex-hero .fb-head__title { font-size: clamp(2.6rem, 3.6vw, 3.4rem); line-height: 1; max-width: 13em; }
}
.mb-outs:has(> .mb-out:only-child), .mb-outs { grid-template-columns: 1fr; }
@media (width >= 768px) { .mb-outs { grid-template-columns: 1fr 1fr !important; } .mb-out:first-child .mb-out__v { font-size: clamp(2.6rem, 4vw, 3.6rem) !important; color: var(--color-foreground) !important; } .mb-out:first-child { padding-left: 0; } }
.mb-out:first-child .mb-out__v { color: var(--color-foreground); }
.ex-band { margin: 0; aspect-ratio: 21 / 9; overflow: clip; }
.ex-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (width < 768px) { .ex-band { aspect-ratio: 4 / 3; } }
.mb-story-grid { grid-template-columns: 1fr !important; }
.mb-story-grid article { grid-column: 1 / -1 !important; max-width: 46rem; margin-inline: auto; }

/* How we work and Manifesto: type-led openings */
.hw-hero .fb-head__title, .type-hero .fb-head__title { font-size: clamp(3.8rem, 9.4vw, 9.6rem); line-height: .88; letter-spacing: -.03em; max-width: 8.5em; }
.hw-hero { padding-bottom: calc(var(--section-padding) * .6); }
.hw-hero__img { margin-top: 0; }
.mf-band { margin-top: calc(var(--section-padding) * .4); }

.hw-hero .ex-band { margin-inline: calc(var(--grid-padding) * -1); margin-top: 2.5rem; }

.mb-clients__ask { padding: 1.5rem 0 0; color: var(--color-mid); font: 400 1rem/1.4 var(--sans); }
.mb-clients__ask a { color: var(--color-foreground); text-decoration: underline; text-underline-offset: .2em; }

/* FAQ: questions in the serif, answers open on demand */
.faq-acc { border-top: 1px solid color-mix(in oklab, var(--color-foreground), transparent 85%); }
.faq-acc__item { border-bottom: 1px solid color-mix(in oklab, var(--color-foreground), transparent 85%); }
.faq-acc__item summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.35rem 0; cursor: pointer; list-style: none; font: 400 clamp(1.35rem, 2vw, 1.75rem)/1.15 var(--serif); letter-spacing: -.012em; }
.faq-acc__item summary::-webkit-details-marker { display: none; }
.faq-acc__icon { flex: none; width: 1rem; height: 1rem; transition: transform .35s var(--ease-out-cubic); }
.faq-acc__item[open] .faq-acc__icon { transform: rotate(45deg); }
.faq-acc__item summary:hover span { color: var(--accent); }
.faq-acc__a { padding: 0 0 1.5rem; max-width: 44rem; }
.faq-acc__a p { color: var(--color-mid); font: 400 1.0625rem/1.55 var(--sans); }
.faq-acc__a p + p { margin-top: .6rem; }
@media (width >= 960px) { .faq-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 3rem; align-items: start; } .faq-wrap .faq-acc { margin-top: 0; } }

/* phones: product cards stay legible */
@media (width < 768px) {
  .mb-review__card { padding: 1.25rem; }
  .mb-review__title { font-size: 1.3rem; }
  .mb-review__fields dd, .mb-review__fields dt { font-size: .9375rem; }
  .lw-card { padding: 1.35rem; }
  .lw-card__q { font-size: 1.5rem; }
}

/* Example stories: sticky labels, a code-drawn screen for each build step, results as numbers (30 September 2026) */
.ex-lead b { white-space: nowrap; font-size: clamp(4.5rem, 9vw, 9rem); }
.ex-story { padding: calc(var(--section-padding) * .75) var(--grid-padding) calc(var(--section-padding) * 1.1); }
.ex-sec { display: grid; gap: 1.5rem; padding: 3rem 0; border-top: 1px solid color-mix(in oklab, var(--color-foreground), transparent 86%); }
.ex-sec:first-child { border-top: 0; padding-top: 0; }
.ex-sec__h { font: 400 1rem/1.3 var(--sans); color: var(--color-mid); letter-spacing: 0; }
.ex-sec__lede { max-width: 38rem; font: 400 clamp(1.45rem, 2.1vw, 1.95rem)/1.28 var(--serif); letter-spacing: -.012em; color: var(--color-foreground); text-wrap: pretty; }
.ex-sec__body { max-width: 38rem; font: 400 1.125rem/1.55 var(--sans); color: var(--color-foreground); letter-spacing: -.01rem; }
@media (width >= 960px) {
  .ex-sec { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: 4.5rem 0; }
  .ex-sec__h { grid-column: 1 / span 3; position: sticky; top: 6.5rem; align-self: start; }
  .ex-sec__b { grid-column: 4 / -1; }
}
.ex-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem 2rem; }
@media (width >= 768px) { .ex-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ex-step h3 { margin: 1.25rem 0 .45rem; font: 400 1.45rem/1.15 var(--serif); letter-spacing: -.012em; }
.ex-step p { max-width: 30rem; color: var(--color-mid); font: 400 1.0625rem/1.5 var(--sans); }
.ex-step__plate { display: grid; place-items: center; min-height: 19rem; padding: 2rem 1.5rem; border-radius: var(--radius); background: #e8e2d9; }
.ex-mini { width: 100%; max-width: 21rem; display: flex; flex-direction: column; gap: .7rem; padding: 1.05rem 1.15rem 1.15rem; border-radius: .75rem; background: #fbf9f6; color: #1d1a17; border: 1px solid rgba(18, 13, 11, .07); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 28px 50px -30px rgba(18, 13, 11, .45), 0 8px 18px -12px rgba(18, 13, 11, .25); font: 400 .875rem/1.35 var(--sans); letter-spacing: -.005em; font-variant-numeric: lining-nums tabular-nums; }
.ex-mini__app { display: flex; align-items: center; gap: .5rem; color: #5e574f; font-size: .8125rem; }
.ex-mini__app img { width: 1.45rem; height: 1.45rem; padding: .3rem; border-radius: .35rem; background: var(--ink); }
.ex-mini__app span { color: #1d1a17; }
.ex-mini__app time { margin-left: auto; }
.ex-mini__meta { color: #5e574f; font-size: .8125rem; }
.ex-mini__q { font: 400 1.2rem/1.2 var(--serif); letter-spacing: -.01em; color: #120d0b; text-wrap: balance; }
.ex-mini__q s { color: #8a817a; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.ex-mini__rows { display: grid; }
.ex-mini__rows li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-top: 1px solid rgba(18, 13, 11, .08); }
.ex-mini__rows li:last-child { border-bottom: 1px solid rgba(18, 13, 11, .08); }
.ex-mini__rows span { color: #5e574f; }
.ex-mini__rows b { font-weight: 450; text-align: right; }
.ex-mini__rows--big li { align-items: baseline; padding: .6rem 0; }
.ex-mini__rows--big b { font: 400 2rem/1 var(--serif); }
.ex-mini__rows--big em { font-style: normal; color: var(--accent); }
.ex-mini__ok, .ex-mini__need, .ex-mini__checks li { display: flex; align-items: center; gap: .5rem; }
.ex-mini__ok::before, .ex-mini__checks li::before { content: ""; flex: none; width: 1rem; height: 1rem; border-radius: 50%; background: #2b2622 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3 6.8 11 12 5.3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.ex-mini__need i { flex: none; width: 1rem; height: 1rem; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.2v4.6M8 11.3v.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.ex-mini__checks { display: grid; gap: .55rem; }
.ex-mini__bars { display: grid; gap: .5rem; }
.ex-mini__bars li { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) 2.4rem; align-items: center; gap: .6rem; }
.ex-mini__bars span { color: #5e574f; }
.ex-mini__bars i { height: .5rem; border-radius: 1px; background: linear-gradient(90deg, #2b2622 calc(var(--v) * 100%), rgba(18, 13, 11, .08) 0); }
.ex-mini__bars .is-hot i { background: linear-gradient(90deg, var(--accent) calc(var(--v) * 100%), rgba(18, 13, 11, .08) 0); }
.ex-mini__bars b { font-weight: 450; text-align: right; }
.ex-mini__act { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .3rem; }
.ex-mini__btn { padding: .35rem .75rem; border-radius: 999px; background: var(--ink); color: #fbf9f6; font-size: .8125rem; }
.ex-nums { display: grid; gap: 2.25rem; margin-top: 2.75rem; padding-top: 2.25rem; border-top: 1px solid color-mix(in oklab, var(--color-foreground), transparent 86%); }
@media (width >= 768px) { .ex-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; } }
.ex-nums dt { display: flex; flex-direction: column; gap: .7rem; }
.ex-nums dt b { font: 400 clamp(2.6rem, 3.6vw, 3.5rem)/.9 var(--serif); letter-spacing: -.025em; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.ex-nums div:first-child dt b { color: var(--accent); }
.ex-nums dt span { max-width: 17rem; font: 400 1.0625rem/1.35 var(--sans); color: var(--color-foreground); }
.ex-nums__was { margin-top: .45rem; color: var(--color-mid); font: 400 1rem/1.35 var(--sans); }
.ex-nums__how { margin-top: .9rem; max-width: 17rem; color: var(--color-mid); font: 400 .8125rem/1.4 var(--sans); }
@media (width >= 768px) { .ex-steps { row-gap: 0; } .ex-step { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; padding-bottom: 3rem; } .ex-step__plate { height: 100%; } }

/* How we work: one ownership panel (30 September 2026) */
.hw-statement { padding-block: calc(var(--section-padding) * 1.1) !important; }
.hw-statement .hgroup h2 { max-width: 14em; font-size: var(--fs-xl) !important; line-height: 1 !important; letter-spacing: -.024em; }
.hw-statement .hgroup p { max-width: 36rem; color: rgba(243, 239, 232, .78); }
@media (width >= 960px) { .hw-statement dl { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; column-gap: 2rem !important; } .hw-statement dl > div { max-width: none !important; } }

/* Manifesto: three type sizes on a fixed grid, images full-bleed or paired (30 September 2026) */
.mb-mf-block { margin: calc(var(--section-padding) * 1.1) var(--grid-padding) 0; padding: 1.5rem 0 0; border-top: 1px solid color-mix(in oklab, var(--color-foreground), transparent 84%); }
.mb-mf-block__lead { font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.04; max-width: 15em; }
.mb-mf-block__rest { color: var(--color-foreground); opacity: .78; }
@media (width >= 960px) {
  .mb-mf-block { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .mb-mf-block > .mb-mf-block__lead { grid-column: 1 / span 7; }
  .mb-mf-block > .mb-mf-block__rest { grid-column: 9 / span 4; padding-top: .55rem; }
}
.mb-mf-block + .mb-mf-block { margin-top: calc(var(--section-padding) * .9); }
.mb-mf-block.mf-display { border-top: 0; padding-top: 0; margin-top: calc(var(--section-padding) * 1.6); }
.mf-display .mb-mf-block__lead { font-size: clamp(3rem, 7.4vw, 7rem); line-height: .93; letter-spacing: -.026em; max-width: 11em; }
@media (width >= 960px) { .mb-mf-block.mf-display > .mb-mf-block__lead { grid-column: 1 / -1; } .mb-mf-block.mf-display > .mb-mf-block__rest { grid-column: 7 / span 5; padding-top: 2rem; } }
.mf-full { margin: calc(var(--section-padding) * 1.3) 0 0; }
.mf-full img { display: block; width: 100%; aspect-ratio: 21 / 9; height: auto; object-fit: cover; }
@media (width < 768px) { .mf-full img { aspect-ratio: 4 / 3; } }
.mf-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); margin: calc(var(--section-padding) * 1.3) var(--grid-padding) 0; }
.mf-pair figure { margin: 0; }
.mf-pair img { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: var(--radius); }
@media (width >= 960px) { .mf-pair { grid-template-columns: repeat(12, minmax(0, 1fr)); } .mf-pair figure:first-child { grid-column: 1 / span 7; } .mf-pair figure:last-child { grid-column: 8 / span 5; align-self: end; } .mf-pair figure:first-child img { aspect-ratio: 4 / 3; } }
.mb-mf-line.mf-accent p { color: var(--accent); }
.mb-mf-sign { padding-block: calc(var(--section-padding) * 1.4) calc(var(--section-padding) * 1.2); }
.mb-mf-sign .hgroup h2 { font: 400 clamp(2rem, 3.4vw, 3.1rem)/1 var(--serif); letter-spacing: -.02em; }

/* Practice pages: small screens instead of small photos; start panel link (30 September 2026) */
.mb-card__img--ui { display: grid; place-items: center; padding: 1.25rem; background: #e8e2d9; }
.mb-card__img--ui .ex-mini { max-width: 100%; box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 20px 40px -26px rgba(18, 13, 11, .45); }
.mb-card__img--ui .ex-mini__q { font-size: 1.1rem; }
.mb-session__more { margin-top: 1.25rem; }
.mb-inc__grid--ui .mb-card__img { aspect-ratio: auto !important; min-height: 19rem; animation: none !important; }
.mb-inc__grid--ui .ex-mini { max-width: 21rem; }
@media (width >= 960px) {
  .mb-inc__grid--ui { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 2rem !important; row-gap: 3.5rem; }
  .mb-inc__grid--ui > .mb-inc__col { display: contents; }
  .mb-inc__grid--ui .mb-card h3 { font-size: calc(var(--fs-primary) * .8) !important; }
  .mb-inc__grid--ui .mb-card__img { min-height: 21rem; }
}
.nowrap { white-space: nowrap; }
/* keep the card's own paragraph and image rules out of the small screens */
.mb-card .ex-mini p { margin: 0; min-height: 0; max-width: none; color: #1d1a17; font: 400 .875rem/1.35 var(--sans); letter-spacing: -.005em; animation: none !important; opacity: 1; }
.mb-card .ex-mini .ex-mini__app, .mb-card .ex-mini .ex-mini__meta { color: #5e574f; font-size: .8125rem; }
.mb-card .ex-mini .ex-mini__q { font: 400 1.15rem/1.2 var(--serif); color: #120d0b; letter-spacing: -.01em; }
.mb-card__img .ex-mini img { position: static; inset: auto; width: 1.45rem; height: 1.45rem; transform: none !important; transition: none; }
.ex-mini__rows em { font-style: normal; color: var(--accent); }

/* Round 6 (30 September 2026) */
.ex-sec__h { color: var(--color-foreground); font: 400 1.35rem/1.2 var(--serif); letter-spacing: -.01em; }
.ex-before { display: grid; place-items: center; padding: 2rem 1.5rem; border-radius: var(--radius); background: #e8e2d9; }
.ex-before .ex-mini { max-width: 20rem; }
@media (width >= 960px) {
  .ex-sec__b--before { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 2.5rem; align-items: start; }
}
@media (width < 960px) { .ex-before { margin-top: 2rem; } }
.ex-nums dt b { font-size: clamp(3rem, 4.6vw, 4.6rem); }
.ex-next__cta p { font: 400 clamp(1.8rem, 2.8vw, 2.5rem)/1.05 var(--serif); letter-spacing: -.018em; }
.mb-exc__out b { font-size: clamp(2.8rem, 4vw, 3.8rem); }
.px-hero__img::after { background: linear-gradient(to top, rgba(10, 8, 7, .92) 0%, rgba(10, 8, 7, .66) 34%, rgba(10, 8, 7, .18) 66%, rgba(10, 8, 7, .25) 100%), radial-gradient(120% 90% at 0% 100%, rgba(10, 8, 7, .55), transparent 60%); }
.px-hero .fb-head__title { font-size: clamp(4rem, 9.6vw, 9.6rem); }
.px-hero .fb-head__excerpt { color: #f3efe8; }
.features-wrap:has(> .hw-statement) { padding-inline: 0; }
.hw-statement { padding-inline: var(--grid-padding) !important; }
.mb-mf-line.mf-accent { background: var(--ink); margin-top: calc(var(--section-padding) * 1.2); padding-block: calc(var(--section-padding) * 1.6); }
.mb-mf-line.mf-accent p { color: #f3efe8; }
.mb-mf-line.mf-accent p::first-line { color: var(--accent); }
.mf-full + .mb-mf-line.mf-accent { margin-top: 0; }
.mb-person__img:has(img[src*="-duo"]) { background: #15100d; }
@media (width < 768px) {
  .lw-footer { padding-block: 3.25rem 1.5rem; gap: 1.75rem; }
  .lw-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 1rem; }
  .lw-footer__cols div { font-size: .875rem; gap: .45rem; }
  .lw-footer__mark { margin-top: .25rem; }
  .lw-footer__base { font-size: .8125rem; gap: .5rem 1rem; }
}
.mb-person img[src*="-duo"] { filter: none; }
@media (width < 768px) { .lw-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lw-footer__cols a { overflow-wrap: anywhere; } }
@media (width >= 960px) { .hw-statement.mb-faq--two dl > div { grid-column: auto !important; max-width: none !important; } }

/* Home: what we believe, in place of the PATCH feature cards (30 September 2026) */
.bl { background: var(--ink); color: #f3efe8; overflow: clip; }
.blb { display: flex; flex-direction: column; gap: calc(var(--section-padding) * 1.05); padding: calc(var(--section-padding) * 1.5) var(--grid-padding) calc(var(--section-padding) * 1.1); }
.bl__k, .bl__pk { color: rgba(243, 239, 232, .56); font: 400 .9375rem/1.2 var(--sans); letter-spacing: 0; }
.blb__row { display: grid; gap: 1.75rem; }
.blb__img { margin: 0; }
.blb__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.blb__s { max-width: 14em; font: 400 clamp(2.4rem, 4.6vw, 4.6rem)/1 var(--serif); letter-spacing: -.026em; text-wrap: balance; color: #f3efe8; }
.blb__s.is-hot { color: var(--accent); }
.blb__l { margin-top: 1.5rem; max-width: 28rem; color: rgba(243, 239, 232, .74); font: 400 1.0625rem/1.55 var(--sans); }
.blb .lw-quote { margin: 0; padding-top: calc(var(--section-padding) * .3); }
.bl__patch { display: grid; gap: 1.25rem; padding-top: 2.25rem; border-top: 1px solid rgba(243, 239, 232, .16); }
.bl__pt { max-width: 36rem; font: 400 clamp(1.2rem, 1.5vw, 1.45rem)/1.4 var(--serif); letter-spacing: -.008em; }
.bl__links { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
@media (width >= 960px) {
  .blb__row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .blb__img { grid-column: 1 / span 4; }
  .blb__t { grid-column: 6 / span 7; padding-bottom: .5rem; }
  .blb__row.is-flip .blb__img { grid-column: 9 / span 4; grid-row: 1; }
  .blb__row.is-flip .blb__t { grid-column: 1 / span 7; grid-row: 1; }
  .blb__row:first-of-type .blb__img { grid-column: 1 / span 5; }
  .blb__row:first-of-type .blb__img img { aspect-ratio: 3 / 2; }
  .bl__patch { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline; }
  .bl__pk { grid-column: 1 / span 3; }
  .bl__pt { grid-column: 4 / span 6; }
  .bl__links { grid-column: 10 / span 3; justify-content: flex-end; }
}

/* Home flow pass (30 September 2026): a shorter belief section, the quote with the client work */
.blb { gap: 4.5rem; padding-block: calc(var(--section-padding) * 1.2) calc(var(--section-padding) * .95); }
.blb__s { font-size: clamp(2.1rem, 3.7vw, 3.7rem); line-height: 1.02; max-width: 15em; }
.blb__l { margin-top: 1.1rem; }
.blb__img img { aspect-ratio: 1 / 1; }
.blb__row:first-of-type .blb__img img { aspect-ratio: 1 / 1; object-position: 38% 50%; }
@media (width >= 960px) {
  .blb__row { align-items: center; }
  .blb__img, .blb__row:first-of-type .blb__img { grid-column: 1 / span 3; }
  .blb__t { grid-column: 5 / span 8; padding-bottom: 0; }
  .blb__row.is-flip .blb__img { grid-column: 10 / span 3; }
  .blb__row.is-flip .blb__t { grid-column: 1 / span 8; }
}
@media (width < 960px) { .blb { gap: 3.5rem; } .blb__img { max-width: 62%; } .blb__row.is-flip .blb__img { margin-left: auto; } }
.lw-work .lw-quote { margin: 1.5rem 0 0; }
.lw-quote blockquote { margin: 0; } .lw-quote blockquote p { text-indent: -.42em; }
.mb-client__logo--ff { height: 46px !important; }

/* Footer: the wordmark at about half the content width, not full bleed (30 September 2026) */
.lw-footer__mark { width: min(100%, 42rem); }

/* Hero logo strip: eight client logos on one row on desktop (30 September 2026) */
@media (width >= 960px) { .proof__rows { grid-template-columns: repeat(8, 6.5rem); } }

/* Client photo with the client's logo on it, as on the home page case tiles (30 September 2026) */
.mb-ex__img--client img:first-child { object-position: 50% 62%; }
.mb-ex__img--client::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 8, 7, .82), rgba(10, 8, 7, .2) 42%, rgba(10, 8, 7, 0) 62%); pointer-events: none; }
.mb-ex__img .mb-ex__logo { position: absolute; inset: auto auto 1.6rem 1.6rem; z-index: 1; width: auto; height: 44px; object-fit: contain; }
.mb-ex__img:hover .mb-ex__logo { transform: none; }
@media (width < 768px) { .mb-ex__img .mb-ex__logo { height: 34px; inset: auto auto 1.1rem 1.1rem; } }

/* Practice page heroes: a quiet credits bar of client logos (30 September 2026) */
.px-proof { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.4rem; margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid rgba(243, 239, 232, .2); }
.px-proof__k { color: rgba(243, 239, 232, .62); font: 400 .875rem/1 var(--sans); letter-spacing: .01em; }
.px-proof ul { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.4rem; }
.px-proof li { display: flex; align-items: center; }
.px-proof img { display: block; height: var(--h, 20px); width: auto; opacity: .82; }
.px-proof .inv { filter: brightness(0) invert(1); }
.px-proof__partner { display: flex; align-items: center; gap: .75rem; margin-left: auto; padding-left: 2.4rem; border-left: 1px solid rgba(243, 239, 232, .2); color: rgba(243, 239, 232, .62); font: 400 .875rem/1.2 var(--sans); }
.px-hero { padding-bottom: calc(var(--section-padding) * .8); }
@media (width < 768px) {
  .px-proof { gap: .9rem 1.6rem; margin-top: 2.25rem; }
  .px-proof ul { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 1rem 1.5rem; width: 100%; }
  .px-proof img { height: calc(var(--h, 20px) * .85); }
  .px-proof__partner { margin-left: 0; padding-left: 0; border-left: 0; }
}
.px-hero + .meta-story { padding-top: var(--section-padding); }
/* logos in the band under a dark hero follow the page theme */
.meta-story .mb-logos img { transition: filter .4s ease; }
html[data-theme="dark"] .meta-story .mb-logos img { filter: brightness(0) invert(1); }

/* Results as statements rather than figures (30 September 2026) */
.ex-nums--words dt b { font-size: clamp(1.7rem, 2.3vw, 2.2rem); line-height: 1.05; white-space: normal; letter-spacing: -.015em; }
.ex-nums--words dt span { max-width: 20rem; color: var(--color-mid); }
.mb-ex__figs--words .mb-ex__v { font-size: clamp(1.8rem, 2.3vw, 2.2rem); }
@media (width >= 960px) { .ex-hero .fb-head__title { font-size: clamp(2.6rem, 3.5vw, 3.5rem); line-height: 1; max-width: 13em; } }