/* White Knights website styles.
   Layout: the logo drawn as a layout. On the home page the shield's two halves and the
   sword between them split visitors into the two audiences; every other section sits
   left-aligned on a 12-column grid with gold hairlines, espresso bands and generous white space.
   Palette = the logo's heraldic tinctures: argent (white field), or (gold shield), sable (sword). */

@font-face { font-family: "WK Display"; src: url("../fonts/big-shoulders-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "WK Display"; src: url("../fonts/big-shoulders-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "WK Text"; src: url("../fonts/plex-serif-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "WK Text"; src: url("../fonts/plex-serif-400i.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "WK Text"; src: url("../fonts/plex-serif-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "WK Text"; src: url("../fonts/plex-serif-700i.woff") format("woff"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  /* Color: argent, or, sable */
  --ground: #ffffff;        /* argent: the page */
  --ground-alt: #f4f3f0;    /* argent in shade: alternate sections */
  --ink: #201204;           /* sable: headings, buttons */
  --text: #3a2f25;          /* running text */
  --muted: #6b6058;         /* secondary text */
  --rule: #e6e1da;          /* hairlines */
  --rule-strong: #cfc7bc;
  --gold: #cb9143;          /* or: marks, rules, the shield */
  --gold-ink: #8b5e1f;      /* or, deep enough for text on argent */
  --gold-wash: rgba(203, 145, 67, 0.09);
  --gold-shine: linear-gradient(115deg, #7d531a 0%, #cb9143 16%, #f9e8bd 27%, #d9a75c 36%, #9c6a26 52%, #cb9143 64%, #f3d796 74%, #cb9143 84%, #7d531a 100%);   /* polished gold; see "Gold shine" */
  --sword: #201204;
  --band: #201204;          /* sable bands */
  --band-ink: #f4eee4;
  --band-text: #d9cfc1;
  --band-muted: #b7a994;
  --band-rule: #3e3226;
  --band-gold: #d9a75c;
  --column-shadow: rgba(32, 18, 4, 0.2);   /* around our column in the comparison table */
  --field: #ffffff;
  --field-border: #cfc7bc;
  --danger: #a33a2b;
  --success: #2f6b4a;

  /* Type: a condensed display face that echoes the wordmark, and an engineered serif for reading */
  --font-display: "WK Display", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-text: "WK Text", Georgia, "Times New Roman", serif;
  --step--1: 0.9375rem;     /* 15 */
  --step-0: 1.125rem;       /* 18 body */
  --step-1: 1.3125rem;      /* 21 lead */
  --step-2: 1.625rem;       /* 26 */
  --step-3: 2.125rem;       /* 34 */
  --step-4: clamp(2.25rem, 1.55rem + 2.4vw, 3.5rem);    /* 36 → 56 */
  --step-5: clamp(2.75rem, 1.5rem + 4.9vw, 5.25rem);    /* 44 → 84 */

  /* Layout */
  --page: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(48px, 5.5vw, 72px);   /* space above and below every section's content, hero included */
  --block: clamp(28px, 3.5vw, 44px);     /* section heading block to its content, and between blocks inside a section */
  --header-h: 76px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #17100a;
    --ground-alt: #1f170f;
    --ink: #f4eee4;
    --text: #e2d9cc;
    --muted: #b9ad9d;
    --rule: #382c21;
    --rule-strong: #4c3e30;
    --gold: #cb9143;
    --gold-ink: #d9a75c;
    --gold-wash: rgba(203, 145, 67, 0.12);
    --sword: #f4eee4;
    --band: #0e0905;
    --band-ink: #f4eee4;
    --band-text: #d9cfc1;
    --band-muted: #b7a994;
    --band-rule: #2e241b;
    --band-gold: #d9a75c;
    --column-shadow: rgba(203, 145, 67, 0.22);
    --field: #1f170f;
    --field-border: #4c3e30;
    --danger: #e58a7a;
    --success: #7cc39b;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #17100a;
  --ground-alt: #1f170f;
  --ink: #f4eee4;
  --text: #e2d9cc;
  --muted: #b9ad9d;
  --rule: #382c21;
  --rule-strong: #4c3e30;
  --gold: #cb9143;
  --gold-ink: #d9a75c;
  --gold-wash: rgba(203, 145, 67, 0.12);
  --sword: #f4eee4;
  --band: #0e0905;
  --band-ink: #f4eee4;
  --band-text: #d9cfc1;
  --band-muted: #b7a994;
  --band-rule: #2e241b;
  --band-gold: #d9a75c;
  --column-shadow: rgba(203, 145, 67, 0.22);
  --field: #1f170f;
  --field-border: #4c3e30;
  --danger: #e58a7a;
  --success: #7cc39b;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); line-height: 0.98; letter-spacing: -0.005em; }
h2 { font-size: var(--step-4); line-height: 1.02; }
h3, .h3 { font-size: var(--step-3); line-height: 1.08; }
h4, .h4 { font-size: var(--step-2); line-height: 1.12; }
h2.h3 { font-size: var(--step-3); }
h2.h4, h3.h4 { font-size: var(--step-2); }
p { margin: 0; }
a { color: inherit; }
::selection { background: var(--gold); color: #201204; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.lead { font-size: var(--step-1); line-height: 1.55; color: var(--text); max-width: 40em; }
.note { font-size: var(--step--1); color: var(--muted); max-width: 60em; }
.prose p + p { margin-top: 1em; }
.prose h2, .prose h3 { margin: 1.4em 0 0.4em; }
.prose > :first-child { margin-top: 0; }
.prose a, .note a, .split__head a, .faq a, .form a, .footer__col a { text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover, .split__head a:hover, .faq a:hover, .form a:hover { color: var(--gold-ink); }
.prose--lead { font-size: var(--step-1); line-height: 1.55; }
.prose--page { max-width: 42em; }
.prose--page h2 { font-size: var(--step-2); }
.text-link {
  font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; letter-spacing: 0.01em;
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.text-link:hover { color: var(--gold-ink); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--ground); padding: 10px 16px;
  font-family: var(--font-display); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

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

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0.7em 1.4em;
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.1; letter-spacing: 0.015em;
  text-decoration: none; text-align: center;
  border: 2px solid var(--ink); border-radius: 0;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--primary { background: var(--ink); color: var(--ground); }
.btn--primary:hover { background: var(--gold); border-color: var(--gold); color: #201204; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--ground); }
.btn--small { min-height: 42px; padding: 0.45em 1em; font-size: 1.0625rem; }
button.btn { font: inherit; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  max-width: calc(var(--page) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter);
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; flex: none; }
.brand__emblem { width: 27px; height: 44px; display: block; }
.brand__wordmark { width: 152px; height: 17px; display: block; }
.wk-sword { fill: var(--sword); }
/* ---------- Gold shine ----------
   Polished gold whose highlights drift slowly across it: the emblem (its gradient is in the SVG, see components.js),
   the current page's menu underline, the top bar on the project tiles (on hover), and our column's frame in the comparison table. Shown at 300% and slid along. */
@keyframes gold-shine { to { background-position: 100% 100%; } }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; }
.site-nav ul a {
  font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; letter-spacing: 0.015em;
  color: var(--ink); text-decoration: none; padding-block: 6px;
  border-bottom: 2px solid transparent;
}
.site-nav ul a:hover { color: var(--gold-ink); }
.site-nav ul a[aria-current="page"] { position: relative; }
.site-nav ul a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--gold-shine) 0 0 / 300% 300%; animation: gold-shine 9s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .site-nav ul a[aria-current="page"]::after { animation: none; background-position: 40% 40%; } }
.nav-toggle {
  display: none; align-items: center; gap: 10px;
  background: none; border: 0; padding: 8px 0; cursor: pointer; color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 22px; height: 2px; background: currentColor; position: relative;
  transition: transform 0.2s ease;
}
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
  .site-nav ul { gap: 18px; }
  .site-nav { gap: 18px; }
}
@media (max-width: 880px) {
  .no-js .site-header__inner { flex-wrap: wrap; padding-block: 12px; }
  .no-js .site-nav { flex-wrap: wrap; }
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ground); border-bottom: 1px solid var(--rule);
    padding: 8px var(--gutter) 24px;
    box-shadow: 0 18px 30px -24px rgba(32, 18, 4, 0.35);
  }
  .js .site-nav.is-open { display: flex; }
  .js .site-nav ul { flex-direction: column; gap: 0; }
  .js .site-nav ul a { display: block; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 1.375rem; }
  .js .site-nav ul a[aria-current="page"] { color: var(--gold-ink); border-bottom-color: var(--rule); }
  .js .site-nav ul a[aria-current="page"]::after { display: none; }
  .js .site-nav__cta { margin-top: 20px; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
.section--alt { background: var(--ground-alt); }
/* A white section right after another white section: a hairline between them, as under the hero. */
.section--ruled { border-top: 1px solid var(--rule); }
.band { background: var(--band); color: var(--band-text); }
.band h2, .band h3 { color: var(--band-ink); }
.band .lead { color: var(--band-text); }
.section-head { max-width: 46rem; margin-bottom: var(--block); }
.section-head h2 + .lead { margin-top: 18px; }

.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px clamp(32px, 5vw, 72px); }
.split__head h2 + p { margin-top: 18px; }
.split__head p + p { margin-top: 16px; }
.split__head p { color: var(--muted); max-width: 26em; text-wrap: pretty; }
.split__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.split__body > p + p { margin-top: 16px; }
.split__links a { font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; color: var(--ink); }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Hero ---------- */
.hero { padding-block: var(--section); }
.hero__inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero__inner--left { text-align: left; align-items: flex-start; }
.hero__title { max-width: 13em; }
.hero h1 + .lead { margin-top: 24px; }
.hero__inner .lead { max-width: 38em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; justify-content: center; }
.hero__inner--left .hero__actions { justify-content: flex-start; }
.hero__where { margin-top: 22px; color: var(--muted); font-size: var(--step--1); font-style: italic; }
.hero--page { border-bottom: 1px solid var(--rule); }
.hero--page h1 { max-width: 15em; }
.hero--project h1 { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem); }
.hero--404 { border-bottom: 0; min-height: 50vh; }

/* ---------- The crest (home) ---------- */
.crest {
  --gap: 64px;
  --point: 132px;
  --hilt-h: 92px;
  --line: 4px;   /* shield outline */
  --blade: 22px; /* matches the grip in crestHilt() */
  --msp-w: 30.5rem; /* just wide enough for the MSP tagline on one line */
  --tip: calc(100% - var(--msp-w) - var(--gap) / 2); /* the sword's center line */
  position: relative;
  max-width: 1080px; margin: var(--section) auto 0;
  padding-top: var(--hilt-h);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--gap) minmax(0, var(--msp-w));
  grid-template-rows: repeat(4, auto) var(--point);
}
.crest__hilt {
  position: absolute; top: 0; left: var(--tip); transform: translateX(-50%);
  width: 200px; height: var(--hilt-h); z-index: 2;
}
.crest__half {
  border-top: var(--line) solid var(--gold);
  /* The four rows (title, tagline, text, link) are shared with the other half through
     subgrid, so headings and links line up and the gaps between rows are even. The extra
     bottom room keeps the text centered in the shield, whose point falls away below. */
  padding: 72px 28px 28px;
  display: grid; grid-template-rows: subgrid; row-gap: 26px;
  justify-items: center; text-align: center;
}
.crest__half--left { grid-column: 1; grid-row: 1 / span 4; border-left: var(--line) solid var(--gold); }
.crest__half--right { grid-column: 3; grid-row: 1 / span 4; border-right: var(--line) solid var(--gold); }
.crest__title { font-size: var(--step-4); line-height: 1; }
.crest__line { margin: 0; text-wrap: balance; font-size: var(--step-1); line-height: 1.4; color: var(--ink); font-style: italic; }
.crest__half--right .crest__line { white-space: nowrap; }
.crest__half p + p { margin-top: 0; color: var(--muted); font-size: 1.0625rem; }
.crest__link {
  align-self: start;
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.01em;
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.crest__link:hover { color: var(--gold-ink); }
.crest__blade {
  grid-column: 2; grid-row: 1 / -1; justify-self: center;
  width: var(--blade); margin-bottom: 38px;
  background: var(--sword);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 50% 100%, 0 calc(100% - 20px));
  transform-origin: top center;
  animation: blade-in 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
}
/* The shield's point: a gold chevron whose tip sits under the sword, not at the page center.
   It starts one line above the row so its ends join the side borders. */
.crest__point {
  grid-column: 1 / -1; grid-row: 5;
  height: calc(var(--point) + var(--line)); margin-top: calc(-1 * var(--line));
  background: var(--gold);
  clip-path: polygon(0 0, var(--tip) calc(100% - var(--line)), 100% 0, 100% var(--line), var(--tip) 100%, 0 var(--line));
}
@keyframes blade-in { from { transform: scaleY(0.04); } to { transform: scaleY(1); } }

@media (max-width: 1000px) {
  .crest__half--right .crest__line { white-space: normal; }
  .crest { display: flex; flex-direction: column; gap: 20px; padding-top: 0; margin-top: 48px; }
  .crest__hilt, .crest__blade, .crest__point { display: none; }
  .crest__link { align-self: center; margin-top: 8px; }
  .crest__half, .crest__half--right { display: flex; flex-direction: column; align-items: center; gap: 14px; border: 0; border-top: var(--line) solid var(--gold); border-left: var(--line) solid var(--gold); padding: 28px 24px 28px; }
}

/* ---------- Process ---------- */
.phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(28px, 4vw, 56px); }
.phase { border-top: 1px solid var(--rule); padding-top: 20px; position: relative; }
.phase::before { content: ""; position: absolute; top: -2px; left: 0; width: 56px; height: 3px; background: var(--gold); }
.phase__name { font-family: var(--font-text); font-weight: 400; font-style: italic; font-size: 1.0625rem; color: var(--muted); }
.steps { list-style: none; margin: 0; padding: 0; }
.phase .steps { margin-top: 18px; display: grid; gap: 26px; }
.step { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; }
.step__num {
  grid-column: 1; grid-row: 1 / span 3;
  font-family: var(--font-display); font-weight: 700; font-size: 2.75rem; line-height: 0.9;
  color: var(--gold-ink); font-variant-numeric: tabular-nums;
}
.step__name { grid-column: 2; font-size: var(--step-2); line-height: 1.1; }
.step__free { grid-column: 2; justify-self: start; }
.step p { grid-column: 2; margin-top: 8px; font-size: 1.0625rem; color: var(--text); text-wrap: pretty; }
@media (max-width: 900px) { .phases { grid-template-columns: minmax(0, 1fr); } }

/* Home and MSP: each phase header sits above its line and a wide gold bar, with room before the steps. */
.page-home .phase, .page-msp .phase { border-top: 0; padding-top: 0; }
.page-home .phase::before, .page-msp .phase::before { content: none; }
.page-home .phase__name, .page-msp .phase__name { position: relative; font-size: 1.25rem; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.page-home .phase__name::after, .page-msp .phase__name::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 112px; height: 3px; background: var(--gold); }
.page-home .phase .steps, .page-msp .phase .steps { margin-top: 28px; }

/* Home and MSP: the three phases share rows so step headings line up across columns. */
@media (min-width: 901px) {
  .page-home .phases, .page-msp .phases { grid-template-rows: auto repeat(3, auto); row-gap: 0; }
  .page-home .phase, .page-msp .phase { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .page-home .phase .steps, .page-msp .phase .steps { grid-row: 2 / span 3; display: grid; grid-template-rows: subgrid; row-gap: 26px; margin-top: 0; }
  .page-home .step, .page-msp .step { align-content: start; }
  .page-home .phase__name, .page-msp .phase__name { margin-bottom: 28px; }
}

.step__free {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-ink);
  border: 1px solid var(--gold);
  border-radius: 999px;
}
.step__free-value { font-weight: 500; opacity: 0.75; letter-spacing: 0.02em; }

/* ---------- Handoff (band) ---------- */
.handoff { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(32px, 5vw, 80px); align-items: start; }
.handoff__intro .lead { margin-top: 18px; }
.handoff__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 36px; }
.handoff__item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 16px; }
.shield-check { width: 22px; height: 24px; color: var(--band-gold); margin-top: 2px; }
.handoff__item h3 { font-size: 1.4375rem; line-height: 1.15; }
.handoff__item p { margin-top: 8px; font-size: 1.0625rem; color: var(--band-text); }
.handoff__item--seal { grid-column: 1 / -1; border-top: 1px solid var(--band-rule); padding-top: 26px; }
.handoff__item--seal h3 { color: var(--band-gold); }
.band { border-block: 1px solid var(--band-rule); }
@media (max-width: 960px) { .handoff { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .handoff__list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Principles, situations ---------- */
.principles, .situations { display: grid; gap: 36px clamp(24px, 3vw, 44px); }
.principles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.situations { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.principle, .situation { border-top: 1px solid var(--rule); padding-top: 20px; position: relative; }
.principle::before, .situation::before { content: ""; position: absolute; top: -2px; left: 0; width: 40px; height: 3px; background: var(--gold); }
.principle h3, .situation h3 { font-size: var(--step-2); line-height: 1.1; }
.principle p, .situation p { margin-top: 8px; font-size: 1.0625rem; }
@media (max-width: 1080px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .situations { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .principles { grid-template-columns: minmax(0, 1fr); } }
.platforms { margin-top: var(--block); padding-top: 24px; border-top: 1px solid var(--rule); color: var(--muted); max-width: 60em; }
.platforms__label { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.1875rem; margin-right: 4px; }

/* ---------- Project catalog ---------- */
.catalog { display: grid; gap: var(--section); }
.catalog__group { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px clamp(32px, 5vw, 72px); }
.catalog__name { font-size: var(--step-3); line-height: 1.05; }
.catalog__head p { margin-top: 14px; color: var(--muted); font-size: 1.0625rem; max-width: 22em; }
.catalog__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule-strong); }
.catalog__item { position: relative; border-top: 1px solid var(--rule-strong); padding: 22px 0 24px; }
.catalog__title { font-size: 1.6875rem; line-height: 1.1; }
.catalog__title a { color: var(--ink); text-decoration: none; }
.catalog__title a::after { content: ""; position: absolute; inset: 0; }
.catalog__item:hover .catalog__title a { color: var(--gold-ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.catalog__title a:focus-visible { outline: none; }
.catalog__title a:focus-visible::after { outline: 3px solid var(--gold); outline-offset: 2px; }
.catalog__summary { margin-top: 8px; font-size: 1.0625rem; color: var(--text); max-width: 40em; }
@media (max-width: 900px) { .catalog__group { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Filter (projects page) ---------- */
.filter { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.filter__btn {
  font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: 0.015em;
  padding: 0.5em 1.1em; min-height: 44px;
  background: transparent; color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 0; cursor: pointer;
}
.filter__btn:hover { border-color: var(--ink); }
.filter__btn[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }

/* ---------- Projects page: search, cards, and "Not sure which project?" ----------
   The cards show for everyone; the search, the filters, and the finder appear once site.js runs.
   The cards are white on the shaded section, with the gold bar from the highlighted tiles on hover. */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* The search bar stays under the menu while the visitor scrolls the cards: it's sticky inside .pbrowse (hero, bar, and cards).
   Its padding and the hero's 18px keep the old 32px gap under the lead; .is-stuck (site.js) adds the line under it.
   On phones only the search box stays, because the whole bar would fill half the screen. */
.js .hero--projects { padding-bottom: 18px; border-bottom: 0; }
.pfilter-bar { position: sticky; top: var(--header-h); z-index: 40; padding-block: 14px; background: var(--ground); transition: box-shadow 0.15s ease; }
.pfilter-bar.is-stuck, .psearch.is-stuck { box-shadow: 0 1px 0 var(--rule), 0 14px 24px -22px rgba(32, 18, 4, 0.45); }
.pfilter-foot { padding-bottom: var(--section); border-bottom: 1px solid var(--rule); }
.js .pgrid-section { scroll-margin-top: calc(var(--pbar-h, 0px) - var(--section)); }
.pfilter { width: 100%; display: grid; gap: 14px; }
.pfilter__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.pfilter .filter { margin-top: 0; }
.pfilter__cats { display: flex; flex-wrap: wrap; gap: 8px; }
.filter__count { margin-left: 8px; font-family: var(--font-text); font-weight: 400; font-size: 0.875rem; letter-spacing: 0; opacity: 0.75; font-variant-numeric: tabular-nums; }
.pfilter__finder { margin-top: 8px; font-size: 1.0625rem; color: var(--muted); }
.pfilter__finder a, .finder__foot a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.pfilter__finder a:hover { color: var(--gold-ink); }
.psearch { position: relative; flex: 1 1 320px; max-width: 520px; }
.psearch input {
  width: 100%; min-height: 50px; padding: 12px 14px 12px 46px;
  font: inherit; font-size: 1.0625rem; color: var(--ink);
  background: var(--field); border: 1px solid var(--field-border); border-radius: 0;
}
.psearch input::placeholder { color: var(--muted); opacity: 1; }
.psearch input:focus { outline: 3px solid var(--gold); outline-offset: 0; border-color: var(--gold); }
.psearch svg { position: absolute; left: 15px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
@media (max-width: 640px) {
  /* The bar's wrappers step aside, so the search box itself is the sticky part, still inside .pbrowse. */
  .pfilter-bar, .pfilter-bar > .wrap, .pfilter, .pfilter__row { display: contents; }
  .pfilter-bar .psearch { position: sticky; top: var(--header-h); z-index: 40; max-width: none; padding: 12px var(--gutter); background: var(--ground); transition: box-shadow 0.15s ease; }
  .pfilter-bar .psearch svg { left: calc(var(--gutter) + 15px); }
  .js .hero--projects { padding-bottom: 20px; }
  .pfilter-bar .filter { padding-inline: var(--gutter); }
  .pfilter__cats { margin-top: 14px; padding-inline: var(--gutter); padding-bottom: 14px; }
}
.pgrid__count { margin-bottom: 16px; font-size: 0.9375rem; color: var(--muted); }
.pgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: clamp(16px, 2vw, 24px); }
.pcard {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 24px 24px 22px; background: var(--ground); border: 1px solid var(--rule-strong);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pcard::before {
  content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 4px; opacity: 0;
  background: var(--gold-shine) 40% 40% / 300% 300%; transition: opacity 0.15s ease;
}
.pcard:hover, .pcard:focus-within { border-color: var(--ink); box-shadow: 0 16px 32px -24px rgba(32, 18, 4, 0.45); }
.pcard:hover::before, .pcard:focus-within::before { opacity: 1; animation: gold-shine 9s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .pcard:hover::before, .pcard:focus-within::before { animation: none; } }
.pcard__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pcard__cat { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.04em; line-height: 1.2; color: var(--gold-ink); }
.pcard__cat::before { content: ""; flex: none; width: 9px; height: 11px; background: var(--gold); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); }
.pcard__aud { font-size: 0.875rem; color: var(--muted); white-space: nowrap; }
.pcard__title { font-size: clamp(1.5rem, 1.35rem + 0.5vw, 1.75rem); line-height: 1.06; }
.pcard__title a { color: var(--ink); text-decoration: none; }
.pcard__title a::after { content: ""; position: absolute; inset: 0; }
.pcard__title a:focus-visible { outline: none; }
.pcard__title a:focus-visible::after { outline: 3px solid var(--gold); outline-offset: 2px; }
.pcard:hover .pcard__title a { color: var(--gold-ink); }
.pcard__summary { font-size: 1rem; line-height: 1.5; color: var(--text); }
.pcard__proof { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pcard__value { font-family: var(--font-display); font-weight: 700; font-size: 1.625rem; line-height: 1; color: var(--gold-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pcard__keep { font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); white-space: nowrap; }
.pcard__note { flex: 1 1 12em; min-width: 0; font-size: 0.9375rem; line-height: 1.4; color: var(--muted); }
.pgrid__empty { display: grid; justify-items: start; gap: 12px; padding: 32px; background: var(--ground); border: 1px solid var(--rule-strong); }

.finder__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem); gap: 24px clamp(24px, 4vw, 56px); align-items: start; }
.finder__groups { columns: 2 18rem; column-gap: 32px; }
.finder__group { break-inside: avoid; margin-bottom: 28px; }
.finder__group-title { margin-bottom: 10px; font-size: 1.375rem; line-height: 1.15; }
.finder__sign {
  width: 100%; min-height: 44px; margin-bottom: 6px; padding: 11px 14px;
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start;
  font: inherit; font-size: 1rem; line-height: 1.4; text-align: left; color: var(--text);
  background: var(--ground); border: 1px solid var(--rule); border-radius: 0; cursor: pointer;
}
.finder__sign:hover { border-color: var(--rule-strong); background: var(--gold-wash); }
.finder__box { position: relative; width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid var(--rule-strong); background: var(--field); }
.finder__sign[aria-pressed="true"] { border-color: var(--ink); background: var(--gold-wash); color: var(--ink); }
.finder__sign[aria-pressed="true"] .finder__box { background: var(--ink); border-color: var(--ink); }
.finder__sign[aria-pressed="true"] .finder__box::after {
  content: ""; position: absolute; left: 5.5px; top: 1.5px; width: 6px; height: 11px;
  border-right: 2px solid var(--ground); border-bottom: 2px solid var(--ground); transform: rotate(45deg);
}
.finder__results { position: sticky; top: calc(var(--header-h) + 16px); }
.finder__panel { padding: 24px; background: var(--band); color: var(--band-text); border: 1px solid var(--band-rule); max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; }
/* "Not sure which project?" takes over the top of the screen from the search bar. It heads the left column,
   so the results panel lines up with it and both stay on screen at the same height.
   The heading's padding is offset by its margins, so the layout doesn't move. */
@media (min-width: 901px) {
  .finder .section-head { position: sticky; top: var(--header-h); z-index: 30; max-width: none; margin-top: -16px; margin-bottom: calc(var(--block) - 16px); padding-block: 16px; background: var(--ground); transition: box-shadow 0.15s ease; }
  .finder .section-head > * { max-width: 46rem; }
  .finder .section-head.is-stuck { box-shadow: 0 1px 0 var(--rule), 0 14px 24px -22px rgba(32, 18, 4, 0.45); }
  /* The panel's top edge is level with the tops of the heading's capital letters, which sit about 0.097em into its line. */
  .finder { --cap-drop: calc(var(--step-4) * 0.097); }
  .finder__results { margin-top: var(--cap-drop); top: calc(var(--header-h) + 16px + var(--cap-drop)); }
  .finder__panel { max-height: calc(100vh - var(--header-h) - 32px - var(--cap-drop)); }
}
.finder__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.finder__head h3 { color: var(--band-ink); font-size: 1.75rem; }
.finder__clear { padding: 8px 0; min-height: 40px; background: none; border: 0; font: inherit; font-size: 0.9375rem; color: var(--band-gold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.finder__status { margin-top: 4px; font-size: 0.875rem; color: var(--band-muted); }
.finder__status:empty { display: none; }
.finder__list { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: fit; }
.finder__list:empty { display: none; }
.finder__result { counter-increment: fit; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding-block: 16px; border-top: 1px solid var(--band-rule); }
.finder__result::before { content: counter(fit); font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--band-gold); }
.finder__result a { font-family: var(--font-display); font-weight: 700; font-size: 1.3125rem; line-height: 1.1; color: var(--band-ink); text-decoration: none; }
.finder__result a:hover { text-decoration: underline; text-decoration-color: var(--band-gold); text-underline-offset: 4px; }
.finder__result p { margin-top: 4px; font-size: 0.9375rem; line-height: 1.45; color: var(--band-text); }
.finder__why { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 0.875rem; line-height: 1.45; font-style: italic; color: var(--band-muted); }
.finder__empty { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--band-rule); font-size: 1rem; line-height: 1.5; }
.finder__foot { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--band-rule); display: grid; gap: 6px; font-size: 0.9375rem; }
.finder__foot a { color: var(--band-ink); text-decoration-color: var(--band-gold); }
.finder__dock { display: none; }
@media (max-width: 900px) {
  .finder__layout { grid-template-columns: minmax(0, 1fr); }
  .finder__results { position: static; }
  .finder__panel { max-height: none; overflow: visible; }
  .finder__dock {
    position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-inline: calc(-1 * var(--gutter)); padding: 10px var(--gutter);
    background: var(--band); color: var(--band-ink); font-family: var(--font-display); font-weight: 700; font-size: 1.125rem;
  }
  .finder__dock .btn { background: var(--band-gold); border-color: var(--band-gold); color: #201204; }
}

/* ---------- Highlighted projects (For businesses, For MSPs) ----------
   The only tiles on the site: a row of sable cards, edge to edge across the screen, that
   drifts from right to left in a loop (.is-auto, set by site.js) and pauses on hover or focus.
   With reduced motion or no JavaScript it's a row the visitor scrolls, starting at the page's
   left edge. The whole tile is the link. */
.rail { --rail-inset: max(var(--gutter), calc((100% - var(--page)) / 2)); }
.rail__track {
  list-style: none; margin: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(24rem, 82vw);
  gap: clamp(16px, 2vw, 24px);
  padding: 14px var(--rail-inset) 12px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--rail-inset);
}
.js .rail__track { scrollbar-width: none; }
.js .rail__track::-webkit-scrollbar { display: none; }
.tile {
  position: relative; scroll-snap-align: start;
  display: flex; flex-direction: column;
  min-height: 16rem; padding: 28px 30px 26px;
  background: var(--band); color: var(--band-text);
  border: 1px solid var(--band-rule); border-top: 4px solid transparent;
  transition: transform 0.2s ease;
}
/* The gold bar along each tile's top edge, laid over the top border: polished gold ("Gold shine") that rests still
   and starts shining while the pointer is over that tile (or it has keyboard focus), picking up where it left off. */
.tile::before {
  content: ""; position: absolute; top: -4px; left: -1px; right: -1px; height: 4px;
  background: var(--gold-shine) 40% 40% / 300% 300%;
  animation: gold-shine 9s ease-in-out infinite alternate paused;
}
.tile:hover::before, .tile:focus-within::before { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .tile::before, .tile:hover::before, .tile:focus-within::before { animation: none; } }
.tile__cat {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.04em; line-height: 1.2; color: var(--band-gold);
}
.tile__cat::before { content: ""; flex: none; width: 10px; height: 12px; background: var(--band-gold); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); }
.tile__title { margin-top: 16px; font-size: clamp(1.75rem, 1.5rem + 0.7vw, 2.125rem); line-height: 1.02; color: var(--band-ink); }
.tile__title a { color: inherit; text-decoration: none; }
.tile__title a::after { content: ""; position: absolute; inset: -4px -1px -1px; }
.tile__title a:focus-visible { outline: none; }
.tile__title a:focus-visible::after { outline: 3px solid var(--gold); outline-offset: 3px; }
.tile__text { margin-top: 14px; font-size: 1rem; line-height: 1.5; color: var(--band-text); }
.tile__more {
  margin-top: auto; padding-top: 24px; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: 0.015em; color: var(--band-gold);
}
.tile__more svg { flex: none; width: 18px; height: 18px; transition: transform 0.2s ease; }
.tile:hover, .tile:focus-within { transform: translateY(-6px); }
.tile:hover .tile__more svg, .tile:focus-within .tile__more svg { transform: translateX(5px); }
.rail__foot { margin-top: clamp(18px, 2.5vw, 28px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.rail__nav { display: flex; gap: 10px; }
.rail__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0;
  background: transparent; color: var(--ink); border: 2px solid var(--ink); border-radius: 0; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.rail__btn svg { width: 20px; height: 20px; }
.rail__btn--prev svg { transform: scaleX(-1); }
.rail__btn:hover:not(:disabled) { background: var(--ink); color: var(--ground); }
.rail__btn:disabled { opacity: 0.3; cursor: default; }
.rail__toggle .rail__play, .rail__toggle.is-paused .rail__pause { display: none; }
.rail__toggle.is-paused .rail__play { display: block; }
.rail.is-auto .rail__viewport { overflow: hidden; overflow: clip; touch-action: pan-y; }
.rail.is-auto .rail__track { overflow: visible; padding-inline: 0; scroll-snap-type: none; will-change: transform; }
@media (hover: none) and (pointer: coarse) { .rail__nav { display: none; } }

/* ---------- Terms (definition lists) ---------- */
.terms { margin: 0; border-bottom: 1px solid var(--rule); }
.term { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px 32px; padding: 22px 0; border-top: 1px solid var(--rule); }
.term dt { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.15; color: var(--ink); }
.term dd { margin: 0; }
@media (max-width: 640px) { .term { grid-template-columns: minmax(0, 1fr); } }
/* About, "What we don't do": each name gets a crossed-out shield, and "don't" in the heading a gold-shine underline. */
.terms--refused dt { display: flex; gap: 14px; align-items: flex-start; }
.terms--refused .mark { width: 22px; height: 24px; margin-top: 2px; }
.mark__x { stroke: var(--muted); }
.gold-under { position: relative; white-space: nowrap; }
.gold-under::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.08em; height: 3px;
  background: var(--gold-shine) 0 0 / 300% 300%; animation: gold-shine 9s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .gold-under::after { animation: none; background-position: 40% 40%; } }

/* ---------- FAQ ---------- */
.faq { border-bottom: 1px solid var(--rule-strong); }
.faq__item { border-top: 1px solid var(--rule-strong); }
.faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 20px 0;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.2; color: var(--ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(var(--gold-ink), var(--gold-ink)) center / 14px 2px no-repeat,
    linear-gradient(var(--gold-ink), var(--gold-ink)) center / 2px 14px no-repeat;
  transition: transform 0.2s ease;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover { color: var(--gold-ink); }
.faq__answer { padding: 0 0 24px; max-width: 40em; }

/* ---------- MSP pledge ---------- */
.pledge { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(32px, 5vw, 80px); align-items: start; }
.pledge__intro .lead { margin-top: 18px; }
.pledge__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--band-rule); }
.pledge__item { border-top: 1px solid var(--band-rule); padding: 22px 0 22px 34px; position: relative; }
.pledge__item::before {
  content: ""; position: absolute; left: 0; top: 30px; width: 14px; height: 16px;
  background: var(--band-gold);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
}
.pledge__item h3 { font-size: 1.75rem; line-height: 1.1; }
.pledge__item p { margin-top: 8px; color: var(--band-text); }
@media (max-width: 960px) { .pledge { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Comparison table ---------- */
/* Our column is framed in gold, with shield marks; the other three stay quiet and gray, with circles. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-block: 24px; margin-block: -24px; }
.compare { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; font-size: 1rem; }
.compare th, .compare td { text-align: left; vertical-align: middle; padding: 20px; border-bottom: 1px solid var(--rule); }
.compare thead > tr > * { border-bottom-color: var(--rule-strong); }
.compare thead th { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.12; color: var(--muted); vertical-align: top; padding-top: 28px; }
.compare tbody th { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.15; color: var(--ink); }
/* Column widths: row names, our column (a little wider), then the three other options, evenly spaced. */
.compare col:nth-child(1) { width: 23.6%; }
.compare col:nth-child(2) { width: 26%; }
.compare col:nth-child(n+3) { width: 16.8%; }
/* More white space after our column: the three other options' contents sit 12px further right in their cells,
   which keeps them evenly spaced and their text the same width. */
.compare tr > :nth-child(n+3) { padding-left: 32px; padding-right: 8px; }
.compare td { color: var(--muted); }
.compare .is-us { color: var(--ink); font-size: 1.0625rem; }
.compare thead .is-us { font-weight: 700; font-size: 1.625rem; color: var(--ink); text-align: center; }
/* A little more room between our shield marks and the column's left border. */
.compare tbody .is-us { padding-left: 36px; }
.compare tbody tr:last-child .is-us { padding-bottom: 24px; }
/* Our column's gold frame and shadow: one box laid over the whole column (positioned by the column widths
   below), so the shadow and the light on the gold run unbroken from top to bottom. */
.compare { position: relative; }
.compare::before, .compare::after {
  content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: 23.6%; width: 26%; pointer-events: none;
}
.compare::before { box-shadow: 0 0 18px var(--column-shadow); }
/* The frame: a 4px ring of polished gold, its highlights drifting slowly across the metal. */
.compare::after {
  padding: 4px;
  background: var(--gold-shine) 0 0 / 300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: gold-shine 9s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .compare::after { animation: none; background-position: 40% 40%; } }
/* Row names stay pinned while the table scrolls sideways. Our column slides under them,
   so its shadow shows only at the sides here; above and below, it would peek past the row names. */
@media (max-width: 860px) {
  .compare tbody th, .compare thead td { position: sticky; left: 0; z-index: 2; background: var(--ground); }
  .compare::before { box-shadow: 10px 0 14px -8px var(--column-shadow), -10px 0 14px -8px var(--column-shadow); }
}
/* The header's logo in our column heading, about 10% larger than in the site header. */
.compare .brand { gap: 13px; }
.compare .brand__wordmark { width: 167px; height: 19px; }
.compare .brand__emblem { width: 30px; height: 48px; }
.compare__answer { display: inline-flex; gap: 10px; align-items: flex-start; }
.mark { flex: none; width: 18px; height: 20px; margin-top: 3px; }
.mark--circle { width: 20px; height: 20px; margin-top: 2px; }
.mark__fill { fill: var(--gold); }
.mark__check { stroke: var(--band); }
.mark__line { stroke: var(--gold-ink); }
.mark__half { fill: var(--gold-ink); }
.mark__dash { stroke: var(--muted); }
.mark--no .mark__line { stroke: var(--rule-strong); }
@media (max-width: 640px) {
  .compare { min-width: 740px; }
  .compare th, .compare td { padding: 16px 14px; }
  .compare col:nth-child(1) { width: 119px; }
  .compare col:nth-child(2) { width: 195px; }
  .compare col:nth-child(n+3) { width: 142px; }
  .compare tr > :nth-child(n+3) { padding-left: 24px; padding-right: 4px; }
  .compare tbody .is-us { padding-left: 26px; }
  .compare::before, .compare::after { left: 119px; width: 195px; }
  .compare tbody th { min-width: 119px; padding-left: 0; font-size: 1.0625rem; box-shadow: 1px 0 0 var(--rule-strong); }
  /* Our column heading's logo, scaled down to fit on phones. */
  .compare .brand { gap: 9px; }
  .compare .brand__wordmark { width: 106px; height: 12px; }
  .compare .brand__emblem { width: 19px; height: 31px; }
}
.table-scroll + .note { margin-top: 16px; }
.table-hint { display: none; margin-bottom: 12px; font-size: var(--step--1); color: var(--muted); font-style: italic; }
@media (max-width: 860px) { .table-hint { display: block; } }

.referral .lead { max-width: 34em; }
.referral p + p { margin-top: 18px; }

/* ---------- CTA band ---------- */
.cta-band { border-top: 1px solid var(--rule); }
.cta-band__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 56px; align-items: end; }
.cta-band h2 { font-size: var(--step-4); }
.cta-band .lead { margin-top: 18px; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }
@media (max-width: 900px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1fr); }
  .cta-band__actions { justify-content: flex-start; }
}

/* ---------- Project page ---------- */
.crumbs ol { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; }
.crumbs li { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.015em; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--gold); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold-ink); text-decoration: underline; }
.audience { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.audience li {
  font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.015em; color: var(--gold-ink);
  display: inline-flex; align-items: center; gap: 8px;
}
.audience li::before { content: ""; width: 9px; height: 10px; background: var(--gold); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); }
.detail { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px clamp(40px, 6vw, 96px); align-items: start; }
.detail__main > h2 { margin-bottom: 18px; }
.detail__main > * + h2 { margin-top: var(--block); }
.detail__main .prose { margin-top: 36px; max-width: 40em; font-size: var(--step-1); line-height: 1.55; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; }
.tick { width: 18px; height: 18px; margin-top: 5px; color: var(--gold-ink); }
.ticks--muted .tick { color: var(--muted); }
.detail__aside { display: grid; gap: 20px; position: sticky; top: calc(var(--header-h) + 24px); }
.aside-card { border: 1px solid var(--rule); padding: 24px; background: var(--ground); }
.aside-card--gold { border-top: 3px solid var(--gold); }
.aside-card h2 { margin-bottom: 14px; }
.aside-card .ticks { gap: 10px; font-size: 1.0625rem; }
.aside-card__foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 1rem; }
.aside-card .btn { margin-top: 16px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.015em; color: var(--ink); border: 1px solid var(--rule-strong); padding: 4px 10px; }
.detail__aside .note { font-size: 1rem; }
@media (max-width: 960px) {
  .detail { grid-template-columns: minmax(0, 1fr); }
  .detail__aside { position: static; }
}

/* ---------- About ---------- */
.founder__name { font-size: var(--step-3); }
.founder__title { margin-top: 6px; color: var(--muted); font-style: italic; }
.founder .prose { margin-top: 20px; max-width: 40em; }
.founder .text-link { display: inline-block; margin-top: 22px; }
.values { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.values__row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 24px; align-items: start; padding: 16px 0 20px; border-top: 1px solid var(--rule); }
.values__letter {
  font-family: var(--font-display); font-weight: 700; font-size: 5.25rem; line-height: 0.82;
  color: var(--gold); text-align: center;
}
.values--centered .values__row { align-items: center; }
/* The row's 16/20px padding and the font's high-set caps leave the glyph 3px above center; nudge it down. */
.values--centered .values__letter { line-height: 1; translate: 0 3px; }
.values__word { font-size: 1.75rem; line-height: 1.1; padding-top: 6px; }
.values__row p { margin-top: 8px; text-wrap: pretty; }

/* ---------- Careers ---------- */
.jobs { display: grid; gap: 24px; }
.job { border: 1px solid var(--rule-strong); border-top: 3px solid var(--gold); padding: clamp(22px, 3vw, 32px); display: grid; gap: 16px; }
.job__head { display: grid; gap: 12px; }
.job__head h3 { font-size: var(--step-3); line-height: 1.05; }
.job__summary { max-width: 40em; }
.job__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.job__soon { color: var(--muted); font-style: italic; }
.careers__general { margin-top: 32px; color: var(--muted); }

/* Job description pages (src/pages/job.js): even spacing down the hero. */
.page-job .job__meta { margin-top: 22px; }
.page-job .job__meta + .lead { margin-top: 22px; }
.page-job .hero__actions { margin-top: 30px; }
#apply h2 + .job__actions { margin-top: 18px; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 48px clamp(40px, 5vw, 80px); align-items: start; }
.contact__form > h2 { margin-bottom: 24px; }
.contact__aside { display: grid; gap: 20px; }
@media (max-width: 960px) { .contact { grid-template-columns: minmax(0, 1fr); } }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
/* Inputs in the same row line up even when one label wraps or has a hint. */
.field > input, .field > select, .field > textarea { margin-top: auto; }
.field label { font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; letter-spacing: 0.01em; color: var(--ink); }
.optional { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1.0625rem; color: var(--ink);
  background: var(--field); border: 1px solid var(--field-border); border-radius: 0;
  padding: 12px 14px; min-height: 50px;
}
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-ink) 50%), linear-gradient(135deg, var(--gold-ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.field textarea { resize: vertical; min-height: 150px; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--gold); outline-offset: 0; border-color: var(--gold); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--danger); }
.field__error { font-size: 0.9375rem; color: var(--danger); }
.form__consent { margin-top: 20px; font-size: 0.9375rem; color: var(--muted); }
.form__actions { margin-top: 20px; }
.form__actions .btn[disabled] { opacity: 0.6; cursor: progress; }
.form__status { margin-top: 20px; padding: 16px 18px; border: 1px solid var(--rule); border-left: 3px solid var(--gold); background: var(--ground-alt); }
.form__status.is-error { border-left-color: var(--danger); }
.form__status.is-success { border-left-color: var(--success); }
.form__status strong { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); display: block; margin-bottom: 4px; }
@media (max-width: 640px) { .form__grid { grid-template-columns: minmax(0, 1fr); } }
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.copy-text { overflow-wrap: anywhere; user-select: all; }
.copy-btn {
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.02em;
  background: transparent; color: var(--ink); border: 1px solid var(--rule-strong); padding: 4px 12px; cursor: pointer; min-height: 34px;
}
.copy-btn:hover { border-color: var(--ink); }

/* ---------- Quiet third option (project pages) ---------- */
.third-option { margin-top: 22px; font-size: 1.0625rem; color: var(--muted); }
.third-option a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.third-option a:hover { color: var(--gold-ink); }
/* Sits under the buttons without widening their column. */
.cta-band__extra { grid-column: 1 / -1; width: 0; min-width: 100%; margin-top: -14px; }
.cta-band__extra .third-option { margin-top: 0; text-align: right; font-size: 1rem; }
@media (max-width: 900px) {
  .cta-band__extra { grid-column: 1; width: auto; min-width: 0; margin-top: -8px; }
  .cta-band__extra .third-option { text-align: left; }
}

/* ---------- Project information forms ---------- */
.hero--project-information h1 { font-size: clamp(2.375rem, 1.6rem + 3vw, 4rem); max-width: 17em; }
.project-information__warning { margin-top: 22px; display: flex; gap: 12px; align-items: baseline; font-size: 1.0625rem; color: var(--text); max-width: 40em; }
.project-information__warning::before {
  content: ""; flex: none; width: 11px; height: 13px; background: var(--gold);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); transform: translateY(1px);
}
.project-information { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 48px clamp(40px, 5vw, 80px); align-items: start; }
.project-information__aside { display: grid; gap: 20px; position: sticky; top: calc(var(--header-h) + 24px); }
@media (max-width: 960px) { .project-information { grid-template-columns: minmax(0, 1fr); } .project-information__aside { position: static; } }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.project-information__section { border: 0; margin: 0 0 56px; padding: 22px 0 0; min-width: 0; border-top: 1px solid var(--rule); position: relative; }
.project-information__section::before { content: ""; position: absolute; top: -2px; left: 0; width: 56px; height: 3px; background: var(--gold); }
.project-information__legend {
  float: left; width: 100%; padding: 0; margin: 0 0 24px;
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); line-height: 1.05; color: var(--ink);
  display: flex; align-items: baseline; gap: 14px;
}
.project-information__legend + * { clear: both; }
.project-information__num { font-size: 0.85em; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.project-information__intro { margin: -8px 0 20px; color: var(--muted); max-width: 40em; }

.field__hint { margin-top: -2px; font-size: 0.9375rem; line-height: 1.45; color: var(--muted); }
.req { font-family: var(--font-text); font-weight: 400; font-size: 0.875rem; letter-spacing: 0; color: var(--gold-ink); }
.field--choice { border: 0; padding: 0; margin: 0; min-width: 0; }
.field--choice > legend {
  float: left; width: 100%; padding: 0; margin: 0 0 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; letter-spacing: 0.01em; line-height: 1.25; color: var(--ink);
}
.field--choice > legend + * { clear: both; }
.field--choice > .field__hint { margin: -4px 0 10px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.choices--cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .choices--cols { grid-template-columns: minmax(0, 1fr); } }
.field .choice {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; min-height: 46px;
  border: 1px solid var(--field-border); background: var(--field);
  font-family: var(--font-text); font-weight: 400; font-size: 1rem; letter-spacing: 0; line-height: 1.35; color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.field .choice:hover { border-color: var(--gold-ink); }
.field .choice input { flex: none; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; border: 0; background: none; accent-color: var(--gold-ink); }
.field .choice:has(input:checked) { border-color: var(--gold-ink); background: var(--gold-wash); }
.field .choice:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 1px; }
.field--choice.is-invalid .choice { border-color: var(--danger); }
.field.is-conditional { animation: reveal 0.25s ease both; }
@keyframes reveal { from { opacity: 0.2; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.project-information__submit { border-top: 1px solid var(--rule); padding-top: 24px; }
.project-information__submit .form__consent { margin-top: 0; }
.form__summary {
  display: block; width: 100%; margin: 14px 0 10px; padding: 12px 14px;
  font: inherit; font-size: 0.9375rem; line-height: 1.5; color: var(--ink);
  background: var(--field); border: 1px solid var(--field-border); border-radius: 0; resize: vertical;
}

.next-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: next; }
.next-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 1.0625rem; counter-increment: next; }
.next-steps li::before { content: counter(next); font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; line-height: 1.1; color: var(--gold-ink); }
.project-information__nav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.project-information__nav a {
  display: flex; gap: 12px; align-items: baseline; padding: 6px 0;
  font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: 0.01em;
  color: var(--ink); text-decoration: none;
}
.project-information__nav a:hover { color: var(--gold-ink); }
.project-information__navnum { min-width: 14px; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.project-information__saved { font-size: 0.9375rem; color: var(--muted); }
@media (max-width: 960px) { .project-information__nav { display: none; } }
.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.link-btn:hover { color: var(--gold-ink); }
.project-information__alt { font-size: 1rem; color: var(--muted); }
.project-information__alt a { color: var(--ink); text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.project-information__alt a:hover { color: var(--gold-ink); }

/* ---------- Footer ---------- */
.site-footer { background: var(--band); color: var(--band-text); --sword: var(--band-ink); }
.site-footer__inner {
  max-width: calc(var(--page) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter);
  padding-block: var(--section) 40px;
  display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 3fr)); gap: 40px;
}
.brand--footer { color: var(--band-ink); }
.footer__brand p { margin-top: 20px; max-width: 22em; font-size: 1.0625rem; }
.footer__heading { font-size: 1.25rem; color: var(--band-ink); margin-bottom: 14px; letter-spacing: 0.02em; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer__col a { color: var(--band-text); text-decoration: none; overflow-wrap: anywhere; }
.footer__col a:hover { color: var(--band-gold); text-decoration: underline; }
.footer__col p { font-size: 1.0625rem; }
.footer__col p + p, .footer__address { margin-top: 10px; }
.site-footer__base {
  max-width: calc(var(--page) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter);
  font-size: 0.9375rem; color: var(--band-muted);
}
.site-footer__base-inner {
  padding-block: 20px 28px; border-top: 1px solid var(--band-rule);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
}
.site-footer__base a { color: var(--band-muted); }
.site-footer__base a:hover { color: var(--band-gold); }
@media (max-width: 960px) { .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .site-footer__inner { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Motion ---------- */
@media (max-width: 520px) {
  .hero__actions, .cta-band__actions { flex-direction: column; align-items: stretch; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- Project landing pages ----------
   Hero: outcome headline, call to action with promises under it, and a sable proof card.
   Then the problem, what's included, an optional guide, the four steps (sable band),
   straight answers and the closing call to action. */
.project-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 44px clamp(40px, 6vw, 88px); align-items: center; }
.project-hero__copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.kicker {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 18px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; letter-spacing: 0.015em; line-height: 1.25;
}
.kicker__name { display: inline-flex; align-items: center; gap: 10px; color: var(--gold-ink); }
.kicker__name::before { content: ""; flex: none; width: 11px; height: 13px; background: var(--gold); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); }
.kicker__aud { font-weight: 400; color: var(--muted); }
.hero--project h1 { font-size: clamp(2.5rem, 1.45rem + 3.4vw, 4.375rem); line-height: 0.98; max-width: 12.5em; }
.project-hero .lead { max-width: 34em; }
.project-hero .hero__actions { justify-content: flex-start; margin-top: 30px; }
.hero--project .third-option { margin-top: 16px; }

.assurances { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 1rem; line-height: 1.4; color: var(--text); }
.assurances li { display: inline-flex; align-items: center; gap: 8px; }
.assurances .tick { flex: none; width: 16px; height: 16px; margin-top: 0; color: var(--gold-ink); }

.proof { background: var(--band); color: var(--band-text); border-top: 4px solid var(--gold); padding: clamp(28px, 3vw, 40px); }
.proof__label { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: 0.03em; color: var(--band-gold); }
.proof__value {
  margin-top: 12px; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3.5rem, 2.4rem + 3.6vw, 5.75rem); line-height: 0.9; letter-spacing: -0.01em;
  color: var(--band-ink); font-variant-numeric: lining-nums;
}
.proof__text { margin-top: 16px; font-size: 1.125rem; line-height: 1.5; color: var(--band-text); }
.proof__text--large { margin-top: 12px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); line-height: 1.12; color: var(--band-ink); }
.proof__source, .proof__foot { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--band-rule); font-size: 0.9375rem; line-height: 1.45; color: var(--band-muted); }
.proof__source a { color: var(--band-text); text-decoration-color: var(--band-gold); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.proof__source a:hover { color: var(--band-gold); }
.proof .ticks { margin-top: 18px; gap: 10px; font-size: 1.0625rem; color: var(--band-text); }
.ticks--band .tick { color: var(--band-gold); }

.statement { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.25rem); line-height: 1.04; max-width: 15em; }
.problem { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.problem .lead { margin-top: 18px; max-width: 36em; }
.problem .lead a { text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.problem .lead a:hover { color: var(--gold-ink); }
.problem__signs { background: var(--ground); border: 1px solid var(--rule); border-top: 3px solid var(--gold); padding: 26px; }
.problem__signs h3 { margin-bottom: 16px; }
.problem__signs .ticks { font-size: 1.0625rem; }

.detail__main > h2.statement { margin-bottom: 28px; }
.aside-card h3 { margin-bottom: 14px; }

.guide { max-width: 46rem; }
.guide > h2:first-child { margin-top: 0; }
.guide h2 { font-size: var(--step-3); }
.guide ol, .guide ul { margin: 0.8em 0 0; padding-left: 1.4em; }
.guide li + li { margin-top: 0.55em; }
.guide li::marker { color: var(--gold-ink); font-weight: 700; }
.guide ol + p, .guide ul + p { margin-top: 1em; }
.guide strong { color: var(--ink); }

.band .phase { border-top-color: var(--band-rule); }
.band .phase__name { color: var(--band-text); }
.band .step__name { color: var(--band-ink); }
.band .step p { color: var(--band-text); }
.band .step__num { color: var(--band-gold); }
.band .step p { color: var(--band-text); }
.band-cta { margin-top: var(--block); padding-top: 28px; border-top: 1px solid var(--band-rule); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.band-cta__note { max-width: 34em; font-size: 1.0625rem; font-style: italic; color: var(--band-muted); }
.band .btn--primary { background: var(--band-gold); border-color: var(--band-gold); color: #201204; }
.band .btn--primary:hover { background: var(--band-ink); border-color: var(--band-ink); color: #201204; }

.seasonal { margin-top: 18px; padding: 12px 16px; max-width: 40em; border-left: 3px solid var(--gold); background: var(--gold-wash); color: var(--ink); font-size: 1rem; line-height: 1.5; }

@media (max-width: 960px) {
  .project-hero, .problem { grid-template-columns: minmax(0, 1fr); }
  .proof { max-width: 40rem; }
}
@media (max-width: 520px) {
  .band-cta .btn { width: 100%; }
}

/* ---------- Project information forms: email first ----------
   "About you" is step 1. The rest of the form opens after Continue (site.config.js:
   projectInformationEmailFirst). Without JavaScript, the whole form shows as before. */
.js .project-information__form[data-email-first]:not(.is-unlocked) .project-information__later { display: none; }
.js .project-information__form[data-email-first]:not(.is-unlocked) ~ .project-information__aside .project-information__nav li + li { opacity: 0.45; }
.js .project-information__form[data-email-first]:not(.is-unlocked) ~ .project-information__aside .project-information__nav li + li a { pointer-events: none; cursor: default; }
.no-js .project-information__continue { display: none; }
.project-information__continue { margin: -20px 0 56px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.project-information__continue-note { flex: 1 1 18em; max-width: 30em; font-size: 0.9375rem; line-height: 1.45; color: var(--muted); }
.project-information__continued {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; letter-spacing: 0.01em; color: var(--gold-ink);
}
.project-information__continued::before {
  content: ""; flex: none; width: 11px; height: 13px; background: var(--gold);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
}
.project-information__continued:empty { display: none; }
.project-information__section:focus { outline: none; }
@media (max-width: 520px) {
  .project-information__continue .btn { width: 100%; }
}

/* ---------- Projects page: the AI Business Automation group (coming soon) ----------
   Its button sits last in the group row with a gold sword and "Soon" where the count goes. Picking it shows the
   forge panel in place of the cards (src/ai-automation.js), with the Embers to blade animation (forge.js). */
.filter__btn--soon { display: inline-flex; align-items: center; border-color: var(--gold); }
.filter__btn--soon:hover { border-color: var(--ink); }
.filter__btn--soon .filter__count {
  margin-left: 10px; padding: 3px 6px 2px; border: 1px solid currentColor; opacity: 1;
  font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-ink);
}
.filter__btn--soon[aria-pressed="true"] { border-color: var(--ink); }
.filter__btn--soon[aria-pressed="true"] .filter__count { color: inherit; }
.filter__sword { flex: none; width: 11.5px; height: 19px; margin: -2px 9px 0 -2px; }

.aisoon { position: relative; }
.aisoon__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-ink);
}
.aisoon h3 { margin-top: 10px; font-size: clamp(2rem, 1.45rem + 2.1vw, 3.125rem); line-height: 1.02; max-width: 15em; }
.aisoon h4 { font-size: 1.375rem; line-height: 1.15; }
.aisoon__lead { margin-top: 16px; font-size: 1.1875rem; line-height: 1.55; max-width: 36em; }
.aisoon__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  margin-top: clamp(28px, 4vw, 40px); padding-top: 24px; border-top: 1px solid var(--rule);
}
.aisoon__cta p { font-size: 1.125rem; max-width: 28em; color: var(--ink); }
.aisoon__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.aisoon__today { margin-top: 16px; font-size: 1rem; color: var(--muted); }
.aisoon__today a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.aisoon__today a:hover { color: var(--gold-ink); }
@media (max-width: 600px) {
  .aisoon__btns { width: 100%; }
  .aisoon__btns .btn { flex: 1 1 100%; }
}

.aisoon--forge { padding: clamp(24px, 4vw, 52px); background: var(--band); color: var(--band-text); border: 1px solid var(--band-rule); overflow: hidden; }
.aisoon--forge h3, .aisoon--forge h4 { color: var(--band-ink); }
.aisoon--forge .aisoon__eyebrow { color: var(--band-gold); }
.aisoon--forge .aisoon__lead { color: var(--band-text); }
.forge__top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px clamp(28px, 4vw, 56px); align-items: center; }
.forge__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(20px, 3vw, 40px); margin-top: clamp(28px, 4vw, 44px); }
.forge__cols section { padding-top: 14px; border-top: 2px solid var(--band-gold); }
.forge__cols p { margin-top: 8px; font-size: 1rem; line-height: 1.5; color: var(--band-text); }
.forge__cols ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.forge__cols li { position: relative; padding-left: 20px; font-size: 0.9375rem; line-height: 1.45; color: var(--band-ink); }
.forge__cols li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 9px; height: 11px; background: var(--band-gold); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); }
.aisoon--forge .aisoon__cta { border-top-color: var(--band-rule); }
.aisoon--forge .aisoon__cta p { color: var(--band-ink); }
.aisoon--forge .btn--primary { background: var(--band-gold); border-color: var(--band-gold); color: #201204; }
.aisoon--forge .btn--primary:hover { background: var(--band-ink); border-color: var(--band-ink); color: #201204; }
.aisoon--forge .btn--ghost { color: var(--band-ink); border-color: var(--band-ink); }
.aisoon--forge .btn--ghost:hover { background: var(--band-ink); color: #201204; }
.aisoon--forge .aisoon__today { color: var(--band-muted); }
.aisoon--forge .aisoon__today a { color: var(--band-ink); }
.aisoon--forge :focus-visible { outline-color: var(--band-gold); }
.forge__scene { position: relative; }
.forge__canvas { display: block; width: 100%; height: auto; aspect-ratio: 600 / 340; }
.forge__pause {
  position: absolute; right: 4px; bottom: 4px; width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(217, 167, 92, 0.35); border-radius: 50%; background: rgba(14, 9, 5, 0.5); color: var(--band-gold);
  cursor: pointer; opacity: 0.7; transition: opacity 0.15s ease, border-color 0.15s ease;
}
.forge__pause:hover, .forge__pause:focus-visible { opacity: 1; border-color: var(--band-gold); }
.forge__pause svg { width: 14px; height: 14px; fill: currentColor; }
.forge__pause .i-play { display: none; }
.forge__pause[aria-pressed="true"] .i-play { display: block; }
.forge__pause[aria-pressed="true"] .i-pause { display: none; }
@media (prefers-reduced-motion: reduce) { .forge__pause { display: none; } }
@media (max-width: 900px) { .forge__top, .forge__cols { grid-template-columns: minmax(0, 1fr); } .forge__scene { max-width: 520px; } }