/* ==========================================================================
   Fulxrum: blueprint at night
   One CSS system. Every colour, size, space and radius is a token below.
   Source of truth for the values: DESIGN.md.
   ========================================================================== */

/* ---------- Fonts (self-hosted, Latin subset, woff2) ---------- */

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-latin-wdth108-114-wght600-700.woff2") format("woff2");
  font-weight: 600 700;
  font-stretch: 108% 114%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../assets/fonts/source-sans-3-latin-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../assets/fonts/source-sans-3-latin-italic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  /* Palette: Carbon and Champagne (fixed; see DESIGN.md). No colours outside this list. */
  --carbon: #12110F;     /* page background */
  --graphite: #1A1815;   /* alternate sections, footer */
  --smoke: #24211C;      /* cards, panels, inputs, the quote-draft card */
  --seam: #3A342A;       /* hairlines, borders, blueprint grid: lines only, never text */
  --ivory: #F2EBDD;      /* headings, wordmark letters, key text */
  --sand: #B8AE9C;       /* body text */
  --dust: #8C8474;       /* captions, labels, metadata: on carbon/graphite, or 18px+ on smoke */
  --champagne: #E3C88E;  /* primary buttons, links, focus rings, the fulcrum, money figures */
  --antique: #B8975A;    /* lever beam, outlines, ticks, dimension lines, callout rings */
  --ok: #9CC5A1;         /* form success only, always with text */
  --error: #E39A8C;      /* form errors only, always with text */

  /* The blueprint grid: seam lines at about 35% opacity. */
  --grid-line: color-mix(in srgb, var(--seam) 35%, transparent);

  /* Type families */
  --f-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --f-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* Type scale: six sizes */
  --fs-display: clamp(2.75rem, 1.9rem + 3.6vw, 4.5rem);
  --fs-headline: clamp(2rem, 1.45rem + 2.4vw, 3.25rem);
  --fs-title: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-label: 0.875rem;

  --wdth-display: 112%;
  --wdth-title: 110%;

  /* Spacing: 8px base */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 96px;
  --s-9: 128px;

  --gutter: clamp(16px, 4vw, 48px);
  --grid-gap: clamp(16px, 2vw, 24px);
  --section-pad: clamp(4rem, 1.5rem + 7vw, 8rem);
  --container: 1200px;
  --measure: 70ch;
  --measure-lead: 60ch;

  /* Shape */
  --r-tag: 2px;
  --r-control: 4px;
  --r-panel: 8px;
  --line: 1px;

  /* Layout */
  --header-h: 72px;
  --tap: 44px;
  --grid-size: 24px;

  /* Motion: 150-250ms interface transitions */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 250ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layers */
  --z-header: 10;
  --z-skip: 20;
}

/* ---------- Base ---------- */

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

html {
  color-scheme: dark;
  background: var(--carbon);
  color: var(--sand);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--s-3));
  scrollbar-color: var(--smoke) var(--carbon);
}

body {
  margin: 0;
  background: var(--carbon);
  color: var(--sand);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Only breaks a word that cannot fit on its own line (200% text on small phones). */
  overflow-wrap: break-word;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  color: var(--ivory);
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: var(--wdth-display);
  text-wrap: balance;
  hyphens: auto;
  overflow-wrap: anywhere;
}

/* Same safety for the few short text blocks that can hold one very long word or token. */
.page-hero__lead,
.flow__step,
.tag,
.rfq-sample__head {
  overflow-wrap: anywhere;
}

p {
  text-wrap: pretty;
}

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

img {
  height: auto;
}

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

a:hover {
  text-decoration-thickness: 2px;
}

address {
  font-style: normal;
}

button {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
}

::selection {
  background: var(--champagne);
  color: var(--carbon);
}

:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 2px;
  border-radius: var(--r-tag);
}

.mono,
.money,
.num {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: var(--z-skip);
  padding: var(--s-2) var(--s-3);
  background: var(--champagne);
  color: var(--carbon);
  font-weight: 600;
  border-radius: var(--r-control);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  transform: none;
}

/* ---------- Icons ---------- */

.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm {
  width: 18px;
  height: 18px;
}

.icon--card {
  width: 28px;
  height: 28px;
  color: var(--ivory);
}

/* ---------- Layout ---------- */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.section--alt {
  background: var(--graphite);
  border-block: var(--line) solid var(--seam);
}

.section__head {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}

.section__title {
  font-size: var(--fs-headline);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.section__intro {
  max-width: var(--measure-lead);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

/* Blueprint grid: Seam at 35%, 24px squares. Page heroes plus at most one or two panels
   per page (home: What we do scene; RFQ Assistant: calculator result). Never everywhere. */
.blueprint {
  background-image:
    linear-gradient(var(--grid-line) var(--line), transparent var(--line)),
    linear-gradient(90deg, var(--grid-line) var(--line), transparent var(--line));
  background-size: var(--grid-size) var(--grid-size);
  background-position: -1px -1px;
}

/* Grid and stack children may shrink below their longest word, so very large text
   (200% zoom on a small phone) wraps inside the screen instead of widening the page. */
:where(.rfq-sample, .rfq-sample__head, .split, .stack, .page-hero__inner, .closing__inner, .hero__copy, .founders__note,
  .prose ul, .prose ol, .founders__grid, .offers, .offer-detail, .cells,
  .problem__grid, .safety__grid, .pay, .calc, .flow, .steps__list, .spec-list__row) > * {
  min-width: 0;
  max-width: 100%;
}

/* ---------- Buttons, links, tags ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 var(--s-4);
  border: var(--line) solid transparent;
  border-radius: var(--r-control);
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--champagne);
  color: var(--carbon);
}

.btn--primary:hover {
  box-shadow: inset 0 0 0 1px var(--ivory);
}

.btn--secondary {
  background: transparent;
  border-color: var(--seam);
  color: var(--ivory);
}

.btn--secondary:hover {
  border-color: var(--antique);
  background: var(--graphite);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  font-weight: 600;
  text-decoration: none;
}

.link-arrow:hover {
  text-decoration: underline;
}

.link-arrow .icon {
  transition: transform var(--dur-fast) var(--ease-out);
}

.link-arrow:hover .icon {
  transform: translateX(3px);
}

.tag {
  display: inline-flex;
  flex: none;
  white-space: nowrap;
  align-items: center;
  width: max-content;
  padding: 2px var(--s-2);
  border: var(--line) solid var(--seam);
  border-radius: var(--r-tag);
  color: var(--ivory);
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.4;
}

.tag--text {
  font-family: var(--f-body);
  font-weight: 600;
  width: auto;
  max-width: 100%;
  white-space: normal;
}

/* Buttons stay on one line from 640px; on phones a long label may wrap rather than overflow. */
@media (min-width: 640px) {
  .btn {
    white-space: nowrap;
  }
}

/* ---------- Header and navigation ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--carbon);
  border-bottom: var(--line) solid transparent;
  transition: border-color var(--dur-base) var(--ease-out);
}

.site-header.is-scrolled {
  border-bottom-color: var(--seam);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--header-h);
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-right: auto;
}



.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: var(--tap);
  padding: 0 var(--s-3);
  background: none;
  border: 0;
  border-radius: var(--r-control);
  color: var(--ivory);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.nav__link:hover,
.nav__link[aria-current="page"],
.nav__trigger.is-current {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.nav__link[aria-current="page"],
.nav__trigger.is-current {
  text-decoration-color: var(--ivory);
  text-underline-offset: 0.35em;
}

.nav__sublink[aria-current="page"] {
  background: var(--graphite);
}

.nav__chevron {
  transition: transform var(--dur-base) var(--ease-out);
}

.nav__trigger[aria-expanded="true"] .nav__chevron {
  transform: rotate(180deg);
}

.nav__item--menu {
  position: relative;
}

.nav__submenu {
  display: none;
  position: absolute;
  top: calc(100% + var(--s-2));
  left: 0;
  width: 320px;
  padding: var(--s-2);
  background: var(--smoke);
  border: var(--line) solid var(--seam);
  border-radius: var(--r-panel);
}

/* Without JS the submenu opens on hover and keyboard focus. */
html:not(.js) .nav__item--menu:hover .nav__submenu,
html:not(.js) .nav__item--menu:focus-within .nav__submenu,
.js .nav__trigger[aria-expanded="true"] + .nav__submenu {
  display: block;
}

.nav__sublink {
  display: grid;
  gap: 2px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-control);
  text-decoration: none;
}

.nav__sublink:hover {
  background: var(--graphite);
}

.nav__sublink-title {
  color: var(--ivory);
  font-weight: 600;
}

.nav__sublink-text {
  color: var(--sand);
  font-size: var(--fs-label);
  line-height: 1.4;
}

.btn--header {
  min-height: var(--tap);
  padding: 0 var(--s-3);
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  background: none;
  border: var(--line) solid var(--seam);
  border-radius: var(--r-control);
  color: var(--ivory);
  cursor: pointer;
}

.menu-toggle__close {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__open {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__close {
  display: block;
}

@media (max-width: 899px) {
  .site-header__inner {
    flex-wrap: wrap;
    gap: var(--s-3);
  }

  .btn--header {
    padding: 0 12px;
    font-size: var(--fs-label);
  }

  .nav {
    order: 3;
  }

  /* No JS: the nav wraps below the logo and stays usable. */
  html:not(.js) .nav {
    flex-basis: 100%;
    padding-bottom: var(--s-3);
  }

  html:not(.js) .nav__list {
    flex-wrap: wrap;
  }

  /* With JS: the nav becomes a menu panel under the header. */
  .js .menu-toggle {
    display: inline-flex;
  }

  .js .nav {
    display: none;
    flex-basis: 100%;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s-2) 0 var(--s-5);
    border-top: var(--line) solid var(--seam);
  }

  .js .site-header.is-open .nav,
  .js .site-header.is-closing .nav {
    display: block;
  }

  .js .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .js .nav__link {
    width: 100%;
    min-height: 52px;
    padding: 0;
    font-size: var(--fs-lead);
    border-bottom: var(--line) solid var(--seam);
  }

  .js .nav__trigger {
    justify-content: space-between;
  }

  .nav__submenu {
    position: static;
    width: auto;
    margin: var(--s-2) 0 var(--s-3);
  }
}

@media (min-width: 900px) {
  .menu-toggle {
    display: none !important;
  }
}

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

.hero {
  padding-block: clamp(var(--s-5), 1rem + 3vw, var(--s-6)) var(--section-pad);
  border-bottom: var(--line) solid var(--seam);
}

.hero__grid {
  display: grid;
  gap: var(--s-7);
  align-items: center;
}

.hero__copy {
  display: grid;
  justify-items: start;
}

.hero__title {
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: -0.015em;
}

.hero__lines,
.hero__line {
  display: block;
}

/* The lever: a beam resting on the fulcrum, under the motto. */
.lever {
  position: relative;
  width: min(100%, 6.1em);
  height: 28px;
  margin-top: var(--s-3);
  font-size: var(--fs-display);
}

.lever__beam {
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--antique);
}

.fulcrum {
  position: absolute;
  top: 2px;
  left: 34%;
  width: 28px;
  height: 22px;
  background: var(--champagne);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.hero__lead {
  max-width: var(--measure-lead);
  margin-top: var(--s-4);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--grid-gap);
  }

  .hero__copy {
    grid-column: 1 / span 6;
    padding-right: var(--s-5);
  }

  .sample {
    grid-column: 7 / span 6;
  }
}

/* ---------- Sample approval screen ---------- */

.sample {
  min-width: 0;
}

/* Drawing-sheet double rule: an outer frame line around the panel. */
.sample__frame {
  padding: var(--s-2);
  border: var(--line) solid var(--seam);
  border-radius: var(--r-panel);
}

.sample__panel {
  background: var(--smoke);
  border: var(--line) solid var(--seam);
  border-radius: var(--r-control);
  font-size: var(--fs-label);
  line-height: 1.45;
}

.sample__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 12px var(--s-3);
  border-bottom: var(--line) solid var(--seam);
}

.sample__title {
  color: var(--ivory);
  font-weight: 600;
}

.sample__title .mono {
  margin-left: var(--s-1);
  color: var(--sand);
  font-weight: 400;
}

.sample__region {
  position: relative;
  padding: 12px var(--s-3);
  padding-right: calc(var(--s-3) + 28px);
  border-bottom: var(--line) solid var(--seam);
}

.sample__region:last-child {
  border-bottom: 0;
}

.marker {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border: var(--line) solid var(--antique);
  border-radius: 50%;
  color: var(--ivory);
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1;
}

.sample__region > .marker {
  position: absolute;
  top: 12px;
  right: var(--s-3);
}

.sample__key {
  color: var(--sand);
  margin-right: var(--s-1);
}

.sample__from {
  color: var(--ivory);
}

.sample__muted {
  display: block;
  color: var(--sand);
  font-size: var(--fs-label);
}

.sample__files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.sample__files li {
  padding: 2px var(--s-2);
  border: var(--line) solid var(--seam);
  border-radius: var(--r-tag);
  color: var(--sand);
  font-size: var(--fs-label);
}

.sample__fields {
  display: grid;
  gap: 2px;
}

.sample__fields > div {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: var(--s-2);
}

@media (max-width: 420px) {
  .sample__fields > div {
    grid-template-columns: 5.5em 1fr;
  }
}

.sample__fields dt {
  color: var(--sand);
}

.sample__fields dd {
  color: var(--ivory);
}

/* Low-confidence flag: dashed outline, no colour of its own. */
.sample__flag {
  margin-inline: calc(-1 * var(--s-2));
  padding: var(--s-1) var(--s-2);
  border: var(--line) dashed var(--antique);
  border-radius: var(--r-tag);
}

.sample__check {
  display: block;
  color: var(--sand);
  font-size: var(--fs-label);
}

.sample__price {
  width: 100%;
}

.sample__price th,
.sample__price td {
  padding: 3px 0;
  vertical-align: top;
  text-align: left;
}

.sample__price th {
  color: var(--ivory);
  font-weight: 600;
}

.sample__price td {
  padding-left: var(--s-3);
  color: var(--sand);
  font-size: var(--fs-label);
}

.sample__price td.num {
  color: var(--sand);
  text-align: right;
}

.sample__rule {
  display: block;
  color: var(--sand);
  font-size: var(--fs-label);
  font-weight: 400;
}

.sample__price tfoot th,
.sample__price tfoot td {
  padding-top: var(--s-2);
  border-top: var(--line) solid var(--seam);
}

.sample__price td.sample__total {
  color: var(--champagne);
  font-size: var(--fs-body);
  font-weight: 500;
}

.sample__decision {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.sample__btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s-3);
  border: var(--line) solid var(--seam);
  border-radius: var(--r-control);
  color: var(--sand);
  font-weight: 600;
}

.sample__btn--approve {
  border-color: var(--ivory);
  color: var(--ivory);
}

.sample__note {
  margin-top: var(--s-3);
  font-size: var(--fs-label);
  line-height: 1.5;
}

.sample__legend ol {
  display: grid;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-4);
}

.sample__legend li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--fs-label);
  line-height: 1.5;
}

@media (min-width: 900px) {
  /* Balloon callouts, as on a drawing: the marker sits on the outer frame line
     and a leader with a tick end points into the region it names. */
  .sample__region > .marker {
    right: calc(-1 * (var(--s-2) + 2px + 12px));
    background: var(--carbon);
  }

  .sample__region > .marker::after {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    width: 30px;
    height: var(--line);
    background: var(--antique);
  }

  .sample__region > .marker::before {
    content: "";
    position: absolute;
    right: calc(100% + 30px);
    top: calc(50% - 4px);
    width: var(--line);
    height: 9px;
    background: var(--antique);
  }
}

@media (min-width: 560px) {
  .sample__legend ol {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 420px), (min-width: 900px) and (max-width: 1199px) {
  .sample__price,
  .sample__price tbody,
  .sample__price tfoot,
  .sample__price tr {
    display: block;
  }

  .sample__price tr {
    display: grid;
    grid-template-columns: 1fr auto;
    padding-block: var(--s-1);
  }

  .sample__price th {
    grid-column: 1 / -1;
  }

  .sample__price td {
    padding-left: 0;
  }

  .sample__price tfoot tr {
    border-top: var(--line) solid var(--seam);
    padding-top: var(--s-2);
  }

  .sample__price tfoot th,
  .sample__price tfoot td {
    border-top: 0;
    padding-top: 0;
  }

  .sample__price tfoot td {
    grid-column: 2;
  }
}

/* ---------- The problem ---------- */

.problem__grid {
  display: grid;
  gap: var(--s-5);
}

.problem__lines li {
  padding-block: var(--s-4);
  color: var(--ivory);
  font-family: var(--f-display);
  font-size: var(--fs-headline);
  font-weight: 700;
  font-stretch: var(--wdth-display);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.problem__lines li + li {
  border-top: var(--line) solid var(--seam);
}

.problem__lines li:first-child {
  padding-top: 0;
}

@media (min-width: 900px) {
  .problem__lines--row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .problem__lines--row li {
    padding: var(--s-2) var(--s-5);
    font-size: var(--fs-title);
    font-stretch: var(--wdth-title);
    line-height: 1.3;
  }

  .problem__lines--row li:first-child {
    padding-left: 0;
  }

  .problem__lines--row li + li {
    border-top: 0;
    border-left: var(--line) solid var(--seam);
  }

  .problem__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--grid-gap);
  }

  .problem__lines {
    grid-column: 1 / span 9;
  }

  .problem__lines--row {
    grid-column: 1 / -1;
  }
}

/* ---------- What we do: pinned lever scene (js/what-we-do.js; reference: docs/reference/what-we-do-lever-reference.html) ---------- */

.wwd-section {
  --wwd-pad: max(var(--gutter), calc((100% - var(--container)) / 2));
  --wwd-top: calc(var(--header-h) + clamp(28px, 8vh, 88px));
  --wwd-floor: calc(env(safe-area-inset-bottom, 0px) + 64px);   /* room kept for the progress rule */
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background-color: var(--graphite);
  /* Links land where the pin starts: undo the page's header scroll padding for this one target. */
  scroll-margin-top: calc(-1 * (var(--header-h) + var(--s-3)));
}

/* The drawing takes the band from just under the sentence down to the progress rule and sits on its floor
   (js/what-we-do.js sets xMidYMax on landscape screens), so the fulcrum, beam and ratio scale settle low
   and the quote card stays clear of the text. Portrait screens and phones keep the full centred band. */
.wwd-section .wwd__scene {
  position: absolute;
  top: calc(var(--wwd-top) + 9rem);
  left: 0;
  width: 100%;
  /* an SVG does not stretch between top and bottom, so its height is given outright */
  height: calc(100% - var(--wwd-top) - 9rem - var(--wwd-floor));
}

/* The sentence: "What we do" stays; its ending changes with each phase. */
.wwd {
  position: absolute;
  z-index: 2;
  left: var(--wwd-pad);
  top: var(--wwd-top);
  width: min(56vw, 46rem);
}

.wwd__title,
.wwd__line {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  font-stretch: var(--wdth-display);
  letter-spacing: -0.01em;
}

.wwd__title {
  line-height: 1.02;
  color: var(--sand);
}

.wwd__mask {
  overflow: hidden;
  margin-top: 0.12em;
  padding-bottom: 0.1em;
}

.wwd__line {
  line-height: 1.05;
  color: var(--ivory);
  will-change: transform;
}

.wwd__sub {
  margin-top: var(--s-3);
  max-width: 40ch;
  color: var(--sand);
}

.wwd__all {
  display: none;
  margin: var(--s-3) 0 0;
  padding-left: 1.2em;
  color: var(--ivory);
}

.wwd__all li + li {
  margin-top: 6px;
}

/* Without the script (or with reduced motion) the sentence is a static list of all four endings. */
:root:not(.js) .wwd__mask,
:root:not(.js) .wwd__sub {
  display: none;
}

:root:not(.js) .wwd__all {
  display: block;
}

/* Readouts, top right */
.wwd__readout {
  position: absolute;
  z-index: 2;
  right: var(--wwd-pad);
  top: var(--wwd-top);
  display: grid;
  gap: var(--s-3);
  min-width: 12rem;
  margin: 0;
}

.wwd__readout div {
  border-top: var(--line) solid var(--seam);
  padding-top: var(--s-2);
}

.wwd__readout dt {
  font-size: var(--fs-label);
  color: var(--dust);
}

.wwd__readout dd {
  margin: 2px 0 0;
  font: 500 clamp(1.2rem, 2vw, 1.6rem)/1.1 var(--f-mono);
  font-variant-numeric: tabular-nums;
  color: var(--champagne);
}

/* Progress rule, bottom */
.wwd__steps {
  position: absolute;
  z-index: 2;
  left: var(--wwd-pad);
  right: var(--wwd-pad);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wwd__steps li {
  border-top: 2px solid var(--seam);
  padding-top: var(--s-2);
  font: 400 var(--fs-label)/1.3 var(--f-mono);
  color: var(--dust);
  transition: border-color 300ms var(--ease-out), color 300ms var(--ease-out);
}

.wwd__steps li.is-on {
  border-color: var(--champagne);
  color: var(--ivory);
}

/* Scene inks */
.wwd-hatch { stroke: var(--seam); stroke-width: 1.2; }
.wwd-floor { stroke: var(--seam); stroke-width: 1.5; }
.wwd-dims line { stroke: var(--antique); stroke-width: 1; fill: none; }
.wwd-dims text { fill: var(--antique); font: 13px var(--f-mono); }
.wwd-sheet rect { fill: var(--smoke); stroke: var(--dust); stroke-width: 1; }
.wwd-sheet text { fill: var(--sand); font: 8.5px var(--f-mono); }
.wwd-sheet line { stroke: var(--seam); stroke-width: 2; }
.wwd-sheet--over rect { fill: var(--champagne); fill-opacity: 0.12; stroke: var(--champagne); }
.wwd-sheet--over text { fill: var(--champagne); }
.wwd-sheet--over line { stroke: var(--champagne); }
.wwd-laser { stroke: var(--champagne); stroke-width: 2; }
.wwd-card__panel { fill: var(--smoke); stroke: var(--champagne); stroke-width: 1.2; }
.wwd-card__title { fill: var(--ivory); font: 600 15px var(--f-body); }
.wwd-card__id { fill: var(--sand); font: 11px var(--f-mono); }
.wwd-card__total { fill: var(--ivory); font: 700 22px var(--f-display); }
.wwd-card__ring { fill: none; stroke: var(--champagne); stroke-width: 1.5; }
.wwd-card__btn { fill: var(--champagne); }
.wwd-card__btn-text { fill: var(--carbon); font: 600 13px var(--f-body); }
.wwd-beamrect { fill: var(--ivory); }
.wwd-point__dot { fill: var(--champagne); }
.wwd-point__halo { fill: none; stroke: var(--champagne); stroke-opacity: 0.4; }
.wwd-fulc__shape { fill: var(--champagne); }
.wwd-section svg { fill: none; }

@media (max-width: 759px), (max-aspect-ratio: 9 / 10) {
  .wwd-section .wwd__scene {
    top: var(--header-h);
    height: calc(100% - var(--header-h));
  }
}

@media (max-width: 759px) {
  .wwd {
    width: calc(100% - 2 * var(--wwd-pad));
  }

  .wwd__readout {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 70px);
    left: var(--wwd-pad);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
    gap: 10px;
  }

  .wwd__readout dd {
    font-size: 1.05rem;
  }

  .wwd__steps li {
    font-size: 0.75rem;
  }
}

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

  .wwd__all {
    display: block;
  }
}

/* ---------- Logo pivot drop (js/pivot-drop.js) ---------- */
.pivot-drop { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 11; pointer-events: none; overflow: visible; visibility: hidden; fill: none; }
.pivot-drop__tri, .pivot-drop__glow { fill: var(--champagne); }
.pivot-drop__glow { opacity: 0; }
.wwd-section .is-landing { transform-box: fill-box; transform-origin: 50% 100%; animation: pivot-land 420ms var(--ease-out); }
@keyframes pivot-land { 0% { transform: scale(1.06, 0.9); } 55% { transform: scale(0.98, 1.03); } 100% { transform: none; } }
/* The words it passes on the way down sit above the falling triangle. */
.problem__lines li { position: relative; z-index: 6; }
.wwd, .wwd__readout, .wwd__steps { z-index: 6; }

/* Lenis (smooth scrolling on the home page) */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis [data-lenis-prevent] {
  overscroll-behavior: contain;
}

/* ---------- How we work: steps on a dimension line ---------- */

.steps {
  position: relative;
  margin-bottom: var(--s-5);
}

.steps__rule {
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: var(--line);
  background: var(--antique);
}

/* Arrowheads at both ends, like a dimension line. */
.steps__rule::before,
.steps__rule::after {
  content: "";
  position: absolute;
  left: -5px;
  width: 11px;
  height: 8px;
  background: var(--antique);
}

.steps__rule::before {
  top: -1px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.steps__rule::after {
  bottom: -1px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.steps__list {
  display: grid;
  gap: var(--s-5);
  padding-left: var(--s-6);
}

.step {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-2);
  max-width: 40ch;
}

/* Tick where each step meets the line. */
.step::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--s-6) - 2px);
  top: 0.95em;
  width: 16px;
  height: var(--line);
  background: var(--antique);
}

.step__name {
  font-size: var(--fs-title);
  font-stretch: var(--wdth-title);
  line-height: 1.25;
}

@media (min-width: 900px) {
  .steps__rule {
    left: 6px;
    right: 6px;
    top: 5px;
    bottom: auto;
    width: auto;
    height: var(--line);
  }

  .steps__rule::before,
  .steps__rule::after {
    top: -5px;
    left: auto;
    width: 8px;
    height: 11px;
  }

  .steps__rule::before {
    left: -1px;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
  }

  .steps__rule::after {
    right: -1px;
    bottom: auto;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }

  .steps__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--grid-gap);
    padding-left: 0;
    padding-top: var(--s-6);
  }

  .step::before {
    left: 0;
    top: calc(-1 * var(--s-6) - 2px);
    width: var(--line);
    height: 16px;
  }
}

/* ---------- Why it's safe ---------- */

.safety__grid {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-6);
}

.safety__subtitle {
  margin-bottom: var(--s-4);
  font-size: var(--fs-title);
  font-stretch: var(--wdth-title);
  line-height: 1.25;
}

.never-list {
  border-top: var(--line) solid var(--seam);
}

.never-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding-block: var(--s-3);
  color: var(--ivory);
  font-size: var(--fs-lead);
  line-height: 1.45;
}

.never-list .icon {
  margin-top: 0.15em;
  color: var(--sand);
}

.data-list {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

.data-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--smoke);
  border: var(--line) solid var(--seam);
  border-radius: var(--r-control);
}

.data-list p {
  color: var(--ivory);
}

@media (min-width: 900px) {
  .safety__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--grid-gap);
  }

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

  .safety__data {
    grid-column: 8 / span 5;
  }
}

/* ---------- Services and pricing ---------- */

.offers {
  display: grid;
  gap: var(--line);
  margin-bottom: var(--s-5);
  background: var(--seam);
  border: var(--line) solid var(--seam);
  border-radius: var(--r-panel);
  overflow: hidden;
}

.offer {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-4);
  background: var(--graphite);
}

.offer__name {
  font-size: var(--fs-title);
  font-stretch: var(--wdth-title);
  line-height: 1.25;
}

.offer__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
}

.money {
  color: var(--champagne);
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: 1.2;
}

.offer__term {
  font-size: var(--fs-label);
}

.money--inline {
  font-size: inherit;
  font-weight: 500;
}

@media (min-width: 640px) {
  .offers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .offers {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- Who we are ---------- */

.founders__grid {
  display: grid;
  gap: var(--s-6);
}

.founders__note {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--s-4);
}

.founders__lead {
  max-width: var(--measure-lead);
  color: var(--ivory);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.founders__note p:not(.founders__lead) {
  max-width: var(--measure);
}

.founders__people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.person__photo {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background: var(--smoke);
  border: var(--line) dashed var(--antique);
  border-radius: var(--r-control);
  overflow: hidden;
}

.person__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person__placeholder {
  padding: var(--s-2);
  color: var(--sand);
  font-size: var(--fs-label);
  text-align: center;
  word-break: break-all;
}

.person figcaption {
  display: grid;
  margin-top: var(--s-3);
}

.person__name {
  color: var(--ivory);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.person__role {
  font-size: var(--fs-label);
}

@media (min-width: 900px) {
  .founders__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--grid-gap);
    align-items: start;
  }

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

  .founders__people {
    grid-column: 8 / span 5;
  }
}

/* ---------- Closing call to action ---------- */

.closing__inner {
  display: grid;
  justify-items: start;
  gap: var(--s-5);
}

.closing__title {
  max-width: 18ch;
  font-size: var(--fs-headline);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.closing__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
}

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

.site-footer {
  background: var(--graphite);
  border-top: var(--line) solid var(--seam);
  padding-top: var(--s-7);
  font-size: 1rem;
}

.site-footer__grid {
  display: grid;
  gap: var(--s-5);
  padding-bottom: var(--s-6);
}

.site-footer__brand {
  display: grid;
  gap: var(--s-3);
  align-content: start;
}



.site-footer__brand a {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: var(--tap);
}

.site-footer__heading {
  margin-bottom: var(--s-2);
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 600;
  font-stretch: normal;
}

.site-footer a {
  color: var(--sand);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--ivory);
  text-decoration: underline;
}

.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

.site-footer address {
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.site-footer__base {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  padding-block: var(--s-4);
  font-size: var(--fs-label);
}

.site-footer__base::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: var(--line);
  background: var(--seam);
}

@media (min-width: 640px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
  }
}

/* ==========================================================================
   Inner pages
   ========================================================================== */

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

.page-hero {
  padding-block: clamp(var(--s-6), 2rem + 3vw, var(--s-8)) clamp(var(--s-6), 1.5rem + 4vw, var(--s-8));
  border-bottom: var(--line) solid var(--seam);
}

.page-hero__inner {
  display: grid;
  justify-items: start;
}

.page-hero__title {
  max-width: 20ch;
  font-size: var(--fs-headline);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.page-hero .lever {
  width: min(100%, 7em);
  font-size: var(--fs-headline);
}

.page-hero__lead {
  max-width: var(--measure-lead);
  margin-top: var(--s-4);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.page-hero__meta {
  margin-top: var(--s-4);
  font-size: var(--fs-label);
}

/* ---------- Shared blocks ---------- */

.stack {
  display: grid;
  gap: var(--s-4);
}

.measure {
  max-width: var(--measure);
}

.lead {
  max-width: var(--measure-lead);
  color: var(--ivory);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.subhead {
  font-size: var(--fs-title);
  font-stretch: var(--wdth-title);
  line-height: 1.25;
}

.split {
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--grid-gap);
  }

  .split__main {
    grid-column: 1 / span 7;
  }

  .split__side {
    grid-column: 9 / span 4;
  }
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--smoke);
  border: var(--line) solid var(--seam);
  border-radius: var(--r-control);
  color: var(--ivory);
}

.notice .icon {
  margin-top: 0.15em;
}

.tick-list {
  display: grid;
  gap: var(--s-3);
}

.tick-list li {
  position: relative;
  padding-left: var(--s-5);
  color: var(--ivory);
}

.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 16px;
  height: var(--line);
  background: var(--antique);
}

.closing-note {
  max-width: var(--measure-lead);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

/* ---------- Tables that stack on phones ---------- */

.table {
  width: 100%;
  font-size: var(--fs-body);
}

.table caption {
  margin-bottom: var(--s-3);
  text-align: left;
}

.table th,
.table td {
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  text-align: left;
  vertical-align: top;
}

.table thead th {
  color: var(--sand);
  font-size: var(--fs-label);
  font-weight: 600;
  border-bottom: var(--line) solid var(--antique);
}

.table tbody th {
  color: var(--ivory);
  font-weight: 600;
}

.table tbody tr + tr > * {
  border-top: var(--line) solid var(--seam);
}

@media (max-width: 639px) {
  .table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .table--stack,
  .table--stack tbody,
  .table--stack tr,
  .table--stack th,
  .table--stack td {
    display: block;
  }

  .table--stack tr {
    padding-block: var(--s-3);
  }

  .table--stack tbody tr + tr {
    border-top: var(--line) solid var(--seam);
  }

  .table--stack tbody tr + tr > * {
    border-top: 0;
  }

  .table--stack th,
  .table--stack td {
    padding: var(--s-1) 0;
  }

  .table--stack td::before {
    content: attr(data-label);
    display: block;
    color: var(--sand);
    font-size: var(--fs-label);
    font-weight: 600;
  }
}

/* ---------- Policy and long-form text ---------- */

.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: var(--s-3);
}

.prose h2 {
  margin-top: var(--s-6);
  font-size: var(--fs-title);
  font-stretch: var(--wdth-title);
  line-height: 1.25;
}

.prose h2 + * {
  margin-top: var(--s-3);
}

.prose ul,
.prose ol {
  display: grid;
  gap: var(--s-2);
  padding-left: var(--s-5);
}

.prose ul {
  list-style: none;
}

.prose ul li {
  position: relative;
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--s-5));
  top: 0.8em;
  width: 12px;
  height: var(--line);
  background: var(--antique);
}

.prose ol {
  list-style: decimal;
}

.prose strong {
  color: var(--ivory);
  font-weight: 600;
}

.prose .table {
  margin-block: var(--s-4);
}

/* ---------- FAQ (native details, works without JS) ---------- */

.faq {
  max-width: var(--measure);
  margin-top: var(--s-6);
  border-bottom: var(--line) solid var(--seam);
}

.faq__item {
  border-top: var(--line) solid var(--seam);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 64px;
  padding-block: var(--s-3);
  color: var(--ivory);
  font-family: var(--f-display);
  font-size: var(--fs-title);
  font-stretch: var(--wdth-title);
  font-weight: 700;
  line-height: 1.25;
  list-style: none;
  cursor: pointer;
}

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

.faq__question .icon {
  color: var(--sand);
}

.faq__answer {
  padding-bottom: var(--s-4);
}

.faq__answer p {
  max-width: 62ch;
}

/* ---------- Diagram: the eight-step RFQ flow ----------
   One continuous drawn line with eight stations, read top to bottom at every width.
   From 900px each station is a row: name on the left, what happens on the right. */

.flow {
  position: relative;
  display: grid;
  gap: var(--s-2);
  max-width: 64rem;
  padding-left: 48px;
}

.flow::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 24px;
  bottom: 24px;
  width: var(--line);
  background: var(--antique);
}

.flow__step {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-2);
  padding-block: var(--s-3);
}

/* Station tick: from the line to the step. */
.flow__step::before {
  content: "";
  position: absolute;
  left: -24px;
  top: calc(var(--s-3) + 12px);
  width: 16px;
  height: var(--line);
  background: var(--antique);
}

.flow__step > .marker {
  position: absolute;
  left: -48px;
  top: var(--s-3);
  background: var(--graphite);
}

.flow__name {
  color: var(--ivory);
  font-weight: 600;
}

.flow__note {
  justify-self: start;
}

/* Station 6, the approval step, carries the page's point. */
.flow__step--key {
  padding-inline: var(--s-3);
  margin-inline-start: calc(-1 * var(--s-3));
  background: var(--smoke);
  border: var(--line) solid var(--antique);
  border-radius: var(--r-control);
}

.flow__step--key::before {
  left: calc(-24px + var(--s-3) - 1px);
  width: calc(16px - var(--s-3) + 1px);
}

.flow__step--key > .marker {
  left: calc(-48px + var(--s-3) - 1px);
  border-color: var(--ivory);
  background: var(--ivory);
  color: var(--carbon);
}

@media (min-width: 900px) {
  .flow__step {
    grid-template-columns: 16rem minmax(0, 1fr);
    column-gap: var(--s-5);
    align-items: baseline;
  }

  .flow__step .flow__note {
    grid-column: 2;
  }
}

/* ---------- Media placeholders ---------- */

.media-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  background: var(--smoke);
  border: var(--line) dashed var(--antique);
  border-radius: var(--r-panel);
  overflow: hidden;
}

.media-frame--video {
  aspect-ratio: 16 / 9;
}

.media-frame--calendar {
  min-height: 30rem;
}

.book-steps {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding-left: 1.25em;
  color: var(--ivory);
}

.media-frame > .tag {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
}

.media-frame__label {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4);
  text-align: center;
}

.media-frame__label .mono {
  color: var(--ivory);
  font-size: var(--fs-label);
  word-break: break-all;
}

.media-frame__label span:not(.mono) {
  font-size: var(--fs-label);
}

.callouts {
  display: grid;
  gap: var(--s-3);
}

.callouts li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}

.callouts strong {
  display: block;
  color: var(--ivory);
  font-weight: 600;
}

/* ---------- Calculator ---------- */

.calc {
  display: grid;
  gap: var(--s-5);
}

.calc__form {
  display: grid;
  gap: var(--s-4);
  align-content: start;
}

.calc__result {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-4);
  background-color: var(--smoke);
  border: var(--line) solid var(--seam);
  border-radius: var(--r-panel);
}

.calc__label {
  color: var(--ivory);
  font-weight: 600;
}

.calc__figure {
  color: var(--champagne);
  font-family: var(--f-mono);
  font-size: var(--fs-headline);
  font-weight: 500;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.calc__figure[data-empty] {
  color: var(--sand);
  font-family: var(--f-body);
  font-size: var(--fs-title);
  font-weight: 400;
}

.calc__fulcrum {
  position: relative;
  width: min(100%, 9em);
  height: 28px;
  font-size: var(--fs-headline);
}

.calc__fulcrum .lever__beam {
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--antique);
}

.calc__working {
  color: var(--sand);
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}

.calc__follow {
  display: grid;
  justify-items: start;
  gap: var(--s-4);
  margin-top: var(--s-5);
}

@media (min-width: 900px) {
  .calc {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--grid-gap);
  }

  .calc__form {
    grid-column: 1 / span 5;
  }

  .calc__result {
    grid-column: 7 / span 6;
    padding: var(--s-6) var(--s-5);
  }
}

/* ---------- Form fields ---------- */

.field {
  display: grid;
  gap: var(--s-2);
}

.field__label {
  color: var(--ivory);
  font-weight: 600;
}

.field__hint {
  font-size: var(--fs-label);
  line-height: 1.5;
}

.field__input {
  width: 100%;
  min-height: 48px;
  padding: 10px var(--s-3);
  background: var(--smoke);
  border: var(--line) solid var(--antique);
  border-radius: var(--r-control);
  color: var(--ivory);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.4;
  caret-color: var(--champagne);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.field__input::placeholder {
  color: var(--sand);
  opacity: 1;
}

.field__input:hover {
  border-color: var(--ivory);
}

.field__input:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 2px;
  border-color: var(--ivory);
}

.field__input--number {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

textarea.field__input {
  min-height: 144px;
  resize: vertical;
}

.field__prefix {
  position: relative;
}

.field__prefix > span {
  position: absolute;
  left: var(--s-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--sand);
  font-family: var(--f-mono);
  pointer-events: none;
}

.field__prefix .field__input {
  padding-left: calc(var(--s-3) + 1.2ch);
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  color: var(--error);
  font-size: var(--fs-label);
  line-height: 1.5;
}

.field__error[hidden] {
  display: none;
}

.field__error .icon {
  width: 18px;
  height: 18px;
  margin-top: 0.1em;
}

.field__input[aria-invalid="true"] {
  border-color: var(--error);
}

.form {
  display: grid;
  gap: var(--s-4);
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.form__status {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: var(--line) solid currentColor;
  border-radius: var(--r-control);
  line-height: 1.5;
}

.form__status[hidden] {
  display: none;
}

.form__status--success {
  color: var(--ok);
}

.form__status--error {
  color: var(--error);
}

.form__status p {
  color: var(--ivory);
}

.form__status strong {
  display: block;
  font-weight: 600;
}

.btn[aria-busy="true"] {
  cursor: progress;
  opacity: 0.8;
}

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

.contact-card {
  display: grid;
  gap: var(--s-4);
  align-content: start;
}

.contact-details {
  display: grid;
  gap: var(--s-3);
}

.contact-details > div {
  display: grid;
  gap: 2px;
}

.contact-details dt {
  color: var(--sand);
  font-size: var(--fs-label);
  font-weight: 600;
}

.contact-details dd {
  color: var(--ivory);
  overflow-wrap: anywhere;
}

/* ---------- Pricing detail ---------- */

.offer-detail {
  display: grid;
  gap: var(--line);
  background: var(--seam);
  border: var(--line) solid var(--seam);
  border-radius: var(--r-panel);
  overflow: hidden;
}

.offer-card {
  display: grid;
  align-content: start;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-4);
  background: var(--carbon);
}

.offer-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
}

.offer-card__price .money {
  font-size: var(--fs-headline);
}

.offer-card dl {
  display: grid;
  gap: var(--s-3);
}

.offer-card dt {
  color: var(--ivory);
  font-weight: 600;
}

.offer-card .tick-list li {
  color: var(--sand);
}

@media (min-width: 900px) {
  .offer-detail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .offer-card {
    padding: var(--s-6) var(--s-5);
  }
}

/* ---------- Payment options ---------- */

.pay {
  display: grid;
  gap: var(--grid-gap);
}

.pay__option {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-4);
  background: var(--smoke);
  border: var(--line) solid var(--seam);
  border-radius: var(--r-panel);
}

.pay__slot {
  display: grid;
  place-items: center;
  min-height: 96px;
  padding: var(--s-3);
  border: var(--line) dashed var(--antique);
  border-radius: var(--r-control);
  text-align: center;
}

.pay__slot .mono {
  color: var(--ivory);
  font-size: var(--fs-label);
  word-break: break-all;
}

.disclosure {
  border-top: var(--line) solid var(--seam);
}

.disclosure__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: var(--tap);
  color: var(--champagne);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

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

.disclosure__toggle .icon {
  transition: transform var(--dur-base) var(--ease-out);
}

.disclosure[open] .disclosure__toggle .icon {
  transform: rotate(180deg);
}

.bank-details {
  display: grid;
  gap: var(--s-2);
  padding-bottom: var(--s-2);
}

.bank-details > div {
  display: grid;
  gap: 2px;
}

.bank-details dt {
  font-size: var(--fs-label);
}

.bank-details dd {
  color: var(--ivory);
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  overflow-wrap: anywhere;
}

.pay__after {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-5);
}

.pay__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-5);
}

@media (min-width: 900px) {
  .pay {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pay__option {
    padding: var(--s-6) var(--s-5);
  }
}

/* ---------- Cells: hairline grid of short items ---------- */

.cells {
  display: grid;
  gap: var(--line);
  background: var(--seam);
  border: var(--line) solid var(--seam);
  border-radius: var(--r-panel);
  overflow: hidden;
}

.cell {
  display: grid;
  align-content: start;
  gap: var(--s-2);
  padding: var(--s-5) var(--s-4);
  background: var(--carbon);
}

.section--alt .cell {
  background: var(--graphite);
}



@media (min-width: 640px) {
  .cells {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cell:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ---------- Demo page: sample RFQs ---------- */

.rfq-samples {
  display: grid;
  gap: var(--s-6);
}

.rfq-sample {
  display: grid;
  gap: var(--line);
  background: var(--seam);
  border: var(--line) solid var(--seam);
  border-radius: var(--r-panel);
  overflow: hidden;
}

.rfq-sample__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--graphite);
}

.rfq-sample__head h3 {
  font-size: var(--fs-title);
  font-stretch: var(--wdth-title);
  line-height: 1.25;
}

.rfq-sample__stage {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--smoke);
  font-size: var(--fs-label);
  line-height: 1.5;
}

.rfq-sample__stage h4 {
  margin: 0;
  color: var(--ivory);
  font-family: var(--f-display);
  font-size: var(--fs-body);
  font-stretch: var(--wdth-title);
  font-weight: 700;
}

.rfq-sample__stage p,
.rfq-sample__stage dd {
  color: var(--ivory);
}

.confidence {
  display: grid;
  gap: var(--s-1);
}

.confidence > div {
  display: grid;
  grid-template-columns: 6.5em 1fr auto;
  gap: var(--s-2);
  align-items: baseline;
}

.confidence dt {
  color: var(--sand);
}

@media (max-width: 420px) {
  .confidence > div {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .confidence dt {
    grid-column: 1 / -1;
  }
}

.confidence .level {
  color: var(--sand);
  font-family: var(--f-mono);
}

.confidence .is-low {
  margin-inline: calc(-1 * var(--s-2));
  padding: 2px var(--s-2);
  border: var(--line) dashed var(--antique);
  border-radius: var(--r-tag);
}

.confidence .is-low .level {
  color: var(--ivory);
}

.quote-lines {
  display: grid;
  gap: var(--s-2);
}

.quote-lines > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
}

.quote-lines .rule {
  display: block;
  color: var(--sand);
}

.quote-lines .num {
  color: var(--ivory);
  white-space: nowrap;
}

.quote-lines .total {
  padding-top: var(--s-2);
  border-top: var(--line) solid var(--seam);
}

.quote-lines .total .num {
  color: var(--champagne);
}

@media (min-width: 900px) {
  .rfq-sample {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rfq-sample__head {
    grid-column: 1 / -1;
  }
}

/* ---------- Spec list: hairline-ruled rows, statement beside its title ---------- */

.spec-list {
  max-width: 64rem;
  border-bottom: var(--line) solid var(--seam);
}

.spec-list__row {
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-4);
  border-top: var(--line) solid var(--seam);
}

.spec-list dt {
  color: var(--ivory);
  font-family: var(--f-display);
  font-size: var(--fs-title);
  font-stretch: var(--wdth-title);
  font-weight: 700;
  line-height: 1.25;
}

.spec-list dd {
  max-width: var(--measure);
}

@media (min-width: 900px) {
  .spec-list__row {
    grid-template-columns: 22rem minmax(0, 1fr);
    column-gap: var(--s-5);
    align-items: baseline;
  }
}

/* ---------- 404 ---------- */

.not-found-links {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-5);
}

/* ==========================================================================
   Interface motion (transitions.dev recipes, adapted to the brief)
   150-250ms, one easing curve, no blur (the brief bans blurs), and every
   state is fully visible without JavaScript or with reduced motion.
   ========================================================================== */

:root {
  /* Recipe variables mapped onto the site's own motion tokens. */
  --dropdown-open-dur: var(--dur-slow);
  --dropdown-close-dur: var(--dur-fast);
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: var(--ease-out);

  --panel-distance: 8px;

  --acc-expand: var(--dur-slow);
  --acc-collapse: var(--dur-slow);
  --acc-chevron: var(--dur-slow);
  --acc-ease: var(--ease-out);

  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 70ms;
  --shake-dur-b: 50ms;
  --shake-ease: var(--ease-out);

  --toast-open: var(--dur-slow);
  --toast-close: var(--dur-fast);
  --toast-distance: 16px;
  --toast-scale: 0.97;
  --toast-ease: var(--ease-out);
}

/* ---------- Solutions dropdown (menu-dropdown recipe, desktop) ---------- */

@media (min-width: 900px) {
  .js .t-dropdown {
    display: block;
    visibility: hidden;
    transform-origin: top left;
    transform: scale(var(--dropdown-pre-scale));
    opacity: 0;
    pointer-events: none;
    transition:
      transform var(--dropdown-open-dur) var(--dropdown-ease),
      opacity var(--dropdown-open-dur) var(--dropdown-ease),
      visibility 0s linear 0s;
    will-change: transform, opacity;
  }

  .js .t-dropdown.is-open {
    visibility: visible;
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
    transition:
      transform var(--dropdown-open-dur) var(--dropdown-ease),
      opacity var(--dropdown-open-dur) var(--dropdown-ease),
      visibility 0s linear 0s;
  }

  .js .t-dropdown.is-closing {
    visibility: visible;
    transform: scale(var(--dropdown-closing-scale));
    opacity: 0;
    pointer-events: none;
    transition:
      transform var(--dropdown-close-dur) var(--dropdown-ease),
      opacity var(--dropdown-close-dur) var(--dropdown-ease);
  }
}

/* ---------- Mobile menu panel (panel reveal, without the blur) ---------- */

@keyframes t-panel-in {
  from { opacity: 0; transform: translateY(calc(-1 * var(--panel-distance))); }
  to { opacity: 1; transform: none; }
}

@keyframes t-panel-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(calc(-1 * var(--panel-distance))); }
}

@media (max-width: 899px) {
  .js .site-header.is-open .nav {
    animation: t-panel-in var(--dropdown-open-dur) var(--dropdown-ease);
  }

  .js .site-header.is-closing .nav {
    animation: t-panel-out var(--dropdown-close-dur) var(--dropdown-ease) forwards;
  }
}

/* ---------- FAQ accordion (accordion recipe on native details, without the blur) ---------- */

.js .t-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
}

.js .t-acc[data-open="true"] .t-acc-panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
}

.js .t-acc-panel-inner {
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--acc-collapse) var(--acc-ease);
}

.js .t-acc[data-open="true"] .t-acc-panel-inner {
  opacity: 1;
  transition: opacity var(--acc-expand) var(--acc-ease);
}

.t-acc-chevron {
  transform: scaleY(1);
  transform-origin: center;
  transition: transform var(--acc-chevron) var(--acc-ease);
}

.t-acc-chevron path {
  vector-effect: non-scaling-stroke;
}

.t-acc[data-open="true"] .t-acc-chevron,
html:not(.js) .t-acc[open] .t-acc-chevron {
  transform: scaleY(-1);
}

/* ---------- Form feedback (error-state-shake recipe, 240ms, no auto-revert) ---------- */

.field__input.is-shaking {
  animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear;
}

@keyframes t-input-shake {
  0%      { transform: translateX(0); animation-timing-function: var(--shake-ease); }
  29.17%  { transform: translateX(var(--shake-distance)); animation-timing-function: var(--shake-ease); }
  50%     { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
  79.17%  { transform: translateX(var(--shake-overshoot)); animation-timing-function: var(--shake-ease); }
  100%    { transform: translateX(0); }
}

@keyframes t-rise-in {
  from { opacity: 0; transform: translateY(var(--panel-distance)); }
  to { opacity: 1; transform: none; }
}

@keyframes t-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.field__error:not([hidden]) {
  animation: t-fade-in var(--dur-fast) var(--ease-out);
}

.form__status:not([hidden]) {
  animation: t-rise-in var(--dur-slow) var(--ease-out);
}

/* ---------- Toast (toast recipe, without the blur) ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-skip);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  max-width: calc(100vw - 2 * var(--gutter));
  padding: var(--s-2) var(--s-3);
  background: var(--smoke);
  border: var(--line) solid var(--antique);
  border-radius: var(--r-control);
  color: var(--ivory);
  font-weight: 600;
  pointer-events: none;
  translate: -50% 0;
}

.toast .icon {
  color: var(--ok);
}

.t-toast {
  opacity: 0;
  transform: translateY(var(--toast-distance)) scale(var(--toast-scale));
  will-change: transform, opacity;
  transition:
    opacity var(--toast-close) var(--toast-ease),
    transform var(--toast-close) var(--toast-ease);
}

.t-toast.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity var(--toast-open) var(--toast-ease),
    transform var(--toast-open) var(--toast-ease);
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: var(--tap);
  padding: 0 var(--s-2);
  margin-left: var(--s-2);
  background: none;
  border: var(--line) solid var(--seam);
  border-radius: var(--r-control);
  color: var(--ivory);
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.copy-btn:hover {
  border-color: var(--antique);
  background: var(--graphite);
}

.copy-btn .icon {
  width: 16px;
  height: 16px;
}

.bank-details dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) 0;
}

@media (prefers-reduced-motion: reduce) {
  .js .t-dropdown,
  .t-acc-panel,
  .t-acc-panel-inner,
  .t-acc-chevron,
  .t-toast {
    transition: none !important;
  }

  .field__input,
  .js .site-header .nav,
  .field__error,
  .form__status {
    animation: none !important;
    transform: none !important;
  }
}

/* ---------- Home motion: motto reveal, quote build, section hinges, hero lever (js/home-motion.js, js/quote-card.js, js/hero-lever.js) ---------- */

.motion-pending .hero__lines {
  opacity: 0;
}

.hero__word {
  display: inline-block;
}

/* The draggable lever (js/hero-lever.js) replaces the static logo lever. Reserve its exact box so nothing
   shifts when it arrives; if the script never runs, the static lever shows after two seconds. */
.js .hero__fulcrum {
  width: min(100%, 400px);
  height: auto;
  aspect-ratio: 2 / 1;
  margin-bottom: 54px;
  visibility: hidden;
  animation: hl-fallback 0s linear 2s forwards;
}

@keyframes hl-fallback {
  to { visibility: visible; }
}

/* ---------- Quote builds itself ---------- */
.qb .sample__region {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
}
.qb .sample__region.is-in { opacity: 1; transform: none; }
.qb .sample__region.is-in .marker { animation: qb-mark 520ms var(--ease-out) both; }
.qb .sample__price tbody tr,
.qb .sample__price tfoot tr { opacity: 0; transition: opacity 260ms var(--ease-out); }
.qb .is-in .sample__price tr { opacity: 1; }
.qb .is-in .sample__price tbody tr:nth-child(2) { transition-delay: 90ms; }
.qb .is-in .sample__price tbody tr:nth-child(3) { transition-delay: 180ms; }
.qb .is-in .sample__price tbody tr:nth-child(4) { transition-delay: 270ms; }
.qb .is-in .sample__price tfoot tr { transition-delay: 400ms; }
.qb .sample__decision.is-in .sample__btn--approve { animation: qb-wait 1400ms ease-in-out 450ms 2 both; }
.qb .sample__legend li { opacity: 0; transition: opacity 300ms var(--ease-out); }
.qb .sample__legend li.is-in { opacity: 1; }
@keyframes qb-mark {
  0% { transform: scale(0.6); border-color: var(--champagne); color: var(--champagne); }
  60% { border-color: var(--champagne); color: var(--champagne); }
  100% { transform: scale(1); }
}
@keyframes qb-wait {
  0%, 100% { border-color: var(--ivory); color: var(--ivory); }
  50% { border-color: var(--champagne); color: var(--champagne); }
}


/* ---------- Section hinges ---------- */
.has-hinge { position: relative; }
.hinges-on .section--alt { border-block-color: transparent; }
.hinges-on .site-footer { border-top-color: transparent; }
.hinge { position: absolute; left: 0; right: 0; top: -1px; height: 10px; pointer-events: none; z-index: 1; }
.hinge__line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--seam); transform-origin: 50% 50%; transition: background-color var(--dur-slow) var(--ease-out); }
.hinge.is-level .hinge__line { background: var(--antique); }
.hinge__tri { position: absolute; left: 50%; top: 1px; width: 12px; height: 9px; margin-left: -6px; overflow: visible; fill: var(--champagne); stroke: var(--antique); stroke-width: 1; stroke-linejoin: round; }


/* ---------- Interactive quote ---------- */
.qx-btn { min-height: 44px; font: inherit; font-weight: 600; background: transparent; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.qx-btn:hover:not(:disabled) { border-color: var(--sand); color: var(--ivory); }
.qx-btn.sample__btn--approve:hover:not(:disabled) { border-color: var(--champagne); color: var(--champagne); }
.qx-btn:active:not(:disabled) { transform: translateY(1px); }
.qx-btn:disabled { cursor: default; opacity: 0.6; }
.qx-btn.is-sending { opacity: 1; border-color: var(--champagne); color: var(--champagne); }
.qx-confirm { flex-basis: 100%; margin: 0 0 2px; color: var(--ivory); font-size: var(--fs-label); }
.qx-resolved { color: var(--ivory) !important; }
.qx-flag-done { border-style: solid; }
.qx-edited::after { content: "Edited"; position: absolute; right: 44px; top: 12px; font: var(--fs-label) var(--f-mono); color: var(--sand); border: 1px solid var(--seam); border-radius: var(--r-tag); padding: 0 6px; }
.sample__total.qx-changed { animation: qx-flash 700ms var(--ease-out); }
@keyframes qx-flash { 0% { color: var(--ivory); } 100% { color: var(--champagne); } }
.qx-status { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; background: var(--smoke); border-radius: inherit; opacity: 0; visibility: hidden; transition: opacity 220ms var(--ease-out), visibility 0s linear 220ms; }
.qx-status.is-on { opacity: 1; visibility: visible; transition: opacity 220ms var(--ease-out); }
.qx-icon { width: 56px; height: 56px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.qx-icon circle { stroke: var(--antique); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.qx-icon path { stroke: var(--champagne); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; display: none; }
.is-sent .qx-tick, .is-back .qx-back { display: block; }
.qx-status.is-on .qx-icon circle { animation: qx-draw 450ms var(--ease-out) 80ms forwards; }
.qx-status.is-on .qx-icon path { animation: qx-draw 360ms var(--ease-out) 420ms forwards; }
.qx-status__title { margin: 0; color: var(--ivory); font: 600 18px/1.3 var(--f-body); }
.qx-status__sub { margin: 0; max-width: 34ch; color: var(--sand); font-size: var(--fs-label); }
.qx-status.is-on .qx-status__title, .qx-status.is-on .qx-status__sub { animation: qx-rise 300ms var(--ease-out) 520ms both; }
@keyframes qx-draw { to { stroke-dashoffset: 0; } }
@keyframes qx-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.qx-reset .sample__region, .qx-reset .sample__region *, .qx-reset .sample__legend li { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .qx-icon circle, .qx-icon path { stroke-dashoffset: 0; animation: none !important; }
  .qx-status, .qx-status.is-on, .qx-status__title, .qx-status__sub { transition: none; animation: none !important; }
}


/* ---------- Quote edit mode ---------- */
.qx-editing .sample__bar::after { content: "Editing"; margin-left: 8px; font: 500 var(--fs-label) var(--f-mono); color: var(--ivory); border: 1px solid var(--antique); border-radius: var(--r-tag); padding: 0 6px; }
.qx-editing .sample__region--flag { background: var(--graphite); }
.qx-step { display: inline-flex; align-items: stretch; border: 1px solid var(--antique); border-radius: var(--r-control); overflow: hidden; background: var(--carbon); }
.qx-step__btn { width: 44px; min-height: 44px; font: 500 18px/1 var(--f-mono); color: var(--ivory); background: transparent; border: 0; cursor: pointer; }
.qx-step__btn:hover { background: var(--smoke); color: var(--champagne); }
.qx-step__input { width: 7ch; text-align: center; font: 500 15px var(--f-mono); color: var(--ivory); background: transparent; border: 0; border-inline: 1px solid var(--seam); }
.qx-step__btn:focus-visible, .qx-step__input:focus-visible, .qx-chip:focus-visible { outline: 2px solid var(--champagne); outline-offset: -2px; }
.qx-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.qx-chip { min-height: 44px; padding: 0 14px; font: 600 var(--fs-label) var(--f-body); color: var(--sand); background: var(--carbon); border: 1px solid var(--seam); border-radius: var(--r-control); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.qx-chip:hover { border-color: var(--sand); color: var(--ivory); }
.qx-chip[aria-pressed="true"] { border-color: var(--champagne); color: var(--champagne); }
.qx-was { display: block; font: 400 var(--fs-label) var(--f-mono); color: var(--sand); text-decoration: line-through; text-decoration-color: var(--seam); }
.qx-editing .sample__fields > div { align-items: center; }


/* ---------- Hero lever (draggable) ---------- */
.hl { width: min(100%, 400px); margin-top: var(--s-2); display: grid; gap: 4px; }
.hl__stage { position: relative; width: 100%; aspect-ratio: 2 / 1; cursor: grab; touch-action: pan-y; border-radius: var(--r-panel); -webkit-user-select: none; user-select: none; }
.hl.is-dragging .hl__stage { cursor: grabbing; }
.hl__stage:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }
.hl__stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.hl-ground { stroke: var(--seam); stroke-width: 1.5; }
.hl-bar { fill: var(--ivory); }
.hl-tick { stroke: var(--antique); stroke-width: 1; }
.hl-tri { fill: var(--champagne); stroke: var(--antique); stroke-width: 1.2; stroke-linejoin: round; transition: fill var(--dur-fast) var(--ease-out); }
.hl-grip line { stroke: var(--carbon); stroke-width: 1.4; stroke-linecap: round; opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.hl.is-ready .hl-grip line { opacity: 0.55; }
.hl.is-dragging .hl-tri { fill: var(--ivory); }
.hl-load { fill: var(--graphite); stroke: var(--antique); stroke-width: 1; }
.hl-label, .hl-call text { fill: var(--sand); font-family: var(--f-mono); }
.hl-dim line, .hl-call circle, .hl-call polyline { stroke: var(--antique); stroke-width: 1.2; fill: none; }
.hl-dim path { fill: var(--antique); }
.hl-dim { transition: opacity var(--dur-base) var(--ease-out); }
.hl-call { opacity: 0; transition: opacity 260ms var(--ease-out); }
.hl-call.is-on { opacity: 1; }
.hl__hint { margin: 0; font: var(--fs-label) var(--f-mono); color: var(--sand); opacity: 0; transition: opacity 300ms var(--ease-out); }
.hl.is-ready .hl__hint { opacity: 1; animation: hl-hint 2.4s ease-in-out 0.6s 2; }
.hl.is-touched .hl__hint { opacity: 0; animation: none; }
@keyframes hl-hint { 0%, 100% { transform: none; } 50% { transform: translateX(6px); } }
.hl__caption { margin: 0; min-height: 1.5em; font: 300 19px/1.4 var(--f-body); color: var(--sand); opacity: 0; transform: translateY(4px); transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); }
.hl__caption.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hl__caption, .hl-call, .hl-dim { transition: none; transform: none; }
  .hl.is-ready .hl__hint { animation: none; }
}
.hl__hint { height: 18px; line-height: 18px; }
.hl__caption { min-height: 28px; line-height: 28px; }

/* ---------- Captions, labels and metadata (dust: on carbon or graphite only) ---------- */

.page-hero__meta,
.field__hint,
.offer__term,
.person__role,
.site-footer__base,
.sample__note,
.sample__legend li {
  color: var(--dust);
}

/* ==========================================================================
   Logo animation (ported from assets/logo/fulxrum-animated-*.html)
   Same paths and motion idea as the source: the tile appears, the fulcrum
   rises, the beam drops onto it and tips to -9deg, the wordmark wipes in and
   the fulcrum under the x rises. Retimed from a 7s loop to one 1.15s pass.
   The resting state IS the static logo: no JS, reduced motion, or a finished
   animation all show exactly that frame.
   ========================================================================== */

:root {
  --logo-enter: 400ms;
  --logo-tilt: 450ms;
  --logo-wipe: 550ms;
  --logo-ease-tilt: cubic-bezier(0.65, 0, 0.35, 1);
}

.logo-anim {
  display: block;
  overflow: visible;
  fill: none;
}

.la-tile {
  fill: var(--smoke);
  stroke: var(--seam);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.la-tri,
.la-xtri {
  fill: var(--champagne);
}

.la-beam,
.la-letters {
  fill: var(--ivory);
}

/* Transform origins in the mark's own 200 x 200 coordinates. */
.la-tile,
.la-tri,
.la-xtri {
  transform-box: fill-box;
}

.la-tile {
  transform-origin: 50% 50%;
}

.la-tri,
.la-xtri {
  transform-origin: 50% 100%;
}

.la-pivot {
  transform-box: view-box;
  transform-origin: 133.4px 102.1px;
  transform: rotate(-9deg);
}

.la-word {
  clip-path: inset(-10% 0 -10% 0);
}

/* Load-triggered logos animate from CSS alone (no flash, no script dependency): the head sets
   .js before first paint. View-triggered logos are armed by js/logo.js and wait, paused on their
   first frame, until they scroll into view. Without JS or with reduced motion: the static frame. */
.js .logo-anim:is([data-logo-anim="load"]:not(.is-reset), .is-armed) * {
  animation-fill-mode: both;
}

.logo-anim.is-armed:not(.is-playing) * {
  animation-play-state: paused;
}

@keyframes la-tile-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes la-rise {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes la-drop {
  from { transform: translateY(-120px); }
  to { transform: none; }
}

@keyframes la-tilt {
  from { transform: rotate(0deg); }
  to { transform: rotate(-9deg); }
}

@keyframes la-wipe {
  from { clip-path: inset(-10% 100% -10% 0); }
  to { clip-path: inset(-10% 0 -10% 0); }
}

/* Full sequence: lockup (mark + wordmark) and mark. Ends at 1.15s. */
.js .logo-anim:is([data-logo-anim="load"]:not(.is-reset), .is-armed) .la-tile   { animation: la-tile-in var(--logo-enter) var(--ease-out) 0ms both; }
.js .logo-anim:is([data-logo-anim="load"]:not(.is-reset), .is-armed) .la-tri    { animation: la-rise var(--logo-enter) var(--ease-out) 150ms both; }
.js .logo-anim:is([data-logo-anim="load"]:not(.is-reset), .is-armed) .la-beam   { animation: la-drop var(--logo-enter) var(--ease-out) 300ms both; }
.js .logo-anim:is([data-logo-anim="load"]:not(.is-reset), .is-armed) .la-pivot  { animation: la-tilt var(--logo-tilt) var(--logo-ease-tilt) 650ms both; }
.js .logo-anim:is([data-logo-anim="load"]:not(.is-reset), .is-armed) .la-word   { animation: la-wipe var(--logo-wipe) var(--ease-out) 400ms both; }
.js .logo-anim:is([data-logo-anim="load"]:not(.is-reset), .is-armed) .la-xtri   { animation: la-rise var(--logo-enter) var(--ease-out) 750ms both; }

/* Short version for the header wordmark: wipe then the x fulcrum. Ends at 800ms. */
.js .logo-anim--short:is([data-logo-anim="load"]:not(.is-reset), .is-armed) .la-word { animation: la-wipe 500ms var(--ease-out) 0ms both; }
.js .logo-anim--short:is([data-logo-anim="load"]:not(.is-reset), .is-armed) .la-xtri { animation: la-rise var(--logo-enter) var(--ease-out) 400ms both; }

/* Footer dock: the end of the story only (tilt and the x fulcrum), about 700ms. */
.js .logo-anim--dock:is([data-logo-anim="load"]:not(.is-reset), .is-armed) .la-tile,
.js .logo-anim--dock:is([data-logo-anim="load"]:not(.is-reset), .is-armed) .la-tri,
.js .logo-anim--dock:is([data-logo-anim="load"]:not(.is-reset), .is-armed) .la-beam,
.js .logo-anim--dock:is([data-logo-anim="load"]:not(.is-reset), .is-armed) .la-word { animation: none; }
.js .logo-anim--dock:is([data-logo-anim="load"]:not(.is-reset), .is-armed) .la-pivot { animation: la-tilt var(--logo-tilt) var(--logo-ease-tilt) 0ms both; }
.js .logo-anim--dock:is([data-logo-anim="load"]:not(.is-reset), .is-armed) .la-xtri  { animation: la-rise var(--logo-enter) var(--ease-out) 300ms both; }

/* 404: the lever tips over, then rights itself to its resting -9deg. About 1.1s. */
@keyframes la-tip {
  0% { transform: rotate(-9deg); }
  35% { transform: rotate(-38deg); }
  70% { transform: rotate(-5deg); }
  100% { transform: rotate(-9deg); }
}

.js .logo-anim--tip:is([data-logo-anim="load"]:not(.is-reset), .is-armed) .la-tile,
.js .logo-anim--tip:is([data-logo-anim="load"]:not(.is-reset), .is-armed) .la-tri,
.js .logo-anim--tip:is([data-logo-anim="load"]:not(.is-reset), .is-armed) .la-beam { animation: none; }
.js .logo-anim--tip:is([data-logo-anim="load"]:not(.is-reset), .is-armed) .la-pivot { animation: la-tip 1100ms var(--logo-ease-tilt) 200ms both; }

/* Header hover and focus: the fulcrum under the x lifts slightly and settles. */
.site-header__logo .la-xtri {
  transition: transform var(--dur-slow) var(--ease-out);
}

.site-header__logo:hover .la-xtri,
.site-header__logo:focus-visible .la-xtri {
  transform: translateY(-6%);
}

@media (prefers-reduced-motion: reduce) {
  .logo-anim *,
  .js .logo-anim * {
    animation: none !important;
  }

  .site-header__logo .la-xtri {
    transition: none;
    transform: none !important;
  }
}

/* ---------- Logo placements ---------- */

.site-header__mark {
  width: 118px;
  height: auto;
}

.site-footer__mark {
  width: 189px;
  height: auto;
}

.hero__fulcrum {
  width: clamp(104px, 8vw + 40px, 132px);
  height: auto;
  margin-top: var(--s-2);
}

.notfound__mark {
  width: 120px;
  height: auto;
  margin-bottom: var(--s-5);
}

/* ---------- Reduced motion ---------- */

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