@charset "utf-8";

/* ==========================================================================
   BiSonD: bisond.com
   One stylesheet. No imports, no hosted fonts, no external anything.

   Palette is locked to the brand: #FD7E14 orange, #141414 ink.
   Because #FD7E14 only reaches 2.57:1 against white, orange is used as a
   *surface* colour in light mode and as a *text* colour in dark mode, where
   it hits 7.17:1. See the token table below.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */

:root {
  color-scheme: light dark;

  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", "Courier New", monospace;

  /* Light theme, the default. */
  --bg:            #ffffff;
  --bg-alt:        #f6f4f1;
  --surface:       #ffffff;
  --fg:            #141414;
  --fg-2:          #52504d;
  --rule:          #e2ddd6;
  --accent:        #fd7e14;   /* fills, rules, blocks; never small text here */
  --accent-text:   #b34700;   /* small text: 5.50:1 on white (AA normal)      */
  --accent-display:#e86a00;   /* large text only: 3.23:1 on white (AA large)  */
  --accent-soft:   #fff3e8;
  --on-accent:     #141414;   /* 7.17:1 on #fd7e14 */
  --focus:         #b34700;
  --shadow:        0 1px 2px rgb(20 20 20 / 4%), 0 8px 24px rgb(20 20 20 / 6%);

  /* The console panel is a terminal, so it stays dark in both themes. */
  --console-bg:    #131211;
  --console-fg:    #d8d4d0;
  --console-dim:   #7d7873;

  --wrap:          78rem;
  --gutter:        clamp(1.25rem, 5vw, 4rem);
  --section-y:     clamp(4.5rem, 10vw, 8.5rem);
  --header-h:      4.5rem;

  --step: clamp(1rem, 0.95rem + 0.24vw, 1.125rem);
}

/* Dark theme. Declared twice on purpose: once for the OS preference (unless
   the visitor has explicitly chosen light) and once for the explicit choice
   made by the theme toggle. KEEP THESE TWO BLOCKS IN SYNC. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #141414;
    --bg-alt:      #191817;
    --surface:     #1c1b1a;
    --fg:          #ffffff;
    --fg-2:        #a8a5a1;
    --rule:        #2e2c2a;
    --accent-text: #fd7e14;   /* 7.17:1 on #141414; brand orange works as-is */
    --accent-display: #fd7e14;
    --accent-soft: #241a11;
    --focus:       #fd7e14;
    --shadow:      0 1px 2px rgb(0 0 0 / 40%), 0 12px 32px rgb(0 0 0 / 36%);
  }
}
:root[data-theme="dark"] {
  --bg:          #141414;
  --bg-alt:      #191817;
  --surface:     #1c1b1a;
  --fg:          #ffffff;
  --fg-2:        #a8a5a1;
  --rule:        #2e2c2a;
  --accent-text: #fd7e14;
  --accent-display: #fd7e14;
  --accent-soft: #241a11;
  --focus:       #fd7e14;
  --shadow:      0 1px 2px rgb(0 0 0 / 40%), 0 12px 32px rgb(0 0 0 / 36%);
}

/* ------------------------------------------------------------------ base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--step);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
body.is-nav-open { overflow: hidden; }

h1, h2, h3, h4 { margin: 0; line-height: 1.05; text-wrap: balance; }
p  { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--fg); }

strong { font-weight: 700; color: var(--fg); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--accent); color: var(--on-accent); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 0.85rem 1.4rem;
  background: var(--accent);
  color: var(--on-accent);
  font: 700 0.85rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { left: 0.75rem; top: 0.75rem; }

/* ------------------------------------------------------------ primitives */

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

.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); }

.section__head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.section__title {
  font-size: clamp(2rem, 1.15rem + 3.4vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin-block: 0.5rem 1.25rem;
}

.section__lead {
  font-size: clamp(1.05rem, 0.98rem + 0.42vw, 1.3rem);
  color: var(--fg-2);
  max-width: 42rem;
}

/* The logo's twin-rule motif, reused as the section eyebrow. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
  font: 700 0.75rem/1 var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 3px;
  background: var(--accent);
  flex: none;
}
.eyebrow--brand { color: var(--accent-text); }

.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 46em) { .grid--2, .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.split { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 62em) {
  .split { grid-template-columns: 1fr 0.85fr; }

  /* The prose column runs longer than the figure. Sticking the figure keeps
     it company instead of leaving a column of dead space below it. */
  .split__figure {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    align-self: start;
  }
}

.split__figure { margin: 0; }
.split__figure figcaption {
  margin-top: 0.9rem;
  font: 500 0.82rem/1.5 var(--font-mono);
  color: var(--fg-2);
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.9rem;
  background: var(--accent);
  color: var(--on-accent);
  font: 700 0.9rem/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--accent);
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.btn:hover {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
  transform: translateY(-2px);
}

.btn--ghost { background: transparent; color: var(--fg); border-color: var(--rule); }
.btn--ghost:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }

.btn--small { padding: 0.7rem 1.15rem; font-size: 0.75rem; letter-spacing: 0.1em; }

/* -------------------------------------------------------------- masthead */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow 0.2s ease;
}
.masthead.is-scrolled { box-shadow: var(--shadow); }

.masthead__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0 var(--gutter);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.brand { display: block; flex: none; margin-right: auto; }
.brand img { width: auto; height: 2.1rem; }

.nav-toggle,
.nav__close {
  flex: none;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--rule);
  color: var(--fg);
  font: 700 0.72rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.nav-toggle:hover,
.nav__close:hover { border-color: var(--accent); color: var(--accent-text); }


/* --------------------------------------------------------- theme toggle */

.theme-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--rule);
  font: 700 0.68rem/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent-text); }
.theme-toggle[hidden] { display: none; }

/* A hollow disc for light, a filled one for dark. No icon font, no SVG. */
.theme-toggle__icon {
  width: 0.75rem;
  height: 0.75rem;
  flex: none;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: none;
}
.theme-toggle[data-mode="dark"] .theme-toggle__icon { background: var(--accent); }

.theme-toggle__text { display: none; }
@media (min-width: 78em) { .theme-toggle__text { display: inline; } }

/* -------------------------------------------------------------------- nav
   Mobile: hidden until opened. Two mechanisms, deliberately:
     .nav:target   pure CSS, the no-JavaScript fallback
     .nav.is-open  the scripted disclosure, which preventDefaults the link
                     so the hash never changes and :target never fires.
*/
.nav {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  flex-direction: column;
  gap: 2rem;
  padding: 0.7rem var(--gutter) var(--gutter);
  background: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav:target,
.nav.is-open { display: flex; }

.nav__bar { display: flex; align-items: center; justify-content: space-between; }
.nav__mark { width: 2.1rem; height: 2.1rem; }

.nav__list { display: flex; flex-direction: column; gap: 0.25rem; }
.nav__list a {
  display: block;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--fg);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-decoration: none;
}
.nav__list a:hover { color: var(--accent-text); }


@media (min-width: 62em) {
  .nav-toggle, .nav__close, .nav__bar { display: none; }

  .nav, .nav:target, .nav.is-open {
    position: static;
    display: flex;
    flex-direction: row;
    padding: 0;
    background: none;
    inset: auto;
    overflow: visible;
  }
  .nav__list { flex-direction: row; gap: 1.5rem; }
  .nav__list a {
    position: relative;
    padding: 0.4rem 0;
    border: 0;
    font: 700 0.78rem/1 var(--font-mono);
    letter-spacing: 0.13em;
    color: var(--fg-2);
  }
  .nav__list a:hover { color: var(--accent-text); }

  /* Scroll-spy: the section currently under the reader. */
  .nav__list a[aria-current] { color: var(--accent-text); }
  .nav__list a[aria-current]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.15rem;
    height: 2px;
    background: var(--accent);
  }
}

/* ------------------------------------------------------------------ hero */

.hero {
  padding-block: clamp(3.5rem, 9vw, 7.5rem) clamp(3rem, 7vw, 6rem);
  border-bottom: 1px solid var(--rule);
}

/* Capped at 5.25rem so "CONTACT WITH REALITY." holds one line inside the
   content column. Above that it breaks mid-phrase. text-wrap is normal
   because balancing fights the explicit <br>. */
.hero__title {
  margin-block: 1.5rem 0;
  font-size: clamp(2.5rem, 1.1rem + 5.4vw, 5.25rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: normal;
}
.hero__title .accent { color: var(--accent-display); }

.hero__lead {
  max-width: 44rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.55;
  color: var(--fg-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

.facts {
  display: grid;
  gap: 1px;
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (min-width: 34em) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .facts { grid-template-columns: repeat(4, 1fr); } }

.facts__item { padding: 1.4rem 1.5rem; background: var(--bg); }
.facts__item dt {
  font: 700 0.7rem/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.facts__item dd {
  margin: 0.6rem 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

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

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--surface);
  border: 1px solid var(--rule);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
/* Top bar echoes the logo's twin rules; it extends on hover. */
.card::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: -1px;
  width: 3.5rem;
  height: 4px;
  background: var(--accent);
  transition: width 0.25s ease;
}
.card:hover { border-color: var(--fg); transform: translateY(-3px); box-shadow: var(--shadow); }
.card:hover::before { width: 8rem; }

.card__num {
  font: 700 0.78rem/1 var(--font-mono);
  letter-spacing: 0.18em;
  color: var(--accent-text);
}

.card__title {
  margin-block: 1rem 1.1rem;
  font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* Grows to fill the card so the rule above .ticks lands at the same height on
   every card in a row, whatever the paragraph length. */
.card__body { color: var(--fg-2); flex: 1 1 auto; }

/* The lead discipline spans the row, so the layout states the priority
   rather than relying on the copy alone. Its capability list splits into two
   columns so the card does not become a tower. */
@media (min-width: 46em) {
  .card--lead { grid-column: 1 / -1; }
  .card--lead .card__body { max-width: 48rem; }
  .card--lead .ticks { grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; }
}

.ticks {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 0.6rem;
}
.ticks li { position: relative; padding-left: 1.4rem; font-size: 0.95rem; line-height: 1.5; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--accent);
}

/* ---------------------------------------------------------------- banner
   Full-bleed orange band. Ink on orange is 7.17:1, so the type stays legible
   and the brand colour gets one moment at full strength in both themes. */
.banner {
  background: var(--accent);
  color: var(--on-accent);
  padding-block: clamp(3rem, 7vw, 5.5rem);
  border-block: 1px solid var(--accent);
}
.banner__quote { margin: 0; max-width: 52rem; }
.banner__quote p {
  font-size: clamp(1.5rem, 0.9rem + 2.6vw, 3.1rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.banner__quote .accent {
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
}

/* ----------------------------------------------------------------- steps */

.steps { display: grid; gap: 0; }

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--rule);
}
.step:last-child { border-bottom: 1px solid var(--rule); }

.step__num {
  font: 700 0.85rem/1.6 var(--font-mono);
  letter-spacing: 0.16em;
  color: var(--accent-text);
}

.step__title {
  margin-bottom: 0.6rem;
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.step__body p { color: var(--fg-2); }

/* --------------------------------------------------------------- console
   Original artwork: a mock regression run, drawn in HTML/CSS rather than
   shipped as an image. Stays dark in both themes; a terminal is dark. */
.console {
  background: var(--console-bg);
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--console-fg);
  overflow: hidden;
}

.console__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid #2b2825;
  background: #1b1917;
}
.console__dots { display: flex; gap: 0.3rem; }
.console__dots i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #3a3632; }
.console__dots i:first-child { background: var(--accent); }
.console__name {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--console-dim);
}

.console__body { padding: 1.1rem 0.9rem 1.25rem; }
.console__cmd { color: #fff; }
.console__prompt { color: var(--accent); margin-right: 0.5rem; }
.console__meta { color: var(--console-dim); margin-bottom: 0.9rem; }

.console__list { display: grid; gap: 0.42rem; }
.console__list li {
  display: grid;
  grid-template-columns: 1rem 1fr auto;
  gap: 0.5rem;
  align-items: baseline;
}
.console__list b { color: var(--console-dim); font-weight: 400; }
.console__list .mark { font-weight: 700; }
.console__list .ok  { color: var(--console-fg); }
.console__list .ok .mark { color: #6f9c5a; }
.console__list .bad { color: #fff; }
.console__list .bad .mark { color: var(--accent); }

.console__sum {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid #2b2825;
  color: var(--console-dim);
}
.console__sum .ok  { color: var(--console-fg); }
.console__sum .bad { color: var(--accent); font-weight: 700; }
.console__dim { color: var(--console-dim); }

/* --------------------------------------------------------------- reasons */

.reason { padding-left: 1.5rem; border-left: 3px solid var(--accent); }
.reason__title {
  margin-bottom: 0.55rem;
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.reason p { color: var(--fg-2); }

/* --------------------------------------------------------------- pricing */

.panel {
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--accent-soft);
  border: 1px solid var(--rule);
}
.panel__title {
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  font: 700 0.78rem/1 var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.factor__title {
  margin-bottom: 0.4rem;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.factor p { color: var(--fg-2); font-size: 0.95rem; }

.engagements { margin-top: clamp(1rem, 2vw, 1.5rem); }

.engagement {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--accent);
}
.engagement__label {
  font: 700 0.7rem/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.engagement__title {
  margin-block: 0.75rem 0.65rem;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.engagement p { color: var(--fg-2); font-size: 0.95rem; }

/* ------------------------------------------------------------------- faq */

.faq { display: grid; gap: 0; }
@media (min-width: 60em) {
  .faq { grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem, 5vw, 4rem); }
}

.qa { padding-block: clamp(1.4rem, 2.6vw, 1.9rem); border-top: 1px solid var(--rule); }
.qa__q {
  margin-bottom: 0.65rem;
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.qa__a { color: var(--fg-2); font-size: 0.97rem; }

/* --------------------------------------------------------------- contact */

.contact__grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 40em) { .contact__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68em) { .contact__grid { grid-template-columns: repeat(4, 1fr); } }

.contact__card {
  display: block;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--bg);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.18s ease;
}
a.contact__card:hover { background: var(--accent); color: var(--on-accent); }
a.contact__card:hover .contact__label,
a.contact__card:hover .contact__note { color: var(--on-accent); }

.contact__card--primary { background: var(--accent-soft); }

.contact__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.85rem; }

.contact__action {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--accent);
  background: none;
  color: var(--accent-text);
  font: 700 0.68rem/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.contact__action:hover { background: var(--accent); color: var(--on-accent); }
.contact__action[hidden] { display: none; }
.contact__action.is-done { background: var(--accent); color: var(--on-accent); }

.contact__label {
  font: 700 0.7rem/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.contact__value {
  margin-block: 0.7rem 0.35rem;
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.2rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  word-break: break-word;
}
.contact__note { font-size: 0.87rem; color: var(--fg-2); }

/* ---------------------------------------------------------------- footer */

.footer {
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem;
  background: var(--bg-alt);
  border-top: 1px solid var(--rule);
}

.footer__top { display: grid; gap: clamp(2.25rem, 4vw, 3.5rem); }
@media (min-width: 52em) {
  .footer__top { grid-template-columns: 1.6fr 1fr 1fr; }
  .footer__nav { grid-column: 2 / -1; }
}

.footer__brand img { width: auto; max-width: 13rem; height: auto; }

/* Live text rather than part of the logo image, so it follows the theme. */
.footer__tagline {
  margin-top: 0.85rem;
  font: 700 0.7rem/1 var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.footer__blurb { margin-top: 1rem; max-width: 24rem; color: var(--fg-2); font-size: 0.95rem; }

.footer__heading {
  margin-bottom: 1.1rem;
  font: 700 0.72rem/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.footer__nav ul {
  display: grid;
  gap: 0.6rem;
  font-size: 0.95rem;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  /* Even columns across the span the contact block used to share, so the
     footer keeps its original three-part rhythm. */
  grid-auto-columns: minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4vw, 3rem);
}
@media (max-width: 32em) {
  /* One column on narrow phones; two would be cramped. */
  .footer__nav ul { grid-auto-flow: row; grid-template-rows: none; }
}
.footer__nav a { color: var(--fg); text-decoration: none; }
.footer__nav a:hover { color: var(--accent-text); text-decoration: underline; }

.footer__privacy {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  font: 500 0.85rem/1.6 var(--font-mono);
  color: var(--fg-2);
}

.footer__legal {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  color: var(--fg-2);
}

/* ------------------------------------------------------------ back to top */

.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 40;
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  border: 2px solid var(--accent);
  font-size: 1.1rem;
  line-height: 1;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.to-top:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); transform: translateY(-2px); }
.to-top[hidden] { display: none; }

/* ---------------------------------------------------------------- reveals
   Scoped to html.js so a visitor without JavaScript never meets a hidden
   element that nothing will ever reveal. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ------------------------------------------------------------ preferences */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

@media (prefers-contrast: more) {
  :root { --rule: #141414; --fg-2: #141414; }
  :root[data-theme="dark"] { --rule: #ffffff; --fg-2: #ffffff; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --rule: #ffffff; --fg-2: #ffffff; }
  }
}

/* ----------------------------------------------------------------- print */

@media print {
  .masthead, .nav, .nav-toggle, .skip-link, .to-top, .theme-toggle,
  .split__figure { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section, .hero { padding-block: 1.25rem; }
  .banner { background: none; color: #000; border-block: 2px solid #000; }
  .card, .engagement, .panel { border: 1px solid #999; break-inside: avoid; }
  .qa, .step { break-inside: avoid; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  a { color: #000; text-decoration: underline; }
}