/* ============================================================
   ITBOOST v3 — Brutalist Paper Component Library
   Class names are the CONTRACT — IDENTICAL to v1/v2 so pages compose.
   Aesthetic: sharp corners (border-radius:0), 2–3px solid black borders
   on every card/button/input/image, oversized condensed headlines,
   mono labels with arrows (→, 01/, //), rotated sticker badges (-4deg),
   marquee tickers, hover = COLOR INVERT (bg↔ink, snappy 0.08s),
   big mono index numerals. Vanilla CSS, no framework.
   ============================================================ */

/* ============================================================
   BUTTONS — .btn, .btn--primary, .btn--ghost, .btn--magnetic
   Brutalist: thick border, sharp corners, HARD offset shadow on hover,
   color-invert on hover (snappy 0.08s).
   ============================================================ */
.btn {
  --btn-pad-y: 0.875rem;
  --btn-pad-x: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1;
  border-radius: 0;                         /* sharp */
  border: var(--border);                    /* 2px solid ink */
  cursor: pointer;
  background: var(--bg);
  color: var(--ink);
  position: relative;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  /* Snappy invert: spec says 0.08s. */
  transition: transform var(--t-fast),
              background var(--t-fast),
              color var(--t-fast),
              box-shadow var(--t-fast);
  /* Hard offset shadow grows on hover — brutalist signature. */
  box-shadow: 4px 4px 0 var(--ink);
}
.btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--ink);
}
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}
.btn .btn__arrow {
  display: inline-block;
  transition: transform var(--t-fast);
}
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Primary — acid orange fill, paper text. Hover INVERTS to ink fill + orange text. */
.btn--primary {
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.btn--primary:hover {
  background: var(--ink);
  color: var(--accent);
}
.btn--primary:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--ink);
}

/* Ghost — paper bg, ink border, ink text. Hover INVERTS to ink fill + paper text. */
.btn--ghost {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--bg);
}

/* Text button — underline grows */
.btn--text {
  background: transparent;
  color: var(--ink);
  padding: 0;
  border: none;
  box-shadow: none;
  letter-spacing: var(--tracking-wide);
  position: relative;
}
.btn--text::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 2px;
  margin-left: var(--space-2);
  background: var(--accent);
  transition: width var(--t-fast);
  vertical-align: middle;
}
.btn--text:hover::after { width: 1.75rem; }
.btn--text:hover {
  color: var(--accent-strong);
  background: transparent;
}
.btn--text:active { transform: none; box-shadow: none; }

/* Magnetic — JS adds transform; cursor + perf hint only. */
.btn--magnetic {
  will-change: transform;
}

/* Button size variants */
.btn--lg {
  --btn-pad-y: 1.125rem;
  --btn-pad-x: 2rem;
  font-size: var(--fs-body);
  box-shadow: 6px 6px 0 var(--ink);
}
.btn--lg:active {
  transform: translate(6px, 6px);
  box-shadow: 0 0 0 var(--ink);
}

.btn--block {
  display: flex;
  width: 100%;
}

/* ============================================================
   SITE NAV — .site-nav
   Brutalist: thick bottom border, sticky, mono labels, sharp corners.
   ============================================================ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--bg);
  border-bottom: var(--border-thick);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.site-nav.is-scrolled {
  background: var(--ink);
  color: var(--bg);
}
.site-nav.is-scrolled .site-nav__brand,
.site-nav.is-scrolled .site-nav__links a,
.site-nav.is-scrolled .nav-toggle__bar {
  color: var(--bg);
}
.site-nav.is-scrolled .nav-toggle {
  border-color: var(--bg);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  height: 4.5rem;
}
@media (max-width: 480px) {
  .site-nav__inner { gap: var(--space-2); }
}

.site-nav__brand {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.375rem;
  letter-spacing: var(--tracking-tighter);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .site-nav__brand { font-size: 1.125rem; }
}
.site-nav__brand .brand__dot {
  width: 10px; height: 10px;
  background: var(--accent);
  display: inline-block;
  border: var(--border-thin);
}
.site-nav__brand .brand__accent {
  color: var(--accent-strong);
  /* No italic in v3 — brutalist is all-caps condensed, not editorial. */

}

.site-nav__links {
  display: none;
  align-items: center;
  gap: clamp(1.25rem, 2vw, 2rem);
}
@media (min-width: 1024px) {
  .site-nav__links { display: flex; }
}
.site-nav__links a {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding: var(--space-2) 0;
  transition: color var(--t-fast);
}
/* Mono index prefix on hover */
.site-nav__links a::before {
  content: attr(data-num);
  font-family: var(--font-mono);
  color: var(--accent-strong);
  margin-right: var(--space-2);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.site-nav__links a:hover::before,
.site-nav__links a[aria-current="true"]::before {
  opacity: 1;
}
/* Underline bar grows on hover — thick, not hairline */
.site-nav__links a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: -4px;
  height: 3px;
  background: var(--accent);
  transition: right var(--t-fast);
}
.site-nav__links a:hover,
.site-nav__links a[aria-current="true"] {
  color: var(--accent-2);
}
.site-nav__links a:hover::after,
.site-nav__links a[aria-current="true"]::after {
  right: 0;
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .site-nav__actions { gap: var(--space-2); }
  .login-btn, .site-nav__actions > .btn--primary { display: none; }
}

/* Language toggle — sharp pill, no rounded corners */
.lang-toggle {
  display: inline-flex;
  border: var(--border-thin);
  padding: 0;
  gap: 0;
  background: var(--bg);
}
.lang-toggle [data-lang] {
  padding: 0.4rem 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  border: none;
  background: transparent;
}
.lang-toggle [data-lang] + [data-lang] {
  border-left: var(--border-thin);
}
.lang-toggle [data-lang]:hover {
  background: var(--ink);
  color: var(--bg);
}
.lang-toggle [data-lang].is-active {
  color: var(--accent-on);
  background: var(--accent);
}

/* Mobile nav toggle — square, thick border */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  border: var(--border);
  background: var(--bg);
  cursor: pointer;
  align-items: center;
}
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
}
.nav-toggle__bar {
  width: 20px;
  height: 2px;
  background: var(--ink);
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav drawer — paper, thick top border, mono index numerals */
.site-nav__drawer {
  position: fixed;
  inset: 4.5rem 0 0;
  background: var(--bg);
  border-top: var(--border-thick);
  padding: var(--space-6) var(--gutter) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transform: translateX(100%);
  transition: transform var(--t-slow);
  z-index: calc(var(--z-nav) - 1);
  overflow-y: auto;
}
.site-nav__drawer.is-open { transform: translateX(0); }
@media (min-width: 1024px) {
  .site-nav__drawer { display: none; }
}
.site-nav__drawer a:not(.btn) {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--fs-h3);
  padding: var(--space-3) 0;
  border-bottom: var(--border-thin);
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.site-nav__drawer a:not(.btn):hover {
  color: var(--accent-2);
  padding-left: var(--space-3);
}
.site-nav__drawer a .drawer__index {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--accent-strong);
  letter-spacing: var(--tracking-wide);
  font-weight: 700;
}
.site-nav__drawer .drawer__cta {
  margin-top: var(--space-6);
}

/* ============================================================
   HERO — .hero
   Brutalist: oversized condensed headline breaking the grid,
   mono eyebrow, hard rule dividers, sticker badges.
   ============================================================ */
.hero {
  position: relative;
  padding-block: clamp(4rem, 2rem + 8vw, 8rem) clamp(3rem, 1.5rem + 6vw, 6rem);
  overflow: hidden;
  border-bottom: var(--border-thick);
}
.hero__inner {
  display: grid;
  gap: var(--space-6);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hero__eyebrow {
  margin-bottom: var(--space-3);
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 900;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
  text-transform: uppercase;
  max-width: 16ch;
  text-wrap: balance;
  color: var(--ink);
}
@media (max-width: 600px) {
  .hero__title { max-width: 100%; font-size: clamp(2rem, 8vw, 3rem); }
}
/* Mixed-weight contrast inside the hero title.
   Italic accent = orange fill (brutalist punch, no serif italic). */
.hero__title .hero__title-italic {
  font-style: italic;
  font-weight: 900;
  color: var(--accent-strong);
}
.hero__title .hero__title-bold {
  font-weight: 900;
}
.hero__title .hero__title-dim {
  color: var(--text-dim);
}

.hero__lead {
  font-size: var(--fs-lead);
  color: var(--ink);
  max-width: 48ch;
  line-height: var(--lh-normal);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  padding-left: var(--space-4);
  border-left: var(--border);
}
@media (max-width: 600px) {
  .hero__lead { max-width: 100%; padding-left: var(--space-3); }
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding-top: var(--space-6);
  margin-top: var(--space-2);
  border-top: var(--border-thick);
}
.hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1 1 12rem;
  padding: var(--space-4) var(--space-5);
  border-right: var(--border-thin);
}
.hero__meta-item:last-child { border-right: none; }
@media (max-width: 600px) {
  .hero__meta-item { flex: 1 1 100%; border-right: none; padding: var(--space-3) var(--space-4); }
  .hero__meta-item + .hero__meta-item { border-top: var(--border-thin); }
}
.hero__meta-item .meta__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-dim);
}
.hero__meta-item .meta__value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h3);
  color: var(--ink);
  text-transform: uppercase;
}
.hero__meta-item .meta__value .accent { color: var(--accent-strong); }

/* ============================================================
   PILLARS — .pillars, .pillar
   Brutalist: exposed grid (thick borders between cells), hover-invert.
   ============================================================ */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: var(--border-thick);
  background: var(--ink); /* gap reads as ink lines via cell borders */
}
@media (min-width: 768px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .pillars { grid-template-columns: repeat(3, 1fr); }
}

.pillar {
  background: var(--bg);
  padding: clamp(1.75rem, 1rem + 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 18rem;
  position: relative;
  transition: background var(--t-fast), color var(--t-fast);
  border: var(--border-thin); /* creates the grid lines between cells */
  margin: -1px 0 0 -1px;      /* collapses double-borders into single ink rule */
}
/* HOVER = COLOR INVERT (spec §4) */
.pillar:hover {
  background: var(--ink);
  color: var(--bg);
}
.pillar:hover .pillar__index { color: var(--accent); }
.pillar:hover .pillar__body { color: rgba(237, 234, 224, 0.8); }
.pillar:hover .pillar__tag {
  color: var(--accent);
  border-top-color: var(--bg);
}
.pillar__index {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--accent-strong);
  letter-spacing: var(--tracking-wide);
}
.pillar__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  margin-top: var(--space-1);
}
.pillar__body {
  color: var(--text-dim);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  flex: 1;
  text-transform: none;
  font-weight: 400;
  transition: color var(--t-fast);
}
.pillar__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-dim);
  border-top: var(--border-thin);
  padding-top: var(--space-3);
  transition: color var(--t-fast), border-top-color var(--t-fast);
}

/* ============================================================
   INDUSTRIES — .industries, .industry-card
   Brutalist: thick border, hard offset shadow on hover, hover-invert.
   ============================================================ */
.industries {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .industries { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .industries { grid-template-columns: repeat(3, 1fr); }
}

.industry-card {
  position: relative;
  background: var(--surface);
  border: var(--border-thick);
  padding: var(--space-6);
  overflow: hidden;
  transition: background var(--t-fast), color var(--t-fast),
              box-shadow var(--t-fast), transform var(--t-fast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 14rem;
  box-shadow: 4px 4px 0 var(--ink);
}
.industry-card:hover {
  background: var(--ink);
  color: var(--bg);
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--accent);
}
.industry-card:hover .industry-card__title { color: var(--bg); }
.industry-card:hover .industry-card__body { color: rgba(237, 234, 224, 0.75); }
.industry-card:hover .industry-card__index { color: var(--accent); }
.industry-card:hover .industry-card__hook {
  color: var(--accent);
  border-top-color: var(--bg);
}

.industry-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.industry-card__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  transition: color var(--t-fast);
}
.industry-card__index {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wide);
  color: var(--text-faint);
  transition: color var(--t-fast);
}
.industry-card__body {
  color: var(--text-dim);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  text-transform: none;
  transition: color var(--t-fast);
}
.industry-card__hook {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: var(--border-thin);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-strong);
  transition: color var(--t-fast), border-top-color var(--t-fast);
}
.industry-card__hook .hook__arrow {
  transition: transform var(--t-fast);
}
.industry-card:hover .industry-card__hook .hook__arrow {
  transform: translateX(4px);
}

/* ============================================================
   CASES — .cases, .case-card
   Brutalist: thick border, hard offset shadow, hover-invert body,
   metric badge = orange sticker, excerpt always visible (not hover-gated).
   ============================================================ */
.cases {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .cases { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}

.case-card {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--surface);
  border: var(--border-thick);
  transition: background var(--t-fast), color var(--t-fast),
              box-shadow var(--t-fast), transform var(--t-fast);
  text-decoration: none;
  color: inherit;
  box-shadow: 6px 6px 0 var(--ink);
}
.case-card:hover {
  background: var(--ink);
  color: var(--bg);
  transform: translate(-3px, -3px);
  box-shadow: 10px 10px 0 var(--accent);
}
.case-card:hover .case-card__body,
.case-card:hover .case-card__title,
.case-card:hover .case-card__tag,
.case-card:hover .case-card__footer {
  color: var(--bg);
}
.case-card:hover .case-card__footer { border-top-color: var(--bg); }

.case-card__media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--surface-2);
  border-bottom: var(--border-thick);
}
.case-card__media img,
.case-card__media-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow), filter var(--t-slow);
}
.case-card__media-placeholder {
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tighter);
}
.case-card:hover .case-card__media img,
.case-card:hover .case-card__media-placeholder {
  transform: scale(1.04);
  filter: invert(1);
}

/* Metric badge = orange sticker, ROTATED -4deg (spec §4 signature). */
.case-card__metric {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 2;
  background: var(--accent);
  color: var(--accent-on);
  padding: 0.45rem 0.85rem;
  border: var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transform: rotate(-4deg);
  box-shadow: 3px 3px 0 var(--ink);
}

.case-card__body {
  padding: var(--space-5) var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: color var(--t-fast);
}
.case-card__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--t-fast);
}
.case-card__tag::before {
  content: '//';
  color: var(--accent-strong);
  font-weight: 700;
}
.case-card__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  transition: color var(--t-fast);
}
.case-card__excerpt {
  color: var(--text-dim);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  text-transform: none;
  transition: color var(--t-fast);
  /* v3: always visible (brutalist = blunt, no hover gate). */
}
.case-card__footer {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border-thin);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: color var(--t-fast), border-top-color var(--t-fast);
}

/* ============================================================
   STEPPER — automation tracker
   Brutalist: exposed vertical/horizontal rule between steps,
   square dot, hard fill on done.
   ============================================================ */
.stepper {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: var(--border-thick);
  background: var(--surface);
  overflow: hidden;
  padding: var(--space-6);
  box-shadow: 6px 6px 0 var(--ink);
}
@media (min-width: 768px) {
  .stepper {
    flex-direction: row;
    padding: var(--space-7);
    gap: 0;
  }
}

.stepper__step {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) 0;
}
.stepper__step + .stepper__step {
  border-top: var(--border-thin);
}
@media (min-width: 768px) {
  .stepper__step { padding: 0 var(--space-4); }
  .stepper__step + .stepper__step {
    border-top: none;
    border-left: var(--border-thin);
  }
}

.stepper__step.is-pending .stepper__label,
.stepper__step:not(.is-done):not(.is-active) .stepper__label {
  color: var(--text-faint);
}

/* Square dot (not circle) — brutalist */
.stepper__dot {
  width: 18px; height: 18px;
  border: var(--border);
  background: var(--bg);
  position: relative;
  flex-shrink: 0;
}
.stepper__step.is-done .stepper__dot {
  background: var(--ink);
  border-color: var(--ink);
}
.stepper__step.is-done .stepper__dot::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.7rem;
}
.stepper__step.is-active .stepper__dot {
  background: var(--accent);
  border-color: var(--ink);
}
.stepper__step.is-active .stepper__dot::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: var(--border-thin);
  background: var(--accent-soft);
  animation: stepper-pulse 2s var(--ease-expo) infinite;
  z-index: -1;
}
@keyframes stepper-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .stepper__step.is-active .stepper__dot::after { animation: none; }
}

.stepper__label {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-dim);
}
.stepper__step.is-active .stepper__label,
.stepper__step.is-done .stepper__label {
  color: var(--ink);
}
.stepper__step.is-active .stepper__label { color: var(--accent-strong); }
.stepper__detail {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--text-faint);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ============================================================
   FAQ ACCORDION — .faq, .faq__item, .faq__q, .faq__a
   Brutalist: thick row dividers, mono index, square toggle icon,
   hover-invert question row.
   ============================================================ */
.faq {
  display: flex;
  flex-direction: column;
  border: var(--border-thick);
}
.faq__item {
  border-bottom: var(--border-thin);
  background: var(--surface);
  transition: background var(--t-fast);
}
.faq__item:last-child { border-bottom: none; }
.faq__item:hover {
  background: var(--ink);
}
.faq__item:hover .faq__q { color: var(--bg); }
.faq__item:hover .faq__q-index { color: var(--accent); }
.faq__item:hover .faq__q-icon { border-color: var(--bg); }
.faq__item.is-open {
  background: var(--ink);
}
.faq__item.is-open .faq__q { color: var(--bg); }
.faq__item.is-open .faq__q-index { color: var(--accent); }
.faq__item.is-open .faq__a-inner { color: var(--bg); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-lead);
  text-transform: uppercase;
  line-height: var(--lh-tight);
  color: var(--ink);
  transition: color var(--t-fast);
}
.faq__q-index {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--accent-strong);
  letter-spacing: var(--tracking-wide);
  margin-right: var(--space-3);
  transition: color var(--t-fast);
}
.faq__q-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border: var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color var(--t-fast), background var(--t-fast),
              transform var(--t-fast);
  background: var(--bg);
}
.faq__q-icon::before,
.faq__q-icon::after {
  content: '';
  position: absolute;
  background: var(--ink);
  transition: transform var(--t-fast), background var(--t-fast);
}
.faq__q-icon::before { width: 14px; height: 2px; }
.faq__q-icon::after  { width: 2px; height: 14px; }
.faq__item:hover .faq__q-icon { background: var(--accent); border-color: var(--accent); }
.faq__item:hover .faq__q-icon::before,
.faq__item:hover .faq__q-icon::after { background: var(--ink); }
.faq__item.is-open .faq__q-icon {
  background: var(--accent);
  border-color: var(--accent);
}
.faq__item.is-open .faq__q-icon::before,
.faq__item.is-open .faq__q-icon::after { background: var(--ink); }
.faq__item.is-open .faq__q-icon::after { transform: rotate(90deg); }

.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-slow);
}
.faq__item.is-open .faq__a {
  max-height: 40rem;
}
.faq__a-inner {
  padding: 0 var(--space-5) var(--space-6);
  color: rgba(237, 234, 224, 0.8);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  max-width: 65ch;
  text-transform: none;
  font-weight: 400;
  transition: color var(--t-fast);
}

/* ============================================================
   CTA BAND — .cta-band
   Brutalist: ink-fill band (inverted), oversized headline, orange accent.
   ============================================================ */
.cta-band {
  position: relative;
  border-top: var(--border-thick);
  border-bottom: var(--border-thick);
  background: var(--ink);
  color: var(--bg);
  padding-block: clamp(4rem, 2rem + 6vw, 7rem);
  overflow: hidden;
}
/* Decorative diagonal stripe band — orange sliver top edge */
.cta-band::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: repeating-linear-gradient(
    -45deg,
    var(--accent) 0 12px,
    var(--ink) 12px 24px
  );
}
.cta-band__inner {
  display: grid;
  gap: var(--space-5);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 768px) {
  .cta-band__inner {
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--space-8);
  }
}
.cta-band__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
  text-transform: uppercase;
  max-width: 18ch;
  text-wrap: balance;
  color: var(--bg);
}
.cta-band__title .accent {
  color: var(--accent);
  font-style: italic;
}
.cta-band__sub {
  color: rgba(237, 234, 224, 0.75);
  font-size: var(--fs-lead);
  max-width: 48ch;
  margin-top: var(--space-3);
  text-transform: none;
  font-weight: 400;
}
.cta-band__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}
@media (min-width: 768px) {
  .cta-band__actions { align-items: flex-end; }
}
/* In the dark CTA band, ghost button inverts to paper border + paper text,
   hover swaps to paper bg + ink text (still legible). */
.cta-band .btn--ghost {
  background: transparent;
  color: var(--bg);
  border-color: var(--bg);
  box-shadow: 4px 4px 0 var(--accent);
}
.cta-band .btn--ghost:hover {
  background: var(--bg);
  color: var(--ink);
}

/* ============================================================
   FORM — .form
   Brutalist: thick bordered inputs, mono labels, focus = orange border,
   inputs invert on focus.
   ============================================================ */
.form {
  display: grid;
  gap: var(--space-5);
  max-width: 38rem;
}
.form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .form__row { grid-template-columns: 1fr 1fr; }
}
.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink);
}
.form__label .req { color: var(--accent-strong); }
.form__input,
.form__textarea,
.form__select {
  width: 100%;
  background: var(--surface);
  border: var(--border);
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast);
  border-radius: 0;
  font-weight: 400;
}
.form__textarea {
  resize: vertical;
  min-height: 8rem;
  font-family: var(--font-body);
}
.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--text-faint);
}
.form__input:hover,
.form__textarea:hover,
.form__select:hover {
  background: var(--surface-2);
}
.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  outline: none;
  background: var(--ink);
  color: var(--bg);
  border-color: var(--accent);
  box-shadow: 4px 4px 0 var(--accent);
}
.form__input:focus::placeholder,
.form__textarea:focus::placeholder {
  color: rgba(237, 234, 224, 0.5);
}
.form__helper {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 400;
  color: var(--text-faint);
}
.form__actions {
  margin-top: var(--space-3);
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}
.form__note {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 400;
  color: var(--text-faint);
}

/* ============================================================
   TRUST STRIP + MARQUEE TICKER — .trust-strip, .marquee
   Brutalist: mono all-caps, ticker animates with transform (GPU),
   pause on hover + reduced-motion. Two copies for seamless loop.
   ============================================================ */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: var(--space-6);
  border-block: var(--border-thick);
}
.trust-strip__item {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h3);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tighter);
  transition: color var(--t-fast);
  white-space: nowrap;
}
.trust-strip__item:hover { color: var(--accent-strong); }
@media (max-width: 600px) {
  .trust-strip__item { font-size: var(--fs-h3); white-space: normal; }
}
.trust-strip--small .trust-strip__item {
  font-size: var(--fs-body);
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
}

/* Marquee ticker — bx.studio signature.
   Mono all-caps with arrow separators. */
.marquee {
  overflow: hidden;
  border-block: var(--border-thick);
  background: var(--ink);
  color: var(--bg);
  padding-block: var(--space-3);
  position: relative;
  white-space: nowrap;
  /* Mask edges for fade — optional, brutalist often skips. */
}
.marquee--accent { background: var(--accent); color: var(--accent-on); }
.marquee--paper { background: var(--bg); color: var(--ink); border-color: var(--ink); }

.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 0;
  animation: marquee-scroll var(--marquee-duration, 30s) linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
    transform: none;
    justify-content: center;
    flex-wrap: wrap;
    white-space: normal;
    padding: 0 var(--space-4);
  }
}
.marquee__item {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  padding-inline: var(--space-4);
  display: inline-flex;
  align-items: center;
}
.marquee__sep {
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 400;
  user-select: none;
}
.marquee--accent .marquee__sep { color: var(--ink); }

@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ============================================================
   SITE FOOTER — .site-footer
   Brutalist: thick top border, mono col titles, oversized wordmark,
   hover-invert links.
   ============================================================ */
.site-footer {
  border-top: var(--border-thick);
  background: var(--ink);
  color: var(--bg);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) var(--space-6);
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  padding-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .site-footer__top {
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: var(--space-7);
  }
}
.site-footer__brand-block {
  max-width: 28rem;
}
.site-footer__brand {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h3);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--bg);
}
.site-footer__brand .brand__accent { color: var(--accent); }
.site-footer__tagline {
  margin-top: var(--space-3);
  color: rgba(237, 234, 224, 0.7);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  max-width: 32ch;
  text-transform: none;
  font-weight: 400;
}
.site-footer__col-title {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-4);
}
.site-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.site-footer__col a {
  color: rgba(237, 234, 224, 0.75);
  font-size: var(--fs-small);
  transition: color var(--t-fast), padding-left var(--t-fast);
  display: inline-block;
}
.site-footer__col a:hover {
  color: var(--accent);
  padding-left: var(--space-2);
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: rgba(237, 234, 224, 0.75);
}
.site-footer__contact a:hover { color: var(--accent); }

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: var(--border-thin);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  color: rgba(237, 234, 224, 0.6);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
}
.site-footer__legal a {
  text-transform: uppercase;
  transition: color var(--t-fast);
}
.site-footer__legal a:hover { color: var(--accent); }

/* Big footer wordmark — brutalist oversized condensed. */
.site-footer__wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 12vw, 8rem);
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
  color: var(--bg);
  -webkit-text-stroke: 2px var(--accent);
  text-stroke: 2px var(--accent);
  text-transform: uppercase;
  text-align: center;
  margin-top: var(--space-7);
  user-select: none;
}

/* ============================================================
   REVEAL — scroll-reveal animation (visual-agnostic, kept from v1)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-slow), transform var(--t-slow);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal--delay-1 { transition-delay: 0.08s; }
.reveal--delay-2 { transition-delay: 0.16s; }
.reveal--delay-3 { transition-delay: 0.24s; }
.reveal--delay-4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   MISC UTILITIES
   ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3rem 0.7rem;
  border: var(--border-thin);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bg);
}
.tag--accent {
  border-color: var(--ink);
  color: var(--accent-on);
  background: var(--accent);
}

.divider-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-dim);
}
.divider-label::before,
.divider-label::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--ink);
}
.divider-label--start::before { display: none; }
.divider-label--end::after { display: none; }

/* Stat block */
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.stat__value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
  color: var(--ink);
  text-transform: uppercase;
}
.stat__value .accent { color: var(--accent-strong); }
.stat__label {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Quote / pullquote */
.pullquote {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
  max-width: 22ch;
  text-transform: uppercase;
}
.pullquote .accent {
  color: var(--accent-strong);
  font-style: italic;
}

/* ============================================================
   BRUTALIST SIGNATURE — rotated sticker badges
   .sticker — acid-orange square, rotated -4deg, mono caps, hard shadow.
   Drop on hero corners, case cards, anywhere for the "wow".
   ============================================================ */
.sticker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: var(--accent-on);
  border: var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transform: rotate(-4deg);
  box-shadow: 3px 3px 0 var(--ink);
  white-space: nowrap;
}
.sticker--blue {
  background: var(--accent-2);
  color: var(--bg);
}
.sticker--ink {
  background: var(--ink);
  color: var(--accent);
}
.sticker--rot-r { transform: rotate(4deg); }
.sticker--lg {
  font-size: var(--fs-small);
  padding: var(--space-3) var(--space-5);
}

/* ============================================================
   BRUTALIST SIGNATURE — exposed grid debug lines (optional)
   Apply .grid-lines on a section to expose vertical column markers.
   ============================================================ */
.grid-lines {
  background-image:
    linear-gradient(to right,
      transparent calc(50% - 0.5px),
      var(--line) calc(50% - 0.5px),
      var(--line) calc(50% + 0.5px),
      transparent calc(50% + 0.5px));
  background-size: 100% 100%;
}

/* ============================================================
   CUSTOM DOT CURSOR (optional, JS-gated)
   Disabled on touch + reduced-motion by interactions.js.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  body.has-dot-cursor {
    cursor: none;
  }
  body.has-dot-cursor a,
  body.has-dot-cursor button,
  body.has-dot-cursor [data-cursor] {
    cursor: none;
  }
}
.dot-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 12px; height: 12px;
  background: var(--accent);
  border: var(--border-thin);
  pointer-events: none;
  z-index: var(--z-modal);
  transform: translate(-50%, -50%);
  transition: width var(--t-fast), height var(--t-fast),
              background var(--t-fast);
  mix-blend-mode: difference;
  will-change: transform;
}
.dot-cursor.is-hover {
  width: 32px; height: 32px;
  background: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .dot-cursor { display: none !important; }
}

/* ============================================================
   WCAG AA — kontakt.html inline-style overrides
   kontakt.html ships orange text-on-paper via page-level <style>
   using var(--accent). These higher-specificity (0,3,0) rules
   redirect that text to the AA-compliant --accent-strong so
   contrast passes without touching the HTML.
   ============================================================ */
.contact-hero .contact-hero__title .hero__title-italic { color: var(--accent-strong); }
.trust-band__cell .trust-band__value .accent            { color: var(--accent-strong); }
.reassure .reassure__line .accent                       { color: var(--accent-strong); }