@charset "UTF-8";

/*
 * The interior system (inc/interior.php, parts/interior/, page.php): the hero, the copy
 * as chapters, the proof, the structure modules as orb cards, the contact stage, and the
 * furniture around them. Everything sits on the homepage sheet (sections, grid, eyebrow,
 * statement, orb cards, results, steps, scan) so the pages read as one hand.
 */

.site-main--interior {
  padding: 0;
}

.site-main--interior > section + section,
.site-main--interior .page-flow > section + section {
  margin-block-start: 0;
}

/* Hero --------------------------------------------------------------------- */

/* The band's language: the still fills the right of a dark stage and fades into it, the
   copy sits on the left, the result is a quiet strip under the pills. */
.ihero {
  --bh-white: #f7f5fb;
  --bh-muted: #b9b1c4;
  --bh-line: rgb(255 255 255 / 14%);
  --ihero-base: #120b1d;
  --ihero-accent: #18d9ff;
  position: relative;
  display: grid;
  align-items: center;
  min-block-size: min(86vh, 58rem);
  padding: calc(var(--bh-header-height) + var(--bh-space-md)) var(--bh-gutter) calc(var(--bh-space-lg) + 2rem);
  overflow: hidden;
  color: var(--bh-white);
  background: #05030a;
}

.ihero__media {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ihero__still {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 64%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 44%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 44%);
}

.ihero__loop {
  opacity: 0;
  transition: opacity 1.4s var(--bh-ease-out, ease);
}

.ihero__loop.is-playing {
  opacity: 1;
}

.ihero__media > img.ihero__still {
  transition: opacity 1.4s var(--bh-ease-out, ease);
}

.ihero__media.has-loop > img.ihero__still {
  opacity: 0;
}

@media (max-width: 63.99rem), (prefers-reduced-motion: reduce) {
  .ihero__loop {
    display: none;
  }
}

.ihero__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(5 3 10 / 70%), transparent 28%, transparent 68%, rgb(5 3 10 / 72%));
  content: "";
}

.ihero__field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ihero__glow {
  position: absolute;
  inset-block-start: -30%;
  inset-inline-start: -10%;
  width: min(60vw, 52rem);
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ihero-accent) 10%, transparent), transparent 55%);
}

.ihero__bubble {
  position: absolute;
  display: block;
  height: auto;
  will-change: transform;
}

.ihero__bubble--far {
  inset-inline-start: -8%;
  inset-block-end: -34%;
  width: clamp(18rem, 40vw, 38rem);
  opacity: 0.45;
  animation: ihero-drift 22s ease-in-out infinite alternate;
}

@keyframes ihero-drift {
  from {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  to {
    transform: translate3d(2.5%, -4%, 0) rotate(4deg);
  }
}

.ihero__grid {
  position: relative;
  z-index: 1;
  align-items: center;
}

.ihero__copy {
  grid-column: 1 / span 6;
}

.ihero__crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 clamp(1.1rem, 2vw, 1.6rem);
  color: var(--bh-muted);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

.ihero__crumbs a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--bh-ease-out);
}

.ihero__crumbs a:hover,
.ihero__crumbs a:focus-visible {
  color: var(--ihero-accent);
}

.ihero__crumb-sep {
  opacity: 0.5;
}

.ihero__title {
  max-width: 12em;
  margin: 0;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-hero);
  font-weight: var(--bh-weight-display);
  line-height: var(--bh-leading-display);
  letter-spacing: var(--bh-tracking-display);
  text-wrap: balance;
}

/* Long titles step down so the hero never runs past a viewport. */
.ihero__title--long {
  max-width: 12em;
  font-size: var(--bh-step-statement);
}

.ihero__title--xlong {
  max-width: 14em;
  font-size: var(--bh-step-title);
  line-height: var(--bh-leading-tight);
  letter-spacing: var(--bh-tracking-heading);
}

.ihero__lede {
  max-width: 34em;
  margin: clamp(1.1rem, 2vw, 1.6rem) 0 0;
  color: color-mix(in srgb, var(--bh-white) 80%, transparent);
}

.ihero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: clamp(1.25rem, 2.2vw, 1.8rem) 0 0;
  padding: 0;
  list-style: none;
  color: var(--ihero-accent);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

.ihero__meta li {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
}

.ihero__meta li + li::before {
  opacity: 0.45;
  content: "/";
}

.ihero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
}

/* The result strip: the topic's proof as a hairline row under the pills. */
.ihero__result {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "discipline discipline go" "figure label go";
  align-items: center;
  column-gap: clamp(1rem, 2vw, 1.5rem);
  row-gap: 0.35rem;
  max-width: 34rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--bh-line);
  color: var(--bh-white);
  text-decoration: none;
}

.ihero__result-discipline {
  grid-area: discipline;
  color: var(--ihero-accent);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

.ihero__result-figure {
  grid-area: figure;
  display: inline-flex;
  align-items: baseline;
  gap: 0.1em 0.35em;
  font-family: var(--bh-font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.3rem);
  font-weight: var(--bh-weight-heading);
  line-height: 1;
  letter-spacing: -0.03em;
}

.ihero__result-figure--text {
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
}

.ihero__result-from {
  color: color-mix(in srgb, var(--bh-white) 86%, transparent);
}

.ihero__result-arrow {
  display: inline-flex;
  align-self: center;
  width: 0.55em;
  color: var(--ihero-accent);
}

.ihero__result-label {
  grid-area: label;
  color: var(--bh-muted);
  font-size: var(--bh-step-small);
  line-height: var(--bh-leading-snug);
}

.ihero__result-go {
  grid-area: go;
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--ihero-accent);
  border-radius: 50%;
  color: var(--ihero-accent);
  transition: background-color 0.3s var(--bh-ease-out), color 0.3s var(--bh-ease-out), transform 0.4s var(--bh-ease-glide);
}

.ihero__result-go svg,
.ihero__result-arrow svg {
  width: 45%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ihero__result-arrow svg {
  width: 100%;
}

.ihero__result:hover .ihero__result-go,
.ihero__result:focus-visible .ihero__result-go {
  background: var(--ihero-accent);
  color: #05030a;
  transform: translateX(0.2rem);
}

.ihero__rail {
  position: absolute;
  z-index: 1;
  inset: auto var(--bh-gutter) 1.5rem;
  height: var(--bh-cross);
  pointer-events: none;
}

.ihero__rail .cross {
  position: absolute;
  inset-block-start: 0;
}

.ihero__rail .cross:nth-child(1) { inset-inline-start: 0; }
.ihero__rail .cross:nth-child(2) { inset-inline-start: calc(33.333% - var(--bh-cross) / 2); }
.ihero__rail .cross:nth-child(3) { inset-inline-start: calc(66.666% - var(--bh-cross) / 2); }
.ihero__rail .cross:nth-child(4) { inset-inline-start: calc(100% - var(--bh-cross)); }

.ihero__rail-label {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline: 1rem;
  background: #05030a;
  color: var(--bh-muted);
  font-size: var(--bh-step-micro);
  letter-spacing: var(--bh-tracking-wide);
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}

.ihero__rail-label svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: ihero-nudge 2.4s var(--bh-ease-out) infinite;
}

@keyframes ihero-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(0.2rem); }
}

/* Chapters ----------------------------------------------------------------- */

.chapters .bh-grid {
  row-gap: var(--bh-space-xl);
}

.chapters__intro {
  grid-column: 1 / span 9;
}

.chapters__statement {
  max-width: 17em;
}

.chapters__lede {
  max-width: 62ch;
  margin-block-start: var(--bh-space-md);
  color: var(--bh-muted);
  font-size: var(--bh-step-body-lg);
  line-height: var(--bh-leading-body);
}

.chapters__lede > :first-child {
  margin-block-start: 0;
}

.chapters__brands {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 3rem;
  padding-block-start: var(--bh-space-md);
  border-block-start: 1px solid var(--bh-line);
}

.chapters__brands-label {
  margin: 0;
  color: var(--bh-muted);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

.chapters__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The old counters, as odometers in a row. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--bh-grid-gap);
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}

.stat-row__item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 1.25rem 0 0;
  border-block-start: 1px solid var(--bh-line);
}

.stat-row__value {
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-figure);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--bh-cyan);
}

.stat-row__label {
  color: var(--bh-muted);
  font-size: var(--bh-step-small);
  line-height: var(--bh-leading-snug);
}

.chapters__badges li {
  display: block;
}

.chapters__badges img {
  display: block;
  width: auto;
  height: 3.6rem;
  border-radius: var(--bh-radius-xs);
}

.chapters__list {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--bh-space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chapter {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--bh-grid-gap);
  row-gap: var(--bh-space-md);
  padding-block-start: var(--bh-space-lg);
  border-block-start: 1px solid var(--bh-line);
}

.chapter__head {
  grid-column: 1 / span 4;
  position: sticky;
  inset-block-start: calc(var(--bh-header-height) + 1rem);
  align-self: start;
}

.chapter__index {
  display: block;
  margin-block-end: 0.9rem;
  color: var(--bh-cyan);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
}

.chapter__title {
  max-width: 12em;
  margin: 0;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h2);
  font-weight: var(--bh-weight-heading);
  line-height: var(--bh-leading-tight);
  letter-spacing: var(--bh-tracking-heading);
  text-wrap: balance;
}

.chapter__body {
  grid-column: 6 / span 7;
}

.chapter__prose {
  max-width: 64ch;
}

.chapter__prose > :first-child,
.step__copy > :first-child {
  margin-block-start: 0;
}

/* The chapter's opening paragraph, at a size between the heading and the body, so a run of
   paragraphs has a way in instead of starting flat. It carries its own size rather than
   --bh-step-h4: at desktop widths that token resolves to the same value as the body text,
   which is why a lede set from it was indistinguishable from the paragraph under it. */
.chapter__prose .chapter__lede {
  margin-block-end: 1.25em;
  color: var(--bh-white);
  font-size: clamp(1.2rem, 1.6vw, 1.6rem);
  font-weight: var(--bh-weight-statement);
  line-height: var(--bh-leading-snug);
  letter-spacing: var(--bh-tracking-heading);
}

.chapter__prose h3 {
  margin-block-start: 1.6em;
  font-size: var(--bh-step-h3);
}

.chapter__prose h4,
.chapter__prose h5 {
  font-size: var(--bh-step-h4);
}

.chapter__prose p,
.chapter__prose li {
  font-size: var(--bh-step-body-lg);
  line-height: var(--bh-leading-body);
}

.chapter__prose li {
  font-size: var(--bh-step-body);
}

.chapter__cta-row {
  margin: 1.5rem 0 0;
}

.prose .chapter__cta {
  text-decoration: none;
}

.chapter__figure {
  margin: 2rem 0;
  padding: 0;
  overflow: hidden;
}

.chapter__figure img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: inherit;
}

.chapter__figure figcaption {
  padding: 0.75rem 1rem;
}

.chapter__figure--still {
  margin-block-start: 2.5rem;
}

.chapter__figure--still img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.media-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--bh-grid-gap);
  margin: 2rem 0;
}

.media-row__item {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: clamp(1rem, 2vw, 1.5rem);
}

.media-row__item img {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  object-fit: contain;
}

.chapter__steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bh-grid-gap);
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.chapter__step .step__copy p {
  margin: 0 0 0.75em;
}

.chapter__faq {
  grid-column: auto;
}

.faq__num {
  margin-inline-end: 1rem;
  color: var(--bh-cyan);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
}

.faq__answer.prose p:last-child {
  margin-block-end: 0;
}

.faq__answer h4 {
  margin: 1em 0 0.3em;
  font-size: var(--bh-step-body);
}

.office {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--bh-grid-gap);
}

.office__card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-block-size: 17rem;
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
}

.office__address {
  max-width: 12em;
  margin: auto 0 0;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h3);
  font-weight: var(--bh-weight-heading);
  line-height: var(--bh-leading-tight);
  letter-spacing: var(--bh-tracking-heading);
}

.office__phone {
  width: fit-content;
  color: var(--bh-white);
  font-size: var(--bh-step-body-lg);
  text-decoration: none;
  border-block-end: 1px solid var(--bh-cyan);
}

.office__hq {
  margin: auto 0 0;
  padding-block-start: 1rem;
  color: var(--bh-muted);
  font-size: var(--bh-step-micro);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

.office__map {
  overflow: hidden;
  padding: 0;
}

.office__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 17rem;
  border: 0;
  filter: grayscale(1) contrast(0.95);
}

/* Structure modules as set pieces ------------------------------------------ */

.cluster .bh-grid {
  row-gap: var(--bh-space-lg);
}

.cluster__head {
  grid-column: 1 / span 8;
}

.cluster__head .lede {
  max-width: 60ch;
  margin-block-start: clamp(1rem, 2vw, 1.5rem);
}

.cluster__body {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--bh-space-md);
}

.cluster__group {
  margin: var(--bh-space-md) 0 0;
}

.cluster__body > .cluster__group:first-child {
  margin-block-start: 0;
}

.hub-grid {
  display: grid;
  /* auto-fit: two or three cards share the row; a full grid keeps its columns. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--bh-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hub-grid .cap {
  min-block-size: 15rem;
  padding: clamp(1.25rem, 2vw, 1.9rem);
}

.hub-grid .cap__title {
  max-width: none;
  font-size: var(--bh-step-h4);
}

.hub-grid .cap__copy {
  font-size: var(--bh-step-small);
}

.hub-grid .orb-card__bubble {
  --turn: 24deg;
  inset-inline-end: -20%;
  inset-block-start: -52%;
  width: 62%;
}

.places {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.places--columns {
  display: flex;
  gap: 0.6rem;
}

.places a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.6rem;
  padding: 0 1.1rem;
  border: 1px solid var(--bh-line);
  border-radius: 999px;
  color: var(--bh-white);
  font-size: var(--bh-step-small);
  font-weight: var(--bh-weight-statement);
  text-decoration: none;
  transition: border-color 0.3s var(--bh-ease-out), color 0.3s var(--bh-ease-out), translate 0.4s var(--bh-ease-glide);
}

.places a:hover,
.places a:focus-visible {
  border-color: var(--bh-cyan);
  color: var(--bh-cyan);
  translate: 0 -2px;
}

.places--wide {
  gap: 1rem 2rem;
  margin-block-start: 0.25rem;
}

.places--wide a {
  min-block-size: 0;
  padding: 0 0 0.35rem;
  border: 0;
  border-block-end: 1px solid var(--bh-cyan);
  border-radius: 0;
  font-family: var(--bh-font-mono);
  font-size: var(--bh-step-label);
  font-weight: var(--bh-weight-label);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

.places--wide a:hover,
.places--wide a:focus-visible {
  translate: 0;
}

.place-table {
  border-block-start: 1px solid var(--bh-line);
}

.place-table__row {
  grid-template-columns: minmax(10rem, 1fr) 2fr;
  align-items: center;
  padding: 0.9rem 0;
}

.place-table__name {
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h4);
  font-weight: var(--bh-weight-heading);
  letter-spacing: var(--bh-tracking-heading);
}

.place-table__links {
  gap: 0.5rem;
}

.place-table__links a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.2rem;
  padding: 0 0.9rem;
  border: 1px solid var(--bh-line);
  border-radius: 999px;
  color: var(--bh-white);
  transition: border-color 0.3s var(--bh-ease-out), color 0.3s var(--bh-ease-out);
}

.place-table__links a:hover,
.place-table__links a:focus-visible {
  border-color: var(--bh-cyan);
  color: var(--bh-cyan);
}

.related .bh-grid {
  row-gap: var(--bh-space-lg);
}

.related__head {
  grid-column: 1 / -1;
}

.related .post-grid {
  grid-column: 1 / -1;
}

.quote-grid.cluster__body {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.faq .faq__list {
  grid-column: 1 / span 9;
}

/* Contact stage ------------------------------------------------------------ */

.contact-stage__intro {
  grid-column: 1 / span 5;
  align-self: center;
}

.contact-stage__panel {
  grid-column: 6 / span 7;
  align-self: start;
  transform-origin: 50% 100%;
}

/* The proof lines: three things the site already says, each behind a ringed icon. */
.contact-proof {
  display: grid;
  gap: 1rem;
  margin: var(--bh-space-lg) 0 0;
  padding: 0;
  list-style: none;
}

.contact-proof li {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--bh-step-body-lg);
  line-height: var(--bh-leading-snug);
}

.contact-proof__icon,
.contact-way__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 1px solid color-mix(in srgb, var(--bh-cyan) 45%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--bh-cyan) 6%, transparent);
  color: var(--bh-cyan);
}

.contact-proof__icon svg,
.contact-way__icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

/* The ways to reach us, under a rule: a call, an email, the office. */
.contact-ways {
  display: grid;
  gap: 1rem;
  margin: var(--bh-space-lg) 0 0;
  padding-block-start: var(--bh-space-md);
  border-block-start: 1px solid var(--bh-line);
}

.contact-way {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--bh-white);
  font-size: var(--bh-step-body-lg);
  text-decoration: none;
}

.contact-way__icon {
  border-color: var(--bh-line);
  border-radius: var(--bh-radius-sm);
  background: color-mix(in srgb, var(--bh-white) 3%, transparent);
  color: var(--bh-white);
  transition: border-color 0.3s var(--bh-ease-out), color 0.3s var(--bh-ease-out);
}

.contact-way__text {
  padding-block-end: 0.3rem;
  background: linear-gradient(90deg, var(--bh-cyan), var(--bh-magenta)) 0 100% / 100% 1px no-repeat;
}

.contact-way__lead {
  color: var(--bh-muted);
}

.contact-way__arrow {
  display: flex;
  width: 1.1rem;
  height: 1.1rem;
  transition: translate 0.4s var(--bh-ease-glide);
}

.contact-way__arrow svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.contact-way:hover .contact-way__icon,
.contact-way:focus-visible .contact-way__icon {
  border-color: var(--bh-cyan);
  color: var(--bh-cyan);
}

.contact-way:hover .contact-way__arrow,
.contact-way:focus-visible .contact-way__arrow {
  translate: 4px 0;
}

.contact-ways__office {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  color: var(--bh-muted);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

/* The studio strip on the About page: two stills from the collection, framed. --- */

.about-studio .bh-grid {
  row-gap: var(--bh-space-lg);
}

.about-studio__head {
  grid-column: 1 / span 8;
}

.about-studio__grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bh-grid-gap);
}

.about-studio__figure {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.about-studio__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.about-studio__figure figcaption {
  padding: 0.7rem 1rem;
  color: var(--bh-muted);
  font-size: var(--bh-step-micro);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

@media (max-width: 63.99rem) {
  .about-studio__head {
    grid-column: 1 / -1;
  }

  .about-studio__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Plain copy (privacy, terms) ---------------------------------------------- */

.prose--plain {
  grid-column: 1 / span 8;
}

/* Narrower ----------------------------------------------------------------- */

@media (max-width: 63.99rem) {
  .ihero {
    min-block-size: 0;
  }

  .ihero__copy,
  .chapters__intro,
  .chapter__head,
  .chapter__body,
  .cluster__head,
  .contact-stage__intro,
  .contact-stage__panel,
  .prose--plain,
  .faq .faq__list {
    grid-column: 1 / -1;
  }

  .ihero__media {
    position: relative;
    height: 58vw;
    max-height: 26rem;
    margin: 0 calc(-1 * var(--bh-gutter));
  }

  .ihero__still {
    inset: 0;
    width: 100%;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
    mask-image: linear-gradient(180deg, #000 55%, transparent);
  }

  .ihero__media::after {
    display: none;
  }

  .ihero__grid {
    margin-block-start: -2.5rem;
  }

  .ihero__result {
    max-width: none;
  }

  .chapter {
    row-gap: var(--bh-space-md);
  }

  .chapter__head {
    position: static;
  }

  .chapter__steps,
  .office {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 47.99rem) {
  .ihero__rail {
    display: none;
  }

  .ihero__bubble--far {
    width: 22rem;
    inset-block-end: -20%;
  }

  .chapters__badges {
    gap: 0.45rem;
  }

  .chapters__badges img {
    height: 2.55rem;
  }

  .place-table__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }
}

/* Reduced motion ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .ihero__bubble,
  .ihero__rail-label svg {
    animation: none;
  }
}

/* The studio reel on the About page (page-about-us.php): a real player in the frame. */

.about-studio__figure video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #05030a;
  object-fit: cover;
}
/* Recent work: three screens on the web design page. The desktop capture (3:5) travels
   down the page on hover inside a 16:10 window, and the phone view sits over the corner.
   The frame is the site's own, given a solid dark bezel so it reads as a screen on the
   light stretch. ------------------------------------------------------------------ */

.work-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bh-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.work-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.work-card__screens {
  position: relative;
  display: block;
  padding-inline-end: 12%;
  padding-block-end: 14%;
}

.work-card__desktop {
  display: block;
  border-color: rgb(255 255 255 / 12%);
  background: #0b0712;
  box-shadow: 0 2rem 3rem -2rem rgb(11 7 18 / 45%);
}

.work-card__desktop .frame__bar {
  display: block;
  height: 2.2rem;
  border-color: rgb(255 255 255 / 12%);
  background: #0b0712;
}

.work-card__desktop .frame__bar .cross,
.work-card__desktop .frame__bar-label {
  color: rgb(255 255 255 / 55%);
}

.work-card__desktop .frame__bar-label {
  font-size: var(--bh-step-micro);
}

/* A long domain needs the bar: only the corner crosses stay. */
.work-card__desktop .frame__bar .cross:nth-child(2),
.work-card__desktop .frame__bar .cross:nth-child(4) {
  display: none;
}

.work-card__window {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.work-card__window img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 7s linear;
}

.work-card__phone {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  display: block;
  width: 30%;
  padding: 4px;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: var(--bh-radius-card);
  background: #0b0712;
  box-shadow: 0 1.6rem 2.4rem -1.4rem rgb(11 7 18 / 60%);
  overflow: hidden;
  transition: translate 0.6s var(--bh-ease-glide);
}

.work-card__phone img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 844;
  border-radius: var(--bh-radius-sm);
  object-fit: cover;
  object-position: top;
}

.work-card__meta {
  display: block;
  margin: 1.4rem 0 0.5rem;
  color: var(--bh-muted);
  font-size: var(--bh-step-micro);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

.work-card__title {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h3);
  font-weight: var(--bh-weight-heading);
  letter-spacing: var(--bh-tracking-heading);
  line-height: var(--bh-leading-tight);
}

.work-card__arrow {
  display: inline-flex;
  flex: none;
  width: 0.8em;
  height: 0.8em;
  color: var(--bh-cyan);
  opacity: 0;
  transform: translateX(-0.4em);
  transition: opacity 0.4s var(--bh-ease-out), transform 0.5s var(--bh-ease-out);
}

.work-card__arrow svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.work-card__copy {
  display: block;
  margin: 0.6rem 0 0;
  color: var(--bh-muted);
  font-size: var(--bh-step-body);
  line-height: var(--bh-leading-body);
}

@media (hover: hover) {
  .work-card__link:hover .work-card__phone,
  .work-card__link:focus-visible .work-card__phone {
    translate: 0 -6px;
  }

  .work-card__link:hover .work-card__arrow,
  .work-card__link:focus-visible .work-card__arrow {
    opacity: 1;
    transform: translateX(0);
  }
}

/* The page travels: a 3:5 image in a 16:10 window has 62.5% of its height out of view. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .work-card__link:hover .work-card__window img,
  .work-card__link:focus-visible .work-card__window img {
    transform: translateY(-62.5%);
  }
}

@media (max-width: 63.99rem) {
  .work-cards {
    grid-template-columns: 1fr;
    gap: var(--bh-space-lg);
  }
}
/* A chapter of short titled blocks (a service list, a set of benefits) as a grid of cards
   rather than a run of small headings; the lead paragraph stays above. --------------- */

.chapter__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--bh-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cards that carry a paragraph each read in two columns, not four narrow ones. */
.chapter__cards--long {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

.chapter__prose + .chapter__cards {
  margin-block-start: 1.75rem;
}

.chapter-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius);
  background: color-mix(in srgb, var(--bh-white) 3%, transparent);
  transition: border-color 0.35s var(--bh-ease-out), translate 0.5s var(--bh-ease-glide), background-color 0.35s var(--bh-ease-out);
}

.chapter-card:hover {
  border-color: color-mix(in srgb, var(--bh-cyan) 55%, transparent);
  background: color-mix(in srgb, var(--bh-cyan) 5%, transparent);
  translate: 0 -3px;
}

.chapter-card__index {
  color: var(--bh-cyan);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
}

.chapter-card__title {
  margin: 0;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h4);
  font-weight: var(--bh-weight-heading);
  letter-spacing: var(--bh-tracking-heading);
  line-height: var(--bh-leading-snug);
  text-wrap: balance;
}

.chapter-card__copy {
  margin: 0;
  color: var(--bh-muted);
  font-size: var(--bh-step-body);
  line-height: var(--bh-leading-body);
}

.chapter-card__copy p {
  margin: 0;
}

.chapter-card__copy p + p {
  margin-block-start: 0.6em;
}

.chapter--cards .chapter__body {
  grid-column: 6 / span 7;
}

@media (max-width: 63.99rem) {
  .chapter__cards {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  }

  .chapter--cards .chapter__body {
    grid-column: 1 / -1;
  }
}
/* The service story: a tall section whose stage sticks while the scene plays (story.js
   draws the astronaut and the bubbles on the canvas and moves the stages along). Until
   the script takes over, and wherever it cannot run, the section is static: the still
   behind the three stages in a row. ------------------------------------------------ */

.story {
  --bh-white: #f7f5fb;
  --bh-muted: #b9b1c4;
  --bh-line: rgb(255 255 255 / 14%);
  --bh-cyan: #18d9ff;
  --bh-magenta: #ff2bbd;
  position: relative;
  background: #05030a;
  color: var(--bh-white);
}

.story.is-live {
  min-block-size: 340vh;
}

.story__sticky {
  position: relative;
  overflow: hidden;
}

.story.is-live .story__sticky {
  position: sticky;
  inset-block-start: 0;
  height: 100vh;
  height: 100svh;
}

.story__canvas {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
}

.story.is-live .story__canvas {
  display: block;
}

.story__fallback {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0.32;
  pointer-events: none;
}

.story__fallback img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story.is-live .story__fallback {
  display: none;
}

.story__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(48% 56% at 68% 46%, rgb(24 217 255 / 5%), transparent 70%),
    radial-gradient(40% 50% at 22% 62%, rgb(255 43 189 / 5%), transparent 70%);
  pointer-events: none;
}

.story__frame {
  position: relative;
  width: min(100%, var(--bh-container));
  min-block-size: inherit;
  margin-inline: auto;
  padding: calc(var(--bh-header-height) + var(--bh-space-lg)) var(--bh-gutter) var(--bh-space-lg);
}

.story.is-live .story__frame {
  height: 100%;
  padding-block-end: 0;
}

.story__eyebrow {
  margin-block-end: var(--bh-space-lg);
}

/* Static: the stages in a row. Live: the stages stacked in one place, the active one shown. */
.story__stages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--bh-space-lg) var(--bh-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.story.is-live .story__stages {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--bh-gutter);
  display: block;
  width: min(100% - 2 * var(--bh-gutter), 28rem);
  translate: 0 -50%;
}

.story.is-live .story__stage {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  translate: 0 calc(-50% + 1.4rem);
  opacity: 0;
  transition: opacity 0.7s var(--bh-ease-out), translate 0.9s var(--bh-ease-glide);
  pointer-events: none;
}

.story.is-live .story__stage.is-active {
  translate: 0 -50%;
  opacity: 1;
  pointer-events: auto;
}

.story__kicker {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin: 0 0 1rem;
  color: var(--bh-cyan);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

.story__index {
  color: color-mix(in srgb, var(--bh-white) 55%, transparent);
}

.story__title {
  margin: 0 0 1rem;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-title);
  font-weight: var(--bh-weight-heading);
  letter-spacing: var(--bh-tracking-heading);
  line-height: var(--bh-leading-tight);
  text-wrap: balance;
}

.story__copy {
  max-width: 28rem;
  margin: 0;
  color: color-mix(in srgb, var(--bh-white) 78%, transparent);
  font-size: var(--bh-step-body-lg);
  line-height: var(--bh-leading-body);
}

.story__caption,
.story__dots {
  display: none;
}

.story.is-live .story__caption {
  position: absolute;
  inset-block-end: 2rem;
  inset-inline-start: var(--bh-gutter);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  color: color-mix(in srgb, var(--bh-white) 55%, transparent);
  font-size: var(--bh-step-micro);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
  transition: opacity 0.5s var(--bh-ease-out);
}

.story.is-live .story__caption .cross {
  position: static;
  color: color-mix(in srgb, var(--bh-white) 45%, transparent);
}

.story.is-live .story__caption.is-done {
  opacity: 0;
}

.story.is-live .story__dots {
  position: absolute;
  inset-block-end: 2.2rem;
  inset-inline-end: var(--bh-gutter);
  display: flex;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.story__dots li {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bh-white) 28%, transparent);
  transition: background-color 0.4s var(--bh-ease-out), scale 0.4s var(--bh-ease-glide);
}

.story__dots li.is-active {
  background: var(--bh-cyan);
  scale: 1.35;
  box-shadow: 0 0 8px var(--bh-cyan);
}

@media (max-width: 63.99rem) {
  .story.is-live .story__stages {
    inset-block-start: auto;
    inset-block-end: 5.5rem;
    width: calc(100% - 2 * var(--bh-gutter));
    translate: none;
  }

  .story.is-live .story__stage {
    inset-block-start: auto;
    inset-block-end: 0;
    translate: 0 1rem;
  }

  .story.is-live .story__stage.is-active {
    translate: 0 0;
  }

  .story__title {
    font-size: var(--bh-step-h2);
  }
}

/* The pitch: the service's promise on one screen, opening the light stretch on the pages
   that carry one (inc/pitch.php, parts/interior/pitch.php). The copy and its action on
   the left, the artwork floating on the right, the three commitments in a row on the
   hairline beneath. The artwork drifts on its own and, like the large headings, rides a
   little deeper than the page on scroll. ---------------------------------------------- */

.pitch {
  --pitch-accent: #6b2fb8;
  padding-block-end: var(--bh-space-xl);
  overflow: clip;
}

.pitch__grid {
  align-items: center;
  row-gap: var(--bh-space-xl);
}

.pitch__copy {
  grid-column: 1 / span 6;
}

.pitch__title {
  max-width: 10.5em;
}

.pitch__accent {
  color: var(--pitch-accent);
}

.pitch__lede {
  max-width: 30rem;
  margin: clamp(1.4rem, 2.6vw, 2.2rem) 0 0;
  color: var(--bh-white);
  font-size: var(--bh-step-body-lg);
  font-weight: var(--bh-weight-statement);
  line-height: var(--bh-leading-body);
  text-wrap: pretty;
}

.pitch__text {
  max-width: 32rem;
  margin: 1rem 0 0;
  color: var(--bh-muted);
  font-size: var(--bh-step-body-lg);
  line-height: var(--bh-leading-body);
  text-wrap: pretty;
}

.pitch__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-block-start: clamp(1.8rem, 3.2vw, 2.6rem);
}

.pitch__art {
  grid-column: 7 / span 6;
  position: relative;
  margin: 0;
}

.pitch__image {
  display: block;
  width: 116%;
  max-width: none;
  height: auto;
  margin-inline: -4% -8%;
  animation: pitch-float 14s ease-in-out infinite alternate;
}

/* Without the intro (the pitch has taken its place) the chapters follow straight on. */
.chapters--continues {
  padding-block-start: var(--bh-space-lg);
}

@keyframes pitch-float {
  from {
    translate: 0 0.6%;
    rotate: -0.5deg;
  }

  to {
    translate: 1.2% -1.8%;
    rotate: 0.6deg;
  }
}

.pitch__points {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bh-space-md) var(--bh-grid-gap);
  margin: 0;
  padding: var(--bh-space-lg) 0 0;
  border-block-start: 1px solid var(--bh-line);
  list-style: none;
}

.pitch__point {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding-inline-start: var(--bh-grid-gap);
  border-inline-start: 1px solid var(--bh-line);
}

.pitch__point:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.pitch__icon {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--pitch-accent);
}

.pitch__icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.4;
}

.pitch__point-title {
  margin: 0 0 0.3rem;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-body-lg);
  font-weight: var(--bh-weight-heading);
  letter-spacing: var(--bh-tracking-heading);
  line-height: var(--bh-leading-snug);
}

.pitch__point-copy {
  margin: 0;
  color: var(--bh-muted);
  font-size: var(--bh-step-body);
  line-height: var(--bh-leading-body);
}

@media (max-width: 63.99rem) {
  .pitch__copy,
  .pitch__art {
    grid-column: 1 / -1;
  }

  .pitch__art {
    width: min(100%, 32rem);
    margin-inline: auto;
  }

  .pitch__image {
    width: 100%;
    margin: 0;
  }

  .pitch__points {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .pitch__point {
    padding: 1.25rem 0;
    border-inline-start: 0;
    border-block-start: 1px solid var(--bh-line);
  }

  .pitch__point:first-child {
    padding-block-start: 0;
    border-block-start: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pitch__image {
    animation: none;
  }
}

/* The devices scene (web design page, parts/interior/pitch-art-devices.php): the client's
   homepage on a laptop and a phone inside the bubble artwork, two small bubbles passing,
   a soft ground beneath. The laptop and the phone each drift on their own cycle and sit
   a few degrees off square, which the perspective on the wrapper turns into depth. ---- */

/* Three lines for this title: the devices need the room the statement size would take. */
.pitch--devices .pitch__title {
  max-width: 12em;
  font-size: clamp(2.2rem, 4.2vw, 4.4rem);
}

.pitch__devices {
  position: relative;
  width: 110%;
  max-width: none;
  aspect-ratio: 1.08;
  margin-inline: -4% -6%;
  perspective: 1600px;
}

.pitch__devices-bubble {
  position: absolute;
  inset-block-start: -2%;
  inset-inline-start: 4%;
  width: 96%;
  pointer-events: none;
  animation: pitch-float 18s ease-in-out infinite alternate;
}

.pitch__devices-bubble img {
  display: block;
  width: 100%;
  height: auto;
}

.pitch__devices-bubble--small {
  width: 12%;
  animation: devices-drift 11s ease-in-out infinite alternate;
}

.pitch__devices-bubble--a {
  inset-block-start: 4%;
  inset-inline-start: -2%;
}

.pitch__devices-bubble--b {
  inset-block-start: auto;
  inset-block-end: 12%;
  inset-inline-start: 6%;
  width: 8%;
  animation-duration: 14s;
  animation-delay: -6s;
}

/* The laptop: a light bezel with the window dots, the screen inside. */
.pitch__laptop {
  position: absolute;
  inset-block-start: 15%;
  inset-inline-start: 6%;
  width: 78%;
  padding: 0.55rem 0.55rem 0.7rem;
  border: 1px solid rgb(11 7 18 / 12%);
  border-radius: 0.9rem;
  background: linear-gradient(160deg, #fbfaff, #e9e5f3);
  box-shadow:
    0 2.2rem 4rem rgb(11 7 18 / 18%),
    0 0.4rem 1rem rgb(11 7 18 / 8%);
  transform: rotateY(-9deg) rotateX(3deg);
  transform-origin: 50% 50%;
  animation: devices-laptop 16s ease-in-out infinite alternate;
  transform-style: preserve-3d;
}

.pitch__laptop-bar {
  display: flex;
  gap: 0.3rem;
  padding: 0.05rem 0.2rem 0.45rem;
}

.pitch__laptop-bar i {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: rgb(11 7 18 / 22%);
}

.pitch__laptop-screen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.35rem;
  box-shadow: inset 0 0 0 1px rgb(11 7 18 / 10%);
}

/* The phone: an ink frame with a notch, overlapping the laptop's corner. */
.pitch__phone {
  position: absolute;
  inset-block-end: 4%;
  inset-inline-end: 6%;
  width: 26%;
  padding: 0.32rem;
  border-radius: 1.6rem;
  background: #16121f;
  box-shadow:
    0 2rem 3.5rem rgb(11 7 18 / 28%),
    inset 0 0 0 1px rgb(255 255 255 / 12%);
  transform: rotateY(-12deg) rotateX(2deg) rotateZ(1deg);
  animation: devices-phone 13s ease-in-out infinite alternate;
  transform-style: preserve-3d;
}

.pitch__phone-screen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.3rem;
}

.pitch__phone-notch {
  position: absolute;
  inset-block-start: 0.6rem;
  inset-inline-start: 50%;
  z-index: 1;
  width: 32%;
  height: 0.55rem;
  border-radius: 999px;
  background: #16121f;
  translate: -50% 0;
}

/* A soft ground the devices stand on. */
.pitch__devices-ground {
  position: absolute;
  inset-block-end: -4%;
  inset-inline: 8%;
  z-index: -1;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgb(107 47 184 / 16%), rgb(24 217 255 / 6%) 55%, transparent 72%);
  filter: blur(8px);
}

@keyframes devices-laptop {
  from {
    transform: rotateY(-9deg) rotateX(3deg) translateY(0);
  }

  to {
    transform: rotateY(-7deg) rotateX(2deg) translateY(-1.4%);
  }
}

@keyframes devices-phone {
  from {
    transform: rotateY(-12deg) rotateX(2deg) rotateZ(1deg) translateY(0);
  }

  to {
    transform: rotateY(-9deg) rotateX(1deg) rotateZ(0.4deg) translateY(-2.6%);
  }
}

@keyframes devices-drift {
  from {
    translate: 0 0;
  }

  to {
    translate: 6% -14%;
  }
}

.pitch__secondary {
  margin-inline-start: 0.25rem;
}

@media (max-width: 63.99rem) {
  .pitch__art--devices {
    width: 100%;
    max-width: 32rem;
  }

  .pitch__devices {
    width: 100%;
    margin: 0;
  }

  .pitch__laptop {
    inset-inline-start: 2%;
    width: 84%;
  }

  .pitch__phone {
    width: 28%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pitch__devices-bubble,
  .pitch__laptop,
  .pitch__phone {
    animation: none;
  }
}

/* The challenges chapter (inc/pitch.php, parts/interior/challenges.php): the question on
   the left with two bubbles drifting under it, the three problems as numbered rows on
   hairlines to the right, each with what we do about it and an icon. It sits in the
   chapter list in place of an imported chapter, so it keeps the chapter's rule and grid,
   with the head a column wider than the others. ---------------------------------------- */

.chapter--challenges {
  --challenges-accent: #6b2fb8;
}

.chapter--challenges .chapter__head {
  grid-column: 1 / span 5;
}

.chapter--challenges .chapter__body {
  grid-column: 7 / span 6;
}

.challenges__title {
  max-width: 8.5em;
  font-size: var(--bh-step-title);
  line-height: var(--bh-leading-display);
  letter-spacing: var(--bh-tracking-display);
}

.challenges__accent {
  color: var(--challenges-accent);
}

.challenges__lede {
  max-width: 28rem;
  margin: clamp(1.2rem, 2vw, 1.8rem) 0 0;
  color: var(--bh-muted);
  font-size: var(--bh-step-body-lg);
  line-height: var(--bh-leading-body);
  text-wrap: pretty;
}

.challenges__art {
  width: min(100%, 26rem);
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
}

.challenges__art img {
  display: block;
  width: 100%;
  height: auto;
  animation: pitch-float 14s ease-in-out infinite alternate;
}

.challenges__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.challenge {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 3.25rem;
  column-gap: var(--bh-grid-gap);
  align-items: start;
  padding-block: clamp(1.6rem, 3vw, 2.6rem);
  border-block-start: 1px solid var(--bh-line);
}

.challenge__index {
  padding-block-start: 0.55rem;
  color: var(--challenges-accent);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
}

.challenge__title {
  margin: 0 0 0.6rem;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h3);
  font-weight: var(--bh-weight-heading);
  line-height: var(--bh-leading-tight);
  letter-spacing: var(--bh-tracking-heading);
  text-wrap: balance;
}

.challenge__copy {
  max-width: 36rem;
  margin: 0 0 0.9rem;
  color: var(--bh-muted);
  font-size: var(--bh-step-body-lg);
  line-height: var(--bh-leading-body);
  text-wrap: pretty;
}

.challenge__action {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin: 0;
  color: var(--challenges-accent);
  font-size: var(--bh-step-body-lg);
  font-weight: var(--bh-weight-statement);
}

.challenge__arrow {
  display: inline-flex;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-block-start: 0.2em;
}

.challenge__arrow svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.challenge__icon {
  justify-self: end;
  width: 3.25rem;
  height: 3.25rem;
  color: var(--challenges-accent);
}

.challenge__icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.4;
}

@media (max-width: 63.99rem) {
  .chapter--challenges .chapter__head,
  .chapter--challenges .chapter__body {
    grid-column: 1 / -1;
  }

  .challenges__art {
    width: min(100%, 20rem);
  }

  .challenge {
    grid-template-columns: 2.5rem minmax(0, 1fr) 2.75rem;
  }
}

@media (max-width: 47.99rem) {
  .challenge {
    grid-template-columns: 2.25rem minmax(0, 1fr);
  }

  .challenge__icon {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .challenges__art img {
    animation: none;
  }
}

/* The flight of services (parts/interior/flight.php, assets/src/js/flight.js): the
   astronaut flying past a bubble per service. Static (no WebGL, no motion, no script):
   the services as a grid of bubbles with their copy. Live: the section is tall and its
   stage sticks; the bubbles are drawn in the scene and each service's link is placed
   over its bubble by the script; the current service's copy shows in the panel. ------- */

.flight {
  --bh-white: #f7f5fb;
  --bh-muted: #b9b1c4;
  --bh-line: rgb(255 255 255 / 14%);
  --bh-cyan: #18d9ff;
  --bh-magenta: #ff2bbd;
  --flight-label: 15rem;
  position: relative;
  z-index: 1;
  background: #05030a;
  color: var(--bh-white);
}

.flight.is-live {
  min-block-size: 480vh;
}

/* Clipped rather than hidden: a link taking focus must not scroll the stage sideways. */
.flight__sticky {
  position: relative;
  overflow: clip;
}

.flight.is-live .flight__sticky {
  position: sticky;
  inset-block-start: 0;
  height: 100vh;
  height: 100svh;
}

.flight__canvas {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
}

.flight.is-live .flight__canvas {
  display: block;
}

.flight__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 60% at 70% 40%, rgb(24 217 255 / 5%), transparent 70%),
    radial-gradient(40% 50% at 18% 70%, rgb(255 43 189 / 5%), transparent 70%);
  pointer-events: none;
}

.flight__frame {
  position: relative;
  width: min(100%, var(--bh-container));
  min-block-size: inherit;
  margin-inline: auto;
  padding: calc(var(--bh-header-height) + var(--bh-space-lg)) var(--bh-gutter) var(--bh-space-xl);
}

.flight.is-live .flight__frame {
  height: 100%;
  padding-block-end: 0;
}

.flight__head {
  position: relative;
  z-index: 3;
  max-width: 24rem;
}

.flight__eyebrow {
  margin-block-end: 1rem;
}

.flight__title {
  margin: 0 0 0.8rem;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h2);
  font-weight: var(--bh-weight-heading);
  line-height: var(--bh-leading-tight);
  letter-spacing: var(--bh-tracking-heading);
  text-wrap: balance;
}

.flight__hint {
  margin: 0;
  color: color-mix(in srgb, var(--bh-white) 55%, transparent);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

.flight.is-live .flight__hint {
  transition: opacity 0.5s var(--bh-ease-out);
}

/* Static: the grid of services. */
.flight__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--bh-space-lg) var(--bh-grid-gap);
  margin: var(--bh-space-lg) 0 0;
  padding: 0;
  list-style: none;
}

.flight-item__bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: var(--flight-label);
  height: var(--flight-label);
  border-radius: 50%;
  color: var(--bh-white);
  text-align: center;
  text-decoration: none;
}

.flight--static .flight-item__bubble {
  width: 11rem;
  height: 11rem;
  background: var(--flight-film) center / 108% no-repeat;
}

.flight-item__mark {
  display: block;
  width: 32%;
  aspect-ratio: 1;
}

.flight-item__mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.flight-item__mark--icon {
  color: var(--bh-cyan);
}

.flight-item__mark--icon svg {
  fill: none;
  stroke-width: 1.3;
}

.flight-item__name {
  max-width: 78%;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-body-lg);
  font-weight: var(--bh-weight-heading);
  line-height: var(--bh-leading-tight);
  letter-spacing: var(--bh-tracking-heading);
  text-wrap: balance;
}

.flight-item__more {
  color: var(--bh-cyan);
  font-size: var(--bh-step-micro);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
  opacity: 0.6;
  transition: opacity 0.35s var(--bh-ease-out);
}

.flight-item__bubble:hover .flight-item__more,
.flight-item__bubble:focus-visible .flight-item__more,
.flight-item__bubble.is-current .flight-item__more {
  opacity: 1;
}

.flight-item__bubble:focus-visible {
  outline: 2px solid var(--bh-focus);
  outline-offset: 4px;
}

.flight-item__panel {
  margin-block-start: 1.2rem;
}

.flight-item__kicker {
  margin: 0 0 0.7rem;
  color: color-mix(in srgb, var(--bh-white) 55%, transparent);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
}

.flight-item__kicker span {
  color: var(--bh-cyan);
}

.flight-item__title {
  margin: 0 0 0.6rem;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h4);
  font-weight: var(--bh-weight-heading);
  line-height: var(--bh-leading-tight);
  letter-spacing: var(--bh-tracking-heading);
  text-wrap: balance;
}

.flight-item__copy {
  max-width: 30rem;
  margin: 0 0 0.9rem;
  color: color-mix(in srgb, var(--bh-white) 74%, transparent);
  font-size: var(--bh-step-body);
  line-height: var(--bh-leading-body);
  text-wrap: pretty;
}

.flight-item__link,
.flight__end-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--bh-cyan);
  font-family: var(--bh-font-mono);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
  text-decoration: none;
  text-transform: uppercase;
}

.flight-item__arrow {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  transition: transform 0.35s var(--bh-ease-out);
}

.flight-item__arrow svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flight-item__link:hover .flight-item__arrow,
.flight__end-link:hover .flight-item__arrow {
  transform: translateX(0.25em);
}

.flight__caption,
.flight__progress,
.flight__end {
  display: none;
}

/* Live: the links ride their bubbles; the panel holds the current service's copy. */
.flight.is-live .flight__items {
  display: contents;
}

.flight.is-live .flight-item__bubble {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 2;
  opacity: 0;
  transform-origin: center;
  will-change: transform, opacity;
}

.flight.is-live .flight-item__panel {
  position: absolute;
  inset-block-end: 4.6rem;
  inset-inline-start: var(--bh-gutter);
  z-index: 3;
  width: min(100% - 2 * var(--bh-gutter), 26rem);
  margin: 0;
  opacity: 0;
  translate: 0 0.8rem;
  transition: opacity 0.6s var(--bh-ease-out), translate 0.8s var(--bh-ease-glide);
  pointer-events: none;
}

.flight.is-live .flight-item.is-active .flight-item__panel {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

.flight.is-live.is-ending .flight-item.is-active .flight-item__panel {
  opacity: 0;
  translate: 0 0.8rem;
  pointer-events: none;
}

.flight.is-live .flight__caption {
  position: absolute;
  inset-block-end: 2rem;
  inset-inline-start: var(--bh-gutter);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  color: color-mix(in srgb, var(--bh-white) 55%, transparent);
  font-size: var(--bh-step-micro);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
  transition: opacity 0.5s var(--bh-ease-out);
}

.flight.is-live .flight__caption .cross {
  position: static;
  color: color-mix(in srgb, var(--bh-white) 45%, transparent);
}

.flight.is-live .flight__caption.is-done {
  opacity: 0;
}

.flight.is-live .flight__progress {
  position: absolute;
  inset-block-end: 2.4rem;
  inset-inline-end: var(--bh-gutter);
  z-index: 3;
  display: block;
  width: min(30%, 14rem);
  height: 1px;
  background: var(--bh-line);
}

.flight.is-live .flight__progress span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bh-cyan), var(--bh-magenta));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.flight.is-live .flight__end {
  position: absolute;
  inset-block-end: 4.6rem;
  inset-inline-end: var(--bh-gutter);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.8rem;
  width: min(100% - 2 * var(--bh-gutter), 22rem);
  margin: 0;
  text-align: end;
  opacity: 0;
  translate: 0 0.8rem;
  transition: opacity 0.6s var(--bh-ease-out), translate 0.8s var(--bh-ease-glide);
  pointer-events: none;
}

.flight.is-live .flight__end.is-in {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

.flight__end-copy {
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h4);
  font-weight: var(--bh-weight-statement);
  line-height: var(--bh-leading-snug);
  letter-spacing: var(--bh-tracking-heading);
  text-wrap: balance;
}

@media (max-width: 63.99rem) {
  .flight {
    --flight-label: 12rem;
  }

  .flight.is-live .flight__head {
    max-width: none;
  }

  .flight.is-live .flight-item__panel {
    inset-block-end: 4.2rem;
    width: calc(100% - 2 * var(--bh-gutter));
  }

  .flight.is-live .flight-item__copy {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .flight.is-live .flight__end {
    inset-block-end: 4.2rem;
    inset-inline: var(--bh-gutter);
    align-items: flex-start;
    width: auto;
    text-align: start;
  }

  .flight.is-live .flight__progress {
    width: 5rem;
  }
}

@media (max-width: 47.99rem) {
  .flight {
    --flight-label: 10.5rem;
  }

  .flight__title {
    font-size: var(--bh-step-h3);
  }
}

/* The why chapter (inc/pitch.php, parts/interior/why.php): the promise and its action on
   the left, the bubble on the right holding the glass card that puts the client's
   business at the centre of strategy, creative and performance, and the three reasons
   as numbered columns on the hairline beneath. It sits in the chapter list in place of an
   imported chapter, so it keeps the chapter's rule and grid. ---------------------------- */

.chapter--why {
  --why-accent: #6b2fb8;
  align-items: center;
  row-gap: var(--bh-space-xl);
}

.why__copy {
  grid-column: 1 / span 6;
}

.why__title {
  max-width: 9.5em;
  font-size: var(--bh-step-title);
  line-height: var(--bh-leading-display);
  letter-spacing: var(--bh-tracking-display);
}

.why__accent {
  color: var(--why-accent);
}

.why__lede {
  max-width: 30rem;
  margin: clamp(1.2rem, 2vw, 1.8rem) 0 0;
  color: var(--bh-muted);
  font-size: var(--bh-step-body-lg);
  line-height: var(--bh-leading-body);
  text-wrap: pretty;
}

.why__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-block-start: clamp(1.6rem, 3vw, 2.4rem);
}

.why__art {
  grid-column: 7 / span 6;
  position: relative;
  margin: 0;
}

.why__image {
  display: block;
  width: 112%;
  max-width: none;
  height: auto;
  margin-inline: -4% -8%;
  animation: pitch-float 16s ease-in-out infinite alternate;
}

/* The glass card, centred on the bubble (its centre and width come from the artwork's
   geometry, set on the figure). */
.why__card {
  position: absolute;
  inset-block-start: var(--why-cy);
  inset-inline-start: calc(var(--why-cx) * 1.12 - 4%);
  display: flex;
  align-items: center;
  width: calc(var(--why-card) * 1.12);
  padding: 1.4rem 1.1rem 1.2rem;
  border: 1px solid rgb(255 255 255 / 75%);
  border-radius: var(--bh-radius-card);
  background: rgb(255 255 255 / 58%);
  box-shadow: 0 1.2rem 3rem rgb(59 23 109 / 12%), inset 0 0 0 1px rgb(255 255 255 / 30%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  translate: -50% -50%;
}

.why__node {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  color: var(--bh-white);
}

.why__node-icon {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  color: var(--why-accent);
}

.why__node-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.4;
}

.why__node-label {
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-small);
  font-weight: var(--bh-weight-label);
  letter-spacing: var(--bh-tracking-heading);
  line-height: var(--bh-leading-snug);
  white-space: nowrap;
}

/* The client's business sits in the middle, held in its own soft circle. */
.why__node--hub .why__node-icon {
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 70%);
  box-shadow: 0 0.6rem 1.6rem rgb(59 23 109 / 10%);
}

.why__node--hub .why__node-icon svg {
  width: 60%;
  height: 60%;
}

.why__node--hub .why__node-label {
  font-weight: var(--bh-weight-heading);
}

.why__link {
  flex: 1 1 1rem;
  height: 1px;
  min-width: 0.6rem;
  margin-block-end: 1.7rem;
  background: color-mix(in srgb, var(--why-accent) 45%, transparent);
}

.why__points {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bh-space-md) var(--bh-grid-gap);
  margin: 0;
  padding: var(--bh-space-lg) 0 0;
  border-block-start: 1px solid var(--bh-line);
  list-style: none;
}

.why__point {
  padding-inline-start: var(--bh-grid-gap);
  border-inline-start: 1px solid var(--bh-line);
}

.why__point:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.why__point-index {
  display: block;
  margin-block-end: 0.8rem;
  color: var(--why-accent);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
}

.why__point-title {
  margin: 0 0 0.5rem;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h4);
  font-weight: var(--bh-weight-heading);
  line-height: var(--bh-leading-tight);
  letter-spacing: var(--bh-tracking-heading);
  text-wrap: balance;
}

.why__point-copy {
  max-width: 26rem;
  margin: 0;
  color: var(--bh-muted);
  font-size: var(--bh-step-body-lg);
  line-height: var(--bh-leading-body);
  text-wrap: pretty;
}

@media (max-width: 63.99rem) {
  .why__copy,
  .why__art {
    grid-column: 1 / -1;
  }

  .why__art {
    width: min(100%, 30rem);
    margin-inline: auto;
  }

  .why__image {
    width: 100%;
    margin: 0;
  }

  .why__card {
    inset-inline-start: var(--why-cx);
    width: var(--why-card);
    padding: 1rem 0.7rem 0.9rem;
  }

  .why__node-icon {
    width: 2.1rem;
    height: 2.1rem;
  }

  .why__node--hub .why__node-icon {
    width: 3.4rem;
    height: 3.4rem;
  }

  .why__node-label {
    font-size: var(--bh-step-micro);
  }

  .why__link {
    margin-block-end: 1.3rem;
  }

  .why__points {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .why__point {
    padding: 1.25rem 0;
    border-inline-start: 0;
    border-block-start: 1px solid var(--bh-line);
  }

  .why__point:first-child {
    padding-block-start: 0;
    border-block-start: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .why__image {
    animation: none;
  }
}

/* The search card inside the pitch's bubble (parts/interior/pitch-card-search.php): the
   query line and three results, the client's business first. Placed from the artwork's
   geometry set on the scene (--art-cx, --art-cy, --art-card), allowing for the image's
   overhang. --------------------------------------------------------------------------- */

.pitch__card {
  position: absolute;
  inset-block-start: var(--art-cy);
  inset-inline-start: calc(var(--art-cx) * 1.22 - 6%);
  width: calc(var(--art-card) * 1.22);
  padding: 1.1rem 1.1rem 1rem;
  border: 1px solid rgb(255 255 255 / 75%);
  border-radius: var(--bh-radius-card);
  background: rgb(255 255 255 / 60%);
  box-shadow: 0 1.2rem 3rem rgb(59 23 109 / 12%), inset 0 0 0 1px rgb(255 255 255 / 30%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  translate: -50% -50%;
}

.pitch__search {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1rem;
  border: 1px solid rgb(11 7 18 / 10%);
  border-radius: 999px;
  background: rgb(255 255 255 / 85%);
  color: var(--bh-white);
  font-size: var(--bh-step-small);
}

.pitch__search-icon {
  display: inline-flex;
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--pitch-accent);
}

.pitch__search-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.8;
}

.pitch__search-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pitch__results {
  display: grid;
  gap: 0.75rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.pitch__result {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.pitch__result-rank {
  flex: none;
  width: 1.5rem;
  color: var(--bh-muted);
  font-size: var(--bh-step-micro);
  text-align: center;
}

.pitch__result-lines {
  display: grid;
  flex: 1;
  gap: 0.35rem;
}

.pitch__result-title {
  color: var(--bh-white);
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-small);
  font-weight: var(--bh-weight-heading);
  line-height: var(--bh-leading-tight);
}

.pitch__result-bar {
  display: block;
  width: 78%;
  height: 0.38rem;
  border-radius: 999px;
  background: rgb(11 7 18 / 12%);
}

.pitch__result-bar--title {
  width: 52%;
  height: 0.5rem;
}

.pitch__result-bar--short {
  width: 46%;
}

.pitch__result--you .pitch__result-rank {
  color: var(--pitch-accent);
  font-weight: var(--bh-weight-heading);
}

.pitch__result--you .pitch__result-bar {
  background: linear-gradient(90deg, var(--pitch-accent), color-mix(in srgb, var(--pitch-accent) 40%, #18d9ff));
}

@media (max-width: 63.99rem) {
  .pitch__card {
    inset-inline-start: var(--art-cx);
    width: var(--art-card);
    padding: 0.8rem 0.8rem 0.7rem;
  }

  .pitch__search {
    padding: 0.5rem 0.8rem;
    font-size: var(--bh-step-micro);
  }

  .pitch__results {
    gap: 0.5rem;
    margin-block-start: 0.7rem;
  }
}

/* Page one, earned (parts/interior/climb.php, assets/src/js/climb.js): the search scene
   on the SEO page. Static: the pieces read top to bottom. Live: the section is tall and
   its stage sticks; the search bar, the results, the levers, the promises, the months,
   the answer and the captions are placed on the stage and moved by scroll. ----------- */

.climb {
  --bh-white: #f7f5fb;
  --bh-muted: #b9b1c4;
  --bh-line: rgb(255 255 255 / 14%);
  --bh-cyan: #18d9ff;
  --bh-magenta: #ff2bbd;
  --climb-row: 2.6rem;
  position: relative;
  z-index: 1;
  background: #05030a;
  color: var(--bh-white);
}

.climb.is-live {
  min-block-size: 760vh;
}

/* Clipped rather than hidden: nothing taking focus may scroll the stage sideways. */
.climb__sticky {
  position: relative;
  overflow: clip;
}

.climb.is-live .climb__sticky {
  position: sticky;
  inset-block-start: 0;
  height: 100vh;
  height: 100svh;
}

.climb__canvas {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
}

.climb.is-live .climb__canvas {
  display: block;
}

.climb__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 60% at 68% 42%, rgb(24 217 255 / 5%), transparent 70%),
    radial-gradient(40% 50% at 18% 70%, rgb(255 43 189 / 5%), transparent 70%);
  pointer-events: none;
}

.climb__frame {
  position: relative;
  width: min(100%, var(--bh-container));
  min-block-size: inherit;
  margin-inline: auto;
  padding: calc(var(--bh-header-height) + var(--bh-space-lg)) var(--bh-gutter) var(--bh-space-xl);
}

.climb.is-live .climb__frame {
  height: 100%;
  padding-block-end: 0;
}

.climb__head {
  position: relative;
  z-index: 3;
  max-width: 26rem;
}

.climb__eyebrow {
  margin-block-end: 1rem;
}

.climb__title {
  margin: 0;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h2);
  font-weight: var(--bh-weight-heading);
  line-height: var(--bh-leading-tight);
  letter-spacing: var(--bh-tracking-heading);
}

/* The search bar. */
.climb__search {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: min(100%, 26rem);
  margin: var(--bh-space-lg) 0 0;
  padding: 0.85rem 1.2rem;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 999px;
  background: rgb(255 255 255 / 8%);
  color: var(--bh-white);
  font-size: var(--bh-step-body-lg);
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 30%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.climb__search-icon {
  display: inline-flex;
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  color: var(--bh-cyan);
}

.climb__search-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.8;
}

.climb__search-text {
  display: inline-flex;
  align-items: center;
  min-height: 1.4em;
}

.climb__caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-inline-start: 0.15rem;
  background: var(--bh-cyan);
  opacity: 0;
}

.climb.is-live .climb__search.is-typing .climb__caret {
  animation: climb-caret 0.9s steps(2) infinite;
}

@keyframes climb-caret {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* The results. */
.climb__results {
  position: relative;
  width: min(100%, 26rem);
  margin: var(--bh-space-md) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: climb;
}

.climb__result {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  height: var(--climb-row);
  counter-increment: climb;
}

.climb__rank {
  flex: none;
  width: 1.6rem;
  color: color-mix(in srgb, var(--bh-white) 45%, transparent);
  font-size: var(--bh-step-micro);
  text-align: center;
}

.climb__rank::before {
  content: counter(climb, decimal-leading-zero);
}

.climb__lines {
  display: grid;
  flex: 1;
  gap: 0.3rem;
  min-width: 0;
}

.climb__bar {
  display: block;
  width: 62%;
  height: 0.34rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 12%);
}

.climb__bar--title {
  width: 38%;
  height: 0.46rem;
  background: rgb(255 255 255 / 20%);
}

.climb__result--you {
  padding-inline: 0.6rem;
  margin-inline: -0.6rem;
  border-radius: var(--bh-radius-xs);
  background: rgb(24 217 255 / 8%);
  box-shadow: inset 0 0 0 1px rgb(24 217 255 / 25%);
}

.climb__result--you .climb__rank {
  color: var(--bh-cyan);
}

.climb__result-title {
  overflow: hidden;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-body);
  font-weight: var(--bh-weight-heading);
  line-height: var(--bh-leading-tight);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.climb__result-url {
  color: var(--bh-cyan);
  font-size: var(--bh-step-micro);
  letter-spacing: var(--bh-tracking-label);
}

.climb__result--you.is-top {
  background: rgb(24 217 255 / 14%);
  box-shadow: inset 0 0 0 1px rgb(24 217 255 / 55%), 0 0 2rem rgb(24 217 255 / 25%);
}

.climb__fold {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  height: var(--climb-row);
  color: color-mix(in srgb, var(--bh-white) 40%, transparent);
  font-size: var(--bh-step-micro);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

.climb__fold::before,
.climb__fold::after {
  flex: 1;
  height: 1px;
  background: var(--bh-line);
  content: "";
}

/* The levers. */
.climb__levers {
  display: grid;
  gap: 1rem;
  width: min(100%, 24rem);
  margin: var(--bh-space-lg) 0 0;
  padding: 0;
  list-style: none;
}

.climb__lever {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.climb__lever-index {
  flex: none;
  padding-block-start: 0.2rem;
  color: var(--bh-cyan);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
}

.climb__lever-body {
  display: grid;
  gap: 0.25rem;
}

.climb__lever-title {
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-body-lg);
  font-weight: var(--bh-weight-heading);
  line-height: var(--bh-leading-snug);
  letter-spacing: var(--bh-tracking-heading);
}

.climb__lever-copy {
  color: color-mix(in srgb, var(--bh-white) 70%, transparent);
  font-size: var(--bh-step-small);
  line-height: var(--bh-leading-body);
}

/* The promises are only drawn live. */
.climb__promises,
.climb__months,
.climb__caption,
.climb__progress,
.climb__end {
  display: none;
}

/* The assistant: the question, the searches it fans out into, the answer. */
.climb__fan {
  width: min(100%, 30rem);
  margin: var(--bh-space-lg) 0 0;
}

.climb__fan-prompt {
  display: grid;
  gap: 0.35rem;
  margin: 0;
}

.climb__fan-ask {
  color: color-mix(in srgb, var(--bh-white) 55%, transparent);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

.climb__fan-question {
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-body-lg);
  font-weight: var(--bh-weight-heading);
  line-height: var(--bh-leading-snug);
}

.climb__fan-lines {
  display: block;
  width: 100%;
  height: 2.6rem;
  margin: 0.4rem 0;
  overflow: visible;
}

.climb__fan-lines path {
  fill: none;
  stroke: color-mix(in srgb, var(--bh-cyan) 55%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--drawn, 1));
}

.climb__fan-lines path:nth-child(2) {
  stroke-dashoffset: calc(1 - var(--drawn, 1));
}

.climb__fan-queries {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.climb__fan-query {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.climb__fan-query-text {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 999px;
  background: rgb(255 255 255 / 7%);
  font-size: var(--bh-step-micro);
  line-height: var(--bh-leading-snug);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.climb__fan-query-icon {
  display: inline-flex;
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  color: var(--bh-cyan);
}

.climb__fan-query-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 2;
}

.climb__mini {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: var(--bh-radius-xs);
  background: rgb(255 255 255 / 5%);
  list-style: none;
}

.climb__mini li {
  height: 0.34rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 14%);
}

.climb__mini li:nth-child(3) {
  width: 70%;
}

.climb__mini-you {
  height: auto !important;
  border-radius: 0.3rem !important;
  background: rgb(24 217 255 / 14%) !important;
  box-shadow: inset 0 0 0 1px rgb(24 217 255 / 40%);
  padding: 0.2rem 0.4rem;
  color: var(--bh-white);
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-micro);
  font-weight: var(--bh-weight-heading);
  line-height: var(--bh-leading-snug);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.climb__answer {
  margin: 0.8rem 0 0;
}

.climb__answer-card {
  padding: 1.2rem 1.4rem;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: var(--bh-radius-card);
  background: rgb(255 255 255 / 7%);
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 30%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.climb__answer-text {
  margin: 0;
  font-size: var(--bh-step-body);
  line-height: var(--bh-leading-body);
}

.climb__answer-text strong {
  color: var(--bh-cyan);
  font-weight: var(--bh-weight-heading);
}

.climb__answer-sources {
  margin: 0.9rem 0 0;
  padding-block-start: 0.8rem;
  border-block-start: 1px solid var(--bh-line);
  color: var(--bh-cyan);
  font-size: var(--bh-step-micro);
  letter-spacing: var(--bh-tracking-label);
}

.climb__answer-sources span {
  color: color-mix(in srgb, var(--bh-white) 50%, transparent);
  text-transform: uppercase;
}

/* The dashboard: rankings, the line, the assistants. */
.climb__dash {
  width: min(100%, 44rem);
  margin: var(--bh-space-lg) 0 0;
}

.climb__dash-title {
  margin: 0 0 0.8rem;
  color: color-mix(in srgb, var(--bh-white) 55%, transparent);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

.climb__dash-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.climb__dash-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.2rem;
  /* The three read as one panel rather than three thin strips: a common height and room to
     breathe, so the end of the story carries the weight the rest of the scene has. */
  min-block-size: 11.5rem;
  min-width: 0;
  padding: 1.35rem 1.35rem 1.5rem;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: var(--bh-radius-card);
  background: rgb(255 255 255 / 6%);
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 25%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.climb__dash-label {
  margin: 0 0 0.7rem;
  color: color-mix(in srgb, var(--bh-white) 50%, transparent);
  font-size: var(--bh-step-micro);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

.climb__dash-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0 0 0.45rem;
  font-size: var(--bh-step-small);
}

.climb__dash-row--dim {
  opacity: 0.6;
}

.climb__dash-query {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.climb__dash-rank {
  flex: none;
  color: var(--bh-cyan);
  font-family: var(--bh-font-mono);
  font-weight: var(--bh-weight-label);
}

.climb__spark {
  display: block;
  width: 100%;
  height: 2.8rem;
  overflow: visible;
}

.climb__spark-line {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.climb__spark-line--visits {
  stroke: var(--bh-cyan);
}

.climb__spark-line--leads {
  stroke: var(--bh-magenta);
}

.climb__dash-legend {
  display: flex;
  gap: 1rem;
  margin: 0.6rem 0 0;
  font-size: var(--bh-step-micro);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

.climb__dash-key::before {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-inline-end: 0.35rem;
  border-radius: 50%;
  background: var(--bh-cyan);
  content: "";
}

.climb__dash-key--leads::before {
  background: var(--bh-magenta);
}

.climb__dash-ai {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--bh-step-small);
}

.climb__dash-ai li {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
}

.climb__dash-cited {
  color: var(--bh-cyan);
  font-size: var(--bh-step-micro);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

/* The stages (static: a row; live: one at a time, bottom left). */
.climb__stages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--bh-space-lg) var(--bh-grid-gap);
  margin: var(--bh-space-xl) 0 0;
  padding: 0;
  list-style: none;
}

.climb__kicker {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin: 0 0 0.8rem;
  color: var(--bh-cyan);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

.climb__index {
  color: color-mix(in srgb, var(--bh-white) 55%, transparent);
}

.climb__stage-title {
  margin: 0 0 0.7rem;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h4);
  font-weight: var(--bh-weight-heading);
  line-height: var(--bh-leading-tight);
  letter-spacing: var(--bh-tracking-heading);
  text-wrap: balance;
}

.climb__stage-copy {
  max-width: 26rem;
  margin: 0;
  color: color-mix(in srgb, var(--bh-white) 74%, transparent);
  font-size: var(--bh-step-body);
  line-height: var(--bh-leading-body);
  text-wrap: pretty;
}

.climb__end-link,
.climb__arrow {
  display: inline-flex;
  align-items: center;
}

.climb__end-link {
  gap: 0.6rem;
  color: var(--bh-cyan);
  font-family: var(--bh-font-mono);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
  text-decoration: none;
  text-transform: uppercase;
}

.climb__arrow {
  width: 1rem;
  height: 1rem;
  transition: transform 0.35s var(--bh-ease-out);
}

.climb__arrow svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.climb__end-link:hover .climb__arrow {
  transform: translateX(0.25em);
}

/* Live placement. Everything sits on the stage and is faded and moved by the script. */
.climb.is-live .climb__search {
  position: absolute;
  inset-block-start: 42%;
  inset-inline-start: 55%;
  z-index: 3;
  width: min(38%, 27rem);
  margin: 0;
  opacity: 0;
  translate: 0 calc(-50% - var(--lift, 0) * 11rem);
  will-change: transform, opacity;
}

.climb.is-live .climb__results {
  position: absolute;
  inset-block-start: 52%;
  inset-inline-start: 55%;
  z-index: 2;
  width: min(38%, 27rem);
  height: calc(var(--climb-row) * 11);
  margin: 0;
  translate: 0 -42%;
  counter-reset: none;
}

.climb.is-live .climb__result,
.climb.is-live .climb__fold {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  opacity: 0;
  will-change: transform, opacity;
}

.climb.is-live .climb__fold {
  transform: translate3d(0, calc(var(--climb-row) * 10), 0);
}

.climb.is-live .climb__rank::before {
  content: none;
}

.climb.is-live .climb__result--you {
  transition: background-color 0.5s var(--bh-ease-out), box-shadow 0.5s var(--bh-ease-out);
}

.climb.is-live .climb__levers {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--bh-gutter);
  z-index: 3;
  width: min(100% - 2 * var(--bh-gutter), 26rem);
  margin: 0;
  translate: 0 -50%;
  pointer-events: none;
}

.climb.is-live .climb__lever {
  opacity: 0;
  translate: -0.8rem 0;
  transition: opacity 0.6s var(--bh-ease-out), translate 0.8s var(--bh-ease-glide);
}

.climb.is-live .climb__lever.is-in {
  opacity: 0.55;
  translate: 0 0;
}

.climb.is-live .climb__lever.is-current {
  opacity: 1;
}

.climb.is-live .climb__promises {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.climb__promise {
  position: absolute;
  display: grid;
  place-items: center;
  width: 9.5rem;
  height: 9.5rem;
  padding: 1.4rem;
  background: var(--climb-film) center / 110% no-repeat;
  -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 70%);
  mask-image: radial-gradient(circle, #000 58%, transparent 70%);
  color: var(--bh-white);
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-small);
  font-weight: var(--bh-weight-statement);
  line-height: var(--bh-leading-snug);
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  translate: -50% -50%;
  pointer-events: none;
}

.climb__promise span {
  text-shadow: 0 1px 8px rgb(5 3 10 / 60%);
}

.climb__promise.is-up {
  opacity: 0.92;
  pointer-events: auto;
  transition: opacity 0.6s var(--bh-ease-out);
}

.climb__promise.is-popped {
  animation: climb-pop 0.45s var(--bh-ease-out) both;
}

@keyframes climb-pop {
  from {
    opacity: 0.92;
    scale: 1;
  }

  to {
    opacity: 0;
    scale: 1.5;
  }
}

.climb.is-live .climb__months {
  position: absolute;
  inset-block-end: 22%;
  inset-inline-start: 44%;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  width: 48%;
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  color: color-mix(in srgb, var(--bh-white) 40%, transparent);
  font-size: var(--bh-step-micro);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

.climb.is-live .climb__months li {
  opacity: 0.35;
  transition: opacity 0.4s var(--bh-ease-out), color 0.4s var(--bh-ease-out);
}

.climb.is-live .climb__months li.is-in {
  opacity: 1;
  color: var(--bh-white);
}

.climb.is-live .climb__fan {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: 3;
  width: min(46%, 32rem);
  margin: 0;
  opacity: 0;
  translate: 0 -50%;
  pointer-events: none;
}

.climb.is-live .climb__fan.is-in {
  pointer-events: auto;
}

.climb.is-live .climb__fan-prompt,
.climb.is-live .climb__fan-query,
.climb.is-live .climb__mini {
  opacity: 0;
  translate: 0 0.6rem;
  transition: opacity 0.5s var(--bh-ease-out), translate 0.7s var(--bh-ease-glide);
}

.climb.is-live .climb__fan-prompt.is-in,
.climb.is-live .climb__fan-query.is-in,
.climb.is-live .climb__fan-query.has-results .climb__mini {
  opacity: 1;
  translate: 0 0;
}

.climb.is-live .climb__answer {
  opacity: var(--in, 0);
  translate: 0 calc((1 - var(--in, 0)) * 0.8rem);
}

.climb.is-live .climb__dash {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 40%;
  z-index: 3;
  width: min(56%, 44rem);
  margin: 0;
  opacity: 0;
  translate: 0 calc(-50% + (1 - var(--in, 0)) * 1.2rem);
  pointer-events: none;
}

.climb.is-live .climb__dash.is-in {
  pointer-events: auto;
}

.climb.is-live .climb__dash-card {
  opacity: 0;
  translate: 0 0.8rem;
  transition: opacity 0.6s var(--bh-ease-out), translate 0.8s var(--bh-ease-glide);
}

.climb.is-live .climb__dash-card.is-in {
  opacity: 1;
  translate: 0 0;
}

.climb.is-live .climb__spark-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  /* pathLength="1" on the paths makes the dash a fraction of the length. */
  transition: stroke-dashoffset 1.6s var(--bh-ease-glide) 0.2s;
}

.climb.is-live .climb__dash-card.is-in .climb__spark-line {
  stroke-dashoffset: 0;
}

.climb.is-live .climb__answer-sources {
  opacity: 0;
  transition: opacity 0.6s var(--bh-ease-out);
}

.climb.is-live .climb__answer.has-sources .climb__answer-sources {
  opacity: 1;
}

.climb.is-live .climb__stages {
  position: absolute;
  inset-block-end: 4.6rem;
  inset-inline-start: var(--bh-gutter);
  z-index: 3;
  display: block;
  width: min(100% - 2 * var(--bh-gutter), 26rem);
  margin: 0;
}

.climb.is-live .climb__stage {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  opacity: 0;
  translate: 0 0.8rem;
  transition: opacity 0.6s var(--bh-ease-out), translate 0.8s var(--bh-ease-glide);
  pointer-events: none;
}

.climb.is-live .climb__stage.is-active {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

.climb.is-live .climb__frame.is-ending .climb__stage.is-active {
  opacity: 0;
  translate: 0 0.8rem;
  pointer-events: none;
}

.climb.is-live .climb__end {
  position: absolute;
  inset-block-end: 4.6rem;
  inset-inline-start: var(--bh-gutter);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  width: min(100% - 2 * var(--bh-gutter), 24rem);
  margin: 0;
  opacity: 0;
  translate: 0 0.8rem;
  transition: opacity 0.6s var(--bh-ease-out), translate 0.8s var(--bh-ease-glide);
  pointer-events: none;
}

.climb.is-live .climb__end.is-in {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

.climb__end-copy {
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h4);
  font-weight: var(--bh-weight-statement);
  line-height: var(--bh-leading-snug);
  letter-spacing: var(--bh-tracking-heading);
}

.climb.is-live .climb__caption {
  position: absolute;
  inset-block-end: 2rem;
  inset-inline-start: var(--bh-gutter);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  color: color-mix(in srgb, var(--bh-white) 55%, transparent);
  font-size: var(--bh-step-micro);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
  transition: opacity 0.5s var(--bh-ease-out);
}

.climb.is-live .climb__caption .cross {
  position: static;
  color: color-mix(in srgb, var(--bh-white) 45%, transparent);
}

.climb.is-live .climb__caption.is-done {
  opacity: 0;
}

.climb.is-live .climb__progress {
  position: absolute;
  inset-block-end: 2.4rem;
  inset-inline-end: var(--bh-gutter);
  z-index: 3;
  display: block;
  width: min(30%, 14rem);
  height: 1px;
  background: var(--bh-line);
}

.climb.is-live .climb__progress span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bh-cyan), var(--bh-magenta));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

@media (max-width: 63.99rem) {
  .climb {
    --climb-row: 2.2rem;
  }

  .climb.is-live .climb__search {
    inset-block-start: 30%;
    inset-inline-start: var(--bh-gutter);
    width: calc(100% - 2 * var(--bh-gutter));
    translate: 0 calc(-50% - var(--lift, 0) * 9rem);
  }

  .climb.is-live .climb__results {
    inset-block-start: 40%;
    inset-inline-start: var(--bh-gutter);
    width: calc(100% - 2 * var(--bh-gutter));
    translate: 0 -40%;
  }

  .climb.is-live .climb__levers {
    inset-block-start: auto;
    inset-block-end: 13rem;
    width: calc(100% - 2 * var(--bh-gutter));
    translate: none;
  }

  .climb.is-live .climb__lever-copy {
    display: none;
  }

  .climb.is-live .climb__lever {
    gap: 0.6rem;
  }

  .climb__promise {
    width: 7rem;
    height: 7rem;
    padding: 1rem;
    font-size: var(--bh-step-micro);
  }

  .climb.is-live .climb__months {
    inset-inline-start: 8%;
    width: 84%;
  }

  .climb.is-live .climb__months li:nth-child(even) {
    display: none;
  }

  .climb.is-live .climb__fan,
  .climb.is-live .climb__dash {
    inset-block-start: 40%;
    inset-inline-start: var(--bh-gutter);
    width: calc(100% - 2 * var(--bh-gutter));
  }

  .climb__fan-queries {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .climb__mini {
    display: none;
  }

  .climb__dash-cards {
    grid-template-columns: 1fr 1fr;
  }

  .climb__dash-card:nth-child(3) {
    grid-column: 1 / -1;
  }

  .climb.is-live .climb__stages,
  .climb.is-live .climb__end {
    inset-block-end: 4.2rem;
    width: calc(100% - 2 * var(--bh-gutter));
  }

  .climb.is-live .climb__stage-copy {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .climb.is-live .climb__progress {
    width: 5rem;
  }
}

@media (max-width: 47.99rem) {
  .climb__title {
    font-size: var(--bh-step-h3);
  }
}

/* The local block on a location page: what local search means in that town, and the services
   the town asks for that have no page of their own (parts/interior/locality.php). --------- */

.locality__lead {
  max-width: 62ch;
}

.locality__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-block-start: var(--bh-space-sm);
  padding: 0;
  list-style: none;
}

.locality__links a {
  font-size: var(--bh-step-body);
  text-decoration: none;
  border-block-end: 1px solid currentColor;
  padding-block-end: 0.1em;
  opacity: 0.85;
  transition: opacity 0.35s var(--bh-ease-out);
}

.locality__links a:hover,
.locality__links a:focus-visible {
  opacity: 1;
}

.locality__more {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--bh-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.locality__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: var(--bh-space-sm);
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius-card);
  background: var(--bh-surface);
}

.locality__title {
  font-size: var(--bh-step-title);
  font-weight: var(--bh-weight-statement);
  letter-spacing: var(--bh-tracking-heading);
  line-height: var(--bh-leading-tight);
  margin: 0;
}

.locality__text {
  margin: 0;
  color: var(--bh-muted);
  font-size: var(--bh-step-body);
  line-height: var(--bh-leading-body);
}

.locality__link {
  margin-block-start: auto;
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  border-block-end: 1px solid currentColor;
  align-self: flex-start;
  padding-block-end: 0.15em;
}


/* What a case study proves ---------------------------------------------------
   The numbers these pages exist to show were a thousand words deep in the prose.
   They come first now, on the light ground the rest of the interior uses, with the
   client and the work beside them.                                              */

.case-facts__meta {
  grid-column: 1 / span 7;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
}

.case-facts__item {
  min-inline-size: 0;
}

.case-facts__label {
  margin: 0 0 0.3rem;
  color: var(--bh-muted);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

.case-facts__value {
  margin: 0;
  font-size: var(--bh-step-body-lg);
  font-weight: var(--bh-weight-statement);
  letter-spacing: var(--bh-tracking-heading);
}

.case-facts__work {
  grid-column: 8 / span 5;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-content: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-facts__work li {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--bh-line);
  border-radius: 999px;
  color: var(--bh-muted);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

.case-facts__results {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--bh-space-sm);
  margin: var(--bh-space-md) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.case-facts__result {
  position: relative;
  padding: var(--bh-space-sm);
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius-card);
  background: var(--bh-surface);
}

.case-facts__number {
  margin: 0 0 0.35rem;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h3);
  font-weight: var(--bh-weight-heading);
  line-height: var(--bh-leading-tight);
  letter-spacing: var(--bh-tracking-heading);
  font-variant-numeric: tabular-nums;
}

.case-facts__caption {
  margin: 0;
  color: var(--bh-muted);
  font-size: var(--bh-step-body);
  line-height: var(--bh-leading-body);
}

@media (max-width: 63.99rem) {
  .case-facts__meta,
  .case-facts__work {
    grid-column: 1 / -1;
  }

  .case-facts__work {
    margin-block-start: var(--bh-space-sm);
  }
}


/* A picture in the heading column ------------------------------------------------------
   A short chapter leaves its heading column empty for the whole of its height while the
   words pile up on the right, which is what makes a hundred words read as a wall. One of
   the office stills goes in that space instead, under the heading and sticky with it, so
   the chapter is a picture and a column of words rather than a heading and a slab. Long
   chapters get their stills between the paragraphs instead (parts/interior/chapters.php). */

.chapter__rail-figure {
  margin: var(--bh-space-md) 0 0;
  padding: 0;
  overflow: hidden;
}

.chapter__rail-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: inherit;
}

@media (max-width: 63.99rem) {
  /* Stacked, it opens the chapter rather than sitting beside it, so it takes a wider crop
     and less height: on a phone a five-by-four picture between a heading and its first
     sentence is most of the screen. */
  .chapter--railed .chapter__rail-figure img {
    aspect-ratio: 16 / 10;
  }
}