@charset "UTF-8";

/* Type: Plus Jakarta Sans (the old site's body face, SIL Open Font License) for display
   and body, Geist Mono (SIL Open Font License) for labels. Self-hosted, preloaded. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../../fonts/plus-jakarta-sans-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("../../fonts/plus-jakarta-sans-500-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("../../fonts/plus-jakarta-sans-600-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("../../fonts/plus-jakarta-sans-700-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("../../fonts/geist-mono-500-latin.woff2") format("woff2");
}

/* Fallback sized to the web font so a late swap does not reflow. */
@font-face {
  font-family: "Jakarta Fallback";
  src: local("Segoe UI"), local("Arial");
  size-adjust: 104%;
  ascent-override: 96%;
  descent-override: 26%;
}

/*
 * Site shell: tokens, header, hero and the shared components (pills, crosses, rolling
 * labels, odometers, frames). Homepage sections live in homepage.css.
 */

:root {
  --bh-black: #05030a;
  --bh-black-soft: #0b0712;
  --bh-surface: #120b1d;
  --bh-purple: #3b176d;
  --bh-purple-deep: #1b0b33;
  --bh-cyan: #18d9ff;
  --bh-magenta: #ff2bbd;
  --bh-white: #f7f5fb;
  --bh-muted: #b9b1c4;
  --bh-line: color-mix(in srgb, var(--bh-white) 14%, transparent);
  --bh-focus: #76eaff;
  --bh-page: #05030a;
  --bh-container: 90rem;
  --bh-gutter: clamp(1.25rem, 4vw, 5rem);
  --bh-grid-gap: clamp(1rem, 2vw, 2.5rem);
  --bh-radius: clamp(1rem, 1.6vw, 1.5rem);
  --bh-radius-card: 1.2rem;
  --bh-radius-sm: 0.8rem;
  --bh-radius-xs: 0.6rem;
  --bh-cross: clamp(0.8rem, 1vw, 1.1rem);
  --bh-header-height: clamp(5rem, 8vw, 7rem);
  --bh-space-md: 1.5rem;
  --bh-space-lg: clamp(2rem, 4vw, 4rem);
  --bh-space-xl: clamp(4rem, 8vw, 8rem);
  --bh-space-2xl: clamp(6rem, 11vw, 11rem);
  /* Type scale: fluid steps, one role per token. Display sizes are for set pieces only. */
  --bh-step-hero-xl: clamp(2.8rem, 8.4vw, 8.6rem);
  --bh-step-hero: clamp(2.6rem, 5.4vw, 6.4rem);
  --bh-step-statement: clamp(2.3rem, 5.4vw, 5.6rem);
  --bh-step-title: clamp(2rem, 4.4vw, 4.4rem);
  --bh-step-h2: clamp(1.7rem, 2.6vw, 2.6rem);
  --bh-step-h3: clamp(1.3rem, 1.8vw, 1.8rem);
  --bh-step-h4: clamp(1.1rem, 1.3vw, 1.3rem);
  --bh-step-figure: clamp(2.2rem, 3.6vw, 3.8rem);
  --bh-step-numeral: clamp(3.4rem, 11vw, 12rem);
  --bh-step-body-lg: clamp(1.05rem, 1.3vw, 1.3rem);
  --bh-step-body: 1rem;
  --bh-step-small: 0.875rem;
  --bh-step-label: clamp(0.62rem, 0.8vw, 0.72rem);
  --bh-step-micro: 0.6rem;
  /* Leading and tracking follow size: tight and negative for display, open for labels. */
  --bh-leading-display: 0.98;
  --bh-leading-tight: 1.08;
  --bh-leading-snug: 1.25;
  --bh-leading-body: 1.6;
  --bh-leading-label: 1.4;
  --bh-tracking-display: -0.035em;
  --bh-tracking-heading: -0.02em;
  --bh-tracking-label: 0.12em;
  --bh-tracking-wide: 0.2em;
  --bh-weight-display: 600;
  --bh-weight-statement: 500;
  --bh-weight-heading: 600;
  --bh-weight-body: 400;
  --bh-weight-label: 500;
  --bh-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --bh-ease-glide: cubic-bezier(0.4, 0, 0.1, 1);
  --bh-font-display: "Plus Jakarta Sans", "Jakarta Fallback", "Segoe UI", Helvetica, Arial, sans-serif;
  --bh-font-interface: "Plus Jakarta Sans", "Jakarta Fallback", "Segoe UI", system-ui, -apple-system, sans-serif;
  --bh-font-mono: "Geist Mono", "Cascadia Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bh-page);
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bh-page);
  color: var(--bh-white);
  font-family: var(--bh-font-interface);
  font-size: var(--bh-step-body);
  font-weight: var(--bh-weight-body);
  line-height: var(--bh-leading-body);
  font-kerning: normal;
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings: display face, balanced line breaks, no orphans. Paragraphs: even rag. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--bh-font-display);
  font-weight: var(--bh-weight-heading);
  line-height: var(--bh-leading-tight);
  letter-spacing: var(--bh-tracking-heading);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

p,
li,
dd,
blockquote,
figcaption {
  text-wrap: pretty;
}

/* Figures line up in columns and counters. */
.odo,
time,
.result__value,
.about-values__value,
.about-story__year,
table {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Long words break rather than overflow on narrow screens; body copy hyphenates there. */
@media (max-width: 40rem) {
  .prose p,
  .lede,
  .post-card__excerpt {
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

::selection {
  background: var(--bh-cyan);
  color: #05030a;
}

sup,
sub {
  font-size: 0.72em;
  line-height: 0;
  vertical-align: baseline;
  position: relative;
}

sup {
  top: -0.45em;
}

sub {
  bottom: -0.25em;
}

body,
button,
a {
  font-synthesis: none;
}

a {
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.mono {
  font-family: var(--bh-font-mono);
  font-size: var(--bh-step-label);
  font-weight: var(--bh-weight-label);
  line-height: var(--bh-leading-label);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
  font-feature-settings: "kern" 1, "zero" 1;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  padding: 0.75rem 1rem;
  translate: 0 -160%;
  background: var(--bh-white);
  color: var(--bh-black);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  translate: 0;
}

/* Cross markers -------------------------------------------------------- */

.cross {
  position: absolute;
  width: var(--bh-cross);
  height: var(--bh-cross);
  color: color-mix(in srgb, var(--bh-white) 70%, transparent);
  pointer-events: none;
}

.cross::before,
.cross::after {
  position: absolute;
  inset-block-start: calc(50% - 0.5px);
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  content: "";
}

.cross::after {
  rotate: 90deg;
}

/* Pills ---------------------------------------------------------------- */

.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  min-block-size: 3.1em;
  padding: 0 1.55em;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--bh-white);
  color: var(--bh-black);
  font-family: var(--bh-font-mono);
  font-size: var(--bh-step-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.35s var(--bh-ease-out), color 0.35s var(--bh-ease-out), border-color 0.35s var(--bh-ease-out), transform 0.35s var(--bh-ease-out);
}

.pill__dot,
.pill__glow {
  display: none;
}

.pill__label {
  display: inline-block;
}

.pill__arrow {
  display: flex;
  width: 1em;
  height: 1em;
  transition: transform 0.35s var(--bh-ease-out);
}

.pill__arrow svg,
.project__arrow svg,
.hero__rail-label svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.pill--secondary,
.pill--ghost {
  border-color: color-mix(in srgb, var(--bh-white) 28%, transparent);
  background: transparent;
  color: var(--bh-white);
}

.pill--ghost {
  min-block-size: 2.8em;
  padding-inline: 1.3em;
}

@media (hover: hover) {
  .pill:hover,
  .pill:focus-visible {
    transform: translateY(-2px);
  }

  .pill:hover .pill__arrow,
  .pill:focus-visible .pill__arrow {
    transform: translateX(0.25em);
  }

  .pill--primary:hover::before,
  .pill--primary:focus-visible::before {
    opacity: 0.95;
  }

  .pill--secondary:hover,
  .pill--secondary:focus-visible,
  .pill--ghost:hover,
  .pill--ghost:focus-visible {
    border-color: var(--bh-white);
  }
}

/* Rolling labels -------------------------------------------------------- */

.roll-group {
  display: inline;
}

.roll {
  position: relative;
  display: inline-block;
  height: 1.12em;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.12;
}

.roll__line {
  display: block;
  height: 1.12em;
  white-space: pre;
}

.roll__char {
  display: inline-block;
  transition: transform 0.55s var(--bh-ease-glide);
  transition-delay: calc(var(--i, 0) * 16ms);
}

@media (hover: hover) {
  a:hover .roll__char,
  a:focus-visible .roll__char,
  .roll-hover:hover .roll__char {
    transform: translateY(-100%);
  }
}

/* Odometer digits -------------------------------------------------------- */

.odo__visual {
  display: inline-flex;
  align-items: baseline;
}

.odo__digit {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  line-height: 1;
}

.odo__col {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--pos, var(--d, 0)) * -1em));
  will-change: transform;
}

.odo__col span {
  display: block;
  height: 1em;
  line-height: 1;
}

.odo__sep {
  display: inline-block;
  line-height: 1;
}

/* Frames --------------------------------------------------------------- */

.frame {
  position: relative;
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius);
  background: linear-gradient(160deg, color-mix(in srgb, var(--bh-white) 6%, transparent), color-mix(in srgb, var(--bh-white) 2%, transparent) 60%, rgb(24 217 255 / 4%));
  overflow: hidden;
}

.frame__bar {
  position: relative;
  height: 2.75rem;
  border-block-end: 1px solid var(--bh-line);
}

.frame__bar .cross {
  inset-block-start: calc(50% - var(--bh-cross) / 2);
  color: color-mix(in srgb, var(--bh-white) 45%, transparent);
}

.frame__bar .cross:nth-child(1) { inset-inline-start: 1rem; }
.frame__bar .cross:nth-child(2) { inset-inline-start: calc(25% - var(--bh-cross) / 2); }
.frame__bar .cross:nth-child(3) { inset-inline-start: calc(50% - var(--bh-cross) / 2); }
.frame__bar .cross:nth-child(4) { inset-inline-start: calc(75% - var(--bh-cross) / 2); }
.frame__bar .cross:nth-child(5) { inset-inline-start: calc(100% - var(--bh-cross) - 1rem); }

.frame__bar-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--bh-step-label);
  color: color-mix(in srgb, var(--bh-white) 60%, transparent);
  pointer-events: none;
}

.pending-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.35em 0.7em;
  border: 1px solid rgb(255 43 189 / 45%);
  border-radius: 999px;
  color: rgb(255 43 189 / 90%);
  font-size: var(--bh-step-micro);
  letter-spacing: var(--bh-tracking-label);
}

.pending-tag::before {
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

/* Scroll progress --------------------------------------------------------- */

.scroll-progress {
  position: fixed;
  z-index: 30;
  inset-block-start: 40vh;
  inset-inline-end: 1rem;
  width: 4px;
  height: 20vh;
  border-radius: 2px;
  background: color-mix(in srgb, var(--bh-white) 12%, transparent);
  pointer-events: none;
}

.scroll-progress span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--bh-white);
  transform: scaleY(0);
  transform-origin: top;
}

/* Header ---------------------------------------------------------------- */

.site-header {
  position: fixed;
  z-index: 40;
  inset: 0 0 auto;
  min-block-size: var(--bh-header-height);
  padding-inline: var(--bh-gutter);
}

/* The frost stays within the header's own height and fades out through its lower half, so
   the blur never reads as a band across the page. */
.site-header::before {
  position: absolute;
  inset: 0 0 -10%;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent);
  mask-image: linear-gradient(180deg, #000 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bh-page) 82%, transparent), color-mix(in srgb, var(--bh-page) 0%, transparent));
  opacity: 0;
  content: "";
  pointer-events: none;
  transition: opacity 0.45s var(--bh-ease-out);
}

.site-header.is-scrolled::before {
  opacity: 1;
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, var(--bh-container));
  min-block-size: var(--bh-header-height);
  margin-inline: auto;
}

.site-header__cluster {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}

.brand {
  position: relative;
  z-index: 42;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  text-decoration: none;
}

.brand__wordmark {
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h3);
  font-weight: 700;
  letter-spacing: -0.06em;
}

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

.custom-logo {
  display: block;
  width: auto;
  max-width: min(13rem, 46vw);
  max-height: 2.5rem;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.25vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.primary-nav__list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: color-mix(in srgb, var(--bh-white) 82%, transparent);
  font-size: var(--bh-step-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.primary-nav__list a::after {
  position: absolute;
  inset: auto 0 0.5rem;
  height: 1px;
  scale: 0 1;
  transform-origin: right;
  background: var(--bh-cyan);
  content: "";
  transition: scale 260ms var(--bh-ease-out);
}

.primary-nav__list a:hover::after,
.primary-nav__list a:focus-visible::after {
  scale: 1;
  transform-origin: left;
}

.nav-toggle {
  position: relative;
  z-index: 42;
  display: none;
  gap: 0.9em;
  padding-inline: 1.3em 1.2em;
}

/* The Menu pill opens the site menu on every size once the script can run it. */
.js .nav-toggle {
  display: inline-flex;
}

.nav-toggle__labels {
  position: relative;
  display: block;
  height: 1em;
  overflow: hidden;
}

.nav-toggle__labels span {
  display: block;
  height: 1em;
  transition: transform 0.45s var(--bh-ease-glide);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__labels span {
  transform: translateY(-100%);
}

.nav-toggle__dots {
  display: flex;
  gap: 0.32em;
  transition: transform 0.5s var(--bh-ease-glide);
}

.nav-toggle__dots i {
  width: 0.38em;
  height: 0.38em;
  border-radius: 50%;
  background: currentColor;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__dots {
  transform: rotate(90deg);
}

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

/* Always dark: the hero sits on its video. */
.hero {
  --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;
  --outline-fill: 0;
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-block-size: 720px;
  height: 100vh;
  height: 100svh;
  overflow: clip;
  background: var(--bh-black);
}

.hero__fallback,
.hero__poster,
.hero__media,
.hero__veil {
  position: absolute;
  z-index: -4;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The final still sits under the video and only shows once the media has settled on its
   last frame or gone static. Until then the video paints its own first frame (its poster),
   so a visit never opens on the end of the story. */
.hero__poster {
  z-index: -3;
  opacity: 0;
  transition: opacity 500ms ease;
}

.hero[data-media-state="settled"] .hero__poster,
.hero[data-media-state="static"] .hero__poster {
  opacity: 1;
}

.hero__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.hero__fallback {
  background:
    radial-gradient(circle at 72% 42%, rgb(24 217 255 / 16%), transparent 22%),
    radial-gradient(circle at 86% 18%, rgb(255 43 189 / 11%), transparent 30%),
    linear-gradient(125deg, var(--bh-black) 0%, var(--bh-purple-deep) 55%, var(--bh-black-soft) 100%);
}

.hero__media {
  z-index: -2;
  object-fit: cover;
  object-position: center center;
  background-color: transparent;
  background-image: var(--hero-still);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Phones get the film's portrait cut, so they get its first frame too. */
@media (max-width: 47.99rem) {
  .hero__media {
    background-image: var(--hero-still-mobile, var(--hero-still));
  }
}

/* The liquid glass draws the video's frames itself, so it simply sits over the video
   and appears once it has frames to show. */
.hero__scene {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}

.hero[data-live="true"] .hero__scene {
  opacity: 1;
}

.hero[data-live="true"] .hero__interaction {
  display: none;
}

.hero__veil {
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(5 3 10 / 96%) 0%, rgb(5 3 10 / 84%) 27%, rgb(5 3 10 / 32%) 54%, rgb(5 3 10 / 4%) 78%),
    linear-gradient(0deg, rgb(5 3 10 / 70%) 0%, transparent 30%),
    linear-gradient(180deg, rgb(5 3 10 / 32%) 0%, transparent 25%);
}

.hero__interaction {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.hero__gravity {
  position: absolute;
  inset-block-start: 45%;
  inset-inline-start: 64.5%;
  width: clamp(22rem, 40vw, 38rem);
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: 0;
  filter: saturate(1.08);
  transform-origin: center;
}

.hero__gravity-core {
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 72% 48%, color-mix(in srgb, var(--bh-white) 30%, transparent) 0 0.4%, rgb(24 217 255 / 22%) 1.2%, transparent 7%),
    radial-gradient(circle at 60% 54%, transparent 46%, rgb(24 217 255 / 12%) 68%, rgb(255 43 189 / 10%) 82%, transparent 100%);
  box-shadow:
    inset -1.5rem -0.5rem 4rem rgb(255 43 189 / 5%),
    0 0 5rem rgb(24 217 255 / 6%);
  opacity: 0.12;
  transform-origin: 72% 50%;
}

.hero__orbits {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 0.5rem rgb(24 217 255 / 20%));
  transform: rotate(-7deg);
}

.hero__orbit,
.hero__signal-path {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.hero__orbit {
  stroke: rgb(24 217 255 / 38%);
  stroke-dasharray: 0.012 0.055 0.18 0.09 0.008 0.11 0.24 0.12;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-width: 0.34;
}

.hero__orbit--middle {
  stroke: color-mix(in srgb, var(--bh-white) 24%, transparent);
  stroke-dasharray: 0.26 0.12 0.035 0.08 0.16 0.14;
  stroke-width: 0.22;
}

.hero__orbit--inner {
  stroke: rgb(255 43 189 / 28%);
  stroke-dasharray: 0.08 0.1 0.32 0.14 0.04 0.12;
  stroke-width: 0.18;
}

.hero__signal-path {
  stroke: rgb(24 217 255 / 22%);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-width: 0.2;
}

.hero__contact-spark {
  position: absolute;
  inset-block-start: 49%;
  inset-inline-start: 88%;
  width: clamp(0.35rem, 0.7vw, 0.65rem);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--bh-white);
  box-shadow:
    0 0 0 0.35rem rgb(24 217 255 / 14%),
    0 0 1.2rem 0.35rem rgb(24 217 255 / 70%),
    0 0 3rem 0.8rem rgb(255 43 189 / 28%);
  opacity: 0;
}

.hero__contact-spark::before,
.hero__contact-spark::after {
  position: absolute;
  inset: 50% auto auto 50%;
  width: clamp(2.5rem, 5vw, 5rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(24 217 255 / 72%), transparent);
  content: "";
  translate: -50% -50%;
}

.hero__contact-spark::after {
  rotate: 90deg;
}

.hero__content,
.hero__rail {
  position: relative;
  z-index: 2;
}

.hero[data-interactive="true"] .hero__media,
.hero[data-interactive="true"] .hero__gravity,
.hero[data-interactive="true"] .hero__gravity-core,
.hero[data-interactive="true"] .hero__contact-spark,
.hero[data-interactive="true"] .hero__content {
  will-change: transform, opacity;
}

.hero__content {
  width: min(calc(100% - (2 * var(--bh-gutter))), var(--bh-container));
  margin-inline: auto;
  padding: calc(var(--bh-header-height) + clamp(2rem, 5vh, 5rem)) 0 clamp(6.5rem, 12vh, 9rem);
}

/* The early line: in the title's place, up at a second, gone as the title arrives. */
.hero__pretitle {
  position: absolute;
  inset-block-start: calc(var(--bh-header-height) + clamp(2rem, 5vh, 5rem));
  inset-inline-start: 0;
  z-index: 3;
  max-width: 14em;
  margin: 0;
  color: var(--bh-white);
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-statement);
  font-weight: var(--bh-weight-heading);
  letter-spacing: var(--bh-tracking-heading);
  line-height: var(--bh-leading-tight, 1.05);
  text-wrap: balance;
  opacity: 0;
  transform: translateY(0.35em);
  pointer-events: none;
  transition: opacity 1s var(--bh-ease-out), transform 1.2s var(--bh-ease-out);
}

.hero[data-pre="true"] .hero__pretitle {
  opacity: 1;
  transform: none;
}

.hero[data-reveal="true"] .hero__pretitle {
  opacity: 0;
  transform: translateY(-0.35em);
  transition: opacity 0.45s var(--bh-ease-out), transform 0.6s var(--bh-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .hero__pretitle {
    display: none;
  }
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 clamp(1.1rem, 2.3vh, 1.8rem);
  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;
}

.hero__eyebrow::before {
  width: clamp(2rem, 5vw, 4.5rem);
  height: 1px;
  background: currentColor;
  box-shadow: 0 0 0.75rem rgb(24 217 255 / 80%);
  content: "";
}

.hero__title {
  max-width: min(11.5em, 60vw);
  margin: 0;
  color: var(--bh-white);
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-hero);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.98;
  transform-origin: 0% 50%;
}

.hero__title-line {
  display: block;
  white-space: nowrap;
}

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

/* Outlined until the astronaut's hand meets the bubble, then the words fill in. */
.hero__title-outline {
  color: rgb(247 245 251 / calc(var(--outline-fill) * 1%));
  -webkit-text-stroke: 0.9px color-mix(in srgb, var(--bh-white) 70%, transparent);
  text-shadow: 0 0 2rem rgb(24 217 255 / 16%);
  transition: --outline-fill 1.6s cubic-bezier(0.4, 0, 0.1, 1) 0.45s;
}

.hero[data-reveal="true"] {
  --outline-fill: 100;
}

.hero__lede {
  max-width: 34rem;
  margin: clamp(1.35rem, 3vh, 2rem) 0 0;
  color: color-mix(in srgb, var(--bh-white) 76%, transparent);
  font-size: var(--bh-step-body-lg);
  line-height: var(--bh-leading-body);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-block-start: clamp(1.5rem, 3.5vh, 2.4rem);
}

[data-magnetic-label] {
  display: inline-block;
}

.hero__rail {
  position: absolute;
  inset: auto var(--bh-gutter) 0;
  width: min(calc(100% - (2 * var(--bh-gutter))), calc(var(--bh-container) - (2 * var(--bh-gutter))));
  height: clamp(3.5rem, 7vh, 4.75rem);
  margin-inline: auto;
}

.hero__rail .cross {
  inset-block-start: calc(50% - var(--bh-cross) / 2);
}

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

.hero__rail-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  color: color-mix(in srgb, var(--bh-white) 72%, transparent);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-wide);
}

.hero__rail-label svg {
  width: 0.95rem;
  height: 0.95rem;
  animation: rail-arrow 2.6s var(--bh-ease-glide) infinite;
}

@keyframes rail-arrow {
  0%, 20% { transform: translateY(-0.25em); opacity: 0; }
  45%, 65% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0.35em); opacity: 0; }
}

.site-main--standard {
  width: min(100% - (2 * var(--bh-gutter)), 60rem);
  min-block-size: 100vh;
  margin-inline: auto;
  padding-block: calc(var(--bh-header-height) + 4rem) 5rem;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__eyebrow,
  .hero__title,
  .hero__lede,
  .hero__actions,
  .hero__rail {
    animation: hero-reveal 800ms cubic-bezier(0.2, 0.75, 0.2, 1) both;
  }

  .hero__title {
    animation-delay: 120ms;
  }

  .hero__lede {
    animation-delay: 700ms;
  }

  .hero__actions {
    animation-delay: 860ms;
  }

  .hero__rail {
    animation-delay: 1100ms;
  }

  /* The motion layer takes over the title reveal word by word. With JavaScript the title
     waits for that layer (or 2.5s, whichever comes first) so it does not fade in twice. */
  .js .hero__title {
    animation: hero-title-fallback 0.01s 2.5s both;
  }

  .has-motion .hero__title,
  .has-motion .hero__eyebrow,
  .has-motion .hero__lede,
  .has-motion .hero__actions {
    animation: none;
  }

  @keyframes hero-title-fallback {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes hero-reveal {
    from {
      opacity: 0;
      translate: 0 1rem;
    }
    to {
      opacity: 1;
      translate: 0;
    }
  }
}

@media (max-width: 68rem) {
  /* The bar keeps only the brand and the Menu pill; the site menu holds everything. */
  .js .primary-nav {
    display: none;
  }

  .hero__title {
    max-width: min(10em, 70vw);
  }
}

@media (max-width: 63.99rem), (hover: none), (pointer: coarse) {
  .hero__interaction {
    display: none;
  }
}

@media (min-width: 48rem) and (max-height: 51.25rem) {
  .hero__content {
    padding-block: calc(var(--bh-header-height) + 1.5rem) 5.75rem;
  }

  .hero__title {
    font-size: var(--bh-step-statement);
  }

  .hero__lede {
    margin-block-start: 1rem;
  }

  .hero__actions {
    margin-block-start: 1.25rem;
  }
}

@media (max-width: 47.99rem) {
  .hero {
    align-items: end;
    min-block-size: 42rem;
    height: 100vh;
    height: 100svh;
  }

  .hero__media,
  .hero__poster {
    height: 63%;
  }

  /* Phones show the still (the video is hidden below). */
  .hero__poster {
    opacity: 1;
  }

  .hero__media,
  .hero__poster img {
    object-position: 68% center;
  }

  .hero__veil {
    background:
      linear-gradient(0deg, var(--bh-black) 0%, rgb(5 3 10 / 96%) 32%, rgb(5 3 10 / 25%) 70%, rgb(5 3 10 / 20%) 100%),
      linear-gradient(90deg, rgb(5 3 10 / 54%), transparent 80%);
  }

  .hero__content {
    padding-block: calc(var(--bh-header-height) + 10rem) 5.5rem;
  }

  .hero__eyebrow {
    margin-block-end: 0.9rem;
  }

  .hero__title {
    max-width: 100%;
    font-size: clamp(2.1rem, 9vw, 3.4rem);
    line-height: 1;
  }

  .hero__title-line {
    white-space: normal;
  }

  .hero__title-outline {
    -webkit-text-stroke-width: 0.75px;
  }

  .hero__lede {
    max-width: 30rem;
    margin-block-start: 1.1rem;
    font-size: var(--bh-step-small);
    line-height: var(--bh-leading-body);
  }

  .hero__actions {
    gap: 0.7rem;
    margin-block-start: 1.25rem;
  }

  /* Two actions, one width. They share the row while both still fit and each takes the
     whole width once they do not, so a phone never shows a wide button sitting above a
     narrow one. No breakpoint decides it: the flex basis does, at whatever width the pair
     stops fitting. */
  .hero__actions > * {
    flex: 1 1 14rem;
  }

  .hero__actions .bh-liquid,
  .hero__actions .pill {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

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

  .hero__rail {
    height: 3rem;
  }

  .hero__rail .cross:nth-child(2),
  .hero__rail .cross:nth-child(3) {
    display: none;
  }
}

@media (max-width: 25rem) {
  .hero__content {
    padding-block-end: 5.5rem;
  }

  .hero__title {
    font-size: clamp(1.9rem, 8.6vw, 2.3rem);
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .hero__media,
  .hero__scene,
  .hero__interaction {
    display: none;
  }
}

@media (forced-colors: active) {
  .hero__media,
  .hero__scene,
  .hero__poster,
  .hero__fallback,
  .hero__veil {
    display: none;
  }

  .hero__title-outline {
    color: currentColor;
    -webkit-text-stroke: 0;
  }
}

/* Forms: a mono label, a hairline under the value that turns cyan on focus, no fill, no
   radius, no shadow. The submit is the site's pill and the note sits beside it. Forminator
   markup is mapped onto the same rules below. */

.bh-form {
  display: grid;
  gap: 1.75rem 2rem;
}

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

.bh-form__field {
  display: grid;
  gap: 0.35rem;
}

.bh-form__field--wide,
.bh-form__actions,
.bh-form__notice {
  grid-column: 1 / -1;
}

.bh-form label {
  color: var(--bh-muted);
  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;
}

.bh-form input,
.bh-form textarea,
.bh-form select {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0;
  border: 0;
  border-block-end: 1px solid color-mix(in srgb, var(--bh-white) 26%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--bh-white);
  font: inherit;
  font-size: var(--bh-step-body-lg);
  line-height: 1.4;
  appearance: none;
  transition: border-color 0.3s var(--bh-ease-out), box-shadow 0.3s var(--bh-ease-out);
}

.bh-form textarea {
  min-height: 6.5rem;
  resize: none;
  field-sizing: content;
}

.bh-form input::placeholder,
.bh-form textarea::placeholder {
  color: color-mix(in srgb, var(--bh-white) 36%, transparent);
}

.bh-form input:hover,
.bh-form textarea:hover {
  border-color: color-mix(in srgb, var(--bh-white) 55%, transparent);
}

.bh-form input:focus-visible,
.bh-form textarea:focus-visible {
  outline: none;
  border-color: var(--bh-cyan);
  box-shadow: 0 1px 0 0 var(--bh-cyan);
}

.bh-form input:autofill,
.bh-form textarea:autofill {
  -webkit-text-fill-color: var(--bh-white);
  box-shadow: inset 0 0 0 100rem var(--bh-page, transparent);
}

.bh-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-block-start: 0.25rem;
}

/* The fallback submit (used before Forminator is present) is a pill too. */
.bh-form__submit {
  border-color: transparent;
}

.bh-form__note {
  margin: 0;
  max-width: 24rem;
  color: var(--bh-muted);
  font-family: var(--bh-font-mono);
  font-size: var(--bh-step-micro);
  letter-spacing: var(--bh-tracking-label);
  line-height: var(--bh-leading-body);
  text-transform: uppercase;
}

.bh-form__notice {
  margin: 0;
  padding: 0.35rem 0 0.35rem 1rem;
  border-inline-start: 2px solid var(--bh-cyan);
  color: var(--bh-white);
  font-family: var(--bh-font-mono);
  font-size: var(--bh-step-small);
}

@media (max-width: 40rem) {
  .bh-form--two {
    grid-template-columns: 1fr;
  }
}

/* Forminator, styled as the theme's form. The plugin runs with its own styling off
   (form style "none"), so its markup is only structure: rows and columns become grid
   items of the .bh-form grid, its inputs and labels take the rules above, the submit is
   given the pill classes and the note by inc/forms.php, and the admin "edit form" link
   is removed there (and hidden here as a belt). The honeypot stays hidden here because
   the plugin's stylesheet is not loaded. */

/* The plugin's grid stylesheet loads after the theme's and addresses rows with four
   classes deep, so the layout declarations that must win carry !important. */
.bh-form--forminator > .forminator-ui,
.bh-form--forminator form,
.bh-form--forminator .forminator-row,
.bh-form--forminator .forminator-field {
  display: contents !important;
}

.bh-form--forminator .forminator-row {
  margin: 0 !important;
}

.bh-form--forminator .forminator-hidden,
.bh-form--forminator .forminator-edit-module {
  display: none !important;
}

/* The empty response box stays out of the way, but not with !important: on a sent form
   the plugin shows the box inline before it fills it and reads its position to scroll to
   it, and a box that cannot show reads as the top of the page. */
.bh-form--forminator .forminator-response-message:empty {
  display: none;
}

.bh-form--forminator .forminator-col {
  display: grid !important;
  flex: none !important;
  width: auto !important;
  max-width: none !important;
  gap: 0.35rem;
  min-width: 0;
}

.bh-form--forminator .forminator-field-textarea,
.bh-form--forminator .forminator-row-last > .forminator-col,
.bh-form--forminator .forminator-response-message {
  grid-column: 1 / -1;
}

/* The last row: the pill and the note side by side. */
.bh-form--forminator .forminator-row-last > .forminator-col {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-block-start: 0.25rem;
}

.bh-form--forminator .forminator-label {
  display: block;
}

.bh-form--forminator .forminator-required {
  margin-inline-start: 0.2em;
  color: var(--bh-magenta);
}

.bh-form--forminator .forminator-input,
.bh-form--forminator .forminator-textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0;
  border: 0;
  border-block-end: 1px solid color-mix(in srgb, var(--bh-white) 26%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--bh-white);
  font: inherit;
  font-size: var(--bh-step-body-lg);
  line-height: 1.4;
  appearance: none;
  transition: border-color 0.3s var(--bh-ease-out), box-shadow 0.3s var(--bh-ease-out);
}

.bh-form--forminator .forminator-textarea {
  min-height: 6.5rem;
  resize: none;
  field-sizing: content;
}

.bh-form--forminator .forminator-input::placeholder,
.bh-form--forminator .forminator-textarea::placeholder {
  color: color-mix(in srgb, var(--bh-white) 36%, transparent);
}

.bh-form--forminator .forminator-input:hover,
.bh-form--forminator .forminator-textarea:hover {
  border-color: color-mix(in srgb, var(--bh-white) 55%, transparent);
}

.bh-form--forminator .forminator-input:focus-visible,
.bh-form--forminator .forminator-textarea:focus-visible {
  outline: none;
  border-color: var(--bh-cyan);
  box-shadow: 0 1px 0 0 var(--bh-cyan);
}

.bh-form--forminator .forminator-input:autofill,
.bh-form--forminator .forminator-textarea:autofill {
  -webkit-text-fill-color: var(--bh-white);
  box-shadow: inset 0 0 0 100rem var(--bh-page, transparent);
}

.bh-form--forminator .forminator-has_error .forminator-input,
.bh-form--forminator .forminator-has_error .forminator-textarea {
  border-color: var(--bh-magenta);
}

.bh-form--forminator .forminator-error-message {
  margin: 0.15rem 0 0;
  color: var(--bh-magenta);
  font-family: var(--bh-font-mono);
  font-size: var(--bh-step-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bh-form--forminator .forminator-button-submit[disabled] {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

.bh-form--forminator .forminator-response-message {
  margin: 0;
  padding: 0.35rem 0 0.35rem 1rem;
  border-inline-start: 2px solid var(--bh-cyan);
  color: var(--bh-white);
  font-family: var(--bh-font-mono);
  font-size: var(--bh-step-small);
}

.bh-form--forminator .forminator-response-message.forminator-error {
  border-color: var(--bh-magenta);
}

.bh-form--forminator .forminator-response-message p,
.bh-form--forminator .forminator-response-message ul {
  margin: 0;
}

.bh-form--forminator .forminator-response-message ul {
  padding-inline-start: 1.1em;
}

/* Brand logo (inline SVG; its white parts take the ink colour). */

.brand__logo {
  display: inline-flex;
  align-items: center;
  color: var(--bh-white);
}

.brand__logo svg {
  display: block;
  width: auto;
  height: clamp(1.5rem, 2vw, 1.9rem);
}

.site-footer .brand__logo svg {
  height: 2.1rem;
}

/* Accreditation badges under the hero buttons. */

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.hero__badges li {
  overflow: hidden;
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius-xs);
}

.hero__badges img {
  display: block;
  width: auto;
  height: clamp(3.4rem, 4.2vw, 4.4rem);
  opacity: 0.92;
}

/* Reveal targets stay hidden until the motion layer takes them, so nothing paints
   twice; with reduced motion, or without GSAP, they simply show. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.has-motion) [data-reveal],
  html.js:not(.has-motion) [data-reveal-children] > *,
  html.js:not(.has-motion) [data-tilt-in] {
    visibility: hidden;
  }
}

/* Find-us-on rail: the social accounts stacked in the right margin with a hairline and the
   label reading upward, on every page (carried over from the old About hero). Fixed to
   the viewport below the header, from 80rem up: centred in the gutter beside the content,
   or in the outer margin once the window is wider than the 90rem container (the margin
   beside the content is max(gutter, (100vw - container) / 2), so its middle is half that).
   Colours are the ink tokens so it follows the theme. Each icon slides its network's name
   out beside it on hover, on a soft pill so it reads over anything. */

.social-rail {
  display: none;
}

@media (min-width: 80rem) {
  .social-rail {
    position: fixed;
    z-index: 35;
    inset-block-end: clamp(2rem, 4vh, 3.5rem);
    inset-inline-end: min(6rem, max(calc(var(--bh-gutter) / 2), calc((100vw - var(--bh-container)) / 4)));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    translate: 50% 0;
    color: var(--bh-muted);
    pointer-events: none;
  }

  .social-rail__list {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .social-rail__link {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    color: inherit;
    pointer-events: auto;
    transition: color 0.3s var(--bh-ease-out), background-color 0.3s var(--bh-ease-out), transform 0.35s var(--bh-ease-out);
  }

  .social-rail__link svg {
    width: 1.05rem;
    height: 1.05rem;
  }

  .social-rail__link:hover,
  .social-rail__link:focus-visible {
    color: var(--bh-white);
    background: color-mix(in srgb, var(--bh-magenta) 22%, transparent);
    transform: translateY(-2px);
    outline: none;
  }

  .social-rail__link:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bh-cyan) 60%, transparent);
  }

  .social-rail__name {
    position: absolute;
    inset-inline-end: calc(100% + 0.6rem);
    top: 50%;
    padding: 0.35rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--bh-white) 14%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bh-black) 72%, transparent);
    color: var(--bh-white);
    font-size: var(--bh-step-micro);
    font-weight: var(--bh-weight-label);
    letter-spacing: var(--bh-tracking-label);
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    translate: 0.5rem -50%;
    pointer-events: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: opacity 0.25s var(--bh-ease-out), translate 0.35s var(--bh-ease-out);
  }

  .social-rail__link:hover .social-rail__name,
  .social-rail__link:focus-visible .social-rail__name {
    opacity: 1;
    translate: 0 -50%;
  }

  .social-rail__line {
    width: 1px;
    height: 2.75rem;
    background: color-mix(in srgb, var(--bh-white) 28%, transparent);
  }

  .social-rail__label {
    font-size: var(--bh-step-micro);
    font-weight: var(--bh-weight-label);
    letter-spacing: var(--bh-tracking-wide);
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }
}

@media (min-width: 80rem) and (prefers-reduced-motion: no-preference) {
  .social-rail {
    animation: social-rail-in 0.9s var(--bh-ease-out) 1.2s both;
  }

  @keyframes social-rail-in {
    from {
      opacity: 0;
      translate: 50% 1rem;
    }

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

@media (forced-colors: active) {
  .social-rail__line {
    background: CanvasText;
  }
}

/* Four accreditation badges in one row on phones. */
@media (max-width: 47.99rem) {
  .hero__badges {
    gap: 0.5rem;
  }

  .hero__badges img {
    height: 2.5rem;
    width: auto;
  }
}

/* A labelled frame bar drops its middle cross so the label never sits on it. */
.frame__bar:has(.frame__bar-label) .cross:nth-child(3) {
  display: none;
}
/* The liquid button ---------------------------------------------------------
   The site's primary call to action: a capsule of soap film with a bubble on its
   right. Everything here is the still, finished object; assets/src/js/liquid.js
   adds the WebGL face and the response to a pointer by setting the custom
   properties below. Without JavaScript, WebGL or with reduced motion the capsule
   keeps its painted film, so it is never a blank shape.

   Sizes come from the four properties at the top: `--liquid-compact` for the
   header, `--liquid-wide` across a form. The outer element never moves; the
   inner `__move` layer drifts, so the hit area cannot chase the cursor away. */

.bh-liquid {
  --px: 50%;
  --py: 50%;
  --tx: 0px;
  --ty: 0px;
  --rx: 0deg;
  --ry: 0deg;
  --charge: 0;
  --light: 0;
  --glow-x: 0px;
  --glow-y: 0px;
  --lift: 0px;
  --scale: 1;
  --flash: 0;
  --liquid-h: 3.55rem;
  --liquid-min: 15rem;
  --liquid-pad: 1.4rem;
  --liquid-orb: 2.4rem;
  --liquid-shell: 4px;
  position: relative;
  display: inline-block;
  width: fit-content;
  min-width: var(--liquid-min);
  max-width: 100%;
  height: var(--liquid-h);
  padding: 0;
  border: 0;
  border-radius: 999px;
  outline-offset: 12px;
  background: none;
  color: #20132c;
  font-family: inherit;
  text-decoration: none;
  vertical-align: middle;
  isolation: isolate;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.bh-liquid * {
  box-sizing: border-box;
}

/* The one action of a section that has no rival beside it: the homepage hero, the
   footer's closer. */
.bh-liquid--large {
  --liquid-h: 4.75rem;
  --liquid-min: 18.4rem;
  --liquid-pad: 1.7rem;
  --liquid-orb: 3.1rem;
  --liquid-shell: 5px;
}

.bh-liquid--compact {
  --liquid-h: 3rem;
  --liquid-min: 0;
  --liquid-pad: 1.15rem;
  --liquid-orb: 1.95rem;
  --liquid-shell: 3px;
}

.bh-liquid--wide {
  --liquid-h: 3.9rem;
  --liquid-orb: 2.6rem;
  width: 100%;
}

/* A hidden copy of the label gives the button its width; everything else is absolute. */
.bh-liquid__sizer {
  display: block;
  height: 100%;
  padding-inline: var(--liquid-pad) calc(1.6rem + var(--liquid-orb));
  font-size: var(--bh-step-label);
  font-weight: 750;
  letter-spacing: 0.145em;
  line-height: var(--liquid-h);
  text-transform: uppercase;
  white-space: nowrap;
  visibility: hidden;
}

.bh-liquid__move {
  position: absolute;
  inset: 0;
  transform: translate(var(--tx), var(--ty));
  pointer-events: none;
}

/* Three scales of light: the ambient spill, the coloured bloom, and the close
   contact light at the rim. The blur radii never change; only opacity and
   transform, so none of this costs a re-blur per frame. */
.bh-liquid__halo {
  position: absolute;
  inset: -16px -22px -22px;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 25% 45%, #16c9f5b3, transparent 64%),
    radial-gradient(ellipse at 78% 58%, #f24ad499, transparent 63%);
  opacity: calc(0.13 + var(--light) * 0.39 + var(--flash) * 0.1);
  filter: blur(30px);
  transform: translate(var(--glow-x), var(--glow-y)) scale(calc(1 + var(--light) * 0.1));
  pointer-events: none;
}

.bh-liquid__bloom {
  position: absolute;
  inset: 8px -4px -9px;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 12% 50%, #66eaffb3, transparent 54%),
    radial-gradient(ellipse at 86% 55%, #ff81dbb3, transparent 55%);
  opacity: calc(0.2 + var(--light) * 0.42 + var(--flash) * 0.17);
  filter: blur(13px);
  transform: translate(calc(var(--glow-x) * 0.45), calc(var(--glow-y) * 0.4));
  pointer-events: none;
}

.bh-liquid__contact-light {
  position: absolute;
  inset: 1px;
  border-radius: 999px;
  box-shadow: -3px 1px 9px #80e9ff80, 3px 1px 10px #f38ddd88, 0 0 2px 1px #e6c9ff88;
  opacity: calc(0.22 + var(--light) * 0.5 + var(--flash) * 0.2);
  pointer-events: none;
}

.bh-liquid__shell {
  position: absolute;
  inset: 0;
  padding: var(--liquid-shell);
  border-radius: 999px;
  background: linear-gradient(145deg, #ffffff85 0%, #716279 12%, #201728 35%, #0c0813 64%, #c7a4d1 88%, #42354d);
  box-shadow: 0 15px 32px #0009, 0 2px 3px #000, inset 0 1px 1px #fff8, inset 0 -1px 1px #dda7fc77;
  transform: perspective(650px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--scale));
}

/* The lit edge. The prefixed mask shorthand comes first and the composites after
   it: Safari reads the prefixed shorthand as the standard one and resets any
   composite set before it, which would paint the whole gradient over the shell. */
.bh-liquid__shell::before {
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--edge-angle, 50deg), transparent 0deg, #c6fcff 55deg, transparent 100deg, transparent 165deg, #ffabef 220deg, transparent 275deg, transparent);
  opacity: calc(0.35 + var(--light) * 0.65);
  content: "";
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.bh-liquid__surface {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 15% 15%, #f0ffff, transparent 60%),
    linear-gradient(110deg, #87dcf5, #bba8ed 48%, #efb2e0);
  box-shadow: inset 0 2px 2px #fff9, inset 0 -5px 9px #54176755, 0 0 0 1px #180c25;
  overflow: hidden;
}

.bh-liquid__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  opacity: 0.94;
}

.bh-liquid__film {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 70% 120% at var(--px) var(--py), #ffffff50, transparent 68%),
    linear-gradient(180deg, #fff8 0%, #fff1 23%, transparent 45%, #48165314 78%, #ffffff65 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #ffeaff88;
}

.bh-liquid__film::before {
  position: absolute;
  inset-block-start: 3px;
  inset-inline: 7%;
  height: 41%;
  border-radius: 50%;
  background: linear-gradient(#ffffff60, #ffffff00);
  filter: blur(0.4px);
  content: "";
}

.bh-liquid__film::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, #fff8 45%, transparent 55%);
  background-position: calc(100% - var(--charge) * 100%) 0;
  background-size: 260% 100%;
  opacity: calc(0.35 + var(--charge) * 0.35);
  mix-blend-mode: soft-light;
  content: "";
}

.bh-liquid__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: var(--liquid-pad) 0.6rem;
}

.bh-liquid__label {
  position: relative;
  font-size: var(--bh-step-label);
  font-weight: 750;
  letter-spacing: 0.145em;
  line-height: 1.3;
  text-shadow: 0 1px 0 #ffffff50;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The bubble. Its centre stays translucent so the live material shows through:
   the SVG paths are its skin, not a solid ball. */
.bh-liquid__orb {
  --morph: 0;
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--liquid-orb);
  height: var(--liquid-orb);
  color: #291239;
  isolation: isolate;
}

.bh-liquid__skin {
  position: absolute;
  inset: -12%;
  width: 124%;
  height: 124%;
  filter: drop-shadow(0 2px 2px #56276422);
  overflow: visible;
}

.bh-liquid__icon {
  position: relative;
  z-index: 2;
  width: 48%;
  height: 48%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
  filter: drop-shadow(0 1px 0 #ffffff66);
  transform: translate(var(--icon-x, 0px), var(--icon-y, 0px));
  overflow: visible;
}

.bh-liquid__rocket-detail {
  opacity: var(--morph);
}

.bh-liquid__skin .bh-liquid__reflection {
  transform: translate(var(--reflect-x, 0px), var(--reflect-y, 0px));
  transform-origin: center;
}

.bh-liquid:focus-visible {
  outline: 2px solid #c6f7ff;
}

.bh-liquid__sweep {
  position: absolute;
  inset: -45% -60%;
  background: linear-gradient(112deg, transparent 42%, #fff1 46%, #fffc 49.5%, #dcfaff22 52%, transparent 56%);
  opacity: 0;
  transform: translateX(-48%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.bh-liquid__fx {
  position: absolute;
  inset: -100px;
  overflow: visible;
  pointer-events: none;
}

.bh-liquid__bubble {
  position: absolute;
  border: 1px solid #e5efff80;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 20%, #fff9 0%, #fff1 15%, transparent 40%),
    conic-gradient(from 30deg, #91eaff25, #df85ff10, #fbabd855, #fff1, #67d8fc44, #91eaff25);
  box-shadow: inset 1px 1px 2px #fff6, inset -1px -2px 3px #dc87ff55, 0 0 8px #c1a5ff20;
}

.bh-liquid__ring {
  position: absolute;
  inset: 100px;
  border: 1px solid #d8eaff99;
  border-radius: 999px;
  box-shadow: 0 0 14px #e4a8ff55;
}

/* A form submit is a button, not a link: it carries the same layers. */
button.bh-liquid {
  -webkit-appearance: none;
  appearance: none;
}

@media (max-width: 26rem) {
  .bh-liquid {
    --liquid-min: 15.5rem;
    --liquid-pad: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bh-liquid *,
  .bh-liquid *::before,
  .bh-liquid *::after {
    animation: none !important;
    transition: none !important;
  }

  .bh-liquid__move,
  .bh-liquid__shell {
    transform: none !important;
  }

  .bh-liquid__fx {
    display: none;
  }

  .bh-liquid:active .bh-liquid__shell {
    transform: scale(0.98) !important;
  }
}

/* Review mode (`bh-static` in the query): every set piece at rest, each light section on
   its own tokens, so a page can be read top to bottom in one frame without its scripts. */

html.is-static-review [data-reveal],
html.is-static-review [data-reveal-children] > *,
html.is-static-review [data-tilt-in],
html.is-static-review .hero__copy > * {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

html.is-static-review [data-theme="light"] {
  color: var(--bh-white);
  --bh-white: #0b0712;
  --bh-muted: #5a5270;
  --bh-line: rgb(11 7 18 / 14%);
  --bh-surface: #ffffff;
  --bh-black: #f7f5fb;
  --bh-black-soft: #ffffff;
  --bh-cyan: #0a86b4;
  --bh-magenta: #c4148f;
  --bh-theme: 1;
}

html.is-static-review .ribbon {
  display: none;
}


/* The bar that stays with you on a phone -------------------------------------
   One object flush to the bottom edge, not two pills floating over the page: a
   hairline, a blur and a dark ground, the way the header behaves at the other end
   of the screen. Its colours are written out rather than taken from the theme
   tokens, because the bar passes over light sections as you scroll and anything
   built from --bh-white inverts underneath it, which is how the action lost its
   label completely on the light stretch of the homepage.                        */

.sticky-cta {
  position: fixed;
  z-index: 35;
  inset-inline: 0;
  inset-block-end: 0;
  display: none;
  gap: 0;
  align-items: stretch;
  padding-block-end: env(safe-area-inset-bottom);
  border-block-start: 1px solid rgb(255 255 255 / 12%);
  background: rgb(9 6 16 / 88%);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.sticky-cta__call,
.sticky-cta__go {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  justify-content: center;
  min-block-size: 3.5rem;
  color: #fff;
  font-size: var(--bh-step-body);
  letter-spacing: var(--bh-tracking-body);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.sticky-cta__call {
  flex: 0 0 auto;
  /* Glyph only, so the padding is what keeps it a comfortable target. */
  min-inline-size: 3.5rem;
  padding-inline: 1.15rem;
  color: rgb(255 255 255 / 78%);
}

.sticky-cta__rule {
  flex: 0 0 1px;
  align-self: center;
  inline-size: 1px;
  block-size: 1.5rem;
  background: rgb(255 255 255 / 14%);
}

.sticky-cta__go {
  flex: 1 1 auto;
  padding-inline: 1.35rem;
  font-weight: var(--bh-weight-statement);
}

.sticky-cta__icon svg,
.sticky-cta__arrow svg {
  display: block;
  inline-size: 1.05rem;
  block-size: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sticky-cta__arrow {
  transition: translate 0.35s var(--bh-ease-out);
}

.sticky-cta__go:active .sticky-cta__arrow {
  translate: 0.2rem 0;
}

.sticky-cta__call:active,
.sticky-cta__go:active {
  background: rgb(255 255 255 / 8%);
}

@media (max-width: 47.99rem) {
  .sticky-cta {
    display: flex;
  }
}

/* Out of the way while the menu is open. */
.menu-open .sticky-cta {
  opacity: 0;
  pointer-events: none;
  translate: 0 100%;
  transition: opacity 0.3s var(--bh-ease-out), translate 0.35s var(--bh-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta__arrow,
  .menu-open .sticky-cta {
    transition: none;
  }
}


/* The cookie choice ----------------------------------------------------------
   A refusal has to be as easy as an acceptance, so the two buttons carry the same
   weight and nothing is pre-selected. The bar sits at the foot of the page without
   covering it, and stands aside for the sticky call to action on a phone.        */

.consent {
  position: fixed;
  z-index: 45;
  inset-inline: var(--bh-gutter);
  inset-block-end: max(var(--bh-gutter), env(safe-area-inset-bottom));
  max-inline-size: 34rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: var(--bh-radius-card);
  background: rgb(9 6 16 / 94%);
  color: #fff;
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 45%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  translate: 0 1rem;
  transition: opacity 0.35s var(--bh-ease-out), translate 0.35s var(--bh-ease-out);
}

.consent.is-in {
  opacity: 1;
  translate: 0 0;
}

.consent__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
  align-items: center;
  justify-content: space-between;
}

.consent__text {
  flex: 1 1 16rem;
  margin: 0;
  color: rgb(255 255 255 / 82%);
  font-size: var(--bh-step-body);
  line-height: var(--bh-leading-body);
}

.consent__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.consent__actions {
  display: flex;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.consent__button {
  min-block-size: 2.5rem;
  padding-inline: 1.1rem;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: var(--bh-step-body);
  cursor: pointer;
  transition: background-color 0.3s var(--bh-ease-out), color 0.3s var(--bh-ease-out);
}

.consent__button--yes {
  border-color: transparent;
  background: #fff;
  color: #0b0712;
}

.consent__button:hover,
.consent__button:focus-visible {
  background: rgb(255 255 255 / 14%);
}

.consent__button--yes:hover,
.consent__button--yes:focus-visible {
  background: rgb(255 255 255 / 88%);
  color: #0b0712;
}

/* On a phone the sticky call to action owns the bottom edge, so the choice sits above it. */
@media (max-width: 47.99rem) {
  .consent {
    inset-inline: 0.75rem;
    inset-block-end: calc(env(safe-area-inset-bottom) + 4.25rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .consent {
    transition: none;
  }
}