/* ==========================================================================
   Barb Alpert, REALTOR® | Kissinger Bigatel & Brower
   Single stylesheet — no build step, no frameworks.
   Mobile-first. System font stack (zero webfont requests = fast LCP).

   BRAND: KBB red / white / black / grey, matched to the KBB print collateral.
   Red is the accent — used for the logo frame, eyebrows, rules, bullets and
   primary buttons. Never introduce a second accent hue.

   COMPLIANCE NOTE (49 Pa. Code § 35.305 + KBB brand policy):
   The KBB logo (.brand-logo) and wordmark (.wordmark) are intentionally sized
   LARGER and higher-contrast than the agent line (.agent-line) everywhere they
   appear. Do not shrink the logo or enlarge the agent line past it.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --red: #c0392b;            /* KBB red — the single accent */
  --red-dark: #96271c;
  --red-tint: #fbf1ef;
  --ink: #1a1a1a;            /* near-black body text */
  --ink-soft: #55585a;       /* grey secondary text */
  --charcoal: #262626;       /* dark panels + footer */
  --white: #ffffff;
  --paper: #faf8f5;          /* warm off-white page background */
  --grey-50: #f4f3f1;
  --line: #e3e0da;
  --focus: #0b6bcb;

  --wrap: 1140px;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(26, 26, 26, .05), 0 8px 24px rgba(26, 26, 26, .07);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  padding-bottom: 62px; /* room for the mobile sticky call bar */
}
@media (min-width: 800px) { body { padding-bottom: 0; } }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--red-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--red); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.2; color: var(--ink); margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(1.65rem, 1.1rem + 2.2vw, 2.4rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.35rem, 1rem + 1.5vw, 1.85rem); margin-top: 1.6em; }
h3 { font-size: 1.15rem; margin-top: 1.4em; }
p, ul, ol { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: .4em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.15rem; }
.narrow { max-width: 760px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: .5rem; top: -100px; z-index: 999;
  background: var(--red); color: #fff; padding: .6rem 1rem; border-radius: 0 0 6px 6px;
}
.skip-link:focus { top: 0; color: #fff; }

/* ==========================================================================
   BROKERAGE LOGO + WORDMARK — must remain the dominant brand
   ========================================================================== */

/* The KBB logo, top-left of every page (images/kbb-logo.png, 290x179 with
   transparency). Sized by height so the aspect ratio is preserved; the widths
   land at roughly 91 / 110 / 126 CSS px. Capped at 78px tall so a 2x display
   still samples within the file's 179px native height — going larger would
   soften the mark. */
.brand-logo {
  display: block;
  width: auto;
  height: 56px;
}
@media (min-width: 700px) { .brand-logo { height: 68px; } }
@media (min-width: 1100px) { .brand-logo { height: 78px; } }

/* Text wordmark — used in the hero and footer where the logo image would not
   read well (dark backgrounds, very large display sizes). */
.wordmark {
  display: inline-block;
  margin: 0;
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -.005em;
  line-height: 1.02;
  color: var(--ink);
  text-transform: uppercase;
  text-decoration: none;
}
.wordmark__sub {
  display: block;
  font-size: .5em;
  font-weight: 700;
  letter-spacing: .34em;
  color: var(--red);
  margin-top: .25em;
}
a.wordmark:hover { color: var(--red); }

/* Small red letterspaced label, matching the KBB print collateral */
.eyebrow {
  font-family: var(--sans); font-size: .74rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--red);
  margin: 0 0 .6rem;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .97);
  border-bottom: 3px solid var(--red);
  backdrop-filter: saturate(180%) blur(8px);
}
.header-inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: 72px; padding-block: .6rem;
}
/* align-items:flex-start stops the logo <img> from stretching (and therefore
   optically centering) inside the stretch-by-default flex column. */
.brand-block { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; margin-right: auto; text-decoration: none; }
/* Agent line: deliberately far smaller and lighter than the brokerage logo */
.agent-line {
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--ink-soft);
  text-transform: none;
  max-width: 34ch;
}

.nav-toggle {
  display: inline-flex; align-items: center; gap: .45rem;
  background: none; border: 1px solid var(--line); border-radius: 8px;
  padding: .5rem .7rem; font: inherit; font-size: .85rem; color: var(--ink); cursor: pointer;
}
.nav-toggle svg { width: 18px; height: 18px; }
@media (min-width: 900px) { .nav-toggle { display: none; } }

.site-nav { display: none; }
.site-nav[data-open="true"] {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--white); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
}
.site-nav ul { list-style: none; margin: 0; padding: .5rem 1.15rem 1rem; }
.site-nav li { margin: 0; }
.site-nav a {
  display: block; padding: .65rem .2rem; font-size: .98rem;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line);
}
.site-nav a[aria-current="page"] { color: var(--red); font-weight: 700; }

@media (min-width: 900px) {
  .site-nav { display: block; }
  .site-nav ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .1rem; padding: 0; }
  .site-nav a { border: 0; padding: .45rem .5rem; font-size: .855rem; border-radius: 6px; white-space: nowrap; }
  .site-nav a:hover { background: var(--red-tint); color: var(--red-dark); }
  .site-nav a[aria-current="page"] { background: var(--red-tint); }
}

/* Scoped with .site-header so this beats the later `.btn { display: inline-flex }`
   rule at equal specificity. Without the scope the button leaks onto mobile. */
.site-header .header-cta { display: none; }
@media (min-width: 1280px) {
  /* nowrap + flex:none keeps the phone number on one line instead of breaking
     mid-number when the nav gets wide. */
  .site-header .header-cta {
    display: inline-flex; margin-left: .6rem;
    white-space: nowrap; flex: none;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.35rem; border-radius: 6px; border: 2px solid transparent;
  font-family: var(--sans); font-size: 1rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-dark); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--light { background: #fff; color: var(--red-dark); }
.btn--light:hover { background: var(--red-tint); color: var(--red-dark); }
.btn--sm { padding: .55rem .9rem; font-size: .9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.2rem; }

/* ---------- Hero ---------- */
.hero { background: var(--grey-50); border-bottom: 1px solid var(--line); }
.hero-inner { padding-block: 2.4rem 2.6rem; display: grid; gap: 1.8rem; }
@media (min-width: 900px) {
  .hero-inner { grid-template-columns: 1.05fr .95fr; align-items: center; padding-block: 3.4rem 3.6rem; }
}
/* COMPLIANCE: brokerage lockup leads the hero and stays well above the agent
   line (1rem) beneath the headline. The logo image in the sticky header carries
   the primary brand weight, so this is sized as a lockup, not a shout. */
.hero .wordmark { font-size: clamp(1.15rem, .85rem + 1.5vw, 1.75rem); margin-bottom: .7rem; }
.hero h1 { font-size: clamp(1.4rem, 1.05rem + 1.6vw, 2rem); color: var(--ink); }
.hero .agent-line-lg {
  font-family: var(--sans); font-size: 1rem; font-weight: 600;
  color: var(--ink-soft); margin: 0 0 1rem;
}
.hero-figure img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; object-fit: cover; }
.hero-figure figcaption { font-size: .82rem; color: var(--ink-soft); margin-top: .5rem; }

/* Compact hero for interior pages */
.page-hero { background: var(--grey-50); border-bottom: 1px solid var(--line); padding-block: 1.9rem 2rem; }
/* COMPLIANCE: brokerage lockup leads every interior page and stays larger than
   the agent line beneath the H1. */
.page-hero .wordmark { font-size: clamp(1.1rem, .85rem + 1.3vw, 1.55rem); margin-bottom: .7rem; }
.page-hero h1 { font-size: clamp(1.4rem, 1.05rem + 1.5vw, 1.95rem); color: var(--ink); margin-bottom: .35rem; }
.page-hero p { max-width: 62ch; color: var(--ink-soft); margin-bottom: 0; }

/* ---------- Sections & cards ---------- */
.section { padding-block: 2.6rem; }
.section--tint { background: var(--white); border-block: 1px solid var(--line); }
.section > .wrap > h2:first-child { margin-top: 0; }

.grid { display: grid; gap: 1.15rem; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid--2 { grid-template-columns: 1fr 1fr; } .grid--3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem; box-shadow: var(--shadow);
}
.card h3 { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card--link { text-decoration: none; color: inherit; display: block; transition: transform .15s ease; }
.card--link:hover { transform: translateY(-2px); color: inherit; border-color: var(--red); }
.card--link h3 { color: var(--ink); }
.card--link:hover h3 { color: var(--red-dark); }

.media { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 800px) { .media { grid-template-columns: 1fr 1fr; } .media--flip > figure { order: 2; } }
.media img { border-radius: var(--radius); box-shadow: var(--shadow); }
.media figcaption { font-size: .82rem; color: var(--ink-soft); margin-top: .5rem; }

/* Stat tiles, matching the KBB print collateral */
.stat-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 1.5rem 0; }
.stat { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 1.1rem; text-align: center; }
.stat b { display: block; font-family: var(--serif); font-size: 1.7rem; color: var(--red); line-height: 1.1; }
.stat span { font-size: .82rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }

.checklist { list-style: none; padding-left: 0; }
.checklist li { position: relative; padding-left: 1.6rem; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .55rem; height: .55rem; border-radius: 50%; background: var(--red);
}

blockquote.pull {
  margin: 1.8rem 0; padding: 1.2rem 1.4rem; border-left: 4px solid var(--red);
  background: var(--white); border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--serif); font-size: 1.15rem; font-style: italic; color: var(--ink);
}
blockquote.pull cite { display: block; margin-top: .6rem; font: 600 .9rem/1.4 var(--sans); font-style: normal; color: var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: .35rem 0; }
.faq summary {
  cursor: pointer; padding: .85rem .2rem; font-family: var(--serif); font-size: 1.08rem;
  font-weight: 700; color: var(--ink); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; font-family: var(--sans); font-weight: 400; font-size: 1.4rem; line-height: 1; color: var(--red); }
.faq details[open] summary::after { content: "\2212"; }
.faq details > :not(summary) { padding: 0 .2rem; }

/* ---------- Forms ---------- */
.form { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .3rem; }
.field .hint { font-weight: 400; color: var(--ink-soft); }
.field input, .field textarea, .field select {
  width: 100%; padding: .7rem .8rem; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--grey-50); border: 1px solid var(--line); border-radius: 6px;
}
.field input:focus, .field textarea:focus { background: #fff; }
.field textarea { min-height: 120px; resize: vertical; }
.form-note { font-size: .85rem; color: var(--ink-soft); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { font-size: .85rem; color: var(--ink-soft); padding-top: 1rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--line); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--charcoal); color: #ececea; padding-block: 2.4rem; }
.cta-band h2 { color: #fff; margin-top: 0; }
.cta-band p { color: #c9c8c5; max-width: 55ch; }
.cta-band a:not(.btn) { color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: var(--charcoal); color: #d7d6d3; padding-top: 2.4rem; font-size: .95rem; border-top: 4px solid var(--red); }
.site-footer a { color: #fff; }
.site-footer h2, .site-footer h3 { color: #fff; font-family: var(--sans); font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; margin: 0 0 .7rem; }
.footer-grid { display: grid; gap: 1.8rem; padding-bottom: 2rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.25fr 1fr 1fr; } }
/* Footer brokerage mark stays visually dominant over the agent names */
.site-footer .wordmark { color: #fff; font-size: 1.25rem; margin-bottom: .8rem; }
.site-footer .wordmark__sub { color: #e8897e; }
.nap { font-style: normal; line-height: 1.7; }
.footer-agents p { margin-bottom: .8rem; line-height: 1.6; }
.footer-agents .name { font-weight: 600; color: #fff; font-size: 1rem; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1rem; }
.footer-nav li { margin-bottom: .35rem; break-inside: avoid; }
.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, .16); padding-block: 1.2rem 1.6rem;
  font-size: .82rem; color: #a9a8a5; line-height: 1.6;
}
.footer-legal p { margin-bottom: .6rem; }
.legal-marks { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem; }
.eho-mark { width: 34px; height: 34px; flex: none; }
.eho-mark svg { width: 100%; height: 100%; fill: none; stroke: #d7d6d3; stroke-width: 5; }

/* ---------- Mobile sticky call/text bar ---------- */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--red); border-top: 1px solid rgba(255, 255, 255, .2);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bar a {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .95rem .5rem; color: #fff; text-decoration: none; font-weight: 600; font-size: .95rem;
}
.mobile-bar a + a { border-left: 1px solid rgba(255, 255, 255, .28); }
.mobile-bar svg { width: 17px; height: 17px; fill: currentColor; }
@media (min-width: 800px) { .mobile-bar { display: none; } }

/* ---------- Client reviews ----------
   CSS columns rather than grid: testimonials vary wildly in length, and columns
   pack them by height instead of forcing every card in a row to match the
   tallest one. */
.review-list { columns: 1; column-gap: 1.15rem; }
@media (min-width: 900px) { .review-list { columns: 2; } }
.review {
  break-inside: avoid;
  margin: 0 0 1.15rem;
  padding: 1.4rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--red);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
}
.review p { margin: 0; font-size: 1rem; line-height: 1.65; }
.review p::before { content: "\201C"; color: var(--red); font-family: var(--serif); font-size: 2.2rem; line-height: 0; vertical-align: -.35rem; margin-right: .15rem; }
.review p::after { content: "\201D"; color: var(--red); font-family: var(--serif); font-size: 2.2rem; line-height: 0; vertical-align: -.35rem; margin-left: .1rem; }
.review cite {
  display: block; margin-top: .9rem; font-style: normal;
  font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Article / blog ---------- */
.article { padding-block: 2rem 2.6rem; }
.article .meta { font-size: .88rem; color: var(--ink-soft); margin-bottom: 1.5rem; }
.article h2 { margin-top: 1.9em; }
.post-list { list-style: none; padding: 0; display: grid; gap: 1.15rem; }
@media (min-width: 800px) { .post-list { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Misc ---------- */
.placeholder {
  border: 2px dashed var(--red); border-radius: var(--radius);
  background: var(--red-tint); padding: 1.2rem; color: #7d2b20; font-size: .92rem;
}
.placeholder p:last-child { margin-bottom: 0; }
.tag {
  display: inline-block; background: var(--red-tint); color: var(--red-dark);
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: .25rem .6rem; border-radius: 100px; margin-bottom: .8rem;
}
.town-grid a { text-decoration: none; }