/* ==========================================================================
   Crystal Sells Toledo — design system
   Brand: Key Realty | Perrysburg / 43551
   Palette pulled from the Crystal Sells Toledo mark: ink black + antique gold.
   ========================================================================== */

:root {
  /* Brand */
  --gold:        #b8863b;
  --gold-lt:     #d9bc7f;
  --gold-dk:     #8f6828;
  /* Inline links in body copy. --gold-dk clears AA on the cream ground
     (4.74) but only reaches 4.27 on --cream-dk, which is where the FAQ
     answers sit. This is the lightest gold that passes 4.5 on cream,
     cream-dk and white alike, so one value covers every surface a prose
     link actually lands on. */
  --gold-link:   #866024;
  --ink:         #14120f;
  --ink-soft:    #2a2621;
  --muted:       #6d665c;
  --muted-lt:    #9a938a;
  --cream:       #faf8f5;
  --cream-dk:    #f1ece4;
  --line:        #e4ded4;
  --white:       #ffffff;

  /* Type */
  --serif: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm */
  --wrap: 1220px;
  --wrap-narrow: 760px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);

  /* Structure comes from hairlines, not boxes. Phase 1 leans on these
     instead of bordered cards. */
  --rule-hair:   rgba(20, 18, 15, .10);
  --rule-strong: rgba(20, 18, 15, .16);
  /* The hero proof panel sits on its own slightly warmer surface so it
     reads as a separate page rather than a floating widget. */
  --desk:        rgba(255, 255, 255, .045);
  --desk-line:   rgba(255, 255, 255, .13);
  --measure: 62ch;

  --radius: 2px;
  --radius-lg: 4px;
  --shadow-sm: 0 1px 2px rgba(20,18,15,.06), 0 4px 14px rgba(20,18,15,.05);
  --shadow-md: 0 2px 6px rgba(20,18,15,.07), 0 18px 44px rgba(20,18,15,.10);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(2.5rem, 6.2vw, 4.25rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.05rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
h4 { font-size: 1.1rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--gold-lt); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold-dk);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.skip-link {
  position: absolute; left: 1rem; top: -100%;
  z-index: 999; background: var(--ink); color: var(--white);
  padding: .75rem 1.25rem; border-radius: var(--radius);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ------------------------------------------------------------ utilities -- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
/* The buyer pathway is one sentence. It was carrying a full section's worth
   of air above and below it. */
.section--buyer { padding-block: clamp(2rem, 4vw, 3.25rem); }
.section--cream { background: var(--cream-dk); }
.section--ink { background: var(--ink); color: #cfc9bf; }
.section--ink h2, .section--ink h3 { color: var(--white); }
.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-dk); margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: ""; width: 2rem; height: 1px; background: var(--gold); flex: none;
}
.center .eyebrow::after {
  content: ""; width: 2rem; height: 1px; background: var(--gold); flex: none;
}
.section--ink .eyebrow { color: var(--gold-lt); }
.section--ink .eyebrow::before, .section--ink .eyebrow::after { background: var(--gold); }
/* --gold-dk measures 4.27:1 on the --cream-dk ground, under AA for an
   11.5px label; --gold-link (4.81:1) exists for exactly this surface. */
.section--cream .eyebrow { color: var(--gold-link); }

.lede {
  font-size: clamp(1.075rem, 1.6vw, 1.25rem);
  line-height: 1.65; color: var(--muted);
  max-width: 62ch;
}
.center .lede { margin-inline: auto; }
.section--ink .lede { color: #b3aca1; }

.rule { width: 3rem; height: 2px; background: var(--gold); border: 0; margin: 2rem 0; }
.center .rule { margin-inline: auto; }

/* --------------------------------------------------------------- button -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.05rem 2.1rem;
  font-size: .84rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; text-align: center;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease),
              box-shadow .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--ink); color: var(--white); }
.btn--primary:hover { background: var(--gold-dk); box-shadow: var(--shadow-md); }

.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-lt); box-shadow: var(--shadow-md); }

/* Explicitly transparent. Without this a <button class="btn btn--ghost">
   falls back to the UA `buttonface` (#efefef), which is not a ghost button
   anywhere and is unreadable when the label is light. */
.btn--ghost { background: transparent; border-color: currentColor; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }

.btn--light { border-color: rgba(255,255,255,.55); color: var(--white); }
.btn--light:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

.btn--block { width: 100%; }
.btn--lg { padding: 1.25rem 2.6rem; }

/* Field-level help (character limits, optionality). Associated with its
   input through aria-describedby, so it is announced, not merely printed. */
.field__help {
  margin: .4rem 0 0; font-size: .8rem; line-height: 1.5;
  color: var(--muted);
}
/* Communications consent.
   Two optional permissions, sitting between the last field and Submit.
   The layout is a two-column grid per item so a wrapped disclosure hangs
   under itself rather than under the box, and the box keeps a hit target
   comfortably above the 24px minimum on a phone. `align-items: start`
   keeps the box on the first line of a three-line label. */
.consent {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin: 0 0 1.25rem;
}
.consent__legend {
  padding: 0 .4rem; font-size: .75rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
/* De-emphasised by WEIGHT and TRACKING, not by opacity.
   `opacity: .8` here compounded with whatever colour the legend had
   and pushed this text under WCAG AA on the light ground: #6d665c at
   .8 over white measures 3.66:1, against a 4.5:1 floor. Opacity is the
   one de-emphasis that silently changes contrast on every ground it is
   used over, so the marker now simply inherits the legend colour and
   keeps its lighter weight and wider tracking to stay secondary.
   Measured after: 5.67:1 on white, 9.8:1 on both dark grounds. */
.consent__optional { font-weight: 500; letter-spacing: .06em; }
.consent__item {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem;
  align-items: start; margin-bottom: .85rem;
}
.consent__box { width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; flex: none; cursor: pointer; }
.consent__label { font-size: .82rem; line-height: 1.55; cursor: pointer; }
.consent__label a { color: inherit; text-decoration: underline; }
.consent__note { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--muted); }

/* The consent block on a DARK form ground.
   -----------------------------------------------------------------
   The rules above are tuned for the cream ground: `.consent__label`
   declares no colour at all and therefore inherits `body`'s
   var(--ink-soft) (#2a2621), while the legend and note use var(--muted)
   (#6d665c). Both are correct on `.form-card` (/contact, white) and both
   are unreadable on the two dark grounds, where the consent fieldset
   actually sits on three of the four opt-in surfaces:

     /                      .hero .hv-form   (hero gradient, ~#17140f)
     /home-value            .valueform       (#151412)
     /43551-seller-review   .valueform       (#151412)

   Measured before this rule existed: the disclosure label rendered at
   1.23:1 against #151412 - near-black on near-black, effectively
   invisible - and the legend and note at 3.25:1, both under the 4.5:1
   WCAG AA floor for normal text. This is the text that carries the SMS
   consent disclosure, so it is the one piece of copy on the page that
   must be readable.

   The cause is not a wrong colour, it is a MISSING override: every
   sibling control in these panels already has one (see
   `.hero .hv-form .field > label` and `.hero .hv-form .form__note`
   below). The consent block was added later and never got the same
   treatment. So the fix reuses those exact two alpha values rather than
   inventing new ones - the disclosure now matches the field labels
   beside it, and the helper note matches the form note beside it.

   Scoped to the dark contexts only. /contact keeps the light values,
   which already pass at 15.03:1 and 5.67:1. */
.hero .hv-form .consent__label,
.valueform .consent__label { color: rgba(255, 255, 255, .82); }   /* 12.5:1 */

.hero .hv-form .consent__legend,
.valueform .consent__legend,
.hero .hv-form .consent__note,
.valueform .consent__note { color: rgba(255, 255, 255, .72); }    /* 9.8:1 */

/* The links stay `color: inherit` + underline, exactly as on the light
   ground and as `.hv-form__privacy a` already does, so they ride the
   corrected colour and remain distinguishable by the underline rather
   than by a second colour the dark panel would have to justify. */

/* Same root cause, one line: the fieldset border used var(--line)
   (#e4ded4), a cream-ground hairline, which on these panels rendered as a
   near-white box around the group and read as a rendering fault next to
   `.valueform`'s own var(--desk-line). Matching the panel it sits in. */
.hero .hv-form .consent,
.valueform .consent { border-color: var(--desk-line); }

/* The STATIC consent reproduction on /sms-consent-evidence.
   -----------------------------------------------------------------
   A2P reviewers need to read the opt-in without running the form, so
   that page redraws the consent group as plain markup: a <p> where the
   live block has a <legend>, and a <span> where it has an <input>.

   Every selector here is NEW. Nothing above is edited and no existing
   element carries `--static`, so the live consent control on the four
   opt-in surfaces is untouched by this block - which matters, because
   the consent group has already been regressed twice by CSS that
   reached it from the side. The group reuses `.consent`, `.consent__
   item` and `.consent__label`, so the reproduction stays in step with
   the real control's type, spacing and grid automatically.

   `.consent__box` sizes a native checkbox and paints nothing; a bare
   span would be invisible, so the static twin draws the box the
   platform would have drawn. Empty on purpose - an unchecked box has
   no tick, and the page says "unchecked" in words beside it for anyone
   not looking at the picture. */
.consent--static .consent__label,
.consent--static .consent__legend { cursor: default; }
.consent__box--static {
  display: inline-block; box-sizing: border-box; cursor: default;
  border: 1px solid var(--ink-soft); border-radius: 3px; background: #fff;
}

/* The evidence screenshot. Bounded by its column and never upscaled past
   its own pixels, so it stays sharp on a phone and does not blow the
   prose measure open on a desktop. */
.evidence-shot { margin: 1.5rem 0; }
.evidence-shot img {
  display: block; width: 100%; max-width: 560px; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.evidence-shot figcaption {
  margin-top: .6rem; font-size: .8rem; line-height: 1.5; color: var(--muted);
}

/* The program facts on /sms-consent-evidence, as a description list so a
   reader and a parser see the same pairs. Stacked on a phone, two
   columns once there is room for them. */
.factlist { margin: 1rem 0 1.5rem; }
.factlist dt {
  font-size: .75rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.factlist dd { margin: .2rem 0 1rem; }
.factlist dd a { word-break: break-word; }
@media (min-width: 40rem) {
  .factlist { display: grid; grid-template-columns: 13rem 1fr; gap: .1rem 1.5rem; }
  .factlist dt { padding-top: .15rem; }
  .factlist dd { margin: 0 0 .9rem; }
}
.flowlist li { margin-bottom: .5rem; }

/* Literal URLs printed for a reviewer to copy. Without this they are one
   unbreakable token: measured on a 360px viewport the list ran 9px past
   the viewport and scrolled the whole document sideways. */
.linklist li { margin-bottom: .4rem; }
.linklist code, .factlist code { overflow-wrap: anywhere; word-break: break-word; }

.hv-form__privacy { margin-top: .5rem; font-size: .78rem; }
.hv-form__privacy a { color: inherit; text-decoration: underline; opacity: .85; }

/* Shown only when scripting is off, where the form itself is hidden: the
   visitor gets a route that actually works instead of a form that silently
   does nothing. */
.form-noscript {
  margin: 0; padding: 1.15rem 1.25rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--cream); color: var(--ink);
  font-size: .95rem; line-height: 1.6;
}
.form-noscript a { color: var(--gold-link); text-decoration: underline; }

.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; }
/* A button row centres either way it is written: nested inside a .center
   block, or carrying .center itself. Only the descendant form was here,
   so every `class="btn-row center"` on one element - the shared cta-band
   included - rendered its buttons flush left under centred copy. */
.center .btn-row,
.btn-row.center { justify-content: center; }

.textlink {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-dk); padding-bottom: .25rem;
  border-bottom: 1px solid var(--gold-lt);
  transition: gap .25s var(--ease), border-color .25s var(--ease);
}
.textlink:hover { gap: .85rem; border-color: var(--gold-dk); }
/* --gold-dk on --ink is 3.72:1; the light gold the dark bands already use
   for their eyebrows is 10.19:1. */
.section--ink .textlink { color: var(--gold-lt); }

/* --------------------------------------------------------------- header -- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: 1.1rem;
  background: transparent;
  transition: background .35s var(--ease), box-shadow .35s var(--ease),
              padding .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.site-header.is-solid,
.site-header.is-open {
  background: rgba(250,248,245,.96);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom-color: var(--line);
  padding-block: .7rem;
}

.brand { display: flex; align-items: center; gap: .85rem; flex: none; }
.brand__logo { height: 46px; width: auto; transition: height .35s var(--ease); }
.is-solid .brand__logo { height: 40px; }
.brand__text { line-height: 1.05; }
.brand__name {
  display: block; font-family: var(--serif); font-size: 1.28rem;
  color: var(--ink); letter-spacing: -.01em;
}
.brand__sub {
  display: block; font-size: .6rem; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; color: var(--gold-dk);
}
/* Every page opens with a dark hero or page head, so the unscrolled
   header is transparent with light type. A page that instead starts on a
   light background adds .page--light to <body> and opts out of all of it. */
body:not(.page--light) .site-header:not(.is-solid):not(.is-open) .brand__name { color: var(--white); }
body:not(.page--light) .site-header:not(.is-solid):not(.is-open) .brand__sub { color: var(--gold-lt); }
body:not(.page--light) .site-header:not(.is-solid):not(.is-open) .nav__link { color: rgba(255,255,255,.9); }
body:not(.page--light) .site-header:not(.is-solid):not(.is-open) .nav-toggle__bar { background: var(--white); }
body:not(.page--light) .site-header:not(.is-solid):not(.is-open) .nav__cta { border-color: rgba(255,255,255,.6); color: var(--white); }
body:not(.page--light) .site-header:not(.is-solid):not(.is-open) .nav__cta:hover { background: var(--white); color: var(--ink); }
.page--light .site-header {
  background: rgba(250,248,245,.96);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom-color: var(--line);
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.1rem); }
.nav__link {
  position: relative; font-size: .76rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-soft);
  padding-block: .4rem; white-space: nowrap;
  transition: color .25s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--gold); transition: width .3s var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { width: 100%; }
.nav__link[aria-current="page"] { color: var(--gold-dk); }
.nav__cta {
  padding: .7rem 1.35rem; border: 1px solid var(--ink); border-radius: var(--radius);
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.nav__cta:hover { background: var(--ink); color: var(--white); }
.nav__cta::after { display: none; }

.nav-toggle {
  display: none; width: 44px; height: 44px; background: none; border: 0;
  cursor: pointer; padding: 10px; flex: none;
}
.nav-toggle__bar {
  display: block; height: 1.5px; width: 100%; background: var(--ink);
  border-radius: 2px; transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle__bar + .nav-toggle__bar { margin-top: 6px; }
.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.is-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 0 0 auto 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(250,248,245,.985);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    padding: 1rem var(--gutter) 2rem;
    border-bottom: 1px solid var(--line);
    max-height: calc(100vh - 100%); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .is-open .nav { opacity: 1; transform: translateY(0); pointer-events: auto; }
  body:not(.page--light) .site-header:not(.is-solid):not(.is-open) .nav__link { color: var(--ink-soft); }
  .nav__link { padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: .85rem; }
  .nav__link::after { display: none; }
  .nav__cta { margin-top: 1.25rem; text-align: center; }
}

/* ----------------------------------------------------------------- hero -- */
.hero {
  position: relative; min-height: min(92vh, 860px);
  display: flex; align-items: flex-end;
  background: var(--ink);
  overflow: hidden;
  padding-top: 8rem;
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(10,9,7,.92) 0%, rgba(10,9,7,.62) 38%, rgba(10,9,7,.28) 68%, rgba(10,9,7,.55) 100%),
    linear-gradient(to right, rgba(10,9,7,.72) 0%, rgba(10,9,7,.15) 60%);
}
.hero__inner { position: relative; z-index: 2; padding-bottom: clamp(3.5rem, 7vw, 6rem); width: 100%; }
.hero__content { max-width: 40rem; }
.hero h1 { color: var(--white); margin-bottom: .45em; }
.hero h1 em { font-style: italic; color: var(--gold-lt); }
.hero__lede { color: rgba(255,255,255,.82); font-size: clamp(1.05rem, 1.7vw, 1.28rem); max-width: 38ch; }
.hero .eyebrow { color: var(--gold-lt); }
.hero .btn-row { margin-top: 2.25rem; }
.hero__scroll {
  position: absolute; right: var(--gutter); bottom: clamp(3.5rem, 7vw, 6rem); z-index: 2;
  writing-mode: vertical-rl; font-size: .66rem; letter-spacing: .28em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
  display: flex; align-items: center; gap: 1rem;
}
.hero__scroll::after {
  content: ""; width: 1px; height: 3.5rem;
  background: linear-gradient(to bottom, var(--gold), transparent);
}
@media (max-width: 780px) { .hero__scroll { display: none; } }

/* ============================================================
   Capture hero - homepage only
   ============================================================
   Additive: .hero keeps its existing rules for any other use.
   The composition stays left-aligned and editorial; only the
   content changes from two buttons to a live first step. */
.hero--capture {
  align-items: center;
  min-height: auto;                    /* grows when step 2 opens */
  padding-top: clamp(5.6rem, 14vw, 9.5rem);
  padding-bottom: clamp(2.5rem, 7vw, 5.5rem);
}
/* Very small screens: reclaim vertical space from spacing rather than from
   type size or touch targets, so the address field and CTA sit as close to
   the fold as they can without hurting legibility or tap accuracy. */
@media (max-width: 380px) {
  .hero--capture h1 { font-size: 1.82rem; margin-bottom: .45em; }
  .hero--capture .eyebrow { margin-bottom: .7rem; font-size: .66rem; }
  .hero--capture .hero__lede { margin-bottom: 1.25rem; font-size: .97rem; }
  .hero--capture .hv-form .form__step { margin-bottom: .55rem; }
  .hero--capture .hv-form__micro { margin-top: .65rem; }
}
/* Branded ground. Present whether or not a photograph exists, so the
   hero is never blank and never shows placeholder artwork. */
.hero--capture .hero__bg {
  background:
    radial-gradient(120% 90% at 12% 8%, #241f18 0%, rgba(36,31,24,0) 60%),
    linear-gradient(160deg, #1b1813 0%, #12100d 55%, #0d0b09 100%);
}
.hero--capture .hero__bg::after {
  /* Only needed to darken a photograph; harmless over the gradient. */
  background:
    linear-gradient(to top, rgba(10,9,7,.86) 0%, rgba(10,9,7,.58) 45%, rgba(10,9,7,.5) 100%),
    linear-gradient(to right, rgba(10,9,7,.78) 0%, rgba(10,9,7,.28) 70%);
}
.hero--capture .hero__inner { padding-bottom: 0; }
.hero--capture .hero__content { max-width: 54rem; }
.hero--capture .eyebrow {
  text-wrap: balance;                  /* never breaks awkwardly on 43551 */
  margin-bottom: 1rem;
}
.hero--capture h1 {
  font-size: clamp(1.95rem, 6.4vw, 3.35rem);
  line-height: 1.1;
  /* 17ch forced "for?" onto a line of its own at desktop widths. The
     measure is opened up and the browser is asked to even the lines out,
     so the break lands after "Perrysburg" instead of before the last word.
     The type size is unchanged. */
  max-width: 21ch;
  text-wrap: balance;
  margin-bottom: .55em;
}
.hero--capture .hero__lede {
  max-width: 46ch;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  margin-bottom: clamp(1.6rem, 3vw, 2.1rem);
}

/* ---- the form inside the hero ---- */
.hero .hv-form { max-width: 40rem; }
.hero .hv-form .form__step {
  color: var(--gold-lt);
  margin-bottom: .8rem;
}
.hero .hv-form .field > label { color: rgba(255,255,255,.82); }
.hero .hv-form .field input,
.hero .hv-form .field select,
.hero .hv-form .field textarea {
  background: rgba(255,255,255,.97);
  border-color: rgba(255,255,255,.28);
}
.hero .hv-form .form__note { color: rgba(255,255,255,.62); }
.hero .hv-form .form__note a { color: var(--gold-lt); }
.hero .hv-form .btn--primary { background: var(--gold); color: var(--ink); }
.hero .hv-form .btn--primary:hover { background: var(--gold-lt); }
.hero .hv-form .btn--ghost { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.hero .hv-form .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* Address + CTA share a row once there is room for both. */
/* Vertical rhythm inside a step. The form's own grid gap only applies
   between the step containers, not within them.

   `:not([hidden])` is load-bearing: an explicit `display` would override
   the UA stylesheet's `[hidden] { display: none }` and the inactive step
   would become visible and focusable again. */
[data-step]:not([hidden]) { display: grid; gap: 1.15rem; }

.hv-form__lead { display: grid; gap: .85rem; }
.hv-form__go { white-space: nowrap; }
@media (min-width: 640px) {
  .hero .hv-form__lead {
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: .75rem;
  }
  .hero .hv-form__go { padding-inline: 1.9rem; }
}
@media (max-width: 639px) {
  .hero .hv-form__go { width: 100%; }
}
/* Narrow desktop / tablet-landscape.
   1024px is where the hero splits into two columns, which roughly halves
   the width the address row has to work with: at 1024 the field fell to
   214px against the ~240px a typical Perrysburg address needs, so the
   placeholder clipped. Between there and 1200px the field and the CTA
   stack instead - the hero keeps both of its columns, the field gets the
   full width of the left one, and the CTA becomes a full-width gold bar
   rather than something the field has to give width to. No type size
   changes on either control, and nothing about the form's behaviour does. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .hero .hv-form__lead {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: .85rem;
  }
  .hero .hv-form__go { width: 100%; }
}
/* Comfortable touch targets; taller than the 48px floor. */
.hero .hv-form .field input,
.hero .hv-form .btn { min-height: 3.4rem; }

/* Step 2 runs long inside the hero; the note field does not need to be the
   tallest thing on the screen to invite a sentence or two. */
.hero .hv-form .field textarea { min-height: 6.25rem; }

.hv-form__micro {
  margin-top: .85rem;
  font-size: .82rem;
  letter-spacing: .01em;
}

/* Subordinate by construction: a quiet text link, never a second button. */
.hero__secondary { margin-top: clamp(1.5rem, 3vw, 2rem); }
.hero__secondary a {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .88rem; color: rgba(255,255,255,.62);
  border-bottom: 1px solid rgba(255,255,255,.22);
  padding-bottom: .2rem;
  transition: color .25s var(--ease), border-color .25s var(--ease), gap .25s var(--ease);
}
.hero__secondary a:hover { color: #fff; border-color: var(--gold); gap: .8rem; }

/* On /home-value the form sits inside a light card and keeps the stacked
   layout - the card is too narrow for a side-by-side field and button. */
.form-card .hv-form__go { width: 100%; }

/* Compact hero for interior pages */
.pagehead {
  background: var(--ink); color: rgba(255,255,255,.78);
  padding-top: clamp(8.5rem, 14vw, 11rem); padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
  position: relative; overflow: hidden;
}
.pagehead::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px;
  background: linear-gradient(to right, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
}
.pagehead h1 { color: var(--white); max-width: 20ch; }
.pagehead .lede { color: rgba(255,255,255,.72); }
.pagehead .eyebrow { color: var(--gold-lt); }
.pagehead .eyebrow::before, .pagehead .eyebrow::after { background: var(--gold); }

/* ------------------------------------------------------------ statsband -- */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px; background: var(--line);
  border-block: 1px solid var(--line);
}
.stat { background: var(--cream); padding: clamp(2rem, 4vw, 3rem) 1.5rem; text-align: center; }
.stat__num {
  display: block; font-family: var(--serif); font-size: clamp(2.1rem, 4vw, 2.9rem);
  color: var(--gold-dk); line-height: 1; margin-bottom: .55rem;
}
.stat__label {
  font-size: .69rem; font-weight: 600; letter-spacing: .19em;
  text-transform: uppercase; color: var(--muted);
}
.section--ink .stats { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.12); }
.section--ink .stat { background: var(--ink); }
.section--ink .stat__num { color: var(--gold-lt); }
.section--ink .stat__label { color: rgba(255,255,255,.6); }

/* ----------------------------------------------------------------- grid -- */
.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.split {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: 1fr 1fr; align-items: center;
}
.split--media-right { grid-template-columns: 1fr 1.05fr; }
/* Used where a photo frame has been removed until cleared artwork exists:
   the remaining column keeps a readable measure instead of stretching. */
.split--single { grid-template-columns: minmax(0, 62ch); justify-content: center; }
@media (max-width: 900px) { .split, .split--media-right { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- cards -- */
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.35rem);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  height: 100%;
}
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold-lt); }
.card__num {
  display: block; font-family: var(--serif); font-size: 1.5rem;
  color: var(--gold); margin-bottom: .9rem; line-height: 1;
}
.card h3 { font-size: 1.22rem; margin-bottom: .55rem; }
/* The contact cards' labels sit under an <h2>, so they are <h3> for the
   outline, but they keep the look of the <h4> they replaced. */
.card h3.card__label {
  font-family: var(--sans); font-size: 1.1rem; font-weight: 600;
  letter-spacing: 0; margin-bottom: .6em;
}
.card p { color: var(--muted); font-size: .96rem; margin-bottom: 0; }
.card__icon {
  width: 44px; height: 44px; margin-bottom: 1.25rem;
  display: grid; place-items: center;
  border: 1px solid var(--gold-lt); border-radius: 50%; color: var(--gold-dk);
}
.card__icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* Neighborhood card */
.hood {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; height: 100%;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.hood:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.hood__media { position: relative; aspect-ratio: 4/3; background: var(--cream-dk); overflow: hidden; }
.hood__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.hood:hover .hood__media img { transform: scale(1.05); }
.hood__tag {
  position: absolute; left: 1rem; top: 1rem; z-index: 2;
  background: rgba(20,18,15,.85); color: var(--gold-lt);
  font-size: .6rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  padding: .4rem .75rem; border-radius: var(--radius);
}
/* The card's photo frame is gone until cleared photography exists (N02), so
   the category that sat on the image now leads the card as a text eyebrow. */
.hood__tagline {
  margin: 1.5rem 1.5rem 0; font-family: var(--sans); font-size: .68rem;
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-dk);
}
.hood__body { padding: 1.6rem 1.5rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.hood__body h3 { font-size: 1.28rem; margin-bottom: .4rem; }
.hood__body p { color: var(--muted); font-size: .93rem; flex: 1; }
.hood__meta {
  display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: 1.1rem;
  padding-top: 1.1rem; border-top: 1px solid var(--line);
  /* --muted, not --muted-lt: #9a938a on the white card measured 3.03:1 at
     11.5px, under the 4.5:1 AA minimum. --muted is ~5.7:1. */
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

/* Testimonial */
.quote {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.85rem, 3vw, 2.5rem); height: 100%;
  display: flex; flex-direction: column;
}
.quote__mark { font-family: var(--serif); font-size: 3rem; line-height: .6; color: var(--gold-lt); margin-bottom: .75rem; }
.quote p { font-family: var(--serif); font-size: 1.12rem; line-height: 1.6; color: var(--ink-soft); flex: 1; }
.quote__by {
  margin-top: 1.5rem; padding-top: 1.15rem; border-top: 1px solid var(--line);
  font-size: .71rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.quote--placeholder { border-style: dashed; background: transparent; }
.quote--placeholder p { color: var(--muted-lt); font-style: italic; }

/* Media frame */
.frame { position: relative; }
.frame img { width: 100%; border-radius: var(--radius-lg); }
.frame::after {
  content: ""; position: absolute; inset: auto -1.15rem -1.15rem auto;
  width: 62%; height: 62%; border: 1px solid var(--gold); border-radius: var(--radius-lg);
  z-index: -1;
}
.frame--portrait img { aspect-ratio: 4/5; object-fit: cover; object-position: 50% 22%; }

/* --------------------------------------------------------------- steps -- */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.25rem, 3vw, 2.25rem);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step__n {
  counter-increment: step;
  font-family: var(--serif); font-size: 1.1rem; color: var(--gold-dk);
  width: 3rem; height: 3rem; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--gold-lt); border-radius: 50%;
}
.step__n::before { content: "0" counter(step); }
.step h3 { font-size: 1.3rem; margin-bottom: .45rem; }
.step p { color: var(--muted); margin-bottom: 0; }

/* ---------------------------------------------------------------- forms -- */
.form { display: grid; gap: 1.15rem; }
.form__row { display: grid; gap: 1.15rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }
/* `align-content: start` matters as soon as one cell of a .form__row carries
   help text and its partner does not: the row makes both cells the same
   height, and a stretching grid grew the SHORTER cell's input to fill the
   difference. Phone gained a help line and the email box beside it rendered
   85px tall against phone's 60px, with the two inputs no longer even on the
   same baseline. Packed to the top, both inputs keep their own height and the
   help text simply hangs below its own field. */
.field { display: grid; gap: .45rem; align-content: start; }
.field > label {
  /* Was .69rem (about 11px). Uppercase, letterspaced text loses legibility
     far faster than sentence case as it shrinks, so the smallest labels on
     the page were the hardest to read. Slightly larger, slightly tighter
     tracking - roughly the same footprint, easier to scan. */
  font-size: .75rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
.field .req { color: var(--gold-dk); }
.field input, .field select, .field textarea {
  width: 100%; padding: .95rem 1.05rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 1rem; color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236d665c' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.05rem center; padding-right: 2.75rem;
}
/* Focus.
   `outline: none` here previously suppressed the global :focus-visible ring
   for every input, select and textarea on the site, leaving a 14% gold glow
   as the only indicator - far weaker than the ring buttons and nav links
   get. The ring is now kept; the border and glow reinforce it rather than
   replacing it. */
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold-dk);
  box-shadow: 0 0 0 3px rgba(184, 134, 59, .3);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--gold-dk);
  outline-offset: 2px;
}
/* On the dark hero the fields sit on near-black; the lighter gold reads. */
.hero .hv-form .field input:focus-visible,
.hero .hv-form .field select:focus-visible,
.hero .hv-form .field textarea:focus-visible { outline-color: var(--gold-lt); }
.field input:user-invalid, .field textarea:user-invalid { border-color: #b4483c; }
.form__note {
  /* Was .8rem (12.8px) in --muted-lt, about 3:1 on white - too weak for
     reassurance copy a visitor is expected to read before submitting.
     --muted on white measures ~5.7:1. The dark-hero override below keeps
     its own light value. */
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.6;
}
.form__note a { color: var(--gold-dk); text-decoration: underline; text-underline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Progressive form step indicator */
.form__step {
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dk);
  margin: 0 0 1.25rem;
}

/* Cloudflare Turnstile's mount point.
   The widget is rendered with appearance:"interaction-only", so in the
   ordinary case Cloudflare puts NOTHING visible here and this element
   must occupy no space at all - hence `:empty` collapsing the margin
   rather than a fixed reserved height. On the rare submission where an
   interactive challenge is required, the iframe appears directly above
   the submit button and gets the same rhythm as a form field.
   The container is present on every build; when Turnstile is not
   configured nothing ever renders into it and it stays empty. */
.turnstile:not(:empty) { margin: 0 0 1.25rem; }
.turnstile iframe { max-width: 100%; }

.form-status {
  padding: 1rem 1.2rem; border-radius: var(--radius); font-size: .93rem; line-height: 1.55;
  border: 1px solid; display: none;
}
.form-status.is-visible { display: block; }
.form-status--ok   { background: #f2f7f0; border-color: #bcd4b2; color: #33562a; }
.form-status--warn { background: #fdf6e9; border-color: #e6cf9c; color: #6d5216; }
.form-status--err  { background: #fbf0ee; border-color: #e2b7b0; color: #8a3227; }
.form-status a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.form-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 3rem); box-shadow: var(--shadow-sm);
}

/* ------------------------------------------------------------------ faq -- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 1.5rem 0; font-family: var(--serif); font-size: 1.16rem; color: var(--ink);
  transition: color .2s var(--ease);
}
.faq__q:hover { color: var(--gold-dk); }
.faq__icon { flex: none; width: 18px; height: 18px; margin-top: .35rem; position: relative; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: var(--gold-dk);
  transition: transform .3s var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }
.faq__a { display: none; padding: 0 0 1.75rem; max-width: 68ch; color: var(--muted); }
.faq__a.is-open { display: block; }

/* ------------------------------------------------------------------ cta -- */
.cta-band {
  background: var(--ink); color: rgba(255,255,255,.78);
  padding-block: clamp(4rem, 8vw, 6.5rem); text-align: center;
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(to right, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
}
.cta-band h2 { color: var(--white); }
.cta-band .lede { color: rgba(255,255,255,.72); }

/* ------------------------------------------------- legal identity -- */
/* OAC 1301:5-1-02(B) — the brokerage name must be displayed at least in
   equal prominence with the SALESPERSON'S name.

   Both names carry the single class .legalid__name and are styled by the
   ONE rule below. Never add a selector that targets only one of them, and
   never set a size, weight, colour, opacity or breakpoint behaviour on one
   without the other — that is precisely the violation this lockup exists
   to prevent. There is deliberately no media query here: the pair scales
   together because neither is given a size of its own anywhere else. */
.legalid { margin: 1.35rem 0 1.15rem; line-height: 1.5; }
.legalid__name {
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: .01em;
  text-transform: none;
  color: #e8e4de;
  opacity: 1;
}
.legalid__sep { padding: 0 .55rem; color: #e8e4de; opacity: .4; }
.legalid__lic {
  display: block; margin-top: .3rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: var(--gold-lt);
}
/* On the dark page head the lockup sits under the h1 */
.pagehead .legalid { margin: 1.5rem 0 0; }
/* The one lockup on a LIGHT ground: the reviewer block on
   /43551-seller-review. The colours above are for dark surfaces, and on
   cream they measured 1.19:1 (names) and 1.73:1 (licence), so the legal
   identity was effectively invisible. Colour only, and the names are
   still set by ONE selector that matches both - the same pattern as
   .byline .legalid__name. */
.whyhuman .legalid__name { color: var(--ink); }
.whyhuman .legalid__sep { color: var(--muted); }
.whyhuman .legalid__lic { color: var(--gold-link); }

/* OAC 1301:5-1-02(E) — displayed content-review date. */
.footer__updated {
  margin-top: .85rem; font-size: .78rem; color: #948d83;
}

/* --------------------------------------------------------------- footer -- */
.site-footer { background: #0f0e0c; color: #948d83; padding-block: clamp(3.5rem, 6vw, 5rem) 0; font-size: .92rem; }
.footer__grid {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  padding-bottom: 3rem;
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
/* --- footer identity ---------------------------------------------------
   Every mark down here is now transparent artwork on the footer ground.
   The white .brandchip plates are gone: they existed only because the old
   files had an opaque white rectangle baked in, and none of these do. */

/* The Crystal Sells Toledo lockup, set from mark.svg and live type - the
   same device as .brand in the header, so the two read as one mark. */
.lockup { --lk: 54px; display: flex; align-items: center; gap: calc(var(--lk) * .30); }
.lockup__mark { height: var(--lk); width: auto; display: block; flex: none; }
.lockup__words { display: flex; flex-direction: column; gap: calc(var(--lk) * .10); }
.lockup__name {
  font-family: var(--serif); font-weight: 400;
  font-size: calc(var(--lk) * .44); line-height: .95;
  letter-spacing: -.01em; color: var(--cream);
}
/* Sans 600, wide tracking, uppercase - .brand__sub's treatment exactly. */
.lockup__place {
  font-family: var(--sans); font-weight: 600;
  font-size: calc(var(--lk) * .21); line-height: 1;
  letter-spacing: .3em; text-transform: uppercase; color: var(--gold-lt);
  padding-left: .1em;
}

/* Brokerage mark. Subordinate to the lockup above and supplemental to the
   .legalid text below, which remains the authoritative identification.

   The supplied file is a square canvas with the artwork sitting off-centre
   inside it (90/19 left-right, 212/126 top-bottom of empty pixels out of
   1254). --kr sizes that whole canvas; the negative margins take the empty
   pixels back out of the layout box, so the mark aligns with the column
   edge and the gaps you set are the gaps you see. flow-root stops the
   negative top margin collapsing out through the wrapper.

   74px renders the artwork 67.6 x 54.1, which is the height of the Crystal
   lockup above it to within a pixel. Matching that height is the whole
   point: at 106px the brokerage mark stood 43% taller than the brand it is
   meant to sit under, and read as the senior of the two. */
.footer__brokerage { --kr: 74px; display: flow-root; margin: 1.1rem 0 0; }
.footer__brokerage img {
  width: var(--kr); height: auto; display: block;
  margin-block: calc(var(--kr) * -.1691) calc(var(--kr) * -.1005);
  margin-inline-start: calc(var(--kr) * -.0718);
}
@media (max-width: 560px) { .footer__brokerage { --kr: 68px; } }
/* Column titles are <h2>: each is a top-level section of the page, and as
   <h4> they skipped a level after every page body ending on an <h2>
   (Lighthouse heading-order). Styled exactly as the <h4> they replace -
   the family was inherited from the global h4 rule, so it is named here. */
.site-footer .footer__title {
  font-family: var(--sans);
  color: var(--white); font-size: .71rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1.25rem;
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.footer__list a { transition: color .2s var(--ease); }
.footer__list a:hover { color: var(--gold-lt); }
.footer__contact a { display: flex; gap: .6rem; align-items: baseline; }
/* The label is 183.6px on one line; the contact column is 244.1px. At the
   global 2.1rem inline padding it needed 250.8px, overflowed by seven, and
   wrapped - which turned a button into a 78px slab. 1.5rem brings it to
   231.6px and one line, and the button back to a normal 55px. */
.site-footer .btn { margin-top: 1.25rem; padding-inline: 1.5rem; }
/* Between 920 and 1160 the four-column grid squeezes the contact column to
   217px and 1.5rem is not enough either. The label's .16em tracking is what
   makes it wide, so that is what gives: at .12em it measures 174px, which
   with 1rem of padding leaves eleven pixels of slack rather than the two a
   padding-only fix would have left. Tightening the tracking keeps the type
   at full size; shrinking the type to fit would not. */
@media (min-width: 901px) and (max-width: 1180px) {
  .site-footer .btn { padding-inline: 1rem; letter-spacing: .12em; }
}

.footer__legal {
  border-top: 1px solid rgba(255,255,255,.1); padding-block: 2rem;
  display: flex; flex-wrap: wrap; gap: 1.25rem 2rem;
  align-items: center; justify-content: space-between;
  font-size: .78rem; color: #948d83; line-height: 1.6;
}
/* Bare marks need more air between them than plated ones did. */
.footer__badges { display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(1.15rem, 2.5vw, 1.75rem); }

/* Matched on ink, not on box height: the REALTOR/MLS lockup is landscape
   and Equal Housing is portrait, so equal heights would leave one shouting.

   The MLS file is sized off its block "R" device, which is 497/783 of the
   canvas - at 44px that renders 27.9px, clear of the 20px floor. Its canvas
   also carries more empty pixels above the ink than below (76 vs 108), so
   the mark is nudged down to share a baseline with Equal Housing.

   Equal Housing carries its own wordmark, 19% of its height in two lines:
   at 46px each line renders about 3px and cannot resolve. That is inherent
   to the official artwork, not a sizing mistake - the words are stated
   legibly in the disclaimer beside it. */
.brandmark { display: inline-flex; align-items: center; color: var(--gold); }
.brandmark--mls img { height: 44px; width: auto; display: block; transform: translateY(1px); }
.brandmark--eho svg { height: 46px; width: auto; display: block; }
.footer__disclaimer { max-width: 60ch; }

/* Who receives the address, shown before it is handed over. Sits under the
   hero form, deliberately quieter than the field and the button. The two
   names carry .legalid__name, so the shared equal-prominence rule governs
   them here exactly as it does in the footer. */
.byline {
  display: flex; align-items: center; gap: .8rem;
  margin: 1.15rem 0 0; padding-top: 1.05rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .82rem; line-height: 1.45; color: rgba(255,255,255,.62);
}
.byline__face {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  object-fit: cover; object-position: 50% 18%;
  border: 1px solid rgba(184,134,59,.5);
}
.byline__who { display: block; }
.byline .legalid__name { font-size: inherit; color: rgba(255,255,255,.9); }
.byline__sep { padding: 0 .35rem; opacity: .45; }
.byline__lic {
  display: block; margin-top: .1rem;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-lt);
}

/* --- /43551-seller-review conversion modules ---------------------------
   Five invitations to one form. The mid-page ones are deliberately quiet:
   a hairline, a line of context and a single button, so the rhythm reads
   education / decision / education / decision rather than a wall of
   buttons. The closing one uses the existing .cta-band weight. */
.cuepoint {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--rule-strong);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem clamp(1.5rem, 4vw, 2.5rem);
}
.cuepoint__say { flex: 1 1 22ch; margin: 0; color: var(--muted); max-width: 46ch; }
.cuepoint__say strong { color: var(--ink); font-weight: 600; }
.section--ink .cuepoint { border-top-color: rgba(255,255,255,.16); }
.section--ink .cuepoint__say { color: rgba(255,255,255,.72); }
.section--ink .cuepoint__say strong { color: var(--white); }
@media (max-width: 560px) { .cuepoint .btn { width: 100%; } }

/* The condensed value stack, high on the page. Numbered because the
   review is produced in this order, and tight because it is a summary of
   sections the reader has not reached yet. */
.offerstack { counter-reset: offer; margin: 0; padding: 0; list-style: none; display: grid; }
.offerstack li {
  counter-increment: offer;
  display: grid; grid-template-columns: auto 1fr; gap: .9rem clamp(1rem, 2.5vw, 1.5rem);
  padding-block: clamp(1.1rem, 2.2vw, 1.5rem);
  border-top: 1px solid var(--line);
}
.offerstack li:last-child { border-bottom: 1px solid var(--line); }
.offerstack li::before {
  content: "0" counter(offer);
  font-family: var(--serif); font-size: .95rem; color: var(--gold-dk);
  padding-top: .15rem;
}
.offerstack h3 { font-size: 1.08rem; margin: 0 0 .25rem; }
.offerstack p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }

/* Instant estimate vs the review. Two columns of the same shape so the
   difference is the content, not the styling shouting at one side. */
.vs { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.vs__col { padding-top: 1.1rem; border-top: 2px solid var(--line); }
.vs__col--review { border-top-color: var(--gold); }
.vs__label {
  margin: 0 0 .6rem; font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.vs__col--review .vs__label { color: var(--gold-dk); }
.vs__col h3 { font-size: 1.15rem; margin: 0 0 .5rem; }
.vs__col p { color: var(--muted); font-size: .95rem; }
.vs__col ul { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .45rem; }
.vs__col li { color: var(--muted); font-size: .94rem; padding-left: 1rem; position: relative; }
.vs__col li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold-lt);
}

/* ------------------------------------------------------- sticky mobile -- */
.sticky-cta {
  position: fixed; inset: auto 0 0 0; z-index: 90;
  display: none;
  /* Not 1fr 1fr. Call needs 61px of ink and was given half the bar, which
     forced the primary action to wrap onto two lines in the other half.
     The funnel action gets the room; Call stays a comfortable tap target. */
  grid-template-columns: minmax(92px, 30%) 1fr;
  background: rgba(20,18,15,.97); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.12);
  transform: translateY(100%); transition: transform .35s var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta a {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: 1.05rem .5rem; color: var(--white);
  font-size: .76rem; font-weight: 700; letter-spacing: .10em; text-transform: uppercase;
  /* justify-content centres the icon and the text BLOCK as a group; it does
     not centre the lines inside that block. When the label wrapped, the short
     second line sat flush left and the cell read visibly off-centre. */
  text-align: center; line-height: 1.25;
}
.sticky-cta a + a { border-left: 1px solid rgba(255,255,255,.12); background: var(--gold); color: var(--ink); }
.sticky-cta svg {
  width: 16px; height: 16px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 1.6;
}
@media (max-width: 780px) {
  .sticky-cta { display: grid; }
  /* Reserve room under the footer so the fixed call bar never covers the
     affiliation badges or the license and fair-housing disclosures. */
  .site-footer { padding-bottom: calc(3.75rem + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------------- article -- */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.5em; }
.prose h3 { margin-top: 2em; font-size: 1.3rem; }
.prose ul, .prose ol { padding-left: 1.35rem; margin: 0 0 1.35em; display: grid; gap: .6rem; }
.prose li::marker { color: var(--gold); }
.prose a { color: var(--gold-dk); text-decoration: underline; text-underline-offset: 3px; }

/* Inline links in body copy had no visual treatment whatsoever: the base
   rule is `a { color: inherit; text-decoration: none }` and only .prose
   overrode it, so a link inside an aside or an FAQ answer rendered in body
   colour with no underline and no border. That is not a low-contrast link,
   it is an invisible one. Same treatment .prose already uses.
   The .argument__item / .returns__item selectors cover the FSBO guide's
   source links; :not([class]) leaves .textlink and buttons alone. */
.quietnote a, .faq__a a, .factor dd a,
.argument__item p a:not([class]), .returns__item p a:not([class]) { color: var(--gold-link); text-decoration: underline; text-underline-offset: 3px; }
.quietnote a:hover, .faq__a a:hover, .factor dd a:hover,
.argument__item p a:not([class]):hover, .returns__item p a:not([class]):hover { color: var(--gold); }
/* The effective-date / not-legal-advice line at the top of /privacy. */
.prose__note { font-size: .92rem; color: var(--muted); }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em; background: var(--cream-dk); padding: .1em .35em; border-radius: var(--radius); }
.prose blockquote {
  margin: 2rem 0; padding-left: 1.75rem; border-left: 2px solid var(--gold);
  font-family: var(--serif); font-size: 1.2rem; line-height: 1.6; color: var(--ink);
}

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.checklist li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; color: var(--muted); }
.checklist li::before {
  content: ""; width: 20px; height: 20px; margin-top: .2rem; flex: none;
  border-radius: 50%; border: 1px solid var(--gold-lt);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.5L4 7.5L10 1.5' stroke='%23b8863b' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
}
.checklist strong { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------- animations -- */
/* Content is visible by default. It is only hidden for the reveal
   animation once JS has confirmed it is running (html.js), so a blocked
   or broken script can never leave the page blank. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal:nth-child(2) { transition-delay: .08s; }
.js .reveal:nth-child(3) { transition-delay: .16s; }
.js .reveal:nth-child(4) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .btn:hover, .card--link:hover, .hood:hover { transform: none; }
}

/* -------------------------------------------------------------- print -- */
@media print {
  .site-header, .sticky-cta, .hero__scroll, .cta-band, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}

/* =============================================================
   Google Places address suggestions
   =============================================================
   Rendered by initAddressAutocomplete() in main.js. The list is a child
   of .field, which must therefore establish a positioning context.
   Styled to match each context by ancestor selector, the same way the
   shared form is, so the hero and the light card cannot drift apart. */
.field { position: relative; }

.addr-suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  margin: .3rem 0 0;
  padding: .25rem;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(20, 18, 15, .16);
  border-radius: .5rem;
  box-shadow: 0 14px 34px rgba(20, 18, 15, .22);
  max-height: 16rem;
  overflow-y: auto;
}

.addr-suggest__item {
  padding: .62rem .7rem;
  border-radius: .35rem;
  font-size: .93rem;
  line-height: 1.35;
  color: var(--ink);
  cursor: pointer;
}

/* Hover and keyboard highlight must look identical - a keyboard user gets
   the same affordance a mouse user does. */
.addr-suggest__item:hover,
.addr-suggest__item[aria-selected="true"] {
  background: var(--gold);
  color: var(--ink);
}

/* On the dark hero the list stays light: a white sheet over dark artwork
   reads as a menu, and keeps the option text at full contrast. */
.hero .addr-suggest {
  border-color: rgba(20, 18, 15, .3);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}

@media (prefers-reduced-motion: no-preference) {
  .addr-suggest { animation: addrIn .12s ease-out; }
}
@keyframes addrIn { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }

/* =============================================================
   Post-submission success panel
   =============================================================
   Replaces the form in place after the server accepts a lead. */
.form-region { position: relative; }

.success-panel {
  display: grid;
  gap: .7rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border-radius: .75rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
}

.success-panel__mark {
  width: 2.5rem; height: 2.5rem; margin: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold); color: var(--ink);
  font-size: 1.4rem; line-height: 1;
}

.success-panel__title {
  margin: 0;
  /* EXPLICIT, never inherited. `h1, h2, h3, h4` sets `color: var(--ink)` at
     element specificity, which a `color` on the panel cannot override - so on
     the dark hero the confirmation heading rendered near-black on near-black
     and was effectively invisible. Each context sets it outright below. */
  color: var(--ink);
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  line-height: 1.15;
  text-wrap: balance;
}
/* Focus is moved here programmatically; it must not read as a stray outline. */
.success-panel__title:focus { outline: none; }
.success-panel__title:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.success-panel__lede { margin: 0; font-size: 1.02rem; line-height: 1.55; }
.success-panel__call { margin: 0; font-size: .95rem; }
.success-panel__call a { font-weight: 600; }

.hero .success-panel { color: #fff; }
.hero .success-panel__title { color: #fff; }
.hero .success-panel__lede { color: rgba(255, 255, 255, .86); }
.hero .success-panel__call { color: rgba(255, 255, 255, .72); }
.hero .success-panel__call a { color: var(--gold-lt); }

.form-card .success-panel {
  background: rgba(20, 18, 15, .04);
  border-color: rgba(20, 18, 15, .14);
  color: var(--ink);
}
.form-card .success-panel__title { color: var(--ink); }

/* =============================================================
   [hidden] must actually hide
   =============================================================
   The UA rule is `[hidden] { display: none }` at normal specificity, so ANY
   class that sets an explicit `display` silently defeats it. That has now
   caused two real bugs — a step that rendered while hidden, and a success
   panel that showed before it was earned. Fixing it once, globally, is
   safer than remembering `:not([hidden])` on every future component. */
[hidden] { display: none !important; }

/* ==========================================================================
   PHASE 1 — editorial homepage
   ==========================================================================
   Local editorial authority: structure carried by typography, hairlines and
   whitespace rather than bordered cards, with gold demoted to an accent.
   Scoped to homepage components so interior pages are unaffected. */

/* --- section headings: editorial, left-aligned, narrow measure ---------- */
.sec-head { max-width: var(--measure); margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.sec-head h2 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); margin-bottom: .5em; }
.sec-head .lede { font-size: clamp(1.02rem, 1.5vw, 1.15rem); margin-bottom: 0; }
.sec-head--wide { max-width: 46rem; }

/* --- hero: two intentional zones instead of an empty right half -------- */
.hero__grid { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }

@media (min-width: 1024px) {
  /* Slightly wider left: the seller action outranks the explanation. */
  .hero__grid { grid-template-columns: 1.04fr .96fr; gap: clamp(3rem, 5vw, 5rem); align-items: start; }
  .hero--capture .hero__content { max-width: 36rem; }

  /* Step 2 composition.
     Step 2 is roughly twice the height of step 1, so the panel - sized to
     its own content and pinned to the top of the row - left a large void
     beneath it. Two presentational changes, no markup or behaviour touched:
     the left column takes more of the width so the form is wider and
     shorter, and the panel tracks the viewport instead of scrolling away
     from the fields it is there to explain.

     :has() degrades cleanly: where it is unsupported the hero simply keeps
     its step 1 proportions, which is today's behaviour. */
  .proof { position: sticky; top: 7rem; }

  /* Scoped away from .hero--value: /home-value reuses this shell with the
     columns the other way round, where widening the left column would
     narrow the form rather than the explanation. */
  .hero--capture:not(.hero--value) .hero__grid:has([data-step="2"]:not([hidden])) {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  }
  .hero--capture:not(.hero--value) .hero__grid:has([data-step="2"]:not([hidden])) .hero__content { max-width: none; }
  .hero--capture:not(.hero--value) .hero__grid:has([data-step="2"]:not([hidden])) .hv-form { max-width: 46rem; }
  /* Centred rather than pinned to the top of a column twice its height:
     the leftover space reads as framing instead of as one hole under the
     panel. */
  .hero--capture:not(.hero--value) .hero__grid:has([data-step="2"]:not([hidden])) .proof { align-self: center; }
}

/* --- hero proof panel --------------------------------------------------
   Explanatory UI, deliberately NOT a mock report: no figures, no
   comparables, no addresses. It says how a human valuation is reasoned
   about, which is the actual differentiator.
   TODO REAL ASSET: replace with an approved redacted CMA excerpt, or an
   approved Perrysburg architectural photograph, once one exists. */
.proof {
  background: var(--desk);
  border: 1px solid var(--desk-line);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.proof__label {
  margin: 0 0 1.25rem;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-lt);
}
.proof__list { list-style: none; margin: 0; padding: 0; }
.proof__item {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: .5rem;
  align-items: baseline;
  padding-block: .8rem;
  border-top: 1px solid var(--desk-line);
  color: rgba(255, 255, 255, .9);
  font-size: .98rem;
  line-height: 1.45;
}
.proof__n {
  font-size: .74rem;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .45);
}
.proof__foot {
  margin: 1.4rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--desk-line);
  font-size: .88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .62);
}

/* --- quiet assurance strip: promises, not pseudo-statistics ------------ */
/* The strip is a thin band directly under the hero: a full section's worth
   of padding beneath it left a large void before the next heading. */
.assure-strip { padding-block: clamp(2.25rem, 4vw, 3.25rem); }

.assure {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.assure__item { border-top: 2px solid var(--ink); padding-top: .95rem; }
.assure__t {
  margin: 0;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.assure__d { margin: .45rem 0 0; font-size: .95rem; line-height: 1.55; color: var(--muted); }

/* --- the human valuation: intro beside three grouped points ------------
   Replaces a five-row full-width stack that repeated the hero panel's
   rhythm almost line for line and ran to roughly a thousand pixels. The
   intro column carries the argument and the call to action; the points
   column carries the three distinctions, with one hairline each instead of
   six full-bleed rules. */
.valuation { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 900px) {
  .valuation {
    grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 5.5rem);
    align-items: start;
  }
}
.valuation__intro h2 { font-size: clamp(1.7rem, 3.1vw, 2.3rem); margin-bottom: .5em; }
.valuation__intro .lede { font-size: clamp(1rem, 1.4vw, 1.1rem); margin-bottom: 0; }
.valuation__cta { margin-top: clamp(1.5rem, 3vw, 2rem); }

.vpoint {
  padding-block: clamp(1.05rem, 2vw, 1.45rem);
  border-top: 1px solid var(--line);
}
.vpoint:first-child { padding-top: 0; border-top: 0; }
@media (min-width: 900px) {
  .vpoint:first-child { padding-top: .35rem; }
}
.vpoint__t {
  margin: 0 0 .3rem;
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--ink);
}
.vpoint__d { margin: 0; color: var(--muted); font-size: .97rem; line-height: 1.65; max-width: 60ch; }

/* --- method: 01 / 02 / 03 as an editorial sequence, not cards ---------- */
.method__item {
  display: grid;
  gap: .6rem clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(1.35rem, 2.5vw, 2rem);
  border-top: 1px solid var(--line);
}
.method__item:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 860px) {
  .method__item { grid-template-columns: 4rem minmax(0, 13rem) minmax(0, 1fr); align-items: start; }
}
.method__n {
  font-size: .78rem;
  letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
  color: var(--gold-dk);
  padding-top: .3rem;
}
.method__k {
  margin: 0;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.method__d { margin: 0; color: var(--muted); font-size: .99rem; line-height: 1.7; max-width: 56ch; }

/* --- Perrysburg property desk: text-led, no placeholder photography ----
   TODO REAL ASSET: approved local photography may join this later. Until
   then generic beige placeholders would misrepresent local knowledge. */
.desk { margin-top: clamp(.5rem, 2vw, 1rem); }
.desk__item {
  display: grid;
  gap: .35rem clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(1.2rem, 2.4vw, 1.7rem);
  border-top: 1px solid var(--line);
  transition: background .25s var(--ease);
}
.desk__item:last-of-type { border-bottom: 1px solid var(--line); }
@media (min-width: 780px) {
  /* Unnumbered: these are four places, not four steps. The 01/02/03 rhythm
     belongs to the listing sequence above, and running it here read as the
     same component twice. */
  .desk__item { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); align-items: baseline; }
}
.desk__name {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 500;
  color: var(--ink);
  /* A link affordance at rest. Without one the rows read as headings and
     nothing invited the click until the pointer was already on them. */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: .18em;
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.desk__note { margin: 0; color: var(--muted); font-size: .96rem; line-height: 1.6; }
a.desk__item:hover .desk__name,
a.desk__item:focus-visible .desk__name {
  color: var(--gold-dk);
  text-decoration-color: var(--gold);
}
a.desk__item:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.desk__served {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  font-size: .9rem;
  line-height: 1.75;
  color: var(--muted);
  max-width: 56rem;
}

/* --- buyer path: available, deliberately subordinate ------------------- */
.buyer-note {
  border-top: 1px solid var(--rule-strong);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
  /* 62ch broke this one sentence one word short of its end, leaving the
     link's last word and arrow stranded on a line of their own. */
  max-width: min(100%, 44rem);
  text-wrap: pretty;
}
.buyer-note a {
  color: var(--ink);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
  transition: border-color .2s var(--ease);
}
.buyer-note a:hover { border-color: var(--gold-dk); }
/* Keeps the trailing arrow bound to the last word of the link. */
.nowrap { white-space: nowrap; }


/* ==========================================================================
   PHASE 2 - seller conversion pages (/sell and /home-value)
   ==========================================================================
   Same system as the Phase 1 homepage: serif headlines, sans utility text,
   hairlines instead of boxes, gold as punctuation. Every rule below is a new
   class or a modifier, so the pages outside this phase (/about, /buy,
   /contact, /neighborhoods, /privacy, /404) keep the components they had.
   Shared components used by those pages - .pagehead, .split, .card,
   .form-card, .steps, .checklist, .faq - are untouched. */

/* --- /sell: the lead ---------------------------------------------------
   Extends .pagehead rather than replacing it: the dark ground, gold underline
   and light type are already right, and .pagehead is shared with six other
   pages. Only the composition inside it is new. */
.pagehead--lead { padding-bottom: clamp(3rem, 6vw, 5rem); }
.lead { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 980px) {
  .lead {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: clamp(3rem, 6vw, 5.5rem);
    align-items: end;
  }
}
.pagehead--lead h1 { max-width: 15ch; text-wrap: balance; }
.pagehead--lead .lede { max-width: 44ch; }
.lead__act { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
/* Subordinate by construction: the valuation is the conversion, the
   walkthrough is the alternative for someone not ready for a number. */
.lead__alt { margin: 1.15rem 0 0; font-size: .9rem; color: rgba(255, 255, 255, .58); }
.lead__alt a {
  color: rgba(255, 255, 255, .84);
  border-bottom: 1px solid rgba(255, 255, 255, .26);
  padding-bottom: .15rem;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.lead__alt a:hover { color: #fff; border-color: var(--gold); }

/* The right column carries the page's spine, not artwork. */
.lead__maplabel {
  margin: 0 0 1.15rem;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-lt);
}
.lead__phases { list-style: none; margin: 0; padding: 0; }
.lead__phases li {
  display: grid; gap: .3rem;
  padding-block: .95rem;
  border-top: 1px solid var(--desk-line);
}
.lead__phases li:last-child { border-bottom: 1px solid var(--desk-line); }
.lead__k { font-family: var(--serif); font-size: 1.14rem; color: var(--white); }
.lead__v { font-size: .88rem; line-height: 1.5; color: rgba(255, 255, 255, .6); }

/* --- /sell: where leverage is lost -------------------------------------
   Prose, not cards. The headline states the claim; the column beside it
   makes the argument in three named parts. */
.argument { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 960px) {
  .argument {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: clamp(3rem, 6vw, 5.5rem);
    align-items: start;
  }
}
.argument__head h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: .5em; max-width: 19ch; }
.argument__sub {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  line-height: 1.55;
  color: var(--ink-soft);
}
.argument__body { display: grid; gap: clamp(1.6rem, 3vw, 2.35rem); }
.argument__item h3 {
  margin: 0 0 .35rem;
  font-family: var(--serif); font-size: 1.18rem; font-weight: 500; color: var(--ink);
}
.argument__item p { margin: 0; color: var(--muted); line-height: 1.75; max-width: 58ch; }

/* --- /sell: the roadmap ------------------------------------------------
   Two levels, which is the point: three phases carrying six stages. A flat
   run of six rows would have repeated the homepage Prepare / Position /
   Launch rhythm and taught the visitor nothing about the shape of a sale.
   A strong rule opens a phase; a hair rule separates stages inside it. */
.roadmap { margin-top: clamp(.5rem, 2vw, 1rem); }
.roadmap__phase {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  padding-block: clamp(1.85rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--rule-strong);
}
.roadmap__phase:last-child { border-bottom: 1px solid var(--rule-strong); }
@media (min-width: 900px) {
  .roadmap__phase {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  /* The phase name stays beside the stages it governs while they scroll. */
  .roadmap__meta { position: sticky; top: 7rem; }
}
.roadmap__name {
  margin: 0;
  font-family: var(--serif); font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  font-weight: 500; color: var(--ink);
}
.roadmap__range {
  margin: .4rem 0 0;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: var(--gold-dk);
}
.roadmap__stages { display: grid; }
.stage {
  display: grid; gap: .25rem clamp(1rem, 2vw, 1.5rem);
  padding-block: clamp(1.15rem, 2.2vw, 1.55rem);
  border-top: 1px solid var(--rule-hair);
}
.roadmap__stages > .stage:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 560px) {
  .stage { grid-template-columns: 2.75rem minmax(0, 1fr); align-items: start; }
}
.stage__n {
  margin: 0;
  font-family: var(--serif); font-size: 1rem;
  font-variant-numeric: tabular-nums; color: var(--gold-dk);
  padding-top: .18rem;
}
.stage__t {
  margin: 0 0 .35rem;
  font-family: var(--serif); font-size: 1.16rem; font-weight: 500;
  letter-spacing: 0; color: var(--ink);
}
.stage__d { margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.7; max-width: 62ch; }

/* --- /sell: what every listing receives --------------------------------
   An index, deliberately without rules or tick marks: the completeness comes
   from the parallel structure and the count, not from a checklist beside a
   photograph the site cannot yet prove is Crystal's own work. */
.included { display: grid; gap: clamp(1.75rem, 3.5vw, 2.5rem) clamp(2rem, 5vw, 4rem); }
@media (min-width: 720px) { .included { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.included__t {
  margin: 0 0 .3rem;
  font-family: var(--serif); font-size: 1.14rem; font-weight: 500; color: var(--ink);
}
.included__d { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }

/* --- /home-value: the capture hero, mirrored ---------------------------
   Reuses .hero--capture so both ends of the funnel sit on one surface, then
   swaps the emphasis: the argument takes the narrower column and the form
   takes the wider one. */
.hero--value .hero__by {
  margin: clamp(1.35rem, 2.5vw, 1.85rem) 0 0;
  padding-top: clamp(1.1rem, 2vw, 1.4rem);
  border-top: 1px solid var(--desk-line);
  font-size: .95rem; line-height: 1.65;
  color: rgba(255, 255, 255, .66);
  max-width: 44ch;
}
@media (min-width: 1024px) {
  .hero--value .hero__grid {
    grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
    align-items: start;
  }
  .hero--value .hero__content { max-width: 30rem; position: sticky; top: 7rem; }
}

/* Small phones: reclaim the vertical space between the argument and the
   form from spacing rather than from type size or touch targets, so the
   address field and its CTA both sit in the first view at 360x800. */
@media (max-width: 480px) {
  .hero--value .hero__grid { gap: 1.5rem; }
  .hero--value .hero__by { margin-top: 1rem; padding-top: .9rem; font-size: .9rem; }
  .hero--value .valueform { padding: 1.25rem; }
  .hero--value .valueform__note { margin-bottom: 1.05rem; }
}

/* The form panel takes the surface the homepage gives its explanation
   panel. On this page the form is the thing that deserves it. */
.valueform {
  /* Opaque on purpose, not var(--desk).
     The success panel is itself translucent, and stacking two translucent
     surfaces makes the confirmation heading's contrast depend on whatever
     the hero ground happens to be underneath - unauditable, and one theme
     change away from white-on-light. This value is the colour the
     translucent panel actually rendered as over this hero (sampled at
     rgb(20-23, 19-21, 17-18)), so nothing moves visually, and the heading's
     contrast is now fixed at about 16:1 regardless of the ground. */
  background: #151412;
  border: 1px solid var(--desk-line);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.valueform__label {
  margin: 0 0 .35rem;
  font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: 500; color: var(--white);
}
.valueform__note {
  margin: 0 0 clamp(1.35rem, 2.5vw, 1.75rem);
  font-size: .9rem; line-height: 1.55; color: rgba(255, 255, 255, .62);
}

/* --- /home-value: why a person ----------------------------------------- */
.whyhuman { display: grid; gap: clamp(2.25rem, 4vw, 3rem); }
@media (min-width: 940px) {
  .whyhuman {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(3rem, 6vw, 5rem);
    align-items: start;
  }
}
.whyhuman__body h2 { font-size: clamp(1.7rem, 3.1vw, 2.3rem); margin-bottom: .5em; }
.whyhuman__body p { color: var(--muted); line-height: 1.75; max-width: 58ch; }
.factors { padding-top: clamp(1.25rem, 2.5vw, 1.75rem); border-top: 1px solid var(--rule-strong); }
.factors__label {
  margin: 0 0 1.25rem;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-dk);
}
.factors__list { margin: 0; display: grid; gap: clamp(1.1rem, 2vw, 1.4rem); }
.factor dt {
  margin-bottom: .2rem;
  font-family: var(--serif); font-size: 1.06rem; color: var(--ink);
}
.factor dd { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.6; }

/* --- /home-value: what comes back -------------------------------------- */
.returns__list { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem) clamp(2rem, 5vw, 4rem); }
@media (min-width: 780px) { .returns__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.returns__item h3 {
  margin: 0 0 .3rem;
  font-family: var(--serif); font-size: 1.14rem; font-weight: 500; color: var(--ink);
}
.returns__item p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }

/* A quiet aside, not a dashed box. */
.quietnote {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-left: clamp(1.25rem, 2.5vw, 1.75rem);
  border-left: 2px solid var(--gold);
  max-width: 60ch;
}
.quietnote__t {
  margin: 0 0 .4rem;
  font-family: var(--serif); font-size: 1.12rem; color: var(--ink);
}
.quietnote p:last-child { margin: 0; color: var(--muted); line-height: 1.7; font-size: .98rem; }

/* --- /home-value: the direct route ------------------------------------- */
.direct {
  display: grid; gap: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--rule-strong);
}
@media (min-width: 820px) {
  .direct { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 5vw, 4rem); align-items: end; }
}
.direct__say h2 { margin: 0; font-size: clamp(1.5rem, 2.8vw, 2rem); max-width: 20ch; }
.direct__routes { display: grid; gap: .35rem; justify-items: start; }
@media (min-width: 820px) { .direct__routes { justify-items: end; } }
.direct__tel {
  display: inline-flex; align-items: center; min-height: 3rem;
  font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.05rem);
  color: var(--ink); line-height: 1.2;
  border-bottom: 1px solid var(--gold);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.direct__tel:hover { color: var(--gold-dk); border-color: var(--gold-dk); }
.direct__mail {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-size: .95rem; color: var(--muted);
  border-bottom: 1px solid var(--line);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.direct__mail:hover { color: var(--ink); border-color: var(--gold); }

/* --- /sell-house-without-agent-toledo --------------------------------
   The guide reuses the /sell lead, .method, .returns, .argument, .included,
   .checklist and .faq components. Only two things are new: the "in this
   guide" list in the lead is made of links, and the comparison is a real
   table. Below 980px the table stacks into one block per task, each cell
   labelled from data-label; the explicit ARIA roles in the markup keep the
   table semantics a screen reader would otherwise drop once the rows are
   display:block. --gold-link, not --gold-dk, for the small labels: it
   clears AA on both grounds. */
a.lead__k { transition: color .2s var(--ease); }
a.lead__k:hover { color: var(--gold-lt); }

.compare { width: 100%; border-collapse: collapse; font-size: .96rem; }
.compare th, .compare td {
  text-align: left; vertical-align: top;
  padding: 1.05rem 1.25rem 1.05rem 0;
  border-top: 1px solid var(--line);
}
.compare thead th {
  border-top: 0; padding-bottom: .85rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-link);
}
.compare tbody th {
  font-family: var(--serif); font-size: 1.06rem; font-weight: 500; color: var(--ink);
  width: 22%;
}
.compare td { color: var(--muted); line-height: 1.6; width: 39%; }
/* Four paths: the task column plus four equal columns. */
.compare--paths tbody th { width: 16%; }
.compare--paths td { width: 21%; font-size: .92rem; }
.compare tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
/* Stacks into labelled cards below 980px: the only table (the FSBO
   guide's four-path comparison) has five columns of prose, which do not
   fit a tablet. */
@media (max-width: 979px) {
  .compare thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare tr { padding-block: 1.15rem; border-top: 1px solid var(--line); }
  .compare tbody tr:last-child { border-bottom: 1px solid var(--line); }
  .compare th, .compare td, .compare tbody tr:last-child > * { padding: 0; border: 0; }
  .compare tbody th { margin-bottom: .55rem; width: auto; }
  .compare td + td { margin-top: .7rem; }
  .compare td::before {
    content: attr(data-label); display: block; margin-bottom: .15rem;
    font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--gold-link);
  }
}