/* Charlie Lawn Care — combined design system
   Ported from SRC/assets/site.css + homepage <style> block.
   CSS custom properties (var(--sage) etc.) are used throughout patterns. */

:root {
  --paper: #faf9f2;
  --paper-2: #f1f0e5;
  --mint: #e9f0d6;
  --mint-2: #d8e7ba;
  --ink: #1b2015;
  --ink-2: #464a3b;
  --muted: #868a76;
  --sage: #57713f;
  --sage-mid: #6c8a4d;
  --sage-deep: #3c5230;
  --leaf: #88a85f;
  --amber: #cf9a3f;
  --clay: #c2693f;
  --clay-deep: #a4522c;
  --clay-soft: #f1ddd0;
  --clay-light: #e3a47e;
  --line: #e3e4d4;
  --line-2: #d4d7c3;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
}

/* ---------- base / reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--paper); color: var(--ink); line-height: 1.6;
  -webkit-font-smoothing: antialiased; font-weight: 400; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- layout ---------- */
.wide { max-width: 1280px; margin: 0 auto; padding: 0 48px; }

/* ---------- utility ---------- */
.label { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--clay); font-weight: 600;
  display: inline-flex; align-items: center; gap: 9px; }
.label::before { content: ""; width: 14px; height: 2px; background: var(--clay); display: inline-block; }
.stars { color: var(--amber); letter-spacing: 2px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-weight: 500; font-size: 15px;
  padding: 13px 24px; border-radius: 6px; cursor: pointer; border: 1px solid transparent; transition: all .2s ease; white-space: nowrap; background: none; }
.btn-fill { background: var(--sage); color: #fff; border-color: var(--sage); }
.btn-fill:hover { background: var(--sage-deep); border-color: var(--sage-deep); transform: translateY(-1px); }
.btn-line { color: var(--ink); border-color: var(--line-2); }
.btn-line:hover { background: var(--mint); border-color: var(--sage); color: var(--sage-deep); }
.btn-light { background: #fff; color: var(--sage-deep); border-color: #fff; }
.btn-light:hover { background: var(--mint); border-color: var(--mint); }

/* ---- Core button block bridge ----
   Patterns use wp:button with .btn/.btn-fill/.btn-line/.btn-light on the
   .wp-block-button wrapper. Neutralize the inner core link so the wrapper's
   .btn* styles (and their context overrides) are what render. */
.wp-block-button.btn { display: inline-flex; }
.wp-block-button.btn > .wp-block-button__link {
  background-color: transparent;
  background: none;
  color: inherit;
  border: 0;
  padding: 13px 24px;
  margin: 0;
  border-radius: 6px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  width: 100%;
  justify-content: inherit;
}
/* Make the wrapper itself the colored button surface */
.wp-block-button.btn { padding: 0; border-radius: 6px; border: 1px solid transparent; transition: all .2s ease; overflow: hidden; }
.wp-block-button.btn.btn-fill { background-color: var(--sage); border-color: var(--sage); }
.wp-block-button.btn.btn-fill > .wp-block-button__link { color: #fff; }
.wp-block-button.btn.btn-fill:hover { background-color: var(--sage-deep); border-color: var(--sage-deep); transform: translateY(-1px); }
.wp-block-button.btn.btn-line { background-color: transparent; border-color: var(--line-2); }
.wp-block-button.btn.btn-line > .wp-block-button__link { color: var(--ink); }
.wp-block-button.btn.btn-line:hover { background-color: var(--mint); border-color: var(--sage); }
.wp-block-button.btn.btn-line:hover > .wp-block-button__link { color: var(--sage-deep); }
.wp-block-button.btn.btn-light { background-color: #fff; border-color: #fff; }
.wp-block-button.btn.btn-light > .wp-block-button__link { color: var(--sage-deep); }
.wp-block-button.btn.btn-light:hover { background-color: var(--mint); border-color: var(--mint); }
/* Context overrides re-scoped to the wrapper-as-button */
.hero .wp-block-button.btn.btn-fill, .hero .wp-block-button.btn.btn-fill:hover { background-color: #fff; border-color: #fff; }
.hero .wp-block-button.btn.btn-fill > .wp-block-button__link { color: var(--sage-deep); }
.hero .wp-block-button.btn.btn-line, .phero .wp-block-button.btn.btn-line, .cta-band .wp-block-button.btn.btn-line { background-color: transparent; border-color: rgba(255,255,255,.45); }
.hero .wp-block-button.btn.btn-line > .wp-block-button__link, .phero .wp-block-button.btn.btn-line > .wp-block-button__link, .cta-band .wp-block-button.btn.btn-line > .wp-block-button__link { color: #fff; }
.hero .wp-block-button.btn.btn-line:hover, .phero .wp-block-button.btn.btn-line:hover, .cta-band .wp-block-button.btn.btn-line:hover { background-color: rgba(255,255,255,.12); border-color: #fff; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--sage);
  border-bottom: 1px solid var(--line-2); padding-bottom: 3px; transition: gap .2s, border-color .2s; }
.link-arrow:hover { gap: 14px; border-color: var(--sage); }

/* ---------- placeholder image ---------- */
.ph { position: relative; overflow: hidden; background: var(--mint);
  background-image: repeating-linear-gradient(45deg, rgba(87,113,63,.07) 0 1px, transparent 1px 11px);
  display: flex; align-items: center; justify-content: center; }
.ph span { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px; letter-spacing: .1em;
  color: var(--sage); text-transform: uppercase; text-align: center; padding: 0 16px; }

/* ---------- header ---------- */
header.site { position: sticky; top: 0; z-index: 50; background: rgba(250,249,242,.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
header.site .wide { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: flex; align-items: baseline; gap: 9px; }
.brand b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.brand .sq { width: 9px; height: 9px; border-radius: 2px; background: var(--sage); display: inline-block; align-self: center; }
header.site .brand .brand-logo { height: 38px; width: auto; align-self: center; display: block; margin-right: 1px; }
.brand small { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.brand-text { display: flex; align-items: baseline; gap: 9px; }
.brand p { margin: 0; }
.brand .brand-b b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
nav.main { display: flex; gap: 32px; }
nav.main a { font-size: 15px; color: var(--ink-2); transition: color .15s; }
nav.main a:hover, nav.main a.active { color: var(--sage); }
.header-r { display: flex; align-items: center; gap: 22px; }
.header-r .ph-num { font-size: 15px; font-weight: 600; color: var(--sage-deep); }
/* mobile nav toggle — hidden on desktop, shown under 940px */
.nav-toggle { display: none; }
.nav-burger { display: none; }
.nav-phone { display: none; }

/* ---------- hero (homepage · full-bleed centered) ---------- */
.hero { padding: 24px 0 0; }
.hero-stage { position: relative; border-radius: 12px; overflow: hidden; min-height: 620px;
  display: flex; align-items: center; justify-content: center; text-align: center; }
.hero-stage .ph { position: absolute; inset: 0; background-color: #28321d;
  background-size: cover; background-position: center 60%; }
.hero-stage .ph span { display: none; }
.hf-scrim { position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15,23,10,.55) 0%, rgba(15,23,10,.42) 38%, rgba(15,23,10,.62) 100%),
    radial-gradient(95% 80% at 50% 48%, rgba(10,16,7,.45), rgba(10,16,7,.18)); }
.hf-content { position: relative; z-index: 2; padding: 48px; display: flex; flex-direction: column; align-items: center; }
.hf-chip { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; letter-spacing: .04em; color: #fff;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.28); padding: 8px 16px; border-radius: 100px; backdrop-filter: blur(6px); }
.hf-chip .stars { font-size: 12px; }
.hf-content h1 { font-size: 84px; color: #fff; margin: 26px 0 18px; text-shadow: 0 2px 28px rgba(0,0,0,.38); }
.hf-content h1 .it { font-style: italic; color: var(--clay-light); font-weight: 400; }
.hf-content p { font-size: 18px; color: rgba(255,255,255,.95); max-width: 42ch; text-shadow: 0 1px 16px rgba(0,0,0,.35); }
.hf-content .cta-row { display: flex; gap: 12px; margin-top: 32px; }
.hero .btn-fill { background: #fff; color: var(--sage-deep); border-color: #fff; }
.hero .btn-fill:hover { background: var(--mint); color: var(--sage-deep); border-color: var(--mint); }
.hero .btn-line { color: #fff; border-color: rgba(255,255,255,.45); }
.hero .btn-line:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.hero-meta { display: flex; justify-content: center; padding: 26px 4px 0; font-size: 14px; color: var(--ink-2); flex-wrap: wrap; gap: 14px 44px; }
.hero-meta p { margin: 0; }
.hero-meta span { display: inline-flex; gap: 9px; align-items: center; }
.hero-meta span::before { content: ""; width: 6px; height: 6px; background: var(--clay); border-radius: 50%; }

/* ---------- interior page hero ---------- */
.phero { position: relative; }
.phero .wide { padding-top: 24px; }
.phero-stage { position: relative; border-radius: 12px; overflow: hidden; min-height: 420px;
  display: flex; align-items: flex-end; }
.phero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.phero-scrim { position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15,23,10,.55) 0%, rgba(15,23,10,.42) 38%, rgba(15,23,10,.62) 100%),
    radial-gradient(95% 80% at 50% 48%, rgba(10,16,7,.45), rgba(10,16,7,.18)); }
.phero-in { position: relative; z-index: 2; padding: 44px; max-width: 760px; }
.crumb { font-size: 13px; color: rgba(255,255,255,.82); margin-bottom: 16px; display: flex; gap: 8px; align-items: center; }
.crumb a:hover { color: #fff; }
.crumb span { opacity: .6; }
.phero-in h1 { font-size: 60px; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.phero-in p { font-size: 18px; color: rgba(255,255,255,.95); margin-top: 16px; max-width: 48ch; text-shadow: 0 1px 14px rgba(0,0,0,.3); }
.phero-in .cta-row { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.phero .btn-line { color: #fff; border-color: rgba(255,255,255,.45); }
.phero .btn-line:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
/* seasonal gradient heroes */
.bg-leaf { background: radial-gradient(120% 100% at 20% 0%, #e7b35a 0%, #cf8a3b 38%, #b4632e 72%, #8f4a26 100%); }
.bg-snow { background: radial-gradient(120% 100% at 25% 0%, #cfe0ea 0%, #9db9cc 45%, #6f8ca3 80%, #4e6b82 100%); }

/* ---------- hero intro band ---------- */
.hero-intro { padding: 56px 0 8px; }
.hero-intro .wide { max-width: 880px; }
.hero-intro p { font-size: 25px; line-height: 1.4; letter-spacing: -.01em; color: var(--ink); font-weight: 400; text-wrap: pretty; }
.hero-intro p b { font-weight: 600; }
.hero-intro .hi-accent { color: var(--sage); }

/* ---------- generic sections ---------- */
section.block { padding: 92px 0; }
.block.mint { background: var(--mint); }
.block.paper2 { background: var(--paper-2); }
.sec-top { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 44px; gap: 12px; }
.sec-top h2 { font-size: 42px; max-width: none; }   /* keep section headings on one line */
.sec-top p { font-size: 16px; color: var(--ink-2); max-width: none; }   /* full-width sentence on desktop; wraps naturally on smaller screens */
.lead { font-size: 25px; line-height: 1.4; letter-spacing: -.01em; max-width: 30ch; }
.lead b { font-weight: 600; }
.lead .accent { color: var(--sage); }

/* ---------- services — image cards ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.svc-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--paper);
  display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; cursor: pointer; }
.svc-card:hover { transform: translateY(-5px); box-shadow: 0 28px 50px -30px rgba(40,55,25,.45); }
.svc-img { position: relative; height: 220px; overflow: hidden; }
.svc-img .bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .4s ease; }
.svc-card:hover .svc-img .bg { transform: scale(1.05); }
.svc-img.mow .bg { background-image: linear-gradient(rgba(14,40,20,.12), rgba(14,40,20,.32)); background-color: var(--sage); }
.svc-img.leaf .bg { background: radial-gradient(120% 100% at 20% 0%, #e7b35a 0%, #cf8a3b 38%, #b4632e 72%, #8f4a26 100%); }
.svc-img.snow .bg { background: radial-gradient(120% 100% at 25% 0%, #eef4f7 0%, #cfe0ea 36%, #9db9cc 70%, #6f8ca3 100%); }
.svc-img .season { position: absolute; left: 16px; bottom: 14px; z-index: 2; font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(20,30,12,.42); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.25); padding: 6px 12px; border-radius: 100px; }
.svc-img.leaf .season { background: rgba(120,60,25,.34); }
.svc-img.snow .season { background: rgba(60,85,105,.40); color: #18324a; border-color: rgba(255,255,255,.6); }
.svc-card .sb { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.svc-card .sn { font-size: 13px; color: #fff; font-weight: 700; width: 30px; height: 30px; border-radius: 8px;
  background: var(--sage); display: grid; place-items: center; }
.svc-card h3 { font-size: 25px; font-weight: 500; margin: 16px 0 10px; }
.svc-card p { font-size: 15px; color: var(--ink-2); flex: 1; }
.svc-card .go { margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--sage); display: inline-flex; align-items: center; gap: 8px; transition: gap .2s; }
.svc-card:hover .go { gap: 14px; }

/* ---------- 2-col feature ---------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.feature.rev .f-text { order: 2; }
.feature .f-img { border-radius: 14px; overflow: hidden; height: 440px; }
.feature .f-img .bg, .feature .f-img .ph { position: absolute; inset: 0; background-size: cover; background-position: center; }
.feature .f-img { position: relative; }
.feature h2 { font-size: 38px; }
.feature p { font-size: 17px; color: var(--ink-2); margin-top: 16px; }
.feature p + p { margin-top: 14px; }

/* ---------- checklist grid ---------- */
.incl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 40px; margin-top: 8px; padding: 0; }
.incl li { list-style: none; display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.incl li .ck { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--mint-2); color: var(--sage-deep);
  display: grid; place-items: center; font-size: 13px; font-weight: 700; margin-top: 1px; }
.incl li b { font-weight: 600; display: block; }
.incl li small { color: var(--ink-2); font-size: 14px; }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.step { }
.step .n { font-size: 13px; color: #fff; font-weight: 700; width: 34px; height: 34px; border-radius: 9px; background: var(--sage); display: grid; place-items: center; }
.step h3 { font-size: 20px; margin: 16px 0 8px; }
.step p { font-size: 14.5px; color: var(--ink-2); }

/* ---------- mini plan / pricing note ---------- */
.pricecard { background: var(--paper); border: 1px solid var(--line-2); border-radius: 14px; padding: 36px; display: grid;
  grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
.pricecard .pc-l h3 { font-size: 28px; }
.pricecard .pc-l p { font-size: 16px; color: var(--ink-2); margin-top: 10px; max-width: 46ch; }
.pricecard .price { font-size: 50px; font-weight: 500; letter-spacing: -.03em; color: var(--sage-deep); white-space: nowrap; }
.pricecard .price small { font-family: var(--sans); font-size: 15px; color: var(--muted); font-weight: 400; }

/* ---------- related services ---------- */
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rel-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--paper);
  display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; }
.rel-card:hover { transform: translateY(-5px); box-shadow: 0 28px 50px -30px rgba(40,55,25,.45); }
.rel-card .rc-img { height: 150px; position: relative; }
.rel-card .rc-img .bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.rel-card .rc-b { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.rel-card h3 { font-size: 21px; margin-bottom: 8px; }
.rel-card p { font-size: 14.5px; color: var(--ink-2); flex: 1; }
.rel-card .go { margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--sage); display: inline-flex; gap: 8px; transition: gap .2s; }
.rel-card:hover .go { gap: 14px; }

/* ---------- testimonials ---------- */
.t-sec { background: var(--mint); }
.t-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.t-card { border: 1px solid var(--line-2); border-radius: 12px; padding: 32px; background: var(--paper); display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease; }
.t-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -28px rgba(40,55,25,.45); }
.t-card .stars { font-size: 15px; letter-spacing: 3px; }
.t-card p { font-size: 18px; line-height: 1.45; margin: 18px 0 24px; color: var(--ink); letter-spacing: -.01em; }
.t-card .q { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.t-card.is-open .q { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.t-card .more { margin: 12px 0 24px; }
.t-card .more button { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--sage-deep); }
.t-card .more button:hover { text-decoration: underline; }
.t-card .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.t-card .av { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid var(--mint-2); }
.t-card .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t-card .av .initial { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--sans); font-weight: 600; font-size: 20px; line-height: 1; }
/* name/location text block — tighten regardless of whether the inner group has a custom class */
.t-card .who-text,
.t-card .who > .wp-block-group:not(.av) { gap: 2px; }
.t-card .who p { margin: 0; font-size: inherit; line-height: 1.3; flex: none; }
.t-card .who b { font-size: 15px; display: block; font-weight: 600; }
.t-card .who small { font-size: 13px; color: var(--muted); }
.t-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line-2); }
.t-foot .label { color: var(--sage-deep); }

/* ---------- blog landing ---------- */
.blog-sec .blog-head { max-width: 680px; margin: 0 0 48px; }
.blog-soon { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sage-deep); background: var(--mint-2); padding: 6px 13px; border-radius: 999px; }
.blog-head h1 { font-size: 56px; margin: 18px 0 16px; }
.blog-sub { font-size: 18px; color: var(--ink-2); line-height: 1.5; }

.blog-feature { display: grid; grid-template-columns: 1.05fr 1fr; border: 1px solid var(--line-2); border-radius: 16px;
  overflow: hidden; background: var(--paper); margin-bottom: 48px; transition: transform .2s ease, box-shadow .2s ease; }
.blog-feature:hover { transform: translateY(-4px); box-shadow: 0 28px 50px -30px rgba(40,55,25,.5); }
.bf-img { position: relative; min-height: 340px; overflow: hidden; }
.bf-img img { width: 100%; height: 100%; object-fit: cover; }
.bf-body { padding: 44px; display: flex; flex-direction: column; justify-content: center; }
.bf-body h2 { font-size: 32px; line-height: 1.12; margin: 14px 0 16px; }
.bf-body p { font-size: 17px; color: var(--ink-2); margin: 0 0 18px; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.post-card { border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; background: var(--paper);
  display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.post-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -28px rgba(40,55,25,.45); }
.pc-img { height: 200px; overflow: hidden; }
.pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.post-card:hover .pc-img img { transform: scale(1.05); }
.pc-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.pc-cat { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); margin-bottom: 10px; }
.pc-body h3 { font-size: 20px; line-height: 1.2; margin: 0 0 10px; }
.pc-body p { font-size: 15px; color: var(--ink-2); margin: 0 0 16px; flex: 1; }
.pc-meta { font-size: 13px; color: var(--muted); }

@media (max-width: 940px) {
  .blog-feature { grid-template-columns: 1fr; }
  .bf-img { min-height: 240px; }
  .bf-body { padding: 32px; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .blog-head h1 { font-size: 42px; }
}
@media (max-width: 600px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-head h1 { font-size: 34px; }
  .bf-body h2 { font-size: 26px; }
}

/* ---------- blog: query-loop archive ---------- */
.blog-sec .wp-block-query { margin-top: 0; }
.blog-q { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.blog-q > li { margin: 0; border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; background: var(--paper);
  display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.blog-q > li:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -28px rgba(40,55,25,.45); }
.blog-q .wp-block-post-featured-image { margin: 0; height: 200px; overflow: hidden; }
.blog-q .wp-block-post-featured-image a { display: block; width: 100%; height: 100%; }
.blog-q .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.blog-q > li:hover .wp-block-post-featured-image img { transform: scale(1.05); }
.blog-q .pc-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.blog-q .pc-cat { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); margin: 0 0 10px; }
.blog-q .pc-cat a { color: inherit; text-decoration: none; }
.blog-q .wp-block-post-title { font-size: 20px; line-height: 1.2; margin: 0 0 10px; }
.blog-q .wp-block-post-title a { text-decoration: none; }
.blog-q .wp-block-post-title a:hover { color: var(--sage); }
.blog-q .wp-block-post-excerpt { margin: 0 0 14px; flex: 1; font-size: 15px; color: var(--ink-2); }
.blog-q .wp-block-post-excerpt p { margin: 0 0 8px; font-size: 15px; color: var(--ink-2); }
.blog-q .wp-block-post-excerpt__more-link { font-size: 14px; font-weight: 600; color: var(--sage-deep); }
.blog-q .pc-meta { font-size: 13px; color: var(--muted); margin-top: auto; }
@media (max-width: 940px) { .blog-q { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .blog-q { grid-template-columns: 1fr; } }

/* ---------- blog: single post ---------- */
.post-single { padding: 56px 0 80px; }
.post-single .wide { max-width: 760px; }
.post-single .pc-cat { display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); margin: 0 0 14px; }
.post-single .wp-block-post-title { font-size: 44px; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 12px; }
.post-single .wp-block-post-date.pc-meta { display: block; font-size: 14px; color: var(--muted); margin: 0 0 30px; }
.post-single .wp-block-post-featured-image { margin: 0 0 36px; }
.post-single .wp-block-post-featured-image img { width: 100%; border-radius: 14px; }
.post-single .wp-block-post-content h2 { font-size: 28px; margin: 38px 0 12px; }
.post-single .wp-block-post-content p { font-size: 17px; line-height: 1.75; color: var(--ink-2); margin: 0 0 18px; }
.post-single .wp-block-post-content ul, .post-single .wp-block-post-content ol { font-size: 17px; line-height: 1.7; color: var(--ink-2); margin: 0 0 20px; padding-left: 1.3em; }
.post-single .wp-block-post-content li { margin-bottom: 8px; }
.post-single .wp-block-post-content a { color: var(--sage-deep); font-weight: 600; text-decoration: underline; }
.post-single .wp-block-table { margin: 8px 0 26px; }
.post-single .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 16px; }
.post-single .wp-block-table th, .post-single .wp-block-table td { border: 1px solid var(--line-2); padding: 10px 14px; text-align: left; }
.post-single .wp-block-table th { background: var(--mint); font-weight: 600; }
.post-single .post-cta { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line-2); display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 600px) { .post-single .wp-block-post-title { font-size: 32px; } }

/* ---------- area + map ---------- */
.area { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.area h2 { font-size: 42px; max-width: 12ch; }
.area p { font-size: 16px; color: var(--ink-2); margin-top: 18px; max-width: 36ch; }
.towns { margin-top: 28px; border-top: 1px solid var(--line); }
.area .towns { margin-top: 36px; }   /* space between the intro paragraph and the towns list */
.towns p { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; margin: 0; max-width: none; }
.towns span { display: flex; align-items: center; font-size: 15px; color: var(--ink-2); padding: 12px 0; border-bottom: 1px solid var(--line); }
.towns span::before { content: "›"; color: var(--clay); margin-right: 10px; font-weight: 700; }
.map { position: relative; height: 440px; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: #eef2e7; }
.map-grid { position: absolute; inset: 0;
  background-image: linear-gradient(rgba(87,113,63,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(87,113,63,.12) 1px, transparent 1px);
  background-size: 48px 48px; }
.road { position: absolute; background: #fbfaf3; }
.road.r1 { left: -5%; top: 38%; width: 110%; height: 14px; transform: rotate(-7deg); }
.road.r2 { left: 28%; top: -5%; width: 14px; height: 110%; transform: rotate(9deg); }
.road.r3 { left: -5%; top: 72%; width: 110%; height: 10px; transform: rotate(4deg); }
.radius { position: absolute; left: 47%; top: 54%; width: 340px; height: 340px; transform: translate(-50%,-50%);
  border-radius: 50%; background: rgba(87,113,63,.12); border: 1.5px dashed rgba(87,113,63,.5); }
.pin { position: absolute; transform: translate(-50%,-100%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pin i { width: 13px; height: 13px; border-radius: 50% 50% 50% 0; background: var(--sage); transform: rotate(45deg); box-shadow: 0 2px 5px rgba(0,0,0,.22); }
.pin b { font-size: 12px; font-weight: 600; color: var(--ink); background: var(--paper); padding: 2px 8px; border-radius: 100px; border: 1px solid var(--line-2); white-space: nowrap; }
.pin-main i { width: 17px; height: 17px; background: var(--sage-deep); }
.pin-main b { background: var(--sage-deep); color: #fff; border-color: var(--sage-deep); }
.map-tag { position: absolute; left: 16px; bottom: 16px; font-size: 12px; color: var(--sage-deep); font-weight: 500;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 100px; padding: 6px 14px; }

/* ---------- homepage quote section (deep green conversion band) ---------- */
.quote-sec { background: var(--sage-deep); color: var(--paper);
  background-image: radial-gradient(120% 90% at 90% 0%, rgba(136,168,95,.18), transparent 55%); }
.quote-sec .q-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
.quote-sec .label { color: var(--clay-light); }
.quote-sec .label::before { background: var(--clay-light); }
.q-left h2 { font-size: 46px; margin: 16px 0 16px; max-width: 12ch; color: #fff; }
.q-left p { font-size: 16px; color: rgba(247,248,240,.82); max-width: 38ch; }
.q-points { list-style: none; margin: 28px 0; padding: 0; display: grid; gap: 12px; }
.quote-sec .q-left .q-points { margin: 40px 0; }   /* extra breathing room above & below the checklist */
.q-points li { font-size: 15px; color: rgba(247,248,240,.9); display: flex; gap: 12px; align-items: center; }
.q-points li::before { content: "✓"; color: var(--leaf); font-weight: 700; }
.q-contact { margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16); display: flex; flex-direction: column; gap: 4px; }
.q-contact .label { color: rgba(247,248,240,.6); }
.q-contact a { font-size: 26px; font-weight: 500; letter-spacing: -.02em; color: #fff; }
.q-contact .q-email { font-size: 16px; color: rgba(247,248,240,.78); margin-top: 8px; }
.q-contact .q-email a { font-size: 16px; font-weight: 500; letter-spacing: 0; color: #fff;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.4); }
.q-contact .q-email a:hover { text-decoration-color: #fff; }
/* phone + email icons so both clearly read as tappable actions */
.q-contact a[href^="tel:"],
.q-contact a[href^="mailto:"],
.faq-call a[href^="tel:"] { display: inline-flex; align-items: center; gap: 9px; }
.q-contact a[href^="tel:"]::before,
.q-contact a[href^="mailto:"]::before,
.faq-call a[href^="tel:"]::before { content: ""; width: .82em; height: .82em; flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--ci) center / contain no-repeat; mask: var(--ci) center / contain no-repeat; }
.q-contact a[href^="tel:"],
.faq-call a[href^="tel:"] { --ci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E"); }
.q-contact a[href^="mailto:"] { --ci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E"); }
.q-form { background: var(--paper); border-radius: 14px; padding: 28px; display: grid; gap: 16px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.5); }
/* tighten the form fields (homepage .q-form and service-page .qf-form share this CF7 form) */
:is(.q-form, .qf-form) .qf-field p { margin: 0; }   /* kill Contact Form 7's autop wrapper margins */
:is(.q-form, .qf-form) .qf-field label { display: block; }
:is(.q-form, .qf-form) .qf-field .wpcf7-form-control-wrap { display: block; margin-top: 6px; }
:is(.q-form, .qf-form) .wpcf7-form > .qf-field,
:is(.q-form, .qf-form) .wpcf7-form > .qf-row { margin: 0 0 14px; }
:is(.q-form, .qf-form) .wpcf7-form > p { margin: 8px 0 0; }
:is(.q-form, .qf-form) .qf-field textarea { min-height: 0; height: 92px; }
:is(.q-form, .qf-form) .hidden-fields-container { display: none; }
.q-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.q-field { display: flex; flex-direction: column; gap: 7px; }
.q-field label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.q-field label span { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.q-field input, .q-field select, .q-field textarea { font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid var(--line-2); border-radius: 7px; padding: 12px 14px; width: 100%; resize: none; }
.q-field input:focus, .q-field select:focus, .q-field textarea:focus { outline: 2px solid var(--leaf); outline-offset: 1px; border-color: var(--sage); }
.q-submit { width: 100%; justify-content: center; margin-top: 6px; cursor: pointer; }

/* ---------- inline quote form (service pages) ---------- */
.qform-sec .qf-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
.qf-left h2 { font-size: 38px; max-width: 20ch; }
.qf-left p { font-size: 16px; color: var(--ink-2); margin-top: 14px; max-width: none; }
.qf-points { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 12px; }
.qf-points li { font-size: 15px; color: var(--ink-2); display: flex; gap: 12px; align-items: center; }
.qf-points li::before { content: "✓"; color: var(--sage); font-weight: 700; }
.qf-call { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.qf-call span { font-size: 13px; color: var(--muted); display: block; margin-bottom: 4px; }
.qf-call a { font-size: 22px; font-weight: 600; color: var(--sage-deep); letter-spacing: -.02em; }
.qf-form { background: var(--paper); border: 1px solid var(--line-2); border-radius: 14px; padding: 32px; display: grid; gap: 15px;
  box-shadow: 0 20px 50px -30px rgba(40,55,25,.4); }
.qf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.qf-field { display: flex; flex-direction: column; gap: 7px; }
.qf-field label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.qf-field label span { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.qf-field input, .qf-field select, .qf-field textarea { font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid var(--line-2); border-radius: 7px; padding: 12px 14px; width: 100%; resize: none; }
.qf-field input:focus, .qf-field select:focus, .qf-field textarea:focus { outline: 2px solid var(--leaf); outline-offset: 1px; border-color: var(--sage); }
.qf-submit { width: 100%; justify-content: center; margin-top: 4px; cursor: pointer; }

/* ---------- before / after slider (homepage homepage variant) ---------- */
.diff-sec { background: var(--paper); }
.ba { position: relative; width: 100%; height: 440px; border-radius: 14px; overflow: hidden;
  user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: ew-resize; background: #28321d; }
/* Homepage variant: aspect-ratio instead of fixed height */
.diff-sec .ba { height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--line-2); box-shadow: 0 30px 60px -34px rgba(40,55,25,.5); margin-top: 8px; }
.ba-layer { position: absolute; inset: 0; }
.ba-layer .bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ba-layer img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ba-after .bg { filter: saturate(1.08) contrast(1.03); }
.ba-after img { filter: saturate(1.08) contrast(1.03); }
.ba-before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); will-change: clip-path; }
.ba-before .bg { filter: saturate(.4) sepia(.4) brightness(.92) contrast(.92) hue-rotate(-12deg); }
.ba-before img { filter: saturate(.4) sepia(.4) brightness(.92) contrast(.92) hue-rotate(-12deg); }
.ba-before::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 70% 20%, rgba(150,120,60,.22), transparent 60%),
    repeating-linear-gradient(48deg, rgba(120,95,45,.10) 0 6px, transparent 6px 15px);
  mix-blend-mode: multiply; pointer-events: none; }
.ba-tag { position: absolute; bottom: 14px; z-index: 4; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; padding: 6px 13px; border-radius: 100px; backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.3); }
.ba-tag.before { left: 14px; background: rgba(120,80,35,.5); }
.ba-tag.after { right: 14px; background: rgba(60,82,48,.55); }
.ba-divider { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; z-index: 5;
  background: #fff; transform: translateX(-50%); box-shadow: 0 0 14px rgba(0,0,0,.35); }
.ba-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 48px; height: 48px; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.3);
  display: grid; place-items: center; cursor: grab; }
.ba-handle:active { cursor: grabbing; }
.ba-handle::before, .ba-handle::after { content: ""; position: absolute; width: 0; height: 0;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.ba-handle::before { border-right: 8px solid var(--sage); left: 11px; }
.ba-handle::after { border-left: 8px solid var(--sage); right: 11px; }
.ba-handle .dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--line-2); }
.ba:focus-visible { outline: 3px solid var(--leaf); outline-offset: 3px; }
@keyframes ba-nudge { 0%,100% { transform: translate(-50%,-50%); } 30% { transform: translate(calc(-50% - 8px),-50%); } 60% { transform: translate(calc(-50% + 8px),-50%); } }
.ba-handle.hint { animation: ba-nudge 1.6s ease-in-out 2; }
.diff-foot { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; font-size: 14px; color: var(--muted); }
.diff-foot svg { width: 16px; height: 16px; }

/* ---------- cta band (deep green) ---------- */
.cta-band { background: var(--sage-deep); color: var(--paper);
  background-image: radial-gradient(120% 90% at 90% 0%, rgba(136,168,95,.18), transparent 55%); }
.cta-band .wide { padding-top: 88px; padding-bottom: 88px; text-align: center; }
.cta-band h2 { font-size: 48px; color: #fff; max-width: 16ch; margin: 0 auto; }
.cta-band p { font-size: 17px; color: rgba(247,248,240,.82); margin: 16px auto 0; max-width: 46ch; }
.cta-band .cta-row { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.cta-band .btn-line { color: #fff; border-color: rgba(255,255,255,.4); }
.cta-band .btn-line:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.cta-band .sd-pill { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); padding: 7px 16px; border-radius: 100px; margin-bottom: 22px; }
.cta-band .sd-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 0 var(--leaf); animation: sd-pulse 2s infinite; }
@keyframes sd-pulse { 0% { box-shadow: 0 0 0 0 rgba(136,168,95,.6); } 70% { box-shadow: 0 0 0 10px rgba(136,168,95,0); } 100% { box-shadow: 0 0 0 0 rgba(136,168,95,0); } }

/* ---------- FAQ ---------- */
.faq-sec { background: var(--mint); }
.faq-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; }
.faq-intro h2 { font-size: 42px; max-width: 11ch; }
.faq-intro p { font-size: 16px; color: var(--ink-2); margin-top: 16px; max-width: 32ch; }
.faq-intro .faq-call { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.faq-intro .faq-call span { font-size: 13px; color: var(--muted); display: block; margin-bottom: 4px; }
.faq-intro .faq-call a { font-size: 22px; font-weight: 600; color: var(--sage-deep); letter-spacing: -.02em; }
.faq-list { display: flex; flex-direction: column; align-items: stretch; }
.faq-item { width: 100%; border-top: 1px solid var(--line-2); }
.faq-item:last-child { border-bottom: 1px solid var(--line-2); }
.faq-item summary { list-style: none; cursor: pointer; padding: 22px 4px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-size: 18px; font-weight: 500; color: var(--ink); letter-spacing: -.01em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--sage-deep); }
.faq-item .faq-ic { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2);
  display: grid; place-items: center; position: relative; transition: all .2s; }
.faq-item .faq-ic::before, .faq-item .faq-ic::after { content: ""; position: absolute; background: var(--sage); border-radius: 2px; transition: transform .25s ease; }
.faq-item .faq-ic::before { width: 12px; height: 2px; }
.faq-item .faq-ic::after { width: 2px; height: 12px; }
.faq-item[open] .faq-ic { background: var(--sage); border-color: var(--sage); }
.faq-item[open] .faq-ic::before, .faq-item[open] .faq-ic::after { background: #fff; }
.faq-item[open] .faq-ic::after { transform: scaleY(0); }
.faq-item .faq-a { padding: 0 4px 24px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 56ch; }

/* ---------- footer ---------- */
footer.site { background: var(--ink); color: rgba(247,248,240,.7); padding: 64px 0 30px; }
.foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
footer.site .brand b { color: #fff; }
footer.site .brand .sq { background: var(--clay); }
footer.site .brand .brand-logo { height: 40px; width: auto; align-self: center; display: block; }
footer .fdesc { font-size: 15px; color: rgba(247,248,240,.62); margin-top: 18px; max-width: 26ch; }
.foot-nav { display: flex; gap: 56px; align-items: flex-start; }
.fcol h4 { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--leaf); margin-bottom: 18px; font-weight: 600; }
.fcol a { display: block; font-size: 15px; margin-bottom: 11px; color: rgba(247,248,240,.7); }
.fcol a:hover { color: #fff; }
.foot-bot { display: flex; justify-content: space-between; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: rgba(247,248,240,.45); }

/* ---------- Contact Form 7 integration ---------- */
.wpcf7-form .q-field input,
.wpcf7-form .q-field select,
.wpcf7-form .q-field textarea,
.wpcf7-form .qf-field input,
.wpcf7-form .qf-field select,
.wpcf7-form .qf-field textarea { font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid var(--line-2); border-radius: 7px; padding: 12px 14px; width: 100%; resize: none; }
.wpcf7-form .q-field input:focus,
.wpcf7-form .q-field select:focus,
.wpcf7-form .q-field textarea:focus,
.wpcf7-form .qf-field input:focus,
.wpcf7-form .qf-field select:focus,
.wpcf7-form .qf-field textarea:focus { outline: 2px solid var(--leaf); outline-offset: 1px; border-color: var(--sage); }
.wpcf7-spinner { display: none; }
.wpcf7-not-valid-tip { font-size: 12px; color: var(--clay); margin-top: 4px; }
.wpcf7-response-output { margin-top: 16px; padding: 12px 16px; border-radius: 8px; font-size: 14px; border: 1px solid var(--line-2); }

/* ===== About page — editorial, distinct from service pages ===== */

/* hero: split, portrait-led, warm — no scrim/quote-button template */
.ab-hero { padding: 40px 0 88px; }
.ab-hero .crumb-d { font-size: 13px; color: var(--muted); margin-bottom: 36px; display: flex; gap: 8px; align-items: center; }
.ab-hero .crumb-d a:hover { color: var(--sage); }
.ab-hero .crumb-d span { opacity: .5; }
.ab-hero .grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; }
.ab-hero h1 { font-size: 62px; line-height: 1.02; }
.ab-hero h1 .accent { color: var(--sage); }
.ab-hero .intro { font-size: 19px; color: var(--ink-2); margin-top: 24px; max-width: 40ch; line-height: 1.55; }
.ab-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.ab-meta span { font-size: 13.5px; font-weight: 500; color: var(--sage-deep); background: var(--mint); border: 1px solid var(--mint-2);
  padding: 7px 15px; border-radius: 100px; }
.portrait { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--mint);
  background-image: repeating-linear-gradient(45deg, rgba(87,113,63,.08) 0 1px, transparent 1px 12px); }
.portrait .pcap { position: absolute; left: 16px; bottom: 16px; right: 16px; font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); background: rgba(250,249,242,.85);
  backdrop-filter: blur(4px); padding: 8px 12px; border-radius: 7px; }
.portrait.photo { background-size: cover; background-position: center; }

/* founder's letter — narrow editorial column, first person, signature */
.letter { background: var(--paper-2); }
.letter .col { max-width: 680px; margin: 0 auto; }
.letter .kicker { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--clay); font-weight: 600; }
.letter h2 { font-size: 34px; margin: 16px 0 26px; max-width: none; }
.letter p { font-size: 18px; line-height: 1.65; color: var(--ink-2); margin-bottom: 18px; }
.letter p .em { color: var(--ink); font-weight: 600; }
.sign { margin-top: 34px; display: flex; align-items: center; gap: 18px; }
.sign .nm { font-family: "Caveat", cursive; font-size: 44px; color: var(--sage-deep); line-height: 1; }
.sign .role { font-size: 14px; color: var(--muted); border-left: 1px solid var(--line-2); padding-left: 18px; }
.sign .role b { color: var(--ink); font-weight: 600; display: block; }

/* big pull quote */
.pull { background: var(--mint); color: var(--ink);
  background-image: radial-gradient(120% 90% at 85% 0%, rgba(87,113,63,.10), transparent 55%); }
.pull .col { max-width: 900px; margin: 0 auto; text-align: center; }
.pull p { font-size: 38px; line-height: 1.3; letter-spacing: -.02em; font-weight: 500; }
.pull p .hl { color: var(--sage); }
.pull .by { font-size: 14px; letter-spacing: .04em; color: var(--ink-2); margin-top: 24px; }

/* crew */
.crew { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; }
.member .portrait { aspect-ratio: 1 / 1; border-radius: 14px; }
.member h3 { font-size: 20px; margin: 18px 0 3px; }
.member .mrole { font-size: 14px; color: var(--clay); font-weight: 600; }
.member p { font-size: 14.5px; color: var(--ink-2); margin-top: 10px; }

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .header-r .ph-num { display: none; }
  .wide { padding: 0 24px; }
  .feature, .feature.rev .f-text { grid-template-columns: 1fr; }
  .feature.rev .f-text { order: 0; }
  .incl, .rel-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .pricecard { grid-template-columns: 1fr; text-align: left; }
  .qform-sec .qf-wrap { grid-template-columns: 1fr; gap: 28px; }
  .qf-row { grid-template-columns: 1fr; }
  .phero-in h1 { font-size: 40px; }
  .sec-top { flex-direction: column; align-items: flex-start; }
  .sec-top h2, .feature h2, .cta-band h2 { font-size: 32px; }
  .foot-top { flex-direction: column; }
  .area, .quote-sec .q-wrap { grid-template-columns: 1fr; gap: 32px; }
  .faq-wrap { grid-template-columns: 1fr; gap: 28px; }
  .hero-intro p { font-size: 21px; }
  .hf-content { padding: 32px 22px; }
  .hf-content h1 { font-size: 50px; }
  .hf-chip { white-space: nowrap; max-width: 100%; }
  .t-grid { grid-template-columns: 1fr; }
  .sec-top h2, .area h2, .q-left h2 { font-size: 34px; }
  .q-row { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: 1fr; }
  /* About page responsive */
  .ab-hero .grid { grid-template-columns: 1fr; gap: 36px; }
  .ab-hero h1 { font-size: 42px; }
  .portrait { max-width: 360px; }
  .pull p { font-size: 27px; }
  .crew { grid-template-columns: 1fr; max-width: 340px; }
}

/* ===== wp:image cover bridge =====
   The design used CSS background-image "fill" elements (.bg) for several photos.
   Patterns use editable wp:image (a <figure><img>) instead, so make those images
   fill and cover their frames the way the background-cover originals did. */
.portrait, .map, .svc-img .wp-block-image, .rc-img .wp-block-image,
.f-img .wp-block-image { margin: 0; }
.portrait img,
.member .portrait img,
.map img,
.svc-img img,
.rc-img img,
.f-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* The service-card and related-card image figures sit inside fixed-height wrappers */
.svc-img .wp-block-image,
.rc-img .wp-block-image,
.f-img .wp-block-image { position: absolute; inset: 0; height: 100%; width: 100%; }
.svc-img figure.wp-block-image, .rc-img figure.wp-block-image { border-radius: 0; }

/* ===== Responsive: mobile nav, tablet grids, footer ===== */

/* Tablet (≈600–940px): use two-up grids instead of dropping straight to one column */
@media (min-width: 600px) and (max-width: 940px) {
  .svc-grid, .t-grid, .rel-grid, .crew, .incl { grid-template-columns: 1fr 1fr; }
  .crew { max-width: none; }
}

/* Mobile + tablet nav (hamburger) and footer stacking */
@media (max-width: 940px) {
  /* burger button */
  .nav-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 11px; cursor: pointer; border-radius: 8px; }
  .nav-burger span { display: block; width: 100%; height: 2px; background: var(--ink); border-radius: 2px;
    transition: transform .25s ease, opacity .15s ease; }

  /* nav becomes a dropdown panel anchored to the sticky header */
  nav.main { position: absolute; top: 100%; left: 0; right: 0;
    display: flex; flex-direction: column; gap: 0;
    background: rgba(250,249,242,.97); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line); box-shadow: 0 26px 42px -30px rgba(40,55,25,.55);
    padding: 6px 24px 14px;
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
    transition: max-height .3s ease, opacity .22s ease, visibility .3s ease; }
  nav.main p { margin: 0; width: 100%; }
  nav.main a { display: block; padding: 15px 2px; font-size: 17px; color: var(--ink);
    border-bottom: 1px solid var(--line); }
  nav.main p:last-child a { border-bottom: 0; }

  /* click-to-call at the bottom of the menu */
  .nav-phone { display: block; }
  /* needs nav.main prefix to out-specify `nav.main a { display: block }` above, otherwise the link stays inline-block and the icon/label don't vertically center */
  nav.main .nav-phone a { display: flex; align-items: center; color: var(--sage-deep);
    font-size: 17px; font-weight: 600; border-bottom: 0; }
  /* explicit margin (not flex gap, which browsers don't apply to the bare text node) so the icon and label aren't cramped */
  .nav-phone svg { flex-shrink: 0; margin-right: 10px; }

  /* open state */
  .nav-toggle:checked ~ nav.main { max-height: 75vh; overflow: auto; opacity: 1; visibility: visible; }
  .nav-toggle:checked ~ .header-r .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .header-r .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .header-r .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* footer: let the link columns wrap instead of overflowing */
  .foot-nav { gap: 28px 44px; }
  .fcol { min-width: 130px; }
  .fcol a { overflow-wrap: anywhere; }
}

/* Small phones: single-column steps, tighter padding, stacked header wordmark */
/* phones: let the feature image show the full landscape scene instead of a zoomed-in 440px crop */
@media (max-width: 600px) {
  .feature .f-img { height: auto; aspect-ratio: 16 / 10; }
}

@media (max-width: 560px) {
  /* steps become a left-badge timeline so the text uses the full width instead of leaving the right half empty */
  .steps { grid-template-columns: 1fr; gap: 18px; }
  .step { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; }
  .step .n { grid-row: 1 / 3; align-self: center; }
  .step h3 { grid-column: 2; grid-row: 1; margin: 0 0 3px; }
  .step p { grid-column: 2; grid-row: 2; margin: 0; }
  section.block { padding: 64px 0; }
  /* keep "Charlie LAWN CARE" on one inline line; trim sizes so it fits next to the menu + CTA */
  header.site .brand { align-items: center; gap: 7px; }
  header.site .brand .brand-logo { height: 30px; }
  header.site .brand-text { gap: 5px; }
  header.site .brand b { font-size: 18px; }
  header.site .brand small { font-size: 9px; letter-spacing: .06em; white-space: nowrap; }
  header.site .header-r { gap: 10px; }
  header.site .header-r .wp-block-button.btn > .wp-block-button__link { padding: 9px 13px; font-size: 13px; }

  /* center the intro lead paragraph on phones */
  .hero-intro p { text-align: center; }
  /* stack the testimonials footer so the rating and link aren't cramped */
  .t-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  /* slightly smaller phone in the quote contact block for cleaner hierarchy */
  .q-contact a { font-size: 22px; }
  /* drop the redundant current-page crumb on phones (the H1 below already states it) */
  .crumb .crumb-tail { display: none; }
  /* hero: keep everything centered and inside the frame */
  .hf-content { padding: 30px 18px; text-align: center; }
  .hf-content h1 { width: 100%; }
  .hf-content p { width: 100%; max-width: 100%; }
  /* rating chip becomes a compact centered badge (stars over text) so it never clips */
  .hf-chip { flex-direction: column; gap: 4px; padding: 9px 20px; border-radius: 18px; line-height: 1.15; }
  /* stack the hero CTAs full-width */
  .hf-content .cta-row { flex-direction: column; align-items: stretch; width: 100%; max-width: 300px; gap: 10px; }
  .hf-content .cta-row .wp-block-button.btn { width: 100%; }
  .hf-content .cta-row .wp-block-button.btn > .wp-block-button__link { justify-content: center; }
}

/* ===== Trimming page: "what we trim" image gallery ===== */
.trim-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; padding: 0; list-style: none; }
.trim-gallery figure { margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--paper);
  display: flex; flex-direction: column; }
.trim-gallery img { width: 100%; height: 260px; object-fit: cover; object-position: center; display: block; }
.trim-gallery figcaption { padding: 16px 20px 20px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.trim-gallery figcaption b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; font-size: 15.5px; }

/* Tablet: two-up */
@media (min-width: 600px) and (max-width: 940px) {
  .trim-gallery { grid-template-columns: 1fr 1fr; }
}
/* Mobile: single column, a touch shorter */
@media (max-width: 600px) {
  .trim-gallery { grid-template-columns: 1fr; }
  .trim-gallery img { height: 230px; }
}