/* Renew Upholstery — design system
 * Exact brand palette, dark/charcoal surfaces, warm green accents.
 * Editorial industrial-craft tone — no AI gradients, no purple, no neon.
 */

/* ---------- Tokens ---------- */
:root {
  --green: #5e9b03;
  --green-bright: #71b803;
  --green-deep: #4a7d02;
  --charcoal: #1c1c1c;
  --charcoal-2: #161616;
  --charcoal-3: #232323;
  --black: #000000;
  --gray: #757575;
  --gray-soft: #b5b5b5;
  --gray-line: #2c2c2c;
  --bone: #f5f4ef;
  --bone-2: #ecebe5;
  --white: #ffffff;

  --bg: var(--bone);
  --surface: var(--white);
  --ink: var(--charcoal);
  --ink-soft: #3a3a3a;
  --ink-mute: var(--gray);
  --rule: rgba(0, 0, 0, 0.12);
  --rule-strong: rgba(0, 0, 0, 0.22);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.18);

  --r-sm: 4px;
  --r: 8px;
  --r-lg: 14px;

  --container: 1240px;
  --container-narrow: 920px;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: var(--sans);
  --display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --t-fast: 180ms cubic-bezier(0.2, 0.6, 0.2, 1);
  --t: 320ms cubic-bezier(0.2, 0.6, 0.2, 1);
  --t-slow: 600ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, picture, video, svg { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--green-bright); color: var(--black); }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
  color: var(--ink);
}
h1 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; line-height: 1.25; }
h4 { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }

p { margin: 0 0 1em; }
.lede { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--ink-soft); line-height: 1.6; }
small, .small { font-size: 0.85rem; color: var(--ink-mute); }

a.inline-link {
  color: var(--ink);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color var(--t-fast);
}
a.inline-link:hover { color: var(--green-deep); }

ul, ol { padding-left: 1.2em; margin: 0 0 1em; }
li { margin-bottom: 0.4em; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(56px, 8vw, 112px) 0; }
.section-tight { padding: clamp(40px, 6vw, 80px) 0; }
.section-dark { background: var(--charcoal); color: var(--white); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--white); }
.section-dark .lede { color: rgba(255,255,255,0.78); }
.section-bone { background: var(--bone-2); }
.eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-deep);
  font-weight: 600;
  margin: 0 0 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.section-dark .eyebrow { color: var(--green-bright); }
.eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; display: inline-block; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(20,20,20,0.96);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: var(--white);
}
.nav-wrap {
  display: flex; align-items: center; gap: 18px;
  height: 64px; padding: 0 20px;
  max-width: 1320px; margin: 0 auto;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--white);
  flex-shrink: 0;
  margin-right: auto;
}
.brand-logo {
  height: 36px;
  width: auto;
  max-width: 200px;
  display: block;
  object-fit: contain;
}
.brand-logo-footer { height: 48px; max-width: 240px; }

.nav-primary { display: flex; gap: 2px; align-items: center; list-style: none; padding: 0; margin: 0; }
.nav-primary > li { list-style: none; position: relative; margin: 0; }
.nav-link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 12px; color: rgba(255,255,255,0.82); font-size: 0.92rem; font-weight: 500;
  border-radius: 4px; transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--white); background: rgba(255,255,255,0.06); }
.nav-link svg { width: 12px; height: 12px; opacity: 0.7; transition: transform var(--t-fast); }
.nav-link[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Mega-menu panels are pinned to the viewport so they stay centered under the
   header regardless of where the trigger sits in the nav. They are also
   capped vertically so the panel can never exceed the visible viewport at
   small heights (720/800/900/1000) — when content overflows, the inner
   grid scrolls while the CTA panel stays pinned at the bottom. */
.dropdown {
  position: fixed;
  top: 64px; /* header height — keep in sync with .nav-wrap height */
  left: 50%;
  transform: translate(-50%, -6px);
  background: var(--charcoal-2); color: var(--white);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r);
  padding: 16px;
  width: min(960px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  /* Vertical clamp: header (64px) + 10px margin-top + 24px bottom gutter = 98px. */
  max-height: calc(100vh - 98px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
  box-shadow: 0 30px 60px rgba(0,0,0,0.4);
  margin-top: 10px;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-fast), transform var(--t-fast), visibility 0s linear var(--t-fast);
  z-index: 60;
  pointer-events: none;
}
/* Invisible "hover bridge" so the pointer can travel from the trigger into
   the panel without crossing a dead zone that closes the dropdown. The bridge
   spans the full width of the panel and reaches up past the header gap. */
.dropdown::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -24px; height: 26px;
  background: transparent;
}
li.has-dropdown:hover .dropdown,
li.has-dropdown:focus-within .dropdown,
li.has-dropdown.is-open .dropdown,
.nav-link[aria-expanded="true"] + .dropdown {
  opacity: 1; visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
  transition: opacity var(--t-fast), transform var(--t-fast), visibility 0s;
}
.dropdown.dropdown-wide {
  width: min(960px, calc(100vw - 32px));
}
.dropdown.dropdown-wide.dropdown-areas {
  width: min(1120px, calc(100vw - 32px));
}
/* Inner grid — scrolls vertically when content exceeds the viewport-clamped
   panel height, so the CTA panel below remains visible. */
.dropdown-wide .dropdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Subtle scrollbar styling so it doesn't fight the dark panel. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.dropdown-wide .dropdown-grid::-webkit-scrollbar { width: 8px; }
.dropdown-wide .dropdown-grid::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18); border-radius: 8px;
}
.dropdown-wide .dropdown-grid::-webkit-scrollbar-track { background: transparent; }
.dropdown-wide.dropdown-areas .dropdown-grid {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
/* On narrower desktops where the four-column Areas grid would crowd, drop to
   three columns so the panel still fits comfortably within the viewport. */
@media (max-width: 1100px) {
  .dropdown-wide.dropdown-areas .dropdown-grid { grid-template-columns: 1fr 1fr 1fr; }
}
/* Mobile menu: region label inside the Service Areas accordion */
.mobile-region-label {
  margin: 14px 4px 4px;
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--green-bright); font-weight: 700;
}
.dropdown a {
  display: block; padding: 8px 10px; color: rgba(255,255,255,0.86); font-size: 0.92rem; border-radius: 4px;
}
.dropdown a strong { display: block; color: var(--white); font-weight: 600; font-size: 0.95rem; margin-bottom: 2px; }
.dropdown a:hover { background: rgba(113,184,3,0.12); color: var(--white); }
.dropdown-section-label {
  display: block; padding: 6px 10px; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--green-bright); font-weight: 600;
}
.dropdown-cta { grid-column: 1 / -1; margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); }
.dropdown-cta a { display: inline-flex; align-items: center; gap: 8px; color: var(--green-bright); font-weight: 600; }
/* CTA panel (Services + Areas mega menus) — pinned at the bottom of the
   panel so it stays visible while the grid above scrolls. */
.dropdown-cta-panel {
  flex: 0 0 auto;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: stretch;
}
.dropdown-cta-card {
  background: linear-gradient(180deg, rgba(113,184,3,0.10), rgba(113,184,3,0.04));
  border: 1px solid rgba(113,184,3,0.22);
  border-radius: var(--r);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.dropdown-cta-card-alt {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
}
.dropdown-cta-eyebrow {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--green-bright); font-weight: 700;
}
.dropdown-cta-card strong {
  display: block; color: var(--white); font-weight: 700; font-size: 1rem;
}
.dropdown-cta-card p {
  margin: 0; color: rgba(255,255,255,0.74); font-size: 0.85rem; line-height: 1.45;
}
.dropdown-cta-btn {
  align-self: flex-start; margin-top: 6px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--green-bright); color: var(--black) !important;
  border-radius: 999px; font-weight: 600; font-size: 0.85rem;
  transition: background var(--t-fast), transform var(--t-fast);
}
.dropdown-cta-btn:hover { background: var(--green) !important; color: var(--black) !important; transform: translateY(-1px); }
.dropdown-cta-btn-ghost {
  background: transparent; color: var(--green-bright) !important;
  border: 1px solid rgba(113,184,3,0.5);
}
.dropdown-cta-btn-ghost:hover {
  background: rgba(113,184,3,0.14) !important; color: var(--white) !important;
}
.dropdown-cta-link {
  align-self: center;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--green-bright) !important; font-weight: 600; font-size: 0.9rem;
  padding: 8px 10px;
}
.dropdown-cta-link:hover { color: var(--white) !important; }
@media (max-width: 1280px) {
  .dropdown-cta-panel { grid-template-columns: 1fr 1fr; }
  .dropdown-cta-link { grid-column: 1 / -1; justify-content: flex-end; }
}

.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; background: var(--green-bright); color: var(--black);
  border-radius: 999px; font-weight: 600; font-size: 0.9rem;
  transition: background var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-cta:hover { background: var(--green); transform: translateY(-1px); }
.nav-phone {
  color: rgba(255,255,255,0.92); font-weight: 600;
  font-size: 0.9rem;
  padding: 8px 6px; white-space: nowrap;
  flex-shrink: 0;
}
.nav-phone:hover { color: var(--green-bright); }

.nav-toggle { display: none; padding: 8px; flex-shrink: 0; }
.nav-toggle svg { width: 22px; height: 22px; color: var(--white); }

@media (max-width: 1180px) {
  .nav-primary, .nav-phone { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 600px) {
  .nav-wrap { height: 58px; padding: 0 14px; gap: 10px; }
  .brand-logo { height: 30px; max-width: 160px; }
  .nav-cta { padding: 8px 14px; font-size: 0.85rem; }
}

/* mobile menu */
.mobile-menu {
  position: fixed; inset: 0; background: var(--charcoal); color: var(--white);
  padding: 88px 24px 24px; overflow: auto; z-index: 100;
  transform: translateX(100%);
  transition: transform var(--t);
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu-close {
  position: absolute; top: 18px; right: 16px;
  width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,0.08);
  display: inline-flex; align-items: center; justify-content: center;
}
.mobile-menu-close svg { width: 20px; height: 20px; color: var(--white); }
.mobile-menu .group { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.mobile-menu .group > details > summary {
  list-style: none; cursor: pointer;
  padding: 14px 4px; font-size: 1.1rem; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary::after { content: "+"; color: var(--green-bright); font-size: 1.4rem; line-height: 1; }
.mobile-menu details[open] > summary::after { content: "−"; }
.mobile-menu .group a { display: block; padding: 10px 4px; color: rgba(255,255,255,0.85); font-size: 1rem; }
.mobile-menu .group a:hover { color: var(--green-bright); }
.mobile-menu .top-link { display: block; padding: 14px 4px; font-size: 1.1rem; font-weight: 600; }
.mobile-menu .mobile-cta { margin-top: 16px; display: grid; gap: 10px; }
.mobile-menu .mobile-cta a {
  display: block; text-align: center; padding: 14px 18px;
  background: var(--green-bright); color: var(--black); border-radius: 8px; font-weight: 700;
}
.mobile-menu .mobile-cta a.outline {
  background: transparent; border: 1px solid rgba(255,255,255,0.3); color: var(--white);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px; font-weight: 600; font-size: 0.98rem;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.btn-primary { background: var(--green-bright); color: var(--black); }
.btn-primary:hover { background: var(--green); color: var(--black); transform: translateY(-1px); box-shadow: 0 12px 24px rgba(94,155,3,0.3); }
.btn-dark { background: var(--charcoal); color: var(--white); }
.btn-dark:hover { background: var(--black); transform: translateY(-1px); }
.btn-outline { border: 1px solid var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: var(--white); }
.section-dark .btn-outline,
.hero .btn-outline,
.page-hero .btn-outline { border-color: rgba(255,255,255,0.45); color: var(--white); }
.section-dark .btn-outline:hover,
.hero .btn-outline:hover,
.page-hero .btn-outline:hover { background: var(--white); color: var(--charcoal); }
.btn-ghost { color: inherit; padding: 10px 0; border-bottom: 1px solid currentColor; border-radius: 0; }

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  background: var(--charcoal);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
  padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 7vw, 88px);
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center;
  max-width: 1320px; margin: 0 auto; padding: 0 24px;
  position: relative; z-index: 1;
}
.hero .hero-form-card { max-width: 480px; justify-self: end; width: 100%; }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero .hero-form-card { max-width: 100%; justify-self: stretch; }
}
.hero h1 { color: var(--white); font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.hero h1 .accent { color: var(--green-bright); font-style: normal; font-weight: 800; }
.hero p { font-size: 1.1rem; line-height: 1.6; color: rgba(255,255,255,0.78); max-width: 56ch; }
.hero-meta {
  display: flex; gap: 18px; margin-top: 32px; flex-wrap: wrap;
  font-size: 0.92rem; color: rgba(255,255,255,0.7);
}
.hero-meta strong { color: var(--white); display: block; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; }
.hero-meta div { padding-left: 16px; border-left: 2px solid var(--green-bright); }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }

.hero-form-card {
  background: var(--white);
  color: var(--ink);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  padding: clamp(22px, 2.6vw, 30px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.32);
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-self: start;
}
.hero-form-card.reveal {
  opacity: 1;
  transform: none;
}
.hero-form-card .eyebrow { color: var(--green-deep); margin-bottom: 0.5rem; }
.hero-form-card h2 {
  color: var(--ink);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 8px;
}
.hero-form-card p {
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.5;
  max-width: none;
  margin: 0 0 4px;
}
.hero-form-card form { margin-top: 18px; }
.hero-form-card .field { margin-bottom: 14px; }
.hero-form-card label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink); margin-bottom: 4px; }
.hero-form-card input,
.hero-form-card textarea,
.hero-form-card select {
  padding: 11px 13px;
  font-size: 0.95rem;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 8px;
  background: var(--white);
  width: 100%;
  min-width: 0;
}
.hero-form-card textarea { min-height: 96px; }
.hero-form-card .form-grid { gap: 12px; }
.hero-form-card .btn { width: 100%; justify-content: center; padding: 13px 20px; }
.hero-form-card .form-note { margin: 10px 0 0; text-align: center; font-size: 0.78rem; color: var(--ink-mute); }

.hero-image {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 4px;
  background: var(--charcoal-2);
}
.hero-image::before {
  content: ""; position: absolute; inset: 0;
  border: 1px solid rgba(255,255,255,0.1);
  pointer-events: none; z-index: 2;
}
.hero-image picture,
.hero-image img {
  width: 100%;
  height: 100%;
  display: block;
}
.hero-image img { object-fit: cover; }
.hero-image::after {
  content: ""; position: absolute; left: -16px; top: -16px; right: -16px; bottom: -16px;
  border: 1px solid var(--green-bright); border-radius: 4px;
  pointer-events: none; z-index: 1;
}
.hero-tag {
  position: absolute; bottom: 24px; left: 24px; right: 24px;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(10px);
  padding: 14px 18px; border-radius: 4px;
  font-size: 0.86rem; color: rgba(255,255,255,0.9); z-index: 3;
  border-left: 3px solid var(--green-bright);
}
.hero-tag strong { color: var(--white); display: block; }

/* Subtle texture overlay on hero */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 25% 30%, rgba(255,255,255,0.06) 1px, transparent 1.5px),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.04) 1px, transparent 1.5px);
  background-size: 220px 220px, 320px 320px;
  opacity: 0.7;
  mix-blend-mode: screen;
  z-index: 0;
}

@media (max-width: 700px) {
  .hero {
    padding: 48px 0 56px;
    background: var(--charcoal);
  }
  .hero-grid {
    gap: 28px;
  }
  .hero h1 {
    font-size: clamp(2.35rem, 12vw, 3.25rem);
    color: var(--white);
    text-shadow: 0 1px 0 rgba(0,0,0,0.22);
  }
  .hero h1 .accent {
    color: var(--green-bright);
  }
  .hero p {
    color: rgba(255,255,255,0.88);
    font-size: 1.02rem;
  }
  .hero .eyebrow {
    color: var(--green-bright);
  }
  .hero-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 12px;
    color: rgba(255,255,255,0.82);
  }
  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }
  .hero-image {
    aspect-ratio: 4 / 3;
  }
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  background: var(--charcoal); color: var(--white);
  padding: clamp(72px, 9vw, 128px) 0 clamp(40px, 6vw, 72px);
  position: relative;
}
.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.page-hero .hero-form-card { max-width: 460px; justify-self: end; width: 100%; }
.page-hero-copy { min-width: 0; }
.page-hero h1 { color: var(--white); margin-top: 12px; }
.page-hero p { color: rgba(255,255,255,0.78); max-width: 60ch; font-size: 1.05rem; }
.page-hero .breadcrumbs { color: rgba(255,255,255,0.5); font-size: 0.85rem; }
.page-hero .breadcrumbs a:hover { color: var(--green-bright); }
@media (max-width: 980px) {
  .page-hero-grid { grid-template-columns: 1fr; }
  .hero-form-card { max-width: 680px; }
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
  display: flex; flex-direction: column;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(94,155,3,0.4);
}
.card-img {
  aspect-ratio: 4/3;
  background: var(--charcoal-2);
  overflow: hidden;
}
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.card:hover .card-img img { transform: scale(1.04); }
.card-body { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.card-tag {
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--green-deep); font-weight: 600;
}
.card h3 { font-size: 1.2rem; margin: 0; }
.card p { color: var(--ink-soft); font-size: 0.95rem; }
.card-link {
  margin-top: auto; padding-top: 12px;
  font-size: 0.9rem; font-weight: 600; color: var(--ink);
  display: inline-flex; align-items: center; gap: 6px;
}
.card-link::after { content: "→"; transition: transform var(--t-fast); }
.card:hover .card-link::after { transform: translateX(4px); color: var(--green-deep); }

/* Service tiles (compact) */
.service-tile {
  display: block; padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  transition: border-color var(--t-fast), transform var(--t-fast), background var(--t-fast);
}
.service-tile:hover {
  border-color: var(--green);
  transform: translateY(-1px);
  background: var(--white);
}
.service-tile h4 { margin: 0 0 4px; font-size: 1.02rem; }
.service-tile span { color: var(--ink-mute); font-size: 0.85rem; }
.section-dark .service-tile { background: var(--charcoal-2); border-color: rgba(255,255,255,0.08); color: var(--white); }
.section-dark .service-tile:hover { border-color: var(--green-bright); }
.section-dark .service-tile span { color: rgba(255,255,255,0.55); }

/* ---------- Trust strip ---------- */
.trust-strip {
  background: var(--bone-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 28px 0;
}
.trust-list {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
  list-style: none; padding: 0; margin: 0;
  max-width: var(--container); margin-inline: auto; padding-inline: 24px;
}
.trust-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.9rem; font-weight: 600; color: var(--ink);
  padding: 0; margin: 0;
}
.trust-list li::before {
  content: ""; width: 8px; height: 8px; background: var(--green); border-radius: 50%;
  display: inline-block; flex: 0 0 8px;
}
@media (max-width: 1100px) { .trust-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .trust-list { grid-template-columns: 1fr 1fr; } }

/* ---------- Stats / numbers ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
@media (max-width: 800px) { .stats { grid-template-columns: 1fr 1fr; } }
.stat {
  padding: 24px 0; border-top: 2px solid var(--green-bright);
}
.stat strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600; line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.stat span { font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.section-dark .stat span { color: rgba(255,255,255,0.6); }

/* ---------- Reviews ---------- */
.review {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--green);
  padding: 24px;
  border-radius: var(--r);
  position: relative;
}
.review-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 0.82rem; color: var(--ink-mute); }
.review-stars { color: var(--green); letter-spacing: 1px; }
.review-source {
  display: inline-block; padding: 3px 8px; background: var(--charcoal); color: var(--white);
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 3px;
}
.review p { font-size: 1rem; line-height: 1.6; color: var(--ink); margin: 0; }
.review p::before { content: "\201C"; color: var(--green); font-size: 2.4em; line-height: 0.5; vertical-align: -0.5em; margin-right: 6px; font-family: var(--serif); }

/* ---------- Process ---------- */
.process {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  counter-reset: step;
}
@media (max-width: 900px) { .process { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .process { grid-template-columns: 1fr; } }
.process-step {
  position: relative; padding: 28px 22px;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--surface);
}
.process-step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--serif);
  font-size: 2.8rem; line-height: 1; color: var(--green);
  display: block; margin-bottom: 12px;
}
.process-step h4 { font-size: 1.1rem; margin: 0 0 6px; }
.process-step p { color: var(--ink-soft); font-size: 0.94rem; margin: 0; }
.section-dark .process-step { background: var(--charcoal-2); border-color: rgba(255,255,255,0.08); }
.section-dark .process-step p { color: rgba(255,255,255,0.7); }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color var(--t-fast);
}
.faq-item[open] { border-color: var(--green); }
.faq-item summary {
  list-style: none; cursor: pointer;
  padding: 18px 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-weight: 600; font-size: 1.02rem; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; color: var(--green); font-size: 1.6rem; line-height: 1;
  transition: transform var(--t-fast);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item .faq-body { padding: 0 24px 22px; color: var(--ink-soft); line-height: 1.6; }
.faq-item .faq-body :first-child { margin-top: 0; }

/* ---------- CTA banner ---------- */
.cta-banner {
  background: var(--charcoal);
  color: var(--white);
  border-radius: var(--r-lg);
  padding: clamp(36px, 6vw, 64px);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center;
  position: relative; overflow: hidden;
}
@media (max-width: 800px) { .cta-banner { grid-template-columns: 1fr; gap: 24px; } }
.cta-banner::before {
  content: ""; position: absolute; right: -40px; top: -40px; width: 240px; height: 240px;
  background: radial-gradient(circle at center, rgba(113,184,3,0.18), transparent 70%);
  border-radius: 50%; pointer-events: none;
}
.cta-banner h2 { color: var(--white); margin: 0 0 12px; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.cta-banner p { color: rgba(255,255,255,0.78); margin: 0; max-width: 50ch; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 800px) { .cta-actions { justify-content: flex-start; } }

/* ---------- Forms ---------- */
form .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
form label { font-size: 0.84rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink); }
form input, form textarea, form select {
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
form input:focus, form textarea:focus, form select:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(94,155,3,0.15);
}
form textarea { min-height: 140px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.form-note { font-size: 0.85rem; color: var(--ink-mute); }
.field-optional { color: var(--ink-mute); font-weight: 500; letter-spacing: 0; text-transform: none; }
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.form-status {
  min-height: 1.2em;
  margin: 10px 0 0;
  font-size: 0.88rem;
  font-weight: 600;
}
.form-status.is-success { color: #2e7d05; }
.form-status.is-error { color: #9f1d1d; }
button[disabled] { cursor: wait; opacity: 0.72; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { font-size: 0.84rem; }
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumbs li::after { content: "/"; margin: 0 6px; color: currentColor; opacity: 0.4; }
.breadcrumbs li:last-child::after { content: ""; margin: 0; }

/* ---------- Pill tags ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; background: rgba(94,155,3,0.1); color: var(--green-deep);
  font-size: 0.8rem; font-weight: 600; border-radius: 999px;
}
.section-dark .pill { background: rgba(113,184,3,0.18); color: var(--green-bright); }

/* ---------- Footer (mega) ---------- */
.site-footer {
  background: var(--black); color: rgba(255,255,255,0.7);
  padding: 0 0 28px;
  border-top: 4px solid var(--green-bright);
}

/* Top CTA strip */
.footer-cta {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center;
  padding: 48px 0 44px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-cta-copy h2 {
  color: var(--white); font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.2;
  margin: 8px 0 10px; letter-spacing: -0.01em;
}
.footer-cta-copy p { font-size: 0.98rem; max-width: 60ch; margin: 0; color: rgba(255,255,255,0.7); }
.footer-cta-copy .eyebrow { color: var(--green-bright); }
.footer-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.footer-cta-actions .btn-outline { color: var(--white); border-color: rgba(255,255,255,0.45); }
.footer-cta-actions .btn-outline:hover { background: rgba(255,255,255,0.06); border-color: var(--white); }
@media (max-width: 800px) {
  .footer-cta { grid-template-columns: 1fr; padding: 36px 0; }
  .footer-cta-actions { justify-content: flex-start; }
}

.footer-grid {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: 36px;
  padding: 48px 0 8px;
}
@media (max-width: 1100px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; } }
@media (max-width: 760px)  { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 480px)  { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }

.site-footer h4 {
  color: var(--white); font-family: var(--sans); font-size: 0.78rem;
  letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 14px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.site-footer a {
  color: rgba(255,255,255,0.72); display: block; padding: 5px 0; font-size: 0.94rem;
  transition: color var(--t-fast), transform var(--t-fast);
}
.site-footer a:hover { color: var(--green-bright); }
.site-footer .footer-allcaps { color: var(--green-bright); font-weight: 600; font-size: 0.86rem; letter-spacing: 0.04em; margin-top: 10px; }
.footer-pill {
  display: inline-block; margin-left: 8px; padding: 1px 8px; font-size: 0.65rem;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--black); background: var(--green-bright); border-radius: 999px;
  vertical-align: middle;
}

.site-footer .brand { color: var(--white); margin-bottom: 14px; display: inline-block; }
.site-footer .brand-logo-footer { display: block; }
.site-footer .blurb { font-size: 0.92rem; line-height: 1.6; max-width: 38ch; margin: 0 0 18px; color: rgba(255,255,255,0.7); }
.site-footer .footer-tag {
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--green-bright); margin: 6px 0 14px; font-weight: 600;
}

.footer-nap { margin: 18px 0 18px; }
.site-footer .contact-line {
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 10px; font-size: 0.94rem; color: rgba(255,255,255,0.78);
  padding: 0;
}
.site-footer .contact-line .icon {
  width: 16px; height: 16px; flex: 0 0 16px; margin-top: 3px;
  color: var(--green-bright);
}
.site-footer .contact-line a { display: inline; padding: 0; color: rgba(255,255,255,0.85); }
.site-footer .contact-line a:hover { color: var(--green-bright); }
.site-footer .contact-line strong { color: var(--white); font-weight: 600; }
.site-footer .contact-line-name .footer-business-name {
  color: var(--white); font-weight: 700; font-size: 1rem; letter-spacing: 0.01em;
}
.site-footer .text-mute { color: rgba(255,255,255,0.55); }

.footer-trust {
  list-style: none; padding: 0; margin: 18px 0 0;
  display: flex; flex-direction: column; gap: 8px;
}
.footer-trust li {
  font-size: 0.85rem; color: rgba(255,255,255,0.7);
  display: flex; gap: 10px; align-items: center;
}
.footer-trust .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green-bright);
  flex: 0 0 6px;
}

.footer-bottom {
  margin-top: 32px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 0.82rem; color: rgba(255,255,255,0.5);
}

/* ---------- Gallery ---------- */
.gallery {
  display: grid; gap: 14px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .gallery { grid-template-columns: 1fr; } }
.gallery figure {
  margin: 0; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--r);
  background: var(--charcoal-2);
  position: relative;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.gallery figure:hover img { transform: scale(1.05); }
.gallery figcaption {
  position: absolute; left: 12px; bottom: 12px; right: 12px;
  background: rgba(0,0,0,0.7); color: var(--white);
  font-size: 0.82rem; padding: 8px 12px; border-radius: 4px;
  opacity: 0; transition: opacity var(--t-fast);
}
.gallery figure:hover figcaption { opacity: 1; }
.gallery-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; }
.gallery-tabs button {
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--rule); background: transparent; color: var(--ink);
  font-size: 0.9rem; font-weight: 500; transition: all var(--t-fast);
}
.gallery-tabs button.is-active, .gallery-tabs button:hover { background: var(--charcoal); color: var(--white); border-color: var(--charcoal); }

/* ---------- Article body ---------- */
.article {
  max-width: 720px; margin: 0 auto; padding: 0 24px;
}
.article p, .article ul, .article ol { font-size: 1.08rem; line-height: 1.75; color: var(--ink); }
.article h2 { margin-top: 2.4em; }
.article h3 { margin-top: 1.8em; }
.article a:not(.btn) { color: var(--green-deep); text-decoration: underline; text-underline-offset: 3px; }
.article .answer-box {
  background: var(--bone-2);
  border-left: 4px solid var(--green);
  padding: 20px 24px;
  margin: 0 0 32px;
  border-radius: var(--r);
}
.article .answer-box p:last-child { margin-bottom: 0; }
.article .answer-box .label { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-deep); font-weight: 700; margin-bottom: 8px; display: block; }

/* ---------- Reveal animations (respect reduced motion) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(0.2, 0.6, 0.2, 1), transform 700ms cubic-bezier(0.2, 0.6, 0.2, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-clip {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 900ms cubic-bezier(0.55, 0, 0.1, 1);
}
.reveal-clip.is-visible { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-clip { opacity: 1; transform: none; clip-path: none; }
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  padding: 10px 14px; background: var(--green-bright); color: var(--black); font-weight: 600;
  border-radius: 4px; z-index: 200;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Utility ---------- */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.mt-0 { margin-top: 0; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mb-0 { margin-bottom: 0; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.text-center { text-align: center; }
.text-mute { color: var(--ink-mute); }
.section-dark .text-mute { color: rgba(255,255,255,0.6); }
.lead-grid { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 760px) { .lead-grid { grid-template-columns: 1fr; gap: 24px; } }

/* Sticky outline for blog/article pages */
.article-layout { display: grid; grid-template-columns: 240px 1fr; gap: 56px; max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.article-layout aside { position: sticky; top: 100px; align-self: start; padding-top: 32px; }
.article-layout aside h4 { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 12px; font-family: var(--sans); font-weight: 600; }
.article-layout aside ol { list-style: none; padding: 0; margin: 0; counter-reset: x; }
.article-layout aside li { counter-increment: x; padding: 6px 0; font-size: 0.92rem; }
.article-layout aside li::before { content: counter(x, decimal-leading-zero); margin-right: 8px; color: var(--green); font-family: var(--serif); }
.article-layout aside a { color: var(--ink-soft); }
.article-layout aside a:hover { color: var(--green-deep); }
@media (max-width: 900px) { .article-layout { grid-template-columns: 1fr; } .article-layout aside { position: static; padding: 0 0 24px; border-bottom: 1px solid var(--rule); margin-bottom: 24px; } }

/* ---------- Family feature (home story section) ---------- */
.family-feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.family-feature-image {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 460px;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: var(--charcoal-2);
  box-shadow: 0 24px 48px rgba(0,0,0,0.18);
  justify-self: start;
}
.family-feature-image picture,
.family-feature-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.family-feature-image figcaption {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px);
  color: var(--white);
  padding: 12px 14px;
  border-left: 3px solid var(--green-bright);
  border-radius: 4px;
  font-size: 0.82rem;
  line-height: 1.35;
}
.family-feature-image figcaption strong { display: block; color: var(--white); font-weight: 700; }
.family-feature-image figcaption span { color: rgba(255,255,255,0.78); font-size: 0.8rem; }
.family-feature-copy h2 { margin-top: 12px; }
.family-feature-points {
  list-style: none;
  padding: 0;
  margin: 24px 0 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  border-top: 1px solid var(--rule);
  padding-top: 22px;
}
.family-feature-points li {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.family-feature-points strong {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.family-feature-points span {
  font-size: 0.84rem;
  color: var(--ink-mute);
  line-height: 1.4;
}
@media (max-width: 900px) {
  .family-feature { grid-template-columns: 1fr; gap: 28px; }
  .family-feature-image { max-width: 100%; aspect-ratio: 4/3; justify-self: stretch; }
  .family-feature-points { grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (max-width: 520px) {
  .family-feature-points { grid-template-columns: 1fr 1fr; }
}

/* ---------- Materials grid (service pages) ---------- */
.materials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.material-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.material-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(94,155,3,0.4);
}
.material-card-img {
  aspect-ratio: 4/3;
  background: var(--charcoal-2);
  overflow: hidden;
}
.material-card-img picture, .material-card-img img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  transition: transform var(--t-slow);
}
.material-card:hover .material-card-img img { transform: scale(1.04); }
.material-card-body { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.material-card-body h3 { font-size: 1.15rem; margin: 4px 0; }
.material-card-body p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }
@media (max-width: 900px) { .materials-grid { grid-template-columns: 1fr; } }

/* ---------- Service page content image (clean, no decorative ring) ---------- */
.service-content-image {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 8px;
  background: var(--charcoal-2);
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}
.service-content-image picture,
.service-content-image img { width: 100%; height: 100%; display: block; object-fit: cover; }

.service-content-collage {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(150px, 0.8fr);
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  min-height: clamp(360px, 34vw, 520px);
  align-self: stretch;
  opacity: 1;
  clip-path: none;
  transform: none;
}
.service-process-grid .service-process-copy {
  opacity: 1;
  transform: none;
}
.service-content-collage figure {
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  background: var(--charcoal-2);
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
  position: relative;
}
.service-content-collage-main { grid-row: 1 / 3; }
.service-content-collage picture,
.service-content-collage img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.service-content-collage figure:hover img { transform: scale(1.04); }
@media (max-width: 980px) {
  .service-content-collage {
    grid-template-columns: 1fr 1fr;
    min-height: 0;
  }
  .service-content-collage-main {
    grid-column: 1 / 3;
    grid-row: auto;
    aspect-ratio: 16 / 9;
  }
  .service-content-collage-top,
  .service-content-collage-bottom {
    aspect-ratio: 4 / 3;
  }
}
@media (max-width: 560px) {
  .service-content-collage {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .service-content-collage-main {
    grid-column: auto;
  }
  .service-content-collage figure {
    aspect-ratio: 4 / 3;
  }
}

/* Service body image grid */
.service-body-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.service-body-grid figure {
  margin: 0;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 8px;
  background: var(--charcoal-2);
  position: relative;
}
.service-body-grid figure picture,
.service-body-grid figure img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  transition: transform var(--t-slow);
}
.service-body-grid figure:hover img { transform: scale(1.04); }
@media (max-width: 900px) { .service-body-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .service-body-grid { grid-template-columns: 1fr; } }

/* ---------- Image cards mosaic for home ---------- */
.mosaic {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  gap: 12px;
}
.mosaic > * { overflow: hidden; border-radius: var(--r); }
.mosaic > *:nth-child(1) { grid-row: 1 / 3; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.mosaic > *:hover img { transform: scale(1.04); }
@media (max-width: 700px) { .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 180px 180px 180px; } .mosaic > *:nth-child(1) { grid-column: 1 / 3; grid-row: 1; } }

/* ==========================================================
   Blog index + blog post — editorial layout
   ========================================================== */

/* ----- Blog index hero meta ----- */
.blog-hero .blog-hero-meta {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.78);
}
.blog-hero .blog-hero-meta li { display: inline-flex; gap: 6px; align-items: baseline; }
.blog-hero .blog-hero-meta strong { color: var(--white); font-weight: 600; }

/* ----- Featured post (blog index) ----- */
.featured-post {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.featured-post-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--charcoal-2);
}
.featured-post-media picture,
.featured-post-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow);
}
.featured-post:hover .featured-post-media img { transform: scale(1.03); }
.featured-post-flag {
  position: absolute; top: 16px; left: 16px;
  background: var(--green-bright); color: var(--black);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
}
.featured-post-body {
  padding: clamp(24px, 3.5vw, 40px) clamp(24px, 3.5vw, 40px) clamp(24px, 3.5vw, 40px) 0;
  min-width: 0;
}
.featured-post-body h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin: 12px 0 12px;
}
.featured-post-body h2 a:hover { color: var(--green-deep); }
.featured-post-answer {
  background: var(--bone-2);
  border-left: 3px solid var(--green);
  padding: 14px 16px;
  border-radius: var(--r);
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0 0 20px;
}
.featured-post-answer strong { color: var(--ink); }
.featured-post-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
@media (max-width: 900px) {
  .featured-post { grid-template-columns: 1fr; }
  .featured-post-body { padding: 20px 24px 28px; }
}

/* ----- Filter pill bar ----- */
.blog-filter-bar {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
  background: var(--surface);
  position: sticky;
  top: 64px;
  z-index: 5;
}
.blog-filter-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.blog-filter-label {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  flex-shrink: 0;
}
.blog-filter-pills {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.blog-pill {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.blog-pill:hover { background: var(--charcoal); color: var(--white); border-color: var(--charcoal); }
.blog-pill.is-active { background: var(--green-bright); color: var(--black); border-color: var(--green-bright); }
@media (max-width: 700px) {
  .blog-filter-bar { position: static; }
  .blog-filter-pills { gap: 6px; }
  .blog-pill { padding: 6px 12px; font-size: 0.82rem; }
}

/* ----- Blog card grid ----- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
.blog-grid-compact { gap: 22px; }
@media (max-width: 980px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
  min-width: 0;
}
.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(94,155,3,0.4);
}
.blog-card-media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--charcoal-2);
  overflow: hidden;
}
.blog-card-media picture,
.blog-card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow);
}
.blog-card:hover .blog-card-media img { transform: scale(1.04); }

.blog-card-body {
  padding: 22px 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.blog-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  text-transform: uppercase;
  font-weight: 600;
}
.blog-card-cat { color: var(--green-deep); }
.blog-card-dot { color: var(--ink-mute); opacity: 0.6; }
.blog-card-meta time { font-weight: 500; letter-spacing: 0.02em; text-transform: none; }
.blog-card h3 {
  margin: 4px 0 6px;
  font-size: 1.18rem;
  line-height: 1.25;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.blog-card h3 a:hover { color: var(--green-deep); }
.blog-card p { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 12px; }
.blog-card .card-link { margin-top: auto; }
.blog-card-compact h3 { font-size: 1.08rem; }
.blog-card-compact .blog-card-body { padding: 18px 20px 20px; }

/* ----- Local SEO band on /blog/ ----- */
.blog-local-band p { color: var(--ink-soft); }

/* ==========================================================
   Blog post (single article)
   ========================================================== */

.blog-article { display: block; }

/* Hero band — keep the dark page-hero look with the same estimate form used sitewide */
.blog-post-hero { padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); }
.blog-post-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.72fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
  text-align: left;
}
.blog-post-hero-copy { min-width: 0; }
.blog-post-hero .hero-form-card {
  max-width: 430px;
  justify-self: end;
}
.blog-post-hero h1 {
  color: var(--white);
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  margin: 14px 0 18px;
  line-height: 1.08;
}
.blog-post-hero .lede {
  color: rgba(255,255,255,0.82);
  font-size: clamp(1.05rem, 1.4vw, 1.18rem);
  max-width: 70ch;
}
.blog-post-eyebrow {
  color: var(--green-bright);
  font-weight: 700;
}
.blog-post-meta {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 24px;
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: 20px;
}
.blog-post-meta li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
  min-width: 0;
}
.blog-post-meta time { color: rgba(255,255,255,0.85); }
.blog-post-meta-label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
}
@media (max-width: 760px) {
  .blog-post-meta { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  .blog-post-hero-inner {
    grid-template-columns: 1fr;
    max-width: 760px;
  }
  .blog-post-hero .hero-form-card {
    max-width: 680px;
    justify-self: stretch;
  }
}
@media (max-width: 460px) {
  .blog-post-meta { grid-template-columns: 1fr; gap: 12px; }
}

/* Hero image — sits between dark hero and the article body */
.blog-post-image-band {
  background: linear-gradient(to bottom, var(--charcoal) 0%, var(--charcoal) 50%, var(--bg) 50%, var(--bg) 100%);
  padding: 0 0 0;
}
.blog-post-hero-image {
  margin: 0 auto;
  max-width: 1080px;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
  background: var(--charcoal-2);
  position: relative;
}
.blog-post-hero-image picture,
.blog-post-hero-image img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.blog-post-hero-image figcaption {
  font-size: 0.82rem;
  color: var(--ink-mute);
  padding: 12px 4px 0;
  background: var(--bg);
  text-align: center;
}
@media (max-width: 600px) {
  .blog-post-image-band { background: var(--charcoal); padding-bottom: 0; }
  .blog-post-hero-image { border-radius: 0; box-shadow: none; }
  .blog-post-hero-image figcaption { display: none; }
}

/* Two-column body grid */
.blog-post-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(32px, 4vw, 56px);
  max-width: 1140px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 980px) {
  .blog-post-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Sidebar */
.blog-post-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 88px;
  align-self: start;
  order: 2;
  min-width: 0;
}
@media (max-width: 980px) {
  .blog-post-sidebar { position: static; order: 0; }
}

.blog-toc {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 18px 20px;
}
.blog-toc h4 {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 12px;
  font-weight: 700;
}
.blog-toc ol {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: tocnum;
}
.blog-toc li {
  counter-increment: tocnum;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  font-size: 0.92rem;
  line-height: 1.4;
}
.blog-toc li:last-child { border-bottom: 0; }
.blog-toc li::before {
  content: counter(tocnum, decimal-leading-zero);
  margin-right: 8px;
  color: var(--green);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.blog-toc a { color: var(--ink-soft); }
.blog-toc a:hover { color: var(--green-deep); }

.blog-post-cta-card {
  background: var(--charcoal);
  color: var(--white);
  border-radius: var(--r-lg);
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.blog-post-cta-card .eyebrow { color: var(--green-bright); margin: 0; }
.blog-post-cta-card h4 { color: var(--white); font-size: 1.1rem; line-height: 1.25; margin: 4px 0 4px; }
.blog-post-cta-card p { color: rgba(255,255,255,0.78); font-size: 0.92rem; margin: 0 0 6px; }
.blog-post-cta-card .btn { width: 100%; justify-content: center; }
.blog-post-cta-card .btn-ghost {
  color: var(--white);
  border-color: rgba(255,255,255,0.45);
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.45);
  padding: 10px 0;
}
.blog-post-cta-card .btn-ghost:hover { color: var(--green-bright); border-color: var(--green-bright); }
.blog-post-cta-foot {
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.55) !important;
  margin-top: 6px !important;
  line-height: 1.5;
}

/* Article body */
.blog-post-body { min-width: 0; order: 1; }

.blog-takeaway {
  background: var(--bone-2);
  border-left: 4px solid var(--green-bright);
  padding: 18px 22px;
  border-radius: var(--r);
  margin: 0 0 28px;
}
.blog-takeaway-label {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-deep);
  font-weight: 700;
  margin-bottom: 6px;
}
.blog-takeaway p { font-size: 1.02rem; color: var(--ink); margin: 0; line-height: 1.55; }

.blog-quick-answer {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 18px 22px;
  margin: 0 0 32px;
}
.blog-quick-answer .eyebrow { color: var(--green-deep); margin-bottom: 6px; }
.blog-quick-answer p { margin: 0; }

.blog-article-prose { max-width: 720px; margin: 0; padding: 0; }
.blog-article-prose p,
.blog-article-prose ul,
.blog-article-prose ol { font-size: 1.06rem; line-height: 1.75; color: var(--ink); }
.blog-article-prose h2 {
  margin-top: 2em;
  margin-bottom: 0.6em;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  scroll-margin-top: 96px;
}
.blog-article-prose h2:first-child { margin-top: 0; }
.blog-article-prose h3 { margin-top: 1.6em; }
.blog-article-prose a:not(.btn) {
  color: var(--green-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.blog-article-prose a:not(.btn):hover { color: var(--green); }
.blog-article-prose ul li,
.blog-article-prose ol li { margin-bottom: 6px; }

/* Pull quote */
.blog-pullquote {
  margin: 36px 0;
  padding: 22px 0 22px 24px;
  border-left: 4px solid var(--green-bright);
  background: linear-gradient(to right, rgba(94,155,3,0.04), transparent 70%);
}
.blog-pullquote blockquote {
  margin: 0 0 8px;
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.blog-pullquote figcaption {
  font-size: 0.85rem;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}

/* FAQ inside article */
.blog-faq h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 0 0 16px; scroll-margin-top: 96px; }
.blog-faq .faq-body { padding: 0 24px 22px; color: var(--ink-soft); line-height: 1.6; }

/* End-cap CTA at the bottom of the article */
.blog-endcap {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 36px);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  box-shadow: var(--shadow-sm);
}
.blog-endcap h3 { margin: 8px 0 10px; font-size: clamp(1.25rem, 2vw, 1.6rem); }
.blog-endcap p { color: var(--ink-soft); margin: 0; }
.blog-endcap-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.blog-endcap-actions .btn { justify-content: center; width: 100%; }
@media (max-width: 720px) {
  .blog-endcap { grid-template-columns: 1fr; }
}