/* ==========================================================================
   The BCBA Center — Brand Kit v1 · 2026
   Tokens mirror brand.json. Change them in both places.
   ========================================================================== */

:root {
  /* --- Color: four colors, no fifth ------------------------------------ */
  --black: #0f0f0f;
  --orange: #e87b23;
  --warm-white: #fbfaf8;
  --neutral: #f5f5f4;

  /* Derived, not new brand colors */
  --white: #fff;
  --orange-text: #c2620f; /* orange type on light — passes contrast */
  /* Two hover ramps, because backgrounds and text start from different
     places. Each MUST be darker than the value it replaces — hovering
     lighter reads as "disabled" and drops contrast. */
  --orange-hover: #d96f18;      /* backgrounds: darker than --orange */
  --orange-text-hover: #a8520c; /* text on light: darker than --orange-text (5.2:1) */
  --error: #b3261e;

  /* Ink tints */
  --ink-70: rgba(15, 15, 15, 0.7);
  --ink-68: rgba(15, 15, 15, 0.68);
  --ink-62: rgba(15, 15, 15, 0.62);
  --ink-60: rgba(15, 15, 15, 0.6);
  --ink-50: rgba(15, 15, 15, 0.5);
  --ink-45: rgba(15, 15, 15, 0.45);
  --ink-40: rgba(15, 15, 15, 0.4);
  --ink-30: rgba(15, 15, 15, 0.3);

  /* Lines */
  --hairline: rgba(15, 15, 15, 0.08);
  --rule: rgba(15, 15, 15, 0.07);
  --border-strong: rgba(15, 15, 15, 0.16);
  --border-soft: rgba(15, 15, 15, 0.1);

  /* --- Type: three roles, no overlap ----------------------------------- */
  --font-sans: Jost, system-ui, -apple-system, sans-serif;
  --font-serif: "Bodoni Moda", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* --- Shape ----------------------------------------------------------- */
  --radius-card: 20px;
  --radius-plate: 22px;
  --radius-tile: 18px;
  --radius-field: 12px;
  --radius-pill: 999px;

  --wrap: 1160px;
  --gutter: 24px;
  --gap: 20px;

  /* --- Motion ----------------------------------------------------------
     Two curves, deliberately. Naming exactly two in :root makes it hard for
     the next person to invent a third. */
  --ease: cubic-bezier(0.33, 1, 0.68, 1);        /* easeOutCubic — state changes */
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);   /* easeOutExpo — entrances only */

  --dur-press: 90ms;
  --dur-hover: 180ms;
  --dur-exit: 110ms;   /* hover-OUT is faster than in, so a fast cursor sweep
                          across a card grid leaves no trailing wake */
  --dur-enter: 400ms;

  /* Motion geometry. Zeroed under prefers-reduced-motion, which is what makes
     every transform-based state self-disable — see the REDUCED MOTION block.
     Note: translateY(0px) is not `transform: none`; it still establishes a
     containing block for position:fixed descendants. None exist in the
     elements these are applied to. Check before adding one. */
  --lift: -3px;
  --lift-sm: -2px;
  --lift-btn: -1px;
  --press: 0.98;

  /* Warm shadows. Neutral grey on a warm-white ground reads perceptually cool,
     which smuggles a fifth color into a four-color palette. Two layers: a tight
     contact shadow plus a soft elevation one. Keep the negative spread large —
     --gap is 20px and adjacent rows would otherwise darken each other. */
  --shadow-sm: 0 1px 2px -1px hsl(28 30% 12% / 0.07),
               0 3px 8px -5px hsl(28 30% 12% / 0.16);
  --shadow-lift: 0 1px 2px -1px hsl(28 30% 12% / 0.06),
                 0 10px 24px -14px hsl(28 30% 12% / 0.2);
  --shadow-raise: 0 2px 4px -2px hsl(28 30% 12% / 0.06),
                  0 22px 44px -26px hsl(28 30% 12% / 0.26);
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--warm-white);
  color: var(--black);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--orange-text);
  text-decoration: none;
}


/* Black, not orange: orange on the warm-white ground is 2.76:1, under the 3:1
   WCAG 1.4.11 floor for focus indicators. Black is 18.4:1, and it is what the
   brand kit's own component spec sheet documents.
   No border-radius here — outlines follow the element's own radius natively,
   and setting it would square off every pill button on focus. */
:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 3px;
}

/* Dark surfaces need the ring inverted or it is invisible. */
.btn--dark:focus-visible,
.btn--ghost:focus-visible,
.bundle:focus-visible,
.card__stage--dark :focus-visible,
.panel :focus-visible,
.social :focus-visible {
  outline-color: var(--white);
}

img,
svg {
  max-width: 100%;
}

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

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: 0 80px;
}

.section--band {
  background: var(--neutral);
  padding-block: 80px;
  border-top: 1px solid rgba(15, 15, 15, 0.06);
}

.section--band-closed {
  border-bottom: 1px solid rgba(15, 15, 15, 0.06);
}

.section--icons {
  padding-block: 80px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--min, 280px), 1fr));
  gap: var(--gap);
}

.grid + .grid {
  margin-top: var(--gap);
}

.grid--logo      { --min: 290px; }
.grid--guides    { --min: 300px; }
.grid--misuse    { --min: 250px; }
.grid--palette   { --min: 230px; }
.grid--icons     { --min: 130px; gap: 16px; }
.grid--component { --min: 310px; }
.grid--template  { --min: 300px; align-items: start; }

/* ==========================================================================
   Type roles
   ========================================================================== */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--orange-text);
  margin: 0 0 14px;
}

.display {
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
}

.heading {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 30px;
}

.heading--tight {
  margin-bottom: 12px;
}

.subhead {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 8px;
}

.subhead--lg {
  font-size: 20px;
  margin: 48px 0 20px;
}

.lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-62);
  margin: 0;
  max-width: 36em;
}

.lede--sm {
  font-size: 17px;
  color: var(--ink-60);
  margin-bottom: 34px;
  max-width: 38em;
}

.lede--icons {
  margin-bottom: 32px;
  max-width: 36em;
}

.body-copy {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-60);
  margin: 0;
}

.label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-45);
  margin: 0;
}

.label--xs {
  font-size: 9px;
}

.label--accent {
  color: var(--orange-text);
}

.label--stacked {
  margin-bottom: 6px;
}

.label--wide {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-50);
}

.data {
  font-family: var(--font-mono);
  font-size: 14px;
}

.tagline {
  font-size: 13px;
  letter-spacing: 0.34em;
  font-weight: 500;
  color: var(--ink-70);
}

.pull-quote {
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.3;
  font-style: italic;
  max-width: 26em;
}

/* ==========================================================================
   Masthead
   ========================================================================== */

.masthead {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 72px var(--gutter) 52px;
}

.masthead .eyebrow {
  margin-bottom: 22px;
}

/* ==========================================================================
   Card
   ========================================================================== */

.card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.card--pad {
  padding: 32px;
}

.card--pad-tight {
  padding: 30px;
}

/* Body copy sitting directly above a diagram or table inside a card */
.card--pad .body-copy {
  margin-bottom: 24px;
}

.card--plate {
  border-radius: var(--radius-plate);
  padding: 6px 30px 8px;
}

.card__stage {
  padding: 56px 32px;
  display: flex;
  justify-content: center;
}

.card__stage--dark {
  background: var(--black);
  color: var(--white);
}

.card__stage--split {
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
}

.card__caption {
  padding: 14px 20px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-50);
}

.card__note {
  padding: 18px 22px 22px;
}

.card__note p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-60);
  margin: 8px 0 0;
}

/* ==========================================================================
   01 · Logo
   ========================================================================== */

.mark {
  display: block;
  color: var(--black); /* currentColor drives the dark half of the mark */
}

.lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.lockup__text {
  text-align: center;
}

.lockup__the {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.36em;
  color: var(--ink-45);
  margin-bottom: 3px;
}

.lockup__word {
  font-size: 26px;
  line-height: 1;
}

.lockup__word .serif {
  font-family: var(--font-serif);
  font-weight: 500;
}

.lockup__word .sans {
  font-weight: 500;
  color: var(--orange);
  letter-spacing: 0.07em;
}

.lockup__tagline {
  font-size: 9px;
  letter-spacing: 0.34em;
  font-weight: 500;
  color: var(--ink-45);
  margin-top: 12px;
}

/* Reversed lockup */
.card__stage--dark .mark {
  color: var(--white);
}

.card__stage--dark .lockup__the {
  color: rgba(255, 255, 255, 0.55);
}

.card__stage--dark .lockup__tagline {
  color: rgba(255, 255, 255, 0.5);
}

/* Clear space diagram */
.clearspace {
  position: relative;
  padding: 44px;
  border: 1px dashed rgba(232, 123, 35, 0.5);
  border-radius: 14px;
  display: inline-block;
}

.clearspace__label {
  position: absolute;
  top: 10px;
  left: 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--orange-text);
}

/* Minimum sizes table */
.specs {
  margin: 0;
  display: grid;
}

.specs__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
}

.specs__row dt {
  padding-top: 2px;
}

.specs__row dd {
  margin: 0;
}

/* Misuse plates */
.misuse {
  padding: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 168px;
  background: var(--neutral);
}

.misuse--orange {
  background: var(--orange);
}

.misuse--stacked {
  flex-direction: column;
  gap: 8px;
}

.is-distorted {
  transform: skewX(-14deg) scaleY(0.72);
}

/* Deliberately off-brand — shown only as a "don't" */
.misuse__wordmark {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  color: #22c55e;
}

/* ==========================================================================
   02 · Palette
   ========================================================================== */

.swatch {
  height: 124px;
}

.swatch--black       { background: var(--black); }
.swatch--orange      { background: var(--orange); }
.swatch--warm-white  { background: var(--warm-white); border-bottom: 1px solid var(--rule); }
.swatch--neutral     { background: var(--neutral); border-bottom: 1px solid var(--rule); }

.swatch-info {
  padding: 20px 22px 24px;
}

.swatch-info__name {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 4px;
}

.swatch-info__hex {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-50);
  margin-bottom: 12px;
}

.swatch-info p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-60);
  margin: 0;
}

.ratio-guide {
  margin: 22px 0 0;
}

/* ==========================================================================
   03 · Type specimen
   ========================================================================== */

.spec {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 28px;
  padding: 26px 0;
}

.spec + .spec {
  border-top: 1px solid var(--rule);
}

.spec__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-45);
  line-height: 1.8;
}

.spec__sample .display,
.spec__sample .heading {
  margin: 0;
}

.spec__body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-68);
  max-width: 34em;
}

.spec__subhead {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
}

@media (max-width: 720px) {
  .spec {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ==========================================================================
   04 · Icons
   ========================================================================== */

.icon {
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-tile {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-tile);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.icon-tile .label {
  font-size: 9px;
  color: var(--ink-50);
}

/* ==========================================================================
   05 · Components
   ========================================================================== */

/* Base only. Every :hover lives in the INTERACTION block at the end of this
   file; every :active lives in the PRESS block directly below it. */
.btn {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  padding: 14px 28px;
  border: none;
  border-radius: var(--radius-pill);
  min-height: 48px;
  cursor: pointer;
}

.btn--primary {
  background: var(--orange);
  color: var(--black);
}

.btn--secondary {
  background: transparent;
  color: var(--black);
  border: 1px solid var(--border-strong);
}

.btn--dark {
  background: var(--black);
  color: var(--white);
}

.btn:disabled {
  cursor: not-allowed;
}

.btn--primary:disabled {
  background: rgba(232, 123, 35, 0.28);
  color: var(--ink-40);
}

.btn--secondary:disabled {
  color: var(--ink-30);
  border-color: var(--border-soft);
}


.btn-link {
  color: var(--orange-text);
  font-weight: 500;
  font-size: 16px;
  border-bottom: 1px solid rgba(194, 98, 15, 0.4);
  padding-bottom: 3px;
  transition: color var(--dur-hover) var(--ease),
              border-color var(--dur-hover) var(--ease);
}

.state-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.state-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.state-row .label {
  font-size: 9px;
  color: var(--ink-45);
}

.card__title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-45);
  margin: 0 0 22px;
  font-weight: 400;
}

/* Fields */
.field-card {
  display: grid;
  gap: 22px;
  align-content: start;
  padding: 30px;
}

.field-card .card__title {
  margin-bottom: 0;
}

.field {
  display: block;
}

.field__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-45);
  margin-bottom: 8px;
}

.input {
  width: 100%;
  background: var(--warm-white);
  border: 1px solid rgba(15, 15, 15, 0.14);
  border-radius: var(--radius-field);
  padding: 13px 16px;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--black);
  min-height: 48px;
}

.input:focus {
  background: var(--white);
  border-color: var(--orange);
  outline: 2px solid rgba(232, 123, 35, 0.25);
  outline-offset: 1px;
}

.input.is-focus {
  background: var(--white);
  border-color: var(--orange);
  outline: 2px solid rgba(232, 123, 35, 0.25);
  outline-offset: 1px;
}

.input:disabled {
  background: var(--neutral);
  border-color: var(--border-soft);
  color: var(--ink-40);
  font-family: var(--font-sans);
}

.input.is-error {
  background: var(--white);
  border-color: var(--error);
}

.field__error {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--error);
  margin-top: 8px;
}

.empty-state {
  background: var(--warm-white);
  border: 1px dashed var(--border-strong);
  border-radius: 14px;
  padding: 24px;
}

.empty-state .label {
  margin-bottom: 10px;
}

.empty-state p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-62);
  margin: 0;
}

/* ==========================================================================
   06 · Templates
   ========================================================================== */

.social {
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius-plate);
  padding: 44px;
  aspect-ratio: 1 / 1;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.social .mark {
  color: var(--white);
}

.social__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.social__brand span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.6);
}

.social__line {
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: pretty;
}

.social__line .accent {
  color: var(--orange);
}

.social__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.social__foot .tagline {
  font-size: 9px;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.5);
}

.social__url {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--orange);
}

.template-note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-50);
  margin: 14px 0 0;
}

.template-note--accent {
  color: var(--orange-text);
  margin-top: 8px;
}

.signature {
  padding: 32px;
  border-radius: var(--radius-plate);
}

.signature__inner {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.signature__block {
  border-left: 2px solid var(--orange);
  padding-left: 20px;
}

.signature__name {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
}

.signature__role {
  font-size: 15px;
  color: var(--ink-60);
  margin-top: 2px;
}

.signature__contact {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-60);
  margin-top: 12px;
  line-height: 1.7;
}

.signature__tagline {
  font-size: 8px;
  letter-spacing: 0.3em;
  font-weight: 500;
  color: var(--ink-45);
  margin-top: 12px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  padding: 40px var(--gutter) 56px;
}

.site-footer__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.site-footer__tagline {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ink-45);
}

.site-footer__legal {
  font-size: 14px;
  color: var(--ink-45);
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.stack-center {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ==========================================================================
   HOMEPAGE
   Shares every token above. Content width is 1200 here vs 1160 on the kit.
   ========================================================================== */

.wrap--wide {
  max-width: 1200px;
}

/* --- Sticky header ---------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 250, 248, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
  /* Never stack the brand above the menu: below 1120px the hamburger takes
     over instead (the row stopped fitting once the nav grew a link). */
  flex-wrap: nowrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--black);
  flex: 0 0 auto;
  transition: opacity var(--dur-hover) var(--ease);
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand__the {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.3em;
  color: var(--ink-45);
}

.brand__word {
  font-size: 15px;
}

.brand__word .serif {
  font-family: var(--font-serif);
  font-weight: 500;
}

.brand__word .sans {
  font-weight: 500;
  color: var(--orange);
  letter-spacing: 0.07em;
}

.site-nav {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: 500;
}

.site-nav a {
  color: var(--ink-60);
}

/* .is-current is persistent state, not a pointer state, so it stays out of
   the hover guard. The :hover half lives in the INTERACTION block. */
.site-nav a.is-current {
  color: var(--black);
}

/* --- Buttons: link-flavored and sizes --------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn--sm {
  font-size: 15px;
  padding: 11px 22px;
  min-height: 44px;
}

.btn--lg {
  padding: 15px 30px;
  min-height: 50px;
}

/* Secondary sitting on a dark panel */
.btn--ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.28);
}


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

.hero {
  max-width: 1200px;
  margin-inline: auto;
  padding: 72px var(--gutter) 88px;
}

.audience-tabs {
  display: inline-flex;
  padding: 5px;
  border: 1px solid rgba(15, 15, 15, 0.09);
  border-radius: var(--radius-pill);
  background: var(--white);
  margin-bottom: 48px;
}

.audience-tab {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  padding: 11px 24px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: rgba(15, 15, 15, 0.55);
  transition: background 160ms ease, color 160ms ease;
}

.audience-tab[aria-selected="true"] {
  background: var(--black);
  color: var(--white);
}

.hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 60px;
  align-items: center;
}

.hero__grid[hidden] {
  display: none;
}

.hero__title {
  font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  text-wrap: pretty;
}

.hero__title .accent {
  color: var(--orange);
}

.hero__sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-62);
  margin: 0 0 34px;
  max-width: 30em;
}

.hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* --- Record / matched-role card --------------------------------------- */

.record {
  background: var(--white);
  /* Explicit, not inherited: the card also sits inside .panel, which sets
     white text for its dark ground. */
  color: var(--black);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 44px -28px rgba(15, 15, 15, 0.28);
  overflow: hidden;
}

.record__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--rule);
}

.record__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ink-50);
}

.record__badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--orange-text);
  background: rgba(232, 123, 35, 0.1);
  border-radius: var(--radius-pill);
  padding: 5px 10px;
  white-space: nowrap;
}

.record__body {
  padding: 26px 24px 28px;
}

.record__status {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 22px;
  font-size: 17px;
  font-weight: 500;
}

.record__status .icon {
  stroke-width: 1.7;
  flex: 0 0 auto;
}

.record__list {
  margin: 0;
  display: grid;
}

.record__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--rule);
}

.record__row dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-45);
  padding-top: 2px;
}

.record__row dd {
  margin: 0;
  font-size: 15px;
  text-align: right;
}

.record__row dd.data {
  font-size: 14px;
}

.record__sub {
  color: var(--ink-45);
  font-size: 13px;
  font-family: var(--font-sans);
}

.record__row dd.is-muted {
  color: var(--ink-60);
}

/* --- Dark panel (About, CTA) ------------------------------------------ */

.panel {
  max-width: 1200px;
  margin-inline: auto;
  background: var(--black);
  color: var(--white);
  border-radius: 28px;
  padding: clamp(40px, 5vw, 72px);
}

.panel .eyebrow {
  color: var(--orange);
}

.panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 56px;
  align-items: start;
}

.panel__title {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  text-wrap: pretty;
}

.panel__quote {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.35;
  font-style: italic;
  color: var(--orange);
  margin: 0 0 26px;
  max-width: 22em;
}

.panel__body {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
  margin: 0;
  max-width: 32em;
}

/* Stacked paragraphs need air between them; a single one keeps the panel's
   own spacing. Adjacent-sibling only, so nothing else shifts. */
.panel__body + .panel__body,
.panel--cta .panel__intro p + p {
  margin-top: 16px;
}

.panel__col {
  display: grid;
  gap: 20px;
}

.panel__closer {
  font-size: 18px;
  line-height: 1.5;
  margin: 12px 0 0;
  font-weight: 500;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
}

/* --- Generic homepage section ----------------------------------------- */

.block {
  padding: 0 var(--gutter) 96px;
}

.block__title {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.block__lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-60);
  margin: 0 0 40px;
  max-width: 34em;
}

/* --- Verification cards ----------------------------------------------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--gap);
}

.feature-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-tile);
  padding: 30px 26px;
}

.feature-card .icon {
  margin-bottom: 18px;
}

.feature-card h3 {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 10px;
}

.feature-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-60);
  margin: 0;
}

/* --- For orgs / for BCBAs --------------------------------------------- */

.split {
  max-width: 1200px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--gap);
}

.offer {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-plate);
  padding: clamp(30px, 3vw, 44px);
}

.offer__title {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 24px;
}

.offer__list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  gap: 16px;
}

.offer__list li {
  display: flex;
  gap: 12px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-68);
}

.offer__list li::before {
  content: "—";
  color: var(--orange);
  flex: 0 0 auto;
}

/* --- Process ---------------------------------------------------------- */

.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: var(--gap);
}

.step {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-tile);
  padding: 28px 26px;
}

.step__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--orange-text);
  background: rgba(232, 123, 35, 0.1);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  display: inline-block;
  margin-bottom: 20px;
}

.step h3 {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 10px;
}

.step p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-60);
  margin: 0;
}

.block--process {
  background: var(--neutral);
  padding: 88px var(--gutter);
  border-top: 1px solid rgba(15, 15, 15, 0.06);
  border-bottom: 1px solid rgba(15, 15, 15, 0.06);
}

.block--process .block__title {
  margin-bottom: 44px;
}

/* --- Pricing strip ---------------------------------------------------- */

.pricing {
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  gap: 32px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

.pricing__line {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 26em;
}

a.btn-link {
  font-size: 17px;
}

/* --- FAQ -------------------------------------------------------------- */

.faq {
  max-width: 1200px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 48px;
}

.faq__title {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
}

.faq__list {
  display: grid;
  gap: 14px;
}

.faq__item {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 24px 26px;
}

.faq__item h3 {
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 8px;
}

.faq__item p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-60);
  margin: 0;
}

/* --- Contact CTA ------------------------------------------------------ */

.panel--cta {
  display: flex;
  gap: 36px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: clamp(40px, 4.5vw, 64px);
}

.panel--cta .panel__title {
  margin-bottom: 12px;
  max-width: 24em;
  font-size: clamp(26px, 3.2vw, 40px);
}

/* Scoped to the panel's own intro column. Unscoped, this also hit paragraphs
   inside the white form and success cards nested in the same panel — white
   text on a white card. */
.panel--cta .panel__intro p {
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
}

.cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Pricing strip and contact block sit tighter than the default .block */
.block--pricing {
  padding: 80px var(--gutter);
}

.block--contact {
  padding: 0 var(--gutter) 32px;
}

/* Homepage footer aligns to the wider 1200 grid */
.site-header ~ .site-footer .site-footer__inner {
  max-width: 1200px;
}

/* ==========================================================================
   MOBILE NAV
   Hamburger below 1120px — the point where brand + seven links + CTA stop
   fitting on one row. Desktop layout is untouched above it.
   ========================================================================== */

.site-menu {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1 1 auto;
}

.site-menu .site-nav {
  flex: 1 1 auto;
}

/* Desktop row only: seven links plus the CTA are wide, so the header nav runs
   tighter than the shared .site-nav defaults (which the footer keeps). Scoped
   to the media query so the mobile-panel styles below stay in charge. */
@media (min-width: 1121px) {
  .site-menu .site-nav {
    gap: 10px;
    flex-wrap: nowrap;
  }

  .site-menu .site-nav a {
    padding: 7px 10px;
    white-space: nowrap;
  }

  .btn--nav .btn__label {
    white-space: nowrap;
  }
}

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* Three bars: the element is the middle one, pseudo-elements are top/bottom. */
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--black);
  border-radius: 2px;
  transition: transform 200ms ease, opacity 140ms ease;
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

/* Open state: bars collapse into an X */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

.nav-scrim {
  display: none;
}

@media (max-width: 1120px) {
  .nav-toggle {
    display: flex;
  }

  .site-header__inner {
    flex-wrap: nowrap;
    gap: 16px;
  }

  .site-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--warm-white);
    border-bottom: 1px solid var(--hairline);
    padding: 8px var(--gutter) 20px;
    box-shadow: 0 20px 40px -28px rgba(15, 15, 15, 0.4);

    /* Collapsed by default. visibility is stepped, not eased: it flips
       instantly on open, and waits out the fade on close so the panel stays
       keyboard-inert once hidden. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 180ms ease, transform 180ms ease,
                visibility 0s linear 180ms;
  }

  .site-header.is-open .site-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
  }

  .site-menu .site-nav {
    flex-direction: column;
    gap: 0;
    font-size: 17px;
  }

  .site-nav a {
    padding: 14px 2px;
    border-bottom: 1px solid var(--rule);
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  .site-menu .btn--nav {
    margin-top: 18px;
    width: 100%;
  }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(15, 15, 15, 0.3);
  }

  .nav-scrim[hidden] {
    display: none;
  }
}

/* ==========================================================================
   MOBILE POLISH
   ========================================================================== */

/* --- Tablet and below -------------------------------------------------- */
@media (max-width: 900px) {
  .hero {
    padding-top: 48px;
    padding-bottom: 60px;
  }

  .hero__grid {
    gap: 40px;
  }

  .panel__grid {
    gap: 32px;
  }

  .faq {
    gap: 28px;
  }

  .block {
    padding-bottom: 64px;
  }

  .block--process {
    padding-block: 64px;
  }

  .block--pricing {
    padding-block: 56px;
  }
}

/* --- Phones ------------------------------------------------------------ */
@media (max-width: 640px) {
  :root {
    --gutter: 20px;
  }

  /* Audience toggle spans the width so both targets are comfortable */
  .audience-tabs {
    display: flex;
    width: 100%;
    margin-bottom: 32px;
  }

  .audience-tab {
    flex: 1 1 0;
    padding: 11px 12px;
    text-align: center;
  }

  /* One column, and the hero grid must not force a 330px track */
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .hero__sub {
    font-size: 17px;
  }

  /* Full-width stacked CTAs instead of ragged wrapping */
  .hero__actions,
  .cta-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 10px;
  }

  .hero__actions .btn,
  .cta-actions .btn {
    width: 100%;
  }

  /* Record rows stack: labels are wide-tracked mono and cramp badly beside
     their values at this width. */
  .record__row {
    flex-direction: column;
    gap: 4px;
  }

  .record__row dd {
    text-align: left;
  }

  .record__head {
    padding: 14px 18px;
  }

  .record__body {
    padding: 20px 18px 22px;
  }

  .record__status {
    align-items: flex-start;
    font-size: 16px;
  }

  /* Dark panels: less inset, smaller radius so they read as full-bleed cards */
  .panel {
    border-radius: 20px;
    padding: 32px 24px;
  }

  .panel--cta {
    padding: 32px 24px;
    gap: 24px;
  }

  .panel__quote {
    font-size: 21px;
  }

  .offer {
    padding: 28px 22px;
  }

  .feature-card,
  .step {
    padding: 24px 22px;
  }

  .faq__item {
    padding: 20px 22px;
  }

  .block__lede {
    font-size: 17px;
    margin-bottom: 28px;
  }

  .block--process .block__title {
    margin-bottom: 28px;
  }

  .pricing {
    gap: 20px;
  }

  /* Footer reads better stacked than justified at this width */
  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .site-footer {
    padding-bottom: 40px;
  }
}

/* --- Small phones ------------------------------------------------------ */
@media (max-width: 380px) {
  .brand__word {
    font-size: 14px;
  }

  .audience-tab {
    font-size: 14px;
    padding: 11px 8px;
  }
}

/* ==========================================================================
   BRAND KIT — GATE
   Deterrent only; see branding/gate.js for what this does and does not do.
   ========================================================================== */

body.is-locked {
  overflow: hidden;
}

.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--warm-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  overflow-y: auto;
}

.gate__box {
  width: 100%;
  max-width: 380px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-plate);
  padding: 40px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 24px 60px -40px rgba(15, 15, 15, 0.4);
}

.gate__mark {
  margin-bottom: 20px;
}

.gate__title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.gate__sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-60);
  margin: 0 0 26px;
}

.gate__field {
  width: 100%;
  text-align: left;
  margin-bottom: 14px;
}

.gate__error {
  width: 100%;
  font-size: 14px;
  line-height: 1.5;
  color: var(--error);
  margin: 0 0 14px;
  text-align: left;
}

.gate__error[hidden] {
  display: none;
}

.gate__submit {
  width: 100%;
}

.gate__back {
  font-size: 14px;
  color: var(--ink-50);
  margin-top: 20px;
  transition: color var(--dur-hover) var(--ease);
}

/* ==========================================================================
   BRAND KIT — DOWNLOADS
   ========================================================================== */

.bundle {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius-card);
  padding: 22px 26px;
  margin-bottom: 28px;
  transition: background-color var(--dur-hover) var(--ease),
              transform var(--dur-hover) var(--ease),
              box-shadow var(--dur-hover) var(--ease);
}

.bundle__icon {
  flex: 0 0 auto;
  display: flex;
}

.bundle__icon .icon {
  stroke: var(--orange);
}

.bundle__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bundle__title {
  font-size: 18px;
  font-weight: 500;
}

.bundle__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
}

.assets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap);
}

.asset {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.asset__preview {
  background: var(--neutral);
  padding: 32px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 132px;
}

.asset--dark .asset__preview {
  background: var(--black);
}

.asset__preview img {
  max-width: 100%;
  max-height: 76px;
}

.asset__meta {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.asset__name {
  font-size: 17px;
  font-weight: 500;
  margin: 0;
}

.asset__variant {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--orange-text);
  margin: 6px 0 0;
  text-transform: uppercase;
}

.asset__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-60);
  margin: 10px 0 16px;
  flex: 1 1 auto;
}

.asset__files {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}

.asset__files li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--rule);
}

.asset__files a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.asset__files span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-45);
}

@media (max-width: 640px) {
  .bundle {
    padding: 18px 20px;
    gap: 14px;
  }

  .gate__box {
    padding: 32px 24px 26px;
  }
}

/* ==========================================================================
   SCROLL + ANCHOR TARGETING
   The header is sticky, so a bare anchor jump parks the target underneath it.
   scroll-margin-top reserves the header's height plus breathing room.
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

[id] {
  scroll-margin-top: 92px;
}

@media (max-width: 640px) {
  [id] {
    scroll-margin-top: 80px;
  }
}

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

/* A targeted card flashes so you can see which of the two you landed on. */
.offer.is-targeted {
  animation: target-flash 1600ms ease-out;
}

@keyframes target-flash {
  0%   { box-shadow: 0 0 0 0 rgba(232, 123, 35, 0); border-color: var(--hairline); }
  15%  { box-shadow: 0 0 0 4px rgba(232, 123, 35, 0.28); border-color: var(--orange); }
  100% { box-shadow: 0 0 0 0 rgba(232, 123, 35, 0); border-color: var(--hairline); }
}

@media (prefers-reduced-motion: reduce) {
  .offer.is-targeted {
    animation: none;
    border-color: var(--orange);
  }
}

/* ==========================================================================
   MOTION — base layer
   Entrance and state transitions. Everything is opt-in via .js so the page is
   fully visible without JavaScript, and every transform is expressed through
   the --lift / --press tokens so REDUCED MOTION can disable it by zeroing them.
   ========================================================================== */

/* Hero animates on load rather than on scroll — it is already in view.
   Both hero rules below are (0,3,1); the :not(.is-swapping) makes rise-in
   explicitly narrower so the audience crossfade cannot be lost to a reorder. */
.js .hero__grid:not([hidden]):not(.is-swapping) > div {
  animation: rise-in var(--dur-enter) var(--ease-enter) both;
}

.js .hero__grid:not([hidden]):not(.is-swapping) > div:nth-child(2) {
  animation-delay: 90ms;
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Audience swap: the incoming panel crossfades instead of snapping.
   Note: animation-fill-mode `both` pins the final transform forever, so
   `transform` can never be transitioned on .hero__grid > div. */
.js .hero__grid.is-swapping > div {
  animation: swap-in 320ms var(--ease-enter) both;
}

@keyframes swap-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* --- Base transitions ---------------------------------------------------
   Hover-out is quicker than hover-in: a fast cursor sweep across a card grid
   then leaves no trail of half-settled cards behind the pointer. */

.feature-card,
.offer,
.asset {
  transition: transform var(--dur-exit) var(--ease),
              box-shadow var(--dur-exit) var(--ease),
              border-color var(--dur-exit) var(--ease);
}

.btn {
  transition: background-color var(--dur-hover) var(--ease),
              border-color var(--dur-hover) var(--ease),
              color var(--dur-hover) var(--ease),
              transform var(--dur-exit) var(--ease),
              box-shadow var(--dur-exit) var(--ease);
}

.nav-toggle {
  transition: background-color var(--dur-hover) var(--ease),
              border-color var(--dur-hover) var(--ease),
              transform var(--dur-press) var(--ease);
}

.input {
  transition: background-color var(--dur-hover) var(--ease),
              border-color var(--dur-hover) var(--ease);
}

.asset__files a,
.site-nav a {
  transition: color var(--dur-hover) var(--ease),
              opacity var(--dur-press) var(--ease);
}

/* Nav links get an underline that grows from the left. */
.site-nav a {
  position: relative;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 100%;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-hover) var(--ease);
}

/* Persistent state, not a pointer state — stays outside the hover guard. */
.site-nav a.is-current::after {
  transform: scaleX(1);
}

/* The mobile panel already separates links with rules; no underline there. */
@media (max-width: 1120px) {
  .site-nav a::after {
    display: none;
  }
}

/* Sticky header lifts off the content once scrolled. */
.site-header {
  transition: box-shadow var(--dur-hover) var(--ease);
}

.site-header.is-scrolled {
  box-shadow: 0 10px 30px -24px hsl(28 30% 12% / 0.5);
}

/* ==========================================================================
   INTERACTION — hover
   Every hover state on the site lives in this one block, behind one capability
   query, so a touch device can never latch a hover after a tap.

   Guarded with (hover: hover) alone and deliberately NOT `and (pointer: fine)`.
   The `pointer` feature reports the PRIMARY input mechanism, so a Surface or an
   iPad with a trackpad can report `coarse` while a precise pointer is attached;
   adding that clause would strip hover from those users entirely.

   Hover only ever goes on things you can actually click. Static prose
   (.record, .step, .faq__item, .chip) deliberately does not respond — a hover
   affordance on a non-interactive element is a lie about what it does.
   ========================================================================== */

@media (hover: hover) {

  /* --- Links ----------------------------------------------------------- */

  a:hover {
    color: var(--orange-text-hover); /* darker than the --orange-text base */
  }

  /* color is re-declared because a:hover (0,1,1) outranks .brand (0,1,0) —
     without it the lockup turns orange on hover. Same reason as the .btn
     rules below. */
  .brand:hover {
    color: var(--black);
    opacity: 0.7;
  }

  .site-nav a:hover {
    color: var(--black);
  }

  .site-nav a:hover::after {
    transform: scaleX(1);
  }

  a.btn-link:hover {
    color: var(--orange-text-hover);
    border-color: var(--orange-text-hover);
  }

  .gate__back:hover {
    color: var(--black);
  }

  /* The brand kit's 77 download links — the most-used control on that page,
     and previously the only feedback was the global a:hover. */
  .asset__files a:hover {
    color: var(--orange-text-hover);
  }

  /* --- Buttons ---------------------------------------------------------- */

  .btn--primary:hover:not(:disabled) {
    background: var(--orange-hover);
    color: var(--black); /* required: a:hover (0,1,1) outranks .btn--primary (0,1,0) */
    transform: translateY(var(--lift-btn));
    box-shadow: var(--shadow-sm);
  }

  .btn--secondary:hover:not(:disabled) {
    background: rgba(15, 15, 15, 0.04);
    border-color: var(--black);
    color: var(--black); /* same reason as above */
    transform: translateY(var(--lift-btn));
  }

  .btn--dark:hover:not(:disabled) {
    background: #262626;
    color: var(--white);
    transform: translateY(var(--lift-btn));
    box-shadow: var(--shadow-sm);
  }

  .btn--ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--white);
    color: var(--white);
    transform: translateY(var(--lift-btn));
  }

  /* .btn--nav sits on top of .btn--dark, so it must MATCH
     `.btn--dark:hover:not(:disabled)` at (0,3,0) and win on source order.
     The :not(:disabled) is here purely for that specificity — do not
     "simplify" it away or the label goes black-on-near-black (1.2:1). */
  .btn--nav:hover:not(:disabled) {
    background: var(--orange);
    color: var(--black);
    box-shadow: none;
  }

  .audience-tab:not([aria-selected="true"]):hover {
    background: rgba(15, 15, 15, 0.05);
    color: var(--black);
  }

  .nav-toggle:hover {
    background: rgba(15, 15, 15, 0.04);
    border-color: var(--border-strong);
  }

  /* --- Cards that are actually interactive ------------------------------ */

  /* z-index so a lifted card's shadow is not painted under its later siblings.
     z-index does not transition, so this costs nothing. */
  .feature-card:hover,
  .offer:hover,
  .asset:hover {
    transform: translateY(var(--lift));
    box-shadow: var(--shadow-lift);
    border-color: rgba(15, 15, 15, 0.14);
    position: relative;
    z-index: 1;
  }

  .bundle:hover {
    background: #1e1e1e;
    color: var(--white);
    transform: translateY(var(--lift-sm));
    box-shadow: var(--shadow-raise);
  }
}

/* ==========================================================================
   INTERACTION — press
   Unguarded on purpose: touch devices need these, and they are the only
   tactile feedback a phone gets. Placed after the hover block so that on a
   pointer device :active wins the equal-specificity tie.
   ========================================================================== */

.btn:active:not(:disabled) {
  transform: translateY(0) scale(var(--press));
  box-shadow: none;
  transition-duration: var(--dur-press);
}

.btn--primary:active:not(:disabled) {
  background: var(--orange-text);
  color: var(--white);
}

.btn--secondary:active:not(:disabled) { background: rgba(15, 15, 15, 0.07); }
.btn--dark:active:not(:disabled)      { background: #1a1a1a; }
.btn--ghost:active:not(:disabled)     { background: rgba(255, 255, 255, 0.14); }

.audience-tab:active {
  transform: scale(var(--press));
  transition-duration: var(--dur-press);
}

.nav-toggle:active {
  transform: scale(0.94);
  background: rgba(15, 15, 15, 0.06);
}

/* Text links press with opacity, never scale: a non-integer scale resamples
   the rasterized glyphs and visibly softens type. */
a:active,
.brand:active,
.site-nav a:active,
.btn-link:active,
.gate__back:active,
.asset__files a:active {
  opacity: 0.6;
  transition-duration: var(--dur-press);
}

.bundle:active {
  transform: translateY(0);
  background: #1a1a1a;
  box-shadow: none;
  transition-duration: var(--dur-press);
}

/* No :active on .feature-card, .step, .faq__item, .record, .card, .icon-tile
   or .swatch. They are divs and list items with no click handler, and :active
   fires on any mousedown inside them — so selecting FAQ text would shrink the
   card under the cursor. */

/* ==========================================================================
   REDUCED MOTION
   The global rule near the top kills transitions and animations, but that only
   removes the tween — a :hover declaring translateY(-3px) still applies, it
   just teleports, which is worse for a motion-sensitive user than the
   animation was. Because every transform above is written as
   translateY(var(--lift)) or scale(var(--press)), zeroing the tokens disables
   all of them at once, and any future rule written the same way is covered
   automatically.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --lift: 0px;
    --lift-sm: 0px;
    --lift-btn: 0px;
    --press: 1;
  }

  .js .hero__grid:not([hidden]):not(.is-swapping) > div,
  .js .hero__grid.is-swapping > div {
    animation: none;
  }

  .site-nav a::after {
    transition: none;
  }
}

/* ==========================================================================
   CONTACT FORM
   Reuses .field / .field__label / .input / .field__error / .btn verbatim.
   Only the pieces with no precedent are defined here.
   ========================================================================== */

/* REQUIRED, not cosmetic. There is no global [hidden] rule in this file, and
   .field__error is display:block — which beats the UA stylesheet's
   hidden{display:none}. Without this, every error message renders at all
   times. Same reason .gate__error[hidden] exists. */
.field__error[hidden],
.form-success[hidden],
.cta-form[hidden] {
  display: none;
}

/* The form card is white but sits inside .panel--cta, and the dark-surface
   rule near the top of this file (`.panel :focus-visible`) would give every
   field a white focus ring on white. Put it back to black inside the card. */
.panel .card :focus-visible {
  outline-color: var(--black);
}

.panel__intro {
  flex: 1 1 320px;
  max-width: 30em;
}

.panel__reassure {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 14px;
  max-width: 32em;
}

.cta-form {
  flex: 1 1 460px;
  max-width: 520px;
  text-align: left;
  /* .panel sets color:white for its dark background. This card is white, so
     anything inside it that does not set its own color — the radio labels,
     option text — would inherit white on white. Reset at the card boundary. */
  color: var(--black);
}

/* .panel--cta centres its children; with a tall form, top-align instead. */
.panel--cta:has(.cta-form) {
  align-items: flex-start;
}

/* --- Fields ------------------------------------------------------------- */

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
}

.field__label em {
  font-style: normal;
  color: var(--orange-text);
  letter-spacing: 0.1em;
}

/* appearance:none is mandatory — without it Safari discards border-radius
   and padding on a select entirely. */
select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f0f0f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}

textarea.input {
  min-height: 96px;
  padding-top: 12px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  resize: vertical;
}

/* --- Audience choice ---------------------------------------------------- */
/* Native, visible radios. Hiding the input behind a custom sprite costs more
   in accessibility than it gains in pixels. */

.choice {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.choice legend {
  margin-bottom: 8px;
}

.choice__opt {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: 15px;
  cursor: pointer;
  min-height: 44px;
  transition: border-color var(--dur-hover) var(--ease),
              background-color var(--dur-hover) var(--ease);
}

.choice__opt input {
  accent-color: var(--orange);
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

.choice__opt:has(input:checked) {
  border-color: var(--black);
  background: rgba(15, 15, 15, 0.04);
}

/* --- Honeypot ----------------------------------------------------------- */
/* Off-screen rather than display:none: some bots skip display:none fields,
   which is the whole point of the trap. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Status, submit, success -------------------------------------------- */

.form-status {
  margin: 0;
}

.form-submit {
  width: 100%;
}

.form-note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-50);
  margin: 0;
  text-align: center;
}

/* A note that explains the field above it, not the form as a whole — it reads
   as a caption, so it aligns with the input rather than centring. */
.form-note--field {
  text-align: left;
  margin-top: -6px;
}

.form-success {
  flex: 1 1 460px;
  max-width: 520px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 40px 32px;
  text-align: center;
  color: var(--black);
}

.form-success .icon {
  margin: 0 auto 16px;
  display: block;
}

.form-success h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
}

.form-success p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-62);
  margin: 0;
}

.form-success strong {
  font-family: var(--font-mono);
  font-weight: 500;
}

@media (max-width: 640px) {
  .cta-form,
  .form-success {
    max-width: none;
    width: 100%;
  }

  .cta-form {
    padding: 24px 20px;
  }

  .field-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* The confirmation page is a single short panel; give it room to breathe
   rather than sitting flush under the header. */
.thanks {
  padding-block: 64px 96px;
}

.thanks .panel {
  text-align: center;
}

.thanks .panel__body {
  margin-inline: auto;
}

/* ==========================================================================
   BCBA PIVOT — hero, terms, companies band
   The homepage speaks to BCBAs. The company path is one small band low down.
   ========================================================================== */

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

.hero__copy {
  max-width: 34em;
}

/* Fee transparency, kept beside the primary action on purpose. */
.hero__terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 26px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-62);
}

.hero__terms .icon {
  flex: 0 0 auto;
  margin-top: 2px;
}

.hero__terms strong {
  font-weight: 500;
  color: var(--black);
}

/* Hero entrance. Staggered by --in-index, set in JS from DOM order, so the
   delay lives in one place and no selector hardcodes a position.
   --lift is zeroed under prefers-reduced-motion, which flattens the travel;
   the opacity step is cancelled by the reduced-motion block further down. */
.js .hero-in {
  opacity: 0;
  transform: translateY(calc(var(--lift) * -4));
  transition: opacity var(--dur-enter) var(--ease-enter),
              transform var(--dur-enter) var(--ease-enter);
  transition-delay: calc(var(--in-index, 0) * 70ms);
}

.js.hero-ready .hero-in {
  opacity: 1;
  transform: none;
}

/* --- Terms band --------------------------------------------------------- */

.terms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  align-items: start;
}

.terms__note {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-60);
  margin: 0;
  max-width: 34em;
}

/* --- For BCBAs, now full width ------------------------------------------ */

.offer--solo {
  max-width: none;
}

.offer__list--two {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* --- Companies band ------------------------------------------------------
   Deliberately quiet: a neutral strip, not a card, and no second column of
   selling points. Companies contact Elliot directly. */

.block--orgs {
  padding-bottom: 56px;
}

.orgs-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 28px;
  background: var(--neutral);
  border-radius: var(--radius-card);
}

.orgs-band .eyebrow {
  margin-bottom: 6px;
}

.orgs-band__line {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
}

/* --- Contact: BCBA option leads, company option is present but quiet ----- */

.choice__opt--quiet {
  color: var(--ink-60);
}

.choice__opt--quiet:has(input:checked) {
  color: var(--black);
}

@media (max-width: 640px) {
  .orgs-band {
    padding: 22px 20px;
  }

  .hero__terms {
    margin-top: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .hero-in,
  .js.hero-ready .hero-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Structural hooks used by the pivot markup. */
.hero__visual {
  min-width: 0;
}

.terms__main {
  min-width: 0;
}

/* The BCBA option is the one most visitors want; give it a little more
   presence than the company option without shouting. */
.choice__opt--primary {
  font-weight: 500;
}

/* ==========================================================================
   PHOTOGRAPHY
   Used sparingly, only where a photograph does work that type cannot.
   The frame holds a 4:3 box so dropping a real image in causes no reflow.
   ========================================================================== */

.photo {
  margin: 0 0 4px;
}

.photo__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
}

.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.photo__badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--orange);
}

.photo__note {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
  max-width: 22em;
}

/* ==========================================================================
   FOOTER
   Carries the full navigation plus the companies path, which is deliberately
   absent from the header — the homepage is for BCBAs.
   ========================================================================== */

.site-footer__top {
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 32px;
  padding-bottom: 28px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}

.site-nav--footer {
  flex: 1 1 auto;
  gap: 22px;
  font-size: 15px;
}

.site-footer__cta {
  flex: 0 0 auto;
}

/* The footer nav underline would otherwise be suppressed by the mobile rule
   that hides it inside the collapsed header menu. */
@media (max-width: 900px) {
  .site-nav--footer a::after {
    display: block;
  }

  .site-nav--footer a {
    padding: 0;
    border-bottom: none;
    min-height: 0;
    display: inline;
  }
}

@media (max-width: 640px) {
  .site-footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .site-nav--footer {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px 18px;
  }

  .site-footer__cta {
    width: 100%;
  }

  .site-footer__cta .btn {
    width: 100%;
  }
}


/* ==========================================================================
   ==========================================================================
   REDESIGN LAYER
   A premium pass over the existing system. Everything below extends the
   tokens above rather than replacing them, so the brand kit keeps rendering
   from the same source of truth.

   Order inside this layer mirrors the file: tokens, type, depth, components,
   sections, then interaction / press / reduced-motion at the very end.
   ==========================================================================
   ========================================================================== */

:root {
  /* --- Spacing scale ---------------------------------------------------
     One ratio, so vertical rhythm is a choice from a set rather than a
     number someone typed. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Section rhythm scales with the viewport so mobile is not just desktop
     with the air removed. */
  --section-y: clamp(64px, 8.5vw, 120px);
  --section-y-tight: clamp(48px, 6vw, 80px);

  /* --- Surfaces --------------------------------------------------------
     Named by role. Section backgrounds alternate between these so the page
     reads as continuous depth rather than stacked white blocks. */
  --surface-page: var(--warm-white);
  --surface-card: var(--white);
  --surface-sunken: var(--neutral);
  --surface-ink: var(--black);
  --surface-tint: #f7f5f2;

  /* --- Motion ----------------------------------------------------------
     Three speeds and three curves, no more. Fast for state, base for UI,
     reveal for entrances. --ease and --ease-enter are defined above. */
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 420ms;
  --dur-reveal: 720ms;

  /* Gentle overshoot. Used only where something should feel like it settles
     — a press releasing, a card returning from tilt. Never on entrances,
     where overshoot reads as bounce. */
  --ease-spring: cubic-bezier(0.34, 1.26, 0.64, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);

  /* Motion geometry for the redesign. Zeroed under reduced motion alongside
     the originals, so new effects inherit that protection automatically. */
  --lift-card: -4px;
  --tilt: 1;        /* multiplier on pointer tilt; 0 disables it wholesale */
  --parallax: 1;    /* multiplier on every parallax translation */
  --magnet: 1;      /* multiplier on magnetic button pull */

  /* --- Elevation -------------------------------------------------------- */
  --shadow-key: 0 1px 2px -1px hsl(28 30% 12% / 0.05),
                0 4px 12px -6px hsl(28 30% 12% / 0.12);
  --shadow-float: 0 2px 6px -3px hsl(28 30% 12% / 0.08),
                  0 18px 40px -22px hsl(28 30% 12% / 0.24),
                  0 40px 80px -50px hsl(28 30% 12% / 0.3);

  /* --- Type scale -------------------------------------------------------
     Editorial end of the range: larger display sizes, tighter tracking, and
     line-heights that get shorter as size grows. */
  --type-display: clamp(40px, 6.2vw, 74px);
  --type-h2: clamp(28px, 3.6vw, 46px);
  --type-h3: clamp(20px, 2vw, 24px);
  --type-lede: clamp(17px, 1.5vw, 20px);

  /* Measure. Long lines are the fastest way to look unconsidered. */
  --measure: 34em;
  --measure-tight: 26em;
}

/* ==========================================================================
   TYPOGRAPHY PASS
   ========================================================================== */

.hero__title {
  font-size: var(--type-display);
  line-height: 1.02;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.block__title,
.panel__title,
.faq__title,
.offer__title {
  font-size: var(--type-h2);
  line-height: 1.06;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.hero__sub {
  font-size: var(--type-lede);
  line-height: 1.55;
  max-width: var(--measure-tight);
  color: var(--ink-62);
}

.block__lede,
.lede--sm {
  font-size: var(--type-lede);
  line-height: 1.6;
  max-width: var(--measure);
}

/* The mono eyebrow is the system's smallest voice; give it room to read. */
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.26em;
  margin-bottom: var(--space-4);
}

.step h3,
.feature-card h3,
.faq__item h3 {
  font-size: var(--type-h3);
  line-height: 1.25;
  letter-spacing: -0.012em;
}

/* ==========================================================================
   BACKGROUND DEPTH
   Sections alternate tone and are separated by a hairline rather than a hard
   edge, so the page reads as one surface with light on it.
   ========================================================================== */

body {
  background: var(--surface-page);
}

/* A single, very faint warm light behind the hero. Fixed size, no animation,
   no blur filter — it is a gradient, so it costs nothing to paint. */
.hero {
  position: relative;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  /* Horizontal inset stays at 0. A negative one bled past the hero and added
     its own width to the document, which is a horizontal scrollbar at every
     viewport. The gradients are widened instead — same soft falloff, no
     overflow, and no need to clip an ancestor. */
  inset: -12% 0 20% 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(90% 62% at 14% 14%, hsl(28 72% 52% / 0.08), transparent 70%),
    radial-gradient(74% 54% at 92% 4%, hsl(28 40% 40% / 0.055), transparent 72%);
}

/* Alternating tone. .block--process already carries --surface-sunken; this
   gives the FAQ and companies bands the same treatment so the rhythm reads
   as deliberate rather than accidental. */
.section-tint {
  background: var(--surface-tint);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* Section rhythm, applied over the older fixed paddings. */
.block {
  padding-block: 0 var(--section-y);
}

.block--process {
  padding-block: var(--section-y);
}

.hero {
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: var(--section-y);
}

/* ==========================================================================
   NAVIGATION
   Transparent over the hero, then resolves to a solid blurred bar with a
   hairline once the page moves. The state change is opacity on a pseudo
   element, not a background swap, so it composites instead of repainting the
   blurred strip on every scroll tick.
   ========================================================================== */

.site-header {
  background: transparent;
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: none;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: hsl(38 33% 98% / 0.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--rule);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}

.site-header.is-scrolled::before {
  opacity: 1;
  box-shadow: 0 1px 0 hsl(28 30% 12% / 0.02),
              0 10px 30px -26px hsl(28 30% 12% / 0.5);
}

.site-header__inner {
  position: relative;
  transition: padding var(--dur-base) var(--ease);
}

/* The bar tightens slightly once scrolled. Padding is a layout property, but
   it is on a fixed-height sticky bar with nothing below it in flow, so it
   cannot shift page content. */
.site-header.is-scrolled .site-header__inner {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* --- Nav links: a highlight that wipes in from the left ------------------ */

.site-nav a {
  position: relative;
  padding: 7px 12px;
  border-radius: 8px;
  isolation: isolate;
}

.site-nav a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: hsl(28 30% 12% / 0.05);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-fast) var(--ease);
}

/* Retire the old bottom underline in favour of the highlight; the underline
   now marks only the section you are actually in. */
.site-nav a::after {
  left: 12px;
  right: 12px;
  bottom: 3px;
  width: auto;
  height: 1.5px;
}

/* Scroll-spy state, set from JS. */
.site-nav a[aria-current="true"] {
  color: var(--black);
}

.site-nav a[aria-current="true"]::after {
  transform: scaleX(1);
}

/* --- Nav CTA ------------------------------------------------------------- */

.btn--nav {
  position: relative;
  overflow: hidden;
}

/* ==========================================================================
   BUTTON SYSTEM
   Three related interactions, not one applied everywhere:
     primary   — a lighter layer wipes up from the bottom, arrow advances
     secondary — border and ground resolve, arrow advances
     nav       — orange ground wipes in
   ========================================================================== */

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Magnetic offset, written by JS. Kept in custom properties so the
     transform stays a single declaration and reduced motion can zero it. */
  --mx: 0px;
  --my: 0px;
  transform: translate3d(calc(var(--mx) * var(--magnet)),
                         calc(var(--my) * var(--magnet)), 0);
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease-spring);
}

.btn__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform var(--dur-base) var(--ease);
}

/* The arrow is a real element so it can move independently of the label. */
.btn__arrow {
  display: inline-block;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  transition: transform var(--dur-base) var(--ease-out-quint);
}

/* Wipe layer. scaleY from the bottom edge, so it reads as the surface
   filling rather than a box fading in. */
.btn--primary::before,
.btn--secondary::before,
.btn--nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform var(--dur-base) var(--ease-out-quint);
}

.btn--primary::before { background: var(--orange-hover); }
.btn--secondary::before { background: hsl(28 30% 12% / 0.05); }
.btn--nav::before { background: var(--orange); }

/* ==========================================================================
   TEXT LINKS
   Underline draws left to right; on the way out it retracts to the right, so
   the gesture reverses rather than snapping.
   ========================================================================== */

.link {
  position: relative;
  color: var(--orange-text);
  font-weight: 500;
  text-decoration: none;
  padding-bottom: 2px;
}

.link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-base) var(--ease);
}

.btn-link {
  position: relative;
  border-bottom-color: transparent;
}

.btn-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right center;
  transition: transform var(--dur-base) var(--ease);
}

/* ==========================================================================
   CARD SYSTEM
   One shape language, three interaction patterns. Cards that are links lift;
   cards that hold data get a pointer-tracked highlight; cards that are pure
   reference stay still.
   ========================================================================== */

.feature-card,
.offer,
.asset,
.faq__item,
.step,
.record {
  border-radius: var(--radius-card);
}

/* Pointer-tracked highlight. --px/--py are written by JS as percentages;
   with no JS the gradient simply sits at the default centre and is invisible
   because the opacity token stays 0. */
.surface-glow {
  position: relative;
  isolation: isolate;
  --px: 50%;
  --py: 50%;
  --glow: 0;
}

.surface-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--glow);
  background: radial-gradient(
    22em 22em at var(--px) var(--py),
    hsl(28 72% 52% / 0.1),
    transparent 60%
  );
  transition: opacity var(--dur-base) var(--ease);
}

/* ==========================================================================
   ENTRANCE CHOREOGRAPHY
   Not opacity 0 -> 1. Three related reveals:
     .r-rise   block rises and fades          (cards, panels)
     .r-mask   wipes up from behind a clip    (headings, images)
     .r-lines  children rise in sequence      (lists, field rows)
   All are opt-in via .js, so nothing is ever hidden without JavaScript.
   --r-delay is set by JS from position within a group.
   ========================================================================== */

.js [data-reveal] {
  --r-delay: 0ms;
}

/* Rise ------------------------------------------------------------------- */
.js .r-rise {
  opacity: 0;
  transform: translate3d(0, calc(var(--lift) * -6), 0);
  transition: opacity var(--dur-reveal) var(--ease-enter) var(--r-delay),
              transform var(--dur-reveal) var(--ease-enter) var(--r-delay);
}

.js .r-rise.is-in {
  opacity: 1;
  transform: none;
}

/* Mask ------------------------------------------------------------------
   clip-path animates on the compositor and, unlike a wrapper with overflow
   hidden, does not clip the descender of a headline. */
.js .r-mask {
  clip-path: inset(0 0 105% 0);
  opacity: 0;
  transition: clip-path var(--dur-reveal) var(--ease-enter) var(--r-delay),
              opacity 260ms linear var(--r-delay);
}

.js .r-mask.is-in {
  clip-path: inset(0 0 -20% 0);
  opacity: 1;
}

/* Lines ------------------------------------------------------------------ */
.js .r-lines > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity var(--dur-slow) var(--ease-enter),
              transform var(--dur-slow) var(--ease-enter);
}

.js .r-lines.is-in > * {
  opacity: 1;
  transform: none;
}

/* Stagger inside a group. Six steps is enough for every group on the page
   and avoids a long tail on the last item. */
.js .r-lines.is-in > *:nth-child(1) { transition-delay: calc(var(--r-delay) + 0ms); }
.js .r-lines.is-in > *:nth-child(2) { transition-delay: calc(var(--r-delay) + 70ms); }
.js .r-lines.is-in > *:nth-child(3) { transition-delay: calc(var(--r-delay) + 140ms); }
.js .r-lines.is-in > *:nth-child(4) { transition-delay: calc(var(--r-delay) + 200ms); }
.js .r-lines.is-in > *:nth-child(5) { transition-delay: calc(var(--r-delay) + 250ms); }
.js .r-lines.is-in > *:nth-child(n+6) { transition-delay: calc(var(--r-delay) + 290ms); }

/* ==========================================================================
   MATCHED ROLE CARD
   The hero's proof object. Treated as a piece of software, not a mockup:
   it tilts a degree or so toward the pointer, carries a light that tracks
   it, and its rows resolve in sequence the first time it is seen.
   ========================================================================== */

.hero__visual {
  perspective: 1400px;
  perspective-origin: 50% 40%;
}

.record {
  /* Written by the tilt handler. Multiplied by --tilt so reduced motion and
     touch can switch the whole effect off by setting one token to 0. */
  --rx: 0deg;
  --ry: 0deg;
  --lift-z: 0px;
  transform:
    translate3d(0, var(--lift-z), 0)
    rotateX(calc(var(--rx) * var(--tilt)))
    rotateY(calc(var(--ry) * var(--tilt)));
  transform-style: preserve-3d;
  transition: transform var(--dur-slow) var(--ease-spring),
              box-shadow var(--dur-slow) var(--ease);
  box-shadow: var(--shadow-key);
  will-change: auto;
}

.record.is-tilting {
  /* Only while the pointer is inside: promoting permanently would hold a
     layer alive for a card that is usually idle. */
  will-change: transform;
  transition: transform 120ms linear, box-shadow var(--dur-slow) var(--ease);
}

.record.is-lit {
  box-shadow: var(--shadow-float);
}

/* A light that follows the pointer across the card's own surface. */
.record::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--glow, 0);
  background: radial-gradient(
    18em 18em at var(--px, 50%) var(--py, 50%),
    hsl(28 80% 60% / 0.13),
    transparent 62%
  );
  transition: opacity var(--dur-base) var(--ease);
}

/* Rows resolve in sequence the first time the card enters view. */
.js .record__row,
.js .record__status {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity var(--dur-slow) var(--ease-enter),
              transform var(--dur-slow) var(--ease-enter);
}

.js .record.is-in .record__row,
.js .record.is-in .record__status {
  opacity: 1;
  transform: none;
}

.js .record.is-in .record__status      { transition-delay: 60ms; }
.js .record.is-in .record__row:nth-child(1) { transition-delay: 140ms; }
.js .record.is-in .record__row:nth-child(2) { transition-delay: 200ms; }
.js .record.is-in .record__row:nth-child(3) { transition-delay: 260ms; }
.js .record.is-in .record__row:nth-child(4) { transition-delay: 320ms; }
.js .record.is-in .record__row:nth-child(5) { transition-delay: 380ms; }

/* The masked "held until you approve" row gets a small privacy affordance:
   a lock that settles once the row has arrived. */
.record__lock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.record__lock .icon {
  stroke: var(--ink-45);
  transform: scale(0.9);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-spring) 460ms,
              opacity var(--dur-slow) var(--ease) 460ms;
}

.js .record.is-in .record__lock .icon {
  transform: none;
  opacity: 1;
}

/* Live indicator on the card header — two rings, no keyframe loop on the
   larger one so it stays cheap. */
.record__live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-45);
}

.record__dot {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  flex: 0 0 auto;
}

.record__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--orange);
  opacity: 0;
  animation: ping 2.8s var(--ease) infinite;
}

@keyframes ping {
  0%   { transform: scale(0.6); opacity: 0.55; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Parallax between the hero copy and the card. Small — this is depth, not
   a slide. --py-offset is written by the scroll handler. */
.hero__visual {
  --py-offset: 0px;
  transform: translate3d(0, calc(var(--py-offset) * var(--parallax)), 0);
}

/* ==========================================================================
   VERIFICATION
   Four checks presented as a connected system: a hairline runs behind the
   row and each card's icon draws its check as the card arrives.
   ========================================================================== */

.feature-grid {
  position: relative;
}

/* The connecting rule. Sits behind the cards, drawn once on entry. */
.feature-grid::before {
  content: "";
  position: absolute;
  top: 54px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-soft) 12%,
              var(--border-soft) 88%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms var(--ease-enter);
}

.js .feature-grid.is-in::before {
  transform: scaleX(1);
}

@media (max-width: 900px) {
  .feature-grid::before { display: none; }
}

.feature-card {
  position: relative;
  background: var(--surface-card);
}

/* The icon sits on the connecting line, so it needs its own ground. */
.feature-card .icon {
  position: relative;
  background: var(--surface-card);
  border-radius: 50%;
  padding: 3px;
  box-sizing: content-box;
}

/* Stroke-drawing. The dash length is generous enough to cover every path in
   the icon set; the check mark draws after the container shape. */
.js .feature-card .icon path,
.js .feature-card .icon rect,
.js .feature-card .icon circle {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset 900ms var(--ease-enter);
}

.js .feature-card.is-in .icon path,
.js .feature-card.is-in .icon rect,
.js .feature-card.is-in .icon circle {
  stroke-dashoffset: 0;
}

.js .feature-card.is-in .icon > :nth-child(2) {
  transition-delay: 320ms;
}

/* ==========================================================================
   PROCESS TIMELINE
   A rail behind the four steps whose fill is driven by scroll position.
   No scroll-jacking: the page scrolls normally and only the fill responds.
   ========================================================================== */

.steps {
  position: relative;
}

.steps::before,
.steps::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 30px;
  height: 2px;
  border-radius: 2px;
}

.steps::before {
  background: var(--border-soft);
}

/* --progress is 0..1, written by the scroll handler. */
.steps::after {
  background: linear-gradient(90deg, var(--orange), var(--orange-hover));
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  transition: transform 120ms linear;
}

.step {
  position: relative;
  background: var(--surface-card);
}

.step__num {
  position: relative;
  transition: background-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease);
}

/* A step lights up once the rail has reached it. */
.step.is-active .step__num {
  background: var(--orange);
  color: var(--black);
}

.step.is-done .step__num {
  background: hsl(28 72% 52% / 0.16);
  color: var(--orange-text);
}

@media (max-width: 900px) {
  .steps::before,
  .steps::after {
    top: 0;
    bottom: 0;
    left: 22px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .steps::after {
    transform: scaleY(var(--progress, 0));
    transform-origin: top center;
  }

  .steps {
    padding-left: 56px;
  }
}

/* ==========================================================================
   FAQ ACCORDION
   Native <details> for state and keyboard behaviour; the height animation
   uses a grid-rows trick so it works without measuring anything in JS.
   ========================================================================== */

.faq__item {
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 0;
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}

.faq__item[open] {
  border-color: var(--border-soft);
  box-shadow: var(--shadow-key);
}

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) var(--space-5);
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--black);
  transition: background-color var(--dur-fast) var(--ease);
}

.faq__q::-webkit-details-marker { display: none; }

.faq__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  position: relative;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--ink-50);
  transform: translate(-50%, -50%);
  transition: transform var(--dur-base) var(--ease-out-quint),
              background-color var(--dur-base) var(--ease);
}

.faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__item[open] .faq__icon::before {
  background: var(--orange-text);
}

.faq__item[open] .faq__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
  background: var(--orange-text);
}

/* The animated region. grid-template-rows 0fr -> 1fr animates cleanly and
   needs no measured pixel height. */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out-quint);
}

.faq__item[open] .faq__a {
  grid-template-rows: 1fr;
}

.faq__a > div {
  overflow: hidden;
  min-height: 0;
}

.faq__a p {
  margin: 0;
  padding: 0 var(--space-5) var(--space-5);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-62);
  max-width: var(--measure);
}

/* ==========================================================================
   TERMS
   Two sides, stated as a comparison rather than a paragraph.
   ========================================================================== */

.terms-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.terms-side {
  background: var(--surface-card);
  padding: var(--space-6) var(--space-5);
}

.terms-side--ink {
  background: var(--surface-ink);
  color: var(--white);
}

.terms-side__who {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-45);
  margin: 0 0 var(--space-3);
}

.terms-side--ink .terms-side__who {
  color: rgba(255, 255, 255, 0.5);
}

.terms-side__what {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}

.terms-side__detail {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-60);
  margin: 0;
  max-width: 30em;
}

.terms-side--ink .terms-side__detail {
  color: rgba(255, 255, 255, 0.62);
}

/* ==========================================================================
   FORM
   Same markup and same submission path; a more considered surface.
   ========================================================================== */

.cta-form {
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow-key);
  gap: var(--space-5);
}

.input {
  background: var(--surface-page);
  border-color: var(--border-soft);
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

/* Focus: the border resolves and a soft ring grows, rather than an outline
   appearing at full strength. :focus-visible keeps it off mouse clicks. */
.input:focus-visible,
.input.is-focus {
  outline: none;
  background: var(--surface-card);
  border-color: var(--orange);
  box-shadow: 0 0 0 3px hsl(28 72% 52% / 0.16);
}

/* Keyboard users still get the system ring on the container, so removing the
   outline above does not remove the affordance. */
.field:focus-within .field__label {
  color: var(--ink-62);
}

.field__label {
  transition: color var(--dur-fast) var(--ease);
}

.input.is-error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px hsl(3 65% 41% / 0.12);
}

.field__error {
  transform: translateY(-3px);
  opacity: 0;
  transition: transform var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}

.field__error:not([hidden]) {
  transform: none;
  opacity: 1;
}

/* Audience choice: the selected side gets a filled ground that wipes in. */
.choice__opt {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease);
}

.choice__opt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: hsl(28 30% 12% / 0.05);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out-quint);
}

.choice__opt:has(input:checked)::before {
  transform: scaleX(1);
}

/* Fields that change wording between the two audiences crossfade rather
   than snapping. */
.field__label[data-label-org] {
  transition: opacity var(--dur-fast) var(--ease);
}

.field__label.is-swapping {
  opacity: 0;
}

/* Submit: a determinate-looking progress sheen while the request is out. */
.form-submit {
  position: relative;
}

.form-submit[aria-busy="true"]::after,
form[aria-busy="true"] .form-submit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, hsl(0 0% 100% / 0.28), transparent);
  transform: translateX(-100%);
  animation: sheen 1.1s var(--ease) infinite;
}

@keyframes sheen {
  to { transform: translateX(100%); }
}

/* Success panel arrives rather than appears. */
.js .form-success {
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(0.99);
  transition: opacity var(--dur-slow) var(--ease-enter),
              transform var(--dur-slow) var(--ease-enter);
}

.js .form-success.is-in {
  opacity: 1;
  transform: none;
}

.form-success .icon {
  stroke: var(--orange);
}

.js .form-success.is-in .icon path,
.js .form-success.is-in .icon circle {
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  animation: draw 700ms var(--ease-enter) 160ms forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

/* ==========================================================================
   ABOUT — editorial
   ========================================================================== */

.panel__quote {
  font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1.32;
  max-width: 20em;
}

/* Career stages read as a progression: each one resolves after the last and
   the active edge is marked. */
.chip {
  position: relative;
  transition: border-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}

.js .chips .chip {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity var(--dur-slow) var(--ease-enter),
              transform var(--dur-slow) var(--ease-enter),
              border-color var(--dur-base) var(--ease);
}

.js .chips.is-in .chip { opacity: 1; transform: none; }
.js .chips.is-in .chip:nth-child(1) { transition-delay: 0ms; }
.js .chips.is-in .chip:nth-child(2) { transition-delay: 90ms; }
.js .chips.is-in .chip:nth-child(3) { transition-delay: 180ms; }
.js .chips.is-in .chip:nth-child(4) { transition-delay: 270ms; }

/* Photograph: masked reveal plus a slow settle from 1.04 to 1. Ready for a
   real image — the frame already reserves the aspect ratio. */
.photo__frame {
  overflow: hidden;
}

.js .photo img,
.js .photo .photo__frame > * {
  transform: scale(1.04);
  transition: transform 1200ms var(--ease-enter);
}

.js .photo.is-in img,
.js .photo.is-in .photo__frame > * {
  transform: none;
}

.js .photo .photo__frame {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 900ms var(--ease-enter);
}

.js .photo.is-in .photo__frame {
  clip-path: inset(0 0 0 0);
}

/* ==========================================================================
   ABA COMPANIES BAND
   ========================================================================== */

.orgs-band {
  position: relative;
  overflow: hidden;
  background: var(--surface-ink);
  color: var(--white);
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius-plate);
}

.orgs-band .eyebrow {
  color: var(--orange);
}

.orgs-band__line {
  font-size: clamp(21px, 2.6vw, 32px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.12;
  max-width: 16em;
}

.orgs-band .btn--secondary {
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--white);
}

.orgs-band .btn--secondary::before {
  background: rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   REDESIGN — INTERACTION (hover)
   Guarded on `hover` alone, matching the block above: `pointer` reports the
   primary input, so hybrid devices would lose hover entirely.
   ========================================================================== */

@media (hover: hover) {

  .site-nav a:hover::before { transform: scaleX(1); }

  /* The active-section underline stays put; hover only wipes the ground. */
  .site-nav a:hover::after { transform: scaleX(0); }
  .site-nav a[aria-current="true"]:hover::after { transform: scaleX(1); }

  .btn--primary:hover:not(:disabled)::before,
  .btn--secondary:hover:not(:disabled)::before,
  .btn--nav:hover:not(:disabled)::before {
    transform: scaleY(1);
  }

  .btn:hover:not(:disabled) .btn__arrow { transform: translateX(4px); }
  .btn:hover:not(:disabled) .btn__label { transform: translateX(-1px); }

  .btn--primary:hover:not(:disabled) { box-shadow: var(--shadow-key); }

  .link:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }

  .btn-link:hover::after {
    transform: scaleX(0);
  }

  .feature-card:hover .icon { transform: scale(1.06); }

  .faq__q:hover { background: hsl(28 30% 12% / 0.02); }

  .faq__item:hover { border-color: var(--border-soft); }

  .choice__opt:hover { border-color: var(--black); }

  .orgs-band .btn--secondary:hover { border-color: var(--white); }

  /* Cards that carry a pointer-tracked light. */
  .surface-glow:hover { --glow: 1; }
}

/* ==========================================================================
   REDESIGN — PRESS
   Unguarded: touch needs these.
   ========================================================================== */

.btn:active:not(:disabled) {
  transition-duration: var(--dur-press);
}

.faq__q:active {
  background: hsl(28 30% 12% / 0.04);
}

.choice__opt:active {
  transform: scale(0.99);
}

/* ==========================================================================
   REDESIGN — REDUCED MOTION
   Zeroing the geometry tokens disables tilt, parallax, magnetism and lift in
   one place, so any future rule written through them is covered too.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --lift-card: 0px;
    --tilt: 0;
    --parallax: 0;
    --magnet: 0;
  }

  /* Reveals resolve to their end state with no travel. */
  .js .r-rise,
  .js .r-rise.is-in,
  .js .r-lines > *,
  .js .r-lines.is-in > *,
  .js .form-success,
  .js .form-success.is-in,
  .js .chips .chip,
  .js .chips.is-in .chip,
  .js .record__row,
  .js .record__status,
  .js .record.is-in .record__row,
  .js .record.is-in .record__status {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .r-mask,
  .js .r-mask.is-in,
  .js .photo .photo__frame,
  .js .photo.is-in .photo__frame {
    clip-path: none;
    opacity: 1;
    transition: none;
  }

  .js .photo img,
  .js .photo.is-in img,
  .js .photo .photo__frame > *,
  .js .photo.is-in .photo__frame > * {
    transform: none;
    transition: none;
  }

  /* Decorative loops stop entirely. */
  .record__dot::after,
  .form-submit[aria-busy="true"]::after,
  form[aria-busy="true"] .form-submit::after {
    animation: none;
  }

  .js .feature-card .icon path,
  .js .feature-card .icon rect,
  .js .feature-card .icon circle,
  .js .feature-card.is-in .icon path,
  .js .feature-card.is-in .icon rect,
  .js .feature-card.is-in .icon circle,
  .js .form-success.is-in .icon path,
  .js .form-success.is-in .icon circle {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
    transition: none;
  }

  /* The rail shows its full extent rather than tracking scroll. */
  .steps::after,
  .feature-grid::before,
  .js .feature-grid.is-in::before {
    transform: none;
    transition: none;
  }

  .record__lock .icon {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ==========================================================================
   BRAND KIT SPEC-SHEET OVERRIDES — must stay last in the file
   The brand kit renders each button state as a static swatch using .is-hover /
   .is-active / .is-focus. These tie the real :hover rules on specificity, so
   they only win by being later in the source. Do not move them.
   ========================================================================== */

.btn.is-hover.btn--primary   { background: var(--orange-hover); transform: none; }
.btn.is-active.btn--primary  { background: var(--orange-text); color: var(--white); transform: none; }
.btn.is-focus                { outline: 2px solid var(--black); outline-offset: 3px; }
.btn.is-hover.btn--secondary { background: rgba(15, 15, 15, 0.04); border-color: var(--black); transform: none; }

/* Controls inside a padded pill container need an inset ring, or a +3px
   offset lands the outline on the container's own border. */
.audience-tab:focus-visible {
  outline-offset: -2px;
}


/* Closing half of the accordion, driven by .is-closing from script.js —
   native <details> hides its content instantly otherwise. */
.faq__item.is-closing .faq__a {
  grid-template-rows: 0fr;
}

.faq__item.is-closing .faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* The base .step__num already carried an orange tint, which made "not yet
   reached" and "completed" identical. Give the rail three real states. */
.step__num {
  background: hsl(28 30% 12% / 0.05);
  color: var(--ink-50);
}

.step.is-done .step__num {
  background: hsl(28 72% 52% / 0.16);
  color: var(--orange-text);
}

.step.is-active .step__num {
  background: var(--orange);
  color: var(--black);
  box-shadow: 0 0 0 4px hsl(28 72% 52% / 0.14);
}

/* A dot on the rail marks each step's position. Uses ::after because .step
   is also .surface-glow, whose ::before carries the pointer-tracked light. */
.step::after {
  content: "";
  position: absolute;
  top: -18px;
  left: 26px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--surface-sunken);
  border: 2px solid var(--border-soft);
  transition: background-color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease-spring);
}

.step.is-active::after,
.step.is-done::after {
  background: var(--orange);
  border-color: var(--orange);
}

.step.is-active::after {
  transform: scale(1.35);
}

@media (max-width: 900px) {
  .step::after {
    top: 28px;
    left: -39px;
  }
}

/* The staged sequence steps the fill in discrete jumps, so give it an ease;
   the scroll-linked path overrides this with a near-linear follow. */
.steps::after {
  transition: transform 520ms var(--ease-out-quint);
}

@media (max-width: 900px) {
  .steps::after {
    transition: transform 120ms linear;
  }
}

/* ==========================================================================
   FIXES
   ========================================================================== */

/* The hero light was painted by .hero::before, but .hero is capped at 1200px
   and centred — so on a wide screen the tint stopped at the content edges and
   the page showed two vertical seams. Let the section run full width and move
   the cap onto the grid inside it. Using inset:0 rather than a 100vw breakout
   keeps the scrollbar out of the calculation, so there is still no overflow. */
.hero {
  max-width: none;
  padding-inline: var(--gutter);
}

.hero__grid {
  max-width: 1200px;
  margin-inline: auto;
}

/* Anchor landings sit lower in the viewport, so a jumped-to section arrives
   with air above it instead of flush against the header. */
[id] {
  scroll-margin-top: clamp(110px, 20vh, 220px);
}

@media (max-width: 640px) {
  [id] {
    scroll-margin-top: clamp(92px, 15vh, 150px);
  }
}

/* --- Scroll reveals, more present ---------------------------------------
   The travel was 18px, which reads as "the page settled" rather than as a
   deliberate entrance. Roughly 30px is enough to register as motion without
   becoming a slide. */
.js .r-rise {
  transform: translate3d(0, calc(var(--lift) * -10), 0);
}

.js .r-lines > * {
  transform: translate3d(0, 22px, 0);
}

/* The process rail is scaffolding: it exists to show the sequence being
   walked, so once the walk is finished it has nothing left to say. Fade the
   track and the fill out and leave the dots, which mark the steps. */
.steps::before,
.steps::after {
  transition: transform 520ms var(--ease-out-quint),
              opacity 620ms var(--ease) 240ms;
}

.steps.is-complete::before,
.steps.is-complete::after {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  /* No walk happens, so there is no scaffolding to retire — but keep it
     consistent and hide it rather than leaving a half-drawn rail. */
  .steps.is-complete::before,
  .steps.is-complete::after {
    opacity: 0;
    transition: none;
  }
}

/* --- Photograph ---------------------------------------------------------
   The frame reserves the aspect ratio so the masked reveal and the 1.04 to 1
   settle never cause a reflow. Ratio matches the source rather than cropping
   a wide clinical scene into a portrait box. */
.photo__frame {
  aspect-ratio: 16 / 9;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  padding: 0;
}

.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Only if the file is genuinely missing: fall back to the labelled frame
   instead of a broken-image icon. */
.photo.is-missing img {
  display: none;
}

.photo.is-missing .photo__frame {
  border: 1px dashed rgba(255, 255, 255, 0.22);
  padding: 24px;
}

.photo.is-missing .photo__frame::after {
  content: "Photograph not found at /assets/about-session.jpg";
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--orange);
  text-align: center;
}


/* ==========================================================================
   ARTICLES
   Long-form pages under /articles/. Unlisted in the primary nav — reachable
   from the footer only — but fully indexable, so the type here is tuned for
   reading rather than for the marketing rhythm the rest of the site uses.
   Everything below reuses the existing tokens; no new colours are invented.
   ========================================================================== */

.article {
  padding: clamp(48px, 7vw, 96px) var(--gutter) var(--space-9);
}

.article__inner {
  max-width: 40em;          /* wider than --measure: this page is all prose */
  margin-inline: auto;
}

.article__header {
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-soft);
}

.article__title {
  font-size: clamp(32px, 4.4vw, 52px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}

/* The one-word answer. This is the whole point of the page, so it gets to
   look like an answer rather than like another paragraph. */
.article__answer {
  font-size: var(--type-lede);
  font-weight: 500;
  line-height: 1.5;
  color: var(--black);
  margin: 0 0 var(--space-5);
}

.article__intro {
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink-70);
  margin: 0 0 var(--space-4);
}

.article__verified {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin: var(--space-6) 0 0;
}

.article__body > * + * {
  margin-top: var(--space-5);
}

.article__body h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: var(--space-8) 0 var(--space-4);
}

.article__body h3 {
  font-size: var(--type-h3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: var(--space-7) 0 var(--space-3);
}

.article__body p {
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink-70);
  margin: 0;
}

.article__body strong {
  font-weight: 500;
  color: var(--black);
}

/* Underlined by default here. In running prose an orange-only link is too
   easy to miss, and these point at the primary sources the page rests on. */
.article__body a {
  color: var(--orange-text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.article__body a:hover {
  color: var(--orange-text-hover);
}

.article__sources {
  list-style: none;
  margin: 0;
  padding: var(--space-5) 0 0;
}

.article__sources li + li {
  margin-top: var(--space-3);
}

.article__sources a {
  font-size: 16px;
  line-height: 1.5;
}

/* Closing CTA. Reuses .panel's dark plate so the article ends on the same
   surface every other page ends on. */
.article-cta {
  margin-top: var(--space-9);
}

.article-cta__title {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  color: var(--white);
}

.article-cta__body {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
  margin: 0 0 var(--space-6);
  max-width: 34em;
}

.article-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

@media (max-width: 640px) {
  .article__body h2 { margin-top: var(--space-7); }
}