/* ============================================================
   BRIGHT HIVE — site stylesheet
   Every value reads from brighthive-tokens-v4.css. If a colour or a
   spacing step is not in that file, it does not belong here.
   Written from the inline styles in the .dc.html design files.
   ============================================================ */

@import url("tokens.css");

/* ---- RESET ------------------------------------------------- */

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

/* Anything marked hidden stays hidden, whatever display a class gives it.
   Without this the form's error rows show on load, because .field__error
   sets display: flex and beats the attribute. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bh-ink);
  color: var(--bh-body);
  font-family: var(--bh-font-body);
  font-size: var(--bh-text-16);
  line-height: 1.6;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--bh-yellow); }
a:hover { color: var(--bh-yellow-light); }

/* Focus rings are never removed. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--bh-yellow);
  outline-offset: 2px;
}

::selection { background: var(--bh-yellow); color: var(--bh-ink); }

input::placeholder, textarea::placeholder { color: var(--bh-muted); }

/* ---- MOTION ------------------------------------------------ */

.t {
  transition:
    background-color var(--bh-duration-200) var(--bh-ease),
    border-color var(--bh-duration-200) var(--bh-ease),
    color var(--bh-duration-200) var(--bh-ease);
}

[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--bh-duration-300) var(--bh-ease),
    transform var(--bh-duration-300) var(--bh-ease);
}
[data-reveal][data-shown="1"] { opacity: 1; transform: none; }

/* No JavaScript, no hiding. Content is visible either way. */
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transform: none !important; transition-property: opacity !important; }
  *, *::before, *::after {
    transition-property: opacity !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---- THE MARK DRAWS ITSELF ---------------------------------
   Lifted from marks/animated/bh-mark-draw.css in the brand kit — the connector
   lengths are measured, not guessed, so do not retype them. 1.6s, once, on the
   hero mark only. Nothing translates or rotates; the nodes scale about their
   own centres and land on scale 1, so the last frame is identical to the static
   file. site.js adds both classes on load, which means with JavaScript off the
   mark is simply there, finished, from the first paint. */

.bh-anim #hex-ring { stroke-dasharray: 296.027; stroke-dashoffset: 296.027; }
.bh-anim #connectors polyline { stroke-dasharray: var(--bh-len); stroke-dashoffset: var(--bh-len); }
.bh-anim #connector-1a { --bh-len: 17.152; }
.bh-anim #connector-1b { --bh-len: 21.317; }
.bh-anim #connector-2  { --bh-len: 29.170; }
.bh-anim #connector-3  { --bh-len: 20.878; }
.bh-anim #connector-4  { --bh-len: 15.110; }
.bh-anim #connector-5  { --bh-len: 24.590; }
.bh-anim #connector-6  { --bh-len: 25.033; }
.bh-anim #nodes circle { transform-box: fill-box; transform-origin: center; opacity: 0; }
.bh-anim #hub { opacity: 0; }

/* 0–700ms · the ring draws itself, clockwise from the top point */
.bh-run #hex-ring {
  animation: bh-ring 700ms var(--bh-ease) 0ms both,
             bh-ring-close 1ms linear 700ms both;
}
@keyframes bh-ring { from { stroke-dashoffset: 296.027; } to { stroke-dashoffset: 0; } }
/* The dash starts and ends on the top vertex, so the join there is never drawn:
   it runs 2.4 units long to cover the seam, then the dash is dropped entirely
   once the ring closes, leaving the static shape. */
@keyframes bh-ring-close { to { stroke-dasharray: none; stroke-dashoffset: 0; } }

/* The hub is the origin of everything, so it lands first. */
.bh-run #hub { animation: bh-in 200ms var(--bh-ease) 0ms both; }
@keyframes bh-in { from { opacity: 0; } to { opacity: 1; } }

/* 600–1220ms · connectors draw outward from the hub, 70ms apart. The sign of
   the offset picks the end nearest the hub as the origin. */
.bh-run #connectors polyline {
  animation-duration: 200ms;
  animation-timing-function: var(--bh-ease);
  animation-fill-mode: both;
}
.bh-run #connector-1a { animation-name: bh-draw-back; animation-delay: 600ms; }
.bh-run #connector-1b { animation-name: bh-draw-fwd;  animation-delay: 670ms; }
.bh-run #connector-2  { animation-name: bh-draw-back; animation-delay: 740ms; }
.bh-run #connector-3  { animation-name: bh-draw-back; animation-delay: 810ms; }
.bh-run #connector-4  { animation-name: bh-draw-back; animation-delay: 880ms; }
.bh-run #connector-5  { animation-name: bh-draw-fwd;  animation-delay: 950ms; }
.bh-run #connector-6  { animation-name: bh-draw-fwd;  animation-delay: 1020ms; }
@keyframes bh-draw-fwd  { from { stroke-dashoffset: var(--bh-len); } to { stroke-dashoffset: 0; } }
@keyframes bh-draw-back { from { stroke-dashoffset: calc(var(--bh-len) * -1); } to { stroke-dashoffset: 0; } }

/* 1000–1600ms · nodes pop in largest first, 60ms apart, each about its own
   centre. The per-node selectors carry a type selector because the rule setting
   the shorthand does too — a bare id would lose and every delay would fall to 0. */
.bh-run #nodes circle { animation: bh-pop 120ms var(--bh-ease) both; }
.bh-run #nodes circle#node-1 { animation-delay: 1000ms; }
.bh-run #nodes circle#node-2 { animation-delay: 1060ms; }
.bh-run #nodes circle#node-3 { animation-delay: 1120ms; }
.bh-run #nodes circle#node-4 { animation-delay: 1180ms; }
.bh-run #nodes circle#node-5 { animation-delay: 1240ms; }
.bh-run #nodes circle#node-6 { animation-delay: 1300ms; }
.bh-run #nodes circle#node-7 { animation-delay: 1360ms; }
.bh-run #nodes circle#node-8 { animation-delay: 1420ms; }
.bh-run #nodes circle#node-9 { animation-delay: 1480ms; }
@keyframes bh-pop {
  from { opacity: 0; transform: scale(0.6); }
  70%  { opacity: 1; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}

/* 1200–1600ms · the fill warms. Both stops start on the same yellow, so the
   mark reads flat until this runs — no second copy, no cross-fade. */
.bh-run #bh-stop-b { animation: bh-warm 400ms var(--bh-ease) 1200ms both; }
@keyframes bh-warm { from { stop-color: #FFC300; } to { stop-color: #FFD84D; } }

@media (prefers-reduced-motion: reduce) {
  .bh-run #hex-ring,
  .bh-run #connectors polyline,
  .bh-run #nodes circle,
  .bh-run #hub,
  .bh-run #bh-stop-b { animation: none; }
  .bh-anim #hex-ring { stroke-dasharray: none; stroke-dashoffset: 0; }
  .bh-anim #connectors polyline { stroke-dashoffset: 0; }
  .bh-anim #nodes circle, .bh-anim #hub { opacity: 1; transform: none; }
  .bh-anim #bh-stop-b { stop-color: #FFD84D; }
}

/* ---- LAYOUT ------------------------------------------------ */

.wrap {
  max-width: var(--bh-max-width);
  width: 100%;
  margin: 0 auto;
}

.section {
  padding: var(--bh-space-96) var(--bh-space-32);
  border-bottom: var(--bh-border);
  /* Clears the sticky bar when a link jumps to a section. */
  scroll-margin-top: var(--bh-space-96);
}
.section--flush { border-bottom: 0; }

.stack { display: flex; flex-direction: column; }
.stack-4  { gap: var(--bh-space-4); }
.stack-8  { gap: var(--bh-space-8); }
.stack-16 { gap: var(--bh-space-16); }
.stack-24 { gap: var(--bh-space-24); }
.stack-32 { gap: var(--bh-space-32); }
.stack-48 { gap: var(--bh-space-48); }

.grid {
  display: grid;
  gap: var(--bh-space-16);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.grid--wide {
  gap: var(--bh-space-32);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.grid--half { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.span-all { grid-column: 1 / -1; }

/* ---- TYPE -------------------------------------------------- */

.eyebrow {
  font-family: var(--bh-font-mono);
  font-size: var(--bh-label-11);
  font-weight: var(--bh-weight-body);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
  color: var(--bh-muted);
  line-height: 1.5;
}
.eyebrow--accent { color: var(--bh-yellow); }
.eyebrow--body   { color: var(--bh-body); }

/* --bh-muted is legal on Ink and nowhere else: the token file measures it at
   4.53:1 on Ink, 3.72:1 on Surface and 3.20:1 on Raised, and marks the last
   two as non-text. So inside any panel the label steps up to body, which holds
   7.29:1 on Surface and 6.26:1 on Raised. */
.card .eyebrow,
.step .eyebrow,
.counter .eyebrow,
.finding .eyebrow,
.field__hint { color: var(--bh-body); }
/* The deep red panel is its own case: yellow on red is 6.90:1 and correct. */
.exclusions .eyebrow { color: var(--bh-yellow); }

.display,
.h1, .h2, .h3 {
  margin: 0;
  font-family: var(--bh-font-display);
  font-weight: var(--bh-weight-display);
  letter-spacing: var(--bh-tracking-display);
  text-transform: uppercase;
  color: var(--bh-paper);
}
.display { font-size: min(var(--bh-display-96), 7vw); line-height: 0.95; color: var(--bh-yellow); }
.h1 { font-size: min(var(--bh-display-64), 9vw); line-height: 1; }
.h2 { font-size: min(var(--bh-display-64), 8vw); line-height: 1; max-width: 20ch; }
.h3 { font-size: var(--bh-display-32); line-height: 1.05; }

.lead {
  margin: 0;
  max-width: 560px;
  font-size: var(--bh-text-18);
  line-height: 1.6;
  color: var(--bh-body);
  text-wrap: pretty;
}
.p {
  margin: 0;
  font-size: var(--bh-text-16);
  line-height: 1.6;
  color: var(--bh-body);
  text-wrap: pretty;
  max-width: 68ch;
}
.p--em { color: var(--bh-yellow-light); font-weight: var(--bh-weight-medium); }

.figure {
  font-family: var(--bh-font-display);
  font-weight: var(--bh-weight-display);
  font-size: var(--bh-hero-figure);
  line-height: 1;
  letter-spacing: var(--bh-tracking-display);
  color: var(--bh-yellow-light);
}

/* ---- CONTROLS ---------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bh-space-8);
  min-height: var(--bh-touch-min);
  padding: var(--bh-space-16) var(--bh-space-32);
  border-radius: var(--bh-radius-pill);
  border: 1px solid var(--bh-yellow);
  background: var(--bh-yellow);
  color: var(--bh-ink);
  font-family: var(--bh-font-mono);
  font-size: var(--bh-label-11);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover {
  background: var(--bh-yellow-light);
  border-color: var(--bh-yellow-light);
  color: var(--bh-ink);
}

.btn--ghost {
  background: transparent;
  border-color: var(--bh-rule);
  color: var(--bh-yellow);
}
.btn--ghost:hover {
  background: transparent;
  border-color: var(--bh-yellow-light);
  color: var(--bh-yellow-light);
}

.arrow {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--bh-space-8);
  min-height: var(--bh-touch-min);
  padding: var(--bh-space-8) 0;
  font-family: var(--bh-font-mono);
  font-size: var(--bh-label-11);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bh-yellow-light);
}
.arrow:hover { text-decoration: underline; text-underline-offset: 4px; color: var(--bh-yellow-light); }
.arrow svg { width: 24px; height: 24px; flex: none; }

.skip {
  position: absolute;
  left: var(--bh-space-16);
  top: -64px;
  z-index: var(--bh-z-toast);
  display: inline-flex;
  align-items: center;
  min-height: var(--bh-touch-min);
  padding: var(--bh-space-8) var(--bh-space-24);
  border-radius: var(--bh-radius-pill);
  background: var(--bh-yellow);
  color: var(--bh-ink);
  font-family: var(--bh-font-mono);
  font-size: var(--bh-label-11);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  transition: top var(--bh-duration-200) var(--bh-ease);
}
.skip:focus { top: var(--bh-space-16); color: var(--bh-ink); }

/* ---- SURFACES ---------------------------------------------- */

/* Elevation is a border plus a ground shift. Never a shadow. */
.card {
  min-width: 0;
  background: var(--bh-surface);
  border: var(--bh-border);
  border-radius: var(--bh-radius-16);
  padding: var(--bh-space-32);
}
.card--link { text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; gap: var(--bh-space-32); }
.card--link:hover { border-color: var(--bh-yellow-light); }

.rule-top { border-top: var(--bh-border); padding-top: var(--bh-space-24); }

/* The 3% noise that stops a large flat field looking printed. */
.noise::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--bh-field-noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
}

/* ---- NAV --------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--bh-z-sticky);
  background: var(--bh-ink);
  border-bottom: var(--bh-border);
}
.nav__inner {
  max-width: var(--bh-max-width);
  margin: 0 auto;
  padding: var(--bh-space-16) var(--bh-space-32);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bh-space-24);
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--bh-space-16);
  color: var(--bh-yellow);
  text-decoration: none;
  min-height: var(--bh-touch-min);
}
.nav__brand:hover { color: var(--bh-yellow-light); }
/* The full mark, and so at least 34px — below that the tier rules call for the
   simple mark, because the connectors and the smallest nodes close up. */
.nav__brand svg { width: 32px; height: 36px; flex: none; display: block; }
.nav__wordmark {
  font-family: var(--bh-font-display);
  font-weight: var(--bh-weight-display);
  font-size: var(--bh-text-18);
  letter-spacing: var(--bh-tracking-display);
  text-transform: uppercase;
  color: var(--bh-paper);
}
.nav__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bh-space-8) var(--bh-space-24);
}
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--bh-touch-min);
  font-family: var(--bh-font-mono);
  font-size: var(--bh-label-11);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bh-body);
}
.nav__link:hover { color: var(--bh-yellow-light); }
/* The current page is marked by a rule as well as a colour, so it survives
   a photocopy and a colourblind reader. */
.nav__link[aria-current="page"] {
  color: var(--bh-yellow-light);
  border-bottom: 2px solid var(--bh-yellow-light);
}

/* The menu is a <details>. On a wide screen the summary is hidden and the
   links are forced visible whether it is open or not. On a phone the browser's
   own open/closed behaviour does the work, so the menu costs nothing when
   JavaScript is off. */
.nav__menu { min-width: 0; }
.nav__menu > summary {
  display: none;
  list-style: none;
  cursor: pointer;
  align-items: center;
  gap: var(--bh-space-8);
  min-height: var(--bh-touch-min);
  padding: var(--bh-space-8) var(--bh-space-16);
  border: var(--bh-border);
  border-radius: var(--bh-radius-pill);
  color: var(--bh-yellow);
  font-family: var(--bh-font-mono);
  font-size: var(--bh-label-11);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}
.nav__menu > summary::-webkit-details-marker { display: none; }
.nav__menu > summary::after { content: "+"; font-size: 14px; line-height: 1; }
.nav__menu[open] > summary::after { content: "\2212"; }
.nav__menu[open] > summary { border-color: var(--bh-yellow-light); color: var(--bh-yellow-light); }

/* Chromium hides a closed details' contents with content-visibility, which a
   display rule cannot override. So the browser's own hiding is switched off
   and the phone rule below does the hiding instead. */
.nav__menu::details-content { content-visibility: visible; block-size: auto; }

/* A plain row of links, used on the 404 page. Shares the link styling but
   never the menu behaviour. */
.linkrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bh-space-8) var(--bh-space-24);
}

/* The mark inside a round avatar tile. Sized here rather than by a percentage
   height on a wrapper: an inline SVG has no intrinsic width, so a block wrapper
   with only a height collapses it to zero and the tile renders empty. The tile
   is 96px, and 0.62 of its height is the mark's specified proportion. */
.avatar__mark {
  height: 59.52px;   /* 0.62 × 96 */
  width: auto;
  display: block;
  flex: none;
}

/* ---- HERO -------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--bh-ink-deep);
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--bh-space-96) var(--bh-space-32) var(--bh-space-64);
}
.hero--short { min-height: 0; padding: var(--bh-space-64) var(--bh-space-32); }
.hero__inner { position: relative; }
.hero__mark {
  position: absolute;
  top: -22%;
  right: -14%;
  height: 128%;
  width: auto;
  opacity: 0.20;
  pointer-events: none;
}
.hero__line { display: block; white-space: nowrap; }

/* ---- COUNTERS ---------------------------------------------- */

.counter {
  background: var(--bh-surface);
  border: var(--bh-border);
  border-radius: var(--bh-radius-16);
  padding: var(--bh-space-32);
  display: flex;
  align-items: center;
  gap: var(--bh-space-24);
  flex-wrap: wrap;
}
.counter__gauge { position: relative; flex: none; width: 112px; height: 128px; }
.counter__gauge svg { width: 100%; height: 100%; display: block; }
.counter__figure {
  position: absolute;
  top: 50.1%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--bh-font-display);
  font-weight: var(--bh-weight-display);
  font-size: var(--bh-hero-figure);
  line-height: 1;
  letter-spacing: var(--bh-tracking-display);
}

/* ---- FINDINGS ---------------------------------------------- */

.finding {
  background: var(--bh-surface);
  border: var(--bh-border);
  border-left: 2px solid var(--bh-yellow);
  border-radius: var(--bh-radius-8);
  padding: var(--bh-space-24);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--bh-space-16) var(--bh-space-32);
}

/* ---- STEPS ------------------------------------------------- */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bh-space-16); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.step {
  background: var(--bh-surface);
  border: var(--bh-border);
  border-radius: var(--bh-radius-16);
  padding: var(--bh-space-32);
  display: flex;
  flex-direction: column;
  gap: var(--bh-space-16);
}
.step__n {
  font-family: var(--bh-font-mono);
  font-size: var(--bh-label-11);
  letter-spacing: var(--bh-tracking-label);
  color: var(--bh-yellow);
}

.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--bh-space-16); }
.tick { display: flex; gap: var(--bh-space-16); align-items: flex-start; }
.tick svg { width: 24px; height: 24px; flex: none; color: var(--bh-yellow); }

/* Exclusions sit on the deep red ground — red is a ground, never an ink. */
.exclusions {
  background: var(--bh-red);
  border-radius: var(--bh-radius-16);
  padding: var(--bh-space-32);
  display: flex;
  flex-direction: column;
  gap: var(--bh-space-16);
}
.exclusions .eyebrow { color: var(--bh-yellow); }
.exclusions .p, .exclusions li { color: var(--bh-paper); }
.exclusions ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--bh-space-8); }
.exclusions li { display: flex; gap: var(--bh-space-16); }

/* ---- FORM -------------------------------------------------- */

/* Honeypot. Moved off-screen rather than display:none, so a bot reading the
   raw HTML sees an ordinary field and fills it — which is how it identifies
   itself. Kept out of the tab order and off the accessibility tree, so no
   person ever meets it. */
.hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field { display: flex; flex-direction: column; gap: var(--bh-space-8); }
.field__label {
  font-family: var(--bh-font-mono);
  font-size: var(--bh-label-11);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
  color: var(--bh-body);
}
.field__control {
  min-height: var(--bh-touch-min);
  padding: var(--bh-space-8) var(--bh-space-16);
  border-radius: var(--bh-radius-8);
  border: var(--bh-border);
  background: var(--bh-raised);
  color: var(--bh-body);
  font-family: var(--bh-font-body);
  font-size: var(--bh-text-16);
  width: 100%;
}
/* Height comes from the rows attribute, so a two-line question does not get
   the same box as a five-line one. */
textarea.field__control { line-height: 1.6; resize: vertical; padding-top: var(--bh-space-16); }
.field__control[aria-invalid="true"] { border: 2px solid var(--bh-alert); }
.field__hint, .field__error {
  font-size: var(--bh-text-14);
  line-height: 1.5;
}
/* The word Error and an icon carry the meaning. The colour only agrees. */
.field__error { color: var(--bh-alert); display: flex; gap: var(--bh-space-8); align-items: flex-start; }
.field__error svg { width: 20px; height: 20px; flex: none; }

.form-error-summary {
  display: flex;
  gap: var(--bh-space-16);
  align-items: flex-start;
  border: 2px solid var(--bh-alert);
  border-radius: var(--bh-radius-8);
  padding: var(--bh-space-16);
  color: var(--bh-alert);
}
.form-error-summary svg { width: 24px; height: 24px; flex: none; }

/* ---- PATTERN FIELD -----------------------------------------
   The honeycomb tile carries its own Ink ground and its own 18% opacity, so it
   is laid on directly rather than dimmed here. Texture only: nothing in it is
   colour-coded, and it survives greyscale. */

/* The tile already carries the mark at 18% on its own Ink ground. Laid on flat
   that still competes with the headline, so it goes on its own layer at half
   strength — an effective ~9% — which reads as a surface and disappears the
   moment you look at the words. Texture, never information. */
.pattern { position: relative; background-color: var(--bh-ink); }
.pattern::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/img/patterns/bh-pattern-sparse-ink.svg");
  background-repeat: repeat;
  background-size: 104px auto;
  opacity: 0.5;
  mix-blend-mode: normal;
  pointer-events: none;
  z-index: var(--bh-z-pattern);
}
/* Content sits above both the pattern and the noise. */
.pattern > * { position: relative; z-index: var(--bh-z-raised); }

@media (max-width: 720px) {
  .pattern::after { background-size: 76px auto; opacity: 0.42; }
}

/* ---- RECEIPT — the client's own details on the thank-you page --- */

.receipt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bh-space-24) var(--bh-space-48);
  background: var(--bh-surface);
  border: var(--bh-border);
  border-left: 2px solid var(--bh-yellow);
  border-radius: var(--bh-radius-16);
  padding: var(--bh-space-24) var(--bh-space-32);
  align-self: flex-start;
  max-width: 100%;
}
.receipt__cell {
  display: flex;
  flex-direction: column;
  gap: var(--bh-space-4);
  min-width: 0;
}
.receipt__value {
  font-family: var(--bh-font-display);
  font-weight: var(--bh-weight-display);
  font-size: var(--bh-display-32);
  line-height: 1.05;
  letter-spacing: var(--bh-tracking-display);
  text-transform: uppercase;
  color: var(--bh-paper);
  overflow-wrap: anywhere;
}
/* The reference is quoted back in emails, so it is set in the mono face where
   a 1 and an l cannot be confused. */
.receipt__ref {
  font-family: var(--bh-font-mono);
  font-size: var(--bh-text-16);
  letter-spacing: 0.04em;
  color: var(--bh-yellow-light);
  overflow-wrap: anywhere;
}
.receipt .figure { font-size: var(--bh-display-32); }

@media (max-width: 720px) {
  .receipt { padding: var(--bh-space-16) var(--bh-space-24); gap: var(--bh-space-16); }
  .receipt__value { font-size: var(--bh-text-18); }
}

/* ---- CLIENT BRIEF ------------------------------------------ */

.brief-bar {
  position: sticky;
  top: 0;
  z-index: var(--bh-z-sticky);
  background: var(--bh-ink);
  border-bottom: var(--bh-border);
}
.brief-bar__inner {
  padding: var(--bh-space-16) var(--bh-space-32);
  display: flex;
  align-items: center;
  gap: var(--bh-space-16) var(--bh-space-24);
  flex-wrap: wrap;
}
.progress {
  flex: 1 1 200px;
  min-width: 160px;
  height: 8px;
  border-radius: var(--bh-radius-pill);
  background: var(--bh-surface);
  border: var(--bh-border);
  overflow: hidden;
}
.progress__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--bh-yellow);
  transition: width var(--bh-duration-300) var(--bh-ease);
}
/* The count in words sits beside the bar, so the bar is never the only
   thing carrying the answer. */
#brief-save[data-saved="1"] { color: var(--bh-yellow); }

.q__ask {
  display: flex;
  gap: var(--bh-space-16);
  align-items: baseline;
  font-size: var(--bh-text-16);
  line-height: 1.5;
  color: var(--bh-paper);
  cursor: pointer;
}
.q__n {
  flex: none;
  font-family: var(--bh-font-mono);
  font-size: var(--bh-label-11);
  letter-spacing: var(--bh-tracking-label);
  color: var(--bh-yellow);
}

.chips { display: flex; flex-wrap: wrap; gap: var(--bh-space-8); width: 100%; }
.chip { display: contents; }
/* The checkbox itself is the state. It stays reachable by keyboard and by a
   screen reader; only its box is replaced by the label. */
.chip__box {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.chip__label {
  display: inline-flex;
  align-items: center;
  gap: var(--bh-space-8);
  min-height: var(--bh-touch-min);
  padding: var(--bh-space-8) var(--bh-space-16);
  border: var(--bh-border);
  border-radius: var(--bh-radius-pill);
  background: transparent;
  color: var(--bh-body);
  font-family: var(--bh-font-mono);
  font-size: var(--bh-label-11);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}
/* Selected carries a tick as well as a fill, so it survives a photocopy. */
.chip__label::before { content: "+"; font-size: 14px; line-height: 1; }
.chip__box:checked + .chip__label {
  background: var(--bh-yellow);
  border-color: var(--bh-yellow);
  color: var(--bh-ink);
}
.chip__box:checked + .chip__label::before { content: "\2713"; }
.chip__box:focus-visible + .chip__label {
  outline: 2px solid var(--bh-yellow);
  outline-offset: 2px;
}
.chip__label:hover { border-color: var(--bh-yellow-light); color: var(--bh-yellow-light); }
.chip__box:checked + .chip__label:hover { color: var(--bh-ink); background: var(--bh-yellow-light); }

/* The two follow-ups open on tick, with no JavaScript involved. */
.chip__more { display: none; }
.chip__box:checked ~ .chip__more {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--bh-space-16);
  width: 100%;
  background: var(--bh-surface);
  border: var(--bh-border);
  border-radius: var(--bh-radius-16);
  padding: var(--bh-space-24);
  margin: var(--bh-space-8) 0 var(--bh-space-16);
}
.chip__more .field__label { color: var(--bh-body); }

/* ---- FOOTER ------------------------------------------------ */

.footer { padding: var(--bh-space-48) var(--bh-space-32); border-top: var(--bh-border); }
.footer__inner {
  max-width: var(--bh-max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bh-space-24);
  justify-content: space-between;
  align-items: center;
}
.footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bh-space-16) var(--bh-space-32);
  align-items: center;
}
.footer__meta a,
.footer__meta span {
  font-family: var(--bh-font-mono);
  font-size: var(--bh-label-11);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
  text-decoration: none;
}
.footer__meta span { color: var(--bh-muted); }
.footer__meta a { color: var(--bh-yellow); min-height: var(--bh-touch-min); display: inline-flex; align-items: center; }
.footer__meta a:hover { color: var(--bh-yellow-light); }

/* ---- SMALL SCREENS ----------------------------------------- */

@media (max-width: 720px) {
  .section, .hero, .footer, .nav__inner {
    padding-left: var(--bh-space-24);
    padding-right: var(--bh-space-24);
  }
  .section { padding-top: var(--bh-space-64); padding-bottom: var(--bh-space-64); }
  .hero { min-height: 0; padding-top: var(--bh-space-64); padding-bottom: var(--bh-space-48); }
  .hero__line { white-space: normal; }
  .card, .step, .counter, .exclusions { padding: var(--bh-space-24); }
  .nav__menu > summary { display: inline-flex; }
  .nav__menu:not([open]) .nav__links { display: none; }
  .nav__menu {
    position: absolute;
    right: var(--bh-space-24);
    top: var(--bh-space-16);
  }
  .nav__inner { position: relative; padding-right: 120px; }
  .nav__menu .nav__links {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-top: var(--bh-space-8);
    padding: var(--bh-space-8) var(--bh-space-16);
    background: var(--bh-surface);
    border: var(--bh-border);
    border-radius: var(--bh-radius-16);
    position: absolute;
    right: 0;
    min-width: 220px;
    z-index: var(--bh-z-overlay);
  }
  .nav__link { width: 100%; }
}

@media (max-width: 420px) {
  .counter { gap: var(--bh-space-16); }
  .counter__gauge { width: 88px; height: 100px; }
}

/* ---- PRINT — a photocopy still answers --------------------- */

@media print {
  body { background: #fff; color: #000; }
  .nav, .skip, .hero__mark, .noise::before { display: none; }
  .card, .step, .counter, .finding { border: 1px solid #000; background: #fff; }
  .display, .h1, .h2, .h3, .figure, .counter__figure { color: #000; }
  a[href^="http"]::after, a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 10pt; }
}