/* ===================================================================
   Chris Powell Real Estate — design system
   Aesthetic: Modern Luxury + Clean & Trustworthy
   Navy + warm gold accents, airy whitespace, serif display + clean sans
   =================================================================== */

:root {
  /* Palette */
  --navy:        #0e2a47;   /* deep, trustworthy navy */
  --navy-900:    #0a1f36;
  --navy-700:    #14385e;
  --gold:        #c6a15b;   /* warm luxury accent */
  --gold-dark:   #ab8642;
  --ink:         #1d2733;   /* primary text */
  --slate:       #55606d;   /* secondary text */
  --line:        #e6e8ec;   /* hairlines */
  --cloud:       #f6f7f9;   /* light section bg */
  --paper:       #ffffff;
  --cream:       #faf8f4;   /* warm off-white */

  /* Type */
  /* The *-Fallback faces sit directly after each webfont: they are the system
     font re-shaped to match its metrics, so the swap when the webfont arrives
     doesn't move any text. Defined in assets/fonts/fonts.css. */
  --serif: "Playfair Display", "Playfair Fallback", Georgia, "Times New Roman", serif;
  --sans:  "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Structure */
  --maxw: 1180px;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 18px 50px rgba(14, 42, 71, 0.12);
  --shadow-sm: 0 6px 20px rgba(14, 42, 71, 0.08);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; color: var(--navy); letter-spacing: -0.01em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.25rem; }

.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--gold-dark);
  margin-bottom: 14px;
}
.eyebrow-light { color: var(--gold); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 600; font-size: 0.98rem;
  padding: 15px 30px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  white-space: nowrap;
}
.btn-gold { background: var(--gold); color: #24170a; box-shadow: 0 8px 22px rgba(198,161,91,.35); }
.btn-gold:hover { background: var(--gold-dark); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(198,161,91,.45); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-700); transform: translateY(-2px); }
.btn-block { width: 100%; }
.btn-sm { padding: 11px 22px; font-size: 0.9rem; }
.btn-lg { padding: 18px 40px; font-size: 1.06rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease);
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 24px; }
.brand { display: flex; flex-direction: row; align-items: center; gap: 12px; text-decoration: none; }
.brand-stack { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; color: var(--navy); }
.brand-tagline { font-family: var(--serif); font-size: .92rem; font-weight: 400; color: var(--gold-text); letter-spacing: .01em; margin-top: 2px; }
.brand-sep { width: 1px; height: 34px; background: #d9d3c6; flex: none; }
.brand-logo { height: 38px; width: auto; flex: none; display: block; }
/* Broker name kept legibly equal to agent name for IL compliance */
/* .brand-broker retired 2026-07-22 — brokerage name removed from the header at
   Chris's request. It remains in the footer on every page (larger than the
   licensee name), which is what 68 Ill. Adm. Code 1450.715(b) requires. */  /* 68 Ill. Adm. Code 1450.715(b): sponsoring broker's name must be at least equal in
     size to the licensee's. Equal font size satisfies test (A). */

.nav { display: flex; gap: 28px; }
.nav a { font-size: 0.95rem; font-weight: 500; color: var(--ink); position: relative; padding: 6px 0; }
.nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--gold); transition: width .25s var(--ease); }
.nav a:hover { color: var(--navy); }
.nav a:hover::after { width: 100%; }

.header-cta { display: flex; align-items: center; gap: 18px; }
.header-phone { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.95rem; color: var(--navy); }
.header-phone:hover { color: var(--gold-dark); }
.header-phone-icon { flex: none; color: var(--gold-dark); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--navy); border-radius: 2px; transition: .3s var(--ease); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background:
    radial-gradient(1000px 500px at 85% 0%, rgba(198,161,91,0.16), transparent 55%),
    linear-gradient(112deg, rgba(10,31,54,0.95) 0%, rgba(10,31,54,0.84) 42%, rgba(14,42,71,0.55) 100%),
    url("../assets/homes/hero.webp") center right / cover no-repeat,
    var(--navy-900);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(circle at 70% 40%, #000 0%, transparent 70%);
}
.hero-inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; padding: 92px 24px 96px; }
.hero-copy { max-width: 620px; }
.hero h1 { color: #fff; }
.hero .eyebrow { color: var(--gold); }
.hero-sub { font-size: 1.14rem; color: rgba(255,255,255,0.86); margin: 20px 0 26px; }
.hero-points { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.hero-points li { position: relative; padding-left: 30px; color: rgba(255,255,255,0.92); font-weight: 500; }
.hero-points li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: #24170a;
  font-size: 0.72rem; font-weight: 800; display: grid; place-items: center;
}

/* Valuation card — min-height reserves space for the form main.js injects on
   load, so it doesn't pop in and shift the page below it (was causing real CLS). */
.valuation-card { background: #fff; color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 34px 30px; min-height: 800px; }
.valuation-title { font-size: 1.6rem; }
.valuation-sub { color: var(--slate); font-size: 0.96rem; margin: 8px 0 22px; }
.valuation-form .field { margin-bottom: 15px; }
.field label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.field .optional { font-weight: 400; color: var(--slate); }
.field input {
  width: 100%; padding: 13px 15px; font-family: var(--sans); font-size: 1rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--cloud);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field input:focus { outline: none; border-color: var(--gold); background: #fff; box-shadow: 0 0 0 3px rgba(198,161,91,.18); }
/* Every digit renders at the same width, so the phone mask's ( ) and - don't shift as you type. */
input[type="tel"] { font-variant-numeric: tabular-nums; }
.field select {
  width: 100%; padding: 13px 40px 13px 15px; font-family: var(--sans); font-size: 1rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background-color: var(--cloud); color: var(--ink); appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%2355606d' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
.field select:focus { outline: none; border-color: var(--gold); background-color: #fff; box-shadow: 0 0 0 3px rgba(198,161,91,.18); }
.consent-check { display: flex; gap: 9px; align-items: flex-start; font-size: 0.78rem; color: var(--slate); line-height: 1.45; margin: 2px 0 14px; }
.consent-check input { margin-top: 3px; flex-shrink: 0; width: 15px; height: 15px; accent-color: var(--gold-dark); }

/* Cookie-consent banner */
.consent-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200;
  background: var(--navy-900); color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: space-between;
  max-width: 900px; margin: 0 auto;
}
.consent-bar p { font-size: 0.86rem; margin: 0; flex: 1 1 320px; }
.consent-bar a { color: var(--gold); text-decoration: underline; }
.consent-actions { display: flex; gap: 10px; flex-shrink: 0; }
.consent-decline { background: transparent; border: 1.5px solid rgba(255,255,255,0.3); color: #fff; }
.consent-decline:hover { border-color: #fff; background: rgba(255,255,255,0.06); }
/* Honeypot field — moved off-screen so real users never see or tab to it */
.hp-field { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-fineprint { font-size: 0.8rem; color: var(--slate); text-align: center; margin-top: 12px; }
.form-success { text-align: center; padding: 24px 8px; }
.form-success h3 { color: var(--navy); margin-bottom: 8px; }
.form-success p { color: var(--slate); }

/* ---------- Trust bar ---------- */
.trust-bar { background: var(--navy); color: #fff; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 32px 24px; text-align: center; }
.trust-item { display: flex; flex-direction: column; gap: 4px; }
.trust-num { font-family: var(--serif); font-size: 1.9rem; font-weight: 700; color: var(--gold); }
.trust-label { font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.75); }

/* ---------- Sections ---------- */
.section { padding: 72px 0; }
/* The header already separates the page top; a full 72px on the first section
   reads as dead space on interior pages. */
main > .section:first-child, main > .guides-hero, main > article.section:first-child { padding-top: 44px; }
.section-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.section-lede { color: var(--slate); font-size: 1.1rem; margin-top: 14px; }

/* Market */
.market { background: var(--cream); }
.market-county { margin-bottom: 40px; }
.market-county:last-of-type { margin-bottom: 0; }
.market-county-name {
  font-size: 1.5rem; margin-bottom: 22px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line); display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px;
}
.market-county-name::before { content: ""; width: 26px; height: 3px; background: var(--gold); border-radius: 3px; align-self: center; }
.market-county-name span { font-family: var(--sans); font-size: 0.86rem; font-weight: 500; color: var(--slate); letter-spacing: 0.02em; }
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 24px; text-align: center; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.stat-big { display: block; font-family: var(--serif); font-size: 2.5rem; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.stat-desc { font-size: 0.92rem; color: var(--slate); }
/* County comparison panels */
.county-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.county-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 32px; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.county-panel:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.county-head { border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 6px; }
.county-name { font-size: 1.7rem; }
.county-name::before { content: ""; display: inline-block; width: 26px; height: 3px; background: var(--gold); border-radius: 3px; vertical-align: middle; margin-right: 12px; }
.county-tag { font-size: 0.86rem; color: var(--slate); margin-top: 8px; }
.county-stats { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
.county-stats li { display: flex; flex-direction: column; padding: 18px 0; border-bottom: 1px solid var(--line); }
.county-stats li:nth-last-child(-n+2) { border-bottom: 0; } /* last row: no divider */
.cs-num { font-family: var(--serif); font-size: 1.85rem; font-weight: 700; color: var(--navy); line-height: 1; }
.cs-label { font-size: 0.82rem; color: var(--slate); margin-top: 7px; }

.stat-source { text-align: center; font-size: 0.8rem; color: var(--slate); margin: 26px 0 34px; font-style: italic; max-width: 720px; margin-left: auto; margin-right: auto; }

/* Two-column */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.two-col-copy p { color: var(--slate); margin-bottom: 16px; }
.two-col-copy h2 { margin-bottom: 18px; }
.two-col-copy .btn { margin-top: 10px; }
.checklist { list-style: none; margin: 6px 0 26px; display: flex; flex-direction: column; gap: 13px; }
.checklist li { position: relative; padding-left: 32px; color: var(--slate); }
.checklist li strong { color: var(--ink); }
.checklist li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 21px; height: 21px; border-radius: 50%; background: rgba(198,161,91,.16); color: var(--gold-dark); font-size: 0.72rem; font-weight: 800; display: grid; place-items: center; }

/* Media frames with graceful fallback */
.media-frame, .headshot-frame { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.media-frame { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 100%); }
.media-frame img, .headshot-frame img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
.media-fallback, .headshot-fallback { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; text-align: center; padding: 20px; }
.media-fallback span { font-family: var(--serif); font-size: 1.5rem; color: rgba(255,255,255,0.75); }
.headshot-frame { aspect-ratio: 4/5; max-width: 420px; margin: 0 auto; background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%); }
.headshot-fallback span { font-family: var(--serif); font-size: 4rem; font-weight: 700; color: rgba(255,255,255,0.9); }

/* Sell — merged marketing section */
.sell-main { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 54px; align-items: center; }
.sell-copy .sell-intro { color: var(--slate); margin-bottom: 22px; }
.sell-copy .checklist { margin: 6px 0 28px; }
.checklist li.free strong { color: var(--gold-dark); }
.checklist li.free::before { background: var(--gold); color: #24170a; }

.sell-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sell-collage figure { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--navy); aspect-ratio: 4/3; }
.sell-collage img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.sell-collage figure:hover img { transform: scale(1.05); }

.floorplan-strip {
  display: flex; align-items: center; gap: 28px;
  margin-top: 44px; padding: 20px 26px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.fp-thumb { flex: 0 0 120px; height: 140px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.fp-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.fp-text { flex: 1; }
.fp-text h3 { font-size: 1.2rem; margin-bottom: 6px; }
.fp-text p { color: var(--slate); font-size: 0.95rem; }
.floorplan-strip .btn { flex-shrink: 0; }

/* Neighborhoods */
.neighborhoods { background: var(--cloud); }
.hood-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hood-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 170px; padding: 24px; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(160deg, var(--navy-700), var(--navy-900)); color: #fff;
  border: 1px solid rgba(255,255,255,0.06); transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.hood-card::after { content: "→"; position: absolute; top: 22px; right: 24px; color: var(--gold); font-size: 1.2rem; transition: transform .25s var(--ease); }
.hood-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.hood-card:hover::after { transform: translate(4px, -2px); }
.hood-name { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; }
.hood-meta { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); margin-top: 4px; }
.hood-note { text-align: center; margin-top: 34px; color: var(--slate); }
.hood-allcta { text-align: center; margin-top: 18px; }
.hood-note a { color: var(--gold-dark); font-weight: 600; }

/* Testimonials */
.testimonials { background: var(--navy); }
.testimonials .eyebrow { color: var(--gold); }
.testimonials h2 { color: #fff; }
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.quote-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius); padding: 30px 26px; color: rgba(255,255,255,0.9); }
.quote-card .stars { color: var(--gold); letter-spacing: 2px; margin-bottom: 14px; }
.quote-card p { font-size: 1.02rem; line-height: 1.65; }
.quote-card cite { display: block; margin-top: 18px; font-style: normal; font-weight: 600; color: var(--gold); font-size: 0.9rem; }

/* Buy */
.buy { background: var(--cream); }
.buy-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.buy-inner h2 { margin: 10px 0 14px; }
.buy-inner p { color: var(--slate); max-width: 560px; }
.buy-inner .btn { flex-shrink: 0; }

/* Final CTA */
.final-cta { padding: 56px 0; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-900) 100%); color: #fff; }
.final-cta h2 { color: #fff; margin: 6px 0 12px; }
.final-cta .section-lede { color: rgba(255,255,255,0.82); margin-bottom: 30px; }
.final-cta .eyebrow { color: var(--gold); }
.contact-line { margin-top: 24px; color: rgba(255,255,255,0.8); }
.contact-line a { color: var(--gold); font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,0.72); padding: 56px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer-name { display: block; font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: #fff; }
.footer-broker { display: block; font-family: var(--serif); font-size: 1.65rem; font-weight: 700; color: #fff; margin-top: 3px; } /* larger than agent name (compliance) */
.footer-lic { font-size: 0.82rem; margin-top: 12px; color: rgba(255,255,255,0.6); max-width: 340px; }
.footer-nav { display: flex; flex-direction: column; gap: 10px; }
.footer-nav a:hover, .footer-contact a:hover { color: var(--gold); }
.footer-contact { display: flex; flex-direction: column; gap: 10px; }
.footer-eho { margin-top: 8px; font-size: 0.82rem; color: rgba(255,255,255,0.6); }
.eho-badge { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid rgba(255,255,255,0.5); border-radius: 4px; font-size: 0.9rem; }
.footer-legal { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 40px; padding-top: 22px; }
.footer-legal p { font-size: 0.8rem; color: rgba(255,255,255,0.5); }
.footer-legal a { color: rgba(255,255,255,0.7); text-decoration: underline; }
.footer-legal a:hover { color: var(--gold); }

/* ---------- Areas We Serve page ---------- */
.areas-hero { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-900) 100%); color: #fff; padding: 72px 0; }
.areas-hero .eyebrow { color: var(--gold); }
.areas-hero h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 16px; }
.areas-lede { color: rgba(255,255,255,0.85); font-size: 1.12rem; max-width: 760px; margin-bottom: 26px; }
.areas-lede strong { color: #fff; }
.crumbs { font-size: 0.82rem; color: rgba(255,255,255,0.6); margin-bottom: 22px; letter-spacing: 0.02em; }
.crumbs a { color: rgba(255,255,255,0.8); }
.crumbs a:hover { color: var(--gold); }
.crumbs span { margin: 0 6px; }

.area-block { padding: 72px 0; }   /* matches the global .section scale */
.area-block.alt { background: var(--cloud); }
.area-county { font-size: 1.7rem; padding-bottom: 14px; margin-bottom: 24px; border-bottom: 2px solid var(--gold); display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.area-county span { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dark); }
.area-region { font-size: 1.05rem; color: var(--slate); font-family: var(--sans); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin: 28px 0 14px; }
.area-region:first-of-type { margin-top: 4px; }
.area-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.area-pill {
  display: inline-block; padding: 9px 16px; background: #fff; border: 1px solid var(--line);
  border-radius: 999px; font-size: 0.92rem; color: var(--ink); font-weight: 500;
  transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.area-block.alt .area-pill { background: #fff; }
.area-pill:hover { border-color: var(--gold); color: var(--navy); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* ---------- City / area landing pages ---------- */
.presale-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.presale-card { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); }
.presale-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.presale-card p { color: var(--slate); font-size: 0.96rem; }
.presale-card strong { color: var(--ink); }

.area-about { background: var(--cream); }
.about-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.about-cols p { color: var(--slate); margin-bottom: 16px; }
.about-cols strong { color: var(--ink); }
.about-cols .checklist { margin-top: 6px; }

.faq-section { background: var(--cloud); }
.faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; }
.faq-q { font-size: 1.08rem; margin-bottom: 8px; color: var(--navy); }
.faq-a { color: var(--slate); }
.faq-a a { color: var(--gold-dark); font-weight: 600; }

/* Legal pages (privacy / terms) */
.legal { max-width: 780px; margin: 0 auto; }
.legal h2 { font-size: 1.4rem; margin: 34px 0 12px; }
.legal h3 { font-size: 1.1rem; margin: 22px 0 8px; color: var(--ink); font-family: var(--sans); font-weight: 700; }
.legal p, .legal li { color: var(--slate); margin-bottom: 12px; }
.legal ul { margin: 0 0 14px 22px; }
.legal a { color: var(--gold-dark); font-weight: 600; }
.legal .updated { font-size: 0.85rem; color: var(--slate); font-style: italic; margin-bottom: 24px; }

/* Home sale net proceeds calculator */
.calc-wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: start; }
/* Grid items default to min-width:auto and refuse to shrink below their
   content width, which overflowed the calculator by 49px on phones. */
.calc-wrap > * { min-width: 0; }
.calc-inputs { display: grid; gap: 16px; }
.calc-field label { display: block; font-size: 0.86rem; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.calc-field label .hint { font-weight: 400; color: var(--slate); font-size: 0.8rem; }
.calc-field label .hint a { color: var(--gold-dark); }
.calc-input { position: relative; }
.calc-input input { width: 100%; padding: 12px 15px 12px 26px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--cloud); font-size: 1rem; font-family: var(--sans); color: var(--ink); }
.calc-input input:focus { outline: none; border-color: var(--gold); background: #fff; box-shadow: 0 0 0 3px rgba(198,161,91,.18); }
.calc-input input::-webkit-outer-spin-button, .calc-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-input input[type=number] { -moz-appearance: textfield; }
.calc-input .prefix { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--slate); pointer-events: none; }
.calc-input.pct input { padding-left: 15px; padding-right: 32px; }
.calc-input.pct .suffix { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--slate); pointer-events: none; }

.calc-result { position: sticky; top: 96px; background: var(--navy); color: #fff; border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--shadow); }
.calc-result h3 { color: #fff; font-size: 1.2rem; margin-bottom: 16px; }
.calc-line { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 0.95rem; color: rgba(255,255,255,0.82); }
.calc-line span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-net { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 2px solid var(--gold); }
.calc-net .label { font-weight: 600; }
.calc-net .amount { font-family: var(--serif); font-size: 1.9rem; font-weight: 700; color: var(--gold); white-space: nowrap; }
.calc-disclaimer { font-size: 0.76rem; color: rgba(255,255,255,0.55); margin-top: 16px; line-height: 1.5; }
.calc-cta { margin-top: 18px; }
.sell-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Compact city-page mini net calculator */
.minicalc { background: var(--cloud); }
.minicalc-card { max-width: 620px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 26px 28px; }
.minicalc-card h3 { font-size: 1.2rem; margin-bottom: 16px; text-align: center; }
.minicalc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mc-field.full { grid-column: 1 / -1; }
.mc-field label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 5px; color: var(--ink); }
.minicalc-result { margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--gold); }
.mc-line { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9rem; color: var(--slate); padding: 5px 0; }
.mc-net { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 8px; }
.mc-net .label { font-weight: 600; color: var(--ink); }
.mc-net .amount { font-family: var(--serif); font-size: 1.8rem; font-weight: 700; color: var(--navy); white-space: nowrap; }
.mc-note { font-size: 0.76rem; color: var(--slate); margin-top: 14px; line-height: 1.5; text-align: center; }
.mc-note a { color: var(--gold-dark); font-weight: 600; }

/* Nearby areas (city pages) */
.nearby { background: var(--cream); }
.nearby .area-pills { justify-content: center; }
.nearby .hood-note { margin-top: 22px; }

/* ---------- Reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; padding: 64px 24px 72px; }
  .valuation-card { max-width: 520px; min-height: 870px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .county-panels { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; gap: 36px; }
  .two-col .two-col-media { order: -1; }
  .hood-grid { grid-template-columns: repeat(2, 1fr); }
  .quote-grid { grid-template-columns: 1fr; }
  .presale-grid, .about-cols { grid-template-columns: 1fr; gap: 20px; }
  .calc-wrap { grid-template-columns: 1fr; gap: 28px; }
  .calc-result { position: static; }
  .sell-main { grid-template-columns: 1fr; gap: 34px; }
  .floorplan-strip { flex-direction: column; text-align: center; align-items: stretch; }
  .fp-thumb { align-self: center; }
  .buy-inner { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .nav, .header-phone { display: none; }
  .nav-toggle { display: flex; }
  .nav.open {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 78px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); padding: 8px 24px 16px;
  }
  .nav.open a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav.open a::after { display: none; }
  .section { padding: 48px 0; }
  .hood-grid { grid-template-columns: 1fr; }
  .faq-list { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 440px) {
  .trust-grid, .stat-cards { grid-template-columns: 1fr; }
  body { font-size: 16px; }
}

/* ===== Property-type breakdown (by-type sale prices + 5+ unit cap rate) ===== */
.ptype .ptype-table{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.ptype-row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"label value" "sub value";align-items:center;gap:2px 18px;background:var(--cream,#f7f4ef);border:1px solid rgba(14,42,71,.08);border-radius:12px;padding:16px 22px}
.ptype-label{grid-area:label;font-weight:600;color:var(--navy,#0e2a47)}
.ptype-value{grid-area:value;font-family:'Playfair Display',Georgia,serif;font-size:1.5rem;line-height:1;color:var(--gold,#c6a15b);font-weight:700;white-space:nowrap}
.ptype-sub{grid-area:sub;font-size:.85rem;color:#6b7280}
@media(max-width:480px){.ptype-value{font-size:1.25rem}.ptype-row{padding:14px 16px}}
/* Multi-family note on homepage sell section */
.sell-mf-note{margin-top:14px;font-size:.95rem;color:#374151}
.sell-mf-note a{color:var(--navy,#0e2a47);font-weight:600;text-decoration:underline}

/* ===== Affiliations / compliance logo strip (light band above footer) ===== */
.compliance-bar { background:#fff; border-top:1px solid #ececec; padding:26px 0; }
.compliance-row { display:flex; align-items:center; justify-content:center; gap:46px; flex-wrap:wrap; }
.compliance-bar .cb-logo { display:block; width:auto; }
.compliance-bar .cb-brokerage { height:72px; }
.compliance-bar .cb-realtor { height:56px; }
.compliance-bar .cb-eho { height:56px; }
@media (max-width:560px){ .compliance-row{gap:28px} .compliance-bar .cb-brokerage{height:56px} .compliance-bar .cb-realtor{height:44px} .compliance-bar .cb-eho{height:44px} }

/* Brokerage mark beside the sponsoring-broker name (footer only) */
.footer-broker { display:flex; align-items:center; gap:9px; }
.footer-broker-logo { height:34px; width:auto; flex:none; }

/* Stacked white affiliation badges in the footer */
.footer-eho { display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; gap:22px; margin-top:18px; }
.footer-badge { height:46px; width:auto; display:block; }
@media (max-width:560px){ .footer-badge{ height:40px; } }

/* Divider between the MLS and EHO badges (matches the one inside the REALTOR|MLS mark) */
.footer-badge-sep { width:2px; height:40px; background:rgba(255,255,255,.45); border-radius:1px; flex:none; }
@media (max-width:560px){ .footer-badge-sep{ height:32px; } }
.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; }

/* ============ PROOF GRID (replaces placeholder testimonials) ============ */
.proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.proof-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 26px 22px; text-align: center; }
.proof-num { display: block; font-family: "Playfair Display", Georgia, serif; font-size: 2.05rem; font-weight: 700; color: var(--navy); line-height: 1.1; }
.proof-label { display: block; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; color: var(--gold-dark, #a8853f); margin: 8px 0 12px; }
.proof-card p { color: #4b5563; font-size: .93rem; margin: 0; line-height: 1.65; }

/* ============ STICKY MOBILE CTA BAR ============ */
.mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: none;
  gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.97); border-top: 1px solid #e5e7eb;
  box-shadow: 0 -4px 18px rgba(14,42,71,.10); transform: translateY(110%); transition: transform .25s ease; }
.mobile-cta.in { transform: translateY(0); }
.mobile-cta a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 13px 10px; border-radius: 10px; font-weight: 600; font-size: .95rem; text-decoration: none; }
.mobile-cta .mc-call { background: var(--navy); color: #fff; }
.mobile-cta .mc-value { background: var(--gold); color: #24170a; }
@media (max-width: 820px) {
  .mobile-cta { display: flex; }
  body.has-mobile-cta { padding-bottom: 74px; }
}
@media print { .mobile-cta { display: none !important; } }

/* ==================================================================
   ACCESSIBILITY (WCAG 2.1 AA)
   Gold #c6a15b is 2.43:1 on white and #ab8642 is 3.38:1 — both fail as
   TEXT on light backgrounds. --gold-text is 4.94:1 on white and is used
   wherever gold type sits on a light surface. The brighter gold stays
   for type on navy (6:1) and for fills, borders, and buttons.
   ================================================================== */
:root { --gold-text: #8c6b2c; }

.eyebrow { color: var(--gold-text); }
.buy .eyebrow-light { color: var(--gold-text); }
.proof-label { color: var(--gold-text); }
.area-county span { color: var(--gold-text); }
.faq-a a, .hood-note a, .legal a, .guide-crosslink a { color: var(--gold-text); }
.checklist li.free strong { color: var(--gold-text); }
.checklist li::before { color: var(--gold-text); }

/* Gold type on dark surfaces keeps the brighter gold */
.hero .eyebrow, .final-cta .eyebrow, .testimonials .eyebrow,
.hero .eyebrow-light, .final-cta .eyebrow-light { color: var(--gold); }

/* Visible keyboard focus — every interactive element had outline:none */
:focus-visible { outline: 3px solid var(--gold-text); outline-offset: 2px; border-radius: 3px; }
.site-header :focus-visible, .site-footer :focus-visible, .hero :focus-visible,
.final-cta :focus-visible, .testimonials :focus-visible, .mobile-cta :focus-visible,
.buy :focus-visible { outline-color: var(--gold); }

/* Skip to content — first tab stop, visible only when focused */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--navy);
  color: #fff; padding: 13px 20px; border-radius: 0 0 8px 0; font-weight: 600;
  text-decoration: none; font-size: .95rem; }
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============ SELLER GUIDES — hub cards (restored) ============ */
.guides-hero { padding-bottom: 0; }
.guides-intro { max-width: 68ch; color: #4b5563; font-size: 1.05rem; }
.guides-list-section { padding-top: 34px; }
.guides-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.guide-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e5e7eb;
  border-radius: 14px; padding: 26px 24px; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.guide-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 14px 30px rgba(14,42,71,.10); }
.guide-tag { display: inline-block; align-self: flex-start; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 600; color: var(--navy); background: #f1ede4;
  padding: 5px 11px; border-radius: 999px; margin-bottom: 14px; }
.guide-card h2 { font-size: 1.2rem; line-height: 1.3; margin: 0 0 10px; color: var(--navy); }
.guide-card p { color: #4b5563; font-size: .95rem; margin: 0 0 18px; flex: 1; }
.guide-more { font-weight: 600; color: var(--navy); font-size: .93rem; }
a.guide-card .guide-more::after { content: " \2192"; }
.guides-cta { text-align: center; margin-top: 46px; padding-top: 40px; border-top: 1px solid #e5e7eb; }
.guides-cta h2 { margin-bottom: 8px; }
.guides-cta p { color: #4b5563; margin-bottom: 20px; }
.guides-cta .btn { margin: 0 6px 10px; }
@media (max-width: 700px) { .guide-card { padding: 22px 20px; } }

/* ============ CITY-PAGE CROSS-LINK TO GUIDES ============
   Sits under the mini net-proceeds calculator. Reads as a distinct
   next step, not a trailing sentence. */
.guide-crosslink { margin: 30px auto 0; max-width: 620px; background: #faf8f4;
  border: 1px solid #eae4d8; border-left: 4px solid var(--gold); border-radius: 0 10px 10px 0;
  padding: 16px 20px; font-size: .95rem; line-height: 1.6; color: #4b5563; }
.guide-crosslink a { color: var(--navy); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
.guide-crosslink a:hover { color: var(--gold-text); }
.guide-crosslink a::after { content: " \2192"; text-decoration: none; display: inline-block; }
@media (max-width: 700px) { .guide-crosslink { margin-top: 24px; padding: 14px 16px; } }

/* ---- Header: collapse to hamburger earlier ----
   The nav gained "Homes for Sale" and "Guides", so between ~720px and 900px
   the links + phone + CTA button overflowed the viewport. Collapse sooner. */
@media (max-width: 900px) {
  .nav, .header-phone { display: none; }
  .nav-toggle { display: flex; }
  .nav.open {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 78px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm);
    padding: 8px 24px 16px;
  }
  .nav.open a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav.open a::after { display: none; }
}

/* Skip link: clip instead of far-off positioning so it can never
   contribute to horizontal scroll. */
.skip-link { left: 0; clip-path: inset(50%); }
.skip-link:focus { clip-path: none; }

/* ==================================================================
   GUIDE ARTICLES — long-form typography
   The global `* { margin: 0 }` reset strips paragraph spacing, so every
   vertical rhythm value below must be set explicitly.
   ================================================================== */
.guide-article { max-width: 780px; }
.guide-article h1 { margin-bottom: 14px; line-height: 1.18; }
.guide-article h2 { font-size: 1.55rem; line-height: 1.28; margin: 2.4rem 0 .7rem; }
.guide-article h3 { font-size: 1.15rem; line-height: 1.35; margin: 1.7rem 0 .5rem; }
.guide-article p { color: #374151; line-height: 1.75; margin-bottom: 1.15rem; }
.guide-article > p:last-of-type { margin-bottom: 0; }
.guide-article ul, .guide-article ol { margin: 0 0 1.35rem; }
.guide-article li { color: #374151; line-height: 1.7; }
.guide-article ul.checklist { display: grid; gap: 12px; }
.guide-article .crumbs { margin-bottom: 20px; }
.guide-article .eyebrow { margin-bottom: 10px; }
.guide-meta { font-size: .88rem; color: #6b7280; margin: 4px 0 28px; }

.guide-answer { background: #f7f5f0; border-left: 4px solid var(--gold); padding: 22px 24px; margin: 26px 0 32px; }
.guide-answer p { margin: 0; font-size: 1.06rem; line-height: 1.7; }

.table-scroll { overflow-x: auto; margin: 26px 0 30px; -webkit-overflow-scrolling: touch; }
.cost-table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 440px; }
.cost-table th, .cost-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid #e5e7eb; line-height: 1.55; }
.cost-table th { color: var(--navy); font-weight: 600; }
.cost-table td:last-child, .cost-table th:last-child { text-align: right; white-space: nowrap; }
.cost-table tr.total td { border-top: 2px solid var(--navy); border-bottom: none; font-weight: 600; color: var(--navy); }

.guide-callout { border: 1px solid #e5e7eb; border-radius: 12px; padding: 24px 26px; margin: 32px 0; background: #fcfbf9; }
.guide-callout h3 { margin: 0 0 8px; }
.guide-callout p { margin-bottom: 16px; }
.guide-callout .btn { margin-bottom: 0; }

.guide-source { font-size: .84rem; color: #6b7280; margin-top: 36px; padding-top: 20px; border-top: 1px solid #e5e7eb; line-height: 1.7; }

@media (max-width: 700px) {
  .guide-article h2 { font-size: 1.35rem; margin-top: 2rem; }
  .guide-article h3 { font-size: 1.08rem; }
  .guide-answer { padding: 18px 18px; margin: 22px 0 26px; }
  .guide-callout { padding: 20px 18px; }
}

/* ---- Header on small screens ----
   At <=560px the brand + gold CTA + hamburger needed ~423px and overflowed
   a 375px viewport. The sticky .mobile-cta bar already provides Call and
   Get My Home Value, so the header CTA is redundant here. */
@media (max-width: 560px) {
  .header-cta { display: none; }
}
/* Brand lockup on small screens: scale BOTH lines together so the sponsoring
   broker's name stays equal in size to the licensee's (68 Ill. Adm. Code
   1450.715(b) test A) while fitting on one line each. */
@media (max-width: 560px) {
  .brand-name { font-size: 1.2rem; }
}

/* ---- Collapse trailing margins inside sections ----
   A last element's margin-bottom stacks on top of the section's padding,
   producing uneven dead space (e.g. .stat-source added 34px, making some
   section gaps 178px while others were 144px). */
.section > .container > *:last-child { margin-bottom: 0; }

/* ==================================================================
   SELLER CHECKLIST  (/guides/illinois-home-seller-checklist)
   Screen + print. Print follows the property-type filter and the
   compact/full toggle.
   ================================================================== */
.cl-printhead { display: none; }

.cl-controls { display: grid; gap: 14px; background: #faf8f4; border: 1px solid #eae4d8;
  border-radius: 12px; padding: 18px 20px; margin: 26px 0 18px; }
.cl-ctrl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.cl-ctrl-label { font-size: .82rem; font-weight: 600; color: var(--navy); letter-spacing: .01em; }
.cl-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-seg button { font: inherit; font-size: .87rem; padding: 8px 14px; border-radius: 999px;
  border: 1px solid #e0d9cb; background: #fff; color: #4b5563; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s; }
.cl-seg button:hover { border-color: var(--gold); }
.cl-seg button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.cl-seg-sm button { font-size: .82rem; padding: 6px 12px; }

.cl-progress { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; }
.cl-count { font-size: .85rem; font-weight: 600; color: var(--navy);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-bar { flex: 1; height: 7px; background: #efeae0; border-radius: 99px; overflow: hidden; }
.cl-bar span { display: block; height: 100%; width: 0; background: var(--gold);
  border-radius: 99px; transition: width .3s ease; }
.cl-reset { font: inherit; font-size: .78rem; padding: 5px 12px; border-radius: 99px;
  border: 1px solid #e0d9cb; background: none; color: #6b7280; cursor: pointer; }
.cl-reset:hover { border-color: var(--gold); color: var(--gold-text); }

.cl-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  background: #fff; border: 1px solid #eae4d8; border-left: 4px solid var(--gold);
  border-radius: 0 10px 10px 0; padding: 16px 20px; margin: 0 0 30px; }
.cl-nudge p { margin: 0; flex: 1; min-width: 240px; font-size: .95rem; }

.cl-phase { margin: 0 0 34px; }
.cl-phase-head { display: flex; gap: 16px; align-items: baseline;
  border-bottom: 1px solid #eae4d8; padding-bottom: 10px; margin-bottom: 4px; }
.cl-num { font-family: "Playfair Display", Georgia, serif; font-size: 1.55rem; font-weight: 700;
  color: var(--gold); line-height: 1; min-width: 1.5em; font-variant-numeric: tabular-nums; }
.cl-phase-head h2 { font-size: 1.24rem; line-height: 1.3; color: var(--navy); margin: 0 0 2px; }
.cl-when { font-size: .8rem; color: #6b7280; margin: 0; }

.guide-article .cl-list, .cl-list { list-style: none; margin: 0; padding: 0; }
.cl-list li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0;
  border-bottom: 1px solid #f4f0e8; }
.cl-list li:last-child { border-bottom: none; }
.cl-list input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none;
  width: 19px; height: 19px; margin-top: 3px; border: 1.5px solid #d8d0c0; border-radius: 5px;
  background: #fff; cursor: pointer; position: relative; transition: background .15s, border-color .15s; }
.cl-list input[type="checkbox"]:hover { border-color: var(--gold); }
.cl-list input[type="checkbox"]:checked { background: var(--gold); border-color: var(--gold); }
.cl-list input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg); }
.cl-list label { flex: 1; cursor: pointer; font-size: .97rem; line-height: 1.6; color: #374151; }
.cl-list label b { color: var(--navy); font-weight: 600; }
.cl-list input:checked + label { color: #9aa3ad; text-decoration: line-through;
  text-decoration-color: #ddd6c8; }
.cl-list .note { display: block; font-size: .87rem; color: #6b7280; margin-top: 3px; line-height: 1.55; }

/* [hidden] must beat the explicit display on list items / phase sections,
   otherwise the property-type filter silently does nothing. */
.cl-list li[hidden], .cl-phase[hidden], [data-types][hidden] { display: none !important; }

/* Simplified checklist: one-line items with an inline hint, no note blocks. */
.cl-hint { color: #6b7280; font-weight: 400; }
.cl-list input:checked + label .cl-hint { color: inherit; }
.cl-list label.cl-alert b, .cl-list label.cl-alert { color: var(--navy); font-weight: 600; }
.cl-print-hint { font-size: .82rem; color: #6b7280; }

/* Sub-line under a checklist item (extra context, not its own checkbox) */
.cl-sub { display: block; font-size: .87rem; color: #6b7280; margin-top: 4px;
  padding-left: 12px; border-left: 2px solid #eae4d8; line-height: 1.5; }
.cl-list input:checked + label .cl-sub { color: inherit; border-left-color: #f0ece3; }

/* Nested sub-items (Word-style indent under a parent checklist item).
   The parent li is flex, so the sub-list wraps to its own full-width row and
   indents past the checkbox (19px box + 12px gap = 31px). */
.cl-list li.cl-has-sub { flex-wrap: wrap; }
.cl-has-sub > .cl-sub { flex-basis: 100%; margin-left: 31px; }
/* NB: margin shorthand must carry the 31px indent — a later `margin: 8px 0 2px`
   silently reset margin-left and flattened the nesting. */
.guide-article .cl-nested, .cl-nested { flex-basis: 100%; list-style: none; padding: 0; margin: 8px 0 2px 31px; }
.cl-nested li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: none; }
.cl-nested label { font-size: .93rem; line-height: 1.55; color: #4b5563; }
.cl-nested input[type="checkbox"] { width: 17px; height: 17px; margin-top: 2px; }

/* Town-specific pre-sale block injected in place of the generic items */
.cl-presale-town > label { font-weight: 600; color: var(--navy); }
.cl-presale-more { margin-top: 8px; }
.cl-presale-more a { color: var(--navy); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; }

.il-tag { display: inline-block; font-size: .64rem; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; color: var(--gold-text); background: #f3ecdd; border-radius: 4px;
  padding: 2px 6px; margin-right: 6px; vertical-align: 1px; }

.cl-warn { background: #fdf8ef; border: 1px solid #ecdfc4; border-radius: 10px;
  padding: 14px 18px; margin: 0 0 8px; }
.cl-warn p { margin: 0; font-size: .92rem; color: #6b5426; }

.cl-town-wrap { background: var(--navy); color: #fff; border-radius: 16px;
  padding: 34px 32px; margin: 40px 0 0; }
.cl-town-wrap h2 { color: #fff; font-size: 1.42rem; margin: 0 0 10px; }
.cl-town-wrap > p { color: rgba(255,255,255,.82); font-size: .97rem; margin: 0 0 22px; max-width: 62ch; }
.cl-field { margin-bottom: 14px; }
.cl-field label { display: block; font-size: .84rem; font-weight: 600; color: #fff; margin-bottom: 5px; }
.cl-field .optional { font-weight: 400; color: rgba(255,255,255,.62); }
.cl-field input { width: 100%; padding: 12px 14px; border-radius: 9px; border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.07); color: #fff; font: inherit; font-size: .97rem; }
.cl-field input::placeholder { color: rgba(255,255,255,.45); }
.cl-field input:focus { outline: 2px solid var(--gold); outline-offset: 1px;
  background: rgba(255,255,255,.12); }
.cl-town-wrap .btn { margin-top: 6px; }
.cl-status { font-size: .9rem; color: var(--gold); margin: 12px 0 0; min-height: 1.2em; }
.cl-fineprint { font-size: .8rem; color: rgba(255,255,255,.6); margin: 12px 0 0; }
.cl-town-wrap form > *:last-child { margin-bottom: 0; }

.cl-town { background: #faf8f4; border: 1px solid #eae4d8; border-left: 4px solid var(--gold);
  border-radius: 0 12px 12px 0; padding: 26px 28px; margin: 34px 0 0; }
.cl-town h3 { font-size: 1.24rem; color: var(--navy); margin: 0 0 10px; }
.cl-town-rate { font-size: .95rem; margin: 0 0 14px; }
.cl-town-phone, .cl-town-more { font-size: .92rem; margin: 14px 0 0; }
.cl-town-more a, .cl-town-phone a { color: var(--navy); font-weight: 600; }

@media (max-width: 700px) {
  .cl-town-wrap { padding: 26px 20px; border-radius: 12px; }
  .cl-town { padding: 20px 18px; }
  .cl-phase-head { gap: 12px; }
  .cl-num { font-size: 1.3rem; }
}

/* ---------------- PRINT ---------------- */
@media print {
  .no-print, .site-header, .site-footer, .final-cta, .skip-link,
  .mobile-cta, .crumbs, .cookie-banner { display: none !important; }
  .cl-printhead { display: block !important; border-bottom: 2px solid #0e2a47;
    padding-bottom: 8px; margin-bottom: 16px; }
  .cl-printhead strong { display: block; font-family: "Playfair Display", Georgia, serif;
    font-size: 15pt; color: #0e2a47; }
  .cl-printhead span { font-size: 8.5pt; color: #444; }

  body { background: #fff !important; font-size: 10pt; }
  .section { padding: 0 !important; }
  .guide-article { max-width: none; }
  h1 { font-size: 17pt; margin-bottom: 4pt; }
  .guide-meta { font-size: 9pt; }
  .guide-answer { background: none; border-left: 2pt solid #c6a15b; padding: 6pt 10pt;
    margin: 8pt 0; font-size: 9pt; }

  .cl-phase { break-inside: avoid; page-break-inside: avoid; margin-bottom: 12pt; }
  .cl-phase-head { break-after: avoid; page-break-after: avoid; padding-bottom: 4pt; margin-bottom: 2pt; }
  .cl-phase-head h2 { font-size: 12pt; }
  .cl-num { font-size: 13pt; }
  .cl-when { font-size: 8pt; }
  .cl-list li { padding: 4pt 0; break-inside: avoid; page-break-inside: avoid; }
  .cl-list label { font-size: 9.5pt; line-height: 1.35; }
  .cl-list .note { font-size: 8pt; line-height: 1.3; }
  .cl-sub { font-size: 8pt; line-height: 1.3; margin-top: 2pt; }
  .cl-nested { margin-left: 18pt; margin-top: 3pt; }
  .cl-nested li { padding: 2.5pt 0; }
  .cl-nested label { font-size: 9pt; }
  .cl-nested input[type="checkbox"] { width: 10pt; height: 10pt; }

  /* checkboxes must actually print — browsers strip backgrounds by default */
  .cl-list input[type="checkbox"] { -webkit-print-color-adjust: exact; print-color-adjust: exact;
    border: 1pt solid #666 !important; width: 11pt; height: 11pt; margin-top: 1pt; }
  .cl-list input[type="checkbox"]:checked { background: #c6a15b !important; border-color: #c6a15b !important; }
  .cl-list input:checked + label { color: #888; }
  .il-tag { -webkit-print-color-adjust: exact; print-color-adjust: exact;
    background: #f0e8d6 !important; color: #6f5320 !important; font-size: 6.5pt; }

  /* compact mode: drop the explanatory notes to fit ~2 pages */
  .guide-answer { display: none !important; }

  .cl-warn { border: 1pt solid #ccc; background: none !important; padding: 5pt 8pt; }
  .cl-warn p { font-size: 8.5pt; }
  .guide-source { font-size: 7.5pt; margin-top: 12pt; padding-top: 6pt; }
  a { text-decoration: none !important; color: inherit !important; }
  a[href]::after { content: "" !important; }
  @page { margin: 14mm 13mm; }
}

/* ==================================================================
   TRANSFER TAX INDEX  (/guides/chicagoland-transfer-tax-index)
   ================================================================== */
.tti-wide { max-width: 980px; }

.tti-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin: 26px 0 30px; }
.tti-stat { background: #faf8f4; border: 1px solid #eae4d8; border-radius: 12px;
  padding: 18px 16px; text-align: center; }
.tti-num { display: block; font-family: var(--serif); font-size: 1.7rem; font-weight: 700;
  color: var(--navy); line-height: 1.1; }
.tti-lbl { display: block; font-size: .82rem; color: #6b7280; margin-top: 5px; line-height: 1.4; }

.tti-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  background: #faf8f4; border: 1px solid #eae4d8; border-radius: 12px;
  padding: 14px 16px; margin: 28px 0 18px; }
.tti-search { flex: 1; min-width: 220px; }
.tti-search input { width: 100%; padding: 10px 14px; border: 1px solid #e0d9cb;
  border-radius: 9px; font: inherit; font-size: .95rem; background: #fff; color: var(--ink); }
.tti-search input:focus { outline: 2px solid var(--gold-text); outline-offset: 1px; }

.tti-table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 620px; }
.tti-table th, .tti-table td { text-align: left; padding: 10px 12px;
  border-bottom: 1px solid #f0ece3; }
.tti-table thead th { border-bottom: 2px solid #eae4d8; padding: 0; }
.tti-sort { width: 100%; text-align: left; font: inherit; font-size: .82rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--navy); background: none;
  border: 0; padding: 12px; cursor: pointer; }
.tti-sort:hover { color: var(--gold-text); }
.tti-sort[aria-sort="ascending"]::after { content: " \2191"; }
.tti-sort[aria-sort="descending"]::after { content: " \2193"; }
.tti-table thead th:not(:has(.tti-sort)) { padding: 12px; font-size: .82rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--navy); }
.tti-table tbody th { font-weight: 600; }
.tti-table tbody th a { color: var(--navy); text-decoration: none;
  border-bottom: 1px solid transparent; }
.tti-table tbody th a:hover { border-bottom-color: var(--gold); }
.tti-table tbody tr:hover { background: #faf8f4; }
.tti-rate { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600;
  color: var(--navy); }
/* Secondary line under a heading or a dollar figure. Used in the table head and
   in the seller/buyer cells, so it must reset the parent's weight and casing. */
.tti-sub { display: block; margin-top: 3px; font-size: .74rem; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: #7a7367; }
.tti-flag { color: var(--gold-text); font-weight: 700; cursor: help; }
.tti-price { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.tti-price > span:first-child { font-size: .82rem; font-weight: 600; color: var(--navy); }
.tti-price .calc-input input { width: 122px; padding: 9px 12px 9px 24px; border: 1px solid #e0d9cb;
  border-radius: 9px; font: inherit; font-size: .95rem; background: #fff; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.tti-price .calc-input input:focus { outline: 2px solid var(--gold-text); outline-offset: 1px; }
.tti-price .calc-input input::-webkit-outer-spin-button,
.tti-price .calc-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tti-price .calc-input input[type=number] { -moz-appearance: textfield; }
.tti-basis { font-size: .84rem; line-height: 1.55; color: #6b7280; margin: 0 0 16px; }
.tti-basis strong { color: var(--navy); }
/* Screen shows the sale price in the control above; print hides those controls,
   so the figures need their basis stated somewhere that survives printing. */
.tti-print-basis { display: none; }
.tti-yes { font-weight: 600; color: var(--gold-text); }
.tti-no { color: #b9b3a6; }
.tti-empty { text-align: center; color: #6b7280; padding: 24px 0; }

@media (max-width: 700px) {
  .tti-controls { padding: 12px; }
  .tti-num { font-size: 1.4rem; }
  .tti-table { font-size: .88rem; }
  .tti-table th, .tti-table td { padding: 8px 9px; }
}
@media print {
  .tti-controls, .tti-stats { display: none !important; }
  .tti-print-basis { display: block; font-size: 8.5pt; margin: 0 0 6pt; }
  .tti-table { min-width: 0; font-size: 8.5pt; }
  .tti-table th, .tti-table td { padding: 3pt 5pt; }
}

/* ==================================================================
   MORTGAGE CALCULATOR  (/mortgage-calculator)
   ================================================================== */
.mtg-intro { padding-bottom: 0; }
.mtg-lede { max-width: 68ch; color: #4b5563; font-size: 1.05rem; margin-top: 10px; }
.mtg-section { padding-top: 34px; }

.mtg-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 32px; align-items: start; }
.mtg-grid > * { min-width: 0; }

.mtg-inputs { display: grid; gap: 16px; }
.mtg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mtg-row > * { min-width: 0; }
/* paired inputs (down payment shown as % and $ at once) */
.mtg-pair { display: flex; align-items: center; gap: 8px; }
.mtg-pair .calc-input { flex: 1; min-width: 0; }
.mtg-pair .calc-input.pct { flex: 0 1 92px; }
.mtg-pair-sep { color: #cfc7b7; font-size: 1.05rem; flex: none; user-select: none; }
.mtg-dp { display: flex; gap: 8px; align-items: center; }
.mtg-dp .calc-input { flex: 1; }
/* implied property-tax rate feedback + exemption warning */
.mtg-tax-note { font-size: .85rem; color: #6b7280; margin: -4px 0 0; line-height: 1.55; }
.mtg-tax-note.mtg-tax-warn { color: #6b5426; background: #fdf8ef; border: 1px solid #ecdfc4;
  border-radius: 9px; padding: 11px 13px; margin-top: 2px; }
.mtg-tax-note.mtg-tax-warn strong { color: #8a5a1e; }
.mtg-hoa-note { font-size: .85rem; color: #6b7280; margin: 0; line-height: 1.55; }
.calc-input .suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--slate); pointer-events: none; }
.mtg-inputs select { width: 100%; padding: 12px 15px; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); background: var(--cloud); font-size: 1rem;
  font-family: var(--sans); color: var(--ink); }

.mtg-result { background: var(--navy); color: #fff; border-radius: 16px; padding: 28px 26px;
  position: sticky; top: 96px; }
.mtg-total-label { font-size: .82rem; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.7); margin: 0 0 6px; font-weight: 600; }
.mtg-total { font-family: var(--serif); font-size: 2.7rem; font-weight: 700; color: var(--gold);
  line-height: 1; margin: 0 0 20px; font-variant-numeric: tabular-nums; }
.mtg-lines, .mtg-meta { list-style: none; margin: 0; padding: 0; }
.mtg-lines li, .mtg-meta li { display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.13); font-size: .95rem; }
.mtg-lines li:last-child, .mtg-meta li:last-child { border-bottom: none; }
.mtg-lines span, .mtg-meta span { color: rgba(255,255,255,.78); }
.mtg-lines b, .mtg-meta b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mtg-meta { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.22);
  font-size: .88rem; }
.mtg-pmi-note { font-size: .85rem; color: var(--gold); background: rgba(198,161,91,.12);
  border-radius: 8px; padding: 11px 13px; margin: 14px 0 0; line-height: 1.55; }

/* the point-of-difference panel */
.mtg-compare { background: #faf8f4; border: 1px solid #eae4d8; border-radius: 16px;
  padding: 30px 28px; margin-top: 36px; }
.mtg-compare h2 { font-size: 1.35rem; margin: 0 0 18px; color: var(--navy); }
.mtg-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mtg-cmp { border-radius: 12px; padding: 20px 22px; background: #fff; border: 1px solid #eae4d8; }
.mtg-cmp-lbl { display: block; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; color: #6b7280; margin-bottom: 8px; }
.mtg-cmp-num { display: block; font-family: var(--serif); font-size: 2rem; font-weight: 700;
  line-height: 1; font-variant-numeric: tabular-nums; }
.mtg-cmp-sub { display: block; font-size: .84rem; color: #6b7280; margin-top: 7px; }
.mtg-cmp-wrong .mtg-cmp-num { color: #9aa3ad; text-decoration: line-through;
  text-decoration-thickness: 2px; text-decoration-color: #d9d3c6; }
.mtg-cmp-right { border-color: var(--gold); }
.mtg-cmp-right .mtg-cmp-num { color: var(--navy); }
.mtg-gap { margin: 18px 0 0; font-size: 1.02rem; color: #374151; }
.mtg-gap strong { color: #9a3d20; }

.mtg-faq { padding-top: 0; }
.mtg-cta-sub { font-size: .93rem; color: rgba(255,255,255,.8); margin-top: -6px; }
.mtg-cta-sub a { color: var(--gold); font-weight: 600; }

@media (max-width: 960px) {
  .mtg-grid { grid-template-columns: 1fr; gap: 26px; }
  .mtg-result { position: static; }
}
@media (max-width: 620px) {
  .mtg-row { grid-template-columns: 1fr; }
  .mtg-compare-grid { grid-template-columns: 1fr; }
  .mtg-total { font-size: 2.2rem; }
  .mtg-compare { padding: 22px 18px; }
  .mtg-cmp { padding: 16px 18px; }
}

/* Contextual link to the buyer calculator inside the homepage Buy section */
.buy-calc-link { font-size: .95rem; margin-top: 12px; }
/* .buy sits on cream, so this must use --gold-text (4.94:1), not --gold (2.29:1). */
.buy-calc-link a { color: var(--gold-text); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; }
.buy-calc-link a:hover { color: var(--navy); }