/* Brickyard Home Buyers — site styles
   Layout concept: an established St. Louis firm. Classic serif headlines, quiet limestone and white,
   midnight for authority, red brick reserved for actions. One light theme by design. */
:root {
  color-scheme: light;
  --navy: #13263D;          /* midnight: headings, authority */
  --navy-deep: #0D1B2C;
  --navy-2: #2A4A6E;
  --brick: #A9442A;         /* actions only */
  --brick-dark: #8C3721;
  --brick-bright: #D9694A;
  --brick-mark: #A9442A;
  --brass: #B8955C;
  --sand: #F6F2EC;          /* limestone */
  --sand-2: #EFE9E0;
  --ink: #1B2430;
  --muted: #55606C;
  --line: #E3DDD3;
  --line-2: #D3CCC1;
  --paper: #FFFFFF;
  --on-navy: #C9D3DE;
  --fill-bg: #FFF1B8;
  --fill-ink: #4A3B00;
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display: var(--serif);
  --body: var(--sans);
  --r: 8px;
  --wrap: 1200px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: var(--navy-2); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brick); }
:focus-visible { outline: 2px solid var(--brick); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3 { font-family: var(--serif); color: var(--navy); line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; margin: 0; font-weight: 600; }
h1 { font-size: clamp(2.3rem, 4.3vw, 3.5rem); line-height: 1.08; }
h2 { font-size: clamp(1.75rem, 3vw, 2.45rem); }
h3 { font-size: 1.22rem; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.narrow { max-width: 820px; }
.center { text-align: center; margin-top: 2.5rem; }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--paper); padding: 10px 16px; z-index: 100; }
.skip:focus { left: 16px; top: 16px; }
.ico { width: 1.1em; height: 1.1em; flex: none; }
.ic { width: 24px; height: 24px; flex: none; }

/* placeholders to replace before launch */
.fill { background: var(--fill-bg); color: var(--fill-ink); padding: 0 .3em; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.photo { background: var(--sand-2); border: 1px solid var(--line); border-radius: var(--r); display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--muted); font-size: .9rem; font-style: italic; aspect-ratio: 4 / 3; max-width: 100%; }
.photo .ic-cam { width: 30px; height: 30px; color: #9C9387; }
.photo.tall { aspect-ratio: 4 / 4.6; }
.photo.wide { aspect-ratio: 16 / 9; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: .7em 1.35em; border-radius: 6px; font-family: var(--sans); font-weight: 600; font-size: 1rem; letter-spacing: .005em; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s; line-height: 1.2; }
.btn-brick { background: var(--brick); color: #fff; }
.btn-brick:hover { background: var(--brick-dark); color: #fff; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-deep); color: #fff; }
.btn-outline { border-color: var(--line-2); color: var(--navy); background: var(--paper); }
.btn-outline:hover { border-color: var(--navy); color: var(--navy); }
.btn-ghost { color: var(--navy); background: transparent; padding-inline: .5em; font-weight: 600; }
.btn-ghost-dark { color: #fff; border-color: rgba(255,255,255,.35); }
.btn-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn-light:hover { border-color: #fff; color: #fff; }
.btn-lg { min-height: 54px; font-size: 1.05rem; padding-inline: 1.6em; }
.btn-block { width: 100%; min-height: 54px; font-size: 1.05rem; }

/* top bar + header */
.topbar { background: var(--navy); color: var(--on-navy); font-size: .85rem; letter-spacing: .01em; }
.topbar a { color: #fff; font-weight: 600; text-decoration: none; }
.topbar-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; padding-block: 8px; }
.site-header { background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; backdrop-filter: saturate(1.4) blur(6px); }
.header-in { display: flex; align-items: center; gap: 28px; padding-block: 14px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); flex: none; }
.logo .mark { width: 42px; height: 42px; color: var(--navy); }
.wordmark { display: flex; flex-direction: column; line-height: 1; }
.wm1 { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.01em; }
.wm2 { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--muted); margin-top: 5px; }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a { text-decoration: none; color: var(--ink); font-weight: 500; font-size: .95rem; padding-block: 8px; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--brick); }
.header-cta { display: flex; gap: 8px; align-items: center; }
.header-cta .btn { min-height: 44px; font-size: .95rem; }
.mnav { display: none; margin-left: auto; position: relative; }
.mnav summary { list-style: none; width: 46px; height: 46px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; border-radius: 6px; border: 1px solid var(--line); }
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary span { width: 20px; height: 2px; background: var(--navy); }
.mnav-panel { position: absolute; right: 0; top: 54px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 18px 40px rgba(19,38,61,.14); padding: 10px; display: flex; flex-direction: column; min-width: 240px; }
.mnav-panel a { padding: 12px; text-decoration: none; color: var(--ink); font-weight: 500; border-radius: 6px; }
.mnav-panel a.btn { color: #fff; margin-top: 6px; }
@media (max-width: 1100px) { .nav { display: none; } .header-cta .btn-ghost { display: none; } .header-cta { margin-left: auto; } .mnav { display: block; margin-left: 0; } }
@media (max-width: 560px) { .header-cta { display: none; } .mnav { margin-left: auto; } .wm1 { font-size: 1.3rem; } .topbar-in span:first-child { display: none; } }

/* hero */
.hero { background: linear-gradient(var(--paper), var(--sand)); color: var(--ink); position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-in { display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: flex-start; padding-block: 64px 24px; position: relative; z-index: 2; }
.hero-copy { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 22px; padding-top: 8px; }
.eyebrow { font-family: var(--sans); font-weight: 600; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brick); display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.eyebrow-brick { color: var(--brick); }
.hero-lead { font-size: 1.2rem; color: var(--muted); max-width: 34em; line-height: 1.6; }
.hero-lead a { color: var(--navy-2); }
.checks { list-style: none; margin: 6px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 28px; font-weight: 500; color: var(--navy); }
.checks li { display: flex; gap: 10px; align-items: flex-start; }
.checks .ico { color: var(--brick); margin-top: .25em; }
.skyline { display: block; width: 100%; height: clamp(90px, 12vw, 170px); margin-top: -10px; position: relative; z-index: 1; }
.sk-back path { stroke: #C3CCD6; stroke-width: 1.1; }
.sk-front path { stroke: #CDB2A3; stroke-width: 1.2; }
.sk-arch { stroke: var(--brick); stroke-width: 1.8; opacity: .55; }
.sk-arch.thin { stroke-width: 1; }
.sk-ground { stroke: var(--line-2); stroke-width: 1.2; }
.hero-sub { background: var(--sand); }
.hero-sub .hero-in { padding-block: 20px 72px; }
.hero-short .wrap { padding-block: 24px 64px; display: flex; flex-direction: column; gap: 18px; }
.hero-short .wrap.narrow { max-width: 860px; }
.hero-short h1 { max-width: 20em; }
.crumbs { padding-top: 22px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .85rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-2); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brick); }
.hero-short .crumbs { padding-top: 0; }
.byline { color: var(--muted); font-size: .95rem; }

/* lead form */
.lead-card { flex: 1 1 380px; max-width: 470px; background: var(--paper); color: var(--ink); border-radius: 10px; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(19,38,61,.06), 0 24px 60px rgba(19,38,61,.14); position: relative; z-index: 3; overflow: hidden; display: flex; flex-direction: column; }
.lead-head { background: var(--navy); color: #fff; padding: 24px 28px 22px; display: flex; flex-direction: column; gap: 6px; border-bottom: 3px solid var(--brick); }
.lead-kicker { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); font-weight: 600; }
.lead-title { font-size: 1.55rem; color: #fff; }
.lead-sub { color: var(--on-navy); font-size: .95rem; line-height: 1.5; }
.lead-body { padding: 22px 28px 26px; display: flex; flex-direction: column; gap: 8px; }
.lead-card-full { max-width: none; padding: 32px; gap: 8px; box-shadow: 0 1px 2px rgba(19,38,61,.05); }
.lead-card-full .lead-title { color: var(--navy); margin-bottom: 8px; }
.lead-card label { font-weight: 600; font-size: .88rem; color: var(--navy); margin-top: 6px; }
.lead-card input[type=text], .lead-card input[type=tel], .lead-card input[type=email], .lead-card select, .lead-card textarea { width: 100%; min-height: 50px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 6px; font: inherit; font-size: 1rem; background: #fff; color: var(--ink); }
.lead-card textarea { min-height: 110px; resize: vertical; }
.lead-card input:focus, .lead-card select:focus, .lead-card textarea:focus { border-color: var(--navy); outline: 3px solid rgba(19,38,61,.12); }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 14px; }
.two > div { display: flex; flex-direction: column; gap: 8px; }
.opt { font-weight: 400; color: var(--muted); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; font-size: .78rem !important; color: var(--muted) !important; line-height: 1.45; margin: 10px 0 8px !important; }
.consent input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--brick); }
.lead-foot { text-align: center; font-size: .88rem; color: var(--muted); margin-top: 6px; }
.lead-foot a { font-weight: 600; color: var(--navy); }

/* credentials row */
.trust-wrap { background: var(--paper); border-bottom: 1px solid var(--line); }
.trust { list-style: none; margin: 0; padding: 22px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px 28px; }
.trust li { display: flex; gap: 12px; align-items: center; line-height: 1.3; }
.ic-tr { color: var(--brass); width: 28px; height: 28px; }
.trust strong { display: block; font-family: var(--serif); font-size: 1.05rem; color: var(--navy); font-weight: 600; }
.trust li > span > span { color: var(--muted); font-size: .85rem; }

/* key facts */
.facts-band { background: var(--navy); color: #fff; }
.kf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kf li { padding: 34px 28px; display: flex; flex-direction: column; gap: 6px; border-left: 1px solid rgba(255,255,255,.12); }
.kf li:first-child { border-left: 0; padding-left: 0; }
.kf-n { font-family: var(--serif); font-size: clamp(1.7rem, 2.6vw, 2.2rem); font-weight: 600; color: #fff; line-height: 1.1; }
.kf-l { color: var(--on-navy); font-size: .92rem; }
@media (max-width: 700px) { .kf li { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0; } .kf li:first-child { border-top: 0; } }

/* sections */
.sec { padding-block: clamp(64px, 8vw, 104px); }
.sec-tint { background: var(--sand); }
.sec-navy { background: var(--navy); color: #fff; }
.sec-navy h2, .sec-navy h3 { color: #fff; }
.sec-head { max-width: 720px; margin-bottom: 44px; display: flex; flex-direction: column; gap: 14px; }
.sec-head p:not(.eyebrow) { color: var(--muted); font-size: 1.1rem; }
.sec-head-light p:not(.eyebrow) { color: var(--on-navy); }
.sec-head-light .eyebrow { color: var(--brass); }
.split { display: flex; flex-wrap: wrap; gap: 48px 72px; align-items: center; }
.split > * { flex: 1 1 400px; min-width: 0; }
.split-rev { flex-direction: row-reverse; }
.prose-col { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.prose-col > p:not(.eyebrow):not(.sig) { color: var(--muted); font-size: 1.08rem; }
.sig { font-family: var(--serif); font-style: italic; color: var(--navy) !important; font-size: 1.15rem !important; }
.video { width: 100%; }
.name-h { margin-top: 10px; }

/* situations */
.sits { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--paper); }
.sits-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.sits-4 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.sit { display: flex; flex-direction: column; gap: 10px; padding: 30px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); background: var(--paper); transition: background .15s; }
.sit:hover { background: #FCFAF7; color: var(--ink); }
.sit:hover h3 { color: var(--brick); }
.sit-ic { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--brick); margin-bottom: 4px; }
.sit p { color: var(--muted); font-size: .95rem; flex: 1; }
.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--navy); font-size: .9rem; }
.sit:hover .more { color: var(--brick); }

/* steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; border-top: 1px solid rgba(255,255,255,.16); }
.steps li { display: flex; flex-direction: column; gap: 12px; padding: 32px 32px 8px 0; }
.steps li + li { padding-left: 32px; border-left: 1px solid rgba(255,255,255,.16); }
.sec:not(.sec-navy) .steps { border-top-color: var(--line); }
.sec:not(.sec-navy) .steps li + li { border-left-color: var(--line); }
.sec:not(.sec-navy) .steps p { color: var(--muted); }
.steps p { color: var(--on-navy); }
.step-n { font-family: var(--serif); font-weight: 600; font-size: 2.4rem; line-height: 1; color: var(--brass); }
.sec:not(.sec-navy) .step-n { color: var(--brick); }
@media (max-width: 820px) { .steps li, .steps li + li { padding: 26px 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.16); } .sec:not(.sec-navy) .steps li + li { border-top-color: var(--line); } .steps li:first-child { border-top: 0; } }
.link-light { color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.link-light:hover { color: var(--brass); }

/* testimonials */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px; align-items: stretch; }
.quote { margin: 0; padding: 32px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
.sec-tint .quote { background: var(--paper); }
.quote blockquote { margin: 0; flex: 1; }
.quote blockquote p { font-family: var(--serif); font-size: 1.12rem; line-height: 1.55; color: var(--ink); }
.quote-big { background: var(--navy) !important; border-color: var(--navy); }
.quote-big blockquote p { color: #fff; font-size: 1.2rem; }
.quote-big figcaption { color: var(--on-navy) !important; }
.quote-big figcaption strong { color: #fff !important; }
.stars { color: var(--brass); letter-spacing: 3px; font-size: 1rem; }
.quote figcaption { display: flex; gap: 12px; align-items: center; font-size: .9rem; color: var(--muted); line-height: 1.4; padding-top: 16px; border-top: 1px solid var(--line); }
.quote-big figcaption { border-top-color: rgba(255,255,255,.15); }
.quote figcaption strong { color: var(--navy); }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--sand-2); color: var(--navy); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 600; flex: none; }
.quote-big .avatar { background: rgba(255,255,255,.12); color: #fff; }

/* promises / options */
.promises, .options { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.promises li, .options li { padding: 28px 28px 28px 0; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line); }
.promises p, .options p { color: var(--muted); font-size: .98rem; }
.options li:last-child h3 { color: var(--brick); }
.note { margin-top: 28px; font-size: .9rem; color: var(--muted); font-style: italic; }

/* deals */
.deals { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px; }
.deal { border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; background: var(--paper); }
.deal .photo { border-radius: 0; border-width: 0 0 1px; aspect-ratio: 16 / 10; }
.deal-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 6px; }
.deal-body p { color: var(--muted); font-size: .95rem; }

/* areas */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { padding: 9px 16px; border-radius: 6px; background: var(--paper); border: 1px solid var(--line-2); color: var(--navy); font-weight: 600; text-decoration: none; font-size: .92rem; }
.chip:hover { border-color: var(--navy); color: var(--navy); }
.towns { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0 28px; }
.towns li { padding: 11px 0; border-bottom: 1px solid var(--line-2); font-weight: 500; color: var(--navy); font-size: .98rem; }

/* FAQ */
.faqs { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: var(--navy); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-size: 1.5rem; font-weight: 300; color: var(--brick); }
.faq[open] summary::after { content: "−"; }
.faq p { padding: 0 48px 24px 0; color: var(--muted); }

/* answer box */
.answer { background: var(--sand); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 30px; margin-bottom: 56px; display: flex; flex-direction: column; gap: 10px; }
.answer-h { font-family: var(--sans); font-size: .75rem; text-transform: uppercase; letter-spacing: .16em; color: var(--brick); font-weight: 600; }
.answer p { font-family: var(--serif); font-size: 1.2rem; line-height: 1.55; color: var(--ink); }
.prose { display: flex; flex-direction: column; gap: 18px; }
.prose > p, .prose li { color: #333C47; }
.prose h2 { margin-top: 22px; font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
.prose h2:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 8px; }
.prose .lead { font-family: var(--serif); font-size: 1.25rem; color: var(--ink); }
.helps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line-2); width: 100%; }
.helps li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.helps .ico { color: var(--brick); margin-top: .3em; }

/* timeline */
.timeline { list-style: none; margin: 0; padding: 0 0 0 28px; border-left: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 26px; }
.timeline li { display: flex; flex-direction: column; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -34px; top: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 2px solid var(--brick); }
.timeline strong { font-family: var(--serif); color: var(--navy); font-size: 1.15rem; }
.timeline span { color: var(--muted); }

/* compare table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.compare { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .97rem; }
.compare th, .compare td { text-align: left; padding: 16px 20px; vertical-align: top; }
.compare thead th { background: var(--sand); font-family: var(--serif); font-size: 1.05rem; color: var(--navy); font-weight: 600; }
.compare thead th.us { background: var(--navy); color: #fff; }
.compare tbody tr { border-top: 1px solid var(--line); }
.compare tbody th { font-weight: 600; color: var(--navy); }
.compare td { color: var(--muted); }
.compare td.us { background: #F3F6F9; font-weight: 600; color: var(--navy); }
.compare-3 { min-width: 760px; }
.compare-3 tbody th { width: 16%; }

/* people */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 32px; }
.person { display: flex; flex-direction: column; gap: 8px; }
.person h3 { font-size: 1.45rem; margin-top: 10px; }
.role { font-weight: 600; color: var(--brick); font-size: .75rem; text-transform: uppercase; letter-spacing: .14em; }
.person p:last-child { color: var(--muted); font-size: .98rem; }
.facts { list-style: none; padding: 0 !important; border-top: 1px solid var(--line-2); }
.facts li { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.facts strong { color: var(--navy); font-weight: 600; }
@media (max-width: 520px) { .facts li { grid-template-columns: 1fr; gap: 2px; } }

/* reviews */
.review-summary { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; padding: 26px 30px; border-radius: var(--r); background: var(--sand); border: 1px solid var(--line); margin-bottom: 32px; }
.review-summary > div { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; color: var(--muted); }
.review-summary .big { font-family: var(--serif); font-weight: 600; font-size: 2.4rem; color: var(--navy); }
.embed-slot { margin-top: 32px; padding: 44px; border: 1px dashed var(--line-2); border-radius: var(--r); text-align: center; }

/* contact */
.contact-grid { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.contact-grid > form { flex: 2 1 480px; }
.contact-side { flex: 1 1 300px; display: flex; flex-direction: column; gap: 12px; }
.contact-side h2 { font-size: 1.6rem; margin-top: 10px; }
.contact-side h3 { margin-top: 14px; }
.phone-big a { font-family: var(--serif); font-weight: 600; font-size: 2rem; color: var(--navy); text-decoration: none; }
.mini-steps { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 8px; color: var(--muted); }
.mini-steps.big { font-size: 1.1rem; color: var(--ink); margin-block: 8px; }
.thanks { display: flex; flex-direction: column; gap: 22px; }
.hero-lead.dark { color: var(--muted); }
.thanks-links { display: flex; flex-wrap: wrap; gap: 12px; }

/* The Brickyard Promise */
.promise-sec { background: var(--navy); color: #fff; position: relative; }
.promise { display: flex; flex-wrap: wrap; gap: 40px 72px; align-items: flex-start; }
.promise-head { flex: 1 1 320px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 120px; }
.promise-head h2 { color: #fff; font-size: clamp(2rem, 3.4vw, 2.7rem); }
.promise-head .eyebrow { color: var(--brass); }
.promise-head p:last-child { color: var(--on-navy); font-size: 1.08rem; }
.seal { width: 104px; height: 104px; color: var(--brass); --brick-bright: #D9694A; }
.seal svg { width: 100%; height: 100%; }
.promise-list { flex: 2 1 480px; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.14); }
.promise-list li { display: flex; gap: 20px; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.promise-list h3 { color: #fff; font-size: 1.25rem; margin-bottom: 4px; }
.promise-list p { color: var(--on-navy); }
.pr-n { flex: none; font-family: var(--serif); font-weight: 600; font-size: 1.3rem; color: var(--brass); width: 28px; padding-top: 1px; }
@media (max-width: 900px) { .promise-head { position: static; } }

/* CTA band */
.cta-band { background: var(--navy-deep); color: #fff; border-top: 3px solid var(--brick); }
.cta-in { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: center; justify-content: space-between; padding-block: 64px; }
.cta-in > div:first-child { flex: 1 1 420px; display: flex; flex-direction: column; gap: 10px; }
.cta-in h2 { color: #fff; }
.cta-in p { font-size: 1.1rem; color: var(--on-navy); }
.cta-btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* footer */
.site-footer { background: var(--navy-deep); color: var(--on-navy); font-size: .93rem; padding-bottom: 80px; border-top: 1px solid rgba(255,255,255,.08); --brick-mark: var(--brick-bright); }
.site-footer a { color: var(--on-navy); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 40px; padding-block: 64px 40px; }
.foot-brand { display: flex; flex-direction: column; gap: 14px; }
.foot-brand .logo, .site-footer .logo .mark { color: #fff; }
.foot-brand .wm2 { color: var(--on-navy); }
.foot-tag { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: #fff; }
.foot-h { font-family: var(--sans); font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; color: var(--brass); margin-bottom: 14px; font-weight: 600; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.foot-legal { border-top: 1px solid rgba(255,255,255,.1); padding-block: 26px; font-size: .8rem; display: flex; flex-direction: column; gap: 8px; color: #9AA8B8; }
.foot-legal a { text-decoration: underline; }

/* mobile action bar */
.mbar { display: none; }
@media (max-width: 760px) {
  .mbar { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--navy-deep); box-shadow: 0 -8px 24px rgba(0,0,0,.18); }
  .mbar .btn { min-height: 50px; }
  .hero-in { padding-top: 36px; }
  .lead-head, .lead-body { padding-inline: 22px; }
  .sit { padding: 24px 22px; }
}

.sit-other { background: var(--sand); }
.sit-other:hover { background: var(--sand-2); }
.sit-other .sit-ic { background: var(--paper); }
.hero-sub h1, .hero-short h1 { font-size: clamp(2rem, 3.5vw, 2.85rem); }

/* Fanlight logo (outlined vector, inherits the header's ink color) */
.logo .logo-svg { height: 56px; width: auto; display: block; color: inherit; }
.site-footer .logo .logo-svg { height: 58px; }
@media (max-width: 560px) { .logo .logo-svg { height: 40px; } }

/* ---- real people ---- */
.faces { display: inline-flex; flex: none; }
.faces .face { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--face-ring, #fff); margin-left: -10px; background: #ddd; }
.faces .face:first-child { margin-left: 0; }
.faces-sm .face { width: 34px; height: 34px; }
.lead-team { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: .9rem; font-weight: 600; color: var(--muted); }
.sig { display: flex; align-items: center; gap: 12px; }
.realphoto { margin: 0; border-radius: 14px; overflow: hidden; background: var(--sand-2); position: relative; }
.realphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.realphoto.tall { aspect-ratio: 4 / 5; }
.realphoto:not(.tall) { aspect-ratio: 4 / 3; }
.realphoto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; font-size: .88rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.62)); }
.team-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-self: center; }
.team-mini figure { margin: 0; }
.team-mini img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; }
.team-mini figcaption { margin-top: 10px; line-height: 1.3; }
.team-mini figcaption strong { display: block; font-size: 1.05rem; }
.team-mini figcaption span { font-size: .84rem; color: var(--muted); }
.team-contact { margin-bottom: 22px; }
.person-photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; margin-bottom: 16px; }
.byline { display: flex; align-items: center; gap: 12px; }
.byline-face { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.legal-text h2 { font-size: 1.35rem; margin-top: 1.8em; }
@media (max-width: 560px) { .team-mini { gap: 8px; } .team-mini figcaption span { display: none; } }
.area-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; }
.area-cols h3 { margin: 0 0 8px; } .area-cols h3 a { color: inherit; text-decoration: none; }
.area-list { color: var(--muted); font-size: .95rem; line-height: 1.75; margin: 0; }
.foot-h2 { margin-top: 26px; }
.foot-cities { columns: 2; column-gap: 18px; }
.towns a { color: inherit; text-decoration: none; } .towns a:hover { color: var(--brick); }
@media (max-width: 760px) { .area-cols { grid-template-columns: minmax(0, 1fr); } }

/* ---- step illustrations (How It Works) ---- */
.steps-art li { display: flex; flex-direction: column; }
.step-art { height: 210px; margin: 0 0 24px; border-radius: 14px; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(120% 90% at 70% 20%, #FFFFFF 0%, #EEF3F9 55%, #E1E9F3 100%); border: 1px solid #DCE4EE; box-shadow: 0 14px 34px rgba(20,37,58,.08); }
.art { width: 100%; height: 100%; overflow: visible; }
.art .ln { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.art .wave { fill: none; stroke: #C9A46A; stroke-width: 2.4; stroke-linecap: round; }
.art .glow { opacity: .95; }
@media (prefers-reduced-motion: no-preference) {
  .js-art .art .ln { stroke-dashoffset: 1; }
  .js-art .art .pop, .js-art .art .key, .js-art .art .glow, .js-art .art .sun, .js-art .art .pickfill { opacity: 0; }
  .js-art .art .pop, .js-art .art .rise { transform-box: fill-box; transform-origin: 50% 100%; }
  .js-art .art .rise { transform: scaleY(0); }
  .js-art .art .door { transform-box: fill-box; transform-origin: left center; }
  .art.in .pop { animation: pop .55s cubic-bezier(.2,.9,.3,1.25) forwards; }
  .art.in .ln { animation: draw .7s ease forwards; }
  /* 1: the call */
  .art-call.in .p1 { animation-delay: .05s; } .art-call.in .p2 { animation-delay: .9s; } .art-call.in .p3 { animation-delay: 2s; }
  .art-call.in .t1 { animation-delay: 1.3s; } .art-call.in .t2 { animation-delay: 1.6s; } .art-call.in .t3 { animation-delay: 2.4s; } .art-call.in .t4 { animation-delay: 2.7s; }
  .art-call.in .wave { animation: pulse 2.2s ease-in-out .5s infinite; } .art-call.in .w2 { animation-delay: .9s; }
  /* 2: the visit */
  .art-visit.in .sun { animation: fade .8s forwards; }
  .art-visit.in .rise { animation: rise 1.1s cubic-bezier(.3,.8,.3,1) .2s forwards; }
  .art-visit.in .wins { animation-delay: 1.2s; } .art-visit.in .doorway { animation-delay: 1.45s; } .art-visit.in .stoop { animation-delay: 1.3s; }
  .art-visit.in .key { animation: drop .6s cubic-bezier(.2,.9,.3,1.3) 1.8s forwards; }
  .art-visit.in .door { animation: open 1.2s ease 2.4s forwards; }
  .art-visit.in .glow { animation: fade .9s 2.6s forwards, breathe 4s ease-in-out 3.6s infinite; }
  /* 3: the offer */
  .art-offer.in .p1 { animation-delay: .05s; } .art-offer.in .amt { animation-delay: .7s; } .art-offer.in .p2 { animation-delay: 1.1s; }
  .art-offer.in .sig { animation: draw 1.4s ease-in-out 1.4s forwards; }
  .art-offer.in .pick { animation: draw .8s ease 2.8s forwards; } .art-offer.in .pickfill { animation: fade .4s 3.4s forwards; } .art-offer.in .chk { animation-delay: 3.5s; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes rise { to { transform: scaleY(1); } }
@keyframes pulse { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes drop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes open { to { transform: scaleX(.16); } }
@keyframes breathe { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }

/* ---- hand-inked area map ---- */
.area-hub .map-card { width: 100%; max-width: 860px; margin: 0 auto; }
.map-card { border-radius: 16px; background: #FFFFFF; border: 1px solid #DCE4EE; padding: 18px; box-shadow: 0 18px 44px rgba(20,37,58,.08); }
.stl-map { width: 100%; height: auto; display: block; overflow: visible; }
.stl-map .wash { opacity: .55; transition: opacity .3s ease; }
.stl-map .edge { fill: none; stroke: #22324A; stroke-width: 1.1; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.stl-map .edge2 { stroke-width: .6; opacity: .35; }
.stl-map .cty:hover .wash, .stl-map .cty:focus-visible .wash { opacity: .95; }
.stl-map .cty:hover .lab, .stl-map .cty:focus-visible .lab { fill: #A3412A; }
.stl-map .lab { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 19px; fill: #1E2C42; text-anchor: middle; pointer-events: none; transition: fill .3s; }
.stl-map .lab-sm { font-size: 11px; font-style: italic; letter-spacing: .04em; }
.stl-map .lab2 { font-family: var(--sans); font-size: 8.5px; font-weight: 500; fill: #56606E; text-anchor: middle; letter-spacing: .26em; text-transform: uppercase; pointer-events: none; }
.stl-map .river { fill: none; stroke: #4F7FB0; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.stl-map .river2 { stroke-width: .8; opacity: .45; }
.stl-map .r-mer { stroke-width: 1.1; }
.stl-map .rlab { font-family: var(--serif); font-style: italic; font-size: 11px; fill: #3E6E9E; letter-spacing: .03em; }
.stl-map .arch path { fill: none; stroke: #8A6A35; stroke-width: 1.3; stroke-linecap: round; }
.stl-map .compass circle, .stl-map .compass path { fill: none; stroke: #22324A; stroke-width: .9; }
.stl-map .compass .needle { fill: #A3412A; stroke: none; }
.stl-map .compass .nlab { font-family: var(--serif); font-style: italic; font-size: 12px; fill: #22324A; text-anchor: middle; }
.stl-map .ring { fill: #FFFFFF; stroke: #22324A; stroke-width: .9; }
.stl-map .dot { fill: #A3412A; }
.stl-map .pulse { fill: none; stroke: #A3412A; stroke-width: 1; opacity: 0; }
.stl-map .plab { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 12.5px; fill: #1E2C42; paint-order: stroke; stroke: rgba(255,255,255,.9); stroke-width: 3px; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .js-map .stl-map .edge, .js-map .stl-map .river { stroke-dashoffset: 1; }
  .js-map .stl-map .wash, .js-map .stl-map .lab, .js-map .stl-map .lab2, .js-map .stl-map .pin, .js-map .stl-map .rlab, .js-map .stl-map .arch, .js-map .stl-map .compass { opacity: 0; }
  .stl-map.in .edge { animation: mapDraw 1.6s ease calc(var(--i) * .18s) forwards; }
  .stl-map.in .edge2 { animation-delay: calc(.3s + var(--i) * .18s); }
  .stl-map.in .wash { opacity: .55; transition: opacity 1.2s ease calc(.9s + var(--i) * .15s); }
  .stl-map.in .cty:hover .wash, .stl-map.in .cty:focus-visible .wash { opacity: .95; transition: opacity .3s ease 0s; }
  .stl-map.in .lab, .stl-map.in .lab2 { animation: mapFade .8s calc(1.3s + var(--i) * .12s) forwards; }
  .stl-map.in .river { animation: mapDraw 2.2s ease .6s forwards; }
  .stl-map.in .rlab, .stl-map.in .compass { animation: mapFade .8s 2.2s forwards; }
  .stl-map.in .arch { animation: mapFade .8s 2s forwards; }
  .stl-map.in .pin { animation: mapPin .5s cubic-bezier(.2,.9,.3,1.4) calc(2s + var(--j) * .1s) forwards; }
  .stl-map.in .pulse { animation: mapPulse 3s ease-out calc(3s + var(--j) * .35s) infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes mapDraw { to { stroke-dashoffset: 0; } }
@keyframes mapWash { to { opacity: .55; } }
@keyframes mapFade { to { opacity: 1; } }
@keyframes mapPin { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes mapPulse { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(3.6); } }

/* ---- round 7 layouts ---- */
.kf { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kf-star { color: var(--gold, #D9B47E); font-size: .8em; vertical-align: .08em; }
@media (max-width: 1000px) { .kf { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kf li { border-left: 0; padding-left: 0; } }
.why { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.why li { display: flex; gap: 14px; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 22px 22px 20px; box-shadow: 0 10px 28px rgba(20,37,58,.05); }
.why li > .ico { color: var(--accent, var(--brick)); flex: none; width: 22px; height: 22px; margin-top: 2px; }
.why h3 { margin: 0 0 6px; } .why p { margin: 0; color: var(--muted); font-size: .97rem; }
.promises-8 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.sits-2x3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.area-hub { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.compare-2 { min-width: 560px; } .compare-2 tbody th { width: 20%; } .compare-2 thead th, .compare-2 td { width: 40%; }
.person-mail { margin-top: 10px; font-size: .92rem; } .person-mail a { color: var(--navy); }
@media (max-width: 900px) { .why, .sits-2x3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .promises-8 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { .why, .sits-2x3 { grid-template-columns: minmax(0, 1fr); } }

/* ---- round 8: three highlights, footer cities band ---- */
.kf.kf-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kf-3 li { flex-direction: row; flex-wrap: wrap; align-items: center; align-content: flex-start; column-gap: 16px; padding-block: 30px; }
.kf-3 .kf-ic { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(217,180,126,.45); display: inline-flex; align-items: center; justify-content: center; color: var(--gold, #D9B47E); flex: none; }
.kf-3 .kf-ic .ic { width: 22px; height: 22px; }
.kf-3 .kf-l { flex-basis: 100%; padding-left: 62px; margin-top: 2px; }
@media (max-width: 760px) { .kf.kf-3 { grid-template-columns: minmax(0, 1fr); } .kf-3 li { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.12); } .kf-3 li:first-child { border-top: 0; } }
.foot-cities-band { padding-top: 34px; padding-bottom: 34px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.08); }
.foot-cities-band .foot-h { margin-bottom: 14px; }
.foot-cities-band .foot-cities { list-style: none; margin: 0; padding: 0; columns: auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 24px; }
.foot-cities-band li { margin: 0; }
@media (max-width: 900px) { .foot-cities-band .foot-cities { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .foot-cities-band .foot-cities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- address suggestions ---- */
.addr-wrap { position: relative; }
.addr-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; margin: 0; padding: 6px; list-style: none; background: #FFFFFF; border: 1px solid #D5DDE7; border-radius: 10px; box-shadow: 0 18px 40px rgba(20,37,58,.18); max-height: 280px; overflow: auto; }
.addr-list[hidden] { display: none; }
.addr-list li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 7px; cursor: pointer; color: #17202C; font-size: .95rem; line-height: 1.35; }
.addr-list li svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: #A3412A; }
.addr-list li small { display: block; color: #6A7380; font-size: .82rem; }
.addr-list li[aria-selected="true"], .addr-list li:hover { background: #EEF3F9; }
.addr-list .addr-brand { padding: 6px 12px 2px; font-size: .7rem; color: #8A93A0; text-align: right; cursor: default; }
.addr-list .addr-brand:hover { background: transparent; }
.field-error { color: #B3261E; font-size: .82rem; margin: 4px 0 0; }
.hero .field-error { color: #FFB4A8; }
input[aria-invalid="true"] { outline: 2px solid #D9694A !important; }

/* ---- immersive base ---- */
/* Shared base for the immersive themes: full-bleed animated hero, dark glass header,
   frosted offer panel. Each theme sets its own tokens, type and canvas. */
:root {
  --hero-bg: #0B0F17;
  --hero-bg-2: #10151F;
  --hero-text: #FFFFFF;
  --hero-dim: rgba(255,255,255,.74);
  --hero-faint: rgba(255,255,255,.14);
  --gold: #D9B26F;
  --veil: linear-gradient(90deg, rgba(6,9,14,.86) 0%, rgba(6,9,14,.55) 45%, rgba(6,9,14,.1) 100%);
}

/* header floats in the same dark world */
.topbar { background: #05070B; color: rgba(255,255,255,.7); border-bottom: 1px solid var(--hero-faint); }
.site-header { background: rgba(8,11,17,.78); border-bottom: 1px solid var(--hero-faint); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); --brick-mark: var(--brick-bright); }
.logo, .logo .mark { color: #fff; }
.wm2 { color: var(--gold); }
.nav a { color: rgba(255,255,255,.82); }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--gold); }
.btn-ghost { color: #fff; }
.mnav summary { border-color: var(--hero-faint); }
.mnav summary span { background: #fff; }

/* immersive hero */
.hero, .hero-sub { background: var(--hero-bg); color: var(--hero-text); border-bottom: 0; position: relative; overflow: hidden; isolation: isolate; }
.hero:not(.hero-sub) { min-height: clamp(660px, 92vh, 980px); display: flex; flex-direction: column; justify-content: center; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--veil); pointer-events: none; }
.hero > .wrap { position: relative; z-index: 2; width: 100%; }
.hero-sub .hero-in { padding-block: 24px 88px; }
.hero-short .wrap { padding-block: 32px 88px; }
.skyline { display: none; }
.hero h1 { color: #fff; }
.hero .eyebrow { color: var(--gold); }
.hero .eyebrow::before { background: var(--gold); }
.hero-lead { color: var(--hero-dim); }
.hero-lead a { color: #fff; }
.checks { color: #fff; border-top-color: var(--hero-faint); }
.checks .ico { color: var(--gold); }
.crumbs ol, .crumbs a, .byline { color: rgba(255,255,255,.62); }
.crumbs li + li::before { color: rgba(255,255,255,.3); }

/* frosted offer panel (hero only; the contact page keeps the solid form) */
.hero .lead-card { background: rgba(12,16,24,.52); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 40px 120px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(22px) saturate(1.25); -webkit-backdrop-filter: blur(22px) saturate(1.25); color: #fff; }
.hero .lead-head { background: transparent; border-bottom: 1px solid rgba(255,255,255,.12); }
.hero .lead-title { color: #fff; }
.hero .lead-sub { color: rgba(255,255,255,.7); }
.hero .lead-kicker { color: var(--gold); }
.hero .lead-card label { color: rgba(255,255,255,.88); }
.hero .lead-card input[type=text], .hero .lead-card input[type=tel] { background: rgba(255,255,255,.95); border-color: transparent; color: #11151C; }
.hero .consent { color: rgba(255,255,255,.62) !important; }
.hero .consent a, .hero .lead-foot a { color: #fff; }
.hero .lead-foot { color: rgba(255,255,255,.66); }
.hero .lead-card input:focus { outline: 3px solid rgba(255,255,255,.35); }

/* the dark world continues through credentials and key facts */
.trust-wrap { background: var(--hero-bg-2); border-bottom: 1px solid var(--hero-faint); }
.trust strong { color: #fff; }
.trust li > span > span { color: rgba(255,255,255,.6); }
.ic-tr { color: var(--gold); }
.trust .fill { background: rgba(255,229,138,.92); }
.facts-band { background: var(--hero-bg-2); border-bottom: 1px solid var(--hero-faint); }
.kf li { border-left-color: var(--hero-faint); }
.kf-n { color: #fff; }
.kf-l { color: rgba(255,255,255,.6); }

.sec-navy, .promise-sec { background: var(--hero-bg); }
.sec-head-light .eyebrow, .promise-head .eyebrow { color: var(--gold); }
.step-n, .pr-n { color: var(--gold); }
.seal { color: var(--gold); }
.cta-band { background: var(--hero-bg); border-top: 1px solid var(--hero-faint); }
.site-footer { background: #05070B; }
.foot-h { color: var(--gold); }

@media (max-width: 760px) {
  .hero:not(.hero-sub) { min-height: 0; }
  :root { --veil: linear-gradient(180deg, rgba(6,9,14,.82) 0%, rgba(6,9,14,.7) 60%, rgba(6,9,14,.85) 100%); }
}

/* ---- theme: signature ---- */
/* Signature: the flagship. Brand typefaces (Cormorant Garamond + Jost), golden-hour street,
   restrained motion, real faces. Built to read as an established local firm. */
:root {
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: Jost, "Segoe UI", system-ui, sans-serif;
  --display: var(--serif); --body: var(--sans);
  --hero-bg: #0F1926; --hero-bg-2: #121E2D;
  --navy: #14253A; --navy-deep: #0E1A29; --navy-2: #2E4560;
  --brick: #A3412A; --brick-dark: #8A3522; --brick-bright: #DB7550;
  --gold: #D9B47E; --brass: #B8925A;
  --sand: #F6F1E8; --sand-2: #EDE6DA; --line: #E4DCCF; --line-2: #D3C8B8;
  --ink: #17202C; --muted: #59606D;
  --veil: linear-gradient(90deg, rgba(11,16,26,.84) 0%, rgba(11,16,26,.58) 38%, rgba(11,16,26,.1) 66%, rgba(11,16,26,0) 100%);
}
body { font-size: 17px; }
h1, h2 { font-weight: 500; letter-spacing: -0.006em; }
h1 { font-size: clamp(2.8rem, 5.4vw, 4.7rem); line-height: 1.02; }
.hero-sub h1, .hero-short h1 { font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1.04; }
h2 { font-size: clamp(2.1rem, 3.7vw, 3.1rem); line-height: 1.06; }
h3 { font-family: var(--sans); font-weight: 500; letter-spacing: 0; font-size: 1.12rem; }
.eyebrow { letter-spacing: .2em; font-weight: 500; }
.lead-title { font-weight: 500; font-size: 1.85rem !important; line-height: 1.1; }
.kf-n { font-family: var(--serif); font-weight: 500; font-size: clamp(2.1rem, 3.2vw, 2.7rem); }
.step-n { font-family: var(--serif); font-weight: 500; font-size: 3.1rem; }
.pr-n { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; }
.quote blockquote p { font-family: var(--serif); font-size: 1.42rem; line-height: 1.45; }
.answer p { font-family: var(--serif); font-size: 1.45rem; line-height: 1.4; }
.faq summary { font-family: var(--serif); font-weight: 500; font-size: 1.42rem; }
.phone-big a { font-family: var(--serif); font-weight: 500; }
.btn { border-radius: 6px; letter-spacing: .01em; font-weight: 500; }
.lead-card, .hero .lead-card { border-radius: 14px; }
.hero .lead-card { background: rgba(13,19,29,.66); }
.hero .lead-team { color: rgba(255,255,255,.86); }
.hero .faces .face, .site-footer .faces .face { border-color: rgba(18,26,38,.95); }
.hero-lead { max-width: 34em; }
.checks { font-weight: 400; }
.realphoto, .team-mini img, .person-photo { box-shadow: 0 18px 50px rgba(20,24,34,.14); }
.sec-navy .team-mini figcaption span { color: rgba(255,255,255,.6); }

/* ---- color roles: navy leads (trust), brass supports (warmth, quality), brick is reserved for
   the one action we want people to take, plus the logo keystone. One red thing per screen. ---- */
:root { --accent: #7E5F35; --accent-dark: #A07C48; }
a:hover, .crumbs a:hover, .sit:hover h3, .sit:hover .more, .towns a:hover { color: var(--accent); }
:focus-visible { outline-color: var(--navy-2); }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--gold); }
.eyebrow, .eyebrow-brick, .answer-h, .role { color: var(--accent); }
.eyebrow::before { background: var(--accent); }
.checks .ico, .helps .ico, .sec:not(.sec-navy) .step-n, .options li:last-child h3 { color: var(--accent); }
.sit-ic { color: var(--navy); }
.cta-band { border-top-color: var(--gold); }
.lead-head { border-bottom-color: var(--gold); }
.consent input { accent-color: var(--navy); }
.hero .eyebrow, .sec-navy .eyebrow, .promise-head .eyebrow, .cta-band .eyebrow { color: var(--gold); }
.hero .eyebrow::before { background: var(--gold); }
.hero .checks .ico { color: var(--gold); }
.btn-brick { box-shadow: 0 8px 22px rgba(163,65,42,.28); }

/* scroll-built brick wall */
.brick-band { position: relative; background: var(--sand); padding-top: 64px; overflow: hidden; }
.brick-band canvas { display: block; width: 100%; height: clamp(220px, 26vw, 320px); }
.band-tag { text-align: center; font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--navy); margin: 0 auto 26px; padding-inline: 20px; max-width: 30ch; line-height: 1.15; }
.band-tag span { display: block; font-family: var(--sans); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
/* logo tagline in the brand brass, not the orange keystone tone */
:root { --logo-sub: #C9A46A; }
.site-header, .site-footer { --brick-mark: #C8573A; }
.brick-band { padding-top: 0; }

/* ---- crisp neutrals: white pages, cool gray-blue tints instead of cream ---- */
:root {
  --sand: #F3F6FA; --sand-2: #E8EDF4; --line: #DFE5ED; --line-2: #CBD4DF;
  --muted: #56606E; --ink: #142031; --accent: #8A6A35;
}
body { background: #FFFFFF; }
.sit:hover { background: #F7F9FC; }
.sec-tint { background: linear-gradient(180deg, #F5F8FB 0%, #EEF2F7 100%); }
.realphoto { background: #E8EDF4; }
.answer { background: #F3F6FA; border-color: #DFE5ED; }
.brick-band { background: #FFFFFF; }
.quote { background: #FFFFFF; box-shadow: 0 12px 34px rgba(20,37,58,.07); }
.sit, .faq, .quote, .person { border-color: #E1E7EF; }
.realphoto img, .team-mini img, .person-photo { filter: saturate(1.08) contrast(1.04); }

/* Reviews: every card navy so the row reads as one set against the light section */
.quote { background: var(--navy) !important; border-color: var(--navy) !important; box-shadow: 0 16px 40px rgba(20,37,58,.16); }
.quote blockquote p { color: #FFFFFF; font-size: 1.22rem; }
.quote figcaption { color: var(--on-navy) !important; border-top-color: rgba(255,255,255,.16) !important; }
.quote figcaption strong { color: #FFFFFF !important; }
.quote .avatar { background: rgba(255,255,255,.12) !important; color: #FFFFFF !important; }

/* Hero: short keyword headline + three quick numbers */
.hero h1 .hl { color: var(--gold); }
.hero-stats { list-style: none; margin: 8px 0 0; padding: 24px 0 0; border-top: 1px solid rgba(255,255,255,.16); display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; }
.hero-stats li { display: flex; flex-direction: column; gap: 4px; padding: 0 30px; border-left: 1px solid rgba(255,255,255,.2); }
.hero-stats li:first-child { padding-left: 0; border-left: 0; }
.hero-stats strong { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 500; line-height: 1; color: #FFFFFF; }
.hero-stats span { font-size: .95rem; color: rgba(255,255,255,.75); }
@media (max-width: 560px) { .hero-stats li { padding: 0 14px; } .hero-stats span { font-size: .82rem; } }