/* ===========================================================
   FastIBuyer — shared stylesheet (home + all situation pages)
   Palette aligned to the logo: ocean blue + gold/orange
   =========================================================== */
:root {
  --cream: #eff4f7;
  --cream-2: #e2edf2;
  --paper: #ffffff;
  --ink: #15272f;
  --ink-soft: #3f565f;
  --muted: #6f828b;
  --line: #d6e3ea;
  --evergreen: #1c7aa6;       /* brand BLUE (primary) */
  --evergreen-700: #155f7f;   /* darker blue */
  --evergreen-400: #5ba3c6;   /* light blue */
  --amber: #ef9f1c;           /* brand ORANGE (accent) */
  --amber-soft: #f5b751;
  --amber-wash: #fcefd8;
  --shadow-sm: 0 1px 2px rgba(20,40,48,.06), 0 4px 12px rgba(20,40,48,.05);
  --shadow-md: 0 8px 24px rgba(20,40,48,.08), 0 2px 6px rgba(20,40,48,.05);
  --shadow-lg: 0 24px 60px rgba(21,95,127,.16), 0 6px 18px rgba(20,40,48,.08);
  --r: 14px;
  --maxw: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Hanken Grotesk", sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: "Fraunces", serif; font-weight: 600; line-height: 1.08; letter-spacing: -.01em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.eyebrow {
  font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber); display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 26px; height: 1.5px; background: var(--amber); display: inline-block; }

/* ---------- Header ---------- */
header {
  position: sticky; top: 0; z-index: 50;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
header.scrolled { background: rgba(239,244,247,.92); backdrop-filter: blur(12px); border-color: var(--line); box-shadow: var(--shadow-sm); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand {
  display: flex; align-items: center; gap: 12px;
  font-family: "Hanken Grotesk", sans-serif; font-weight: 800;
  font-size: 1.32rem; letter-spacing: .01em; text-transform: uppercase;
}
.brand .mark { width: 44px; height: 42px; flex: none; display: grid; place-items: center; }
.brand .mark svg { width: 44px; height: 42px; }
.brand b { color: var(--evergreen); font-weight: 800; }
.brand i { color: var(--amber); font-style: normal; }
nav ul { display: flex; gap: 34px; list-style: none; }
nav ul a { font-size: .95rem; font-weight: 500; color: var(--ink-soft); position: relative; padding: 4px 0; }
nav ul a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--amber); transition: width .25s ease; }
nav ul a:hover { color: var(--ink); }
nav ul a:hover::after { width: 100%; }
.header-cta { display: flex; align-items: center; gap: 16px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: "Hanken Grotesk", sans-serif; font-weight: 600; font-size: .98rem;
  padding: 13px 24px; border-radius: 999px; cursor: pointer; border: none;
  transition: transform .18s ease, box-shadow .25s ease, background .25s ease; white-space: nowrap;
}
.btn-primary { background: var(--amber); color: #fff; box-shadow: 0 6px 18px rgba(239,159,28,.32); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(239,159,28,.42); background: #d98c12; }
.btn-green { background: var(--evergreen); color: #fff; box-shadow: 0 6px 18px rgba(28,122,166,.28); }
.btn-green:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(28,122,166,.38); background: var(--evergreen-700); }
.btn-ghost { background: transparent; color: var(--evergreen); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--evergreen); background: var(--paper); }
.btn.lg { padding: 16px 30px; font-size: 1.05rem; }
.phone-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--evergreen); font-size: 1rem; }
.phone-link svg { width: 17px; height: 17px; }
.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.menu-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: .3s; border-radius: 2px; }
.mobile-menu { display: none; flex-direction: column; gap: 4px; padding: 8px 24px 20px; border-bottom: 1px solid var(--line); background: var(--cream); }
.mobile-menu a { padding: 12px 6px; font-weight: 500; border-bottom: 1px solid var(--line); }
.mobile-menu .btn-primary { margin-top: 12px; }

/* ---------- Hero (home) ---------- */
.hero { position: relative; padding: 64px 0 90px; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 520px at 78% -8%, rgba(239,159,28,.18), transparent 60%),
    radial-gradient(760px 620px at 8% 20%, rgba(28,122,166,.10), transparent 55%);
}
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 5.2vw, 4rem); color: var(--evergreen); margin: 22px 0 0; }
.hero h1 .accent { color: var(--amber); font-style: italic; font-weight: 500; }
.hero .lede { font-size: 1.18rem; color: var(--ink-soft); margin: 22px 0 0; max-width: 30rem; }
.hero .lede b { color: var(--ink); font-weight: 700; }
.hero-points { list-style: none; margin: 30px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 13px 26px; max-width: 32rem; }
.hero-points li { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; font-size: .98rem; color: var(--ink-soft); }
.check { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--amber-wash); display: grid; place-items: center; margin-top: 1px; }
.check svg { width: 12px; height: 12px; }
.hero-actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

/* ---------- Form card ---------- */
.form-card {
  background: var(--paper); border-radius: 22px; padding: 34px 32px;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line); position: relative;
}
.form-card::before {
  content: "Free • No Obligation"; position: absolute; top: -14px; left: 32px;
  background: var(--evergreen); color: #fff; font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px;
}
.form-card h3 { font-size: 1.6rem; color: var(--evergreen); margin-bottom: 4px; }
.form-card .sub { color: var(--muted); font-size: .95rem; margin-bottom: 22px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.field input, .field select {
  width: 100%; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 11px;
  font-family: inherit; font-size: .98rem; color: var(--ink); background: var(--cream);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input::placeholder { color: #a7b6bd; }
.field input:focus, .field select:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 4px rgba(239,159,28,.14); background: #fff; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-card .btn-primary { width: 100%; margin-top: 8px; }
.form-note { text-align: center; font-size: .8rem; color: var(--muted); margin-top: 14px; }
.form-success { display: none; text-align: center; padding: 30px 10px; }
.form-success.show { display: block; }
.form-success .ok { width: 62px; height: 62px; border-radius: 50%; background: var(--amber-wash); display: grid; place-items: center; margin: 0 auto 18px; }
.form-success .ok svg { width: 30px; height: 30px; }
.form-success h3 { color: var(--evergreen); margin-bottom: 8px; }
.form-success p { color: var(--ink-soft); }

/* ---------- Trust strip ---------- */
.trust { background: var(--evergreen); color: #fff; padding: 26px 0; }
.trust-row { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 11px; font-weight: 500; font-size: .96rem; }
.trust-item svg { width: 18px; height: 18px; flex: none; color: var(--amber-soft); }

/* ---------- Sections ---------- */
section.block { padding: 96px 0; }
.section-head { max-width: 40rem; }
.section-head.center { margin: 0 auto; text-align: center; }
.section-head h2 { font-size: clamp(2rem, 3.8vw, 2.9rem); color: var(--evergreen); margin: 16px 0 0; }
.section-head p { font-size: 1.12rem; color: var(--ink-soft); margin-top: 16px; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 56px; }
.step {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 30px 26px;
  box-shadow: var(--shadow-sm); position: relative; transition: transform .25s ease, box-shadow .25s ease;
}
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.step .num { font-family: "Fraunces", serif; font-size: 2.6rem; font-weight: 600; color: var(--amber-soft); line-height: 1; }
.step h3 { font-size: 1.22rem; color: var(--evergreen); margin: 14px 0 8px; }
.step p { color: var(--ink-soft); font-size: .97rem; }
.step:not(:last-child)::after {
  content: ""; position: absolute; top: 46px; right: -16px; width: 22px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--amber-soft) 0 5px, transparent 5px 10px);
}

/* Faster way */
.faster { background: var(--cream-2); }
.faster-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.faster-list { list-style: none; margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.faster-list li { display: flex; align-items: center; gap: 11px; font-weight: 500; color: var(--ink-soft); }
.faster-list .x { flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--evergreen); display: grid; place-items: center; }
.faster-list .x svg { width: 13px; height: 13px; color: var(--amber-soft); }
.faster-figure {
  position: relative; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg);
  aspect-ratio: 4/3; background: linear-gradient(135deg, var(--evergreen) 0%, var(--evergreen-700) 100%);
}
.faster-figure img { width: 100%; height: 100%; object-fit: cover; }
.faster-figure .badge {
  position: absolute; bottom: 20px; left: 20px; right: 20px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px); border-radius: 14px; padding: 18px 20px;
  display: flex; align-items: center; gap: 16px; box-shadow: var(--shadow-md);
}
.faster-figure .badge .big { font-family: "Fraunces", serif; font-size: 2rem; font-weight: 700; color: var(--evergreen); line-height: 1; }
.faster-figure .badge .lbl { font-size: .9rem; color: var(--ink-soft); font-weight: 500; }

/* Conditions grid */
.cond-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 52px; }
.cond {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 18px;
  text-align: center; transition: transform .2s ease, border-color .2s ease, background .2s ease;
  cursor: pointer;
}
.cond:hover { transform: translateY(-4px); border-color: var(--amber-soft); background: #fff; box-shadow: var(--shadow-sm); }
.cond .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--amber-wash); display: grid; place-items: center; margin: 0 auto 14px; }
.cond .ic svg { width: 23px; height: 23px; color: var(--amber); }
.cond span { font-weight: 600; font-size: .94rem; color: var(--ink); display: block; }

/* Final CTA */
.final { position: relative; overflow: hidden; background: var(--evergreen); color: #fff; border-radius: 26px; padding: 70px 60px; text-align: center; }
.final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 400px at 80% 0%, rgba(239,159,28,.30), transparent 60%); }
.final > * { position: relative; }
.final h2 { font-size: clamp(2rem, 4vw, 3rem); color: #fff; }
.final p { font-size: 1.15rem; color: rgba(255,255,255,.85); margin: 16px auto 32px; max-width: 36rem; }
.final .btn-primary { box-shadow: 0 10px 30px rgba(0,0,0,.25); }

/* Footer */
footer { background: #0f2129; color: #b6c5cc; padding: 64px 0 30px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.08); }
footer .brand { color: #fff; margin-bottom: 16px; }
footer .brand b { color: #fff; } footer .brand i { color: var(--amber-soft); }
footer p { font-size: .96rem; max-width: 24rem; }
footer h4 { font-family: "Fraunces", serif; color: #fff; font-size: 1.1rem; margin-bottom: 16px; font-weight: 600; }
footer ul { list-style: none; display: grid; gap: 10px; }
footer ul a, footer ul li { font-size: .95rem; color: #b6c5cc; }
footer ul a:hover { color: var(--amber-soft); }
.foot-bottom { padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .88rem; color: #7d909a; }

/* Reveal animation */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.hero .reveal { transition-delay: var(--d, 0s); }
/* Above-the-fold content must not wait for JavaScript. .reveal holds an element
   at opacity:0 until app.js adds .in - and app.js reveals the hero on window
   LOAD, meaning after every image on the page has finished downloading. The hero
   h1 is the LCP element, so the largest text on the page was painting last.
   The hero now animates itself in CSS, which starts at first paint and cannot be
   delayed by a script; the h1 is exempt outright, because an LCP element should
   render on the first frame rather than fade in. Everything below the fold still
   reveals on scroll through app.js exactly as before.

   Note the resting state is VISIBLE and the animation plays from hidden with
   fill-mode backwards, rather than the other way round. An element whose resting
   state is opacity:0 is invisible to anyone whose animation never runs - reduced
   motion, a background tab that is not compositing, an old browser - and that is
   the same trap .reveal fell into with JavaScript. The fade is decoration, so it
   is the thing allowed to fail. */
.hero .reveal{opacity:1;transform:none;animation:heroReveal .7s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:var(--d,0s)}
.hero h1.reveal{animation:none;opacity:1;transform:none}
@keyframes heroReveal{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero .reveal{animation:none;opacity:1;transform:none}}


/* ===========================================================
   SITUATION / LANDING PAGE STYLES
   =========================================================== */
/* Breadcrumb */
.breadcrumb { font-size: .85rem; color: var(--muted); padding: 18px 0 0; }
.breadcrumb a:hover { color: var(--amber); }
.breadcrumb span { color: var(--ink-soft); }

/* Situation hero */
.sit-hero { position: relative; padding: 30px 0 60px; }
.sit-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(239,159,28,.16), transparent 60%),
    radial-gradient(700px 600px at 0% 10%, rgba(28,122,166,.09), transparent 55%);
}
.sit-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 52px; align-items: start; }
.sit-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); color: var(--evergreen); margin: 16px 0 0; }
.sit-hero .lede { font-size: 1.15rem; color: var(--ink-soft); margin: 20px 0 0; }
.sit-hero .lede b { color: var(--ink); }
.sit-hero-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.sit-form-wrap { position: sticky; top: 96px; }

/* Article prose */
.article { padding: 20px 0 40px; }
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--evergreen); margin: 48px 0 16px; }
.prose h3 { font-size: 1.3rem; color: var(--evergreen); margin: 32px 0 10px; }
.prose p { color: var(--ink-soft); font-size: 1.05rem; margin: 0 0 16px; }
.prose p b, .prose strong { color: var(--ink); font-weight: 700; }
.prose > ul { list-style: none; margin: 8px 0 22px; display: grid; gap: 11px; }
.prose > ul li { position: relative; padding-left: 32px; color: var(--ink-soft); font-size: 1.04rem; }
.prose > ul li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--amber-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m5 12 5 5 9-10' stroke='%23ef9f1c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* Callout box */
.callout {
  background: linear-gradient(135deg, #eaf3f9, #f3f8fb); border: 1px solid var(--line);
  border-left: 4px solid var(--evergreen); border-radius: 12px; padding: 22px 24px; margin: 24px 0;
}
.callout p { margin: 0 0 10px; color: var(--ink-soft); }
.callout p:last-child { margin: 0; }

/* Data table */
.data-table { width: 100%; border-collapse: collapse; margin: 18px 0 26px; font-size: .98rem; box-shadow: var(--shadow-sm); border-radius: 12px; overflow: hidden; }
.data-table thead th { background: var(--evergreen); color: #fff; text-align: left; padding: 13px 16px; font-weight: 600; font-size: .95rem; }
.data-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink-soft); background: var(--paper); }
.data-table tr:nth-child(even) td { background: #f7fafc; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr.total td { font-weight: 700; color: var(--ink); background: var(--amber-wash); }

/* Comparison table (us vs them) */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 22px 0 28px; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--line); }
.compare .col { padding: 0; }
.compare .col-head { padding: 18px 22px; font-weight: 700; font-size: 1.02rem; }
.compare .us .col-head { background: var(--evergreen); color: #fff; }
.compare .them .col-head { background: #e7edf0; color: var(--ink-soft); }
.compare .col ul { list-style: none; }
.compare .col li { padding: 13px 22px; display: flex; align-items: flex-start; gap: 10px; font-size: .97rem; border-bottom: 1px solid var(--line); }
.compare .us li { background: var(--paper); color: var(--ink); }
.compare .them li { background: #fafbfc; color: var(--muted); }
.compare .col li:last-child { border-bottom: none; }
.compare .us li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m5 12 5 5 9-10' stroke='%231a7a4a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.compare .them li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 6l12 12M18 6 6 18' stroke='%23c0392b' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }

/* FAQ */
.faq { margin: 18px 0 10px; display: grid; gap: 12px; }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 4px 20px; box-shadow: var(--shadow-sm); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 0; font-weight: 600; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--amber); font-weight: 400; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-soft); padding: 0 0 18px; margin: 0; }

/* Related situations */
.related { background: var(--cream-2); }
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 36px; }
.related-grid a { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 18px; font-weight: 600; color: var(--ink); font-size: .95rem; transition: transform .2s ease, border-color .2s ease; }
.related-grid a:hover { transform: translateY(-3px); border-color: var(--amber-soft); color: var(--evergreen); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .faster-grid { grid-template-columns: 1fr; gap: 38px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step:not(:last-child)::after { display: none; }
  .cond-grid { grid-template-columns: repeat(3, 1fr); }
  .trust-row { justify-content: flex-start; gap: 16px 28px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .sit-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .sit-form-wrap { position: static; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  nav ul, .header-cta .phone-link { display: none; }
  .menu-toggle { display: block; }
  .hero { padding: 40px 0 64px; }
  .hero-points { grid-template-columns: 1fr; }
  .row-2 { grid-template-columns: 1fr; }
  .faster-list { grid-template-columns: 1fr; }
  .cond-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .final { padding: 50px 26px; }
  .foot-grid { grid-template-columns: 1fr; }
  section.block { padding: 68px 0; }
  .mobile-menu.open { display: flex; }
  .compare { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   BLOG
   =========================================================== */
.blog-head { padding: 36px 0 8px; }
.blog-head h1 { font-size: clamp(2.2rem, 4.4vw, 3.2rem); color: var(--evergreen); margin: 14px 0 0; }
.blog-head p { font-size: 1.12rem; color: var(--ink-soft); margin-top: 14px; max-width: 44rem; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 40px 0 10px; }
.post-card {
  display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.post-card .thumb { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--evergreen), var(--evergreen-700)); position: relative; }
.post-card .thumb span { position: absolute; left: 14px; top: 14px; background: var(--amber); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }
.post-card .body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.post-card .meta { font-size: .82rem; color: var(--muted); font-weight: 600; letter-spacing: .03em; }
.post-card h3 { font-size: 1.22rem; color: var(--evergreen); margin: 9px 0 8px; line-height: 1.18; }
.post-card p { font-size: .96rem; color: var(--ink-soft); margin: 0 0 16px; flex: 1; }
.post-card .more { font-weight: 700; color: var(--amber); font-size: .92rem; }
.post-card:hover .more { color: #d98c12; }

/* Article post header */
.post-hero { padding: 30px 0 8px; }
.post-hero .eyebrow { margin-bottom: 6px; }
.post-hero h1 { font-size: clamp(2rem, 4vw, 3rem); color: var(--evergreen); margin: 12px 0 0; max-width: 50rem; }
.post-meta { font-size: .9rem; color: var(--muted); font-weight: 600; margin-top: 16px; }
.post-cta {
  background: linear-gradient(135deg, #eaf3f9, #f3f8fb); border: 1px solid var(--line);
  border-radius: 16px; padding: 28px 30px; margin: 40px 0 10px; text-align: center;
}
.post-cta h3 { font-size: 1.5rem; color: var(--evergreen); margin-bottom: 8px; }
.post-cta p { color: var(--ink-soft); margin: 0 auto 18px; max-width: 34rem; }

@media (max-width: 980px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }

/* ===========================================================
   ADDRESS AUTOCOMPLETE DROPDOWN
   =========================================================== */
.ac-list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: 11px;
  box-shadow: var(--shadow-md); margin-top: 6px; overflow: hidden; display: none;
}
.ac-item { padding: 11px 15px; font-size: .94rem; color: var(--ink-soft); cursor: pointer; border-bottom: 1px solid var(--line); }
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.active { background: var(--amber-wash); color: var(--ink); }