/* OffMarketX homepage: the seven folios (September 2026 special-situations
   origination rewrite). Single stylesheet for /home.html. Tokens, surfaces and
   the three recurring devices (filing stamp, signature line, rotated folio
   number) live here; the scripted motion moments live in /home.js. Radius 0
   everywhere, 2px on buttons only. No gradients, no glass. */

:root {
  --forest: #0B2E23;
  --paper: #F3F4F1;
  --ink: #121412;
  --muted: #70756F;        /* decorative only (folio numbers, hairlines) */
  --muted-text: #565B55;   /* small readable text on paper, 6:1 */
  --paper-soft: rgba(243, 244, 241, 0.8); /* small readable text on forest */
  --green: #1FB65A;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --margin: 120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 0.5em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -0.005em; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: inherit; }

.mono { font-family: var(--mono); font-size: 0.8125rem; line-height: 1.5; }

/* Keyboard focus: one visible ring everywhere, green on both surfaces. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  font-family: var(--mono);
  font-size: 0.8125rem;
  background: var(--green);
  color: var(--forest);
  padding: 0.6rem 0.9rem;
  text-decoration: none;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---- Surfaces ------------------------------------------------------- */

.folio { position: relative; padding: 7rem var(--margin) 6rem; }
.folio.hero, .folio.close { overflow: hidden; }
.folio--forest { background: var(--forest); color: var(--paper); }
.folio--paper { background: var(--paper); color: var(--ink); }
/* Anchored sections land below the absolutely positioned nav. */
.folio[id] { scroll-margin-top: 1rem; }

/* 3% noise on the light-paper blocks (and the footer). */
.folio--paper::before,
.omx-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.folio > .folio-inner, .omx-footer > .folio-inner { position: relative; z-index: 2; }
.folio-inner { max-width: 1160px; margin: 0 auto; }
/* Paper folios that follow paper folios share a hairline so the page keeps
   its rhythm without a colour change. */
.folio--paper + .folio--paper { padding-top: 5.5rem; }
.folio--paper + .folio--paper::after {
  content: "";
  position: absolute;
  top: 0;
  left: var(--margin);
  right: var(--margin);
  border-top: 1px solid rgba(18, 20, 18, 0.14);
}

/* ---- Recurring devices ---------------------------------------------- */

/* Rotated folio number in the left margin. */
.folio-no {
  position: absolute;
  z-index: 3;
  top: 7.5rem;
  left: 0;
  width: var(--margin);
  display: flex;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.folio--forest .folio-no { color: var(--muted); }

/* Rectangular ink filing stamp: black for record actions, green for
   OffMarketX actions, slightly rotated. */
.stamp {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.7rem;
  border: 1.5px solid currentColor;
  transform: rotate(-2deg);
  transform-origin: left bottom;
  margin-bottom: 2rem;
}
.stamp--green { color: var(--green); }
.stamp--ink { color: var(--ink); }
.folio--forest .stamp--ink { color: var(--paper); }

/* Signature line: thin rule, small × at left, mono caption. */
.sig { position: relative; padding-top: 1.4rem; }
.sig-x {
  position: absolute;
  top: 0.15rem;
  left: 0;
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--green);
}
.sig-rule {
  display: block;
  height: 1px;
  background: var(--green);
  transform-origin: left center;
}
.sig-caption {
  display: block;
  font-family: var(--mono);
  font-size: 0.8125rem;
  margin-top: 0.5rem;
  color: var(--green);
}
.sig-link { display: inline-block; text-decoration: underline; text-underline-offset: 3px; }
.sig-link:hover { text-decoration: none; }
/* Self-drawing: rule scales in from the left, caption follows. The hidden
   initial states are scoped to html.js so that without the script the final
   state renders. Under reduced motion the script applies final states at
   once. */
html.js .sig[data-draw] .sig-rule { transform: scaleX(0); transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
html.js .sig[data-draw] .sig-caption, html.js .sig[data-draw] .sig-x { opacity: 0; transition: opacity 0.5s ease 0.6s; }
html.js .sig[data-draw].is-drawn .sig-rule { transform: scaleX(1); }
html.js .sig[data-draw].is-drawn .sig-caption, html.js .sig[data-draw].is-drawn .sig-x { opacity: 1; }

/* Buttons: the one 2px-radius exception. */
.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.9375rem;
  text-decoration: none;
  background: var(--green);
  color: var(--forest);
  border: 1px solid var(--green);
  border-radius: 2px;
  padding: 0.85rem 1.5rem;
  cursor: pointer;
  line-height: 1.4;
}
.btn:hover { background: transparent; color: var(--green); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
.btn[disabled]:hover { background: var(--green); color: var(--forest); }

/* ---- Nav ------------------------------------------------------------- */

.omx-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.4rem var(--margin) 1.4rem;
  background: transparent;
  color: var(--paper);
}
.wordmark { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; text-decoration: none; }
.wordmark .tld { color: var(--green); }
.nav-links { margin-left: auto; }
.nav-links ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-family: var(--mono); font-size: 0.8125rem; text-decoration: none; opacity: 0.9; }
.nav-links a:hover { opacity: 1; color: var(--green); }
.omx-nav .btn { padding: 0.55rem 1rem; font-size: 0.8125rem; }

/* Mobile menu: a native <details>, no script required. Hidden on desktop. */
.nav-menu { display: none; position: relative; }
.nav-menu summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.8125rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(243, 244, 241, 0.4);
  border-radius: 2px;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu[open] summary { border-color: var(--green); color: var(--green); }
.nav-menu ul {
  position: absolute;
  right: 0;
  top: calc(100% + 0.6rem);
  min-width: 15rem;
  margin: 0;
  padding: 0.6rem 0;
  list-style: none;
  background: var(--forest);
  border: 1px solid rgba(243, 244, 241, 0.25);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.nav-menu li a {
  display: block;
  padding: 0.7rem 1.1rem;
  font-family: var(--mono);
  font-size: 0.875rem;
  text-decoration: none;
  color: var(--paper);
}
.nav-menu li a:hover { color: var(--green); }
.nav-menu li:last-child a { color: var(--green); border-top: 1px solid rgba(243, 244, 241, 0.15); margin-top: 0.4rem; }

/* ---- Folio 1: hero --------------------------------------------------- */

.hero { min-height: 100vh; display: flex; align-items: center; padding-top: 8rem; padding-bottom: 5rem; }
.hero .folio-inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 4rem;
  align-items: center;
}
.hero-copy p { max-width: 34em; font-size: 1.075rem; }
.hero-copy p.mono { font-size: 0.8125rem; }
.hero-eyebrow { color: var(--paper-soft); margin-bottom: 1.1rem; }
.hero-copy p.hero-eyebrow { font-size: 0.8125rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.4rem; margin-top: 0.75rem; }
.hero-support { color: var(--paper-soft); margin-top: 1.4rem; max-width: 40em; }
/* Secondary CTA: quiet mono link beside the button. */
.hero-secondary {
  display: inline-block;
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero-secondary:hover { text-decoration: none; }

/* Background layers: county dot map + drifting deed pages. */
.hero-field, .close-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-map {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-map canvas { width: min(78vw, 1150px); height: auto; opacity: 0.8; }

/* A drifting deed page: paper rectangle with faint ruled lines. */
.drift-page {
  position: absolute;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 11px,
      rgba(18, 20, 18, 0.16) 11px 12px
    ),
    var(--paper);
  opacity: 0.045;
  animation: drift var(--dur, 60s) linear infinite alternate;
}
.close-field .drift-page { animation: none; opacity: 0.035; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) rotate(var(--rot, -4deg)); }
  to { transform: translate3d(var(--dx, 40px), var(--dy, -30px), 0) rotate(var(--rot2, 2deg)); }
}
.is-still .drift-page { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .drift-page { animation: none; }
}

/* The hero record: a paper card carrying one real research brief, resolved
   row by row. The only soft shadow on the page. */
.record {
  position: relative;
  z-index: 4;
  background: var(--paper);
  color: var(--ink);
  padding: 3.2rem 2rem 1.6rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  max-width: 30rem;
  justify-self: end;
  width: 100%;
}
.record .stamp { position: absolute; top: 1.1rem; right: 1.2rem; margin: 0; transform: rotate(2.5deg); }
.record-title { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; line-height: 1.25; margin: 0 0 0.9rem; padding-right: 8rem; }
.record-rows { font-family: var(--mono); font-size: 0.8125rem; }
.record-row { padding: 0.55rem 0; border-bottom: 1px solid rgba(18, 20, 18, 0.14); }
.record-row.is-green { color: #14803f; }
.record-row .k { color: var(--muted-text); }
.record-row.is-green .k { color: #14803f; }
.record .sig { margin-top: 1.2rem; }
.record .sig-caption { font-weight: 500; }
.record-foot { font-family: var(--mono); font-size: 0.78rem; color: var(--muted-text); margin: 1rem 0 0; }

/* Load resolve: rows hidden until the script inks them. The final state is
   fully inked. */
html.js .record[data-resolve] .record-row { opacity: 0; transform: translateY(4px); transition: opacity 0.35s ease, transform 0.35s ease; }
html.js .record[data-resolve] .record-row.is-inked { opacity: 1; transform: none; }
html.js .record[data-lift] { opacity: 0; transform: translateY(26px) rotate(-3deg) scale(0.96); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.3, 0, 0.2, 1); }
html.js .record[data-lift].is-lifted { opacity: 1; transform: none; }

/* ---- Folio 2: research brief cards ------------------------------------ */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  margin: 2.5rem 0 1.6rem;
}
.card { border: 1px solid var(--ink); background: var(--paper); position: relative; padding: 0 1.1rem 1.1rem; display: flex; flex-direction: column; }
.card-tab {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-bottom: none;
  padding: 0.35rem 0.8rem;
  margin: -1px 0 0.9rem -1.1rem;
  transform: translateY(-55%);
}
.brief-title { font-size: 1.1rem; line-height: 1.3; margin: -0.2rem 0 0.9rem; }
.card dl { margin: 0; font-family: var(--mono); font-size: 0.8125rem; flex: 1; }
.card dl div { display: grid; grid-template-columns: 6.6em 1fr; gap: 0.6em; padding: 0.45rem 0; border-bottom: 1px solid rgba(18, 20, 18, 0.1); }
.card dt { color: var(--muted-text); margin: 0; }
.card dd { margin: 0; line-height: 1.5; }
.card--brief dd { font-family: var(--serif); font-size: 0.95rem; }
.card--brief .status-line { font-family: var(--mono); font-size: 0.8125rem; color: #14803f; }
.brief-link {
  display: inline-block;
  align-self: flex-start;
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--forest);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.brief-link:hover { color: #14803f; text-decoration: none; }
.cards-cta { text-align: center; margin: 2.4rem 0 1.4rem; }
.cards-cta--left { text-align: left; margin: 1.6rem 0 0; }
.cards-note { max-width: 58em; color: var(--muted-text); }
.lede { max-width: 38em; font-size: 1.075rem; }

/* ---- Folio 3: situations worth a conversation (forest) ---------------- */

#situations .body-copy { max-width: 40em; font-size: 1.075rem; margin-top: 0.4rem; }
.objections--forest { border-top: 1px solid rgba(243, 244, 241, 0.2); margin-top: 0.5rem; }
.objections--forest .obj { padding: 1.1rem 0; border-bottom: 1px solid rgba(243, 244, 241, 0.2); }
.objections--forest .obj-q { font-size: 1.15rem; }
.objections--forest .obj-a { color: var(--paper-soft); font-family: var(--serif); font-size: 1rem; }

/* ---- Folio 4: how it works -------------------------------------------- */

.steps { list-style: none; counter-reset: step; margin: 2.2rem 0 0; padding: 0; max-width: 44em; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.2rem 3.2rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid rgba(18, 20, 18, 0.14);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.2rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: #14803f;
}
.steps li:last-child { border-bottom: none; }
.process-note { color: var(--muted-text); max-width: 44em; margin-top: 1.6rem; }

/* ---- Folio 5: who is behind OffMarketX -------------------------------- */

.who {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 2rem;
  margin-top: 1.5rem;
  max-width: 62rem;
}
.who-card { border: 1px solid var(--ink); padding: 1.6rem 1.6rem 1.4rem; background: var(--paper); }
.who-name { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; margin: 0 0 0.2rem; }
.who-role { color: var(--muted-text); margin: 0 0 1rem; }
.who-body { max-width: 34em; margin-bottom: 1.2rem; }
.who-contact, .who-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.who-contact a, .who-links a { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }
.who-contact a:hover, .who-links a:hover { color: #14803f; text-decoration: none; }
.who-aside { padding-top: 0.4rem; }
.who-aside-head { font-family: var(--mono); font-size: 0.8125rem; color: var(--muted-text); margin-bottom: 0.5rem; }
.who-aside p { max-width: 30em; }

/* ---- Q and A rows (folios 3 and 6) ------------------------------------ */

.objections { display: grid; gap: 1.1rem; max-width: 46rem; margin: 0 0 1.8rem; }
.obj-q { font-weight: 600; margin: 0; }
.obj-a { font-size: 1rem; color: var(--muted-text); margin: 0.2rem 0 0; max-width: 40em; }

/* ---- Folio 7: inquiry -------------------------------------------------- */

.close { text-align: left; }
.close .folio-inner { max-width: 56rem; }
.close .body-copy { max-width: 36em; font-size: 1.075rem; }

/* The inquiry form: dark panel, two columns on desktop, one on mobile. */
.tellus-form { position: relative; display: grid; gap: 1.1rem; max-width: 30rem; margin-top: 1.8rem; }
.tellus-form--wide { max-width: 46rem; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.6rem; }
.tellus-form .field { display: grid; gap: 0.4rem; min-width: 0; }
.tellus-form .field--full { grid-column: 1 / -1; }
.tellus-form label { font-family: var(--mono); font-size: 0.8125rem; color: var(--paper-soft); }
.tellus-form .req { color: var(--green); }
.tellus-form .opt { color: rgba(243, 244, 241, 0.6); }
.tellus-form input,
.tellus-form select,
.tellus-form textarea {
  width: 100%;
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(243, 244, 241, 0.45);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1.4;
  padding: 0.75rem 0.85rem;
  min-height: 2.9rem;
}
.tellus-form select option { background: var(--forest); color: var(--paper); }
.tellus-form input:focus,
.tellus-form select:focus,
.tellus-form textarea:focus { outline: none; border-color: var(--green); }
.tellus-form ::placeholder { color: rgba(243, 244, 241, 0.55); }
.tellus-form textarea { resize: vertical; }
.tellus-form .btn { justify-self: start; cursor: pointer; }
.tellus-form .hp { position: absolute; left: -9999px; top: -9999px; }
/* Client-side validation: only after a submit attempt, so the page never
   opens covered in errors. */
.tellus-form.is-validated :invalid { border-color: #F2B8A5; }
.form-consent { color: var(--paper-soft); margin: 0; max-width: 52em; }
.form-status { margin: 0; min-height: 1.5rem; }
.form-status:empty { display: none; }
.form-status.is-error { color: #F7D2C4; border-left: 2px solid #F2B8A5; padding-left: 0.8rem; }
.form-status.is-success {
  font-family: var(--serif);
  font-size: 1.075rem;
  line-height: 1.6;
  color: var(--paper);
  border-left: 2px solid var(--green);
  padding-left: 1rem;
}
.form-status.is-success strong { color: var(--green); font-weight: 600; }
.tellus-form.is-sent > :not(.form-status) { display: none; }
.tellus-form.is-sent { grid-template-columns: 1fr; }

.close-rule { border: none; border-top: 1px solid rgba(243, 244, 241, 0.25); margin: 2.6rem 0 1.4rem; }
.close-contact { font-family: var(--mono); font-size: 0.8125rem; color: var(--paper-soft); }
.close-contact a { color: var(--green); text-decoration: none; }
.close-contact a:hover { text-decoration: underline; }

/* Quiet green text links (footer-style calls to action). */
.looking-cta {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--forest);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.looking-cta:hover { color: #14803f; text-decoration: none; }

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

.omx-footer { position: relative; background: var(--paper); color: var(--ink); padding: 3.5rem var(--margin) 3rem; overflow: hidden; border-top: 1px solid rgba(18, 20, 18, 0.14); }
.omx-footer .foot-line { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; margin-bottom: 1.2rem; max-width: 40em; }
.omx-footer nav { display: flex; flex-wrap: wrap; align-items: center; row-gap: 0.4rem; }
.omx-footer nav a { font-family: var(--mono); font-size: 0.8125rem; text-decoration: none; padding: 0.2rem 0; }
.omx-footer nav a:hover { color: #14803f; text-decoration: underline; }
.foot-sep { color: var(--muted); margin: 0 0.5em; }
.foot-legal { font-family: var(--mono); font-size: 0.78rem; color: var(--muted-text); margin-top: 1.6rem; max-width: 60em; }

/* ---- Mobile ----------------------------------------------------------- */

@media (max-width: 960px) {
  :root { --margin: 24px; }
  body { font-size: 16px; }
  .folio { padding-top: 4.5rem; padding-bottom: 3.5rem; }
  .folio--paper + .folio--paper { padding-top: 4rem; }
  .folio-no {
    position: static;
    width: auto;
    writing-mode: horizontal-tb;
    transform: none;
    justify-content: flex-start;
    margin-bottom: 1.2rem;
  }
  .omx-nav { padding-left: 24px; padding-right: 24px; gap: 0.8rem; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-menu { display: block; margin-left: auto; }
  .hero { display: block; min-height: 0; padding-top: 6.5rem; }
  .hero .folio-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-copy p { max-width: none; }
  .record { justify-self: stretch; max-width: none; padding: 3.2rem 1.3rem 1.4rem; }
  .record-title { padding-right: 0; margin-top: 0.6rem; }
  .hero-map canvas { width: 100vw; }
  .drift-page { animation: none; }
  .cards { grid-template-columns: 1fr; gap: 2rem; }
  .card dl div { grid-template-columns: 1fr; gap: 0.15em; }
  .who { grid-template-columns: 1fr; }
  .tellus-form--wide { grid-template-columns: 1fr; max-width: none; }
  .tellus-form { max-width: none; }
  .omx-footer { padding: 2.6rem 24px; }
}