/* ============================================================
   BAUHAUS DATA SYSTEM — site-wide design system
   Vignelli / Hans Hillmann lineage. Posters as websites.
   The data IS the design. Anti-AI-slop: zero gradients, zero
   blob art, zero "Inter only", zero generic icon-card layouts.
   ============================================================ */

:root {
  --paper: #f3efe5;
  --paper-warm: #ece8dc;
  --paper-cool: #e8e4d6;
  --ink: #0a0a0a;
  --ink-2: #1a1a1a;
  --grey: #898583;
  --grey-2: #aeaaa6;
  --line: #0a0a0a;
  --line-soft: rgba(10,10,10,0.16);

  /* Vignelli-influenced primary palette */
  --red: #d83b27;
  --red-2: #b1311f;
  --blue: #1e4ea0;
  --blue-2: #0d3a85;
  --mint: #2da57c;
  --mint-2: #1f7a5b;
  --amber: #e2a32d;
  --amber-2: #c08510;

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.bauhaus, body.bauhaus.dark-mode {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 15.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.bauhaus ::selection { background: var(--red); color: #fff; }
body.bauhaus ::-moz-selection { background: var(--red); color: #fff; }
body.bauhaus a:not([class]) { color: inherit; }
body.bauhaus img { max-width: 100%; display: block; }

/* Specificity boost — without this, "body.bauhaus a" outranks ".bh-btn" and
   the dark-bg button text inherits black, becoming invisible on black bg.
   These rules use (0,0,2,1) specificity to win. */
body.bauhaus .bh-btn { color: var(--paper); }
body.bauhaus .bh-btn:hover { color: var(--paper); }
body.bauhaus .bh-btn-ghost { color: var(--ink); }
body.bauhaus .bh-btn-ghost:hover { color: var(--paper); }
body.bauhaus .bh-btn-red, body.bauhaus .bh-btn-mint { color: var(--paper); }
body.bauhaus .bh-mark { color: var(--ink); }
body.bauhaus .bh-nav a { color: var(--ink); }
body.bauhaus .bh-nav a.cta { color: var(--paper); }
body.bauhaus .bh-block-arrow { color: inherit; }
body.bauhaus .bh-faq-q { color: var(--ink); }
body.bauhaus .bh-footer-col a { color: rgba(255,255,255,0.85); }
body.bauhaus .bh-footer-col a:hover { color: var(--red); }
body.bauhaus .bh-sticky-cta a { color: var(--paper); }
body.bauhaus .bh-sticky-cta a:hover { color: var(--ink); }
body.bauhaus .bh-capture-btn { color: var(--paper); }
body.bauhaus .bh-capture-btn:hover { color: var(--ink); }
body.bauhaus .bh-prose a { color: var(--red); }
body.bauhaus .bh-prose a:hover { color: var(--ink); }

.skip { position: absolute; left: -9999px; padding: 12px 16px; background: var(--ink); color: var(--paper); z-index: 999; }
.skip:focus { left: 0; top: 0; }

.bh-wrap { max-width: 1320px; margin: 0 auto; padding: 0 28px; }
.bh-wrap-narrow { max-width: 880px; margin: 0 auto; padding: 0 28px; }

/* ======================== Marquee Ticker ======================== */
.bh-ticker {
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  border-bottom: 1px solid var(--ink);
}
.bh-ticker-track {
  display: flex;
  gap: 56px;
  padding: 10px 0;
  animation: bh-ticker 38s linear infinite;
  white-space: nowrap;
  font-family: 'Space Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  will-change: transform;
}
.bh-ticker-track span { display: inline-flex; align-items: center; gap: 14px; }
.bh-ticker-track .sep { color: var(--red); font-weight: 700; }
@keyframes bh-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bh-ticker-track { animation: none; } }

/* ======================== Top Bar ======================== */
.bh-topbar {
  background: var(--paper);
  border-top: 8px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  position: sticky;
  top: 0;
  z-index: 50;
}
.bh-topbar .inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Space Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 700;
  gap: 14px;
}
.bh-mark { color: var(--ink); text-decoration: none; }
.bh-mark .ed { color: var(--grey); font-weight: 400; margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--grey-2); }
.bh-nav { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.bh-nav a { color: var(--ink); text-decoration: none; padding: 4px 0; position: relative; }
.bh-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform 220ms var(--ease-out);
}
.bh-nav a:hover::after, .bh-nav a[aria-current="page"]::after { transform: scaleX(1); }
.bh-nav a.cta {
  background: var(--ink);
  color: var(--paper);
  padding: 8px 14px;
  text-decoration: none;
}
.bh-nav a.cta:hover { background: var(--red); }
.bh-nav a.cta::after { display: none; }
@media (max-width: 880px) { .bh-nav a:not(.cta) { display: none; } }

/* ======================== Buttons ======================== */
.bh-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-decoration: none;
  cursor: pointer;
  transition: 200ms;
  white-space: nowrap;
}
.bh-btn:hover { background: var(--red); border-color: var(--red); }
.bh-btn-ghost { background: var(--paper); color: var(--ink); }
.bh-btn-ghost:hover { background: var(--ink); color: var(--paper); }
.bh-btn-red { background: var(--red); border-color: var(--red); }
.bh-btn-red:hover { background: var(--ink); border-color: var(--ink); }
.bh-btn-mint { background: var(--mint-2); border-color: var(--mint-2); }
.bh-btn-mint:hover { background: var(--ink); border-color: var(--ink); }

.bh-btn svg { transition: transform 220ms var(--ease-out); }
.bh-btn:hover svg { transform: translateX(3px); }

/* ======================== Section base ======================== */
.bh-section {
  border-bottom: 1px solid var(--ink);
  padding: 64px 0;
}
.bh-section.bh-section-narrow { padding: 56px 0; }
.bh-section-head {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 48px;
}
@media (max-width: 880px) { .bh-section-head { grid-template-columns: 1fr; gap: 24px; } }

.hero-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  align-items: end;
}
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; align-items: start; }
}
.bh-info-tag {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
  font-weight: 700;
  border-top: 4px solid var(--red);
  padding-top: 12px;
}
.bh-h2 {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.bh-section-head .ann {
  font-size: 17.5px;
  color: var(--ink);
  max-width: 56ch;
  line-height: 1.5;
}

.bh-page-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: clamp(56px, 8vw, 120px);
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.bh-page-title .red { color: var(--red); }
.bh-page-title .blue { color: var(--blue); }
.bh-page-title .mint { color: var(--mint-2); }

.bh-page-deck {
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 56ch;
  margin-top: 22px;
}

.bh-page-tag {
  font-family: 'Space Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
  border-top: 6px solid var(--red);
  padding-top: 14px;
  margin-bottom: 28px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.bh-page-tag .live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mint-2);
  font-weight: 700;
}
.bh-page-tag .live::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--mint); box-shadow: 0 0 0 0 rgba(45,165,124,0.55);
  animation: bh-pulse 2.4s infinite;
}
@keyframes bh-pulse {
  0% { box-shadow: 0 0 0 0 rgba(45,165,124,0.5); }
  70% { box-shadow: 0 0 0 12px rgba(45,165,124,0); }
  100% { box-shadow: 0 0 0 0 rgba(45,165,124,0); }
}

/* ======================== Number row ======================== */
.bh-number-row {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-left: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
}
@media (max-width: 720px) { .bh-number-row { grid-template-columns: repeat(2, 1fr); } }
.bh-number-cell {
  border-right: 1px solid var(--ink);
  padding: 24px;
  background: var(--paper);
  transition: 220ms;
}
.bh-number-cell:hover { background: var(--paper-warm); }
.bh-number-cell:last-child { border-right: none; }
@media (max-width: 720px) {
  .bh-number-cell:nth-child(2) { border-right: none; }
  .bh-number-cell:nth-child(1), .bh-number-cell:nth-child(2) { border-bottom: 1px solid var(--ink); }
}
.bh-number-cell .lbl {
  font-family: 'Space Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 4px;
  font-weight: 700;
}
.bh-number-cell .v {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: clamp(34px, 4vw, 50px);
  letter-spacing: -2.5px;
  line-height: 1;
}
.bh-number-cell .v .unit { font-size: 0.36em; letter-spacing: 0; color: var(--grey); margin-left: 6px; font-weight: 700; vertical-align: 0.2em; }
.bh-v-red { color: var(--red); }
.bh-v-blue { color: var(--blue); }
.bh-v-mint { color: var(--mint-2); }
.bh-v-amber { color: var(--amber-2); }

/* ======================== Module blocks ======================== */
.bh-blocks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
}
.bh-blocks-3 { grid-template-columns: repeat(3, 1fr); }
.bh-blocks-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) { .bh-blocks-3, .bh-blocks-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .bh-blocks, .bh-blocks-3, .bh-blocks-4 { grid-template-columns: 1fr; } }

.bh-block {
  background: var(--paper);
  padding: 32px 28px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 320px;
  position: relative;
  transition: 220ms var(--ease-out);
  overflow: hidden;
}
.bh-block.is-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform 320ms var(--ease-out);
  z-index: 0;
}
.bh-block.is-link > * { position: relative; z-index: 1; transition: color 220ms var(--ease-out); }
.bh-block.is-link:hover::before { transform: translateY(0); }
.bh-block.is-link:hover { color: var(--paper); }
.bh-block.is-link:hover .bh-block-num { color: var(--paper); }
.bh-block.is-link:hover .bh-block-pill { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.bh-block:focus-visible { outline: 4px solid var(--red); outline-offset: -6px; }

.bh-block-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px solid currentColor;
  padding-bottom: 12px;
}
.bh-block-num {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 72px;
  line-height: 0.85;
  letter-spacing: -3px;
  transition: color 220ms;
}
.bh-block-num.red { color: var(--red); }
.bh-block-num.blue { color: var(--blue); }
.bh-block-num.mint { color: var(--mint-2); }
.bh-block-num.amber { color: var(--amber-2); }

.bh-block-pill {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--ink);
  color: var(--paper);
  padding: 4px 10px;
  border: 2px solid var(--ink);
  transition: 220ms;
  display: inline-block;
  line-height: 1.3;
  text-align: right;
}
.bh-block-pill.is-mint { background: var(--mint-2); border-color: var(--mint-2); }
.bh-block-pill.is-red { background: var(--red); border-color: var(--red); }

.bh-block h3 {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  line-height: 1.05;
}
.bh-block p { font-size: 15px; line-height: 1.5; max-width: 38ch; }

.bh-block-arrow {
  margin-top: auto;
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 220ms var(--ease-out);
}
.bh-block.is-link:hover .bh-block-arrow { transform: translateX(6px); }

/* ======================== Inputs / forms ======================== */
.bh-input {
  padding: 14px 16px;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-family: 'Archivo', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  outline: none;
  transition: 200ms;
  width: 100%;
}
.bh-input:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--red); border-color: var(--red); }
.bh-input::placeholder { color: var(--grey); }

.bh-form-card {
  background: var(--paper-warm);
  border: 2px solid var(--ink);
  padding: 24px;
}

/* ============================================================
   Hero diagnostic card (#ap-calc) — Option 02: NAVY INVERSE.
   The primary CTA on the homepage flips the page contrast: card
   is brand navy against the cream paper, white input becomes the
   bright click target, red DIAGNOSE button is the action color,
   red offset shadow grounds the composition.
   Targeted by ID so other .bh-form-card uses stay quiet.
   ============================================================ */
#ap-calc {
  background: var(--blue);
  border: 3px solid var(--blue);
  color: #fff;
  box-shadow: 8px 8px 0 var(--red);
  position: relative;
  transition: box-shadow 220ms ease, transform 220ms ease;
}
#ap-calc:hover,
#ap-calc:focus-within {
  box-shadow: 10px 10px 0 var(--red);
  transform: translate(-1px, -1px);
}

/* Label sits on the navy field — make it white + add the pulsing red dot. */
#ap-calc .bh-form-label {
  color: #fff;
}
#ap-calc .bh-form-label > span:first-child {
  position: relative;
  padding-left: 18px;
}
#ap-calc .bh-form-label > span:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: var(--red);
  border-radius: 50%;
  animation: apCalcPulse 2.4s ease-in-out infinite;
}
@keyframes apCalcPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.35); }
}

/* White input inside the navy card — becomes the bright click target. */
#ap-calc .bh-input {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}
#ap-calc .bh-input::placeholder { color: var(--grey); }
#ap-calc .bh-input:focus {
  background: #fff;
  border-color: var(--red);
  box-shadow: inset 0 0 0 2px var(--red);
}

/* Red DIAGNOSE button — the action color, distinct from the navy field.
   Carries the same cell-sweep wave-of-squares treatment as the score-reveal
   upsell CTA (.ap-upsell-cta). Cells are paper-cream and sweep across the
   red field left-to-right on hover. */
#ap-calc .bh-btn,
.ap-diagnose-btn {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: filter 200ms ease;
}
.ap-diagnose-btn .ap-diagnose-label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ap-diagnose-btn .bh-cta-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(3, 1fr);
  pointer-events: none;
  z-index: 1;
}
.ap-diagnose-btn .bh-cta-cell {
  background: var(--paper);
  opacity: 0;
  transform: scale(0.85);
  transition: none;
  animation: none;
}
/* On hover (only when enabled): cells sweep left-to-right in a loop.
   Uses the same bh-cta-sweep keyframes the upsell button defines.
   Duration is 2× the upsell CTA's 1.4s — Taylor wanted the homepage
   DIAGNOSE wave at half speed so it feels less frantic on the hero card. */
.ap-diagnose-btn:hover:not(:disabled) .bh-cta-cell {
  animation: bh-cta-sweep 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: var(--d, 0ms);
}
/* Disabled state — flat, no sweep, dims so users see "type a job first" cue */
#ap-calc .bh-btn:disabled,
.ap-diagnose-btn:disabled {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.55);
  cursor: not-allowed;
}
#ap-calc .bh-btn:disabled .bh-cta-cell,
.ap-diagnose-btn:disabled .bh-cta-cell {
  animation: none !important;
  opacity: 0;
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .ap-diagnose-btn:hover:not(:disabled) .bh-cta-cell {
    animation: none;
    opacity: 0;
  }
}

/* Foot row — readable on navy, link in white. */
#ap-calc .bh-form-foot {
  color: rgba(255,255,255,0.7);
}
#ap-calc .bh-form-foot a {
  color: #fff;
  text-decoration-color: rgba(255,255,255,0.55);
}
#ap-calc .bh-form-foot a:hover {
  color: #fff;
  text-decoration-color: #fff;
}

/* Suggestions dropdown that sits inside the form — keep readable on navy.
   The dropdown is rendered with position:absolute by JS; force a light bg. */
#ap-calc .suggestions {
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--ink);
}

/* Mobile: pull the shadow tighter so it doesn't overflow */
@media (max-width: 640px) {
  #ap-calc { box-shadow: 5px 5px 0 var(--red); }
  #ap-calc:hover,
  #ap-calc:focus-within { box-shadow: 6px 6px 0 var(--red); transform: none; }
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  #ap-calc .bh-form-label > span:first-child::before { animation: none; }
  #ap-calc { transition: none; }
}
.bh-form-row { display: flex; gap: 6px; flex-wrap: wrap; }
.bh-form-row .bh-input { flex: 1; min-width: 200px; }
.bh-form-label {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.bh-form-label .stage { color: var(--red); }
.bh-form-foot {
  margin-top: 12px;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--grey);
  letter-spacing: 0.5px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  text-transform: uppercase;
}
.bh-form-foot a { color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--red); padding-bottom: 1px; font-weight: 700; }
.bh-form-foot a:hover { color: var(--red); }

/* ======================== FAQ ======================== */
.bh-faq-list { border: 1px solid var(--ink); }
.bh-faq-item { border-bottom: 1px solid var(--ink); background: var(--paper); }
.bh-faq-item:last-child { border-bottom: none; }
.bh-faq-q {
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 22px 28px;
  font-family: 'Archivo', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  transition: 200ms;
}
.bh-faq-q:hover { background: var(--paper-warm); color: var(--red); }
.bh-faq-q .num {
  font-family: 'Space Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 1.5px;
  color: var(--red);
  margin-right: 10px;
  font-weight: 700;
}
.bh-faq-q .plus {
  width: 22px; height: 22px; flex-shrink: 0; position: relative;
}
.bh-faq-q .plus::before, .bh-faq-q .plus::after { content: ""; position: absolute; inset: 0; margin: auto; background: currentColor; }
.bh-faq-q .plus::before { width: 14px; height: 2px; }
.bh-faq-q .plus::after { width: 2px; height: 14px; transition: transform 280ms var(--ease-spring); }
.bh-faq-item.open .bh-faq-q .plus::after { transform: rotate(90deg); }

.bh-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms var(--ease-out), padding 320ms var(--ease-out);
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 70ch;
  padding: 0 28px;
}
.bh-faq-a a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.bh-faq-item.open .bh-faq-a { max-height: 600px; padding: 0 28px 22px; }

/* ======================== Founder ======================== */
.bh-founder {
  border: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 280px 1fr;
  background: var(--paper);
}
@media (max-width: 720px) { .bh-founder { grid-template-columns: 1fr; } }
.bh-founder-photo {
  background: var(--paper-warm);
  border-right: 1px solid var(--ink);
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 720px) { .bh-founder-photo { border-right: none; border-bottom: 1px solid var(--ink); } }
.bh-founder-photo img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border: 4px solid var(--ink);
  filter: contrast(1.05);
}
.bh-founder-body { padding: 32px; }
.bh-founder-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.6px;
  color: var(--red);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 12px;
}
.bh-founder-body h3 {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 32px;
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.bh-founder-credential {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 18px;
  font-weight: 700;
}
.bh-founder-credential .verified {
  display: inline-block;
  background: var(--mint-2);
  color: var(--paper);
  padding: 2px 8px;
  margin-left: 6px;
}
.bh-founder-body p { font-size: 15.5px; line-height: 1.55; color: var(--ink); max-width: 60ch; }
.bh-founder-body p a { color: var(--red); border-bottom: 2px solid var(--red); padding-bottom: 1px; text-decoration: none; font-weight: 700; }

/* ======================== Footer ======================== */
.bh-footer { background: var(--ink); color: var(--paper); padding: 56px 0 24px; border-top: 8px solid var(--red); }
.bh-footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 720px) { .bh-footer-top { grid-template-columns: 1fr 1fr; gap: 24px; } }
.bh-footer-brand {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 12px;
}
.bh-footer-brand .red { color: var(--red); }
.bh-footer-tag { color: rgba(255,255,255,0.6); font-size: 13.5px; max-width: 36ch; line-height: 1.5; }
.bh-footer-col h5 { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 14px; font-weight: 700; }
.bh-footer-col a { display: block; padding: 5px 0; color: rgba(255,255,255,0.85); text-decoration: none; font-size: 14px; transition: color 200ms; }
.bh-footer-col a:hover { color: var(--red); }
.bh-footer-fine {
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ======================== Sticky CTA ======================== */
.bh-sticky-cta {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(140%);
  z-index: 60;
  background: var(--red);
  color: var(--paper);
  padding: 12px 12px 12px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Archivo', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  box-shadow: 0 24px 60px -28px rgba(0,0,0,0.6);
  transition: transform 320ms var(--ease-spring);
  max-width: calc(100% - 32px);
  border: 2px solid var(--ink);
}
.bh-sticky-cta.show { transform: translateX(-50%) translateY(0); }
.bh-sticky-cta a {
  background: var(--ink);
  color: var(--paper);
  padding: 8px 16px;
  text-decoration: none;
  font-weight: 700;
  border: 2px solid var(--ink);
  transition: 220ms;
}
.bh-sticky-cta a:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ======================== Reveal animation ======================== */
.bh-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.bh-reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .bh-reveal, .bh-reveal.in { opacity: 1; transform: none; transition: none; }
  .bh-block, .bh-block::before, .bh-btn, .bh-block-pill, .bh-sticky-cta, .bh-faq-q .plus::after, .bh-page-tag .live::before {
    transition: none !important; animation: none !important;
  }
}

/* ======================== Comparison table ======================== */
.bh-compare {
  border: 1px solid var(--ink);
  background: var(--paper);
  overflow: hidden;
}
.bh-compare-head { padding: 24px 28px; background: var(--ink); color: var(--paper); }
.bh-compare-head h3 { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 26px; letter-spacing: -0.02em; text-transform: uppercase; }
.bh-compare-head p { color: rgba(255,255,255,0.7); font-size: 13.5px; margin-top: 6px; max-width: 60ch; }

.bh-compare-row {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1fr 1fr;
  border-top: 1px solid var(--ink);
}
.bh-compare-row > div {
  padding: 16px 22px;
  font-size: 14px;
  border-left: 1px solid var(--ink);
}
.bh-compare-row > div:first-child { border-left: none; font-weight: 700; }
.bh-compare-row.head > div {
  background: var(--paper-warm);
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
}
.bh-compare-row.head .us { background: var(--red); color: var(--paper); }
.bh-cell-yes { color: var(--mint-2); font-weight: 700; }
.bh-cell-no { color: var(--grey); }
.bh-cell-meh { color: var(--amber-2); font-weight: 700; }
@media (max-width: 720px) {
  .bh-compare-row { grid-template-columns: 1fr; }
  .bh-compare-row > div { border-left: none; border-top: 1px solid var(--ink); padding: 10px 24px; }
  .bh-compare-row > div::before { content: attr(data-label); display: block; font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--grey); margin-bottom: 4px; }
  .bh-compare-row.head { display: none; }
}

/* ======================== Capture (dark CTA block) ======================== */
.bh-capture {
  background: var(--ink);
  color: var(--paper);
  padding: 48px 40px;
  border: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 880px) { .bh-capture { grid-template-columns: 1fr; padding: 32px 24px; } }
.bh-capture-eyebrow { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 1.6px; color: var(--mint); text-transform: uppercase; margin-bottom: 14px; font-weight: 700; }
.bh-capture h3 {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 36px;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.bh-capture p { color: rgba(255,255,255,0.72); font-size: 15px; max-width: 50ch; }
.bh-capture-row { display: flex; gap: 8px; }
.bh-capture-input {
  flex: 1;
  padding: 14px 16px;
  background: var(--paper);
  border: 2px solid var(--paper);
  color: var(--ink);
  font-family: 'Archivo', sans-serif;
  font-size: 16px;
  outline: none;
}
.bh-capture-input:focus { border-color: var(--red); }
.bh-capture-btn {
  padding: 14px 22px;
  background: var(--red);
  color: var(--paper);
  border: 2px solid var(--red);
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  cursor: pointer;
  transition: 220ms;
}
.bh-capture-btn:hover { background: var(--paper); color: var(--ink); }
.bh-capture-fine { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 6px; font-family: 'Space Mono', monospace; letter-spacing: 0.5px; text-transform: uppercase; }

/* ======================== Long-form prose (about, methodology, privacy, terms) ======================== */
.bh-prose { max-width: 64ch; font-size: 16.5px; line-height: 1.65; color: var(--ink); }
.bh-prose h2 {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-top: 2em;
  margin-bottom: 0.6em;
  border-top: 4px solid var(--ink);
  padding-top: 0.7em;
  line-height: 1.05;
}
.bh-prose h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.bh-prose h3 {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.015em;
  margin-top: 1.6em;
  margin-bottom: 0.4em;
}
.bh-prose p { margin-bottom: 1.1em; }
.bh-prose ul, .bh-prose ol { margin: 0 0 1.2em 1.4em; }
.bh-prose li { margin-bottom: 0.5em; }
.bh-prose strong { font-weight: 700; }
.bh-prose code { font-family: 'Space Mono', monospace; font-size: 0.92em; background: var(--paper-warm); padding: 1px 6px; }
.bh-prose a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.bh-prose a:hover { color: var(--ink); }

/* ======================== JS-rendered overrides (score.js, interview.js) ======================== */
/* These re-skin the result panel that score.js generates so it lands in Bauhaus aesthetic. */
body.bauhaus .ap-result {
  background: var(--paper-warm);
  border: 2px solid var(--ink);
  border-radius: 0 !important;
  padding: 28px;
  color: var(--ink);
  box-shadow: none !important;
}
/* Kill the rainbow rainbow stripe on the result card */
body.bauhaus .ap-result::before {
  content: "" !important;
  background: var(--ink) !important;
  height: 4px !important;
}
body.bauhaus .ap-result .top {
  display: grid;
  grid-template-columns: 260px 1fr 280px;
  gap: 32px;
  align-items: center;
  margin-bottom: 28px;
  padding: 32px 36px;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
@media (max-width: 920px) {
  body.bauhaus .ap-result .top {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 24px;
    text-align: center;
  }
}
body.bauhaus .ap-result .head .occ {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
}
body.bauhaus .ap-result .head h2 {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 6px 0 8px;
}
body.bauhaus .ap-result .band-pill {
  display: inline-block;
  padding: 4px 12px;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Space Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 0;
  font-weight: 700;
}
/* ============ Square gauge — new score-reveal top panel ============ */
body.bauhaus .ap-result .gauge {
  width: 240px !important;
  height: 240px !important;
  position: relative !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.bauhaus .ap-result .gauge .bh-sq-gauge {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
body.bauhaus .ap-result .gauge .num {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 900 !important;
  font-size: 112px !important;
  letter-spacing: -0.06em !important;
  line-height: 0.85 !important;
  color: var(--ink) !important;
  text-align: center !important;
  position: relative !important;
  z-index: 1 !important;
}
body.bauhaus .ap-result .gauge .num .of {
  font-family: 'Space Mono', monospace !important;
  font-size: 13px !important;
  letter-spacing: 1.4px !important;
  font-weight: 700 !important;
  color: var(--grey) !important;
  margin-top: 4px !important;
  letter-spacing: 1.6px !important;
}

/* The tumbling cube — pseudo-3D die that tips end-over-end around the
   gauge perimeter, painting the stroke fill as it moves. Single-shot:
   plays score% of one full lap (via animation-iteration-count = score/100)
   and stops at the final position with animation-fill-mode: forwards. */
/* Square gauge stroke-fill animation — interpolates dashoffset from
   full perimeter (empty) down to (perim - fillLen) using inline CSS vars. */
@keyframes bh-sq-gauge-fill {
  from { stroke-dashoffset: var(--gauge-perim, 904); }
  to   { stroke-dashoffset: var(--gauge-target, 250); }
}

/* Center the role title block now that it's the middle column */
body.bauhaus .ap-result .head {
  text-align: center;
  padding: 0 12px;
}
body.bauhaus .ap-result .head h2 {
  font-size: 44px !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
  margin: 10px 0 12px !important;
}
body.bauhaus .ap-result .head .occ {
  display: block !important;
}

/* Radar on the right column — wraps the visualization + 4 hoverable labels
   + the info-zone that swaps content based on which label is hovered. */
body.bauhaus .ap-result .radar-wrap {
  width: 320px;
  margin-left: auto;
}
body.bauhaus .ap-result .radar-vis {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto;
  padding: 0;
}
body.bauhaus .ap-result .radar-wrap svg {
  width: 280px !important;
  height: 280px !important;
  display: block;
  position: relative;
  z-index: 1;
}
body.bauhaus .ap-result .radar-cap {
  font-family: 'Space Mono', monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  color: var(--grey) !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin-top: 14px !important;
}

/* The 4 hoverable axis labels — compact 32×32 chips at the cardinal vertices.
   Each is just a glyph (α/β/↗/⇄) on an ink-bordered paper chip with a subtle
   pulse-ring affordance signaling "I'm interactive". On hover the chip fills
   red, scales 1.15, and the info-zone below swaps to the matching content. */
body.bauhaus .ap-result .radar-label {
  position: absolute;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 2px solid var(--ink);
  color: var(--ink);
  cursor: help;
  padding: 0;
  z-index: 4;
  transition: background 200ms ease, color 200ms ease, transform 200ms cubic-bezier(0.34, 1.4, 0.64, 1);
  /* Reset button defaults */
  font-family: 'Archivo', sans-serif;
  line-height: 1;
  border-radius: 0;
}
/* Subtle pulse ring affordance — signals "interactive" without screaming.
   Drawn as a 2px ink outline that expands and fades on a slow loop. */
body.bauhaus .ap-result .radar-label::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid var(--red);
  pointer-events: none;
  opacity: 0;
  animation: bh-radar-pulse 2.8s ease-out infinite;
}
body.bauhaus .ap-result .radar-label[data-pos="right"]::after  { animation-delay: 0.7s; }
body.bauhaus .ap-result .radar-label[data-pos="bottom"]::after { animation-delay: 1.4s; }
body.bauhaus .ap-result .radar-label[data-pos="left"]::after   { animation-delay: 2.1s; }
@keyframes bh-radar-pulse {
  0%   { transform: scale(1);    opacity: 0.55; }
  60%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

body.bauhaus .ap-result .radar-label .lbl-glyph {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 17px;
  color: var(--ink);
  line-height: 1;
}

body.bauhaus .ap-result .radar-label:hover,
body.bauhaus .ap-result .radar-label:focus-visible,
body.bauhaus .ap-result .radar-label.is-active {
  background: var(--red);
  border-color: var(--ink);
  outline: none;
  transform: scale(1.15);
}
body.bauhaus .ap-result .radar-label[data-pos="top"]:hover,
body.bauhaus .ap-result .radar-label[data-pos="top"]:focus-visible,
body.bauhaus .ap-result .radar-label[data-pos="top"].is-active,
body.bauhaus .ap-result .radar-label[data-pos="bottom"]:hover,
body.bauhaus .ap-result .radar-label[data-pos="bottom"]:focus-visible,
body.bauhaus .ap-result .radar-label[data-pos="bottom"].is-active {
  transform: translateX(-50%) scale(1.15);
}
body.bauhaus .ap-result .radar-label[data-pos="right"]:hover,
body.bauhaus .ap-result .radar-label[data-pos="right"]:focus-visible,
body.bauhaus .ap-result .radar-label[data-pos="right"].is-active,
body.bauhaus .ap-result .radar-label[data-pos="left"]:hover,
body.bauhaus .ap-result .radar-label[data-pos="left"]:focus-visible,
body.bauhaus .ap-result .radar-label[data-pos="left"].is-active {
  transform: translateY(-50%) scale(1.15);
}
body.bauhaus .ap-result .radar-label:hover .lbl-glyph,
body.bauhaus .ap-result .radar-label:focus-visible .lbl-glyph,
body.bauhaus .ap-result .radar-label.is-active .lbl-glyph {
  color: var(--paper);
}
/* Pause the pulse when the user is hovering (don't compete with the active state) */
body.bauhaus .ap-result .radar-label:hover::after,
body.bauhaus .ap-result .radar-label:focus-visible::after,
body.bauhaus .ap-result .radar-label.is-active::after {
  animation-play-state: paused;
  opacity: 0;
}

/* Position labels at the 4 cardinal extremes of the .radar-vis container. */
body.bauhaus .ap-result .radar-label[data-pos="top"]    {
  top: -8px;  left: 50%;  transform: translateX(-50%);
}
body.bauhaus .ap-result .radar-label[data-pos="bottom"] {
  bottom: -8px; left: 50%; transform: translateX(-50%);
}
body.bauhaus .ap-result .radar-label[data-pos="right"]  {
  top: 50%;  right: -8px; transform: translateY(-50%);
}
body.bauhaus .ap-result .radar-label[data-pos="left"]   {
  top: 50%;  left: -8px;  transform: translateY(-50%);
}

/* Info zone — sits below the radar, shows the active signal's explanation.
   Swaps content on label hover via JS (wireRadarLabels). */
body.bauhaus .ap-result .radar-info-zone {
  margin-top: 14px;
  min-height: 132px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-top: 4px solid var(--red);
  padding: 14px 16px;
  position: relative;
}
body.bauhaus .ap-result .radar-info {
  display: none;
}
body.bauhaus .ap-result .radar-info.active {
  display: block;
  animation: bh-radar-info-in 240ms cubic-bezier(0.34, 1.2, 0.64, 1);
}
body.bauhaus .ap-result .radar-info .info-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
body.bauhaus .ap-result .radar-info .info-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 11px;
  flex-shrink: 0;
}
body.bauhaus .ap-result .radar-info .info-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 17px;
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
}
body.bauhaus .ap-result .radar-info .info-body {
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
@keyframes bh-radar-info-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  body.bauhaus .ap-result .radar-info.active { animation: none; }
}
/* Collapse layout on narrow viewports — labels keep their positions but
   info zone goes full-width below. */
@media (max-width: 920px) {
  body.bauhaus .ap-result .radar-wrap {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
}
body.bauhaus .ap-result .projections {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 2px solid var(--ink);
  margin: 18px 0 22px;
}
body.bauhaus .ap-result .projection { padding: 14px 18px; border-right: 1px solid var(--ink); background: var(--paper); }
body.bauhaus .ap-result .projection:last-child { border-right: none; }
body.bauhaus .ap-result .projection .label {
  font-family: 'Space Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--grey);
  font-weight: 700;
}
body.bauhaus .ap-result .projection .val {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -1.5px;
  margin-top: 4px;
}
body.bauhaus .ap-result .projection .delta {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--grey);
  margin-top: 2px;
}
body.bauhaus .ap-result .lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 20px 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  margin-bottom: 20px;
}
@media (max-width: 720px) { body.bauhaus .ap-result .lists { grid-template-columns: 1fr; } }
body.bauhaus .ap-result .lists .col h3 {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
body.bauhaus .ap-result .lists .col h3.risk { color: var(--red); }
body.bauhaus .ap-result .lists .col h3.skill { color: var(--mint-2); }
body.bauhaus .ap-result .lists ul { list-style: none; padding: 0; }
body.bauhaus .ap-result .lists li {
  font-size: 14.5px;
  line-height: 1.5;
  padding: 6px 0 6px 22px;
  position: relative;
}
body.bauhaus .ap-result .lists .risk + ul li::before { content: "▸"; position: absolute; left: 0; color: var(--red); font-weight: 700; }
body.bauhaus .ap-result .lists .skill + ul li::before { content: "▸"; position: absolute; left: 0; color: var(--mint-2); font-weight: 700; }
body.bauhaus .ap-result .ap-upsell-bar,
body.bauhaus .ap-upsell-bar {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center;
  gap: 24px;
  background: var(--ink) !important;
  color: var(--paper) !important;
  padding: 28px 32px !important;
  text-decoration: none;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  margin: 16px 0 !important;
  box-shadow: none !important;
  animation: none !important;
  transition: background 200ms ease !important;
  position: relative;
}
@media (max-width: 600px) {
  body.bauhaus .ap-upsell-bar { grid-template-columns: 1fr !important; }
}

body.bauhaus .ap-upsell-bar::before {
  content: "" !important;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px !important;
  background: var(--red) !important;
  background-size: auto !important;
  animation: none !important;
}
body.bauhaus .ap-upsell-bar:hover {
  background: var(--ink) !important;
  border-color: var(--red) !important;
  transform: none !important;
  box-shadow: 0 0 0 4px rgba(216,59,39,0.18) !important;
  color: var(--paper) !important;
}
body.bauhaus .ap-upsell-bar:hover::before {
  height: 8px !important;
  background: var(--red) !important;
}
/* old narrow-viewport collapse merged into the @820px rule below */

body.bauhaus .ap-upsell-bar .ap-upsell-text .lead,
body.bauhaus .ap-upsell-bar .lead {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 900 !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  color: var(--paper) !important;
  margin: 0 0 8px 0 !important;
}

body.bauhaus .ap-upsell-bar .ap-upsell-text .personalized,
body.bauhaus .ap-upsell-bar .personalized {
  display: inline-block !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  background: var(--mint) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 10px !important;
  margin: 0 0 12px 0 !important;
  font-weight: 700 !important;
}
body.bauhaus .ap-upsell-bar .ap-upsell-text .personalized strong,
body.bauhaus .ap-upsell-bar .personalized strong {
  color: var(--ink) !important;
  font-weight: 800 !important;
}

body.bauhaus .ap-upsell-bar .ap-upsell-text .sub,
body.bauhaus .ap-upsell-bar .sub {
  color: rgba(255,255,255,0.78) !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  font-family: 'Archivo', sans-serif !important;
  margin: 0 !important;
}

/* GRID-SWEEP CTA — Hillmann-echo button.
   Button is solid red at rest. On hover, a 14×3 grid of paper-cream cells
   fades in with staggered left-to-right delays, then fades back out. Wave
   loops while hovered. Off-hover, animation halts and cells reset to invisible —
   so the button starts red and ends red. */
body.bauhaus .ap-upsell-bar .ap-upsell-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: var(--red) !important;
  color: var(--paper) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  padding: 18px 28px !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  position: relative !important;
  overflow: hidden !important;       /* clip the grid cells to button bounds */
  isolation: isolate !important;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
  transition: border-color 200ms ease !important;
}

/* The cell grid — fills the button, positioned behind the text */
body.bauhaus .ap-upsell-bar .ap-upsell-cta .bh-cta-grid {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(14, 1fr) !important;
  grid-template-rows: repeat(3, 1fr) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
body.bauhaus .ap-upsell-bar .ap-upsell-cta .bh-cta-cell {
  background: var(--paper) !important;
  opacity: 0;
  transform: scale(0.85);
  transition: none;
  animation: none;
}

/* On hover: cells animate in a continuous sweep wave.
   Each cell uses its own --d delay so the wave reads left-to-right. */
body.bauhaus .ap-upsell-bar:hover .ap-upsell-cta .bh-cta-cell {
  animation: bh-cta-sweep 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: var(--d, 0ms);
}
@keyframes bh-cta-sweep {
  0%   { opacity: 0;    transform: scale(0.85); }
  35%  { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0;    transform: scale(1); }
}

/* ============ BH-CTA-FINAL — end-of-page big CTA with grid-sweep echo
   Paper-cream base button on the mint-2 panel. On hover, cells of ink-warm
   sweep across left-to-right (same Hillmann-echo DNA as the score-reveal
   upsell button, but inverted color palette for a paper button on green). */
body.bauhaus .bh-cta-final {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 18px 30px;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.bauhaus .bh-cta-final:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--ink);
}
body.bauhaus .bh-cta-final .bh-cta-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(3, 1fr);
  pointer-events: none;
  z-index: 0;
}
body.bauhaus .bh-cta-final .bh-cta-cell {
  background: var(--red);
  opacity: 0;
  transform: scale(0.85);
  animation: none;
}
body.bauhaus .bh-cta-final:hover .bh-cta-cell {
  animation: bh-cta-sweep 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: var(--d, 0ms);
}
body.bauhaus .bh-cta-final .action {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}
body.bauhaus .bh-cta-final .action::before {
  content: "→";
  font-weight: 900;
  font-size: 19px;
  line-height: 1;
  color: var(--red);
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.bauhaus .bh-cta-final:hover .action::before {
  transform: translateX(6px);
}
@media (prefers-reduced-motion: reduce) {
  body.bauhaus .bh-cta-final:hover .bh-cta-cell { animation: none !important; }
  body.bauhaus .bh-cta-final { transition: none; }
}

/* Override styles.css legacy ::after pulse-ring (line 720) — neutralize it */
body.bauhaus .ap-upsell-bar .ap-upsell-cta::after {
  content: none !important;
  animation: none !important;
}

/* Text + arrow sit ABOVE the grid via z-index */
body.bauhaus .ap-upsell-bar .ap-upsell-cta .action {
  position: relative !important;
  z-index: 1 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--paper) !important;
  color: var(--paper) !important;
  animation: none !important;
}
body.bauhaus .ap-upsell-bar .ap-upsell-cta .action::after {
  content: "→";
  display: inline-block;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  margin-left: 12px;
  transition: transform 220ms ease-out;
}
body.bauhaus .ap-upsell-bar:hover .ap-upsell-cta .action::after {
  transform: translateX(6px);
}

/* Subtle parent feedback on hover — outer red ring strengthens */
body.bauhaus .ap-upsell-bar:hover .ap-upsell-cta {
  border-color: var(--ink) !important;
}

@media (prefers-reduced-motion: reduce) {
  body.bauhaus .ap-upsell-bar:hover .ap-upsell-cta .bh-cta-cell { animation: none !important; }
}
body.bauhaus .ap-upsell-bar .ap-upsell-cta .price {
  background: rgba(255,255,255,0.18) !important;
  color: var(--paper) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 0 !important;
  font-family: 'Space Mono', monospace !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  padding: 3px 8px !important;
}
body.bauhaus .ap-upsell-bar:hover .ap-upsell-cta .price {
  background: rgba(0,0,0,0.18) !important;
  color: var(--ink) !important;
  border-color: rgba(0,0,0,0.28) !important;
}
body.bauhaus .ap-upsell-bar .ap-upsell-cta svg {
  transition: transform 220ms ease !important;
}
body.bauhaus .ap-upsell-bar:hover .ap-upsell-cta svg {
  transform: translateX(4px) !important;
}

/* Kill all the legacy AI-slop animations on the upsell bar */
body.bauhaus .ap-upsell-bar,
body.bauhaus .ap-upsell-bar::before,
body.bauhaus .ap-upsell-bar .ap-upsell-cta::after,
body.bauhaus .ap-upsell-bar .ap-upsell-cta .action {
  animation: none !important;
}

/* Live counter override */
body.bauhaus .ap-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--mint-2);
  font-weight: 700;
}
body.bauhaus .ap-live strong { color: var(--ink); font-weight: 900; }

/* Capture form inside result panel */
body.bauhaus .ap-result .capture {
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 22px;
}
body.bauhaus .ap-result .capture h3 {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 18px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
body.bauhaus .ap-result .capture p { font-size: 14px; color: var(--ink); margin-bottom: 12px; }
body.bauhaus .ap-result .capture form .row { display: flex; gap: 6px; flex-wrap: wrap; }
body.bauhaus .ap-result .capture form .row input[type="email"] {
  flex: 1; min-width: 200px;
  padding: 12px 14px;
  border: 2px solid var(--ink);
  background: var(--paper-warm);
  font-family: inherit;
  font-size: 15px;
  outline: none;
}
body.bauhaus .ap-result .capture form .row input[type="email"]:focus { border-color: var(--red); }
body.bauhaus .ap-result .capture form button {
  padding: 12px 20px;
  background: var(--red);
  color: var(--paper);
  border: 2px solid var(--red);
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: 220ms;
}
body.bauhaus .ap-result .capture form button:hover { background: var(--ink); border-color: var(--ink); }
body.bauhaus .ap-result .capture .fineprint { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: 1px; color: var(--grey); margin-top: 8px; text-transform: uppercase; }
body.bauhaus .ap-result .capture .fineprint a { color: var(--red); }

body.bauhaus .ap-result .share {
  border-top: 2px solid var(--ink);
  padding-top: 16px;
  margin-top: 16px;
}
body.bauhaus .ap-result .share .share-label {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 8px;
}

/* Score bar */
body.bauhaus .ap-scorebar-wrap { margin: 14px 0 18px; }
body.bauhaus .ap-scorebar-meta {
  display: flex;
  justify-content: space-between;
  font-family: 'Space Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 6px;
}
body.bauhaus .ap-scorebar-meta .target { color: var(--ink); font-weight: 700; }
body.bauhaus .ap-scorebar { background: var(--paper); border: 2px solid var(--ink); height: 14px; }
body.bauhaus .ap-scorebar .fill { height: 100%; background: var(--mint-2); transition: width 800ms var(--ease-out); }

/* Suggestions dropdown */
body.bauhaus .suggestions {
  background: var(--paper);
  border: 2px solid var(--ink);
  margin-top: 4px;
  max-height: 240px;
  overflow-y: auto;
}
body.bauhaus .suggestions .item {
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--line-soft);
}
body.bauhaus .suggestions .item:last-child { border-bottom: none; }
body.bauhaus .suggestions .item:hover, body.bauhaus .suggestions .item.active { background: var(--ink); color: var(--paper); }

/* Vertical chips */
body.bauhaus .ap-vchips {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  border: 1px solid var(--ink);
  margin-bottom: 24px;
}
body.bauhaus .ap-vchips button {
  background: var(--paper);
  border: 0;
  border-right: 1px solid var(--ink);
  padding: 10px 16px;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
  transition: 200ms;
}
body.bauhaus .ap-vchips button:hover { background: var(--paper-warm); }
body.bauhaus .ap-vchips button.active { background: var(--ink); color: var(--paper); }

/* Browse jobs */
body.bauhaus .ap-browse {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
}
@media (max-width: 880px) { body.bauhaus .ap-browse { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { body.bauhaus .ap-browse { grid-template-columns: 1fr; } }
body.bauhaus .ap-browse a {
  background: var(--paper);
  padding: 14px 18px;
  text-decoration: none;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  transition: 200ms;
}
body.bauhaus .ap-browse a:hover { background: var(--ink); color: var(--paper); }
/* ============================================================
   Resume Audit (ra-*) — Bauhaus light-mode overrides
   ============================================================ */
body.bauhaus .ra-form-card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 0;          /* moved to step blocks for sectional rhythm */
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
  box-shadow: 8px 8px 0 var(--ink);
}
body.bauhaus .ra-form-card::before {
  content: "";
  position: absolute;
  top: -2px; left: -2px; right: -2px;
  height: 8px;
  background: linear-gradient(to right,
    var(--red) 0 25%,
    var(--blue) 25% 50%,
    var(--mint-2) 50% 75%,
    var(--amber) 75% 100%);
}

/* ============ STEP HEADERS — architectural / posterlike ============
   Distinct from bullet rows. Steps act as SECTION DIVIDERS: a wide colored
   top rule spans the full width, the step number renders as oversized
   colored typography (no box), separated from the title by a vertical
   hairline. Bullets keep their compact ink-tile system below. */

body.bauhaus .ra-step {
  padding: 0;
  border-bottom: 2px solid var(--ink);
  position: relative;
}
body.bauhaus .ra-step:last-of-type { border-bottom: none; }

/* Wide horizontal rule that introduces each section — color varies by step */
body.bauhaus .ra-step::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--red);
}
body.bauhaus .ra-step.s2::before { background: var(--blue); }
body.bauhaus .ra-step.s3::before { background: var(--mint-2); }

/* Inner padding so the colored rule above runs edge-to-edge of the card */
body.bauhaus .ra-step > * { padding-left: 36px; padding-right: 36px; }
body.bauhaus .ra-step .ra-step-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 0;
  padding-top: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 22px;
}

/* The "01" / "02" / "03" — oversized typography, NOT a filled tile.
   This is the key differentiator from the compact bullet tiles. */
body.bauhaus .ra-step-num {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 88px;
  letter-spacing: -0.06em;
  line-height: 0.85;
  color: var(--red);
  background: transparent;
  width: auto;
  height: auto;
  display: block;
  padding: 0 28px 0 0;
  margin: 0 28px 0 0;
  border-right: 2px solid var(--ink);
  position: relative;
  -webkit-text-stroke: 0;
}
body.bauhaus .ra-step.s2 .ra-step-num { color: var(--blue); }
body.bauhaus .ra-step.s3 .ra-step-num { color: var(--mint-2); }
body.bauhaus .ra-step-num::after { content: none; }  /* kill the old side-stripe */

body.bauhaus .ra-step-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 34px;
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  padding-left: 0;
  align-self: end;
  padding-bottom: 6px;
}
body.bauhaus .ra-step-title .sub {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--red);
  margin-top: 10px;
}
body.bauhaus .ra-step.s2 .ra-step-title .sub { color: var(--blue); }
body.bauhaus .ra-step.s3 .ra-step-title .sub { color: var(--mint-2); }

/* Last step still needs bottom padding; first step needs no top padding above ::before */
body.bauhaus .ra-step > *:last-child { padding-bottom: 32px; }
@media (max-width: 720px) {
  body.bauhaus .ra-step-num { font-size: 62px; padding-right: 18px; margin-right: 18px; }
  body.bauhaus .ra-step-title { font-size: 24px; }
}
body.bauhaus .ra-error {
  background: var(--red);
  color: var(--paper);
  padding: 14px 18px;
  border: 2px solid var(--red);
  margin-bottom: 18px;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 14px;
  display: none;
}
body.bauhaus .ra-error.show { display: block; }
body.bauhaus .ra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 1.4rem; }
@media (max-width: 720px) { body.bauhaus .ra-grid { grid-template-columns: 1fr; } }
body.bauhaus .ra-label {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 6px;
}
body.bauhaus .ra-hint {
  display: block;
  color: var(--grey);
  font-size: 13px;
  margin-bottom: 8px;
  font-family: 'Archivo', sans-serif;
}
/* Inputs — primary (role) gets heavier treatment than secondary (email) */
body.bauhaus .ra-input,
body.bauhaus .ra-textarea {
  width: 100%;
  padding: 13px 16px;
  border: 2px solid var(--ink);
  background: var(--paper-warm);
  font-family: 'Archivo', sans-serif;
  font-size: 16px;
  color: var(--ink);
  outline: none;
  border-radius: 0;
  transition: 160ms ease-out;
}
body.bauhaus .ra-input--primary {
  font-size: 18px;
  font-weight: 600;
  padding: 16px 18px;
  background: #fff;
  box-shadow: 4px 4px 0 var(--ink);
}
body.bauhaus .ra-input--secondary {
  background: transparent;
  border-color: var(--grey);
  border-width: 1.5px;
  font-size: 16px;
}
body.bauhaus .ra-input:focus,
body.bauhaus .ra-textarea:focus {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--red), 4px 4px 0 var(--ink);
  border-color: var(--red);
}
body.bauhaus .ra-input--secondary:focus {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 2px var(--blue);
}
body.bauhaus .ra-textarea {
  min-height: 64px;
  resize: vertical;
  line-height: 1.45;
}

/* Bullet rows — chunky colored corner blocks, focus side-stripe */
body.bauhaus .ra-bullet-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0;
  align-items: stretch;
  margin-bottom: 12px;
  position: relative;
  transition: transform 140ms ease-out;
}
body.bauhaus .ra-bullet-row:hover { transform: translateX(2px); }
body.bauhaus .ra-bullet-num {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--paper);
  background: var(--ink);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 2px solid var(--ink);
  border-right: none;
}
body.bauhaus .ra-bullet-num::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: -6px;
  width: 6px;
  background: var(--red);
  transition: width 160ms ease-out;
}
/* Cycle accent colors red → blue → mint → amber across rows */
body.bauhaus .ra-bullet-row:nth-child(4n+1) .ra-bullet-num::after { background: var(--red); }
body.bauhaus .ra-bullet-row:nth-child(4n+2) .ra-bullet-num::after { background: var(--blue); }
body.bauhaus .ra-bullet-row:nth-child(4n+3) .ra-bullet-num::after { background: var(--mint-2); }
body.bauhaus .ra-bullet-row:nth-child(4n+4) .ra-bullet-num::after { background: var(--amber); }
body.bauhaus .ra-bullet-row:focus-within .ra-bullet-num::after { width: 10px; }
body.bauhaus .ra-bullet-input { width: 100%; }
body.bauhaus .ra-bullet-input .ra-textarea {
  margin-left: 6px;
  border-left-width: 2px;
}

body.bauhaus .ra-add-row {
  background: transparent;
  border: 2px dashed var(--ink);
  color: var(--ink);
  padding: 14px 22px;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  transition: 160ms;
  margin-top: 4px;
}
body.bauhaus .ra-add-row:hover {
  background: var(--ink);
  color: var(--paper);
  border-style: solid;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--red);
}

/* Submit — chunky 2-tone with arrow + red top stripe */
body.bauhaus .ra-submit {
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
  padding: 20px 32px;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: 160ms;
  margin-top: 14px;
  width: 100%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  box-shadow: 6px 6px 0 var(--red);
}
body.bauhaus .ra-submit::before {
  content: "→";
  font-weight: 900;
  font-size: 22px;
  color: var(--red);
  transition: transform 160ms ease-out;
}
body.bauhaus .ra-submit:hover:not(:disabled) {
  background: var(--red);
  border-color: var(--red);
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--ink);
}
body.bauhaus .ra-submit:hover:not(:disabled)::before {
  color: var(--paper);
  transform: translateX(4px);
}
body.bauhaus .ra-submit:disabled {
  background: var(--grey);
  border-color: var(--grey);
  cursor: wait;
  box-shadow: 6px 6px 0 var(--grey-2);
}
body.bauhaus .ra-tos {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--grey);
  letter-spacing: 0.5px;
  margin-top: 14px;
  line-height: 1.5;
}
body.bauhaus .ra-loading {
  display: none;
  text-align: center;
  padding: 32px;
  color: var(--ink);
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
body.bauhaus .ra-loading.show { display: block; }
body.bauhaus .ra-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--paper-warm);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: ra-spin 1s linear infinite;
  margin: 0 auto;
}
@keyframes ra-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { body.bauhaus .ra-spinner { animation: none; } }

body.bauhaus .ra-results { display: none; max-width: 1080px; margin: 24px auto 0; }
body.bauhaus .ra-results.show { display: block; }
body.bauhaus .ra-overall {
  background: var(--ink);
  color: var(--paper);
  padding: 32px;
  border: 2px solid var(--ink);
  margin-bottom: 18px;
}
body.bauhaus .ra-overall h2 {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
body.bauhaus .ra-overall .score-row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 12px;
}
body.bauhaus .ra-overall .score {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 88px;
  letter-spacing: -4px;
  line-height: 0.85;
}
body.bauhaus .ra-overall .score-label {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
}
body.bauhaus .ra-band-pill {
  display: inline-block;
  background: var(--paper);
  color: var(--ink);
  padding: 4px 12px;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-top: 4px;
}
body.bauhaus .ra-summary {
  color: rgba(255,255,255,0.85);
  font-size: 15.5px;
  line-height: 1.55;
  max-width: 60ch;
  margin: 0;
}
body.bauhaus .ra-bc-low .score, body.bauhaus .ra-bc-low { color: var(--mint); }
body.bauhaus .ra-band-low { background: var(--mint); color: var(--ink); }
body.bauhaus .ra-bc-medium .score, body.bauhaus .ra-bc-medium { color: var(--amber); }
body.bauhaus .ra-band-medium { background: var(--amber); color: var(--ink); }
body.bauhaus .ra-bc-high .score, body.bauhaus .ra-bc-high { color: #ff7654; }
body.bauhaus .ra-band-high { background: #ff7654; color: var(--paper); }
body.bauhaus .ra-bc-extreme .score, body.bauhaus .ra-bc-extreme { color: var(--red); }
body.bauhaus .ra-band-extreme { background: var(--red); color: var(--paper); }

body.bauhaus .ra-bullet-card {
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 24px;
  margin-bottom: 14px;
  position: relative;
}
body.bauhaus .ra-bullet-card.is-low    { border-left: 8px solid var(--mint); }
body.bauhaus .ra-bullet-card.is-medium { border-left: 8px solid var(--amber); }
body.bauhaus .ra-bullet-card.is-high   { border-left: 8px solid #ff7654; }
body.bauhaus .ra-bullet-card.is-extreme{ border-left: 8px solid var(--red); }
body.bauhaus .ra-bc-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
body.bauhaus .ra-bc-head .num {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.6px;
  color: var(--grey);
  font-weight: 700;
  text-transform: uppercase;
}
body.bauhaus .ra-bc-score {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 36px;
  letter-spacing: -1.5px;
  line-height: 1;
}
body.bauhaus .ra-bc-original {
  font-family: 'Archivo', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  padding: 14px 16px;
  background: var(--paper-warm);
  border-left: 3px solid var(--ink);
  margin-bottom: 18px;
  font-style: italic;
}
body.bauhaus .ra-bc-section-label {
  font-family: 'Space Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  color: var(--ink);
  font-weight: 700;
  text-transform: uppercase;
  margin: 12px 0 8px;
}
body.bauhaus .ra-bc-risks, body.bauhaus .ra-bc-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
body.bauhaus .ra-bc-chip {
  display: inline-block;
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  padding: 4px 10px;
  font-size: 12.5px;
  font-family: 'Archivo', sans-serif;
}
body.bauhaus .ra-bc-tool-chip {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  padding: 4px 10px;
  font-family: 'Space Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.8px;
  font-weight: 700;
}
body.bauhaus .ra-bc-rewrite {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.55;
  padding: 14px 16px;
  background: var(--mint-2);
  color: var(--paper);
  margin-top: 6px;
}
body.bauhaus .ra-bc-reason {
  margin-top: 10px;
  font-size: 14px;
  color: var(--grey);
  font-style: italic;
  line-height: 1.5;
}
body.bauhaus .ra-cta {
  background: var(--ink);
  color: var(--paper);
  padding: 32px;
  border: 2px solid var(--ink);
  margin-top: 18px;
  text-align: center;
}
body.bauhaus .ra-cta h3 {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
body.bauhaus .ra-cta p { color: rgba(255,255,255,0.78); font-size: 15px; max-width: 56ch; margin: 0 auto 18px; line-height: 1.55; }
body.bauhaus .ra-cta .btn {
  display: inline-block;
  background: var(--red);
  color: var(--paper);
  border: 2px solid var(--red);
  padding: 14px 26px;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
  transition: 200ms;
}
body.bauhaus .ra-cta .btn:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ============================================================
   Interview chat (iv-*) — Bauhaus light-mode overrides
   ============================================================ */
body.bauhaus .iv-shell { background: var(--paper); min-height: 100vh; display: flex; flex-direction: column; }
body.bauhaus .iv-topbar {
  background: var(--paper);
  border-top: 8px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 14px 0;
}
body.bauhaus .iv-topbar .inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
body.bauhaus .iv-topbar .ap-logo {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  text-transform: uppercase;
}
body.bauhaus .iv-topbar .ap-logo .credential {
  font-family: 'Space Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  color: var(--grey);
  font-weight: 400;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid var(--grey-2);
}
body.bauhaus .iv-progress-wrap { display: flex; flex-direction: column; gap: 4px; flex: 1; max-width: 320px; }
body.bauhaus .iv-progress-num {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  color: var(--grey);
  text-transform: uppercase;
  font-weight: 700;
}
body.bauhaus .iv-progress-num strong { color: var(--ink); font-weight: 900; }
body.bauhaus .iv-progress { background: var(--paper-warm); border: 2px solid var(--ink); height: 10px; }
body.bauhaus .iv-progress .fill { background: var(--mint-2); height: 100%; transition: width 380ms cubic-bezier(0.22,1,0.36,1); }
body.bauhaus .session-meta {
  font-family: 'Space Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  color: var(--grey);
  text-transform: uppercase;
  font-weight: 700;
  display: flex;
  gap: 14px;
}
body.bauhaus .session-meta strong { color: var(--mint-2); font-weight: 700; }
body.bauhaus .session-meta .live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--mint);
  border-radius: 50%;
  margin-right: 4px;
  animation: bh-pulse 2.4s infinite;
}

body.bauhaus .iv-stage { flex: 1; max-width: 880px; margin: 0 auto; padding: 32px 24px 200px; width: 100%; }
body.bauhaus .iv-welcome { padding: 24px 0; }
body.bauhaus .iv-welcome .eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
  border-top: 4px solid var(--red);
  padding-top: 12px;
  margin-bottom: 16px;
}
body.bauhaus .iv-welcome h1 {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 18px;
}
body.bauhaus .iv-welcome h1 .accent { color: var(--red); }
body.bauhaus .iv-welcome p { color: var(--ink); font-size: 16.5px; line-height: 1.55; max-width: 60ch; margin-bottom: 24px; }

body.bauhaus .iv-interviewer-card {
  background: var(--paper-warm);
  border: 2px solid var(--ink);
  padding: 22px;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 18px;
  align-items: center;
}
body.bauhaus .iv-mark { width: 80px; height: 80px; background: var(--ink); display: flex; align-items: center; justify-content: center; }
body.bauhaus .iv-mark svg { width: 56px; height: 56px; }
body.bauhaus .iv-interviewer-card .who-name { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: -0.01em; }
body.bauhaus .iv-interviewer-card .who-cred { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 1.4px; color: var(--red); font-weight: 700; text-transform: uppercase; margin: 4px 0 8px; }
body.bauhaus .iv-interviewer-card .who-bio { font-size: 14px; color: var(--ink); line-height: 1.5; }

body.bauhaus .iv-thread { display: flex; flex-direction: column; gap: 14px; padding: 24px 0; }
body.bauhaus .iv-msg {
  border: 2px solid var(--ink);
  padding: 16px 20px;
  max-width: 88%;
  font-size: 16px;
  line-height: 1.55;
  background: var(--paper);
}
body.bauhaus .iv-msg.from-agent { background: var(--paper-warm); align-self: flex-start; }
body.bauhaus .iv-msg.from-user { background: var(--ink); color: var(--paper); align-self: flex-end; }
body.bauhaus .iv-msg .meta {
  font-family: 'Space Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 6px;
  font-weight: 700;
}
body.bauhaus .iv-msg.from-user .meta { color: rgba(255,255,255,0.5); }

body.bauhaus .iv-composer-wrap {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--paper);
  border-top: 2px solid var(--ink);
  padding: 14px 24px calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
}
body.bauhaus .iv-composer { max-width: 880px; margin: 0 auto; display: flex; gap: 8px; align-items: flex-end; }
body.bauhaus #iv-input {
  flex: 1;
  padding: 14px 16px;
  border: 2px solid var(--ink);
  background: var(--paper-warm);
  font-family: 'Archivo', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  outline: none;
  resize: none;
  max-height: 140px;
  border-radius: 0;
}
body.bauhaus #iv-input:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--red); border-color: var(--red); }
body.bauhaus #iv-input:disabled { background: var(--paper-warm); color: var(--grey); cursor: not-allowed; }
body.bauhaus #iv-send {
  padding: 14px 20px;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: 200ms;
}
body.bauhaus #iv-send:hover:not(:disabled) { background: var(--mint-2); border-color: var(--mint-2); }
body.bauhaus #iv-send:disabled { background: var(--grey); border-color: var(--grey); cursor: not-allowed; }
body.bauhaus .iv-composer-meta {
  max-width: 880px;
  margin: 8px auto 0;
  display: flex;
  justify-content: space-between;
  font-family: 'Space Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1.2px;
  color: var(--grey);
  text-transform: uppercase;
  flex-wrap: wrap;
  gap: 8px;
}
body.bauhaus .iv-composer-meta a { color: var(--red); text-decoration: none; font-weight: 700; }

/* ============================================================
   "GENERATE MY REPORT" button — sits below the composer.
   Stays disabled (greyed) until at least one topic is covered,
   then becomes prominent. Always visible so the user knows they
   can wrap up whenever they want — agent never decides for them.
   ============================================================ */
body.bauhaus .iv-ready-wrap {
  max-width: 880px;
  margin: 14px auto 0;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
body.bauhaus .iv-ready-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: transparent;
  color: var(--grey);
  border: 2px solid var(--grey);
  border-radius: 4px;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: 180ms;
}
body.bauhaus .iv-ready-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
body.bauhaus .iv-ready-btn.ready:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
body.bauhaus .iv-ready-btn.ready:not(:disabled):hover {
  background: var(--red);
  border-color: var(--red);
}
body.bauhaus .iv-ready-hint {
  font-family: 'Space Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.8px;
  color: var(--grey);
  flex: 1;
  min-width: 240px;
}

/* ============================================================
   Gap-fill modal — appears at session end if any required
   topics weren't covered in the conversation.
   ============================================================ */
body.bauhaus .iv-gap-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.78);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 9000;
}
body.bauhaus .iv-gap-modal.open {
  display: flex;
  animation: ivGapFade 220ms ease-out;
}
@keyframes ivGapFade {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}
body.bauhaus .iv-gap-modal-inner {
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 6px;
  padding: 32px 36px 28px;
  max-width: 580px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 12px 12px 0 var(--red);
}
body.bauhaus .iv-gap-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 2.2px;
  color: var(--red);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
}
body.bauhaus .iv-gap-modal-inner h2 {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--ink);
}
body.bauhaus .iv-gap-sub {
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  line-height: 1.5;
  color: var(--grey-2);
  margin: 0 0 22px;
}
body.bauhaus #iv-gap-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
body.bauhaus .iv-gap-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.bauhaus .iv-gap-row label {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--ink);
  text-transform: uppercase;
}
body.bauhaus .iv-gap-row input {
  padding: 10px 12px;
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 3px;
  outline: none;
  transition: border-color 140ms;
}
body.bauhaus .iv-gap-row input:focus { border-color: var(--red); }
body.bauhaus .iv-gap-row input::placeholder { color: var(--grey); font-style: italic; }
body.bauhaus .iv-gap-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 14px 22px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 4px;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: 180ms;
  width: 100%;
  justify-content: center;
}
body.bauhaus .iv-gap-submit:hover:not(:disabled) { background: var(--red); }
body.bauhaus .iv-gap-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Mobile tweaks */
@media (max-width: 640px) {
  body.bauhaus .iv-gap-modal-inner { padding: 22px 20px; box-shadow: 6px 6px 0 var(--red); }
  body.bauhaus .iv-gap-modal-inner h2 { font-size: 22px; }
}

/* Dark-mode adjustments (the interview page sets body.dark-mode) */
body.bauhaus.dark-mode .iv-ready-btn { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.35); }
body.bauhaus.dark-mode .iv-ready-btn.ready:not(:disabled) { background: #f3efe5; color: #0a0a0a; border-color: #f3efe5; }
body.bauhaus.dark-mode .iv-ready-btn.ready:not(:disabled):hover { background: var(--red); color: #fff; border-color: var(--red); }
body.bauhaus.dark-mode .iv-ready-hint { color: rgba(255,255,255,0.5); }

/* ============================================================
   Hillmann Grid Interlude — full-bleed slow-pulse section
   Bauhaus / Vignelli / Hans Hillmann lineage
   ============================================================ */
.bh-hillmann-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 100vh;
  min-height: 640px;
  background: var(--ink);
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.bh-hillmann-grid {
  position: absolute;
  inset: 0;
  display: grid !important;
  grid-template-columns: repeat(32, 1fr);
  grid-template-rows: repeat(20, 1fr);
  gap: 4px;
  padding: 14px;
  background: var(--ink);
  box-sizing: border-box;
  z-index: 1;
}
.bh-hillmann-cell {
  background: var(--paper);
  animation: bh-hillmann-pulse 29s infinite ease-in-out;
  will-change: background;
}
@keyframes bh-hillmann-pulse {
  0%   { background: var(--paper); }
  12%  { background: var(--red); }
  25%  { background: var(--paper); }
  37%  { background: var(--blue); }
  50%  { background: var(--paper); }
  62%  { background: var(--mint); }
  75%  { background: var(--paper); }
  87%  { background: var(--amber); }
  100% { background: var(--paper); }
}
@media (prefers-reduced-motion: reduce) {
  .bh-hillmann-cell { animation: none; }
}

/* Centered overlay caption + live counter */
.bh-hillmann-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
  padding: 32px;
}
.bh-hillmann-overlay .eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--paper);
  background: var(--ink);
  padding: 10px 20px;
  border: 2px solid var(--paper);
  margin-bottom: 28px;
}
.bh-hillmann-overlay .eyebrow .live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #66ffae;
  font-weight: 800;
}
.bh-hillmann-overlay .eyebrow .live::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #66ffae;
  box-shadow: 0 0 8px #66ffae;
  animation: bh-pulse 2.4s infinite;
}
.bh-hillmann-overlay h2 {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: clamp(64px, 12vw, 200px);
  line-height: 0.86;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  padding: 18px 32px;
  margin: 0 0 18px;
  display: inline-block;
  max-width: 90vw;
}
.bh-hillmann-overlay h2 .red    { color: var(--red); }
.bh-hillmann-overlay .meta {
  font-family: 'Space Mono', monospace;
  font-size: 12.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper);
  padding: 10px 20px;
  border: 2px solid var(--ink);
  display: inline-block;
}
.bh-hillmann-overlay .meta strong { font-weight: 900; }

/* ======================== JOB PAGES — Bauhaus overrides ========================
   /jobs/<slug>/ pages use legacy markup (.ap-job-head, .ap-prose, .ap-cluster,
   .ap-related). These overrides make them match the Bauhaus system: paper-warm
   bg, ink text, red top stripe, sharp edges, Archivo Black headers, no rounded
   corners, no gradients. All use `body.bauhaus` for specificity. */

body.bauhaus .ap-section { background: var(--paper); padding: 56px 0; }
body.bauhaus .ap-section .ap-container { max-width: 980px; margin: 0 auto; padding: 0 28px; }

body.bauhaus .ap-job-head {
  background: var(--paper-warm) !important;
  border-top: 6px solid var(--red);
  border-bottom: 2px solid var(--ink);
  padding: 64px 0 44px;
  border-radius: 0;
}
body.bauhaus .ap-job-head .ap-container { max-width: 980px; margin: 0 auto; padding: 0 28px; }
body.bauhaus .ap-job-head .crumb {
  font-family: 'Space Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}
body.bauhaus .ap-job-head .crumb a {
  color: var(--red) !important;
  text-decoration: none;
  border-bottom: 2px solid var(--red);
  padding-bottom: 1px;
}
body.bauhaus .ap-job-head .crumb a:hover { color: var(--ink) !important; border-bottom-color: var(--ink); }
body.bauhaus .ap-job-head h1 {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: clamp(38px, 5.5vw, 68px);
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--ink) !important;
  margin: 0 0 18px;
}
body.bauhaus .ap-job-head .vert {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  background: var(--ink);
  color: var(--paper) !important;
  padding: 6px 12px;
  display: inline-block;
}

/* Long-form prose — keep readable on paper bg */
body.bauhaus .ap-prose { max-width: 720px; margin: 0 auto; }
body.bauhaus .ap-prose h2 {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 3.4vw, 38px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink) !important;
  margin: 56px 0 22px;
  padding-top: 24px;
  border-top: 4px solid var(--red);
  position: relative;
}
body.bauhaus .ap-prose h2::before {
  content: "//";
  font-family: 'Space Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 1.6px;
  color: var(--red);
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}
body.bauhaus .ap-prose h3 {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--ink) !important;
  margin: 28px 0 12px;
}
body.bauhaus .ap-prose p {
  font-family: 'Archivo', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink) !important;
  margin-bottom: 18px;
}
body.bauhaus .ap-prose ul { margin: 0 0 22px 0; padding-left: 0; list-style: none; }
body.bauhaus .ap-prose li {
  font-family: 'Archivo', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink) !important;
  margin-bottom: 10px;
  padding-left: 22px;
  position: relative;
}
body.bauhaus .ap-prose li::before {
  content: "▪";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--red);
  font-weight: 900;
}
body.bauhaus .ap-prose strong { color: var(--ink) !important; font-weight: 800; }
body.bauhaus .ap-prose a {
  color: var(--red) !important;
  text-decoration: none;
  border-bottom: 2px solid var(--red);
  font-weight: 700;
}
body.bauhaus .ap-prose a:hover { color: var(--ink) !important; border-bottom-color: var(--ink); }

/* Author note / inline notes inside prose — kill the inline style overrides */
body.bauhaus .ap-prose .notes {
  background: var(--paper-warm) !important;
  border: 2px solid var(--ink) !important;
  border-left: 6px solid var(--red) !important;
  border-radius: 0 !important;
  padding: 18px 22px !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  line-height: 1.55 !important;
  margin: 22px 0 28px !important;
}
body.bauhaus .ap-prose .notes strong { color: var(--ink) !important; }

/* Inline highlighted boxes (the "single highest-leverage move" callout) */
body.bauhaus .ap-prose p[style*="border-left"] {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: none !important;
  border-left: 6px solid var(--red) !important;
  border-radius: 0 !important;
  padding: 18px 22px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  margin: 18px 0 24px !important;
}

/* Four-signal cluster cards */
body.bauhaus .ap-cluster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  margin: 28px 0;
  border: 2px solid var(--ink);
}
body.bauhaus .ap-cluster .card {
  background: var(--paper);
  border: none;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  padding: 22px 22px 22px;
  position: relative;
}
body.bauhaus .ap-cluster .card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--red);
}
body.bauhaus .ap-cluster .card:nth-child(2)::before { background: var(--blue); }
body.bauhaus .ap-cluster .card:nth-child(3)::before { background: var(--mint-2); }
body.bauhaus .ap-cluster .card:nth-child(4)::before { background: var(--amber); }
body.bauhaus .ap-cluster .card .label {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink) !important;
  font-weight: 700;
  margin-bottom: 12px;
  padding-top: 12px;
  line-height: 1.35;
}
body.bauhaus .ap-cluster .card .val {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 38px;
  letter-spacing: -0.03em;
  color: var(--ink) !important;
  line-height: 1;
  margin-bottom: 10px;
}
body.bauhaus .ap-cluster .card .note {
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  color: var(--ink) !important;
  opacity: 0.78;
  line-height: 1.4;
  margin-top: 6px;
}

/* Related jobs grid */
body.bauhaus .ap-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  margin: 18px 0 28px;
  border: 2px solid var(--ink);
}
body.bauhaus .ap-related a {
  background: var(--paper);
  border: none;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  padding: 16px 18px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: background 120ms ease, color 120ms ease;
}
body.bauhaus .ap-related a:hover {
  background: var(--ink);
  color: var(--paper) !important;
  border-color: var(--ink);
  transform: none;
}
body.bauhaus .ap-related a:hover .t { color: var(--paper) !important; }
body.bauhaus .ap-related a:hover .s { color: var(--paper) !important; }
body.bauhaus .ap-related .t {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--ink) !important;
}
body.bauhaus .ap-related .s {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 15px;
  color: var(--red) !important;
}

/* Sources block */
body.bauhaus .ap-prose ul:last-of-type li {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 14px;
}
body.bauhaus .ap-prose ul:last-of-type li::before { content: "→"; }

/* ======================== AP-LIVE counter chip — Bauhaus override ========================
   Legacy styles.css renders this as a mint-green pill with rounded corners.
   Bauhaus version: paper-warm tile, ink text, sharp 2px border, red live-dot,
   Space Mono uppercase. Specificity-boosted with !important to beat both
   .ap-live and .ap-live.ap-live-promo defaults. */

body.bauhaus .ap-live,
body.bauhaus .ap-live.ap-live-promo {
  background: var(--paper-warm) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  padding: 8px 16px !important;
  margin: 18px 0 0 !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 11.5px !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: fit-content !important;
  position: relative;
}
body.bauhaus .ap-live::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--red) !important;
  box-shadow: 0 0 6px rgba(216, 59, 39, 0.55);
  animation: bh-livepulse 2s ease-in-out infinite !important;
  flex-shrink: 0;
}
body.bauhaus .ap-live strong {
  color: var(--ink) !important;
  font-weight: 700 !important;
}
@keyframes bh-livepulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
  body.bauhaus .ap-live::before { animation: none !important; }
}

/* ======================== KANDINSKY LEFT RAIL — /resume/ page ========================
   Fixed-position SVG composition that runs the full viewport height on the left edge.
   Pure decoration: pointer-events:none so it never intercepts clicks. Each shape has
   its own slow drift/rotation. Hidden below 1100px where there's no room. */

/* !important on position/top/left because styles.css line ~499 has
   `body > div:not(#burst-canvas) { position: relative; }` which beats us
   on specificity (1 ID via :not). Without these overrides the rail drops
   into flow and pushes the whole page down by 100vh. */
.ra-kandinsky {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 220px;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.ra-kandinsky svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Per-shape animations — each rides at a different tempo + axis so the
   composition never resolves into a static moment. */
.ra-k-circle-red {
  transform-origin: 90px 200px;
  animation: ra-k-drift1 28s ease-in-out infinite;
}
.ra-k-circle-blue {
  transform-origin: 130px 720px;
  animation: ra-k-drift2 36s ease-in-out infinite;
}
.ra-k-triangle {
  transform-origin: 110px 440px;
  animation: ra-k-spin1 44s linear infinite;
}
.ra-k-arc {
  transform-origin: 90px 580px;
  animation: ra-k-spin2 52s linear infinite reverse;
}
.ra-k-line-diag {
  transform-origin: 50% 50%;
  animation: ra-k-sway 24s ease-in-out infinite;
}
.ra-k-square-amber {
  transform-origin: 80px 880px;
  animation: ra-k-spin1 38s linear infinite reverse;
}
.ra-k-bar-mint {
  transform-origin: 100px 360px;
  animation: ra-k-bob 18s ease-in-out infinite;
}
.ra-k-dot {
  animation: ra-k-pulse 6s ease-in-out infinite;
}
.ra-k-dot:nth-of-type(2) { animation-delay: -1.5s; }
.ra-k-dot:nth-of-type(3) { animation-delay: -3s; }
.ra-k-dot:nth-of-type(4) { animation-delay: -4.5s; }

@keyframes ra-k-drift1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(28px, -22px) rotate(18deg); }
}
@keyframes ra-k-drift2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(-22px, 30px) rotate(-22deg); }
}
@keyframes ra-k-spin1 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ra-k-spin2 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ra-k-sway {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50%      { transform: rotate(6deg) translateY(14px); }
}
@keyframes ra-k-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(18px); }
}
@keyframes ra-k-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.4); }
}

/* Push the resume page main content to the right of the rail */
@media (min-width: 1100px) {
  body.bauhaus.ra-page main { padding-left: 200px; }
}
@media (max-width: 1099px) {
  .ra-kandinsky { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ra-k-circle-red, .ra-k-circle-blue, .ra-k-triangle, .ra-k-arc,
  .ra-k-line-diag, .ra-k-square-amber, .ra-k-bar-mint, .ra-k-dot {
    animation: none !important;
  }
}

/* ============================================================
   /upgrade/ PAGE — PDF PREVIEW SECTION
   Two-column layout: TOC + CTA on the left, auto-scrolling
   7-page mock PDF on the right.
   ============================================================ */

/* Two-column merged layout: LEFT = section head + stacking cards + CTA.
   RIGHT = PDF window pinned to the TOP of the section (align-self: start) so it
   reads at the same vertical line as the section heading on the left. */
body.bauhaus .bh-preview-layout {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 56px;
  align-items: start;
}
body.bauhaus .bh-preview-left {
  display: flex;
  flex-direction: column;
}
body.bauhaus .bh-preview-layout .bh-preview-window {
  align-self: start;
  /* When the left column is long, the PDF window stays pinned near the top
     and the user can scroll past it. position: sticky on the window keeps the
     PDF visible while the cards are being read. */
  position: sticky;
  top: 92px;
}

/* ===== STACKING CARDS — Stripe-style hover-fan ===== */
body.bauhaus .bh-card-stack {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}
body.bauhaus .card-stack-item {
  display: grid;
  grid-template-columns: 56px auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 0;
  align-items: center;
  padding: 18px 22px 18px 18px;
  background: var(--paper);
  border: 2px solid var(--ink);
  margin-top: -2px;     /* overlap borders so the stack reads as one element */
  font-family: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition:
    transform 380ms cubic-bezier(0.4, 0, 0.2, 1),
    background 200ms ease,
    box-shadow 380ms cubic-bezier(0.4, 0, 0.2, 1),
    z-index 0s linear 0s;
}
body.bauhaus .card-stack-item:first-child { margin-top: 0; }
body.bauhaus .card-stack-item:focus { outline: none; }
body.bauhaus .csi-num {
  grid-row: 1;
  grid-column: 1;
  width: 56px;
  height: 56px;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
body.bauhaus .csi-num--red    { background: var(--red); }
body.bauhaus .csi-num--blue   { background: var(--blue); }
body.bauhaus .csi-num--mint   { background: var(--mint-2); }
body.bauhaus .csi-num--amber  { background: var(--amber); color: var(--ink); }
body.bauhaus .csi-tag {
  grid-row: 1;
  grid-column: 2;
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  padding: 3px 8px;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 700;
  justify-self: start;
  align-self: center;
  white-space: nowrap;
}
body.bauhaus .csi-title {
  grid-row: 1;
  grid-column: 3;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
/* Down-arrow affordance — at rest a subtle grey hint. On hover, the arrow
   slides DOWN as if pushing the description into the detail panel below. */
body.bauhaus .csi-title::after {
  content: "↓";
  display: inline-block;
  color: var(--grey);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  margin-left: 4px;
  transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms ease;
}
body.bauhaus .card-stack-item:hover .csi-title::after,
body.bauhaus .card-stack-item:focus-visible .csi-title::after {
  transform: translateY(8px);
  color: var(--red);
}
/* Card hover state — card slides 10px LEFT, lifts onto an ink drop-shadow.
   The body content is NOT inside the card anymore — it lives in a shared
   detail panel below the stack (see .bh-card-detail). This way hovering
   a card never covers another card. */
body.bauhaus .card-stack-item:hover,
body.bauhaus .card-stack-item:focus-visible {
  background: var(--paper-warm);
  z-index: 10;
  transform: translateX(-10px);
  box-shadow: 10px 10px 0 var(--ink);
}

/* Shared detail panel — hovering any card swaps the body shown here.
   Always in the same spot, never covers any card, never bounces. */
body.bauhaus .bh-card-detail {
  margin-top: 24px;
  min-height: 132px;
  padding: 22px 28px;
  background: var(--paper-warm);
  border: 2px solid var(--ink);
  border-top: 4px solid var(--red);
  position: relative;
}
body.bauhaus .bh-detail-item {
  display: none;
}
body.bauhaus .bh-detail-item.active {
  display: block;
  animation: bh-detail-in 280ms cubic-bezier(0.34, 1.15, 0.64, 1);
}
body.bauhaus .bh-detail-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
  margin-bottom: 8px;
}
body.bauhaus .bh-card-detail p {
  font-family: 'Archivo', sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
body.bauhaus .bh-card-detail em { font-style: italic; color: var(--ink); }
@keyframes bh-detail-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  body.bauhaus .bh-detail-item.active { animation: none; }
}

body.bauhaus .bh-stack-cta {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 4px solid var(--red);
}
body.bauhaus .bh-stack-cta .bh-btn {
  display: inline-block;
  font-size: 15px;
}
body.bauhaus .bh-stack-cta-tos {
  margin-top: 12px;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--grey);
  text-transform: uppercase;
}

@media (max-width: 980px) {
  body.bauhaus .bh-preview-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  body.bauhaus .bh-preview-layout .bh-preview-window {
    position: static;
    margin: 0 auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.bauhaus .card-stack-item,
  body.bauhaus .card-stack-item .csi-body {
    transition: none !important;
  }
}

/* RIGHT: the PDF window */
body.bauhaus .bh-preview-window {
  position: relative;
  width: 480px;
  height: 640px;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 12px 12px 0 var(--ink);
  display: flex;
  flex-direction: column;
  font-family: 'Archivo', sans-serif;
  color: var(--ink);
}
body.bauhaus .bh-preview-chrome {
  background: var(--paper-warm);
  border-bottom: 2px solid var(--ink);
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
body.bauhaus .bh-preview-chrome .dot {
  width: 10px; height: 10px;
  background: var(--ink);
  flex-shrink: 0;
}
body.bauhaus .bh-preview-chrome .bh-preview-filename {
  margin-left: 10px;
  flex: 1;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.9px;
  font-weight: 700;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.bauhaus .bh-preview-chrome .bh-preview-pages {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: 700;
  background: var(--red);
  color: var(--paper);
  padding: 3px 8px;
}
body.bauhaus .bh-preview-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: var(--paper);
}
body.bauhaus .bh-preview-viewport::before,
body.bauhaus .bh-preview-viewport::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 32px;
  z-index: 3;
  pointer-events: none;
}
body.bauhaus .bh-preview-viewport::before {
  top: 0;
  background: linear-gradient(to bottom, var(--paper) 0%, rgba(243,239,229,0) 100%);
}
body.bauhaus .bh-preview-viewport::after {
  bottom: 0;
  background: linear-gradient(to top, var(--paper) 0%, rgba(243,239,229,0) 100%);
}
body.bauhaus .bh-preview-track {
  padding: 36px 28px;
  animation: bh-preview-scroll-big 84s linear infinite;
}
@keyframes bh-preview-scroll-big {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-87.5%); }  /* 7/8 of stack — last duplicated page lands at start position */
}
@media (prefers-reduced-motion: reduce) {
  body.bauhaus .bh-preview-track { animation: none !important; }
}
body.bauhaus .bh-preview-footer {
  background: var(--ink);
  color: rgba(255,255,255,0.65);
  font-family: 'Space Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 12px;
  border-top: 2px solid var(--ink);
}

/* ===== PDF page contents ===== */
body.bauhaus .bh-pdf-page {
  padding-bottom: 56px;
  margin-bottom: 56px;
  border-bottom: 2px dashed rgba(10,10,10,0.18);
}
body.bauhaus .pdf-page-num {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--grey);
  font-weight: 700;
  margin-bottom: 18px;
  text-align: right;
}
body.bauhaus .pdf-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
  margin-bottom: 8px;
}
body.bauhaus .pdf-h1 {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 900;
  font-size: 36px !important;
  letter-spacing: -0.035em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink) !important;
  margin: 0 0 8px !important;
}
body.bauhaus .pdf-h2 {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 900;
  font-size: 22px !important;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink) !important;
  margin: 0 0 14px !important;
}
body.bauhaus .pdf-h3 {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 20px 0 6px;
}
body.bauhaus .pdf-meta {
  font-family: 'Space Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.8px;
  color: var(--grey);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 22px;
}
body.bauhaus .pdf-body {
  font-family: 'Archivo', sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 12px;
}
body.bauhaus .pdf-stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 2px solid var(--ink);
  margin: 16px 0 22px;
}
body.bauhaus .pdf-stat {
  padding: 14px 16px;
  border-right: 2px solid var(--ink);
}
body.bauhaus .pdf-stat:last-child { border-right: none; }
body.bauhaus .pdf-stat--accent { background: var(--red); color: var(--paper); }
body.bauhaus .pdf-stat-lbl {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 4px;
}
body.bauhaus .pdf-stat-num {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.04em;
}
body.bauhaus .pdf-stat-sub {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.8px;
  color: rgba(255,255,255,0.65);
  margin-top: 2px;
}
body.bauhaus .pdf-stat:not(.pdf-stat--accent) .pdf-stat-sub { color: var(--grey); }
body.bauhaus .pdf-pivot-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
body.bauhaus .pdf-stat-pill {
  font-family: 'Space Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  background: var(--paper-warm);
  border: 1.5px solid var(--ink);
  color: var(--ink);
}
body.bauhaus .pdf-stat-pill.red  { background: var(--red);    color: var(--paper); border-color: var(--red); }
body.bauhaus .pdf-stat-pill.blue { background: var(--blue);   color: var(--paper); border-color: var(--blue); }
body.bauhaus .pdf-stat-pill.mint { background: var(--mint-2); color: var(--paper); border-color: var(--mint-2); }
body.bauhaus .pdf-callout {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 16px 18px;
  background: var(--paper-warm);
  border-left: 6px solid var(--red);
  margin: 14px 0 22px;
  align-items: start;
}
body.bauhaus .pdf-callout-num {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 28px;
  color: var(--red);
  line-height: 1;
}
body.bauhaus .pdf-callout-body {
  font-family: 'Archivo', sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
body.bauhaus .pdf-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 14px;
}
body.bauhaus .pdf-list li {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink);
  padding: 4px 0 4px 18px;
  position: relative;
  border-bottom: 1px dashed rgba(10,10,10,0.12);
}
body.bauhaus .pdf-list li:last-child { border-bottom: none; }
body.bauhaus .pdf-list li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--red);
  font-weight: 900;
}
body.bauhaus .pdf-list li strong { color: var(--ink); font-weight: 800; }
body.bauhaus .pdf-month {
  margin-bottom: 18px;
  padding-left: 16px;
  border-left: 4px solid var(--ink);
}
body.bauhaus .pdf-month-lbl {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.bauhaus .pdf-month-lbl .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 11px;
}
body.bauhaus .pdf-footer-line {
  height: 4px;
  background: var(--red);
  margin: 24px 0 14px;
}
body.bauhaus .pdf-fineprint {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  line-height: 1.5;
  color: var(--grey);
  letter-spacing: 0.3px;
}

/* Mobile: PDF window centers below the stacking cards */
@media (max-width: 980px) {
  body.bauhaus .bh-preview-window {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    box-shadow: 6px 6px 0 var(--ink);
  }
}

/* ======================== Methodology page — mobile tightening ======================== */
.method-formula-indent { padding-left: 92px; }
.method-table-wrap { width: 100%; }
@media (max-width: 720px) {
  .method-formula-indent { padding-left: 16px; }
  .method-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .method-table-wrap table { min-width: 560px; }
}

/* ============================================================
   MOBILE OPTIMIZATION LAYER (added 2026-05-25)
   - Hamburger drawer nav so RESUME / PIVOT / TRACKER / METHOD
     are reachable below 880px (previously display:none = broken)
   - Touch targets, tap highlight, suggestion dropdown position
   - Tighter hero spacing on small screens, safe-area for iOS
   ============================================================ */

/* Touch & tap baseline */
body.bauhaus { -webkit-tap-highlight-color: rgba(216, 59, 39, 0.18); }
body.bauhaus a, body.bauhaus button, body.bauhaus .bh-btn,
body.bauhaus .bh-nav a, body.bauhaus .bh-sticky-cta a {
  touch-action: manipulation;
}

/* Hamburger button — hidden on desktop, shown on mobile */
.bh-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  border: 2px solid var(--ink);
  cursor: pointer;
  padding: 0;
  margin-left: 8px;
  flex-shrink: 0;
}
.bh-nav-toggle svg { width: 22px; height: 22px; stroke: var(--paper); }
.bh-nav-toggle[aria-expanded="true"] { background: var(--red); border-color: var(--red); }

/* Mobile drawer container — only activates below 880px */
@media (max-width: 880px) {
  .bh-topbar .inner { padding: 12px 20px; gap: 12px; }
  .bh-nav-toggle { display: inline-flex; }

  /* Show drawer instead of inline nav */
  .bh-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 340px);
    background: var(--paper);
    border-left: 4px solid var(--ink);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 80px 24px calc(32px + env(safe-area-inset-bottom, 0px));
    box-shadow: -24px 0 60px -24px rgba(0,0,0,0.4);
    transform: translateX(100%);
    transition: transform 280ms var(--ease-out);
    z-index: 70;
    overflow-y: auto;
    flex-wrap: nowrap;
  }
  .bh-nav.open { transform: translateX(0); }

  /* Every link gets a 48px tap target inside the drawer */
  .bh-nav a:not(.cta) {
    display: block !important;
    padding: 16px 0;
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: 1px solid var(--line-soft);
    text-decoration: none;
  }
  .bh-nav a:not(.cta)::after { display: none; }
  .bh-nav a:not(.cta)[aria-current="page"] { color: var(--red); border-bottom-color: var(--red); }

  /* CTA inside drawer — full-width pill */
  .bh-nav a.cta {
    margin-top: 20px;
    padding: 16px 18px;
    text-align: center;
    font-size: 13px;
    letter-spacing: 1.4px;
  }

  /* Backdrop when drawer is open — !important overrides body > div {position:relative; z-index:1} in styles.css */
  body.bauhaus .bh-nav-backdrop, .bh-nav-backdrop {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    background: rgba(10,10,10,0.45);
    z-index: 65 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms var(--ease-out);
  }
  body.bauhaus .bh-nav-backdrop.open, .bh-nav-backdrop.open { opacity: 1; pointer-events: auto; }
  body.bh-nav-locked { overflow: hidden; }

  /* Same fix for nav drawer itself — it's a child of .bh-topbar > .inner so probably safe, but bumping specificity defensively */
  body.bauhaus .bh-nav {
    position: fixed;
  }
}

/* Suggestion dropdown — fix hardcoded right:100px on small screens */
@media (max-width: 720px) {
  #ap-suggestions { right: 0 !important; left: 0 !important; }

  /* Form row stacks on mobile — input full width, button full width below */
  #ap-calc .bh-form-row { flex-direction: column; align-items: stretch; gap: 10px; }
  #ap-calc .bh-form-row .bh-input { min-width: 0; width: 100%; }
  #ap-calc .ap-diagnose-btn { width: 100%; justify-content: center; min-height: 52px; }

  /* Hero title slightly tighter on phones */
  .bh-page-title { font-size: clamp(48px, 13vw, 80px); }
  .bh-page-deck { font-size: 17px; }

  /* Section padding tighter on phones */
  .bh-section { padding: 44px 0; }

  /* Page tag wraps cleanly */
  .bh-page-tag { gap: 8px; font-size: 10.5px; letter-spacing: 1.4px; }
}

/* Ticker — smaller text + slower scroll on phones (battery + legibility) */
@media (max-width: 600px) {
  .bh-ticker-track { font-size: 10.5px; gap: 32px; animation-duration: 48s; }
  .bh-wrap { padding: 0 20px; }
  .bh-wrap-narrow { padding: 0 20px; }
}

/* Sticky CTA — full-width on phones for thumb-zone access */
@media (max-width: 600px) {
  .bh-sticky-cta {
    left: 12px;
    right: 12px;
    transform: translateY(140%);
    max-width: none;
    padding: 12px 16px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    font-size: 12.5px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .bh-sticky-cta.show { transform: translateY(0); }
}

/* Image perf hints */
img { content-visibility: auto; }