/* ==========================================================================
   Tennessee Cash For Land - Design System
   Modern, professional, earthy. Static CSS for easy WordPress migration.
   ========================================================================== */

/* ---- Design Tokens ------------------------------------------------------- */
:root {
  /* Brand color palette - Tennessee Cash For Homes: green + charcoal on white/cream */
  --color-primary: #2F855A;        /* accessible green (AA 5.16:1) - text, links, buttons */
  --color-primary-dark: #276749;   /* hover / emphasis */
  --color-primary-darker: #1e4d38; /* deep green - footer, dark sections */
  --color-primary-soft: #d4ede0;   /* pale mint tint - backgrounds, badges */
  --color-accent: #84CC9C;         /* soft sage green - decoration, fills, accents */
  --color-accent-dark: #5aab78;    /* mid green - accent hover */

  --color-ink: #2b2b2b;        /* headings - charcoal */
  --color-body: #3D3D3D;       /* paragraph text - charcoal */
  --color-muted: #6B7280;      /* secondary text - muted gray */
  --color-cream: #FAF9F6;      /* warm off-white section background */
  --color-cream-2: #F2F2F2;    /* neutral light gray */
  --color-surface: #ffffff;
  --color-border: #e0e0e0;
  --color-border-strong: #cbcbcb;

  --color-success: #2F855A;
  --color-error: #c0392b;

  /* Typography */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-hero: clamp(2.4rem, 5vw, 3.9rem);
  --fs-h1: clamp(2rem, 4vw, 3rem);
  --fs-h2: clamp(1.6rem, 3vw, 2.3rem);
  --fs-h3: clamp(1.2rem, 2vw, 1.45rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Radius / shadow / motion */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.14);

  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);

  --container: 1160px;
}

/* ---- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--color-body);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, picture { display: block; max-width: 100%; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-dark); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}

/* Accessibility: visible focus */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-primary-darker);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  z-index: 200;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---- Layout helpers ------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section { padding-block: var(--space-9); }
.section--tight { padding-block: var(--space-8); }
.section--cream { background: var(--color-cream); }
.section--dark {
  background: linear-gradient(160deg, var(--color-primary-darker), var(--color-primary-dark));
  color: #dfeee5;
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

.center { text-align: center; }
.measure { max-width: 56ch; }
.measure-wide { max-width: 68ch; }
.mx-auto { margin-inline: auto; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.section--dark .eyebrow { color: var(--color-accent); }

.section-head { margin-bottom: var(--space-7); }
.section-head h2 { font-size: var(--fs-h2); margin-bottom: var(--space-3); }
.section-head p { font-size: var(--fs-lead); color: var(--color-muted); }
.section--dark .section-head p { color: #bcd7c6; }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 0.95rem 1.6rem;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition),
              background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--color-primary-dark); color: #fff; box-shadow: var(--shadow-md); transform: translateY(-1px); }

.btn--accent {
  background: var(--color-accent);
  color: #1e3a2a;
  box-shadow: var(--shadow-sm);
}
.btn--accent:hover { background: var(--color-accent-dark); color: #15281d; transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn--ghost {
  background: transparent;
  color: var(--color-primary-dark);
  border-color: var(--color-border-strong);
}
.btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary-dark); background: var(--color-primary-soft); }

.btn--light {
  background: #fff;
  color: var(--color-primary-dark);
}
.btn--light:hover { background: var(--color-cream); color: var(--color-primary-darker); transform: translateY(-1px); }

.btn--lg { padding: 1.1rem 2rem; font-size: 1.05rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* ---- Header / Nav -------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 76px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-ink);
  letter-spacing: -0.02em;
}
.brand:hover { color: var(--color-ink); }
.brand__mark { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.brand__name { font-size: 1.02rem; line-height: 1.15; white-space: nowrap; }
.brand__name span { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary); white-space: nowrap; }

.nav__links {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1.4rem;
  list-style: none;
  padding: 0;
}
.nav__links a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-ink);
  padding: var(--space-2) 0;
  position: relative;
  white-space: nowrap;
}
.nav__links a:hover { color: var(--color-primary); }
.nav__links a.is-active { color: var(--color-primary); }
.nav__links a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
}
.nav__cta { display: flex; align-items: center; gap: var(--space-3); }
.nav__cta .btn { padding: 0.72rem 1.15rem; font-size: 0.94rem; }
.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--color-ink);
  white-space: nowrap;
}
.nav__phone:hover { color: var(--color-primary); }

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  width: 44px; height: 44px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: "";
  display: block;
  width: 20px; height: 2px;
  background: var(--color-ink);
  position: relative;
  transition: var(--transition);
}
.nav__toggle span::before { position: absolute; top: -6px; }
.nav__toggle span::after { position: absolute; top: 6px; }

/* ---- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(132, 204, 156, 0.28), transparent 60%),
    linear-gradient(165deg, #faf9f6 0%, #eef6f1 60%, #e7f1eb 100%);
  overflow: hidden;
}

/* Home page hero: full-bleed landscape photo with a slight tint for legibility */
.hero--home {
  background:
    linear-gradient(100deg,
      rgba(18, 40, 28, 0.42) 0%,
      rgba(18, 40, 28, 0.30) 40%,
      rgba(18, 40, 28, 0.14) 70%,
      rgba(18, 40, 28, 0.08) 100%),
    url("../assets/hero.webp") center 40% / cover no-repeat;
}

/* White copy on the home hero photo (form card keeps its dark text) */
.hero--home .eyebrow,
.hero--home .hero__title,
.hero--home .hero__lead,
.hero--home .hero__trust-item { color: #fff; }
.hero--home .hero__title { font-family: 'Poppins', var(--font-display); }
.hero--home .hero__title .hl { color: #84CC9C; }
.hero--home .hero__trust-item svg { color: #fff; }
.hero--home .eyebrow,
.hero--home .hero__title,
.hero--home .hero__lead,
.hero--home .hero__trust-item {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
/* Ghost button stays readable on the photo */
.hero--home .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.10);
}
.hero--home .btn--ghost:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.20);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-8);
  align-items: center;
  padding-block: var(--space-9);
}
.hero__title { font-size: var(--fs-hero); margin-bottom: var(--space-4); }
.hero__title .hl { color: var(--color-primary); }
.hero__lead { font-size: var(--fs-lead); color: var(--color-body); max-width: 50ch; margin-bottom: var(--space-6); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-6); }
.hero__trust { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-6); }
.hero__trust-item { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--color-ink); font-size: 0.95rem; }
.hero__trust-item svg { color: var(--color-primary); flex: none; }

/* ---- Lead form card ------------------------------------------------------ */
.lead-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
}
.lead-card__head { text-align: center; margin-bottom: var(--space-5); }
.lead-card__head h2 { font-size: 1.4rem; margin-bottom: var(--space-2); }
.lead-card__head p { color: var(--color-muted); font-size: var(--fs-small); }
.lead-card__badge {
  display: inline-block;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
}

/* ---- Forms --------------------------------------------------------------- */
.form-row { display: grid; gap: var(--space-4); }
.form-row--2 { grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.field label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--color-ink);
}
.field .req { color: var(--color-error); }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-ink);
  background: #fff;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.9rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-primary); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(47, 133, 90, 0.18);
}
.field input::placeholder, .field textarea::placeholder { color: #9aa8a0; }
.field--error input, .field--error select, .field--error textarea { border-color: var(--color-error); }
.field__error { color: var(--color-error); font-size: 0.8rem; display: none; }
.field--error .field__error { display: block; }

.form-note { font-size: 0.8rem; color: var(--color-muted); text-align: center; margin-top: var(--space-3); }
.form-success {
  display: none;
  text-align: center;
  padding: var(--space-5);
}
.form-success svg { margin: 0 auto var(--space-4); color: var(--color-primary); }
.form-success h3 { margin-bottom: var(--space-2); }
.is-submitted .form-body { display: none; }
.is-submitted .form-success { display: block; }

/* ---- Logo strip / stats -------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  text-align: center;
}
.stat__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--color-primary); line-height: 1; }
.section--dark .stat__num { color: var(--color-accent); }
.stat__label { font-size: var(--fs-small); color: var(--color-muted); margin-top: var(--space-2); }
.section--dark .stat__label { color: #bcd7c6; }

/* ---- Steps --------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.step {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  margin-bottom: var(--space-4);
}
.step__icon { color: var(--color-primary); margin-bottom: var(--space-4); }
.step h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.step p { color: var(--color-body); }

/* ---- Feature / benefit cards --------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.card h3 { font-size: 1.2rem; margin-bottom: var(--space-2); }
.card p { color: var(--color-body); font-size: 0.97rem; }

/* A card that is itself a link — the land-type grid. Laid out as a column so
   the "Learn more" row can be pushed to the bottom and stay aligned across a
   row of cards whose descriptions run to different lengths. */
a.card--link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
a.card--link:hover { color: inherit; }
a.card--link h3 { transition: color var(--transition); }
a.card--link:hover h3 { color: var(--color-primary); }
.card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--color-primary);
}
.card__more svg { transition: transform var(--transition); }
a.card--link:hover .card__more svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  a.card--link:hover .card__more svg { transform: none; }
}

/* A card grid holding a number of cards that does not divide by three, so the
   trailing row centres instead of leaving a visible hole in the layout. Used
   by the land-type cross-links, which always show the five types other than
   the one being read. Flex rather than grid because CSS grid has no way to
   centre an orphan row. */
.cards--fit { display: flex; flex-wrap: wrap; justify-content: center; }
.cards--fit > .card { flex: 0 1 calc((100% - 2 * var(--space-5)) / 3); }
@media (max-width: 980px) {
  .cards--fit > .card { flex: 0 1 calc((100% - var(--space-5)) / 2); }
}
@media (max-width: 720px) {
  .cards--fit > .card { flex: 0 1 100%; }
}

/* ---- Split / comparison -------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; }
.split__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-cream-2);
  min-height: 360px;
}
.split__media svg { width: 100%; height: 100%; }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.split h2 { font-size: var(--fs-h2); margin-bottom: var(--space-4); }
.checklist { list-style: none; padding: 0; display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.checklist li { display: flex; align-items: flex-start; gap: var(--space-3); }
.checklist li svg { color: var(--color-primary); flex: none; margin-top: 3px; }
.checklist li strong { color: var(--color-ink); font-family: var(--font-display); }

/* Comparison table-ish */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.compare__col { border-radius: var(--radius-lg); padding: var(--space-6); border: 1px solid var(--color-border); }
.compare__col--us { background: var(--color-primary-soft); border-color: #bfe0cb; }
.compare__col--them { background: var(--color-cream); }
.compare__col h3 { font-size: 1.2rem; margin-bottom: var(--space-4); }
.compare__list { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.compare__list li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 0.97rem; }
.compare__list li svg { flex: none; margin-top: 2px; }
.compare__col--us li svg { color: var(--color-primary); }
.compare__col--them li svg { color: #b04a3c; }

/* ---- Testimonials -------------------------------------------------------- */
.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.quote {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.quote__stars { color: var(--color-accent); letter-spacing: 2px; }
.quote p { color: var(--color-body); font-size: 1rem; }
.quote__by { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
.quote__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700;
  flex: none;
}
.quote__name { font-family: var(--font-display); font-weight: 700; color: var(--color-ink); font-size: 0.95rem; }
.quote__meta { font-size: 0.82rem; color: var(--color-muted); }

/* ---- FAQ (accordion) ----------------------------------------------------- */
.faq { max-width: 800px; margin-inline: auto; display: grid; gap: var(--space-3); }
.faq__item { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; overflow: hidden; }
.faq__q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-5);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.faq__q:hover { color: var(--color-primary); }
.faq__icon { flex: none; transition: transform var(--transition); color: var(--color-primary); }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__a { padding: 0 var(--space-5) var(--space-5); color: var(--color-body); }
.faq__item[open] .faq__q { color: var(--color-primary); }

/* ---- CTA band ------------------------------------------------------------ */
.cta-band {
  background:
    radial-gradient(800px 300px at 15% 0%, rgba(132, 204, 156, 0.20), transparent 60%),
    linear-gradient(160deg, var(--color-primary-dark), var(--color-primary-darker));
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  color: #e8f3ec;
  box-shadow: var(--shadow-lg);
}
.cta-band h2 { color: #fff; font-size: var(--fs-h2); margin-bottom: var(--space-3); }
.cta-band p { font-size: var(--fs-lead); margin-bottom: var(--space-6); color: #cfe6d8; }
.cta-band .hero__actions { justify-content: center; margin-bottom: 0; }

/* ---- Sister-brand callout ------------------------------------------------ */
.brand-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
}
.brand-switch__card {
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  border: 1px solid var(--color-border);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.brand-switch__card--active { background: var(--color-primary-soft); border-color: #bfe0cb; }
.brand-switch__icon {
  width: 64px; height: 64px; border-radius: var(--radius-md);
  background: var(--color-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.brand-switch__card--home .brand-switch__icon { background: var(--color-accent-dark); }
.brand-switch__card h3 { font-size: 1.45rem; }
.brand-switch__card p { flex: 1; }

/* ---- Page hero (interior pages) ------------------------------------------ */
.page-hero {
  background:
    radial-gradient(900px 400px at 85% -20%, rgba(132, 204, 156, 0.22), transparent 60%),
    linear-gradient(165deg, #faf9f6, #e9f1ea);
  padding-block: var(--space-9);
  text-align: center;
}
.page-hero h1 { font-size: var(--fs-h1); margin-bottom: var(--space-4); }
.page-hero p { font-size: var(--fs-lead); color: var(--color-body); }

/* The blog index leads with the articles, not with its own header, so it and
   every topic view run a shorter, smaller version of the page hero. */
.page-hero--tight { padding-block: var(--space-6) var(--space-7); }
.page-hero--tight .breadcrumb { margin-bottom: var(--space-3); }
.page-hero--tight .eyebrow { margin-bottom: var(--space-3); }
.page-hero--tight h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: var(--space-3); }
.page-hero--tight p { font-size: clamp(1rem, 1.25vw, 1.08rem); max-width: 58ch; }
.breadcrumb { font-size: var(--fs-small); color: var(--color-muted); margin-bottom: var(--space-4); }
.breadcrumb a { color: var(--color-primary); }

/* ---- Process timeline (How it works) ------------------------------------- */
.timeline { display: grid; gap: var(--space-6); max-width: 880px; margin-inline: auto; }
.tl-item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--space-5);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.tl-item__num {
  width: 72px; height: 72px;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.8rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.tl-item h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.tl-item__meta { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 0.82rem; font-weight: 600; color: var(--color-primary); margin-top: var(--space-3); }

/* ---- Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--color-primary-darker);
  color: #bcd7c6;
  padding-block: var(--space-8) var(--space-6);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1.1fr 1fr 1fr 1.2fr;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}
.site-footer .brand__name { color: #fff; }
.site-footer .brand:hover .brand__name { color: #fff; }
.footer-about p { margin-top: var(--space-4); max-width: 36ch; font-size: 0.92rem; color: #a9c8b4; }
.footer-col h4 { color: #fff; font-size: 0.95rem; margin-bottom: var(--space-4); letter-spacing: 0.02em; }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.footer-col a { color: #bcd7c6; font-size: 0.92rem; }
.footer-col a:hover { color: #fff; }
.footer-contact a { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.footer-contact p { font-size: 0.9rem; margin-top: var(--space-2); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 0.82rem;
  color: #94b6a2;
}
.footer-bottom a { color: #94b6a2; }
.footer-bottom a:hover { color: #fff; }

/* ---- Utilities ----------------------------------------------------------- */
.stack-sm > * + * { margin-top: var(--space-3); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.hide-mobile { }
.disclaimer { font-size: 0.8rem; color: var(--color-muted); }

/* ---- Animations ---------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms ease, transform 600ms ease; }
  .reveal.is-visible { opacity: 1; transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .hero--home {
    background:
      linear-gradient(180deg,
        rgba(18, 40, 28, 0.34) 0%,
        rgba(18, 40, 28, 0.24) 55%,
        rgba(18, 40, 28, 0.14) 100%),
      url("../assets/hero.webp") center / cover no-repeat;
  }
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .steps, .cards, .testimonials { grid-template-columns: 1fr 1fr; }
  .split, .compare, .brand-switch { grid-template-columns: 1fr; }
  .split__media { min-height: 280px; order: -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}

@media (max-width: 720px) {
  .steps, .cards, .testimonials { grid-template-columns: 1fr; }
  .form-row--2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .tl-item { grid-template-columns: 1fr; }
  .tl-item__num { width: 60px; height: 60px; font-size: 1.5rem; }
  .section { padding-block: var(--space-8); }
  .cta-band { padding: var(--space-6); }
}

@media (max-width: 420px) {
  .container { padding-inline: var(--space-4); }
  .hero__actions .btn { width: 100%; }
}

/* ==========================================================================
   Extended components - dropdown nav, blog, article, about, regions, social
   ========================================================================== */

/* ---- Nav dropdown (Resources) -------------------------------------------- */
.nav__item { position: relative; }
.nav__dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-ink);
  padding: var(--space-2) 0;
  white-space: nowrap;
}
.nav__dropdown-toggle:hover { color: var(--color-primary); }
.nav__dropdown-toggle svg { transition: transform var(--transition); }
.nav__item:hover .nav__dropdown-toggle svg,
.nav__item.is-open .nav__dropdown-toggle svg { transform: rotate(180deg); }
.nav__dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-2);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 120;
}
.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown,
.nav__item.is-open .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav__dropdown li { margin: 0; }
.nav__dropdown a {
  display: block;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-ink);
}
.nav__dropdown a:hover { background: var(--color-primary-soft); color: var(--color-primary-dark); }

/* ---- Blog ---------------------------------------------------------------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post-card__media { aspect-ratio: 16 / 10; background: var(--color-cream-2); overflow: hidden; }
.post-card__media svg { width: 100%; height: 100%; }
.post-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.post-card__tag {
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  background: var(--color-primary-soft);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
}
.post-card__title { font-size: 1.2rem; line-height: 1.25; }
.post-card__title a { color: var(--color-ink); }
.post-card__title a:hover { color: var(--color-primary); }
.post-card__excerpt { color: var(--color-body); font-size: 0.95rem; flex: 1; }
.post-card__meta { font-size: 0.82rem; color: var(--color-muted); display: flex; gap: var(--space-3); align-items: center; }
.post-card__link { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; }

.post-featured {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-7);
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.post-featured__media { min-height: 320px; height: 100%; background: var(--color-cream-2); }
.post-featured__media svg { width: 100%; height: 100%; }
.post-featured__body { padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-4); }
.post-featured__body h2 { font-size: var(--fs-h2); }

/* ---- Blog directory: topic filter tabs ----------------------------------- */
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}
.blog-filter__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-ink);
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.blog-filter__tab:hover {
  border-color: var(--color-accent);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.blog-filter__tab.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.blog-filter__count {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--color-cream-2);
  color: var(--color-muted);
}
.blog-filter__tab:hover .blog-filter__count { background: #fff; color: var(--color-primary-dark); }
.blog-filter__tab.is-active .blog-filter__count { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* While a filter click is fetching its view (see the blog filter block in
   js/main.js), dim the results so the tap registers. The tabs stay solid. */
#main.is-swapping .blog-grid,
#main.is-swapping .blog-empty,
#main.is-swapping .blog-pagination { opacity: 0.5; }
.blog-grid, .blog-empty, .blog-pagination { transition: opacity var(--transition); }

/* ---- Blog directory: pagination ------------------------------------------ */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.blog-pagination__numbers { display: flex; align-items: center; gap: var(--space-2); }
.blog-pagination__btn,
.blog-pagination__numbers .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.blog-pagination__btn { padding: 0.55rem 1.05rem; }
.blog-pagination__numbers .page-numbers { min-width: 40px; height: 40px; padding: 0 0.5rem; }
.blog-pagination__btn:hover,
.blog-pagination__numbers a.page-numbers:hover {
  border-color: var(--color-accent);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.blog-pagination__numbers .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.blog-pagination__numbers .page-numbers.dots {
  border-color: transparent;
  background: none;
  color: var(--color-muted);
  min-width: 24px;
}
.blog-pagination__btn.is-disabled {
  color: var(--color-muted);
  background: var(--color-cream-2);
  border-color: var(--color-border);
  opacity: 0.6;
  cursor: default;
}

.blog-empty {
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-5);
}
.blog-empty p { color: var(--color-muted); margin-bottom: var(--space-5); }

/* ---- Single post layout: article + sidebar -------------------------------- */
/* Post header and hero run the full container width, above the grid, so the
   two-column area below starts at the first paragraph. This mirrors the
   layout used on tennesseecashforhomes.com. */
.post-head { margin-bottom: var(--space-5); }

/* Back link sits on the same row as the topic chip, above the title. */
.post-head__top {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
/* .post-card__tag ships align-self: flex-start for the card grid; the chip
   needs to sit centered against the taller back link here. */
.post-head__top .post-card__tag { align-self: center; }
.post-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-ink);
  transition: color var(--transition);
}
.post-back:hover { color: var(--color-primary); }
.post-back__arrow { transition: transform var(--transition); }
.post-back:hover .post-back__arrow { transform: translateX(-3px); }
@media (prefers-reduced-motion: reduce) {
  .post-back__arrow,
  .post-back:hover .post-back__arrow { transition: none; transform: none; }
}
.post-hero { margin-bottom: 40px; }
.post-hero img,
.post-hero svg {
  display: block;
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  border-radius: 12px;
}

.post-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}
.post-grid .article { max-width: none; margin-inline: 0; min-width: 0; }

/* Sticky sidebar. It only travels because html/body use overflow-x: clip
   rather than hidden; hidden would make them scroll containers and disable
   sticky entirely. `top` clears the sticky site header. It cannot rise above
   the first paragraph (the grid starts there) and cannot outlast its grid
   area, so it releases at the end of the article. */
.post-sidebar {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
  position: sticky;
  top: 100px;
  align-self: start;
}

/* ---- Related posts, bottom of the article column -------------------------- */
.related-posts-bottom { margin-top: 48px; padding-top: 32px; border-top: 2px solid var(--color-border); }
.related-posts-bottom__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-ink);
  margin: 0 0 var(--space-5);
}
.related-posts-bottom__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.related-posts-bottom__card { display: flex; flex-direction: column; gap: var(--space-3); color: var(--color-ink); }
.related-posts-bottom__thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-cream-2);
}
.related-posts-bottom__thumb img,
.related-posts-bottom__thumb svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.related-posts-bottom__card-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  color: var(--color-ink);
}
.related-posts-bottom__card:hover .related-posts-bottom__card-title { color: var(--color-primary); }

.side-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.side-card__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.side-card__label--accent { color: var(--color-primary); }
.side-card__icon { width: 18px; height: 18px; flex: none; }

.side-card__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.22;
  color: var(--color-ink);
}
.side-card__text { margin: 0 0 var(--space-4); font-size: 0.95rem; color: var(--color-body); }
.side-card__btn { width: 100%; justify-content: center; }

.side-links, .side-toc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.side-links a { display: flex; gap: var(--space-2); align-items: baseline; font-size: 0.95rem; line-height: 1.4; color: var(--color-ink); }
.side-links a:hover { color: var(--color-primary); }
.side-links__arrow { color: var(--color-primary); flex: none; }
.side-toc a { display: block; font-size: 0.95rem; line-height: 1.4; color: var(--color-body); }
.side-toc a:hover { color: var(--color-primary); }

/* Below the two-column breakpoint the sidebar unsticks and moves above the
   article as a pair of cards, matching the houses site. */
@media (max-width: 1023px) {
  .post-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .post-sidebar {
    position: static;
    order: -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .post-hero img, .post-hero svg { max-height: 380px; }
}
@media (max-width: 767px) {
  .post-sidebar { grid-template-columns: 1fr; }
  .related-posts-bottom__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .post-hero { margin-bottom: 24px; }
  .post-hero img, .post-hero svg { max-height: 240px; border-radius: 10px; }
}

/* ---- Article (single post) ----------------------------------------------- */
.article { max-width: 760px; margin-inline: auto; }
/* Land-type pages run the body copy the full width of the container instead of
   the 760px reading column the blog posts use. These are landing pages rather
   than articles, and the narrow column read as a blog post dropped onto a
   marketing page. */
.article--wide { max-width: none; }
/* Image breaking up the body copy on a land-type page. Cropped to a wide strip
   so it reads as a band across the column rather than a second hero. */
.article__figure {
  margin: var(--space-7) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--color-cream-2);
}
.article__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 6;
  object-fit: cover;
}
@media (max-width: 720px) {
  .article__figure img { aspect-ratio: 16 / 9; }
}
.article__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; font-size: 0.88rem; color: var(--color-muted); margin-bottom: var(--space-5); }
.article__media { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-6); box-shadow: var(--shadow-md); background: var(--color-cream-2); aspect-ratio: 16 / 8; }
.article__media svg { width: 100%; height: 100%; }

/* Featured images must fill their frame edge to edge, whatever the source
   aspect ratio. Without this, the global `img { height: auto }` in the mobile
   pass lets the photo keep its natural ratio and letterbox inside the card.
   Class specificity beats that bare `img` selector regardless of source order. */
.post-card__media img,
.post-featured__media img,
.article__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.article__body > * + * { margin-top: var(--space-4); }
.article__body h2 { font-size: var(--fs-h3); margin-top: var(--space-6); }
.article__body h3 { font-size: 1.2rem; margin-top: var(--space-5); }
.article__body p { color: var(--color-body); font-size: 1.05rem; }
.article__body ul { padding-left: 1.2rem; color: var(--color-body); display: grid; gap: var(--space-2); }
.article__body li { font-size: 1.05rem; }
.article__body strong { color: var(--color-ink); }
.article__callout {
  border-left: 4px solid var(--color-primary);
  background: var(--color-primary-soft);
  padding: var(--space-5);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--color-ink);
}
.article__callout p { color: var(--color-ink); }
.post-author { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.post-author__avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--color-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; flex: none; }
.post-author__name { font-family: var(--font-display); font-weight: 700; color: var(--color-ink); }
.post-author__meta { font-size: 0.85rem; color: var(--color-muted); }

/* ---- About: values, story, team ------------------------------------------ */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.value {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: transform var(--transition), box-shadow var(--transition);
}
.value:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.value__icon {
  width: 54px; height: 54px; border-radius: var(--radius-md);
  background: var(--color-primary-soft); color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
}
.value h3 { font-size: 1.15rem; margin-bottom: var(--space-2); }
.value p { font-size: 0.97rem; color: var(--color-body); }

.team__banner { max-width: 720px; margin: 0 auto var(--space-7); text-align: center; }
.team__banner img { width: 100%; height: auto; display: block; }
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.member { text-align: center; }
.member__photo {
  width: 168px; height: 168px; border-radius: 50%;
  margin: 0 auto var(--space-4);
  background: var(--color-primary-soft);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.member__photo img {
  width: 100%; height: 100%; display: block;
  /* Source shots are 1280x720 with a transparent background and the subject
     centered, so `cover` fills the circle top-to-bottom and only trims the
     empty sides. */
  object-fit: cover; object-position: center;
}
.member h3 { font-size: 1.15rem; }
.member__role { font-size: 0.9rem; color: var(--color-primary); font-weight: 600; }
.member p { font-size: 0.92rem; color: var(--color-body); margin-top: var(--space-2); }

/* ---- Where we buy: region cards + county chips --------------------------- */
.regions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.region {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.region__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.region__icon { width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.region h3 { font-size: 1.2rem; }
.region p { font-size: 0.95rem; color: var(--color-body); margin-bottom: var(--space-4); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; }
.chips li { font-size: 0.85rem; font-weight: 600; color: var(--color-primary-dark); background: var(--color-cream); border: 1px solid var(--color-border); padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); }

.county-grid { columns: 4; column-gap: var(--space-6); list-style: none; padding: 0; }
.county-grid li { break-inside: avoid; padding: 0.35rem 0; display: flex; align-items: center; gap: var(--space-2); font-size: 0.95rem; color: var(--color-body); }
.county-grid li svg { color: var(--color-primary); flex: none; }

/* ---- Footer social ------------------------------------------------------- */
.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.footer-social a {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); color: #cfe6d8;
  border: 1px solid rgba(255,255,255,0.14);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.footer-social a:hover { background: var(--color-accent); color: #15281d; transform: translateY(-2px); }

/* ---- Newsletter band ----------------------------------------------------- */
.subscribe { display: flex; gap: var(--space-3); max-width: 480px; margin: var(--space-5) auto 0; }
.subscribe input {
  flex: 1;
  font-family: var(--font-body); font-size: 1rem;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  padding: 0.85rem 1.2rem;
}
.subscribe input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(47,133,90,0.18); }

/* ---- Prose helper -------------------------------------------------------- */
.prose > * + * { margin-top: var(--space-4); }
.prose p { color: var(--color-body); }
.prose h2 { font-size: var(--fs-h3); margin-top: var(--space-6); }

/* ---- Extended responsive ------------------------------------------------- */
@media (max-width: 980px) {
  .blog-grid, .values, .team, .regions { grid-template-columns: 1fr 1fr; }
  .post-featured { grid-template-columns: 1fr; }
  .post-featured__media { min-height: 240px; }
  .county-grid { columns: 3; }
}

/* ---- Collapse to hamburger nav on tablets & narrow desktops -------------- */
@media (max-width: 1120px) {
  .nav__links, .nav__phone { display: none; }
  .nav__toggle { display: inline-flex; }

  /* Mobile menu panel */
  .site-header.is-open .nav__links {
    display: flex;
    position: absolute;
    top: 76px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    padding: var(--space-3) var(--space-5);
  }
  .site-header.is-open .nav__links li { border-bottom: 1px solid var(--color-border); }
  .site-header.is-open .nav__links li:last-child { border-bottom: none; }
  .site-header.is-open .nav__links a { display: block; padding: var(--space-4) 0; }

  /* Resources dropdown shown inline inside the mobile menu */
  .site-header.is-open .nav__item { width: 100%; }
  .site-header.is-open .nav__dropdown-toggle { width: 100%; justify-content: space-between; padding: var(--space-4) 0; font-size: 0.92rem; }
  .site-header.is-open .nav__dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    display: block;
    box-shadow: none;
    border: none;
    padding: 0 0 var(--space-3) var(--space-4);
    min-width: 0;
  }
  .site-header.is-open .nav__item:hover .nav__dropdown-toggle svg { transform: none; }
}

@media (max-width: 720px) {
  .blog-grid, .values, .team, .regions { grid-template-columns: 1fr; }
  .county-grid { columns: 2; }
  .post-featured__body { padding: var(--space-6); }
  .article__body p, .article__body li { font-size: 1rem; }
  .subscribe { flex-direction: column; }
  .subscribe .btn { width: 100%; }
  .nav__cta .btn { padding: 0.68rem 1.05rem; font-size: 0.9rem; }

  /* Topic tabs become one swipeable row instead of wrapping to four lines.
     Negative margins let it bleed to the screen edge so the last tab is
     visibly cut off, which is what signals it scrolls. */
  .blog-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--space-5) * -1);
    padding-inline: var(--space-5);
    padding-bottom: var(--space-2);
  }
  .blog-filter::-webkit-scrollbar { display: none; }

  .blog-pagination { flex-wrap: wrap; justify-content: center; }
  .blog-pagination__numbers { order: -1; width: 100%; justify-content: center; }
}

@media (max-width: 420px) {
  .county-grid { columns: 1; }
}

/* ==========================================================================
   Mobile optimization pass
   Fixes horizontal overflow, tightens spacing, and adds a sticky mobile
   call-to-action bar. Appended last so these rules win the cascade.
   ========================================================================== */

/* Never allow the page to scroll sideways on small screens */
/* `clip` prevents sideways scrolling exactly like `hidden` did, but without
   turning html/body into a scroll container. `hidden` here silently broke
   `position: sticky` for every descendant, including the post sidebar. */
html, body { overflow-x: clip; }
img, svg, picture, video, iframe { max-width: 100%; height: auto; }

/* Let flex children shrink instead of forcing the header wider than the screen */
.nav, .nav__cta, .brand { min-width: 0; }
.brand__name { min-width: 0; }

/* Sticky mobile CTA bar - hidden by default, revealed on phones below.
   Base rule declared BEFORE the media query so the query wins the cascade. */
.m-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: none;
  align-items: center;
  gap: var(--space-3);
  padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(150%) blur(10px);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.10);
}
.m-cta a { flex: 1 1 0; }
.m-cta .btn { width: 100%; padding: 0.85rem 0.6rem; font-size: 0.98rem; }
.m-cta .btn svg { flex: none; }

/* ---- Phones: declutter the header, reveal the sticky action bar ---------- */
@media (max-width: 640px) {
  /* The header CTA crowds the logo + hamburger on narrow screens.
     Drop it here - the sticky bar carries the primary action instead. */
  .nav__cta > .btn { display: none; }

  /* Keep the logo + name from ever pushing the hamburger off-screen */
  .brand__mark { width: 40px; height: 40px; }
  .brand__name { font-size: 0.95rem; }
  .brand__name span { font-size: 0.62rem; }

  /* Show the sticky bottom action bar */
  .m-cta { display: flex; }

  /* Room so the bar never covers the last of the page (incl. iOS safe area) */
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- Tighter vertical rhythm on phones ----------------------------------- */
@media (max-width: 720px) {
  .hero__grid { padding-block: var(--space-7) var(--space-6); gap: var(--space-6); }
  .page-hero { padding-block: var(--space-7); }
  .page-hero--tight { padding-block: var(--space-5) var(--space-6); }
  .hero__title { margin-bottom: var(--space-3); }
  .hero__lead { margin-bottom: var(--space-5); }
  .hero__actions { margin-bottom: var(--space-5); }
  .section-head { margin-bottom: var(--space-6); }
  .cta-band { padding: var(--space-6) var(--space-5); }
}

/* On phones the two hero buttons stack full-width for easy tapping */
@media (max-width: 560px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .cta-band .hero__actions { flex-direction: column; }
  .stats { gap: var(--space-5) var(--space-4); }
  .lead-card { padding: var(--space-5); }
}