@charset "UTF-8";

/*
 * Homepage sections. Layout follows a twelve column grid inside the page gutters so
 * headlines, panels and cards share the same rhythm.
 */

.bh-section {
  position: relative;
  z-index: 1;
  padding: var(--bh-space-2xl) var(--bh-gutter);
}

.bh-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--bh-grid-gap);
  row-gap: var(--bh-space-lg);
  width: min(100%, var(--bh-container));
  margin-inline: auto;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 clamp(1.1rem, 2vw, 1.6rem);
  color: var(--bh-cyan);
  font-family: var(--bh-font-mono);
  font-size: var(--bh-step-label);
  font-weight: var(--bh-weight-label);
  letter-spacing: var(--bh-tracking-wide);
  text-transform: uppercase;
}

.eyebrow::before {
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  box-shadow: 0 0 0.75rem rgb(24 217 255 / 70%);
  content: "";
}

.statement {
  max-width: 13em;
  margin: 0;
  color: var(--bh-white);
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-statement);
  font-weight: var(--bh-weight-statement);
  letter-spacing: var(--bh-tracking-display);
  line-height: var(--bh-leading-display);
  text-wrap: balance;
  transform-origin: 0% 50%;
}

.lede {
  max-width: 34rem;
  margin: clamp(1.25rem, 2.5vw, 2rem) 0 0;
  color: color-mix(in srgb, var(--bh-white) 74%, transparent);
  font-size: var(--bh-step-body-lg);
  line-height: var(--bh-leading-body);
  text-wrap: pretty;
}

/* SplitText masks: lines clip their words so they can rise into place. */
.split-line {
  display: block;
  overflow: hidden;
  padding-block-end: 0.08em;
  margin-block-end: -0.08em;
}

.split-word {
  display: inline-block;
}

.split-char {
  display: inline-block;
  backface-visibility: hidden;
}

/* Once a heading has landed it no longer needs a box per character, and a box per character
   is why copying a heading out of Safari arrives as one letter per line. The reveal sets
   data-revealed on the element when it finishes; from then on the pieces are ordinary inline
   text again. Measured across twelve heading lines at 1440: the widths are identical either
   way, so nothing moves when it switches. */
[data-revealed] .split-word,
[data-revealed] .split-char {
  display: inline;
  backface-visibility: visible;
}

/* Ribbon ------------------------------------------------------------------- */

.page-flow {
  position: relative;
}

/* During the approach the view can be dragged around the bubble. */
.journey.is-live[data-orbit="true"] .journey__sticky {
  cursor: grab;
}

.journey.is-live[data-dragging="true"] .journey__sticky {
  cursor: grabbing;
  user-select: none;
}

.ribbon {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0.75;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* On light sections the ribbon darkens the page instead of lightening it. */
html.is-light .ribbon {
  mix-blend-mode: multiply;
  opacity: 0.85;
}

.ribbon path {
  fill: none;
  stroke: url(#ribbon-gradient);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ribbon__core {
  stroke-width: 4px;
}

.ribbon__glow {
  stroke-width: 24px;
  opacity: 0.32;
  filter: blur(12px);
}

.ribbon__pulse {
  stroke: var(--bh-white);
  stroke-width: 3px;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgb(24 217 255 / 90%));
}

/* Growth scan ------------------------------------------------------------- */

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

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

/* The goals panel (parts/contact-panel.php), on the homepage and the contact page. */

/* The panel: its gradient border lit at rest and a soft cast of both colours behind it,
   no frame bar, the copy and the steps above the form. */
.contact-panel {
  box-shadow:
    var(--orb-shadow),
    0 0 4rem -1rem color-mix(in srgb, var(--bh-cyan) 22%, transparent),
    0 0 6rem -1.5rem color-mix(in srgb, var(--bh-magenta) 18%, transparent);
}

.contact-panel::before {
  opacity: 0.55;
}

.contact-panel:hover::before {
  opacity: 0.8;
}

.contact-panel__body {
  display: grid;
  padding: clamp(1.5rem, 2.6vw, 2.6rem);
}

.contact-panel__eyebrow {
  margin-block-end: 0.9rem;
}

.contact-panel__eyebrow::before {
  display: none;
}

.contact-panel__title {
  margin: 0 0 0.5rem;
  font-size: var(--bh-step-h2);
  font-weight: var(--bh-weight-heading);
  letter-spacing: var(--bh-tracking-heading);
  line-height: var(--bh-leading-tight);
}

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

/* The steps: numbered rings joined by hairlines that fill with the gradient as each step
   completes. contact.js moves them along as the form is filled. */
.contact-steps {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1.6rem 0 1.5rem;
  padding: 0;
  list-style: none;
}

.contact-steps__step {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  color: var(--bh-muted);
  font-size: var(--bh-step-small);
  white-space: nowrap;
  transition: color 0.4s var(--bh-ease-out);
}

.contact-steps__step:last-child {
  flex: 0 0 auto;
}

.contact-steps__step::after {
  flex: 1 1 0;
  height: 1px;
  margin-inline-start: 0.35rem;
  background:
    linear-gradient(90deg, var(--bh-cyan), var(--bh-magenta)) 0 0 / var(--fill, 0%) 100% no-repeat,
    var(--bh-line);
  content: "";
  transition: background-size 0.9s var(--bh-ease-glide);
}

.contact-steps__step:last-child::after {
  display: none;
}

.contact-steps__num {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--bh-line);
  border-radius: 50%;
  color: var(--bh-white);
  font-family: var(--bh-font-mono);
  font-size: var(--bh-step-small);
  transition: border-color 0.4s var(--bh-ease-out), background-color 0.4s var(--bh-ease-out), box-shadow 0.4s var(--bh-ease-out);
}

.contact-steps__num svg,
.contact-steps__digit {
  grid-area: 1 / 1;
  transition: opacity 0.3s var(--bh-ease-out), scale 0.4s var(--bh-ease-glide);
}

.contact-steps__num svg {
  width: 1rem;
  height: 1rem;
  opacity: 0;
  scale: 0.5;
}

.contact-steps__step.is-active {
  color: var(--bh-white);
}

.contact-steps__step.is-active .contact-steps__num {
  border-color: transparent;
  background: linear-gradient(135deg, var(--bh-cyan), var(--bh-magenta));
  color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bh-cyan) 16%, transparent);
}

.contact-steps__step.is-done {
  --fill: 100%;
}

.contact-steps__step.is-done .contact-steps__num {
  border-color: var(--bh-cyan);
  color: var(--bh-cyan);
}

.contact-steps__step.is-done .contact-steps__digit {
  opacity: 0;
  scale: 0.5;
}

.contact-steps__step.is-done .contact-steps__num svg {
  opacity: 1;
  scale: 1;
}

/* The goal tiles: the plugin's checkbox options (or the fallback's labels) as a grid of
   cards with an icon each; a picked one takes the gradient hairline and the check. */
.contact-panel .forminator-field[role="group"],
.bh-tiles {
  display: grid !important;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.contact-panel .forminator-field[role="group"] > .forminator-label,
.bh-tiles > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.contact-panel .forminator-field[role="group"] > .forminator-error-message {
  grid-column: 1 / -1;
}

.bh-form .bh-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-block-size: 4.6rem;
  margin: 0;
  padding: 0.9rem 2.4rem 0.9rem 1rem;
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius-sm);
  background: color-mix(in srgb, var(--bh-white) 3%, transparent);
  color: var(--bh-white);
  font-family: var(--bh-font-interface);
  font-size: var(--bh-step-body);
  font-weight: var(--bh-weight-statement);
  letter-spacing: 0;
  line-height: var(--bh-leading-snug);
  text-transform: none;
  cursor: pointer;
  transition: border-color 0.3s var(--bh-ease-out), background-color 0.3s var(--bh-ease-out), translate 0.4s var(--bh-ease-glide);
}

.bh-tile::before {
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--bh-cyan), var(--bh-magenta));
  opacity: 0;
  transition: opacity 0.35s var(--bh-ease-out);
  content: "";
  pointer-events: none;
  /* The prefixed shorthand first, then the composite rules: Safari treats the prefixed
     shorthand as the standard one and resets any composite set before it, which would
     let the whole gradient paint over the panel. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.bh-form .bh-tile input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.bh-tile__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--bh-cyan);
}

.bh-tile__icon svg {
  width: 100%;
  height: 100%;
}

.bh-tile__check {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0.7rem;
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bh-cyan), var(--bh-magenta));
  color: var(--bh-black);
  opacity: 0;
  scale: 0.6;
  translate: 0 -50%;
  transition: opacity 0.3s var(--bh-ease-out), scale 0.45s var(--bh-ease-glide);
}

.bh-tile__check svg {
  width: 0.85rem;
  height: 0.85rem;
  stroke-width: 2.4;
}

.bh-form .bh-tile:hover {
  border-color: color-mix(in srgb, var(--bh-white) 32%, transparent);
  translate: 0 -1px;
}

.bh-form .bh-tile:has(:checked) {
  background: linear-gradient(135deg, color-mix(in srgb, var(--bh-cyan) 12%, transparent), color-mix(in srgb, var(--bh-magenta) 12%, transparent));
}

.bh-tile:has(:checked)::before,
.bh-tile:has(:checked) .bh-tile__check {
  opacity: 1;
}

.bh-tile:has(:checked) .bh-tile__check {
  scale: 1;
}

.bh-tile:has(:focus-visible) {
  outline: 2px solid var(--bh-cyan);
  outline-offset: 2px;
}

/* The fields: boxed here rather than the site's hairline, as the panel is a tool. */
.contact-panel .forminator-input,
.contact-panel .bh-form__field input {
  min-height: 3.4rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius-sm);
  background: color-mix(in srgb, var(--bh-white) 3%, transparent);
  font-size: var(--bh-step-body);
}

.contact-panel .forminator-input:hover,
.contact-panel .bh-form__field input:hover {
  border-color: color-mix(in srgb, var(--bh-white) 32%, transparent);
}

.contact-panel .forminator-input:focus-visible,
.contact-panel .bh-form__field input:focus-visible {
  border-color: var(--bh-cyan);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bh-cyan) 20%, transparent);
}

.contact-panel .forminator-has_error .forminator-input {
  border-color: var(--bh-magenta);
}

.contact-panel .forminator-col-12 {
  grid-column: 1 / -1;
}

/* The action row: the gradient pill across the panel, the promise centred under it. */
.contact-panel .forminator-row-last > .forminator-col,
.contact-panel .bh-form__actions {
  flex-direction: column;
  align-items: stretch;
  gap: 0.9rem;
}

.contact-panel .bh-form__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: none;
  text-align: center;
}

.bh-form__note-icon {
  display: flex;
  flex: none;
  width: 1rem;
  height: 1rem;
}

.bh-form__note-icon svg {
  width: 100%;
  height: 100%;
}

/* Sent: the fields step aside and the reply sits where they were. */
.contact-panel.is-done .forminator-row,
.contact-panel.is-done .contact-panel__lede {
  display: none !important;
}

.contact-panel .forminator-response-message.forminator-success {
  padding: 1.25rem 1.4rem;
  border: 1px solid color-mix(in srgb, var(--bh-cyan) 45%, transparent);
  border-radius: var(--bh-radius-sm);
  background: color-mix(in srgb, var(--bh-cyan) 6%, transparent);
  font-family: var(--bh-font-interface);
  font-size: var(--bh-step-body-lg);
  outline: none;
}

@media (max-width: 48rem) {
  .contact-panel .forminator-field[role="group"],
  .bh-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .bh-form .bh-tile {
    min-block-size: 4rem;
    padding: 0.75rem 1.7rem 0.75rem 0.8rem;
    gap: 0.55rem;
    font-size: var(--bh-step-small);
  }

  .bh-tile__icon {
    width: 1.3rem;
    height: 1.3rem;
  }

  .bh-tile__check {
    inset-inline-end: 0.4rem;
    width: 1.2rem;
    height: 1.2rem;
  }
}

@media (max-width: 30rem) {
  .contact-steps__step:not(.is-active) .contact-steps__label {
    display: none;
  }
}

/* Integrated growth system ------------------------------------------------ */

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

.system__copy {
  grid-column: 9 / span 4;
  align-self: end;
  margin: 0;
  font-size: var(--bh-step-body);
}

.system__grid {
  --draw: 1;
  position: relative;
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--bh-grid-gap);
  margin-block-start: var(--bh-space-md);
}

.system__grid::before,
.system__grid::after {
  position: absolute;
  z-index: 1;
  background: linear-gradient(90deg, transparent, rgb(24 217 255 / 75%), transparent);
  content: "";
  pointer-events: none;
}

.system__grid::before {
  inset-block: 0;
  inset-inline-start: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgb(24 217 255 / 75%), transparent);
  transform: translateX(-50%) scaleY(var(--draw));
  transform-origin: 50% 50%;
}

.system__grid::after {
  inset-inline: 0;
  inset-block-start: 50%;
  height: 1px;
  transform: translateY(-50%) scaleX(var(--draw));
  transform-origin: 50% 50%;
}

.system__node {
  position: absolute;
  z-index: 2;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 0.7rem;
  height: 0.7rem;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--bh-white);
  box-shadow:
    0 0 0 0.4rem rgb(24 217 255 / 16%),
    0 0 1.4rem 0.4rem rgb(24 217 255 / 65%),
    0 0 3rem 0.9rem rgb(255 43 189 / 22%);
}

/* Orb cards: the dark cards with a soap bubble, shared by the system and proof grids. They
   carry their own ink tokens so they stay dark whatever the page is doing. -------------- */

.orb-card {
  --bh-white: #f7f5fb;
  --bh-muted: #b9b1c4;
  --bh-line: rgb(255 255 255 / 14%);
  --bh-black: #05030a;
  --bh-cyan: #18d9ff;
  --bh-magenta: #ff2bbd;
  --orb-shadow: 0 2.4rem 3.6rem -2.2rem rgb(11 7 18 / 55%);
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: var(--bh-radius);
  background:
    radial-gradient(120% 95% at 100% 0%, #1a1031 0%, rgb(26 16 49 / 0%) 58%),
    #0b0712;
  color: var(--bh-white);
  box-shadow: var(--orb-shadow);
  transition: transform 0.6s var(--bh-ease-glide), box-shadow 0.6s var(--bh-ease-out);
}

.orb-card:hover {
  transform: translateY(-3px);
}

/* Framed form panels (growth scan, contact) are orb cards too: the bubble sits behind
   the fields, the frame keeps its bar, and there is no hover lift and no transform
   transition (it would fight the tilt-in tween and move under someone typing). The
   bubble sits lower than on a card so the bar does not hide it. */
.frame.orb-card {
  transition: box-shadow 0.6s var(--bh-ease-out);
}

.frame.orb-card:hover {
  transform: none;
}

.frame.orb-card[data-orb="corner"] .orb-card__bubble:not(.orb-card__bubble--small):not(.orb-card__bubble--tiny) {
  inset-block-start: -34%;
  inset-inline-end: -18%;
  width: 58%;
  opacity: 0.85;
}

.frame.orb-card[data-orb="corner"] .orb-card__bubble--small {
  inset-block-start: 48%;
  inset-inline-end: 8%;
  width: 3.6%;
}

.frame.orb-card > .frame__bar {
  z-index: 2;
}

/* The lit and hovered border: a cyan-to-magenta hairline that glows, masked to the edge. */
.orb-card::before {
  position: absolute;
  z-index: 3;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--bh-cyan), var(--bh-magenta));
  opacity: 0;
  transition: opacity 0.6s var(--bh-ease-out);
  content: "";
  pointer-events: none;
  /* The prefixed shorthand first, then the composite rules: Safari treats the prefixed
     shorthand as the standard one and resets any composite set before it, which would
     let the whole gradient paint over the panel. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.orb-card:hover::before {
  opacity: 0.6;
}

.orb-card > :not(.orb-card__bubble) {
  position: relative;
  z-index: 1;
}

.orb-card__bubble {
  --turn: 0deg;
  --flip: 1;
  --drift-x: 0%;
  --drift-y: 0%;
  --zoom: 1;
  position: absolute;
  z-index: 0;
  aspect-ratio: 1;
  pointer-events: none;
  transform: translate(var(--drift-x), var(--drift-y)) scale(var(--zoom)) rotate(calc(var(--turn) + var(--turn-hover, 0deg))) scaleX(var(--flip));
  transition: transform 1.4s var(--bh-ease-glide);
  will-change: transform;
}

.orb-card__bubble-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* A pass of light crosses the film once when the ribbon lights the card. */
.orb-card__bubble::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgb(255 255 255 / 22%) 47.5%, rgb(255 255 255 / 48%) 50%, rgb(255 255 255 / 22%) 52.5%, transparent 58%);
  background-size: 260% 100%;
  background-position: 120% 0;
  opacity: 0;
  content: "";
  pointer-events: none;
  clip-path: circle(46% at 50% 50%);
  mix-blend-mode: screen;
  mask-image: radial-gradient(circle at 50% 50%, rgb(0 0 0 / 40%) 0%, rgb(0 0 0 / 45%) 30%, #000 42%, rgb(0 0 0 / 60%) 45%, transparent 47%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, rgb(0 0 0 / 40%) 0%, rgb(0 0 0 / 45%) 30%, #000 42%, rgb(0 0 0 / 60%) 45%, transparent 47%);
}

.orb-card__bubble--small,
.orb-card__bubble--tiny {
  opacity: 0.85;
}

.orb-card__bubble--small::before,
.orb-card__bubble--tiny::before {
  display: none;
}

.orb-card:hover .orb-card__bubble {
  --drift-x: -2%;
  --drift-y: 3%;
  --zoom: 1.03;
  --turn-hover: 6deg;
}

.orb-card:hover .orb-card__bubble--small {
  --drift-x: -6%;
  --drift-y: -10%;
  --zoom: 1;
}

.orb-card:hover .orb-card__bubble--tiny {
  --drift-x: 4%;
  --drift-y: -14%;
  --zoom: 1;
}

/* Placements. The film's highlights are directional, so each turn and mirror changes the
   look as well as the position. */

/* corner: large, cropped by the top-right corner. */
.orb-card[data-orb="corner"] .orb-card__bubble {
  --turn: 24deg;
  inset-inline-end: -22%;
  inset-block-start: -58%;
  width: 66%;
}

.orb-card[data-orb="corner"] .orb-card__bubble--small {
  --turn: 130deg;
  inset-inline-end: 33%;
  inset-block-start: 20%;
  width: 3.6%;
}

.orb-card[data-orb="corner"] .orb-card__bubble--tiny {
  display: none;
}

/* edge: mirrored, lower on the right edge, two satellites drifting off it. */
.orb-card[data-orb="edge"] .orb-card__bubble {
  --turn: -38deg;
  --flip: -1;
  inset-inline-end: -36%;
  inset-block-start: 8%;
  width: auto;
  height: 78%;
}

.orb-card[data-orb="edge"] .orb-card__bubble--small {
  --turn: 60deg;
  inset-inline-end: 24%;
  inset-block-start: -7%;
  width: 7%;
}

.orb-card[data-orb="edge"] .orb-card__bubble--tiny {
  --turn: 0deg;
  inset-inline-end: 13%;
  inset-block-end: 18%;
  width: 2.8%;
}

/* arc: rising from the bottom-left corner, sized from the card's height. */
.orb-card[data-orb="arc"] .orb-card__bubble {
  --turn: 196deg;
  inset-inline-start: -12%;
  inset-block-end: -55%;
  width: auto;
  height: 85%;
}

.orb-card[data-orb="arc"] .orb-card__bubble--small {
  --turn: -20deg;
  inset-inline-end: 9%;
  inset-block-start: 14%;
  width: 5.5%;
}

.orb-card[data-orb="arc"] .orb-card__bubble--tiny {
  display: none;
}

/* float: a whole, smaller bubble inside the top-right, with a tiny companion. */
.orb-card[data-orb="float"] .orb-card__bubble {
  --turn: 82deg;
  inset-inline-end: 5%;
  inset-block-start: 7%;
  width: auto;
  height: 54%;
}

.orb-card[data-orb="float"] .orb-card__bubble--small {
  --turn: 200deg;
  inset-inline-end: 30%;
  inset-block-start: 4%;
  width: 4%;
}

.orb-card[data-orb="float"] .orb-card__bubble--tiny {
  --turn: 300deg;
  inset-inline-end: 6%;
  inset-block-start: 62%;
  width: 2.6%;
}

/* System cards: the orb card plus index, title, copy, chips and an arrow. --------------- */

.cap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-block-size: 20rem;
  padding: clamp(1.5rem, 2.6vw, 2.6rem);
}

.cap__index {
  color: var(--bh-cyan);
  font-size: var(--bh-step-label);
}

.cap__title {
  max-width: 80%;
  margin: auto 0 0;
  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);
}

.cap__link {
  color: inherit;
  text-decoration: none;
}

/* The title link covers the card; the arrow is its signal. */
.cap__link::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
}

.cap__copy {
  max-width: 30rem;
  margin: 0;
  color: var(--bh-muted);
  line-height: var(--bh-leading-body);
}

.cap__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: 0.5rem;
}

.cap__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--bh-step-micro);
}

.cap__tags li {
  padding: 0.45em 0.8em;
  border: 1px solid var(--bh-line);
  border-radius: 999px;
  color: color-mix(in srgb, var(--bh-white) 70%, transparent);
}

.cap__arrow {
  display: inline-flex;
  flex-shrink: 0;
  width: 1.5rem;
  margin-block-end: 0.1rem;
  color: var(--bh-cyan);
  transition: transform 0.45s var(--bh-ease-glide);
}

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

.cap:hover .cap__arrow {
  transform: translateX(0.3rem);
}

/* Proof ------------------------------------------------------------------- */

/* Text links: mono, underlined in cyan, with the arrow nudging on hover. */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-block-end: 0.35rem;
  border-block-end: 1px solid var(--bh-cyan);
  color: var(--bh-white);
  text-decoration: none;
  transition: color 0.3s var(--bh-ease-out);
}

.text-link:hover {
  color: var(--bh-cyan);
}

.text-link__arrow {
  display: inline-flex;
  width: 1.1rem;
  color: var(--bh-cyan);
  transition: transform 0.45s var(--bh-ease-glide);
}

.text-link__arrow svg,
.result__arrow svg,
.result__go svg {
  width: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.text-link:hover .text-link__arrow {
  transform: translateX(0.25rem);
}

.proof__head {
  grid-column: 1 / span 10;
}

.proof__aside {
  grid-column: 11 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  align-self: end;
  padding-block-end: 0.5rem;
}

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

.proof__grid {
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bh-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Proof cards: the orb card plus discipline, figure, descriptor and a footer. */
.result {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-block-size: 22rem;
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
}

.result__discipline {
  color: var(--bh-cyan);
  font-size: var(--bh-step-label);
}

.result__figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1em 0.35em;
  margin-block-start: auto;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-figure);
  font-weight: var(--bh-weight-statement);
  letter-spacing: -0.05em;
  line-height: 1;
}

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

.result__arrow {
  display: inline-flex;
  align-self: center;
  width: 0.55em;
  color: var(--bh-cyan);
}

.result__label {
  color: var(--bh-muted);
  font-size: var(--bh-step-body-lg);
  line-height: var(--bh-leading-body);
}

.result__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: auto;
  padding-block-start: 1.75rem;
}

.result__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
  color: var(--bh-cyan);
  font-size: var(--bh-step-label);
}

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

.result .pending-tag {
  margin: 0;
}

/* On proof cards the footer sits low, so the arc is smaller and kept further into the corner. */
.result[data-orb="arc"] .orb-card__bubble {
  inset-inline-start: -26%;
  inset-block-end: -50%;
  height: 68%;
}

.result[data-orb="arc"] .orb-card__bubble--small {
  inset-inline-end: 12%;
  inset-block-start: 10%;
}

.result__go {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.75rem;
  border: 1px solid var(--bh-cyan);
  border-radius: 50%;
  color: var(--bh-cyan);
  transition: background 0.35s var(--bh-ease-out), color 0.35s var(--bh-ease-out), transform 0.45s var(--bh-ease-glide);
}

.result__go:hover {
  background: var(--bh-cyan);
  color: #05030a;
  transform: translateX(0.15rem);
}

.proof__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--bh-line);
}

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

/* Selected work ----------------------------------------------------------- */

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

.work__aside {
  grid-column: 9 / span 4;
  align-self: end;
  margin: 0;
  color: color-mix(in srgb, var(--bh-white) 56%, transparent);
  font-size: var(--bh-step-micro);
  line-height: var(--bh-leading-body);
}

.work__grid {
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--bh-grid-gap);
  row-gap: clamp(3rem, 5vw, 5rem);
  margin: var(--bh-space-md) 0 0;
  padding: 0;
  list-style: none;
}

.project {
  transform-origin: 50% 100%;
}

.project:nth-child(even) {
  margin-block-start: clamp(3rem, 6vw, 6rem);
}

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

.project__media {
  position: relative;
  display: block;
  padding-block-start: 65%;
  border-radius: var(--bh-radius);
  overflow: hidden;
  background: linear-gradient(150deg, var(--bh-purple-deep), var(--bh-black-soft));
  transition: transform 0.7s var(--bh-ease-out);
}

.project--purple .project__media {
  background: linear-gradient(150deg, #2a0f52, #120b1d 70%, #05030a);
}

.project--cyan .project__media {
  background: radial-gradient(circle at 70% 30%, rgb(24 217 255 / 22%), transparent 45%), linear-gradient(150deg, #0d1a2b, #05030a);
}

.project--magenta .project__media {
  background: radial-gradient(circle at 20% 80%, rgb(255 43 189 / 22%), transparent 45%), linear-gradient(150deg, #1b0b33, #05030a);
}

.project--deep .project__media {
  background: linear-gradient(150deg, #0b0712, #05030a);
}

.project__media picture,
.project__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--bh-ease-out);
}

.project__index {
  position: absolute;
  inset-block-start: 1.25rem;
  inset-inline-start: 1.25rem;
  color: color-mix(in srgb, var(--bh-white) 60%, transparent);
  font-size: var(--bh-step-label);
}

.project__pending {
  position: absolute;
  inset-block-end: 1.1rem;
  inset-inline-end: 1.1rem;
  padding: 0.5em 0.9em;
  border: 1px dashed color-mix(in srgb, var(--bh-white) 30%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--bh-white) 56%, transparent);
  font-size: var(--bh-step-micro);
  letter-spacing: var(--bh-tracking-label);
}

.project__meta {
  display: block;
  margin: 1.4rem 0 0.6rem;
  color: color-mix(in srgb, var(--bh-white) 56%, transparent);
  font-size: var(--bh-step-micro);
}

.project__title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h2);
  font-weight: var(--bh-weight-statement);
  letter-spacing: var(--bh-tracking-heading);
  line-height: 1;
}

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

@media (hover: hover) {
  .project__link:hover .project__media img,
  .project__link:focus-visible .project__media img {
    transform: scale(1.04);
  }

  .project__link:hover .project__arrow,
  .project__link:focus-visible .project__arrow {
    opacity: 1;
    transform: translateX(0);
  }
}

.work__actions {
  grid-column: 1 / span 12;
  display: flex;
  justify-content: center;
  margin-block-start: var(--bh-space-md);
}

/* Process: how we work. Dave's design (parts/homepage/process.php): the promise with its
   second line in the accent and a short intro beside it, four steps each in its own bubble
   with the number in the accent, then a note and the call to action on a hairline. The
   bubbles drift on their own cycles and lift under the pointer. ----------------------- */

.process {
  --process-accent: #6b2fb8;
}

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

/* Two lines beside the intro: a step below the statement size. */
.process__title {
  max-width: 13em;
  font-size: clamp(2.2rem, 4.2vw, 4.4rem);
}

.process__accent {
  display: block;
  color: var(--process-accent);
}

.process__intro {
  grid-column: 9 / span 4;
  align-self: end;
  max-width: 22rem;
  margin: 0 0 0.35em;
  color: var(--bh-muted);
  font-size: var(--bh-step-body-lg);
  line-height: var(--bh-leading-body);
  text-wrap: pretty;
}

.process__grid {
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bh-space-md) var(--bh-grid-gap);
  margin: var(--bh-space-md) 0 0;
  padding: 0;
  list-style: none;
}

.step {
  display: flex;
  flex-direction: column;
}

.step__bubble {
  margin: 0 0 0.9rem;
  padding-inline: 3%;
  transition: translate 0.6s var(--bh-ease-glide);
}

.step__bubble img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 1.2rem 1.4rem rgb(60 30 120 / 12%));
  animation: process-drift 9s ease-in-out infinite alternate;
}

.step:nth-child(2) .step__bubble img {
  animation-delay: -2.4s;
}

.step:nth-child(3) .step__bubble img {
  animation-delay: -4.8s;
  animation-duration: 10s;
}

.step:nth-child(4) .step__bubble img {
  animation-delay: -7s;
  animation-duration: 11s;
}

.step:hover .step__bubble {
  translate: 0 -0.5rem;
}

@keyframes process-drift {
  from {
    translate: 0 0.6%;
    rotate: -0.6deg;
  }

  to {
    translate: 0 -2.2%;
    rotate: 0.6deg;
  }
}

.step__body {
  padding-block-start: 1.2rem;
  border-block-start: 1px solid var(--bh-line);
}

.step__index {
  display: block;
  margin-block-end: 0.5rem;
  color: var(--process-accent);
  font-size: var(--bh-step-label);
  font-weight: var(--bh-weight-heading);
  letter-spacing: var(--bh-tracking-label);
  line-height: 1;
}

.step__title {
  margin: 0 0 0.5rem;
  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);
  text-wrap: balance;
}

.step__copy {
  margin: 0;
  color: var(--bh-muted);
  line-height: var(--bh-leading-body);
  text-wrap: pretty;
}

.process__foot {
  grid-column: 1 / span 12;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-block-start: var(--bh-space-md);
  padding-block-start: var(--bh-space-md);
  border-block-start: 1px solid var(--bh-line);
}

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

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

  .step__bubble {
    transition: none;
  }
}

/* The services by name under the system cards: the homepage's own statement of which
   pages are the services, for a reader skimming and for a search engine reading. ----- */

.system__services {
  grid-column: 1 / span 12;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.5rem;
  margin-block-start: var(--bh-space-md);
  padding-block-start: var(--bh-space-md);
  border-block-start: 1px solid var(--bh-line);
}

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

.system__services ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.system__services a {
  position: relative;
  font-size: var(--bh-step-body-lg);
  font-weight: var(--bh-weight-statement);
  letter-spacing: var(--bh-tracking-heading);
  text-decoration: none;
}

.system__services a::after {
  content: "";
  position: absolute;
  inset-block-end: -0.15em;
  inset-inline: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.25;
  transition: opacity 0.35s var(--bh-ease-out);
}

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

@media (max-width: 47.99rem) {
  .system__services {
    grid-column: 1 / span 6;
  }
}

/* The journey ---------------------------------------------------------------- */

/*
 * Static layout first: still image, then the copy. journey.js adds `is-live` when the
 * Three.js scene runs and turns the inner wrapper into a full-viewport sticky stage.
 */
/* Always dark: the journey is space. */
.journey {
  --bh-white: #f7f5fb;
  --bh-muted: #b9b1c4;
  --bh-line: rgb(255 255 255 / 14%);
  --bh-surface: #120b1d;
  --bh-black: #05030a;
  --bh-black-soft: #0b0712;
  --bh-cyan: #18d9ff;
  --bh-magenta: #ff2bbd;
  position: relative;
  z-index: 0;
  padding: var(--bh-space-2xl) var(--bh-gutter) 0;
  background: var(--bh-black);
}

.journey__sticky {
  position: relative;
  width: min(100%, var(--bh-container));
  margin-inline: auto;
}

.journey__canvas {
  display: none;
}

.journey__fallback {
  position: relative;
  margin: 0 0 var(--bh-space-lg);
  aspect-ratio: 16 / 9;
  border-radius: var(--bh-radius);
  overflow: hidden;
  background: var(--bh-black);
}

.journey__fallback img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}

.journey__flash {
  display: none;
}

.journey__stage {
  position: relative;
}

.journey__stage--tunnel {
  display: none;
}

.journey__intro {
  width: min(100%, var(--bh-container));
  margin-inline: auto;
}

.journey__intro .lede {
  max-width: 34rem;
}

.journey__landing {
  padding-block: var(--bh-space-xl) var(--bh-space-2xl);
  text-align: center;
}

.journey__kicker {
  margin: 0 auto 1.4rem;
  color: color-mix(in srgb, var(--bh-white) 66%, transparent);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-wide);
}

.journey__cta {
  max-width: 8em;
  margin: 0 auto;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-hero-xl);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-wrap: balance;
}

.journey__cta a {
  color: inherit;
  text-decoration: none;
}

.journey__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-block-start: clamp(1.75rem, 3.5vw, 2.6rem);
}

.journey__line {
  margin: 0;
  color: var(--bh-white);
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-title);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-align: center;
  text-wrap: balance;
}

.journey__caption {
  display: none;
}

.credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: var(--bh-space-lg) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--bh-step-micro);
}

.journey__landing .credentials {
  justify-content: center;
}

.credentials li {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 0.95em;
  border: 1px solid var(--bh-line);
  border-radius: 999px;
  color: color-mix(in srgb, var(--bh-white) 74%, transparent);
}

.credentials li::before {
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: var(--bh-cyan);
  content: "";
}

.credentials li.is-pending {
  border-style: dashed;
  color: color-mix(in srgb, var(--bh-white) 46%, transparent);
}

.credentials li.is-pending::before {
  background: rgb(255 43 189 / 80%);
}

/* Live scene ------------------------------------------------------------------- */

.journey.is-live {
  height: 600vh;
  padding: 0;
}

.journey.is-live .journey__sticky {
  position: sticky;
  inset-block-start: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: clip;
}

.journey.is-live .journey__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.journey.is-live .journey__fallback {
  display: none;
}

.journey.is-live .journey__flash {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--bh-white) 95%, transparent), rgb(24 217 255 / 70%) 40%, rgb(255 43 189 / 25%) 70%, transparent 100%);
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}

.journey.is-live .journey__stage {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  align-items: center;
  width: 100%;
  padding: calc(var(--bh-header-height) + 1rem) var(--bh-gutter) var(--bh-space-lg);
  pointer-events: none;
}

.journey.is-live .journey__stage a,
.journey.is-live .journey__stage button {
  pointer-events: auto;
}

.journey.is-live .journey__stage--intro {
  visibility: visible;
}

.journey.is-live .journey__stage--tunnel {
  display: grid;
  place-items: center;
}

.journey.is-live .journey__line {
  position: absolute;
  inset-inline: var(--bh-gutter);
  max-width: 18em;
  margin-inline: auto;
  opacity: 0;
  visibility: hidden;
  text-shadow: 0 0 0.6rem rgb(5 3 10 / 90%), 0 0 2rem rgb(5 3 10 / 85%), 0 0 4rem rgb(5 3 10 / 70%);
}

.journey.is-live .journey__stage--landing {
  align-items: start;
  visibility: hidden;
}

.journey.is-live .journey__landing {
  width: min(100%, var(--bh-container));
  margin-inline: auto;
  padding-block: clamp(0.5rem, 3vh, 2rem) 0;
}

.journey.is-live .journey__cta {
  text-shadow: 0 0 4rem rgb(5 3 10 / 85%);
}

.journey.is-live .journey__caption {
  position: absolute;
  z-index: 2;
  inset: auto 0 clamp(2rem, 6vh, 4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin: 0;
  color: color-mix(in srgb, var(--bh-white) 70%, transparent);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-wide);
  pointer-events: none;
}

.journey.is-live .journey__caption .cross {
  position: static;
}

/* The studio band slides over the journey's last screen like a curtain. It fills the
   viewport, so by the time its copy is centred the scene is fully covered; the footer
   then follows it normally. */
.has-journey .journey + .band {
  min-block-size: 100vh;
  min-block-size: 100svh;
  margin-block-start: -100vh;
  margin-block-start: -100svh;
}

/* Footer ------------------------------------------------------------------ */

.site-footer {
  --bh-white: #f7f5fb;
  --bh-muted: #b9b1c4;
  --bh-line: rgb(255 255 255 / 14%);
  --bh-surface: #120b1d;
  --bh-black: #05030a;
  --bh-black-soft: #0b0712;
  --bh-cyan: #18d9ff;
  --bh-magenta: #ff2bbd;
  position: relative;
  z-index: 2;
  padding-inline: var(--bh-gutter);
  border-block-start: 1px solid var(--bh-line);
  background:
    radial-gradient(60% 50% at 100% 0%, rgb(60 30 110 / 35%), transparent 70%),
    var(--bh-black-soft);
  color: var(--bh-white);
  overflow: hidden;
}

.site-footer__inner {
  width: min(100%, var(--bh-container));
  margin-inline: auto;
  padding: var(--bh-space-xl) 0 var(--bh-space-md);
}

/* The closer: one last invitation, the pill with its halo, the bubble drifting at the
   corner. ------------------------------------------------------------------------- */

.closer {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--bh-grid-gap);
  row-gap: var(--bh-space-md);
  align-items: center;
  padding-block-end: var(--bh-space-lg);
}

.closer__copy {
  grid-column: 1 / span 6;
  position: relative;
  z-index: 1;
}

/* The eyebrow's line follows the words here rather than leading them. */
.closer__eyebrow::before {
  display: none;
}

.closer__eyebrow::after {
  width: 4.5rem;
  height: 1px;
  background: currentColor;
  content: "";
}

.closer__title {
  margin: 0 0 1.1rem;
}

.closer__lede {
  max-width: 34rem;
  margin: 0;
}

.closer__action {
  grid-column: 8 / span 4;
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  text-align: center;
}

.closer__note {
  margin: 0;
  color: var(--bh-muted);
  font-size: var(--bh-step-small);
}

.closer__orb {
  position: absolute;
  inset-block-start: -38%;
  inset-inline-end: -14%;
  width: 36%;
  aspect-ratio: 1;
  pointer-events: none;
}

.closer__bubble {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: closer-float 16s ease-in-out infinite alternate;
}

.closer__bubble--small {
  inset: auto 76% 14% auto;
  width: 9%;
  height: auto;
  animation-duration: 10s;
  animation-delay: -3s;
}

.closer__bubble--tiny {
  inset: 32% auto auto 2%;
  width: 5%;
  height: auto;
  opacity: 0.85;
  animation-duration: 12s;
  animation-delay: -7s;
}

@keyframes closer-float {
  from {
    translate: 0 0;
    rotate: 0deg;
  }

  to {
    translate: -2.5% 4%;
    rotate: 7deg;
  }
}

/* The rule between the closer and the columns, with a light that sweeps to the middle
   the first time the footer is on screen (homepage.js adds is-in). ------------------ */

.site-footer__rule {
  position: relative;
  height: 1px;
  margin-block: 0 var(--bh-space-lg);
  background: var(--bh-line);
  overflow: hidden;
}

.site-footer__rule span {
  position: absolute;
  inset: 0 auto 0 50%;
  width: 24%;
  translate: -50% 0;
  background: linear-gradient(90deg, transparent, var(--bh-cyan) 35%, var(--bh-magenta) 65%, transparent);
  opacity: 0;
}

.site-footer.is-in .site-footer__rule span {
  animation: rule-sweep 2.2s var(--bh-ease-glide) 0.2s both;
}

@keyframes rule-sweep {
  from {
    translate: -300% 0;
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  to {
    translate: -50% 0;
    opacity: 1;
  }
}

/* The columns. ---------------------------------------------------------------------- */

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--bh-grid-gap);
  row-gap: var(--bh-space-lg);
}

.site-footer__brand {
  grid-column: 1 / span 3;
}

.site-footer__col--explore {
  grid-column: 4 / span 2;
}

.site-footer__col--services {
  grid-column: 6 / span 3;
}

.site-footer__col--connect {
  grid-column: 9 / span 2;
}

.site-footer__col--legal {
  grid-column: 11 / span 2;
}

.site-footer__tagline {
  max-width: 20rem;
  margin: 1.25rem 0 0;
  color: color-mix(in srgb, var(--bh-white) 72%, transparent);
  font-size: var(--bh-step-body-lg);
  line-height: var(--bh-leading-snug);
}

.site-footer__meta {
  margin: 1.1rem 0 0;
  color: color-mix(in srgb, var(--bh-white) 46%, transparent);
  font-size: var(--bh-step-micro);
  letter-spacing: var(--bh-tracking-label);
  line-height: var(--bh-leading-body);
}

.site-footer__sep {
  margin-inline: 0.4em;
  color: var(--bh-cyan);
}

.site-footer__heading {
  margin: 0 0 1.1rem;
  color: var(--bh-cyan);
  font-size: var(--bh-step-micro);
  font-weight: var(--bh-weight-label);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

.site-footer__links {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  color: color-mix(in srgb, var(--bh-white) 82%, transparent);
  font-size: var(--bh-step-body);
  text-decoration: none;
  transition: color 0.3s var(--bh-ease-out);
}

.site-footer__arrow {
  display: inline-flex;
  width: 0.9em;
  height: 0.9em;
  opacity: 0.5;
  transition: opacity 0.3s var(--bh-ease-out), transform 0.45s var(--bh-ease-glide), color 0.3s var(--bh-ease-out);
}

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

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: var(--bh-white);
}

.site-footer__links a:hover .site-footer__arrow,
.site-footer__links a:focus-visible .site-footer__arrow {
  color: var(--bh-cyan);
  opacity: 1;
  transform: translateX(0.3em);
}

/* The status bar. ------------------------------------------------------------------- */

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-block-start: var(--bh-space-xl);
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--bh-line);
  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;
}

.site-footer__bottom p {
  margin: 0;
}

.site-footer__top {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  color: color-mix(in srgb, var(--bh-white) 72%, transparent);
  text-decoration: none;
  transition: color 0.3s var(--bh-ease-out);
}

.site-footer__top-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--bh-line);
  border-radius: 50%;
  overflow: hidden;
  transition: border-color 0.3s var(--bh-ease-out), color 0.3s var(--bh-ease-out);
}

.site-footer__top-icon svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  transition: transform 0.45s var(--bh-ease-glide);
}

.site-footer__top:hover,
.site-footer__top:focus-visible {
  color: var(--bh-white);
}

.site-footer__top:hover .site-footer__top-icon,
.site-footer__top:focus-visible .site-footer__top-icon {
  border-color: var(--bh-cyan);
  color: var(--bh-cyan);
}

.site-footer__top:hover .site-footer__top-icon svg,
.site-footer__top:focus-visible .site-footer__top-icon svg {
  transform: translateY(-0.18rem);
}

@media (prefers-reduced-motion: reduce) {
  .closer__bubble,
  .site-footer.is-in .site-footer__rule span {
    animation: none;
  }

  .site-footer__rule span {
    opacity: 1;
  }
}

@media (max-width: 68rem) {
  .closer__copy {
    grid-column: 1 / -1;
  }

  .closer__action {
    grid-column: 1 / -1;
    justify-items: start;
    text-align: start;
  }

  .closer__orb {
    inset-block-start: -10%;
    inset-inline-end: -22%;
    width: 46%;
    opacity: 0.7;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  .site-footer__col--explore,
  .site-footer__col--connect {
    grid-column: 1 / span 6;
  }

  .site-footer__col--services,
  .site-footer__col--legal {
    grid-column: 7 / span 6;
  }
}

@media (max-width: 40rem) {
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Responsive ---------------------------------------------------------------- */

@media (max-width: 68rem) {
  .system__head,
  .proof__head,
  .work__head,
  .process__head {
    grid-column: 1 / span 12;
  }

  .system__copy,
  .work__aside {
    grid-column: 1 / span 8;
  }

  .proof__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .result:last-child {
    grid-column: 1 / span 2;
  }

  .process__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__brand {
    grid-column: 1 / span 12;
  }

  .site-footer__col--explore {
    grid-column: 1 / span 3;
  }

  .site-footer__col--services {
    grid-column: 4 / span 3;
  }

  .site-footer__col--contact {
    grid-column: 7 / span 3;
  }

  .site-footer__col--legal {
    grid-column: 10 / span 3;
  }
}

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

  .scan__intro,
  .scan__panel,
  .system__head,
  .system__copy,
  .system__grid,
  .proof__head,
  .proof__grid,
  .proof__note,
  .work__head,
  .work__aside,
  .work__grid,
  .work__actions,
  .process__head,
  .process__grid {
    grid-column: 1 / span 6;
  }

  .statement {
    max-width: none;
  }

  .system__grid,
  .proof__grid,
  .work__grid,
  .process__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .system__grid::before,
  .system__grid::after,
  .system__node {
    display: none;
  }

  .cap,
  .result {
    min-block-size: 0;
  }

  .result:last-child {
    grid-column: auto;
  }

  .project:nth-child(even) {
    margin-block-start: 0;
  }

  .ribbon {
    display: none;
  }

  .journey.is-live .journey__stage {
    padding-block-start: calc(var(--bh-header-height) + 0.5rem);
  }

  .journey.is-live .journey__landing .credentials {
    display: none;
  }

  .journey__actions {
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 20rem);
    margin-inline: auto;
  }

  .journey__actions .pill {
    justify-content: center;
  }

  .site-footer__col {
    grid-column: 1 / span 12;
  }
}

/* Platform marquee --------------------------------------------------------- */

.marquee-band {
  position: relative;
  padding-block: var(--bh-space-lg);
  overflow: hidden;
  border-block-end: 1px solid var(--bh-line);
}

.marquee-band__label {
  width: min(100%, var(--bh-container));
  margin: 0 auto var(--bh-space-md);
  padding-inline: var(--bh-gutter);
  color: var(--bh-muted);
  font-size: var(--bh-step-label);
}

.marquee {
  display: flex;
  width: max-content;
  gap: clamp(2rem, 4vw, 4rem);
  animation: marquee 48s linear infinite;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee:hover {
  animation-play-state: paused;
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.marquee img {
  display: block;
  width: auto;
  height: 2.25rem;
  opacity: 0.6;
  /* Every logo becomes a pale silhouette, whatever its own colours. */
  filter: grayscale(1) brightness(0) invert(0.85);
  transition: opacity 0.4s var(--bh-ease-out), filter 0.4s var(--bh-ease-out);
}

.marquee__track li:hover img {
  opacity: 1;
  filter: none;
}

/* Client marquee (parts/clients-marquee.php): the marks as pale silhouettes, a little
   taller than the platform logos, slower, lit on hover. */
.marquee-band--clients {
  padding-block: var(--bh-space-md) var(--bh-space-lg);
  border-block-end: 0;
}

.marquee--clients {
  animation-duration: 64s;
}

.marquee--clients img {
  height: 2.75rem;
  opacity: 0.55;
  /* White marks, inverted with the page (--bh-theme runs 0 to 1 as it goes light). */
  filter: invert(var(--bh-theme, 0));
}

.marquee--clients .marquee__track li:hover img {
  opacity: 1;
}

/* Each mark's height is set inline from its aspect (parts/clients-marquee.php). */
.marquee--clients img {
  width: auto;
}

@keyframes marquee {
  to {
    transform: translateX(calc(-50% - clamp(1rem, 2vw, 2rem)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
  }

  .marquee__track[aria-hidden] {
    display: none;
  }
}

/* Ribbon beats: when the line reaches a group it lights up, card by card. ----------- */

@keyframes beat-glow {
  0% {
    border-color: var(--bh-line);
    box-shadow: 0 0 0 0 transparent;
  }

  30% {
    border-color: var(--bh-cyan);
    box-shadow: 0 0 2.6rem 0 color-mix(in srgb, var(--bh-cyan) 42%, transparent);
  }

  100% {
    border-color: var(--bh-line);
    box-shadow: 0 0 0 0 transparent;
  }
}

@keyframes node-ring {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--bh-cyan) 75%, transparent), 0 0 0 0 color-mix(in srgb, var(--bh-magenta) 45%, transparent);
  }

  100% {
    box-shadow: 0 0 0 7rem transparent, 0 0 0 12rem transparent;
  }
}

@keyframes index-flash {
  40% {
    color: var(--bh-white);
    text-shadow: 0 0 1.2rem color-mix(in srgb, var(--bh-cyan) 80%, transparent);
  }
}

@keyframes orb-beat {
  0% {
    box-shadow: var(--orb-shadow);
  }

  30% {
    box-shadow: 0 0 3.2rem 0 rgb(24 217 255 / 32%), 0 0 1rem 0 rgb(255 43 189 / 18%), var(--orb-shadow);
  }

  100% {
    box-shadow: var(--orb-shadow);
  }
}

@keyframes orb-border {
  0% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes bubble-sweep {
  0% {
    background-position: 120% 0;
    opacity: 0;
  }

  18% {
    opacity: 1;
  }

  82% {
    opacity: 1;
  }

  100% {
    background-position: -20% 0;
    opacity: 0;
  }
}

.work__grid.is-lit .project {
  animation: beat-glow 1.7s var(--bh-ease-out) both;
}

.is-lit .orb-card {
  animation: orb-beat 1.8s var(--bh-ease-out) both;
}

.is-lit .orb-card::before {
  animation: orb-border 1.8s var(--bh-ease-out) both;
}

.is-lit .orb-card .orb-card__bubble::before {
  animation: bubble-sweep 1.4s var(--bh-ease-out) 0.25s both;
}

.is-lit .orb-card:nth-child(2),
.is-lit .orb-card:nth-child(2)::before,
.work__grid.is-lit .project:nth-child(2) {
  animation-delay: 0.16s;
}

.is-lit .orb-card:nth-child(2) .orb-card__bubble::before {
  animation-delay: 0.41s;
}

.is-lit .orb-card:nth-child(3),
.is-lit .orb-card:nth-child(3)::before,
.work__grid.is-lit .project:nth-child(3) {
  animation-delay: 0.32s;
}

.is-lit .orb-card:nth-child(3) .orb-card__bubble::before {
  animation-delay: 0.57s;
}

.is-lit .orb-card:nth-child(4),
.is-lit .orb-card:nth-child(4)::before,
.work__grid.is-lit .project:nth-child(4) {
  animation-delay: 0.48s;
}

.is-lit .orb-card:nth-child(4) .orb-card__bubble::before {
  animation-delay: 0.73s;
}

@media (prefers-reduced-motion: reduce) {
  .is-lit .orb-card .orb-card__bubble::before {
    animation: none;
  }
}

.system__grid.is-lit .system__node {
  animation: node-ring 1.6s var(--bh-ease-out) 1;
}

.process__grid.is-lit .step__index {
  animation: index-flash 1.3s var(--bh-ease-out) both;
}

.process__grid.is-lit .step:nth-child(2) .step__index {
  animation-delay: 0.18s;
}

.process__grid.is-lit .step:nth-child(3) .step__index {
  animation-delay: 0.36s;
}

.process__grid.is-lit .step:nth-child(4) .step__index {
  animation-delay: 0.54s;
}

/* Journey reveal: the ribbon's end becomes a bubble that grows to fill the view. ------ */

.journey__scene {
  position: relative;
}

.journey.is-live .journey__scene {
  position: absolute;
  inset: 0;
  clip-path: circle(var(--reveal, 0px) at 50% 20%);
}

.journey__bubble {
  display: none;
}

.journey.is-live .journey__bubble {
  position: absolute;
  z-index: 4;
  inset-block-start: 20%;
  inset-inline-start: 50%;
  display: block;
  width: calc(var(--reveal, 0px) * 2);
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 50%;
  box-shadow:
    inset 0 0 4rem rgb(24 217 255 / 22%),
    inset 0 0 1.5rem rgb(255 43 189 / 18%),
    0 0 5rem rgb(24 217 255 / 22%);
  opacity: var(--rim, 1);
  pointer-events: none;
}

/* The soap film itself: the card bubble's cutout laid over the circle. Its rim is a
   circle of radius 407px about (438, 454) in the 900 by 915 picture (measured from the
   alpha), so the picture is 900/814 of the circle's diameter and centred at 48.7%/49.6%
   of itself; the faint halo beyond the rim then spills a little past the ring, as it should. */
.journey__film {
  display: none;
}

.journey.is-live .journey__film {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: block;
  width: 110.6%;
  max-width: none; /* the global img cap would pin it to the ring's width */
  height: auto;
  aspect-ratio: 900 / 915;
  /* Its rim centre (48.7%, 49.6% of the picture) lands on the box centre. */
  translate: -48.7% -49.6%;
  opacity: var(--film, 1);
  pointer-events: none;
}

.journey__ring {
  position: absolute;
  inset: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  overflow: visible;
  filter: drop-shadow(0 0 6px rgb(255 43 189 / 85%)) drop-shadow(0 0 18px rgb(255 43 189 / 45%));
}

.journey__ring-half {
  fill: none;
  stroke: var(--bh-magenta);
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-dasharray: 0.5 1;
  stroke-dashoffset: 0.5;
}

@media (max-width: 60rem) {
  .proof__aside {
    grid-column: 1 / -1;
    align-self: start;
    padding-block-end: 0;
  }

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

/* Image band (parts/band.php): a still filling one side of a dark section and fading into
   it, the copy on the other. Always dark, whatever the page is doing. ------------------ */

.band {
  --bh-white: #f7f5fb;
  --bh-muted: #b9b1c4;
  --bh-line: rgb(255 255 255 / 14%);
  --bh-black: #05030a;
  --bh-cyan: #18d9ff;
  --bh-magenta: #ff2bbd;
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  min-block-size: min(78vh, 42rem);
  overflow: hidden;
  color: var(--bh-white);
  background: #05030a;
}

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

.band__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 42%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
}

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

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

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

.band__media.has-loop > img.band__still {
  opacity: 0;
}

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

.band--left .band__still {
  inset-inline-start: 0;
  inset-inline-end: auto;
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 42%);
  mask-image: linear-gradient(270deg, transparent 0%, #000 42%);
}

/* A little weight at the top and bottom so the still sits inside the page's ink. */
.band__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(5 3 10 / 55%), transparent 30%, transparent 70%, rgb(5 3 10 / 65%));
  content: "";
}

/* The band's own ink stops dead at its edges, so wherever the page is a different colour
   the join reads as a ruled line across the screen. The first and last inch of the band
   fades to whatever the page is painted at that moment (--bh-page follows the scroll), so
   the band grows out of the page and settles back into it. */
.band::before,
.band::after {
  position: absolute;
  z-index: 1;
  inset-inline: 0;
  block-size: min(11rem, 15vh);
  pointer-events: none;
  content: "";
}

.band::before {
  inset-block-start: 0;
  background: linear-gradient(180deg, var(--bh-page, #05030a), transparent);
}

.band::after {
  inset-block-end: 0;
  background: linear-gradient(0deg, var(--bh-page, #05030a), transparent);
}

.band__grid {
  position: relative;
  z-index: 2;
}

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

.band--left .band__copy {
  grid-column: 7 / span 6;
}

.band__title {
  max-width: 13em;
  font-size: var(--bh-step-title);
}

.band__lede {
  max-width: 34em;
  margin-block-start: clamp(1rem, 2vw, 1.5rem);
}

.band__points {
  display: grid;
  gap: 0.5rem;
  margin: clamp(1.25rem, 2vw, 1.75rem) 0 0;
  padding: 0;
  list-style: none;
  color: var(--bh-muted);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

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

.band__points li::before {
  width: 1.4rem;
  height: 1px;
  background: var(--bh-cyan);
  content: "";
}

.band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: clamp(1.6rem, 3vw, 2.4rem);
}

@media (max-width: 63.99rem) {
  .band {
    display: block;
    min-block-size: 0;
    padding-block-start: 0;
  }

  .band__media {
    position: relative;
    height: 58vw;
    max-height: 26rem;
  }

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

  .band__media::after {
    display: none;
  }

  .band__grid {
    margin-block-start: -3rem;
  }

  .band__copy,
  .band--left .band__copy {
    grid-column: 1 / -1;
  }
}

/* Process on narrower screens: the intro under the head, two bubbles a row, the note above
   the action. These follow the shared breakpoints above and so take precedence. ------- */

@media (max-width: 68rem) {
  .process__intro,
  .process__foot {
    grid-column: 1 / span 12;
  }

  .process__intro {
    max-width: 30rem;
    margin-block-start: 0.5rem;
  }
}

@media (max-width: 47.99rem) {
  .process__intro,
  .process__foot {
    grid-column: 1 / span 6;
  }

  .process__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem var(--bh-grid-gap);
  }

  .step__title {
    font-size: var(--bh-step-h4);
  }

  .step__copy {
    font-size: var(--bh-step-small);
  }

  .process__foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Corner bubbles on the process section, the clear bubble photograph. ------------------- */

.process {
  position: relative;
  overflow: clip;
}

.process__bubble {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  animation: pitch-float 16s ease-in-out infinite alternate;
}

.process__bubble img {
  display: block;
  width: 100%;
  height: auto;
}

.process__bubble--1 {
  inset-block-start: 3%;
  inset-inline-end: 4%;
  width: clamp(4rem, 6vw, 6rem);
}

.process__bubble--2 {
  inset-block-end: 4%;
  inset-inline-start: -3rem;
  width: clamp(6rem, 9vw, 9rem);
  animation-duration: 13s;
  animation-delay: -5s;
}

.process .bh-grid {
  position: relative;
  z-index: 1;
}

/* A step scene: the pieces of a website inside the clear bubble (parts/process-scene.php).
   The scene box keeps the artwork's proportions; the pieces are laid out on a circle
   inset from it, and the bubble photograph sits over them. ----------------------------- */

.step__bubble--scene {
  padding-inline: 0;
}

.scene {
  --scene-ink: #1a1424;
  --scene-accent: #6b2fb8;
  --scene-line: rgb(26 20 36 / 10%);
  position: relative;
  aspect-ratio: 469 / 404;
  width: 100%;
  font-size: clamp(0.5rem, 0.62vw, 0.7rem);
  animation: process-drift 10s ease-in-out infinite alternate;
}

.scene__inner {
  position: absolute;
  inset: 8% 6% 14%;
}

.scene__bubble {
  position: absolute;
  inset-block-start: -1%;
  inset-inline: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* Shared pieces. */
.scene__card,
.scene__node,
.scene__browser,
.scene__tile,
.scene__wire {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid var(--scene-line);
  border-radius: 0.9em;
  background: linear-gradient(160deg, rgb(255 255 255 / 92%), rgb(244 240 250 / 88%));
  box-shadow: 0 1.2em 2.2em rgb(40 20 80 / 12%);
  color: var(--scene-ink);
}

.scene__glyph,
.scene__avatar,
.scene__tile--code {
  display: grid;
  place-items: center;
  color: var(--scene-accent);
}

.scene__glyph svg,
.scene__avatar svg,
.scene__tile--code svg,
.scene__check svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scene__bar {
  display: block;
  height: 0.5em;
  border-radius: 999px;
  background: rgb(26 20 36 / 12%);
}

.scene__bar--short {
  width: 60%;
}

.scene__dots {
  display: flex;
  gap: 0.35em;
  padding: 0.55em 0.7em;
}

.scene__dots b {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: rgb(26 20 36 / 22%);
}

.scene__browser img,
.scene__screen img {
  display: block;
  width: 100%;
  height: auto;
}

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

.scene__browser img {
  border-block-start: 1px solid var(--scene-line);
}

.scene__phone {
  position: absolute;
  box-sizing: border-box;
  padding: 0.35em;
  border-radius: 1.6em;
  background: #16121f;
  box-shadow: 0 1.4em 2.4em rgb(11 7 18 / 26%);
}

.scene__phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.25em;
}

/* 01 Plan: the site map. */
.scene__node {
  display: grid;
  gap: 0.35em;
  justify-items: center;
  width: 22%;
  padding: 0.9em 0.4em 0.7em;
  font-size: 1.1em;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
}

.scene__node .scene__glyph {
  width: 2.2em;
  height: 2.2em;
}

.scene__node--home {
  inset-block-start: 4%;
  inset-inline-start: 39%;
  width: 24%;
}

.scene__lines {
  position: absolute;
  inset-block-start: 33%;
  inset-inline-start: 12%;
  width: 76%;
  height: 16%;
  overflow: visible;
  fill: none;
  stroke: var(--scene-accent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.scene__node--a,
.scene__node--b,
.scene__node--c {
  inset-block-start: 49%;
}

.scene__node--a {
  inset-inline-start: 13%;
}

.scene__node--b {
  inset-inline-start: 39%;
  width: 24%;
}

.scene__node--c {
  inset-inline-start: 65%;
}

.scene__card--customers {
  display: flex;
  align-items: center;
  gap: 0.8em;
  inset-block-end: 2%;
  inset-inline-start: 21%;
  width: 58%;
  padding: 0.8em 1em;
}

.scene__avatar {
  flex: none;
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--scene-accent) 14%, #fff);
  padding: 0.5em;
}

.scene__text {
  display: grid;
  flex: 1;
  gap: 0.35em;
  font-size: 1em;
  font-weight: 600;
}

/* 02 Design: wireframes behind the designed page, type and colour beside it. */
.scene__wire {
  display: grid;
  gap: 0.5em;
  width: 34%;
  padding: 0.8em;
  opacity: 0.85;
}

.scene__wire i {
  display: block;
  height: 1.2em;
  border-radius: 0.3em;
  background: rgb(26 20 36 / 9%);
}

.scene__wire i:first-child {
  height: 3.2em;
}

.scene__wire--1 {
  inset-block-start: 8%;
  inset-inline-start: 8%;
}

.scene__wire--2 {
  inset-block-start: 4%;
  inset-inline-start: 30%;
  width: 30%;
  opacity: 0.6;
}

.scene__browser--design {
  inset-block-start: 26%;
  inset-inline-start: 26%;
  width: 66%;
  transform: rotateY(-6deg);
}

.scene__tile {
  display: grid;
  place-items: center;
  width: 17%;
  aspect-ratio: 1;
  font-size: 1.9em;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.scene__tile--type {
  inset-block-end: 6%;
  inset-inline-start: 12%;
}

.scene__swatches {
  position: absolute;
  inset-block-end: 6%;
  inset-inline-start: 33%;
  display: flex;
  gap: 0.5em;
  padding: 0.5em;
  border: 1px solid var(--scene-line);
  border-radius: 0.8em;
  background: rgb(255 255 255 / 90%);
  box-shadow: 0 1em 2em rgb(40 20 80 / 12%);
}

.scene__swatches i {
  width: 2.6em;
  height: 2.6em;
  border-radius: 0.4em;
  background: var(--swatch);
}

/* 03 Build: the code tile above the page on a browser and a phone. */
.scene__tile--code {
  inset-block-start: 2%;
  inset-inline-start: 41%;
  width: 20%;
  padding: 1.2em;
}

.scene__browser--build {
  inset-block-start: 26%;
  inset-inline-start: 6%;
  width: 66%;
  transform: rotateY(-8deg);
}

.scene__phone--build {
  inset-block-end: 4%;
  inset-inline-end: 8%;
  width: 24%;
  transform: rotateY(-10deg) rotateZ(2deg);
}

/* 04 Launch: the site on a monitor and a phone, the check on the corner. */
.scene__monitor {
  position: absolute;
  inset-block-start: 14%;
  inset-inline-start: 8%;
  width: 70%;
}

.scene__screen {
  display: block;
  overflow: hidden;
  border: 0.35em solid #fbfaff;
  border-radius: 0.8em;
  background: #fbfaff;
  box-shadow: 0 1.2em 2.2em rgb(40 20 80 / 14%), 0 0 0 1px var(--scene-line);
}

.scene__stand {
  display: block;
  width: 12%;
  height: 2em;
  margin: 0 auto;
  background: linear-gradient(#d8d2e4, #b8b1c6);
}

.scene__foot {
  display: block;
  width: 36%;
  height: 0.7em;
  margin: 0 auto;
  border-radius: 999px;
  background: #cfc8dc;
}

.scene__phone--launch {
  inset-block-end: 4%;
  inset-inline-end: 6%;
  width: 22%;
  transform: rotateY(-8deg);
}

.scene__check {
  position: absolute;
  inset-block-start: 4%;
  inset-inline-end: 4%;
  display: grid;
  place-items: center;
  width: 17%;
  aspect-ratio: 1;
  padding: 1em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5ee8ff, #12a6d9 70%);
  box-shadow: 0 0.8em 1.8em rgb(18 166 217 / 35%), inset 0 0 0 0.35em rgb(255 255 255 / 55%);
  color: #fff;
}

.scene__check svg {
  stroke-width: 2.4;
}

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

/* Client voices: Dave's design. One featured quote on the left, three shorter ones stacked
   on the right, each a soft white card with a purple quote mark, the person and their
   role beneath; two bubbles drift at the corners. The excerpts are lines from the full
   testimonials in inc/about-content.php. ------------------------------------------ */

.voices {
  --voices-accent: #6b2fb8;
  position: relative;
  overflow: clip;
}

.voices__head {
  grid-column: 1 / span 9;
  position: relative;
  z-index: 1;
}

.voices__accent {
  color: var(--voices-accent);
}

.voices__grid {
  grid-column: 1 / -1;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--bh-grid-gap);
  align-items: stretch;
  margin-block-start: 0.5rem;
}

.voices__stack {
  display: grid;
  gap: clamp(0.85rem, 1.4vw, 1.25rem);
  align-content: stretch;
}

.voice {
  position: relative;
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: clamp(1.25rem, 2.2vw, 1.9rem) clamp(1.35rem, 2.4vw, 2.1rem);
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius);
  background: color-mix(in srgb, #fff 72%, transparent);
  box-shadow: 0 1.4rem 3rem rgb(11 7 18 / 5%);
  transition: border-color 0.35s var(--bh-ease-out), translate 0.5s var(--bh-ease-glide), box-shadow 0.5s var(--bh-ease-out);
}

.voice:hover {
  translate: 0 -3px;
  border-color: color-mix(in srgb, var(--voices-accent) 40%, transparent);
  box-shadow: 0 1.8rem 3.4rem rgb(11 7 18 / 8%);
}

.voice__mark {
  display: block;
  color: var(--voices-accent);
  font-family: var(--bh-font-display);
  font-size: 2.6rem;
  font-weight: var(--bh-weight-display);
  line-height: 0.6;
}

.voice__quote {
  margin: 0;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-body-lg);
  font-weight: var(--bh-weight-body);
  line-height: var(--bh-leading-snug);
  letter-spacing: var(--bh-tracking-heading);
  text-wrap: pretty;
}

.voice__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.voice__who {
  display: grid;
  gap: 0.15rem;
}

.voice__name {
  font-weight: var(--bh-weight-heading);
  font-size: var(--bh-step-body);
  letter-spacing: var(--bh-tracking-heading);
}

.voice__role {
  color: var(--bh-muted);
  font-size: var(--bh-step-small);
}

.voice__company {
  color: var(--voices-accent);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-wide);
  text-transform: uppercase;
}

/* The featured voice: the quote at heading size, the person on a hairline beneath. */
.voice--featured {
  gap: 1.4rem;
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.6rem, 3vw, 2.75rem);
}

.voice--featured .voice__mark {
  font-size: 4rem;
}

.voice--featured .voice__quote {
  font-size: var(--bh-step-h2);
  font-weight: var(--bh-weight-statement);
  line-height: var(--bh-leading-snug);
}

.voice--featured .voice__foot {
  margin-block-start: auto;
  padding-block-start: 1.4rem;
  border-block-start: 1px solid var(--bh-line);
}

.voice--featured .voice__name {
  font-size: var(--bh-step-body-lg);
}

.voice--featured .voice__role {
  font-size: var(--bh-step-body);
}

/* The compact voices: a quote mark beside the line. */
.voice--compact {
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  column-gap: 0.9rem;
  row-gap: 0.75rem;
}

.voice--compact .voice__mark {
  grid-row: 1 / span 2;
  padding-block-start: 0.1rem;
}

/* A page with one testimonial: the featured card alone, at reading width. */
.voices--single .voices__grid {
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
}

/* Two clear bubbles at the corners. */
.voices__bubble {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  animation: pitch-float 16s ease-in-out infinite alternate;
}

.voices__bubble img {
  display: block;
  width: 100%;
  height: auto;
}

/* On the featured card's bottom corner, below its footer line, half off the page edge. */
.voices__bubble--1 {
  inset-block-end: calc(var(--bh-space-xl) - 7.5rem);
  inset-inline-start: -4.5rem;
  width: clamp(9rem, 13vw, 13rem);
}

.voices__bubble--2 {
  inset-block-start: 12%;
  inset-inline-end: 1%;
  width: clamp(4.5rem, 7vw, 6.5rem);
  animation-duration: 12s;
  animation-delay: -5s;
}

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

  .voices__grid {
    grid-template-columns: 1fr;
  }

  .voices__bubble--1 {
    display: none;
  }

  .voices__bubble--2 {
    inset-block-start: 4%;
    width: 4rem;
  }
}

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

  .voice {
    transition: none;
  }
}