/* ---------- Tokens ---------- */
:root {
  --ink: #16232B;
  --ink-2: #1E313C;
  --paper: #E6E7DF;
  --paper-2: #DCDDD3;
  --line: #B9BBAE;
  --line-on-ink: #46606E;
  --graphite: #20241F;
  --cream: #EDEFE8;
  --brick: #A6402F;
  --brick-dark: #8A3325;
  --brass: #B8863E;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --max: 1080px;
  --gap: clamp(1.5rem, 4vw, 3rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--graphite);
  background: var(--paper);
  line-height: 1.55;
  font-size: 16px;
}

h1, h2, h3 { font-family: var(--font-display); margin: 0 0 0.5em; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

.section-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6rem) var(--gap);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.2em;
  padding-left: 1.1em;
  position: relative;
}
.eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.7em;
  height: 1px;
  background: currentColor;
}
.eyebrow-dark { color: var(--brick); }
.eyebrow-light { color: var(--brass); }

/* ---------- Nav ---------- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  row-gap: 0.6rem;
  padding: 1.1rem clamp(1.25rem, 4vw, 3rem);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
  color: var(--graphite);
  position: relative;
  padding-bottom: 6px;
}
.wordmark::after {
  content: "";
  position: absolute;
  left: 0; right: 8%;
  bottom: 0;
  height: 1px;
  background: var(--brass);
}
.wordmark .accent { color: var(--brick); }
.wordmark.small { font-size: 1rem; }

.nav-links {
  display: flex;
  gap: clamp(1rem, 2vw, 2rem);
  overflow-x: auto;
  scrollbar-width: none;
  font-size: 0.92rem;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a { text-decoration: none; white-space: nowrap; opacity: 0.85; }
.nav-links a:hover { opacity: 1; text-decoration: underline; }

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  border: none;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  border-radius: 3px;
  padding: 0.75em 1.3em;
  white-space: nowrap;
}
.btn-nav {
  background: var(--ink);
  color: var(--cream);
  flex-shrink: 0;
}
.btn-nav:hover { background: var(--ink-2); }
.nav-ctas { display: flex; gap: 0.6rem; flex-shrink: 0; }
.btn-nav-ghost {
  background: transparent;
  color: var(--graphite);
  border: 1px solid var(--graphite);
}
.btn-nav-ghost:hover { background: var(--paper-2); }
.btn-primary {
  background: var(--brick);
  color: var(--cream);
  font-size: 1rem;
}
.btn-primary:hover { background: var(--brick-dark); }

/* ---------- Hero ---------- */
.hero { background: var(--paper); position: relative; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.25;
  pointer-events: none;
}
.hero-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3.5rem, 9vw, 7rem) var(--gap) clamp(3rem, 7vw, 5rem);
  position: relative;
}
.hero h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.12;
  max-width: 16ch;
  margin-bottom: 0.6em;
}
.lede {
  font-size: 1.1rem;
  max-width: 44ch;
  color: #3a3f36;
  margin-bottom: 1.6em;
}

.title-block {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  border: 1px solid var(--graphite);
  max-width: 460px;
  position: relative;
  padding: 0;
}
.title-block::before,
.title-block::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid var(--graphite);
}
.title-block::before { top: -5px; left: -5px; border-width: 1px 0 0 1px; }
.title-block::after { bottom: -5px; right: -5px; border-width: 0 1px 1px 0; }
.tb-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55em 0.9em;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
}
.tb-row:last-child { border-bottom: none; }
.tb-key {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  opacity: 0.65;
}
.tb-val { font-family: var(--font-mono); font-weight: 500; text-align: right; }

/* ---------- Problem ---------- */
.problem { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.field-notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
  max-width: 62ch;
}
.field-notes li {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.4;
  padding-left: 1.1em;
  border-left: 2px solid var(--brick);
  font-weight: 500;
  color: #2b2f26;
}

/* ---------- What / dark sections ---------- */
.what, .process-dark { background: var(--ink); color: var(--cream); }
.what .eyebrow-light { color: var(--brass); }
.what-copy { max-width: 58ch; font-size: 1.05rem; }
.what-note {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.75;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.dim-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}
.dim-row-results { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
  .dim-row, .dim-row-results { grid-template-columns: 1fr; }
}

.dim-stat { display: flex; flex-direction: column; }
.dim-line { width: 100%; height: 10px; overflow: visible; margin-bottom: 0.6rem; }
.dim-line-path { stroke: var(--brass); stroke-width: 1.5; fill: none; stroke-dasharray: 130; stroke-dashoffset: 130; transition: stroke-dashoffset 1.1s ease; vector-effect: non-scaling-stroke; }
.dim-tick { stroke: var(--brass); stroke-width: 1.5; opacity: 0.9; }
.dim-stat.in-view .dim-line-path { stroke-dashoffset: 0; }
.what .dim-tick, .what .dim-line-path { stroke: var(--brass); }
.dim-value {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.dim-label { font-size: 0.88rem; opacity: 0.8; max-width: 26ch; }

/* Results section uses paper bg with dark ticks */
.results { background: var(--paper); border-top: 1px solid var(--line); }
.results .dim-line-path, .results .dim-tick { stroke: var(--brick); }
.results .dim-value { color: var(--graphite); }
.results .dim-label { color: #4a4f44; opacity: 1; }
.results-note {
  margin-top: 2.2rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  opacity: 0.6;
}

/* ---------- Preview / Value props ---------- */
.preview { background: var(--paper); border-bottom: 1px solid var(--line); }
.preview-copy { max-width: 60ch; font-size: 1.05rem; margin-bottom: 2.5rem; }
.preview-copy strong { color: var(--brick); }

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
  margin-bottom: 3rem;
}
@media (max-width: 720px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  border-top: 2px solid var(--brick);
  padding-top: 1rem;
}
.pillar h3 { font-size: 1.05rem; margin-bottom: 0.7em; }
.pillar ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.pillar li {
  font-size: 0.92rem;
  padding-left: 1em;
  position: relative;
  color: #3a3f34;
}
.pillar li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 0.55em; height: 1px;
  background: var(--brass);
}

.mock-caption {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.55;
  margin-bottom: 0.8rem;
}

.mock-dashboard {
  border: 1px solid var(--graphite);
  background: #fff;
  padding: clamp(1rem, 3vw, 1.6rem);
}
.mock-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  margin-bottom: 1.2rem;
  border: 1px solid var(--line);
}
@media (max-width: 640px) { .mock-kpis { grid-template-columns: repeat(2, 1fr); } }
.mock-kpi {
  background: #fff;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.mock-kpi-val { font-family: var(--font-mono); font-weight: 600; font-size: 1.4rem; }
.mock-kpi-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.6; }
.mock-kpi-urgent .mock-kpi-val { color: var(--brick); }

/* ---------- Attention items ---------- */
.attention-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 1.2rem;
}
@media (max-width: 720px) { .attention-grid { grid-template-columns: 1fr; } }
.attn-card { background: #fff; padding: 0.9rem 1rem; border-left: 3px solid; }
.attn-urgent { border-left-color: var(--brick); }
.attn-market { border-left-color: var(--brass); }
.attn-status { border-left-color: #4C6B8A; }
.attn-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  margin-bottom: 0.5rem;
}
.attn-row { display: flex; justify-content: space-between; gap: 0.6rem; font-size: 0.82rem; padding: 0.2rem 0; }
.attn-loc { font-weight: 600; }
.attn-note { color: #5a5f52; text-align: right; }

.mock-table { font-size: 0.86rem; }
.mock-row {
  display: grid;
  grid-template-columns: 2fr 1fr 0.8fr 1.2fr;
  gap: 0.75rem;
  padding: 0.6rem 0.3rem;
  border-bottom: 1px solid var(--paper-2);
  align-items: center;
}
@media (max-width: 640px) {
  .mock-row { grid-template-columns: 1.6fr 1fr 1.4fr; font-size: 0.78rem; }
  .mock-row span:nth-child(3) { display: none; }
}
.mock-head {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  opacity: 0.55;
  border-bottom: 1px solid var(--graphite);
}
.pill {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0.2em 0.6em;
  border-radius: 2px;
  width: fit-content;
  white-space: nowrap;
}
.pill-active { background: #E4EBE0; color: #3E6B33; }
.pill-urgent { background: #F3E0DC; color: var(--brick-dark); }
.pill-sublet { background: #E4E6F0; color: #45508F; }

.mock-row-clickable {
  width: 100%;
  background: none;
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.mock-row-clickable:hover { background: var(--paper); }
.chev {
  display: inline-block;
  font-size: 0.7em;
  margin-left: 0.4em;
  transition: transform 0.15s ease;
  opacity: 0.6;
}
.mock-row-clickable[aria-expanded="true"] .chev { transform: rotate(180deg); }
.mock-detail {
  background: var(--paper);
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--paper-2);
}
.mock-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}
@media (max-width: 640px) { .mock-detail-grid { grid-template-columns: 1fr; } }
.detail-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.55;
}
.detail-val { display: block; font-size: 0.86rem; font-weight: 600; margin-top: 0.15rem; }

.mini-chart-wide { grid-column: 1 / -1; margin-top: 1.5rem; }
.escalation-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 110px;
}
.lbar { flex: 1; background: var(--brick); border-radius: 2px 2px 0 0; }

/* ---------- Mini charts (donut + bar comparison) ---------- */
:root {
  --chart-1: var(--brick);
  --chart-2: var(--brass);
  --chart-3: #3E7A6B;
  --chart-4: #4C6B8A;
  --chart-5: #7C8A4A;
  --chart-6: #8C6BA8;
}
.mini-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 3vw, 1.5rem);
  margin-top: 1.5rem;
}
@media (max-width: 720px) { .mini-charts { grid-template-columns: 1fr; } }
.mini-chart-card {
  border: 1px solid var(--line);
  padding: 1.2rem;
}
.mini-chart-title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  margin-bottom: 1.1rem;
}
.donut-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 1.2rem;
}
.donut {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    var(--chart-1) 0deg 115.2deg,
    var(--chart-2) 115.2deg 190.8deg,
    var(--chart-3) 190.8deg 244.8deg,
    var(--chart-4) 244.8deg 291.6deg,
    var(--chart-5) 291.6deg 331.2deg,
    var(--chart-6) 331.2deg 360deg
  );
}
.donut-center {
  position: absolute;
  inset: 22%;
  background: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.donut-total { font-family: var(--font-mono); font-weight: 600; font-size: 1rem; }
.donut-total-label { font-size: 0.62rem; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.03em; }
.donut-legend {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.82rem;
}
.donut-legend li { display: flex; align-items: center; gap: 0.55em; }
.swatch { width: 0.7em; height: 0.7em; border-radius: 2px; flex-shrink: 0; }
.swatch-1 { background: var(--chart-1); }
.swatch-2 { background: var(--chart-2); }
.swatch-3 { background: var(--chart-3); }
.swatch-4 { background: var(--chart-4); }
.swatch-5 { background: var(--chart-5); }
.swatch-6 { background: var(--chart-6); }

.bar-list { display: grid; gap: 0.75rem; }
.bar-row {
  display: grid;
  grid-template-columns: 5.5em 1fr 3.5em;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
}
.bar-label { font-family: var(--font-mono); opacity: 0.75; }
.bar-track { background: var(--paper-2); height: 8px; border-radius: 2px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--brick); border-radius: 2px; }
.bar-value { font-family: var(--font-mono); font-weight: 600; text-align: right; }

/* ---------- Process ---------- */
.process { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.8rem;
}
.steps li { display: flex; gap: 1.3rem; align-items: baseline; max-width: 60ch; }
.step-num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--brick);
  border: 1px solid var(--brick);
  border-radius: 50%;
  width: 2.1em; height: 2.1em;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.steps h3 { font-size: 1.1rem; margin-bottom: 0.2em; }
.steps p { margin: 0; color: #454a3f; font-size: 0.97rem; }

/* ---------- About ---------- */
.about { background: var(--paper); }
.about-grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 640px) { .about-grid { grid-template-columns: 1fr; } }
.about-mark {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.3rem;
  width: 4.2rem; height: 4.2rem;
  border: 1px solid var(--graphite);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.about h2 { font-size: 1.6rem; }
.about p { max-width: 58ch; color: #33372e; }

/* ---------- Contact ---------- */
.contact { background: var(--ink); color: var(--cream); border-top: 1px solid var(--line-on-ink); }
.contact-intro { max-width: 50ch; opacity: 0.85; margin-bottom: 2.2rem; }
.intake-form { max-width: 640px; display: grid; gap: 1.3rem; }
.hp-field { position: absolute; left: -9999px; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.field label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
}
.field .opt { text-transform: none; opacity: 0.6; letter-spacing: 0; }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.65em 0.75em;
  border: 1px solid var(--line-on-ink);
  background: var(--ink-2);
  color: var(--cream);
  border-radius: 2px;
}
.field input::placeholder, .field textarea::placeholder { color: #8fa2ab; }
.field select { appearance: none; }
.btn-submit { justify-self: start; margin-top: 0.5rem; }
.form-status {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--brass);
  min-height: 1.2em;
}

/* ---------- Legal pages ---------- */
.draft-banner {
  background: var(--brick);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.9rem var(--gap);
  text-align: center;
}
.draft-banner strong { text-transform: uppercase; letter-spacing: 0.04em; }
.legal { max-width: 72ch; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4rem) var(--gap) clamp(4rem, 8vw, 6rem); }
.legal h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin-bottom: 0.3em; }
.legal .updated { font-family: var(--font-mono); font-size: 0.8rem; opacity: 0.6; margin-bottom: 2.5rem; }
.legal h2 { font-size: 1.2rem; margin-top: 2.2em; margin-bottom: 0.5em; }
.legal p, .legal li { color: #33372e; font-size: 0.97rem; }
.legal ul { padding-left: 1.3em; display: grid; gap: 0.5em; margin-bottom: 1.2em; }
.legal a { text-decoration: underline; }

/* ---------- Footer ---------- */
.footer {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  padding: 2.2rem var(--gap);
  text-align: center;
  font-size: 0.85rem;
  color: #52564a;
}
.footer a { text-decoration: underline; }
.footer p { margin: 0.3em 0; }

/* ============================================================
   REVISION: Fractional Real Estate Operations positioning
   ============================================================ */

.hero-subline { display: block; font-size: 0.62em; color: #4a4f44; margin-top: 0.15em; }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.btn-secondary {
  background: transparent;
  color: var(--graphite);
  border: 1px solid var(--graphite);
  font-size: 1rem;
}
.btn-secondary:hover { background: var(--paper-2); }

.nav-login-link {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--graphite);
  opacity: 0.65;
  text-decoration: underline;
  align-self: center;
}
.nav-login-link:hover { opacity: 1; }

/* Credibility strip */
.credibility { background: var(--paper); border-bottom: 1px solid var(--line); }
.credibility .dim-value { font-size: clamp(1.15rem, 2.2vw, 1.5rem); }
.credibility .dim-line-path, .credibility .dim-tick { stroke: var(--brick); }
.credibility .dim-label { color: #4a4f44; opacity: 1; }

/* Preview moved up */
.preview-top { border-top: none; }

/* Recent activity mini-feed */
.recent-activity { margin-top: 1.5rem; border: 1px solid var(--line); padding: 1.1rem 1.2rem; }
.activity-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.activity-list li { font-size: 0.85rem; color: #3a3f34; line-height: 1.5; }
.activity-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--paper-2);
  padding: 0.15em 0.5em;
  border-radius: 2px;
  margin-right: 0.5em;
}

/* What you actually get */
.deliverables { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.section-h2 { font-size: 1.3rem; margin-bottom: 1.2rem; }
.checklist {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 2rem;
  max-width: 62ch;
}
@media (max-width: 640px) { .checklist { grid-template-columns: 1fr; } }
.checklist li {
  font-size: 0.95rem;
  padding-left: 1.4em;
  position: relative;
  color: #2b2f26;
}
.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--brick);
  font-weight: 700;
}
.ownership-callout {
  border-left: 3px solid var(--brick);
  padding: 1rem 1.2rem;
  background: #fff;
  max-width: 62ch;
}
.ownership-callout p { margin: 0 0 0.6em; font-size: 0.98rem; }
.ownership-emphasis { font-weight: 600; margin-bottom: 0 !important; }

/* Why companies hire me */
.why-hire { background: var(--ink); color: var(--cream); }
.pain-grid { display: grid; gap: 0.9rem; margin-bottom: 3rem; }
.pain-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: baseline;
  font-size: 0.92rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line-on-ink);
}
@media (max-width: 720px) {
  .pain-row { grid-template-columns: 1fr; gap: 0.3rem; }
  .pain-arrow { display: none; }
}
.pain-text { opacity: 0.85; }
.pain-arrow { color: var(--brass); text-align: center; }
.pain-fix { font-weight: 500; }
.quotes-eyebrow { margin-top: 0; }
.why-hire .field-notes li { color: var(--cream); border-left-color: var(--brass); }

/* Core services */
.services { background: var(--paper); }
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
@media (max-width: 900px) { .service-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .service-grid { grid-template-columns: 1fr; } }
.service-card {
  border: 1px solid var(--line);
  padding: 1.3rem;
}
.service-card h3 { font-size: 1.02rem; margin-bottom: 0.5em; }
.service-card p { font-size: 0.9rem; color: #454a3f; margin: 0; }

/* Everything in one place, simplified */
.one-place { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.one-place-lede { font-size: 1.1rem; max-width: 50ch; margin-bottom: 1.3rem; }
.one-place-list {
  list-style: none;
  margin: 0 0 1.3rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 0.5rem 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.92rem;
}
@media (max-width: 720px) { .one-place-list { grid-template-columns: repeat(2, auto); } }
.one-place-list li::before { content: "—  "; color: var(--brick); }
.one-place-close { font-weight: 600; font-size: 1.05rem; }

/* Monthly executive report preview */
.report-preview { background: var(--paper); }
.report-mock {
  border: 1px solid var(--graphite);
  background: #fff;
  max-width: 780px;
}
.report-header {
  background: var(--ink);
  color: var(--cream);
  padding: 1rem 1.3rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.report-title { font-family: var(--font-display); font-weight: 600; }
.report-meta { font-family: var(--font-mono); font-size: 0.82rem; opacity: 0.75; }
.report-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
}
@media (max-width: 640px) { .report-grid { grid-template-columns: 1fr; } }
.report-block { background: #fff; padding: 1rem 1.2rem; }
.report-block-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.55;
  margin-bottom: 0.4rem;
}
.report-block-body { font-size: 0.88rem; margin: 0; color: #2b2f26; }
.report-footer {
  padding: 0.9rem 1.2rem;
  background: var(--paper-2);
  font-size: 0.85rem;
  font-weight: 600;
  border-top: 1px solid var(--line);
}

/* Real story */
.story { background: var(--paper-2); }
.story-content {
  border-left: 3px solid var(--brick);
  background: #fff;
  padding: 1.3rem 1.4rem;
  max-width: 62ch;
  margin-bottom: 2.2rem;
}
.story-content p { font-size: 0.97rem; color: #2b2f26; }
.story-note { font-style: italic; color: #4a4f44; margin-bottom: 0 !important; }
.track-record-label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  margin-bottom: 0.8rem;
}
.track-record-list {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  max-width: 66ch;
}
.track-record-list li {
  font-size: 0.92rem;
  padding-left: 1.1em;
  position: relative;
  color: #2b2f26;
}
.track-record-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--brass);
}
.story-disclaimer {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  opacity: 0.5;
  margin: 0;
}

/* Who this is for / isn't for */
.fit { background: var(--paper); }
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); margin-bottom: 2rem; }
@media (max-width: 720px) { .fit-grid { grid-template-columns: 1fr; } }
.fit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.fit-list li { font-size: 0.92rem; padding-left: 1.4em; position: relative; }
.fit-yes .fit-list li::before { content: "✓"; position: absolute; left: 0; color: #3E6B33; font-weight: 700; }
.fit-no .fit-list li::before { content: "✕"; position: absolute; left: 0; color: var(--brick); font-weight: 700; }
.fit-close { font-size: 0.92rem; color: #4a4f44; max-width: 62ch; border-top: 1px solid var(--line); padding-top: 1.2rem; }

/* Engagement structure */
.engagement { background: var(--paper-2); border-top: 1px solid var(--line); }
.engagement-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 900px) { .engagement-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .engagement-grid { grid-template-columns: 1fr; } }
.engagement-close { font-size: 0.92rem; color: #4a4f44; max-width: 60ch; }