/* uerealty.com - Universal Enterprises Realty & Lending
   Single stylesheet, no build step, no external fonts or CDNs. */

:root {
  --ink: #23282d;
  --ink-soft: #5a636b;
  --deep: #1f4e5f;      /* brand deep teal */
  --gold: #b08d57;      /* brand accent */
  --line: #e3e6e8;
  --paper: #ffffff;
  --wash: #f6f7f8;
  --wrap: 1140px;
}

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

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .6em; font-weight: 600; }
h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
h3 { font-size: 1.15rem; }

/* ---------- header / nav ---------- */
.nav-toggle { display: none; }

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 20;
}
.header-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 40px; height: 40px; flex: 0 0 auto; }
.brand-text { display: block; }
.brand-name {
  display: block;
  font-size: 1.4rem;
  letter-spacing: .04em;
  color: var(--deep);
  font-weight: 400;
}
.brand-name b { font-weight: 700; }
.brand-tagline {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-soft);
}

.primary-nav ul {
  display: flex;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-nav a {
  font-size: .95rem;
  color: var(--ink);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.primary-nav a:hover { border-bottom-color: var(--gold); text-decoration: none; }

.nav-toggle-btn { display: none; cursor: pointer; padding: 8px; }
.nav-toggle-btn span {
  display: block; width: 24px; height: 2px; margin: 5px 0; background: var(--ink);
}

/* ---------- hero ---------- */
/* The photograph's left and center are deliberately open sky, so the text sits
   left-aligned over the quiet side rather than centred over the rooflines. The
   scrim keeps contrast legible without washing the image out. */
.hero {
  position: relative;
  border-bottom: 1px solid var(--line);
  background-color: var(--deep);
  background-image:
    linear-gradient(100deg, rgba(20,45,55,.82) 0%, rgba(20,45,55,.55) 45%, rgba(20,45,55,.12) 75%),
    url("/images/hero-bg.jpg");
  background-size: cover;
  background-position: center 62%;
}
.hero-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 108px 24px 96px;
  text-align: left;
}
.hero h1 { color: #fff; max-width: 16ch; text-wrap: balance; }
.hero-lede { font-size: 1.15rem; color: rgba(255,255,255,.9); margin: 0 0 30px; max-width: 46ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }

.btn {
  display: inline-block;
  padding: 13px 26px;
  background: var(--deep);
  color: #fff;
  border-radius: 3px;
  font-size: .95rem;
  letter-spacing: .02em;
}
.btn:hover { background: #173c49; text-decoration: none; }
/* On the photographic hero the quiet button sits on a dark scrim, so it needs a
   light outline rather than the light-ground treatment used elsewhere. */
.btn-quiet { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }
.btn-quiet:hover { background: rgba(255,255,255,.12); }

/* ---------- sections ---------- */
.services, .pitch, .cta, .team, .prose, .contact, .page-head { padding: 64px 0; }
.services { background: var(--paper); }
.pitch, .cta { background: var(--wash); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.page-head { padding: 56px 0 24px; border-bottom: 1px solid var(--line); }
.page-lede { color: var(--ink-soft); max-width: 640px; }

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}
.service {
  padding: 26px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: 3px;
}
.service-icon { width: 120px; height: 80px; margin-bottom: 14px; }
.service p { color: var(--ink-soft); margin-bottom: 0; }

.prose p { max-width: 70ch; }
.cta { text-align: center; }
.cta p { max-width: 55ch; margin-left: auto; margin-right: auto; }

/* ---------- service areas ---------- */
.areas-strip { padding: 64px 0; }
.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 28px;
  margin-bottom: 26px;
}
.area-grid-wide { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 34px; }
.area h2, .area h3 { margin-bottom: .25em; }
.area-note { color: var(--gold); font-size: .88rem; margin: 0 0 .5em; }
.area-cities { color: var(--ink-soft); font-size: .92rem; margin: 0 0 .6em; }
.referral-note {
  border-left: 3px solid var(--gold);
  padding-left: 16px;
  color: var(--ink-soft);
  font-size: .94rem;
  max-width: 68ch;
}
.nowrap { white-space: nowrap; }

/* ---------- homepage team strip ---------- */
/* Distinct from .team on /about/ - this is a compact row, not full bios. The
   site's argument is "you deal with the person whose name is on the license",
   so the faces belong on the homepage rather than one click away. */
.team-strip { padding: 64px 0; background: var(--wash); border-top: 1px solid var(--line); }
.strip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 26px;
}
.strip-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 22px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--ink);
}
.strip-member:hover { border-color: var(--gold); text-decoration: none; }
.strip-member img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; }
.strip-name { font-weight: 600; }
.strip-role { color: var(--gold); font-size: .88rem; }
.strip-dre { color: var(--ink-soft); font-size: .78rem; letter-spacing: .03em; }

/* ---------- guides ---------- */
.eyebrow {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-soft); margin: 0 0 .6em;
}
.guide-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 28px; margin-bottom: 44px;
}
.guide-card {
  padding: 26px; border: 1px solid var(--line);
  border-top: 3px solid var(--gold); border-radius: 3px;
}
.guide-card h2 { font-size: 1.15rem; margin-bottom: .4em; }
.guide-card p { color: var(--ink-soft); margin-bottom: 0; }
.guide-audience {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--gold); margin: 0 0 .5em;
}
/* situation hubs + filtering */
.situation { margin-bottom: 48px; }
.situation h2 { margin-bottom: .2em; }
.situation-note { color: var(--ink-soft); margin: 0 0 24px; max-width: 60ch; }
.filters { margin-bottom: 40px; }
.filter-label {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-soft); margin: 0 0 10px;
}
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: inherit; font-size: .85rem; cursor: pointer;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}
.chip:hover { border-color: var(--gold); }
.chip.is-on { background: var(--deep); border-color: var(--deep); color: #fff; }
.chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.guide-flag {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft); margin: 10px 0 0;
}
.linklike {
  font: inherit; background: none; border: 0; padding: 0;
  color: var(--deep); text-decoration: underline; cursor: pointer;
}
.no-results { color: var(--ink-soft); }

/* review provenance - compliance record and E-E-A-T signal in one */
.guide-meta {
  margin: 48px 0 0; padding: 22px 24px;
  background: var(--wash); border: 1px solid var(--line); border-radius: 3px;
}
.guide-meta-review { margin: 0 0 14px; font-size: .9rem; }
.guide-sources h2 {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-soft); margin: 0 0 8px;
}
.guide-sources ul { margin: 0 0 14px; padding-left: 20px; font-size: .88rem; }
.guide-sources li { margin-bottom: 4px; }
.guide-currency { font-size: .84rem; color: var(--ink-soft); margin: 0; }
.callout {
  border-left: 3px solid var(--gold); padding: 12px 0 12px 18px;
  background: var(--wash); margin: 24px 0;
}

.guides-strip { padding: 64px 0; border-top: 1px solid var(--line); }
.strip-lede { color: var(--ink-soft); max-width: 60ch; }
.guide-list { list-style: none; margin: 24px 0; padding: 0; }
.guide-list li {
  padding: 13px 0; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.guide-list li span { color: var(--ink-soft); font-size: .84rem; }
.disclaimer-note {
  font-size: .84rem; color: var(--ink-soft);
  border-top: 1px solid var(--line); padding-top: 16px; margin-top: 34px;
}

/* ---------- guides chooser ---------- */
.chooser-heading { margin-top: 8px; }
.chooser {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px; margin: 0 0 48px;
}
.chooser-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px; border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 3px; color: var(--ink); background: var(--paper);
}
.chooser-card:hover { border-color: var(--gold); text-decoration: none; background: var(--wash); }
.chooser-label { font-size: 1.15rem; font-weight: 600; color: var(--deep); }
.chooser-lede { color: var(--ink-soft); font-size: .92rem; }
.chooser-count {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-soft);
}

/* search - progressive enhancement, hidden until JS runs */
.guide-search { margin-bottom: 40px; }
.guide-search label {
  display: block; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-soft); margin-bottom: 8px;
}
.guide-search input {
  width: 100%; padding: 13px 15px; border: 1px solid var(--line);
  border-radius: 3px; font: inherit; background: var(--paper);
}
.guide-search input:focus { outline: none; border-color: var(--deep); }
.search-results { list-style: none; margin: 14px 0 0; padding: 0; }
.search-results li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.search-results li a { font-weight: 600; }
.search-results li span { display: block; color: var(--ink-soft); font-size: .88rem; }
.search-empty { color: var(--ink-soft); font-size: .9rem; margin-top: 14px; }

/* ---------- path hub: ordered reading list ---------- */
.path-list { list-style: none; counter-reset: step; margin: 0 0 40px; padding: 0; }
.path-step {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.path-num {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--deep); color: #fff; display: flex;
  align-items: center; justify-content: center;
  font-size: .9rem; font-variant-numeric: tabular-nums;
}
.path-body { flex: 1 1 auto; }
.path-body h2 { font-size: 1.12rem; margin: 0 0 .3em; }
.path-body p { margin: 0 0 .4em; color: var(--ink-soft); }
.path-meta {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft);
}
.path-other { color: var(--ink-soft); font-size: .92rem; }

/* ---------- next in path ---------- */
.guide-next {
  margin: 48px 0 0; padding: 22px 24px;
  border: 1px solid var(--line); border-left: 3px solid var(--deep);
  border-radius: 3px; background: var(--paper);
}
.guide-next-label {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-soft); margin: 0 0 6px;
}
.guide-next-title { font-size: 1.1rem; font-weight: 600; margin: 0 0 6px; }
.guide-next-blurb { color: var(--ink-soft); font-size: .92rem; margin: 0; }
.guide-next-paths {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--ink-soft);
}
.guide-next-paths a { margin-right: 10px; }

/* ---------- dual CTA ---------- */
/* Replaces seven identical "Get in touch" buttons. Seller path is primary
   because listings are the stated priority; buyer path is equally reachable
   rather than hidden. */
.cta-dual { text-align: center; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 0 0 18px; }
.btn-outline {
  background: transparent; color: var(--deep); border: 1px solid var(--deep);
}
.btn-outline:hover { background: var(--deep); color: #fff; text-decoration: none; }
.cta-aside { font-size: .9rem; color: var(--ink-soft); margin: 0; }

/* Selects need to match the text inputs or the forms look assembled from
   parts. */
.form-field select {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: 3px; font: inherit; color: var(--ink); background: var(--paper);
}
.form-field select:focus { outline: none; border-color: var(--deep); }

/* ---------- team ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 34px;
}
.member { text-align: center; }
.member-photo {
  width: 148px; height: 148px;
  margin: 0 auto 18px;
  border-radius: 50%;
  object-fit: cover;
}
/* Shown until real headshots exist. The previous site used stock portraits of
   strangers, which is worse than showing none. */
.member-photo-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--deep);
  color: #fff;
  font-size: 2.4rem;
  letter-spacing: .05em;
}
.member-role { color: var(--gold); font-weight: 600; margin: 0 0 4px; }
.member-focus {
  font-size: .82rem; color: var(--ink-soft); font-style: italic; margin: 0 0 6px;
}
.member-license {
  font-size: .8rem;
  color: var(--ink-soft);
  letter-spacing: .03em;
  margin: 0 0 14px;
}
.member-bio { color: var(--ink-soft); text-align: left; }

/* ---------- contact ---------- */
.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 48px;
  align-items: start;
}
.contact-details p { margin: 0 0 18px; }
.contact-licenses { font-size: .8rem; color: var(--ink-soft); line-height: 1.9; }

.form-field { margin-bottom: 18px; }
.form-field label {
  display: block;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.form-field input, .form-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
}
.form-field input:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--deep);
}
.form-submit button {
  padding: 13px 32px;
  background: var(--deep);
  color: #fff;
  border: 0;
  border-radius: 3px;
  font: inherit;
  cursor: pointer;
}
.form-submit button:hover { background: #173c49; }

/* Honeypot - must be reachable to bots but invisible and unfocusable to people.
   Never use display:none; some bots skip hidden fields. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--ink);
  color: #b9c0c6;
  font-size: .9rem;
  padding: 52px 0 0;
}
.footer-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 36px;
}
.site-footer h2 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #fff;
  margin-bottom: 14px;
}
.site-footer a { color: #fff; }
.footer-licenses ul { list-style: none; margin: 0 0 14px; padding: 0; line-height: 1.9; }
.footer-disclaimer, .footer-eho { font-size: .78rem; color: #8b939a; line-height: 1.6; }
.footer-bottom {
  border-top: 1px solid #34393e;
  padding: 18px 24px;
  text-align: center;
  font-size: .8rem;
  color: #8b939a;
}
.footer-bottom p { margin: 0; }

/* ---------- tools ---------- */
/* Interactive calculators. The results column is sticky on desktop so the
   number someone is watching stays put while they adjust inputs above the
   fold - the whole interaction is "change a field, watch the total move". */
.tool-section { padding: 48px 0; }
.tool-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: start;
}
.tool-form fieldset {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0 0 28px;
  padding: 22px 0 0;
}
.tool-form fieldset:first-child { border-top: 0; padding-top: 0; }
.tool-form legend {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--deep);
  font-weight: 700;
  padding: 0;
}
.tool-form select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
}
.tool-form select:focus { outline: none; border-color: var(--deep); }
.field-note {
  font-size: .82rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 6px 0 0;
  max-width: 46ch;
}
.form-field-radio label {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 10px;
  cursor: pointer;
}
.form-field-radio input { width: auto; margin-right: 9px; }

.tool-results {
  position: sticky;
  top: 24px;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 28px;
}
.tool-results h2 { margin-top: 0; font-size: 1.15rem; }
.tool-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.tool-row-label { color: var(--ink-soft); font-size: .9rem; }
/* Figures line up in a column, so they get tabular figures. */
.tool-row-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tool-row-total {
  border-bottom: 0;
  border-top: 2px solid var(--deep);
  margin-top: 8px;
  padding-top: 14px;
}
.tool-row-total .tool-row-label { color: var(--ink); font-weight: 700; font-size: 1rem; }
.tool-row-total .tool-row-value { font-size: 1.4rem; font-weight: 700; color: var(--deep); }
.tool-subhead {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--deep);
  font-weight: 700;
  margin: 26px 0 4px;
}
.tool-prompt, .tool-aside { font-size: .88rem; color: var(--ink-soft); line-height: 1.65; }
.tool-aside { margin: 14px 0 0; }
/* Says which inputs are still blank. Deliberately prominent: a total computed
   without a tax rate is not that person's payment, and must not read as final. */
.tool-missing {
  background: #fdf6e9;
  border-left: 3px solid var(--gold);
  padding: 11px 14px;
  font-size: .85rem;
  line-height: 1.6;
  margin: 0 0 16px;
}
.tool-warning {
  background: #fbeceb;
  border-left: 3px solid #a8352c;
  padding: 11px 14px;
  font-size: .85rem;
  line-height: 1.6;
  margin: 16px 0 0;
}
.tool-disclaimer {
  font-size: .78rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.tool-nojs { max-width: 70ch; }
.tool-print { margin-top: 18px; }
.tool-followup { padding-top: 8px; }

/* Escrow timeline. Numbering is not decorative here - the sequence is the
   information, and the dates only make sense in order. */
.timeline-list { list-style: none; margin: 0; padding: 0; }
.timeline-item {
  border-left: 2px solid var(--line);
  padding: 0 0 22px 20px;
  position: relative;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--deep);
}
.timeline-date {
  font-variant-numeric: tabular-nums;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
  font-weight: 700;
}
.timeline-label { font-size: 1rem; margin: 2px 0 4px; }
.timeline-note { font-size: .85rem; color: var(--ink-soft); line-height: 1.6; margin: 0; }

/* What the rent-or-sell comparison cannot see. Shown, not footnoted - any one
   of these could change which option is better. */
.tool-excludes { margin-top: 22px; }
.tool-excludes ul { margin: 0; padding-left: 20px; font-size: .85rem; color: var(--ink-soft); }
.tool-excludes li { margin-bottom: 6px; line-height: 1.55; }

/* Document checklist. Real checkboxes, because people tick them as they go. */
.checklist-group { margin-bottom: 22px; }
.checklist-group h3 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--deep);
  margin: 0 0 8px;
}
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { margin-bottom: 7px; line-height: 1.5; }
.checklist label { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; cursor: pointer; }
.checklist input { margin-top: 4px; flex: none; }

/* Which-path result. */
.path-result { margin: 0 0 6px; }
.path-result-link { font-size: 1.35rem; font-weight: 700; }

/* Tool index cards. */
.tool-cards { list-style: none; margin: 0 0 44px; padding: 0; display: grid; gap: 20px; }
.tool-card {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 24px 26px;
}
.tool-card h2 { margin: 0 0 4px; font-size: 1.15rem; }
.tool-card p { margin: 0 0 8px; max-width: 68ch; }
.tool-card-audience {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gold);
  font-weight: 700;
}
.tool-card-guide { font-size: .85rem; color: var(--ink-soft); margin-bottom: 0; }

/* Optional capture beneath a tool's results. NOT the gate - the calculator
   above works without it, so this reads as an offer rather than a toll. */
.tool-capture { padding: 8px 0 56px; }
.capture-card {
  max-width: 760px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  padding: 30px 32px;
  background: var(--wash);
}
.capture-card h2 { margin-top: 0; font-size: 1.15rem; }
.capture-card > p { max-width: 62ch; }
.capture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 20px;
  margin-top: 20px;
}
.capture-note {
  font-size: .82rem;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 62ch;
  margin: 4px 0 18px;
}
.capture-alt { font-size: .87rem; color: var(--ink-soft); margin: 16px 0 0; }
.form-field .opt { text-transform: none; letter-spacing: 0; opacity: .75; }

/* Email capture, shown only when a tool's `gated` flag is on. */
.tool-gate-card {
  max-width: 520px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 32px;
  background: var(--wash);
}
.tool-gate-note, .tool-gate-alt { font-size: .87rem; color: var(--ink-soft); line-height: 1.65; }
.tool-gate-alt { margin-bottom: 0; }

/* Paired-tool callout on a guide. Gold rule rather than the teal used by
   "next in path", so the two adjacent blocks read as different offers. */
.guide-tool {
  border-left: 3px solid var(--gold);
  background: var(--wash);
  padding: 20px 24px;
  margin: 40px 0 0;
  max-width: 70ch;
}
.guide-tool-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gold);
  font-weight: 700;
  margin: 0 0 4px;
}
.guide-tool-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; }
.guide-tool-blurb { font-size: .9rem; color: var(--ink-soft); line-height: 1.6; margin: 0; }

/* Research links. */
.link-list { line-height: 1.85; max-width: 70ch; }
.link-list li { margin-bottom: 8px; }

@media print {
  /* Printing an escrow timeline is a real use - people put it on the fridge.
     Everything that is not the dates gets out of the way. */
  .site-header, .site-footer, .tool-form, .cta, .tool-print,
  .tool-followup, .page-head .eyebrow { display: none; }
  .tool-grid { grid-template-columns: 1fr; }
  .tool-results { position: static; border: 0; background: none; padding: 0; }
  .timeline-item { break-inside: avoid; }
}

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  .contact-wrap { grid-template-columns: 1fr; gap: 34px; }
  .tool-grid { grid-template-columns: 1fr; gap: 32px; }
  /* Sticky results in a single column would cover the inputs being edited. */
  .tool-results { position: static; }
  .tool-section { padding: 40px 0; }
  .nav-toggle-btn { display: block; }
  .primary-nav {
    display: none;
    width: 100%;
    order: 3;
  }
  .primary-nav ul { flex-direction: column; gap: 0; }
  .primary-nav li { border-top: 1px solid var(--line); }
  .primary-nav a { display: block; padding: 12px 0; }
  .nav-toggle:checked ~ .site-header .primary-nav { display: block; }
  .header-inner { flex-wrap: wrap; }
  .hero-inner { padding: 56px 24px 48px; }
  .services, .pitch, .cta, .team, .prose, .contact { padding: 48px 0; }
}