/* Tilsim — production stylesheet
   Brutalist Bold. Light + Dark. Responsive: mobile / tablet / desktop. */

/* ============================================================
   1. TOKENS
   ============================================================ */

:root {
  --ink:   #261a0c;
  --paper: #ece1c9;
  --line:  #261a0c;
  --hot:   #b4622a;
  --muted: #6f5d45;

  /* Inverse-block surface — used on .marq / .fcta / .newbie-l / .vert .vnum */
  --inverse-bg: #261a0c;
  --inverse-fg: #ece1c9;
  --inverse-hot: #b4622a;

  --container: 1280px;
  --pad-x: 32px;
}

[data-theme="dark"] {
  --ink:   #ece1c9;
  --paper: #1a1206;
  --line:  #cdbfa3;
  --hot:   #cf7d3f;
  --muted: #a3917a;

  /* In dark, "inverse" stays darker than the page background instead of
     flipping to full paper, so the rhythm keeps reading as a dark site. */
  --inverse-bg: #2a1d0e;
  --inverse-fg: #ece1c9;
  --inverse-hot: #cf7d3f;
}

/* Sage — light green world (scroll rotation) */
[data-theme="sage"] {
  --ink:   #23271a;
  --paper: #dde0cf;
  --line:  #23271a;
  --hot:   #a76a2f;
  --muted: #61664f;
  --inverse-bg:  #23271a;
  --inverse-fg:  #dde0cf;
  --inverse-hot: #a76a2f;
}

/* Olive — dark green world (scroll rotation) */
[data-theme="olive"] {
  --ink:   #e7e4d4;
  --paper: #1b2016;
  --line:  #c2c6b2;
  --hot:   #d08a45;
  --muted: #8a9078;
  --inverse-bg:  #2a3022;
  --inverse-fg:  #e7e4d4;
  --inverse-hot: #d08a45;
}

/* ============================================================
   2. BASE
   ============================================================ */

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

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  transition: background-color .6s ease-out, color .6s ease-out;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--ink); text-decoration: none; }

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

/* Focus visible — keyboard navigation. Brutalist orange ring. */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--hot);
  outline-offset: 3px;
}

/* Skip link — hidden until focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  z-index: 999;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
}

/* ============================================================
   3. TYPOGRAPHY UTILITIES
   ============================================================ */

.mono {
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Kicker — small "section number + label" caption.
   Variants: --inverse (for use inside dark sections), --centered. */
.kicker {
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
}

.kicker__num {
  background: var(--ink);
  color: var(--paper);
  padding: 3px 8px;
}

.kicker--centered {
  justify-content: center;
}

.kicker--inverse {
  color: var(--inverse-fg);
}

.kicker--inverse .kicker__num {
  background: var(--inverse-fg);
  color: var(--inverse-bg);
}

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* ============================================================
   4. HEADER
   ============================================================ */

.bar {
  border-bottom: 2px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 9;
}

.bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--pad-x);
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  gap: 18px;
}

.bar nav {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
}

.bar nav a {
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.bar nav a:hover { border-bottom-color: var(--hot); }

.bar .brand {
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -.02em;
  text-transform: none;
  font-family: "Helvetica Neue", sans-serif;
  padding: 6px 0;
}

/* ============================================================
   5. HERO
   ============================================================ */

.hero {
  padding: 72px 0 96px;
  border-bottom: 8px solid var(--line);
  position: relative;
}

.hero h1 {
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 900;
  font-size: clamp(56px, 9.5vw, 160px);
  line-height: .88;
  letter-spacing: -.045em;
  text-transform: uppercase;
  margin: 32px 0 28px;
  max-width: 12ch;
}

.hero h1 em { font-style: normal; color: var(--hot); }

.hero .lede {
  font-size: 23px;
  line-height: 1.35;
  max-width: 62ch;
  margin-bottom: 36px;
  font-weight: 500;
}

.cta-block {
  display: flex;
  gap: 18px;
  align-items: flex-end;
  flex-wrap: wrap;
  width: 100%;
}

/* Button — base solid call-to-action.
   Variants: --ghost (transparent fill), --xl (final-CTA size),
             --cta-inverse (orange fill, for use inside dark sections). */
.btn {
  display: inline-block;
  padding: 16px 28px;
  border: 3px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: "Helvetica Neue", sans-serif;
  transition: transform .08s ease, box-shadow .15s;
}

.btn:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--hot);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
}

.btn--xl {
  font-size: 24px;
  padding: 24px 48px;
}

.btn--cta-inverse {
  background: var(--inverse-hot);
  border-color: var(--inverse-hot);
  color: #f5efe2;
}

.btn--cta-inverse:hover {
  box-shadow: 8px 8px 0 var(--inverse-fg);
}

/* CTA-note — small caption under a CTA group.
   Variant: --inverse (for use inside dark sections). */
.cta-note {
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 16px;
}

.cta-note--inverse {
  color: var(--inverse-fg);
  margin-top: 32px;
}

.cta-note--inverse a {
  color: var(--inverse-fg);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ============================================================
   6. MARQUEE STRIP
   ============================================================ */

.marq {
  border-bottom: 2px solid var(--line);
  overflow: hidden;
  background: var(--inverse-bg);
  color: var(--inverse-fg);
}

.marq-track {
  display: flex;
  gap: 48px;
  padding: 18px 0;
  white-space: nowrap;
  animation: scroll 40s linear infinite;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 900;
  font-size: 32px;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.marq-track span:nth-child(odd) { color: var(--inverse-hot); }

@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marq-track { animation: none; }
}

/* ============================================================
   7. SECTIONS
   ============================================================ */

.sec {
  padding: 80px 0;
  border-bottom: 2px solid var(--line);
}

.sec h2 {
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 5.5vw, 80px);
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin-bottom: 28px;
  max-width: 18ch;
}

.sec p {
  font-size: 19px;
  line-height: 1.55;
  margin-bottom: 16px;
  max-width: 62ch;
}

.sec h3 {
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 900;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin: 0 0 8px;
}

/* ============================================================
   8. SCALE STRIP
   ============================================================ */

.scale-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 48px;
  border: 3px solid var(--line);
}

.scale-strip li {
  list-style: none;
  padding: 32px 24px;
  border-right: 3px solid var(--line);
}

.scale-strip li:last-child { border-right: none; }

.scale-strip .n {
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 900;
  font-size: clamp(56px, 8vw, 120px);
  line-height: .9;
  letter-spacing: -.04em;
  display: block;
}

.scale-strip .l {
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-top: 8px;
  display: block;
}

/* ============================================================
   9. WHAT WE BUILD GRID
   ============================================================ */

.build-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 32px;
  border: 3px solid var(--line);
}

.build-cell {
  padding: 36px;
  border-right: 3px solid var(--line);
  border-bottom: 3px solid var(--line);
}

.build-cell:nth-child(2n)   { border-right: none; }
.build-cell:nth-child(n+3)  { border-bottom: none; }

.build-cell .label {
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hot);
  margin-bottom: 14px;
  display: block;
}

/* ============================================================
   10. VERTICALS
   ============================================================ */

.verts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 3px solid var(--line);
  margin-top: 32px;
  background: var(--paper);
  position: relative;
}

/* Dark theme: the .verts panel keeps light-mode tokens locally so it always
   reads as a paper card on the dark page. The x-ray lens still operates. */
[data-theme="dark"] .verts,
[data-theme="olive"] .verts {
  --ink:   #261a0c;
  --paper: #ece1c9;
  --line:  #261a0c;
  --hot:   #b4622a;
  --muted: #6f5d45;
  --inverse-bg:  #261a0c;
  --inverse-fg:  #ece1c9;
  --inverse-hot: #b4622a;
  background: var(--paper);
  color: var(--ink);
}

.vert {
  display: grid;
  grid-template-columns: 120px 1fr;
  border-bottom: 3px solid var(--line);
  align-items: stretch;
  position: relative;
  z-index: 1;
  transition: background-color .25s ease, color .25s ease;
}

.vert:last-child { border-bottom: none; }

.vert .vnum {
  background: var(--inverse-bg);
  color: var(--inverse-fg);
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 900;
  font-size: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.vert .vbody {
  padding: 28px 36px;
  background: var(--paper);
  color: var(--ink);
}
.vert .vbody h3 {
  margin-bottom: 8px;
  color: var(--ink);
}
.vert .vbody p {
  color: var(--ink);
}

/* .vmeta column removed from layout; rules kept minimal in case of future re-add. */
.vert .vmeta { display: none; }

/* X-ray overlay — orange duplicate of the .vnum column.
   Always rendered in document flow at the same vertical positions as the
   original .vnum cells. JS clips it to a fixed rectangle at viewport
   centre via clip-path, so the orange-on-black layer is visible only
   inside the "lens window" while the natural black-on-paper column
   shows everywhere else. */
.verts__xray {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  background: var(--hot);
  color: var(--ink);
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 900;
  font-size: 64px;
  line-height: 1;
  /* When JS hasn't computed clip-path yet (first paint), hide entirely */
  clip-path: inset(100% 0 100% 0);
  will-change: clip-path;
}

.verts__xray-num {
  position: absolute;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

/* Active row — the row whose centre is closest to the lens window centre.
   Body cell flips to ink-on-paper. On mobile (xray hidden) the .vnum cell
   also flips to orange so the active row is still visible. */
.vert--lensed .vbody {
  background: var(--ink);
  color: var(--paper);
  transition: background-color .25s ease, color .25s ease;
}
.vert--lensed .vbody h3,
.vert--lensed .vbody p { color: var(--paper); }

/* Reduced-motion users see a static row-1 highlight only — no scroll-driven
   lens. The xray overlay is hidden entirely. */
@media (prefers-reduced-motion: reduce) {
  .verts__xray { display: none; }
  .vert:first-child .vnum {
    background: var(--hot);
    color: var(--ink);
  }
  .vert--lensed .vbody,
  .vert--lensed .vmeta { transition: none; }
}

/* ============================================================
   11. NEWBIE BLOCK
   ============================================================ */

.newbie {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 3px solid var(--line);
  margin-top: 32px;
}

.newbie-l {
  padding: 48px 36px;
  background: var(--inverse-bg);
  color: var(--inverse-fg);
}

.newbie-l h2 { color: var(--inverse-fg); }

.newbie-l p {
  color: var(--inverse-fg);
  max-width: none;
}

.newbie-l .big {
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 900;
  font-size: 120px;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--inverse-hot);
  margin: 0;
}

.newbie-r { padding: 48px 36px; }
.newbie-r ul { list-style: none; }

.newbie-r li {
  font-size: 18px;
  padding: 16px 0;
  border-bottom: 2px solid var(--line);
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.newbie-r li:last-child { border-bottom: none; }

.newbie-r li::before {
  content: "→";
  font-weight: 900;
  color: var(--hot);
}

/* ============================================================
   12. PROCESS HORIZONTAL
   ============================================================ */

.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 32px;
  border: 3px solid var(--line);
}

.step {
  padding: 36px 24px;
  border-right: 3px solid var(--line);
  transition: background-color .2s ease, color .2s ease;
}

.step:last-child { border-right: none; }

/* Hover inversion — hovered step flips to ink-on-paper, orange stepnum stays.
   Works in both themes via var(--ink)/var(--paper) tokens. */
.step:hover {
  background: var(--ink);
  color: var(--paper);
  --muted: rgba(244, 241, 234, .65);
}
.step:hover h3 { color: var(--paper); }
.step:hover p { color: var(--paper); }
.step:hover .stepnum { color: var(--hot); }

.step .stepnum {
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 900;
  font-size: 80px;
  line-height: 1;
  color: var(--hot);
  margin-bottom: 12px;
}

.step h3 { margin-bottom: 8px; }

.step .when {
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 14px;
}

.step p {
  font-size: 15px;
  max-width: none;
  color: var(--ink);
}

.process-note {
  margin-top: 32px;
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   13. WHY ROWS
   ============================================================ */

.why-row {
  padding: 32px 0;
  border-bottom: 2px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 36px;
  align-items: start;
}

.why-row:last-child { border-bottom: none; }

.why-row h3 {
  font-size: 32px;
  line-height: 1;
  letter-spacing: -.02em;
}

.why-row p {
  font-size: 18px;
  margin: 0;
  max-width: none;
}

/* ============================================================
   14. FINAL CTA
   ============================================================ */

/* Final CTA section — centered, dark-tone wrapper.
   Visuals of inner elements come from their own modifier classes
   (.kicker--inverse--centered, .btn--xl--cta-inverse, .cta-note--inverse).
   This section only sets layout: padding, background, alignment. */
.fcta {
  padding: 120px 0;
  background: var(--inverse-bg);
  color: var(--inverse-fg);
  border-bottom: none;
  text-align: center;
}

.fcta h2 {
  color: var(--inverse-fg);
  max-width: none;
  font-size: clamp(48px, 8vw, 120px);
  margin-bottom: 48px;
}

/* ============================================================
   15. FOOTER
   ============================================================ */

.foot {
  padding: 24px var(--pad-x);
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.foot a { color: var(--muted); }
.foot a:hover { color: var(--ink); }

/* ============================================================
   16. RESPONSIVE — TABLET (≤ 1024px)
   ============================================================ */

@media (max-width: 1024px) {
  :root { --pad-x: 24px; }

  .hero { padding: 56px 0 80px; }
  .sec  { padding: 64px 0; }

  .process { grid-template-columns: 1fr 1fr; }
  .step:nth-child(2n)   { border-right: none; }
  .step:nth-child(-n+2) { border-bottom: 3px solid var(--line); }

  .vert { grid-template-columns: 100px 1fr; }
  .verts__xray { width: 100px; font-size: 56px; }

  .why-row { gap: 24px; }
  .why-row h3 { font-size: 28px; }
}

/* ============================================================
   17. RESPONSIVE — MOBILE (≤ 768px)
   ============================================================ */

@media (max-width: 768px) {
  :root { --pad-x: 20px; }

  body { font-size: 17px; }

  .bar-row { padding: 12px var(--pad-x); gap: 12px; }
  /* Nav rules below are overridden by .menu drawer on mobile. */

  .hero { padding: 48px 0 64px; }
  .hero .lede { font-size: 19px; }

  .sec  { padding: 56px 0; }
  .fcta { padding: 80px 0; }
  .fcta .btn { font-size: 18px; padding: 18px 32px; }

  .marq-track { font-size: 24px; gap: 32px; }

  .scale-strip { grid-template-columns: 1fr; }
  .scale-strip li { border-right: none; border-bottom: 3px solid var(--line); }
  .scale-strip li:last-child { border-bottom: none; }

  .build-grid,
  .newbie,
  .process { grid-template-columns: 1fr; }

  .build-cell,
  .step {
    border-right: none;
    border-bottom: 3px solid var(--line);
  }
  .build-cell:last-child,
  .step:last-child { border-bottom: none; }

  .vert { grid-template-columns: 80px 1fr; }
  .vert .vnum { font-size: 48px; }
  .vert .vbody { padding: 22px 24px; }

  /* Mobile: hide the xray clip-path overlay (vmeta wraps full-width below,
     so the left-column overlay would cut into vmeta awkwardly). The active
     row is still tracked by JS — paint its .vnum orange for visibility. */
  .verts__xray { display: none; }
  .vert--lensed .vnum {
    background: var(--hot);
    color: #f5efe2;
  }

  .newbie-l { padding: 36px 24px; }
  .newbie-r { padding: 36px 24px; }
  .newbie-l .big { font-size: 72px; }

  .why-row { grid-template-columns: 1fr; gap: 12px; }
  .why-row h3 { font-size: 24px; }
}

/* ============================================================
   18. RESPONSIVE — SMALL MOBILE (≤ 480px)
   ============================================================ */

@media (max-width: 480px) {
  .hero h1 { font-size: 56px; }
  .marq-track { font-size: 20px; }
  .step .stepnum { font-size: 64px; }
  .vert .vnum { font-size: 40px; }
  .newbie-l .big { font-size: 56px; }
}

/* ============================================================
   19. MENU / HAMBURGER (mobile drawer)
   ============================================================ */

.menu {
  display: flex;
  align-items: center;
  gap: 22px;
}

.menu-toggle {
  display: none; /* desktop hides; mobile shows */
  border: 2px solid var(--ink);
  background: transparent;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 60;
}

.menu-toggle__icon {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}
.menu-toggle__icon span {
  display: block;
  height: 3px;
  background: var(--ink);
  transition: transform .25s ease, opacity .15s ease;
  transform-origin: center;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

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

@media (max-width: 768px) {
  .menu-toggle { display: inline-flex; }

  .menu {
    position: fixed;
    inset: 0;
    background: var(--paper);
    color: var(--ink);
    z-index: 50;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 88px 24px 32px;
    transform: translateX(100%);
    transition: transform .25s ease;
    visibility: hidden;
    overflow-y: auto;
  }
  .menu[data-open="true"] {
    transform: translateX(0);
    visibility: visible;
  }

  .menu nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    flex-wrap: nowrap;
  }
  .menu nav a {
    display: block;
    padding: 18px 0;
    font-size: 18px;
    border-bottom: 2px solid var(--line);
  }
  .menu nav a:last-child { border-bottom: none; }
}

/* ============================================================
   20. CONTACT FORM
   ============================================================ */

.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form__label {
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--inverse-fg);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.form__counter {
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(244, 241, 234, .55);
  text-transform: none;
}
.form__counter--warn { color: var(--inverse-hot); }

.form__input,
.form__textarea {
  background: transparent;
  color: var(--inverse-fg);
  border: 3px solid var(--inverse-fg);
  padding: 14px 18px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  width: 100%;
}

.form__textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.5;
  font-family: inherit;
}

.form__input:focus-visible,
.form__textarea:focus-visible {
  outline: 3px solid var(--inverse-hot);
  outline-offset: 3px;
}

.form button[type="submit"] {
  align-self: flex-start;
  margin-top: 18px;
}

.form__status {
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--inverse-fg);
  margin: 12px 0 0;
  min-height: 20px;
}
.form__status--error   { color: var(--inverse-hot); }
.form__status--success { font-weight: 700; }

.form__honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form button[type="submit"]:disabled {
  opacity: .6;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .form__row { grid-template-columns: 1fr; }
}

/* ============================================================
   21. SUCCESS MODAL
   ============================================================ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, .75);
  cursor: pointer;
}

.modal__panel {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  padding: 56px 40px 40px;
  max-width: 520px;
  width: 100%;
  text-align: left;
  box-shadow: 8px 8px 0 var(--hot);
}

/* In dark theme, keep modal as a paper card so it pops against backdrop */
[data-theme="dark"] .modal__panel,
[data-theme="olive"] .modal__panel {
  --ink:   #261a0c;
  --paper: #ece1c9;
  --line:  #261a0c;
  --hot:   #b4622a;
  --muted: #6f5d45;
  background: var(--paper);
  color: var(--ink);
}

.modal__close {
  position: absolute;
  top: 4px;
  right: 8px;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 36px;
  line-height: 1;
  background: transparent;
  border: none;
  color: var(--ink);
  cursor: pointer;
  padding: 8px 14px;
  transition: color .15s ease;
}
.modal__close:hover { color: var(--hot); }
.modal__close:focus-visible { outline: 3px solid var(--hot); outline-offset: 2px; }

.modal__title {
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 900;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin-bottom: 24px;
  color: var(--ink);
}

.modal__body {
  font-size: 17px;
  line-height: 1.5;
  margin-bottom: 14px;
  color: var(--ink);
  max-width: none;
}

.modal__body a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 700;
}
.modal__body a:hover { color: var(--hot); }

.modal__panel .btn {
  margin-top: 22px;
}

@media (max-width: 480px) {
  .modal__panel {
    padding: 48px 24px 28px;
    box-shadow: 4px 4px 0 var(--hot);
  }
  .modal__title { font-size: 26px; }
}

/* ============================================================
   22. PRINT
   ============================================================ */

@media print {
  .bar, .marq, .fcta, .skip-link, .menu-toggle, .form, .modal { display: none; }
  body { font-size: 12pt; }
  .sec { padding: 24pt 0; border-bottom: 1pt solid #000; }
}

/* ============================================================
   SCROLL THEME WORLDS + LINE-WIPE  (effect ported from evolveprivatewealth.com)
   - Cohesive .6s colour fade across the whole page on theme change.
   - :where(*) has zero specificity, so every element gets a default fade,
     but any element with its own `transition` (buttons, hovers, .vert, transforms)
     keeps it and overrides this — no existing interaction is broken.
   ============================================================ */
:where(*) {
  transition: background-color .6s ease-out, color .6s ease-out, border-color .6s ease-out;
}

/* Line-wipe overlay: 50 stacked bands of graduated height (like Evolve's #line-transition) */
#line-transition {
  position: fixed; inset: 0; z-index: 8000; display: grid; pointer-events: none;
  grid-template-rows: repeat(10,5fr) repeat(10,4fr) repeat(10,3fr) repeat(10,2fr) repeat(10,1fr);
}
#line-transition .line {
  background: var(--ink); transform: scaleY(0); transform-origin: top;
  transition: transform .34s cubic-bezier(.4,0,.2,1), background-color .6s ease-out;
}
#line-transition.cover .line { transform: scaleY(1); }
/* Arriving from a page transition: bands cover at first paint, then JS reveals them. */
html.wipe-enter #line-transition .line { transform: scaleY(1); }

@media (prefers-reduced-motion: reduce) {
  html, body, :where(*) { transition: none !important; }
  #line-transition { display: none !important; }
}