/* PNW Pinnacle Group — full site.
   Self-contained: navy/gold Sotheby's-inspired palette, no build step. */

:root {
  --navy: #002349;
  /* --honey is the bright brand gold. Only ever used ON navy/dark grounds
     (6.9:1 there) or as a non-text decorative fill/border. */
  --honey: #d3a625;
  --honey-soft: #fbf4e6;
  /* --terra is the gold for TEXT on light grounds. Darkened from the original
     #c29b40, which measured 2.46:1 and failed WCAG AA on every eyebrow and
     CTA link sitewide. This tone clears 4.5:1 while reading as the same gold. */
  --terra: #8a6a1c;
  --ink: #1d1d1f;
  --ink-2: #3c3c43;
  --mute: #6e6e73;
  --paper: #ffffff;
  --bg: #faf8f4;
  --line: #e5e1d8;
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Geist', -apple-system, 'Segoe UI', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
section { padding: 72px 0; }

/* Visible keyboard focus. The browser default outline disappears against the
   navy header, so we set our own on every interactive element. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--honey);
  outline-offset: 2px;
  border-radius: 2px;
}
.site-head a:focus-visible, .site-head button:focus-visible { outline-color: #fff; }

/* Skip link — first tab stop, off-screen until focused. */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--honey); color: var(--navy); padding: 12px 20px; font-weight: 600; border-radius: 0 0 4px 0; }
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body { font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.5; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.12; }
.em { font-style: italic; color: var(--terra); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--terra); margin-bottom: 12px; }
.lead { font-size: 1.05rem; color: var(--mute); max-width: 60ch; }

/* Buttons */
.btn { display: inline-block; padding: 13px 26px; border-radius: 3px; font-size: 0.95rem; font-weight: 600; cursor: pointer; border: 0; font-family: var(--sans); transition: opacity .15s, background .15s; }
.btn:hover { opacity: 0.92; }
.btn-primary { background: var(--honey); color: var(--navy); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
.btn-ghost:hover { border-color: var(--honey); color: var(--honey); opacity: 1; }

/* ── Header ── */
.site-head { position: sticky; top: 0; z-index: 50; background: var(--navy); color: #fff; }
.nav { display: flex; align-items: center; justify-content: space-between; height: 62px; }
/* flex-shrink:0 is load-bearing. .nav is a flex row, so .nav-left is shrinkable
   by default — and .brand is white-space:nowrap, so once the row got tight
   (adding "Guides" did it) the box shrank while the text kept its width and
   .nav-links, starting right after the shrunken box, painted straight over the
   brand. The overlap was identical at 1290px and 1440px because .wrap is capped
   at 1180px, so widening the viewport never granted the row more room. */
.nav-left { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.nav-sir-logo { height: 28px; width: auto; filter: brightness(0) invert(1); }
.brand { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; white-space: nowrap; }
.brand .dot { color: var(--terra); }
/* 20px fits the current 9 nav items + the Search Homes CTA inside the 1180px
   .wrap. A 10th item overflowed it by ~40px and had to drop to 16px; if the
   nav grows again, measure before assuming 20px still fits. */
.nav-links { display: flex; align-items: center; gap: 20px; font-size: 0.92rem; }
.nav-links a:hover { color: var(--honey); }
.nav-links a.active { color: var(--honey); }
.nav-cta { background: var(--honey); color: var(--navy) !important; padding: 9px 18px; border-radius: 3px; font-weight: 600; }
.nav-toggle { display: none; background: none; border: 0; color: #fff; font-size: 1.4rem; cursor: pointer; }

/* ── Splash hero (home) ── */
.hero-splash { position: relative; min-height: 86vh; padding: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; overflow: hidden; background: var(--navy); }
.splash-bg { position: absolute; inset: 0; }
.splash-bg img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(1.02); }
.splash-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,20,40,.52) 0%, rgba(0,20,40,.32) 42%, rgba(0,20,40,.74) 100%); }
.splash-inner { position: relative; z-index: 2; max-width: 860px; padding: 64px 24px; }
.splash-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--honey); margin-bottom: 18px; }
.hero-splash h1 { font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.05; }
.hero-splash h1 em { font-style: italic; color: var(--honey); }
.splash-lead { font-size: clamp(15px, 2vw, 19px); color: rgba(255,255,255,.86); max-width: 600px; margin: 20px auto 30px; line-height: 1.6; }
.splash-search { max-width: 640px; margin: 0 auto; text-align: left; }
.splash-cta { margin-top: 26px; }

/* ── Interior page hero (buyers/sellers/investors) ── */
.hero { position: relative; padding: 56px 0 46px; background: var(--bg); }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero h1 em { font-style: italic; color: var(--terra); }
.hero-img { border-radius: 6px; overflow: hidden; aspect-ratio: 4/5; box-shadow: 0 24px 50px -20px rgba(0,35,73,.28); }
.hero-img img { height: 100%; width: 100%; object-fit: cover; }

/* ── Page hero (neighborhoods/tools/contact) ── */
.page-hero { padding: 60px 0 42px; border-bottom: 1px solid var(--line); background: var(--paper); }
.page-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin: 12px 0 12px; }
.crumb { font-size: .82rem; color: var(--mute); }
.crumb a:hover { color: var(--terra); }

/* ── Search box (shared hero + splash) ── */
.hs-tabs { display: inline-flex; gap: 2px; margin-bottom: -1px; }
.hs-tab { border: 1px solid rgba(255,255,255,.18); border-bottom: 0; background: rgba(255,255,255,.10); cursor: pointer; font-family: var(--sans); font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.75); padding: 10px 22px; border-radius: 6px 6px 0 0; }
.hs-tab.on { background: var(--paper); color: var(--navy); }
.searchbox { display: flex; gap: 10px; background: var(--paper); border-radius: 3px; padding: 8px; }
.searchbox input { flex: 1; border: 0; background: transparent; font-family: var(--sans); font-size: 1rem; padding: 10px 12px; outline: none; color: var(--ink); min-width: 0; }
.hs-hint { font-size: .85rem; color: rgba(255,255,255,.72); margin-top: 10px; }
.hero-search .hs-tab { border-color: var(--line); background: var(--paper); color: var(--mute); }
.hero-search .hs-tab.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.hero-search .searchbox { border: 1px solid var(--line); }
.hero-search .hs-hint { color: var(--mute); }

/* ── Trust bar ── */
.trust-bar { background: var(--paper); border-bottom: 1px solid var(--line); padding: 34px 0; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.trust-item { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.trust-item .tn { font-family: var(--serif); font-size: 2rem; color: var(--navy); }
.trust-item .tn em { color: var(--terra); }
.trust-item .tl { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-top: 4px; }
.trust-logo { height: 140px; width: auto; margin: 0 auto; object-fit: contain; }

/* ── Sections ── */
.section { padding: 72px 0; }
.section.alt { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
section.alt-bg { background: var(--paper); }
.section-head { max-width: 64ch; margin-bottom: 20px; }

/* Journey / audience cards */
.journey-grid, .aud-grid, .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.j-card, .aud-card, .blog-card { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; transition: transform .15s, box-shadow .15s; display: flex; flex-direction: column; }
.j-card:hover, .aud-card:hover, .blog-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgba(0,35,73,.25); }
.j-card img, .aud-card img, .blog-card img { height: 190px; width: 100%; object-fit: cover; }
.j-body, .aud-card .body, .blog-card .body { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.j-body h3, .aud-card h3, .blog-card h3 { font-size: 1.35rem; margin-bottom: 8px; }
.j-body p, .aud-card p, .blog-card p { font-size: .92rem; color: var(--ink-2); line-height: 1.6; flex: 1; }
.j-link, .aud-card .arrow, .blog-card .arrow, .t-card .arrow { display: inline-block; margin-top: 14px; font-size: .9rem; font-weight: 600; color: var(--terra); }
.blog-card .cat { text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; font-weight: 600; color: var(--terra); }

/* Neighborhood cards */
.hood-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.hood-card { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 4/3; cursor: pointer; }
.hood-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.hood-card:hover img { transform: scale(1.05); }
.hood-card .label { position: absolute; inset: auto 0 0 0; padding: 40px 16px 14px; background: linear-gradient(transparent, rgba(0,20,40,.85)); color: #fff; }
.hood-card .label h3 { font-size: 1.15rem; }
.hood-card .label span { font-size: .78rem; color: rgba(255,255,255,.8); }
.hood-card.hide { display: none; }

/* Filter tabs (neighborhoods hub) */
.filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.filter-tab { border: 1px solid var(--line); background: var(--paper); cursor: pointer; font-family: var(--sans); font-size: .86rem; font-weight: 600; color: var(--mute); padding: 9px 18px; border-radius: 30px; transition: all .2s; }
.filter-tab.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.filter-tab:hover:not(.on) { border-color: var(--terra); color: var(--terra); }

/* Process steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 36px; }
.steps.steps-6 { grid-template-columns: repeat(3, 1fr); }
.steps.steps-7 { grid-template-columns: repeat(4, 1fr); }
.step { border-top: 2px solid var(--navy); padding-top: 18px; }
.step .num { font-family: var(--serif); font-size: 2.2rem; color: var(--terra); font-weight: 300; line-height: 1; }
.step h3 { font-size: 1.2rem; margin: 8px 0 6px; }
.step p { font-size: .92rem; color: var(--ink-2); line-height: 1.6; }

/* Intro split (buyer/seller/investor overview) */
.intro-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start; }
.intro-split .intro-copy p { font-size: 1.03rem; margin-bottom: 16px; color: var(--ink-2); line-height: 1.7; }

/* Checklist (best practices) */
.checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 32px; }
.check-item { background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--honey); padding: 20px 22px; border-radius: 0 6px 6px 0; }
.check-item h4 { font-family: var(--sans); font-weight: 600; color: var(--navy); font-size: 1rem; margin-bottom: 6px; }
.check-item p { color: var(--ink-2); font-size: .92rem; line-height: 1.6; }

/* Facts strip */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-top: 28px; }
/* 3-up variant (team pages: the three Sotheby's network stats). Same
   specificity as .facts, declared after it, so it wins here — while the
   responsive .facts rules further down still win on small screens. */
.facts--3 { grid-template-columns: repeat(3, 1fr); }
.fact { background: var(--paper); padding: 24px 20px; text-align: center; }
.fact .n { font-family: var(--serif); font-size: 1.9rem; color: var(--navy); font-weight: 500; }
.fact .l { font-size: .78rem; color: var(--mute); text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; }

/* Quote / testimonial */
.quote { max-width: 760px; margin: 0 auto; text-align: center; }
.quote blockquote { font-family: var(--serif); font-size: clamp(1.3rem, 3vw, 1.8rem); font-style: italic; color: var(--navy); line-height: 1.45; }
.quote cite { display: block; margin-top: 20px; font-family: var(--sans); font-style: normal; font-weight: 600; color: var(--terra); font-size: .92rem; }

/* Team */
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(260px, 380px)); gap: 24px; justify-content: center; margin-top: 36px; }
.t-card { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 30px 26px; text-align: center; }
/* .t-avatar is now a photo link (<a class="t-avatar"><img>...) rather than a
   plain initials div. `.t-card a` below sets a generic 3px vertical padding
   on every link in the card — harmless for text links, but on this one it
   would squash a 72x72 circle into a 72x66 oval, so it needs its own,
   more-specific rule (.t-card a.t-avatar) to reset padding back to 0. */
.t-card a.t-avatar { display: block; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--navy); margin: 0 auto 16px; padding: 0; }
.t-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t-card h3 { font-size: 1.3rem; }
.t-role { font-size: .85rem; color: var(--mute); margin-top: 2px; }
.t-affil { font-size: .82rem; color: var(--terra); font-weight: 600; margin: 8px 0 14px; }
.t-card a { display: block; font-size: .9rem; color: var(--ink-2); padding: 3px 0; }
.t-card a:hover { color: var(--terra); }
.t-card h3 a { display: inline; font-size: inherit; color: inherit; padding: 0; }

/* ── In-page subnav (jump links) ── */
.subnav { position: sticky; top: 62px; z-index: 40; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.subnav .wrap { display: flex; gap: 6px; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav a { white-space: nowrap; font-size: .85rem; font-weight: 600; color: var(--mute); padding: 15px 14px; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.subnav a:hover { color: var(--terra); }
.subnav a.on { color: var(--navy); border-bottom-color: var(--honey); }

/* ── FAQ accordion ── */
.faq { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font-family: var(--serif); font-size: 1.1rem; color: var(--navy); padding: 20px 40px 20px 0; position: relative; line-height: 1.3; }
.faq-q::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-size: 1.5rem; color: var(--terra); font-weight: 400; transition: transform .2s; }
.faq-item.open .faq-q::after { content: "\2212"; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a p { padding: 0 40px 20px 0; color: var(--ink-2); font-size: .96rem; line-height: 1.65; }
.faq-item.open .faq-a { max-height: 560px; }

/* ── Calculator widget ── */
.calc { max-width: 920px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; }
.calc-inputs { padding: 30px; border-right: 1px solid var(--line); }
.calc-output { padding: 30px; background: var(--navy); color: #fff; }
.calc-field { margin-bottom: 16px; }
.calc-field label { display: block; font-size: .8rem; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.calc-field .hint { font-weight: 400; color: var(--mute); font-size: .74rem; }
.calc-input-wrap { position: relative; display: flex; align-items: center; }
.calc-input-wrap .pre { position: absolute; left: 12px; color: var(--mute); font-size: .95rem; pointer-events: none; }
.calc-input-wrap .post { position: absolute; right: 12px; color: var(--mute); font-size: .95rem; pointer-events: none; }
.calc input[type=number], .calc select { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 4px; font-family: inherit; font-size: .98rem; background: #fff; color: var(--ink); -moz-appearance: textfield; }
.calc input.has-pre { padding-left: 26px; }
.calc input.has-post { padding-right: 32px; }
.calc input:focus, .calc select:focus { outline: 2px solid var(--honey); outline-offset: 1px; border-color: var(--honey); }
.calc-slider-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.calc-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 4px; outline: none; cursor: pointer;
  background: linear-gradient(to right, var(--honey) 0%, var(--honey) var(--pct,30%), var(--line) var(--pct,30%), var(--line) 100%); }
.calc-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; cursor: pointer; border: 3px solid var(--honey); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .12s; }
.calc-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.calc-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; cursor: pointer; border: 3px solid var(--honey); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.calc-slider::-moz-range-track { height: 6px; border-radius: 4px; background: var(--line); }
.calc-slider-val { font-family: var(--serif); font-size: 1rem; color: var(--navy); min-width: 72px; text-align: right; font-weight: 500; }
.calc-output h3 { color: #fff; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-family: var(--sans); font-weight: 600; opacity: .8; margin-bottom: 6px; }
.calc-big { font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 500; line-height: 1.05; margin-bottom: 4px; }
.calc-big .per { font-size: 1rem; opacity: .7; font-family: var(--sans); }
.calc-rows { margin-top: 22px; border-top: 1px solid rgba(255,255,255,.18); padding-top: 16px; }
.calc-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: .92rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.calc-row span:first-child { opacity: .82; }
.calc-row span:last-child { font-weight: 600; }
.calc-row.total { border-bottom: 0; margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.3); font-size: 1.02rem; }
.calc-note { font-size: .74rem; color: var(--mute); padding: 16px 30px; background: var(--bg); border-top: 1px solid var(--line); line-height: 1.5; }

/* Investor mode tabs */
.inv-tabs { display: inline-flex; gap: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: 30px; padding: 4px; margin-bottom: 26px; }
.inv-tab { border: 0; background: none; cursor: pointer; font-family: var(--sans); font-size: .9rem; font-weight: 600; color: var(--mute); padding: 10px 20px; border-radius: 26px; transition: all .2s; }
.inv-tab.on { background: var(--navy); color: #fff; }
.inv-tab:hover:not(.on) { color: var(--terra); }

/* Hold vs. flip comparison */
.compare-wrap { max-width: 920px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.compare-inputs { padding: 26px 30px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.compare-cols { display: grid; grid-template-columns: 1fr 1fr; }
.compare-col { padding: 26px 30px; }
.compare-col.hold { background: var(--navy); color: #fff; }
.compare-col.flip { background: #1d1d1f; color: #fff; }
.compare-col h3 { font-family: var(--serif); font-size: 1.4rem; color: #fff; margin-bottom: 4px; }
.compare-col .sub { font-size: .78rem; opacity: .7; margin-bottom: 16px; text-transform: uppercase; letter-spacing: .1em; }
.compare-col .big { font-family: var(--serif); font-size: 2.1rem; font-weight: 500; line-height: 1; margin-bottom: 16px; }
.compare-col .big.hold { color: #ffd77a; }
.compare-col .big.flip { color: #f0a97a; }
.cmp-row { display: flex; justify-content: space-between; padding: 9px 0; font-size: .9rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.cmp-row span:first-child { opacity: .8; }
.cmp-row span:last-child { font-weight: 600; }
.compare-verdict { padding: 18px 30px; background: var(--bg); border-top: 1px solid var(--line); font-size: .94rem; color: var(--ink); line-height: 1.6; }
.compare-verdict strong { color: var(--navy); }

/* Callout box */
.callout { margin-top: 28px; background: var(--honey-soft); border-left: 4px solid var(--honey); border-radius: 0 6px 6px 0; padding: 18px 22px; }
.callout p { font-size: .95rem; color: var(--ink); }
.callout strong { color: var(--navy); }
.callout a { color: var(--terra); font-weight: 600; }

/* Contact form */
.contact-grid { display: grid; grid-template-columns: 1.3fr .9fr; gap: 48px; align-items: start; padding: 48px 0 0; }
.contact-form { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 32px; }
.contact-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label { font-size: .85rem; font-weight: 600; color: var(--navy); display: block; margin-top: 16px; }
.contact-form .row2 label { margin-top: 0; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; margin-top: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 3px; font-family: inherit; font-size: .96rem; background: #fff; }
.contact-form button { margin-top: 20px; width: 100%; }
.contact-form .fineprint { font-size: .78rem; color: var(--mute); margin-top: 12px; }
.contact-aside h3 { font-size: 1.4rem; margin-bottom: 14px; }
.contact-aside .block { margin-bottom: 20px; }
.contact-aside strong { display: block; color: var(--navy); font-size: .85rem; margin-bottom: 3px; }
.contact-aside a { color: var(--terra); }

/* Contact band */
.band { background: var(--navy); color: #fff; padding: 84px 0; }
.band .eyebrow { color: var(--honey); }
.band-h { color: #fff; }
.band-lead { color: rgba(255,255,255,.8); max-width: 60ch; margin: 16px auto 30px; font-size: 1.05rem; }
.band .lead { color: rgba(255,255,255,.8); margin: 16px auto 30px; }
.band-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Footer */
.site-foot { background: #001a36; color: rgba(255,255,255,.82); padding: 56px 0 28px; font-size: .9rem; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 32px; }
.site-foot .brand { color: #fff; font-size: 1.15rem; }
.foot-tagline { margin-top: 10px; color: rgba(255,255,255,.65); line-height: 1.6; max-width: 40ch; }
.site-foot h5 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 14px; }
.site-foot ul { list-style: none; }
.site-foot li { padding: 4px 0; }
.site-foot a:hover { color: var(--honey); }
.foot-contact strong { color: #fff; }
.foot-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.12); margin-top: 44px; padding-top: 22px; font-size: .8rem; color: rgba(255,255,255,.55); }

/* ── Neighborhood detail pages ── */
.hood-banner { height: 42vh; min-height: 300px; position: relative; display: flex; align-items: flex-end; overflow: hidden; }
.hood-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hood-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,20,40,.25), rgba(0,20,40,.85)); }
.hood-banner .inner { position: relative; z-index: 2; color: #fff; padding-bottom: 36px; }
.hood-banner h1 { color: #fff; font-size: clamp(2.4rem, 6vw, 4rem); }
.hood-banner .eyebrow { color: var(--honey); }
.hood-banner .crumb, .hood-banner .crumb a { color: rgba(255,255,255,.85); }

.article { max-width: 760px; margin: 0 auto; }
.article p { font-size: 1.06rem; margin-bottom: 18px; color: var(--ink-2); line-height: 1.75; }

/* ── Explain-on-hover tooltips ──────────────────────────────────────────
   Keeps the reports skimmable: plain language on the surface, the jargon
   explained on demand. tabindex + focus-within means this works on keyboard
   and on touch (tap to focus), not hover only. */
.tip { position: relative; border-bottom: 1px dotted var(--terra); cursor: help; }
.tip:focus-visible { outline: 3px solid var(--honey); outline-offset: 3px; border-radius: 2px; }
.tip-bubble {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
  width: max-content; max-width: min(280px, 68vw);
  background: var(--navy); color: #fff;
  font-family: var(--sans); font-size: 12.5px; font-weight: 400; line-height: 1.55;
  letter-spacing: 0; text-transform: none; text-align: left; font-style: normal;
  padding: 10px 13px; border-radius: 8px; box-shadow: 0 14px 32px -12px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; transition: opacity .15s ease;
  z-index: 90; pointer-events: none; white-space: normal;
}
.tip-bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--navy);
}
.tip:hover .tip-bubble, .tip:focus .tip-bubble, .tip:focus-within .tip-bubble { opacity: 1; visibility: visible; }
/* The report stylesheets set overflow:hidden on cards at small widths, which
   would clip a tooltip. !important because that page-scoped CSS loads after
   this file. (.band keeps its hidden overflow — it needs it for the rounded
   corner mask, and carries no tooltips.) */
.card, .metric-row, .metrics { overflow: visible !important; }

/* Simple metric list used by the market reports */
.metrics { border: 1px solid var(--line); border-radius: 12px; overflow: visible; background: var(--paper); max-width: 760px; margin: 0 auto; }
.metric-row { display: grid; grid-template-columns: 1.5fr .9fr .9fr; gap: 12px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.metric-row:last-child { border-bottom: 0; }
.metric-row .m-label { font-weight: 600; color: var(--ink); font-size: .95rem; }
.metric-row .m-now { font-family: var(--serif); font-size: 1.25rem; color: var(--navy); text-align: right; }
.metric-row .m-chg { text-align: right; font-weight: 600; font-size: .95rem; }
.metric-row .m-chg.up { color: #2C7A4B; }
.metric-row .m-chg.down { color: var(--terra); }
.metrics-head { display: grid; grid-template-columns: 1.5fr .9fr .9fr; gap: 12px; padding: 12px 20px; background: var(--bg); border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: var(--mute); font-weight: 600; }
.metrics-head span:not(:first-child) { text-align: right; }
@media (max-width: 560px) {
  .metric-row, .metrics-head { grid-template-columns: 1.3fr .8fr .7fr; gap: 8px; padding: 12px 14px; }
  .metric-row .m-now { font-size: 1.05rem; }
  .metric-row .m-label, .metric-row .m-chg { font-size: .85rem; }
}

/* Long-form blog post body */
.post { max-width: 740px; margin: 0 auto; }
.post p { font-size: 1.08rem; margin-bottom: 20px; line-height: 1.75; color: var(--ink-2); }
.post h2 { font-size: 1.7rem; margin: 40px 0 14px; color: var(--navy); }
.post h3 { font-size: 1.25rem; margin: 28px 0 10px; color: var(--navy); }
.post ul, .post ol { margin: 0 0 20px 22px; }
.post li { font-size: 1.05rem; margin-bottom: 9px; line-height: 1.65; color: var(--ink-2); }
.post .lead { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--navy); margin-bottom: 28px; line-height: 1.45; max-width: none; }
.post a { color: var(--terra); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.post blockquote { border-left: 3px solid var(--honey); padding: 4px 0 4px 20px; margin: 24px 0; font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--navy); }
.post table { width: 100%; border-collapse: collapse; margin-bottom: 22px; font-size: .95rem; }
.post th { text-align: left; border-bottom: 2px solid var(--navy); padding: 8px 0; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.post td { padding: 11px 0; border-bottom: 1px solid var(--line); }

.pillbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.pill { background: var(--paper); border: 1px solid var(--line); padding: 8px 16px; border-radius: 30px; font-size: .85rem; font-weight: 500; }

.map-split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; align-items: stretch; }
.map-wrap { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); min-height: 380px; box-shadow: 0 18px 40px -24px rgba(0,35,73,.35); }
.map-wrap iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }
.map-link { position: absolute; right: 12px; bottom: 12px; background: var(--navy); color: #fff; font-size: .8rem; font-weight: 600; padding: 8px 14px; border-radius: 30px; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.map-link:hover { background: var(--terra); }

.snap { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 26px; display: flex; flex-direction: column; }
.snap-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.snap-row span { color: var(--mute); }
.snap-row strong { color: var(--navy); font-weight: 600; text-align: right; }

/* Per-city Sotheby's search widget inside the market-snapshot card */
.hood-search { margin-top: 18px; }
.hood-search .hs-tabs { display: flex; gap: 2px; margin-bottom: -1px; }
.hood-search .hs-tab { flex: 1; border: 1px solid var(--line); border-bottom: 0; background: var(--bg); color: var(--mute); cursor: pointer; font-family: var(--sans); font-size: .88rem; font-weight: 600; padding: 9px 14px; border-radius: 6px 6px 0 0; transition: background .15s, color .15s; }
.hood-search .hs-tab.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.hood-search .hs-tab:hover:not(.on) { color: var(--terra); }
.hood-search .btn { display: block; width: 100%; text-align: center; border-radius: 0 0 4px 4px; }
.hood-search-note { font-size: .78rem; color: var(--mute); margin-top: 10px; line-height: 1.5; }

.commute-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
.commute-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.commute-table th { text-align: left; font-family: var(--sans); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); font-weight: 600; padding: 0 0 10px; border-bottom: 2px solid var(--navy); }
.commute-table td { padding: 13px 0; border-bottom: 1px solid var(--line); }
.commute-table td strong { color: var(--terra); }
.commute-table .via { color: var(--mute); font-size: .85rem; text-align: right; }

.gtk { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }
.gtk li { position: relative; padding-left: 28px; font-size: 1rem; color: var(--ink-2); line-height: 1.6; }
.gtk li::before { content: ""; position: absolute; left: 0; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--honey); }

.amenities { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.amen-block h3 { font-size: 1.35rem; border-bottom: 2px solid var(--honey); padding-bottom: 10px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.amen-block ul { list-style: none; }
.amen-block li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.amen-block li strong { color: var(--navy); font-weight: 600; }
.amen-block li .meta { display: block; color: var(--mute); font-size: .85rem; margin-top: 2px; }

/* ── Form states ── */
.field-error { display: block; color: #b3261e; font-size: .8rem; font-weight: 600; margin-top: 5px; }
.contact-form input[aria-invalid="true"], .contact-form textarea[aria-invalid="true"] { border-color: #b3261e; outline-color: #b3261e; }
.form-status { margin-top: 16px; padding: 14px 16px; border-radius: 4px; font-size: .92rem; font-weight: 500; }
.form-status.ok { background: #e6f4ea; color: #10502b; border: 1px solid #a8d5b8; }
.form-status.err { background: #fce8e6; color: #8c1d18; border: 1px solid #f0b4ae; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* scroll reveal — content visible by default; hidden only once JS adds .reveal-on */
.reveal-on [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal-on [data-reveal].in { opacity: 1; transform: none; }

/* The market reports ship their own .js-anim/.reveal fade-in. It repeatedly
   left whole pages stuck at opacity 0 — the report content simply never
   appeared. A decorative fade is not worth any chance of an unreadable
   report, so .reveal is pinned visible here and the reports no longer run
   the animation. ([data-reveal] on the main site pages is a separate,
   working mechanism and keeps its fade.) */
.reveal, .reveal.in { opacity: 1 !important; transform: none !important; }
[data-reveal].in { opacity: 1 !important; transform: none !important; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .journey-grid, .aud-grid, .blog-grid { grid-template-columns: 1fr; }
  .hood-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-grid, .intro-split, .contact-grid { grid-template-columns: 1fr; }
  .steps, .steps.steps-6, .steps.steps-7 { grid-template-columns: repeat(2, 1fr); }
  .facts { grid-template-columns: 1fr 1fr; }
  .checklist { grid-template-columns: 1fr; }
  .calc-grid { grid-template-columns: 1fr; }
  .calc-inputs { border-right: 0; border-bottom: 1px solid var(--line); }
  .compare-cols { grid-template-columns: 1fr; }
  .compare-inputs { grid-template-columns: 1fr 1fr; }
  .contact-form .row2 { grid-template-columns: 1fr; }
  .map-split, .commute-split { grid-template-columns: 1fr; gap: 28px; }
  .gtk, .amenities { grid-template-columns: 1fr; }
  .searchbox { flex-direction: column; }
}

/* The nav collapses earlier than the content grids. Raised from 1080 when Blog
   was split back out into its own section. Note this breakpoint alone cannot
   fix a brand/nav overlap — .wrap is capped at 1180px, so above the breakpoint
   the row never gains room no matter how wide the viewport. That class of bug
   is handled by .nav-left{flex-shrink:0} and the .nav-links gap instead. */
@media (max-width: 1200px) {
  .nav-links { position: fixed; inset: 62px 0 auto 0; background: var(--navy); flex-direction: column; padding: 18px 24px 24px; gap: 16px; display: none; max-height: calc(100vh - 62px); overflow-y: auto; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 4px 0; }
  .nav-toggle { display: block; }
}
@media (max-width: 640px) {
  .steps, .steps.steps-6, .steps.steps-7, .facts { grid-template-columns: 1fr; }
}