/* ============================================================================
   mitchknowshomes.com, built on Template 4 "The Collective"
   (agent-templates/collective, measured from an AgentFire lead-gen site).
   Palette sampled from Mitch's headshot (2026-09-29): warm white wall, stone
   shadow, greige/taupe suit and pampas, warm charcoal. Light and clean; the
   only dark surface is the footer.
   Typography: Noto Serif Display headlines (Mitch matched it to the C21 Results reels, 2026-09-29),
   replacing the tools-site Playfair Display; otherwise tools.resultsdriven.app treatment:
   headlines (400, -0.015em, italic accent), Archivo body and
   UI, Archivo 700 tracked caps for eyebrows, sentence-case bold buttons.
   Motion: opacity + soft blur clear only, no rising.
   ============================================================================ */

/* Self-hosted fonts (latin subsets from Google Fonts, OFL). No third-party round trips. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('fonts/archivo-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Noto Serif Display'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('fonts/noto-serif-display-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Noto Serif Display'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('fonts/noto-serif-display-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --serif: 'Noto Serif Display', Georgia, serif;
  --sans:  'Archivo', system-ui, -apple-system, sans-serif;

  --ink:     #2E2A28;   /* warm charcoal: headings, buttons (13.4:1 on paper) */
  --ink-d:   #24211F;   /* footer */
  --body:    #3F3A37;
  --muted:   #5F5854;   /* 6.6:1 on paper */
  --paper:   #FAF8F6;   /* wall, lifted */
  --paper-2: #F1EDE9;   /* wall in light */
  --paper-3: #EAE3DD;   /* warm recess */
  --white:   #FFFFFF;
  --stone:   #DAD5D1;   /* wall shadow: lines, borders */
  --taupe:   #B99E8F;   /* suit + pampas: decorative fills */
  --taupe-d: #8A6C5E;   /* accent text (4.5:1 on paper) */
  --taupe-t: #7A5F52;   /* small labels (5.5:1 on paper) */
  --sand:    #D9CBC1;   /* accent on the dark footer (9:1) */
  --line:    rgba(46,42,40,0.12);
  --line-2:  rgba(46,42,40,0.07);
  --error:   #9B2C2C;

  --shell: 1200px;
  --wide: 1360px;
  --gut: clamp(16px, 5vw, 64px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);   /* expo out */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
html { font-optical-sizing: auto; }
body {
  margin: 0; background: var(--paper); color: var(--body);
  font-family: var(--sans); font-size: 17px; line-height: 1.7; font-weight: 400;
  overflow-x: hidden; /* no -webkit-font-smoothing:antialiased: on macOS it erases Didone hairlines */
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }
.wide { max-width: var(--wide); margin-inline: auto; padding-inline: var(--gut); }
section { padding-block: clamp(64px, 9vw, 120px); }

:focus-visible { outline: 2px solid var(--taupe-t); outline-offset: 3px; border-radius: 4px; }
.foot :focus-visible { outline-color: var(--sand); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
.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; }

/* ---- type (tools hub treatment) ---- */
.caps { font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
/* Kicker: widely spaced serif caps over a short taupe rule (C21 Results reel treatment). */
.kicker { display: block; font-family: var(--serif); font-weight: 500; font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--taupe-t); margin: 0 0 22px; line-height: 1.7; }
.kicker::after { content: ''; display: block; width: 44px; height: 1px; background: var(--taupe); margin-top: 12px; }
.sec-head .kicker::after, .quote-in .kicker::after, .cta .kicker::after, .team-in .kicker::after { margin-inline: auto; }
.hero-photo .kicker::after { background: var(--sand); }
.h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.08; letter-spacing: -0.015em; color: var(--ink); margin: 0; text-wrap: balance; }
.h2 em, .h3 em { font-style: italic; color: var(--taupe-d); }
.h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 14px; }
.lead { font-size: clamp(18px, 1.5vw, 20px); font-weight: 300; color: var(--ink); }
.sec-head { text-align: center; max-width: 820px; margin: 0 auto clamp(40px, 5vw, 64px); }

/* ---- pill buttons: bold sentence case, like the hub ---- */
.btn { display: inline-block; font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: 0.005em; text-decoration: none; text-align: center; padding: 15px 30px; border-radius: 100px; border: 1px solid transparent; cursor: pointer; transition: background 260ms var(--ease), color 260ms var(--ease), border-color 260ms var(--ease); line-height: 1.3; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--taupe-d); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--stone); font-weight: 600; font-size: 14px; }
.btn-ghost:hover { border-color: var(--ink); }
.btn-block { display: block; width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: progress; }

/* ============================== NAV ================================== */
.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 50; color: var(--ink); transition: transform 420ms var(--ease), background 300ms var(--ease), box-shadow 300ms var(--ease); }
.nav.stuck { position: fixed; background: rgba(250,248,246,0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-2); box-shadow: 0 2px 24px rgba(46,42,40,0.05); }
.nav.hide { transform: translateY(-100%); }
.nav-in { max-width: var(--wide); margin-inline: auto; padding: 20px var(--gut); display: flex; align-items: center; gap: 30px; transition: padding 300ms var(--ease); }
.nav.stuck .nav-in { padding-block: 12px; }
.brand { display: flex; flex-direction: column; align-items: center; line-height: 1; text-decoration: none; color: inherit; margin-right: auto; border: 1px solid currentColor; padding: 10px 18px 11px; }
.brand-name { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: 0.01em; }
.brand-sub { font-family: var(--sans); font-size: 8.5px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.8; margin-top: 6px; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { font-size: 12.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; color: var(--body); padding-block: 6px; border-bottom: 1px solid transparent; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--taupe); }
.nav-cta { padding: 12px 22px; font-size: 14px; }
.nav-menu { display: none; align-items: center; gap: 10px; background: none; font: 500 12px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: inherit; border: 1px solid var(--stone); border-radius: 100px; padding: 12px 18px; cursor: pointer; }
.nav-menu .bars { display: inline-flex; flex-direction: column; gap: 3px; }
.nav-menu .bars i { width: 16px; height: 1.5px; background: currentColor; display: block; }
@media (max-width: 1080px) { .nav-links { display: none; } .nav-menu { display: inline-flex; } .nav-in { gap: 14px; } }
@media (max-width: 560px) { .nav-cta { display: none; } .brand-name { font-size: 19px; } .brand { padding: 9px 13px 10px; } }

.menu { position: fixed; inset: 0; z-index: 70; background: var(--paper); color: var(--ink); display: grid; place-items: center; padding: 90px var(--gut) 40px; }
.menu[hidden] { display: none; }
.menu-in { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.menu-in > a:not(.btn) { font-family: var(--serif); font-size: 34px; letter-spacing: -0.01em; text-decoration: none; }
.menu-in .btn { margin-top: 14px; }
.menu-in .menu-text { font-family: var(--sans); font-weight: 700; font-size: 12px !important; letter-spacing: 0.2em; text-transform: uppercase; color: var(--taupe-t); }
body.menu-open .nav { position: fixed; background: transparent; box-shadow: none; border-color: transparent; z-index: 80; transform: none; }
body.menu-open .nav-cta { display: none; }
body.menu-open .connect { display: none; }

/* ============================== HERO (home) ============================ */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; background: var(--paper-2); color: var(--ink); padding: clamp(120px, 16vh, 150px) 0 clamp(56px, 8vh, 90px); }
.hero-media, .phero-media { position: absolute; inset: -18% -3% -8% -3%; will-change: transform, filter, opacity; pointer-events: none;
  background:
    radial-gradient(55% 55% at 80% 28%, rgba(255,255,255,0.9), transparent 70%),
    radial-gradient(50% 60% at 8% 95%, rgba(185,158,143,0.14), transparent 70%),
    url('contours.svg') center / cover no-repeat,
    var(--paper-2); }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(36px, 5vw, 80px); align-items: center; width: 100%; }
.hero h1, .phero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 6vw, 78px); line-height: 1.02; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 24px; text-wrap: balance; }
.hero h1 em, .phero h1 em { font-style: italic; color: var(--taupe-d); }
.hero-sub { font-size: clamp(17px, 1.4vw, 19px); font-weight: 300; line-height: 1.6; color: var(--body); margin: 0 0 30px; max-width: 54ch; }
.trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-family: var(--sans); font-weight: 700; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--taupe-t); }
.trust li { display: flex; align-items: center; gap: 9px; }
.trust li::before { content: ''; width: 5px; height: 5px; background: var(--taupe); transform: rotate(45deg); }
.byline { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; }
.byline img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--white), 0 10px 26px -12px rgba(46,42,40,0.45); }
.byline p { margin: 0; line-height: 1.3; }
.byline b { display: block; font-family: var(--serif); font-weight: 500; font-size: 19px; color: var(--ink); }
.byline span { font-size: 14px; color: var(--muted); }
@media (max-width: 960px) {
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: 1fr; }
}

/* ============================== PAGE HERO (interior) =================== */
.phero { position: relative; overflow: hidden; background: var(--paper-2); color: var(--ink); padding: clamp(150px, 20vh, 200px) 0 clamp(64px, 9vw, 110px); border-bottom: 1px solid var(--line-2); }
.phero-in { position: relative; z-index: 2; max-width: 920px; margin-inline: 0; }
@media (min-width: 1200px) { .phero-in { margin-inline: auto; } }
.phero h1 { font-size: clamp(40px, 5.4vw, 70px); }
.phero-lead { font-size: clamp(18px, 1.5vw, 20px); font-weight: 300; line-height: 1.6; color: var(--body); max-width: 60ch; margin: 0 0 30px; }
.phero-lead a { color: var(--ink); font-weight: 500; text-underline-offset: 3px; }
.phero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ============================== LEAD FORM ============================== */
.lead-card { background: var(--white); color: var(--body); border-radius: 20px; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); box-shadow: 0 30px 70px -40px rgba(46,42,40,0.35); text-align: left; }
.lead-h { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.4vw, 31px); line-height: 1.12; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 6px; }
.lead-sub { font-size: 15px; color: var(--muted); margin: 0 0 20px; line-height: 1.55; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.req { font-weight: 400; color: var(--muted); }
.field input, .field select { font: 400 16px/1.3 var(--sans); color: var(--ink); background: var(--paper); border: 1px solid #C9C2BD; border-radius: 12px; padding: 12px 13px; width: 100%; min-width: 0; transition: border-color 200ms, box-shadow 200ms, background 200ms; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.field input::placeholder { color: #8C8480; }
.field input:focus, .field select:focus { outline: none; background-color: var(--white); border-color: var(--taupe-d); box-shadow: 0 0 0 3px rgba(185,158,143,0.35); }
.field input[aria-invalid="true"] { border-color: var(--error); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 480px) { .row2 { grid-template-columns: 1fr; } }
.hint { font-size: 13px; color: var(--muted); margin: -6px 0 14px; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin: 4px 0 16px; }
.consent input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--ink); }
.consent label { font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.consent a { color: var(--ink); }
.form-error { background: #FBEDED; color: var(--error); border-radius: 10px; padding: 11px 14px; font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
.form-error a { color: var(--error); font-weight: 600; }
.form-note { font-size: 12.5px; color: var(--muted); text-align: center; margin: 12px 0 0; }

.form-band { background: var(--paper-3); }
.form-band-in { max-width: 640px; }
.form-band-alt { text-align: center; color: var(--muted); font-size: 15px; margin: 22px 0 0; }
.form-band-alt a { color: var(--ink); font-weight: 500; text-underline-offset: 3px; }

/* ============================== HOME SECTIONS ========================== */
.step-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); }
.step { background: var(--white); border: 1px solid var(--line-2); border-radius: 20px; padding: clamp(28px, 3.4vw, 44px) clamp(22px, 2.8vw, 34px); }
.step-n { font-family: var(--serif); font-style: italic; font-size: 46px; line-height: 1; color: var(--taupe); display: block; margin-bottom: 22px; }
.step-h { font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--ink); margin: 0 0 10px; }
.step p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
@media (max-width: 860px) { .step-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

.reasons { background: var(--paper-2); }
.reason-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--stone); }
.reason { padding: clamp(28px, 3.4vw, 44px) clamp(8px, 2.4vw, 36px); border-bottom: 1px solid var(--stone); }
.reason:nth-child(odd) { border-right: 1px solid var(--stone); }
.reason-h { font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--ink); margin: 0 0 10px; }
.reason p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.6; max-width: 48ch; }
@media (max-width: 760px) { .reason-grid { grid-template-columns: 1fr; } .reason:nth-child(odd) { border-right: 0; } }

.areas { background: var(--paper); overflow: hidden; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; gap: 14px; width: max-content; animation: marquee 60s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } }
.chip { display: inline-block; white-space: nowrap; font-family: var(--serif); font-size: clamp(19px, 1.9vw, 24px); color: var(--ink); border: 1px solid var(--stone); border-radius: 100px; padding: 12px 28px; background: var(--white); }

.quote { background: var(--paper-2); }
.quote-in { text-align: center; max-width: 880px; }
.quote blockquote { margin: 0; }
.quote blockquote p { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.28; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 22px; text-wrap: balance; }
.quote blockquote footer { font-family: var(--sans); font-weight: 700; font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

.cta { background: var(--paper-3); text-align: center; }
.cta .h2 { margin-bottom: 18px; }
.cta p:not(.kicker) { color: var(--body); font-weight: 300; font-size: 18px; max-width: 50ch; margin: 0 auto 32px; }

/* ============================== INTERIOR SECTIONS ====================== */
.prose { max-width: 68ch; }
.prose > div + div { margin-top: clamp(36px, 4vw, 52px); }
.prose p { margin: 0 0 16px; }
.prose-narrow { max-width: 760px; margin-inline: auto; }
.prose-sec + .prose-sec { padding-top: 0; }
.ticks { list-style: none; margin: 0 0 16px; padding: 0; }
.ticks li { position: relative; padding-left: 28px; margin-bottom: 12px; }
.ticks li::before { content: ''; position: absolute; left: 2px; top: 0.72em; width: 7px; height: 7px; background: var(--taupe); transform: rotate(45deg); }
.cross { font-size: 16px; color: var(--muted); border-top: 1px solid var(--stone); padding-top: 20px; margin-top: 28px !important; }
.cross a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.prose a { color: var(--ink); text-underline-offset: 3px; }

.split-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(36px, 6vw, 90px); align-items: start; }
.sticky { position: sticky; top: 100px; }
@media (max-width: 960px) { .split-grid { grid-template-columns: 1fr; } .split-form { order: -1; } .sticky { position: static; } }

.stages-in { max-width: 900px; }
.stage { display: grid; grid-template-columns: 120px 1fr; gap: clamp(16px, 3vw, 40px); padding-block: clamp(28px, 3.4vw, 44px); border-top: 1px solid var(--stone); }
.stage:last-child { border-bottom: 1px solid var(--stone); }
.stage-n { font-family: var(--serif); font-style: italic; font-size: clamp(56px, 7vw, 88px); line-height: 0.9; color: var(--taupe); }
.stage-b p { margin: 0; }
@media (max-width: 640px) { .stage { grid-template-columns: 1fr; gap: 6px; } .stage-n { font-size: 48px; } }
@media (min-width: 1200px) { .stages-in { margin-inline: auto; } }

.team { background: var(--paper-2); }
.team-in { max-width: 820px; text-align: center; }
.team-in .h2 { margin-bottom: 20px; }
.team-in .cross { text-align: center; }

.asks { background: var(--paper-2); }
.ask-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 22px); }
.ask { background: var(--white); border: 1px solid var(--line-2); border-radius: 20px; padding: clamp(22px, 2.6vw, 32px); font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.ask strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--ink); margin-bottom: 6px; }
.ask:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 760px) { .ask-grid { grid-template-columns: 1fr; } }

.bio-grid { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(32px, 6vw, 90px); align-items: start; }
.headshot { margin: 0; }
.headshot img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 20px; box-shadow: 0 30px 60px -34px rgba(46,42,40,0.45); }
@media (max-width: 860px) { .bio-grid { grid-template-columns: 1fr; } .headshot { max-width: 320px; } }

.faq { padding-top: clamp(48px, 6vw, 80px); }
.qa { border-top: 1px solid var(--stone); }
.qa:last-of-type { border-bottom: 1px solid var(--stone); }
.qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa-q { font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 2vw, 23px); line-height: 1.3; color: var(--ink); margin: 0; }
.qa-icon { flex: 0 0 22px; height: 22px; position: relative; }
.qa-icon::before, .qa-icon::after { content: ''; position: absolute; left: 3px; right: 3px; top: 10px; height: 1.5px; background: var(--taupe-d); transition: transform 300ms var(--ease); }
.qa-icon::after { transform: rotate(90deg); }
.qa[open] .qa-icon::after { transform: rotate(0deg); }
.qa-a p { margin: 0 0 24px; max-width: 66ch; }
.qa-a a { color: var(--ink); text-underline-offset: 3px; }

/* ============================== CONNECT (floating Text Mitch) ========== */
.connect { position: fixed; bottom: 18px; right: 18px; z-index: 55; display: inline-flex; align-items: center; gap: 10px; background: var(--white); border-radius: 100px; padding: 6px 18px 6px 6px; box-shadow: 0 14px 40px -14px rgba(46,42,40,0.45), 0 0 0 1px var(--line); text-decoration: none; transition: opacity 400ms var(--ease), visibility 400ms; }
.connect.away { opacity: 0; visibility: hidden; }
.connect-mono { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--paper-2); }
.connect-label { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }

/* ============================== FOOTER ================================= */
.foot { background: var(--ink-d); color: rgba(255,255,255,0.72); }
.foot .shell { padding-block: 64px 34px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; margin-bottom: 44px; }
.foot .brand { align-items: flex-start; color: #fff; margin-right: 0; display: inline-flex; }
.foot-nap { font-size: 14px; font-weight: 300; line-height: 1.7; margin: 18px 0 0; }
.foot-h { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sand); margin: 0 0 14px; }
.foot-col a, .foot-col p { display: block; font-size: 14.5px; font-weight: 300; color: rgba(255,255,255,0.78); text-decoration: none; margin: 0 0 9px; }
.foot-col a:hover { color: var(--sand); }
.foot-legal { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 24px; font-size: 12.5px; line-height: 1.8; margin: 0; }
.foot-legal a { color: var(--sand); }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-id { grid-column: 1 / -1; } }
@media (max-width: 420px) { .foot-grid { grid-template-columns: 1fr; } }

/* ============================== MOTION ================================= */
/* Reveals: opacity + soft blur clearing. No vertical travel (house rule). */
.js .reveal, .js .words { opacity: 0; filter: blur(4px); transition: opacity 650ms var(--ease), filter 650ms var(--ease); }
.js .words { transition-duration: 800ms; }
.js .reveal.in, .js .words.in { opacity: 1; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .words { opacity: 1; filter: none; transition: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; padding-inline: var(--gut); }
  .marquee-track [aria-hidden="true"] { display: none; }
  .nav, .qa-icon::before, .qa-icon::after { transition: none; }
}

/* ============================== PHOTOGRAPHY (placeholder listing photos) */
/* Home hero: full-bleed twilight exterior under a warm charcoal veil (Collective's photo hero). */
.hero-photo { background: var(--ink-d); color: #fff; }
.hero-photo .hero-media { background: var(--ink-d); }
.hero-photo .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; filter: saturate(1.05) brightness(1.08); }
.hero-photo .hero-media::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(36,33,31,0.84) 0%, rgba(36,33,31,0.55) 38%, rgba(36,33,31,0.12) 72%, rgba(36,33,31,0.05) 100%),
              linear-gradient(0deg, rgba(36,33,31,0.5), transparent 35%); }
.hero-photo h1 { color: #fff; }
.hero-photo h1 em { color: var(--sand); }
.hero-photo .hero-sub { color: rgba(255,255,255,0.9); }
.hero-photo .kicker, .hero-photo .trust { color: var(--sand); }
.hero-photo .trust li::before { background: var(--sand); }
.hero-photo .byline b { color: #fff; }
.hero-photo .byline span { color: rgba(255,255,255,0.82); }
.hero-photo :focus-visible { outline-color: var(--sand); }
@media (max-width: 960px) {
  .hero-photo .hero-media::after { background: linear-gradient(180deg, rgba(36,33,31,0.82) 0%, rgba(36,33,31,0.7) 55%, rgba(36,33,31,0.85) 100%); }
}
/* Nav sits white over the photo until it sticks. */
.is-home .nav:not(.stuck) { color: #fff; }
.is-home .nav:not(.stuck) .nav-links a { color: rgba(255,255,255,0.9); }
.is-home .nav:not(.stuck) .nav-links a:hover { color: #fff; border-bottom-color: var(--sand); }
.is-home .nav:not(.stuck) .nav-menu { border-color: rgba(255,255,255,0.5); }
.is-home .nav:not(.stuck) .btn-primary { background: #fff; color: var(--ink); }
.is-home .nav:not(.stuck) .btn-primary:hover { background: var(--sand); }
.is-home .nav:not(.stuck) :focus-visible { outline-color: var(--sand); }
body.menu-open.is-home .nav { color: var(--ink); }

/* Interior hero with a photo panel beside the copy. */
.phero-photo .phero-in { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.phero-fig { margin: 0; }
.phero-fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; box-shadow: 0 34px 70px -38px rgba(46,42,40,0.55); }
@media (max-width: 900px) { .phero-photo .phero-in { grid-template-columns: 1fr; } .phero-fig { max-width: 560px; } }

/* Home photo strip. */
.strip { background: var(--paper); padding-block: clamp(40px, 5vw, 72px) 0; }
.strip-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: clamp(10px, 1.4vw, 18px); }
.strip-grid figure { margin: 0; }
.strip-grid img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; }
@media (max-width: 760px) { .strip-grid { grid-template-columns: 1fr 1fr; } .strip-grid figure:first-child { grid-column: 1 / -1; } }

/* ============================== TESTIMONIALS ========================== */
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(14px, 2vw, 24px); margin-top: clamp(40px, 5vw, 64px); align-items: stretch; }
.testi { margin: 0; background: var(--white); border: 1px solid var(--line-2); border-radius: 20px; padding: clamp(26px, 3vw, 38px); position: relative; text-align: left; }
.testi-mark { display: block; font-family: var(--serif); font-size: 64px; line-height: 0.6; height: 30px; color: var(--taupe); }
.testi blockquote { margin: 0; }
.testi blockquote p { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; color: var(--ink); margin: 0 0 20px; text-wrap: pretty; }
.testi figcaption { font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.testi-grid:has(> .testi:only-child) { max-width: 760px; margin-inline: auto; }
.testi-solo { max-width: 640px; margin: 32px auto 0; }
.testi-solo .testi { text-align: left; }
.prose > .testi { margin-top: clamp(36px, 4vw, 52px); }
.faq-testi { margin-top: clamp(36px, 4vw, 52px); }

/* ============================== RECENTLY SOLD ========================= */
.sold-sec { background: var(--paper); }
.sold-home { background: var(--paper); }
.sold-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(14px, 2vw, 24px); }
.sold { margin: 0; }
.sold-img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 18px; background: var(--paper-2); }
.sold-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.sold:hover .sold-img img { transform: scale(1.04); }
.sold-badge { position: absolute; top: 12px; left: 12px; font-family: var(--sans); font-weight: 700; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); background: rgba(255,255,255,0.94); padding: 6px 12px; border-radius: 100px; }
.sold figcaption { padding: 14px 4px 0; }
.sold-street { display: block; font-family: var(--serif); font-size: 20px; color: var(--ink); line-height: 1.25; }
.sold-meta { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.sold-more { text-align: center; margin: clamp(32px, 4vw, 48px) 0 0; }
@media (prefers-reduced-motion: reduce) { .sold-img img { transition: none; } }


/* ============================== REEL TREATMENT (C21 Results reels) ===== */
/* Roman words in capitals, the italic accent word stays lowercase in gold; squared gold bar buttons. */
:root { --gold-reel: #9C8457; }   /* reel italic gold, 4.5:1 on paper for large text */
.hero h1, .phero h1, .h2 { text-transform: uppercase; letter-spacing: 0.005em; line-height: 1.02; }
.hero h1 em, .phero h1 em, .h2 em { text-transform: none; font-size: 1.12em; letter-spacing: -0.01em; }
.phero h1 em, .h2 em, .h3 em { color: var(--gold-reel); }
.hero h1 { font-size: clamp(40px, 5.4vw, 74px); }
.phero h1 { font-size: clamp(36px, 4.8vw, 64px); }
.h2 { font-size: clamp(30px, 3.8vw, 50px); }
.btn { border-radius: 2px; text-transform: uppercase; letter-spacing: 0.22em; font-size: 12.5px; font-weight: 600; padding: 17px 30px; }
.btn-primary { background: #836C40; color: #fff; }  /* deeper reel gold: 5:1 with white (AA) */
.btn-primary:hover { background: var(--ink); }
.btn-primary::after { content: '→'; display: inline-block; margin-left: 14px; transition: transform 300ms var(--ease); }
.btn-primary:hover::after { transform: translateX(4px); }
.nav-cta { letter-spacing: 0.18em; font-size: 11.5px; padding: 13px 20px; }
.nav-cta::after { display: none; }
.is-home .nav:not(.stuck) .btn-primary { background: rgba(255,255,255,0.95); color: var(--ink); }
/* Accent italic at semibold, matching the reel's "zoom in" weight (Mitch, 2026-09-29). */
.hero h1 em, .phero h1 em, .h2 em, .h3 em, .quote blockquote p em { font-weight: 500; }
.hero-photo h1 em { color: #D4BC8A; }  /* light reel gold, readable over the photo veil */
.sold-story { display: inline-block; margin-top: 10px; font: 600 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.sold-role { display: block; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--taupe-t); margin-top: 6px; }

/* ============================== PHOTO-DRIVEN SECTIONS ================== */
.phero-bg { background: var(--ink-d); color: #fff; min-height: 78svh; display: grid; align-items: end; }
.phero-bg .phero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.phero-bg .phero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(36,33,31,0.8) 0%, rgba(36,33,31,0.45) 45%, rgba(36,33,31,0.1) 100%), linear-gradient(0deg, rgba(36,33,31,0.55), transparent 45%); }
.phero-bg .phero-lead { color: rgba(255,255,255,0.9); }
.phero-bg .phero-in { margin-inline: auto; }
.nav:has(+ .menu) ~ main .phero-bg { }
body:has(.phero-bg) .nav:not(.stuck) { color: #fff; }
body:has(.phero-bg) .nav:not(.stuck) .nav-links a { color: rgba(255,255,255,0.9); }
body:has(.phero-bg) .nav:not(.stuck) .btn-primary { background: rgba(255,255,255,0.95); color: var(--ink); }
body:has(.phero-bg) .nav:not(.stuck) .nav-menu { border-color: rgba(255,255,255,0.5); }

.band { position: relative; overflow: hidden; min-height: 70svh; display: grid; align-items: center; color: #fff; padding-block: clamp(90px, 12vw, 160px); }
.band-media { position: absolute; inset: 0; }
.band-media img { width: 100%; height: 100%; object-fit: cover; }
.band-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(36,33,31,0.72), rgba(36,33,31,0.25) 60%, rgba(36,33,31,0.1)); }
.band-in { position: relative; z-index: 1; max-width: var(--shell); }
.band .h2 { color: #fff; max-width: 14ch; margin-bottom: 30px; }
.band .h2 em { color: #D4BC8A; }
.strip-tight { padding-block: 0; background: var(--paper-2); }
.strip-tight .strip-grid { padding-block: clamp(28px, 4vw, 48px); }

/* Slow Ken Burns drift on hero and band photos (scale only, no rising). */
@keyframes kb { from { transform: scale(1.02); } to { transform: scale(1.12); } }
.hero-photo .hero-media img, .phero-bg .phero-media img, .band-media img { animation: kb 28s ease-in-out infinite alternate; transform-origin: 55% 45%; }
.phero-bg { min-height: 86svh; }
.phero-bg h1 { font-size: clamp(40px, 5.6vw, 76px); }
@media (prefers-reduced-motion: reduce) { .hero-photo .hero-media img, .phero-bg .phero-media img, .band-media img { animation: none; } }

/* ============================== MAGAZINE LAYER ========================= */
/* Photo-led chapters, spreads, sticky media, reel. Mobile first: everything stacks. */
.cap { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 12px 0 0; }
.cover-cap { position: relative; z-index: 3; margin: -44px var(--gut) 0 auto; width: max-content; max-width: calc(100% - 2 * var(--gut)); font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.75); padding-bottom: 20px; }
.ch-no { display: block; font-family: var(--serif); font-style: italic; font-size: clamp(56px, 9vw, 120px); line-height: 0.9; color: var(--taupe); opacity: 0.55; margin-bottom: 8px; }

/* Split chapter: photo + body. Phones: photo first, full width, 4:5. */
.chapter { padding-block: 0; }
.ch-split { display: grid; grid-template-columns: 1fr; }
.ch-media { margin: 0; }
.ch-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.ch-media .cap { padding-inline: var(--gut); }
.ch-body { padding: clamp(48px, 8vw, 110px) var(--gut); }
.ch-body .h2 { margin-bottom: clamp(28px, 4vw, 48px); }
@media (min-width: 900px) {
  .ch-split { grid-template-columns: 1fr 1fr; align-items: start; }
  .ch-flip .ch-media { order: 2; }
  .sticky-media { position: sticky; top: 0; height: 100svh; }
  .sticky-media img { height: 100%; aspect-ratio: auto; }
  .ch-media .cap { position: sticky; bottom: 0; }
  .ch-body { padding: clamp(90px, 12vw, 160px) clamp(40px, 6vw, 110px); max-width: 720px; }
}
.ed-list { list-style: none; margin: 0; padding: 0; }
.ed-list li { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 26px 0; border-top: 1px solid var(--stone); }
.ed-list li:last-child { border-bottom: 1px solid var(--stone); }
.ed-n { font-family: var(--serif); font-style: italic; font-size: 40px; line-height: 1; color: var(--gold-reel); }
.ed-list p { margin: 0; color: var(--muted); font-size: 16px; }
.ch-dark { background: var(--ink-d); color: rgba(255,255,255,0.8); }
.ch-dark .h2 { color: #fff; }
.ch-dark .h2 em { color: #D4BC8A; }
.ch-dark .kicker { color: var(--sand); }
.ch-dark .kicker::after { background: var(--sand); }
.ch-dark .reason-h { color: #fff; }
.ch-dark .cap { color: rgba(255,255,255,0.6); }
.ed-reasons article { padding: 24px 0; border-top: 1px solid rgba(255,255,255,0.14); }
.ed-reasons p { margin: 0; color: rgba(255,255,255,0.78); font-size: 16px; }

/* Spread: two photos edge to edge, stacked on phones. */
.spread { display: grid; grid-template-columns: 1fr; gap: 0; padding: 0; background: var(--ink-d); position: relative; }
.spread figure { margin: 0; }
.spread img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.spread-cap { position: absolute; left: var(--gut); bottom: 16px; margin: 0; color: rgba(255,255,255,0.85); text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
@media (min-width: 760px) { .spread { grid-template-columns: 1fr 1fr; } .spread img { aspect-ratio: 3 / 4; max-height: 92svh; } }

/* Pull quote over a photo. */
.pull, .cta-photo { position: relative; overflow: hidden; min-height: 90svh; display: grid; align-items: center; color: #fff; padding-block: clamp(90px, 12vw, 160px); }
.pull .band-media, .cta-photo .band-media { position: absolute; inset: 0; }
.pull .band-media img, .cta-photo .band-media img { width: 100%; height: 100%; object-fit: cover; }
.pull .band-media::after, .cta-photo .band-media::after { content: ''; position: absolute; inset: 0; background: rgba(28,25,23,0.55); }
.pull-in, .cta-in { position: relative; z-index: 1; text-align: center; max-width: 980px; }
.pull blockquote { margin: 0; }
.pull blockquote p { font-family: var(--serif); font-style: italic; font-size: clamp(30px, 5.2vw, 68px); line-height: 1.12; letter-spacing: -0.01em; color: #fff; margin: 0 0 28px; text-wrap: balance; }
.pull blockquote footer { font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sand); }
.pull .kicker::after, .cta-photo .kicker::after { margin-inline: auto; }
.cta-in .h2 { color: #fff; margin-bottom: 18px; }
.cta-in .h2 em { color: #D4BC8A; }
.cta-in p:not(.kicker) { color: rgba(255,255,255,0.88); font-size: 18px; font-weight: 300; max-width: 46ch; margin: 0 auto 32px; }

/* Sold reel: horizontal scroll-snap (swipe on phones). */
.reel-sec { padding-block: clamp(64px, 9vw, 120px) clamp(40px, 5vw, 64px); background: var(--paper); overflow: hidden; }
.reel-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(28px, 4vw, 44px); }
.reel { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 380px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gut) 20px; scroll-padding-inline: var(--gut); -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.reel .sold { scroll-snap-align: start; }
.reel .sold-img { aspect-ratio: 4 / 5; border-radius: 4px; }
.reel:focus-visible { outline-offset: -4px; }

.words-sec { padding-block: clamp(56px, 8vw, 110px); background: var(--paper-2); }
.words-sec .testi-grid { margin-top: 0; }

/* Photo wipe-in (horizontal clip reveal, no vertical travel). */
.js .wipe { clip-path: inset(0 100% 0 0); transition: clip-path 900ms cubic-bezier(0.16,1,0.3,1); }
.js .wipe.in { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .js .wipe { clip-path: none; transition: none; } }

/* Form band over a photo: the card floats on the image, like a magazine reply card. */
.form-band-photo { position: relative; overflow: hidden; background: var(--ink-d); padding-block: clamp(80px, 11vw, 150px); }
.form-band-photo .band-media { position: absolute; inset: 0; }
.form-band-photo .band-media img { width: 100%; height: 100%; object-fit: cover; }
.form-band-photo .band-media::after { content: ''; position: absolute; inset: 0; background: rgba(28,25,23,0.45); }
.form-band-photo .form-band-in { position: relative; z-index: 1; }
.form-band-photo .form-band-alt, .form-band-photo .form-band-alt a { color: #fff; }

/* Chapter body helpers. */
.ch-body .stage { grid-template-columns: 84px 1fr; }
.ch-body .stage-n { font-size: clamp(48px, 5vw, 72px); }
.ch-dark .stage { border-color: rgba(255,255,255,0.14); }
.ch-dark .stage .h3, .ch-dark .ask strong { color: #fff; }
.ch-dark .stage p, .ch-dark .ticks li, .ch-dark .prose p { color: rgba(255,255,255,0.8); }
.ch-dark .ticks li::before { background: #D4BC8A; }
.ch-body .prose { max-width: none; }
.ch-body .qa { border-color: var(--stone); }
.ed-asks { list-style: none; margin: 0; padding: 0; }
.ed-asks li { padding: 22px 0; border-top: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.8); font-size: 16px; }
.ed-asks strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 23px; color: #fff; margin-bottom: 6px; }
.mini-bio { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.mini-bio img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.text-chapter { padding-block: clamp(70px, 10vw, 130px); background: var(--paper); }
.text-chapter .inner { max-width: 760px; margin-inline: auto; padding-inline: var(--gut); }
.sold-grid.mag { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(16px, 2vw, 28px); }
.sold-grid.mag .sold-img { aspect-ratio: 4 / 5; border-radius: 4px; }
.sold-grid.mag .sold:nth-child(7n+1) { grid-column: span 2; }
.sold-grid.mag .sold:nth-child(7n+1) .sold-img { aspect-ratio: 16 / 10; }
@media (max-width: 700px) { .sold-grid.mag .sold:nth-child(7n+1) { grid-column: auto; } .sold-grid.mag .sold:nth-child(7n+1) .sold-img { aspect-ratio: 4 / 5; } }
/* Sticky chapter photo: the figure stretches the full chapter height so the photo stays pinned. */
.ch-media { align-self: stretch; }
.sticky-media { position: relative; }
.cap-on { position: absolute; left: var(--gut); bottom: 18px; margin: 0; color: rgba(255,255,255,0.9); text-shadow: 0 1px 10px rgba(0,0,0,0.65); padding: 0 !important; }
@media (min-width: 900px) { .sticky-media { position: sticky; } .cap-on { left: 28px; bottom: 24px; } }
.sold-grid.mag { grid-auto-flow: dense; }
.ch-media .cap-on { left: 24px !important; right: 24px; }
.ch-no { opacity: 1; color: var(--gold-reel); } .ch-dark .ch-no { color: #BFA77A; }

/* Smooth cross-page fade (browsers that support cross-document view transitions). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
.phero-bg .phero-media, .hero-photo .hero-media { background: var(--ink-d) !important; }  /* no hidden contour SVG behind photos (was the LCP element) */
@media (max-width: 1200px) { .nav-links { display: none; } .nav-menu { display: inline-flex; } }

/* ============================== HOME SEARCH (quiz + Ruuster embed) ===== */
.qz-sec { background: var(--paper-2); padding-block: clamp(48px, 7vw, 96px); }
.qz-shell { max-width: 760px; }
.qz { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: clamp(24px, 4vw, 48px); box-shadow: 0 30px 70px -40px rgba(46,42,40,0.35); margin-top: clamp(-120px, -10vw, -60px); position: relative; z-index: 3; }
.q-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.q-step legend { font-family: var(--serif); font-size: clamp(26px, 3.4vw, 38px); line-height: 1.15; color: var(--ink); margin-bottom: 22px; padding: 0; }
.q-n { display: block; font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--taupe-t); margin-bottom: 10px; }
.q-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.q-opt { position: relative; display: block; cursor: pointer; }
.q-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.q-opt span { display: flex; align-items: center; min-height: 54px; padding: 14px 18px; border: 1px solid #C9C2BD; border-radius: 12px; font-size: 16px; color: var(--ink); background: var(--paper); transition: background 160ms, border-color 160ms, color 160ms; }
.q-opt input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.q-opt input:focus-visible + span { outline: 2px solid var(--taupe-t); outline-offset: 2px; }
.q-hint, .q-sub { grid-column: 1 / -1; margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.q-sub { font-family: var(--serif); font-size: 22px; color: var(--ink); margin-top: 18px; }
.q-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.q-nav .q-next { margin-left: auto; }
.q-err { margin-top: 14px; }
.results { background: var(--paper); padding-block: clamp(40px, 6vw, 80px) 0; }
.results-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.results-sum { font-size: clamp(24px, 3vw, 38px); text-transform: none; }
.results-frame { border-top: 1px solid var(--line); }
.results-frame iframe { display: block; width: 100%; height: min(1400px, 150svh); border: 0; background: var(--paper-2); }
.results-cap { text-align: center; padding: 14px var(--gut) 40px; }
.q-perks { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }
@media (min-width: 720px) { .q-perks { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .q-perks { grid-template-columns: repeat(3, 1fr); } }
.q-perk { background: var(--paper-2); border-radius: 14px; padding: 22px; }
.q-perk-h { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--ink); margin: 0 0 8px; }
.q-perk p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.qz [hidden], .results[hidden], .qz-sec[hidden] { display: none !important; }
/* Save nudge above the embedded search (fade in, no rising). */
.save-nudge { display: flex; align-items: center; gap: 14px; margin: 0 var(--gut) 16px; padding: 14px 18px; background: var(--ink); color: #fff; border-radius: 14px; opacity: 0; transition: opacity 500ms var(--ease); }
.save-nudge.on { opacity: 1; }
.save-nudge p { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.9); flex: 1; }
.save-nudge b { color: #fff; }
.save-heart { font-size: 26px; line-height: 1; color: #D4BC8A; }
.save-x { background: none; border: 0; color: rgba(255,255,255,0.75); font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.save-x:focus-visible { outline: 2px solid var(--sand); }
@media (min-width: 1360px) { .save-nudge { max-width: calc(var(--wide) - 2 * var(--gut)); margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .save-nudge { transition: none; } }
.save-nudge[hidden] { display: none !important; }

/* Full-screen results viewer (single scroll). */
html.results-open, html.results-open body { overflow: hidden !important; }
html.results-open .nav, html.results-open .connect { display: none !important; }
.results.is-open { position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; padding: 0; background: var(--paper); }
.results.is-open .results-head { flex: 0 0 auto; margin: 0; padding: 12px var(--gut); gap: 12px; border-bottom: 1px solid var(--line); flex-wrap: nowrap; align-items: center; max-width: none; }
.results.is-open .results-head .kicker { display: none; }
.results.is-open .results-sum { font-size: clamp(17px, 2vw, 24px); line-height: 1.25; margin: 0; }
.results.is-open .q-restart, .results.is-open .rs-home { flex: 0 0 auto; padding: 11px 16px; font-size: 11px; }
.results.is-open .save-nudge { flex: 0 0 auto; margin: 10px var(--gut) 0; }
.results.is-open .results-frame { flex: 1 1 auto; min-height: 0; border: 0; }
.results.is-open .results-frame iframe { height: 100%; }
.results.is-open .results-cap { flex: 0 0 auto; padding: 6px var(--gut) 8px; margin: 0; font-size: 10px; }
@media (max-width: 600px) { .results.is-open .results-cap { display: none; } }
.q-resume { display: block; width: 100%; margin: 0 0 14px; padding: 14px 18px; border: 1px solid var(--stone); border-radius: 12px; background: var(--white); font: 600 15px/1.4 var(--sans); color: var(--ink); text-align: left; cursor: pointer; position: relative; z-index: 3; }
.q-resume span { font-weight: 400; color: var(--muted); }
.q-resume[hidden] { display: none; }

/* Results bar: brand + back-to-site keep the visitor anchored to mitchknowshomes.com. */
.rs-brand, .rs-actions .rs-home { display: none; }
.rs-home-s { display: none; }
.results.is-open .rs-brand { display: flex; flex: 0 0 auto; margin: 0; color: var(--ink); padding: 7px 12px 8px; }
.results.is-open .rs-brand .brand-name { font-size: 17px; }
.results.is-open .rs-brand .brand-sub { font-size: 7px; margin-top: 4px; }
.results.is-open .rs-sum { flex: 1 1 auto; min-width: 0; }
.results.is-open .rs-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.results.is-open .rs-actions .rs-home { display: inline-flex; }
@media (max-width: 760px) {
  .results.is-open .results-head { display: grid; grid-template-columns: auto 1fr; row-gap: 10px; }
  .results.is-open .rs-actions { justify-self: end; }
  .results.is-open .rs-sum { grid-column: 1 / -1; grid-row: 2; }
  .results.is-open .rs-home-l { display: none; }
  .results.is-open .rs-home-s { display: inline; }
  .results.is-open .results-head { column-gap: 8px; }
  .results.is-open .rs-actions { gap: 6px; }
  .results.is-open .rs-brand { padding: 6px 9px 7px; }
  .results.is-open .rs-brand .brand-name { font-size: 15px; }
  .results.is-open .rs-brand .brand-sub { font-size: 6px; letter-spacing: 0.2em; }
  .results.is-open .q-restart, .results.is-open .rs-home { padding: 9px 10px; font-size: 10px; letter-spacing: 0.1em; }
}

/* ============================== STATEMENT HOMEPAGE (2026-09-30) ======== */
/* Full-bleed cover, no form: the statement comes first, the value path stays one tap away. */
.hero-statement { min-height: 100svh; align-items: end; padding-bottom: clamp(64px, 11vh, 120px); }
.hero-statement .hero-media::after { background: linear-gradient(180deg, rgba(20,18,17,0.30) 0%, rgba(20,18,17,0.05) 35%, rgba(20,18,17,0.62) 100%); }
.statement-in { position: relative; z-index: 2; max-width: 980px; margin-left: max(var(--gut), calc((100vw - var(--wide)) / 2)); }
.hero-statement h1 { font-size: clamp(46px, 7.4vw, 104px); line-height: 0.98; max-width: 14ch; }
.hero-statement .hero-sub { max-width: 58ch; }
.statement-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 30px; }
.btn-light { color: #fff; border-color: rgba(255,255,255,0.55); }
.btn-light:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

.proof { background: var(--ink-d); color: #fff; padding: clamp(48px, 7vw, 88px) 0; }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 48px); }
.proof-item { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid rgba(217,203,193,0.35); padding-top: 22px; }
.proof-n { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 5.4vw, 72px); line-height: 1; color: #fff; }
.proof-l { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sand); line-height: 1.5; max-width: 26ch; }
@media (max-width: 800px) { .proof-grid { grid-template-columns: repeat(2, 1fr); } }

.works-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(28px, 4vw, 44px); }
.works { display: grid; grid-template-columns: 1.62fr 1fr; grid-template-rows: 1fr 1fr; gap: clamp(12px, 1.4vw, 20px); }
.work { position: relative; margin: 0; overflow: hidden; background: var(--paper-3); min-height: clamp(220px, 24vw, 340px); }
.work-lead { grid-row: 1 / span 2; min-height: clamp(360px, 50vw, 700px); }
.work img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease); }
.work:hover img { transform: scale(1.035); }
.work figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 22px 18px; background: linear-gradient(180deg, transparent, rgba(20,18,17,0.72)); color: #fff; display: flex; flex-direction: column; gap: 4px; }
.work-street { font-family: var(--serif); font-size: clamp(19px, 1.8vw, 26px); line-height: 1.15; }
.work-meta { font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sand); }
@media (max-width: 900px) { .works { grid-template-columns: 1fr; grid-template-rows: auto; } .work-lead { grid-row: auto; min-height: 380px; } .work { min-height: 260px; } }

.doors-sec .h2 { margin-bottom: clamp(28px, 4vw, 44px); }
.doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 24px); }
.door { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); }
.door-img { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-3); }
.door-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease); }
.door:hover .door-img img { transform: scale(1.04); }
.door-h { font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); line-height: 1.15; margin-top: 6px; }
.door-t { font-size: 15px; color: var(--muted); line-height: 1.5; }
@media (max-width: 900px) { .doors { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .doors { grid-template-columns: 1fr; } .door-img { aspect-ratio: 16 / 10; } }
.proof + .works-sec { padding-top: clamp(64px, 9vw, 120px); }

/* ============================== FILM HERO + SIGNATURE (2026-09-30) ===== */
/* Loveless x Altobelli: full-screen lake film, the signature logo alone, one quiet line, thin buttons. */
.hero-film { min-height: 100svh; place-items: center; text-align: center; padding: 110px var(--gut) 90px; }
.hero-film .hero-media { inset: 0; }
.hero-film .hero-media img, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-video { opacity: 0; transition: opacity 1600ms var(--ease); }
.hero-video.playing { opacity: 1; }
.hero-film .hero-media::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 50%, rgba(18,16,15,0.42), rgba(18,16,15,0.18) 70%), linear-gradient(180deg, rgba(18,16,15,0.35), transparent 30%, transparent 70%, rgba(18,16,15,0.45)); }
.film-in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.film-logo { margin: 0; color: #fff; line-height: 0; }
.logo-svg { display: block; width: min(697px, 73vw); height: auto; filter: drop-shadow(0 2px 18px rgba(0,0,0,0.35)); }
.film-tag { margin: clamp(22px, 3vw, 34px) 0 0; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(255,255,255,0.86); }
.film-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(26px, 3.4vw, 40px); }
.btn-line { display: inline-block; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; text-decoration: none; color: #fff; border: 1px solid rgba(255,255,255,0.7); padding: 14px 26px; transition: background 320ms var(--ease), color 320ms var(--ease), border-color 320ms var(--ease); }
.btn-line:hover { background: #fff; color: var(--ink); border-color: #fff; }
.is-home .nav:not(.stuck) .brand { opacity: 0; pointer-events: none; transition: opacity 400ms var(--ease); }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }

.opener { padding: clamp(80px, 11vw, 150px) 0 clamp(70px, 9vw, 120px); text-align: center; }
.opener-in { display: flex; flex-direction: column; align-items: center; }
.opener .kicker::after { margin-inline: auto; }
.opener-h { font-size: clamp(36px, 5.2vw, 72px); margin: 0 0 26px; max-width: 20ch; }
.opener-sub { font-size: clamp(17px, 1.4vw, 19px); font-weight: 300; line-height: 1.65; color: var(--body); max-width: 60ch; margin: 0 0 30px; }
.opener .trust { justify-content: center; }

@media (max-width: 520px) { .film-tag { font-size: 10px; letter-spacing: 0.2em; } .film-cta { flex-direction: column; align-items: stretch; width: min(300px, 80vw); } .btn-line { text-align: center; } }

/* Day-to-dusk hero film (home value): the film zooms itself, so no Ken Burns on the stills underneath. */
.phero-film .phero-media img { animation: none; }
.phero-film .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }

/* Signature wordmark replaces the boxed text logo sitewide (2026-09-30). */
.brand { border: 0; padding: 4px 0; }
.brand-mark { display: block; height: 28px; width: auto; }
@media (max-width: 560px) { .brand-mark { height: 24px; } }
.foot .brand-mark { height: 32px; }
.results.is-open .rs-brand { padding: 2px 0; }
.results.is-open .rs-brand .brand-mark { height: 22px; }
@media (max-width: 760px) { .results.is-open .rs-brand .brand-mark { height: 20px; } }

/* Full-bleed panorama (lake drone photography). */
.lake-pano { position: relative; margin: 0; padding: 0; }
.lake-pano-fig { margin: 0; height: clamp(320px, 62vw, 860px); overflow: hidden; }
.lake-pano-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lake-pano-cap { position: absolute; left: var(--gut); bottom: 16px; margin: 0; color: rgba(255,255,255,0.9); text-shadow: 0 1px 8px rgba(0,0,0,0.6); }

/* ============================== TRANSACTION STORIES ==================== */
.story-draft { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 90; margin: 0; padding: 6px 14px; background: #9B2C2C; color: #fff; font: 700 11px var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.story-crumbs { font-size: 13px; color: var(--muted); margin-bottom: 24px; }
.story-crumbs a { color: var(--muted); }
.story-by { font-size: 14px; color: var(--muted); margin: -22px 0 clamp(28px, 3.5vw, 40px); }
.story-by a { color: var(--ink); }
.story-author { display: flex; gap: 18px; align-items: center; margin: clamp(36px, 5vw, 56px) 0 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.story-author img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.story-author p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.story-author strong { color: var(--ink); }
.story-compare { margin: 28px 0 32px; display: grid; gap: 14px; }
.compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.compare-row figure { margin: 0; }
.compare-row img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.compare-row figcaption { font: 600 10.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--taupe-t); margin-top: 8px; }
.story-credit { font-size: 12px; color: var(--muted); margin: -26px 0 clamp(24px, 3vw, 36px); }
.story-meta { font: 600 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--taupe-t); margin: 0 0 clamp(28px, 3.5vw, 40px); padding-bottom: 18px; border-bottom: 1px solid var(--line); line-height: 1.8; }
.story-body .story-h { margin-top: clamp(28px, 3vw, 40px); }
.story-quote { margin: clamp(28px, 3vw, 40px) 0; padding-left: 20px; border-left: 2px solid var(--taupe); font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--ink); }
.story-quote footer { font: 600 12px var(--sans); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 28px); }
.story-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); }
.story-card-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-3); }
.story-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.story-card:hover .story-card-img img { transform: scale(1.04); }
.story-card-meta { font: 700 10.5px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--taupe-t); margin-top: 6px; }
.story-card-h { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.2; }
@media (max-width: 900px) { .story-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .story-grid { grid-template-columns: 1fr; } }

/* Hero (film) text paints immediately via CSS, not after the reveal script, so it can't delay LCP.
   Starts at 0.01 opacity (counts as painted) and settles with the same soft fade + blur-clear. */
.js .hero-film .reveal, .js .hero-film .reveal.in { opacity: 1; filter: none; transform: none; transition: none; animation: heroIn 1100ms var(--ease) both; }
.js .hero-film .film-tag { animation-delay: 120ms; }
.js .hero-film .film-cta { animation-delay: 220ms; }
@keyframes heroIn { from { opacity: 0.01; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .js .hero-film .reveal { animation: none; } }



/* ============ MARKET UPDATES (marketing plan 1.2) ============ */
.mkt-table-wrap { margin: 0 0 clamp(32px, 4vw, 48px); overflow-x: auto; }
.mkt-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.mkt-table th, .mkt-table td { text-align: right; padding: 12px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mkt-table th:first-child, .mkt-table tbody th { text-align: left; }
.mkt-table thead th { font: 700 10.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--taupe-t); border-bottom: 1px solid var(--ink); }
.mkt-table tbody th { font-weight: 500; color: var(--ink); }
.mkt-table td:nth-child(2) { font-family: var(--serif); font-size: 18px; color: var(--ink); }
.mkt-up, .mkt-down, .mkt-flat { color: var(--muted); }  /* neutral on purpose: up is not always good (plan 1.2: calm, no fear-selling) */
.mkt-source { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
.mkt-archive { list-style: none; padding: 0; margin: 0; } .mkt-archive li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.mkt-now { background: var(--paper-2); padding: clamp(48px, 7vw, 88px) 0; margin-bottom: clamp(24px, 4vw, 48px); }
.mkt-now-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.mkt-now-head .kicker { margin: 0; }
.mkt-now-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); }
.mkt-now-item { border-top: 1px solid var(--ink); padding-top: 16px; display: grid; gap: 6px; }
.mkt-now-n { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 44px); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.mkt-now-l { font: 700 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--taupe-t); }
.mkt-now-c { font-size: 13.5px; }
@media (max-width: 800px) { .mkt-now-grid { grid-template-columns: repeat(2, 1fr); } }
.mkt-yours { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; margin-top: 22px; padding: 18px 22px; background: var(--white); border: 1px solid var(--line); }
.mkt-yours p { margin: 0; max-width: 52ch; color: var(--ink); font-size: 15.5px; }
.steps { margin: 0 0 8px; padding-left: 1.3em; } .steps li { margin: 0 0 12px; padding-left: 6px; } .steps li::marker { font-family: var(--serif); color: var(--taupe-d); }
.qa-q { font-size: clamp(19px, 1.8vw, 22px); }