/* ============================================================================
   THE NO FLUFF REALTOR — stylesheet
   Palette: Blatic Blue #33658A · Charcoal Blue #2F4858 · Soft Linen #E0DFD5
   Type: Zilla Slab (headings) · Montserrat (body)
   ========================================================================== */

:root {
  --blatic: #33658A;
  --blatic-dark: #274b6b;
  --blatic-light: #4a80aa;
  --charcoal: #2F4858;
  --linen: #E0DFD5;
  --sky: #8fb4cf;
  --body: #3d5261;
  --body-soft: #6b7d89;
  --line: #e6e5db;
  --line-input: #cfcdbf;
  --green: #5fd08b;
  --font-head: 'Zilla Slab', Georgia, 'Times New Roman', serif;
  --font-body: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --wrap: 1180px;
  --pad: clamp(18px, 4vw, 40px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  font-family: var(--font-body);
  color: var(--charcoal);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
img { max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; color: inherit; }
a { color: var(--blatic); text-decoration: none; }
a:hover { color: var(--blatic-dark); }
::selection { background: var(--blatic); color: #fff; }
h1, h2, h3, h4 { font-family: var(--font-head); }

/* ---------- Layout helpers ---------- */
.container { max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.section { padding-top: clamp(56px, 7vw, 100px); padding-bottom: clamp(56px, 7vw, 100px); }
.section--tight { padding-top: clamp(44px, 5vw, 72px); padding-bottom: clamp(44px, 5vw, 72px); }
.section--hero { padding-top: clamp(48px, 7vw, 90px); padding-bottom: clamp(48px, 7vw, 90px); }
.section--band { padding-top: clamp(52px, 6vw, 84px); padding-bottom: clamp(52px, 6vw, 84px); }
.bg-white { background: #fff; }
.bg-linen { background: var(--linen); }
.bg-charcoal { background: var(--charcoal); color: #fff; }
.bg-blatic { background: var(--blatic); color: #fff; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blatic); margin-bottom: 12px; }
.eyebrow--sky { color: var(--sky); }
.flex-between { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 16px 28px; border: 1.5px solid transparent; transition: background .18s, color .18s, border-color .18s; white-space: nowrap;
}
.btn--sm { padding: 11px 20px; font-size: 13px; }
.btn--primary { background: var(--blatic); color: #fff; }
.btn--primary:hover { background: var(--blatic-dark); color: #fff; }
.btn--outline { background: transparent; color: var(--charcoal); border-color: var(--charcoal); }
.btn--outline:hover { background: var(--charcoal); color: #fff; }
.btn--white { background: #fff; color: var(--charcoal); }
.btn--white:hover { background: var(--linen); color: var(--charcoal); }
.btn--block { display: flex; width: 100%; }

.textlink { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--blatic); border-bottom: 2px solid var(--blatic); padding-bottom: 4px; }
.textlink:hover { color: var(--blatic-dark); }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { font-family: var(--font-head); font-weight: 700; font-size: 21px; letter-spacing: -0.015em; line-height: 1; color: var(--charcoal); display: inline-flex; align-items: center; }
.brand em { font-style: normal; color: var(--blatic); }
.nav { display: flex; align-items: center; gap: 6px; }
.nav-link { position: relative; padding: 8px 14px; font-size: 13.5px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--charcoal); }
.nav-link:hover { color: var(--blatic); }
.nav-link.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; background: var(--blatic); }
.nav-cta { margin-left: 8px; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-toggle span { width: 26px; height: 2px; background: var(--charcoal); display: block; }

/* Mobile menu overlay */
.mobile-menu { position: fixed; inset: 0; z-index: 60; background: var(--charcoal); flex-direction: column; padding: 24px; animation: nfUp .25s ease; }
.mobile-menu[hidden] { display: none; }
.mobile-menu__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.mobile-menu__brand { font-family: var(--font-head); font-weight: 700; font-size: 21px; color: #fff; }
.mobile-menu__brand em { font-style: normal; color: var(--sky); }
.mobile-menu__close { color: #fff; font-size: 34px; line-height: 1; font-weight: 300; }
.mobile-menu__links { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu__links a { text-align: left; font-family: var(--font-head); font-weight: 600; font-size: 34px; color: var(--linen); padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }

@media (max-width: 899px) {
  .nav--desktop { display: none; }
  .nav-toggle { display: flex; }
}

/* ---------- Headings scale ---------- */
.h-hero { font-family: var(--font-head); font-weight: 700; font-size: clamp(40px, 6.6vw, 80px); line-height: 0.98; letter-spacing: -0.02em; color: var(--charcoal); margin: 0 0 22px; text-wrap: balance; }
.h-page { font-family: var(--font-head); font-weight: 700; font-size: clamp(34px, 5vw, 64px); line-height: 1; letter-spacing: -0.02em; margin: 0; }
.h-sec { font-family: var(--font-head); font-weight: 700; font-size: clamp(30px, 4.4vw, 52px); line-height: 1; letter-spacing: -0.01em; margin: 0; color: var(--charcoal); }
.h-sec--sm { font-size: clamp(28px, 4vw, 46px); }
.lead { font-family: var(--font-body); font-weight: 300; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; color: var(--body); }

/* ---------- Hero (home) ---------- */
.hero { background: var(--linen); position: relative; overflow: hidden; }
.hero__inner { max-width: var(--wrap); margin: 0 auto; padding: clamp(48px,7vw,90px) var(--pad); display: flex; flex-wrap: wrap; align-items: center; gap: clamp(32px,5vw,64px); }
.hero__copy { flex: 1 1 380px; min-width: 300px; animation: nfUp .6s ease both; }
.hero__media { flex: 1 1 340px; min-width: 280px; animation: nfUp .6s ease .12s both; }
.badge { display: inline-flex; align-items: center; gap: 8px; background: var(--charcoal); color: var(--linen); padding: 7px 14px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 24px; }
.hero__photo { position: relative; aspect-ratio: 4/5; border-radius: 3px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(47,72,88,0.5); }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.team-chip { margin-top: 34px; display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(47,72,88,0.06); border: 1px solid rgba(47,72,88,0.14); }
.team-chip:hover { background: rgba(47,72,88,0.11); }
.team-chip__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--charcoal); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: 15px; }
.team-chip__text { font-size: 12.5px; line-height: 1.35; color: var(--body); }
.team-chip__text b { display: block; font-weight: 600; color: var(--charcoal); letter-spacing: 0.03em; }
.team-chip__text span { opacity: .8; }

/* ---------- Image placeholder (before real photos are added) ---------- */
.ph { position: relative; background: repeating-linear-gradient(135deg, #d8d7cb, #d8d7cb 14px, #e0dfd5 14px, #e0dfd5 28px); display: flex; align-items: center; justify-content: center; color: var(--body-soft); }
.ph span { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; padding: 12px; opacity: .75; }
.ph--fill { width: 100%; height: 100%; position: absolute; inset: 0; }

/* ---------- Goal tracker ---------- */
.goal__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 34px; }
.goal__big { font-family: var(--font-head); font-weight: 700; font-size: clamp(48px,7vw,84px); line-height: 0.85; color: var(--linen); text-align: right; }
.goal__big small { color: var(--sky); font-size: 0.42em; }
.goal__bar { position: relative; height: 26px; background: var(--linen); border-radius: 2px; overflow: hidden; display: flex; }
.goal__closed { background: linear-gradient(90deg, var(--blatic), var(--blatic-light)); animation: nfGrow 1.1s ease both; min-width: 8px; }
.goal__pending { background: repeating-linear-gradient(45deg, #7fa6c1, #7fa6c1 6px, #6b96b4 6px, #6b96b4 12px); animation: nfGrow 1.4s ease both; }
.goal__ticks { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11px; font-weight: 500; color: #7fa6c1; letter-spacing: 0.04em; }
.goal__legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; }
.goal__legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: #c9d6de; }
.swatch { width: 12px; height: 12px; }
.swatch--closed { background: var(--blatic); }
.swatch--pending { background: repeating-linear-gradient(45deg, #7fa6c1, #7fa6c1 4px, #6b96b4 4px, #6b96b4 8px); }

/* ---------- Cards (listings + posts) ---------- */
.rail { display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 8px; margin: 0 -4px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 clamp(280px, 80vw, 360px); scroll-snap-align: start; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.card-grid--posts { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card { text-align: left; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); transition: border-color .18s, transform .18s; color: inherit; }
.card:hover { border-color: var(--blatic); transform: translateY(-4px); }
.card__media { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--linen); }
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__media--wide { aspect-ratio: 16/9; }
.card__tag { position: absolute; top: 12px; left: 12px; background: var(--charcoal); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 5px 10px; }
.card__body { padding: 20px; }
.card__price { font-family: var(--font-head); font-weight: 700; font-size: 26px; color: var(--blatic); line-height: 1; margin-bottom: 8px; }
.card__addr { font-weight: 500; font-size: 15px; color: var(--charcoal); margin-bottom: 2px; }
.card__area { font-weight: 300; font-size: 13px; color: var(--body-soft); margin-bottom: 14px; }
.card__stats { display: flex; gap: 16px; font-size: 12.5px; font-weight: 500; color: var(--body); border-top: 1px solid #eeede4; padding-top: 12px; }
.icon-btn { width: 44px; height: 44px; border: 1.5px solid var(--charcoal); color: var(--charcoal); font-size: 18px; display: inline-flex; align-items: center; justify-content: center; transition: background .18s, color .18s; }
.icon-btn:hover { background: var(--charcoal); color: #fff; }

/* Post card specifics */
.card__meta { display: flex; gap: 10px; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--blatic); margin-bottom: 12px; }
.card__meta .dot { color: #c3c1b5; }
.card__meta .muted { color: #93a0a9; }
.card__title { font-family: var(--font-head); font-weight: 700; font-size: 21px; line-height: 1.14; color: var(--charcoal); margin: 0 0 10px; }
.card__excerpt { font-weight: 300; font-size: 14px; line-height: 1.55; color: var(--body); margin: 0 0 14px; }
.card__more { font-size: 12.5px; font-weight: 600; color: var(--blatic); }

/* ---------- Values / why-me grid ---------- */
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2px; background: rgba(47,72,88,0.12); }
.value { background: var(--linen); padding: 30px 26px; }
.value__num { font-family: var(--font-head); font-weight: 700; font-size: 38px; color: var(--blatic); line-height: 1; margin-bottom: 14px; }
.value h3 { font-weight: 600; font-size: 21px; color: var(--charcoal); margin: 0 0 10px; }
.value p { font-weight: 300; font-size: 14.5px; line-height: 1.55; color: var(--body); margin: 0; }

/* ---------- Social grid ---------- */
.social-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.social-cell { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--linen); display: block; }
.social-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.social-cell__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px; background: linear-gradient(transparent, rgba(47,72,88,0.82)); color: #fff; font-size: 11.5px; font-weight: 400; line-height: 1.3; pointer-events: none; }

/* ---------- Google reviews ---------- */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.review { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); padding: 26px 24px; display: flex; flex-direction: column; }
.review__stars { color: #f5b301; font-size: 16px; letter-spacing: 2px; margin-bottom: 14px; }
.review__quote { font-family: var(--font-body); font-weight: 300; font-size: 15.5px; line-height: 1.6; color: #eef2f4; margin: 0 0 18px; }
.review__by { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review__name { font-family: var(--font-head); font-weight: 600; font-size: 15px; color: #fff; }
.review__loc { font-weight: 300; font-size: 12.5px; color: var(--sky); }
.review__badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; color: var(--sky); white-space: nowrap; }
.g-dot { width: 12px; height: 12px; border-radius: 50%; background: conic-gradient(#4285F4 0 25%, #34A853 0 50%, #FBBC05 0 75%, #EA4335 0); display: inline-block; }

/* ---------- Forms ---------- */
.field { padding: 14px; background: #fff; border: 1px solid var(--line-input); font-size: 15px; font-weight: 300; width: 100%; }
.field--sm { padding: 13px 14px; font-size: 14px; }
textarea.field { resize: vertical; }
.form-note { font-size: 12px; font-weight: 300; color: #93a0a9; margin: 0; }
.form-success { background: var(--charcoal); color: #fff; padding: 40px; text-align: center; }
.form-success h3 { font-weight: 700; font-size: 26px; margin: 0 0 8px; }
.form-success p { font-weight: 300; color: #c9d6de; margin: 0; }

/* ---------- Contact / detail sidebars ---------- */
.contact-cols { display: flex; flex-wrap: wrap; gap: clamp(32px,5vw,56px); }
.contact-block { margin-bottom: 0; }
.contact-block .label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blatic); margin-bottom: 6px; }
.contact-block a, .contact-block .val { font-family: var(--font-head); font-weight: 600; color: var(--charcoal); }
.chip-link { padding: 9px 14px; border: 1px solid var(--line-input); font-size: 13px; font-weight: 500; color: var(--charcoal); transition: border-color .18s, color .18s; }
.chip-link:hover { border-color: var(--blatic); color: var(--blatic); }

/* ---------- Listings / IDX ---------- */
.live-pill { display: inline-flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sky); margin-bottom: 14px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); animation: nfPulse 1.8s infinite; }
.idx-slot { border: 1px dashed var(--line-input); background: #fafaf7; }
.idx-notice { max-width: 620px; margin: 0 auto; text-align: center; padding: 64px 24px; }
.idx-notice h3 { font-weight: 600; font-size: 26px; color: var(--charcoal); margin: 0 0 12px; }
.idx-notice p { font-weight: 300; color: var(--body); line-height: 1.6; margin: 0 0 8px; }

/* ---------- About ---------- */
.split { display: flex; flex-wrap: wrap; gap: clamp(32px,5vw,64px); align-items: center; }
.prose { max-width: 820px; margin: 0 auto; }
.prose h2 { font-weight: 700; font-size: clamp(26px,3.4vw,38px); color: var(--charcoal); margin: 0 0 18px; }
.prose p { font-weight: 300; font-size: 16.5px; line-height: 1.7; color: var(--body); margin: 0 0 16px; }
.creds { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 36px; }
.cred { border-left: 3px solid var(--blatic); padding: 6px 0 6px 16px; }
.cred b { display: block; font-family: var(--font-head); font-weight: 600; font-size: 18px; color: var(--charcoal); }
.cred span { font-weight: 300; font-size: 13.5px; color: var(--body-soft); }
.team-card { background: var(--charcoal); color: #fff; padding: clamp(28px,4vw,44px); }
.team-card h3 { font-weight: 700; font-size: clamp(24px,3vw,34px); margin: 0 0 14px; }
.team-card p { font-weight: 300; font-size: 16px; line-height: 1.6; color: #d6e2ea; margin: 0 0 24px; max-width: 560px; }

/* ---------- Privacy ---------- */
.legal { max-width: 720px; margin: 0 auto; }
.legal h2 { font-weight: 600; font-size: 22px; color: var(--charcoal); margin: 28px 0 10px; }
.legal p { font-weight: 300; font-size: 15.5px; line-height: 1.7; color: var(--body); margin: 0 0 8px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--charcoal); color: #c9d6de; }
.footer-grid { max-width: var(--wrap); margin: 0 auto; padding: clamp(48px,5vw,72px) var(--pad) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; }
.footer-brand { grid-column: 1 / -1; max-width: 340px; }
.footer-brand .brand-lg { font-family: var(--font-head); font-weight: 700; font-size: 24px; color: #fff; }
.footer-brand .brand-lg em { font-style: normal; color: var(--sky); }
.footer-brand p { font-weight: 300; font-size: 14px; line-height: 1.6; margin: 14px 0 0; color: #a9bcc7; }
.footer-col h4 { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sky); margin: 0 0 14px; }
.footer-col .stack { display: flex; flex-direction: column; gap: 9px; font-weight: 300; font-size: 14px; }
.footer-col a, .footer-col button { text-align: left; color: #c9d6de; font-weight: 300; font-size: 14px; }
.footer-col a:hover, .footer-col button:hover { color: #fff; }
.footer-bottom { max-width: var(--wrap); margin: 0 auto; padding: 36px var(--pad); }
.footer-bottom__inner { border-top: 1px solid rgba(255,255,255,0.14); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.footer-bottom p { font-weight: 300; font-size: 12.5px; line-height: 1.6; color: #8fa4b1; margin: 0; max-width: 640px; }
.footer-bottom a { color: #c9d6de; font-weight: 500; }
.footer-bottom a:hover { color: #fff; }
.footer-copy { font-weight: 300; font-size: 12px; color: #708996; }

/* ---------- Blog article body ---------- */
.nf-article h2 { font-family: var(--font-head); font-weight: 700; font-size: 26px; color: var(--charcoal); margin: 34px 0 14px; line-height: 1.15; letter-spacing: -0.01em; }
.nf-article h3 { font-family: var(--font-head); font-weight: 600; font-size: 21px; color: var(--charcoal); margin: 28px 0 10px; }
.nf-article p { font-family: var(--font-body); font-weight: 300; font-size: 17px; line-height: 1.75; color: #333d44; margin: 0 0 20px; }
.nf-article a { color: var(--blatic); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.nf-article strong { font-weight: 600; color: var(--charcoal); }
.nf-article em { font-style: italic; }
.nf-article img { max-width: 100%; height: auto; display: block; border-radius: 2px; }
.nf-article figure { margin: 0 0 24px; }
.nf-article figure img { width: 100%; }
.nf-article ul, .nf-article ol { font-weight: 300; font-size: 17px; line-height: 1.75; color: #333d44; margin: 0 0 20px; padding-left: 22px; }
.nf-article li { margin-bottom: 8px; }
.nf-article blockquote { margin: 0 0 24px; padding: 4px 0 4px 20px; border-left: 3px solid var(--blatic); font-family: var(--font-head); font-weight: 500; font-size: 20px; color: var(--charcoal); line-height: 1.4; }

/* ---------- Utilities ---------- */
.stack-24 { display: flex; flex-direction: column; gap: 24px; }
.mt-6 { margin-top: 6px; }
.center { text-align: center; }
.grow { flex: 1; }
main { display: block; }

/* ---------- Animations ---------- */
@keyframes nfUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes nfGrow { from { width: 0; } }
@keyframes nfPulse { 0% { box-shadow: 0 0 0 0 rgba(95,208,139,.55); } 70% { box-shadow: 0 0 0 7px rgba(95,208,139,0); } 100% { box-shadow: 0 0 0 0 rgba(95,208,139,0); } }

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