@font-face{font-family:'Big Shoulders';src:url('../fonts/bigshoulders-800.woff2') format('woff2');
  font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Big Shoulders';src:url('../fonts/bigshoulders-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Graduate';src:url('../fonts/graduate-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}

/* Chacon Family Lawn Care
 * Tokens and rules follow docs/brand.md. Shared by index, quote and thank-you.
 * No framework, no build step (ADR-0001). Single visual theme: this is a brand,
 * so it renders the same regardless of the visitor's OS light/dark setting.
 */
:root{
  --ink:#010201;
  --paper:#f0f0f0;
  --oat:#e6e2d6;
  --oat-deep:#d8d3c2;
  --green:#567e1d;
  --green-mid:#3a5415;
  --green-dark:#18210e;
  --gold:#f0c766;
  --amber:#eea93a;
  --sage:#9aa383;

  --display:'Big Shoulders','Oswald','Arial Narrow',Impact,sans-serif;
  --varsity:'Graduate','Superclarendon','Rockwell',Georgia,serif;
  --body:'Barlow','Avenir Next','Segoe UI',system-ui,-apple-system,sans-serif;

  /* Corners. Small on purpose: enough to take the edge off, not enough to
     turn a varsity brand into a SaaS dashboard. */
  --r-sm:4px;
  --r:7px;
  --r-lg:12px;

  --wrap:1180px;
  --gut:clamp(1.25rem,4vw,3rem);
  --sunset:linear-gradient(90deg,var(--green-mid) 0%,var(--green) 18%,var(--gold) 52%,var(--amber) 78%,var(--green) 100%);
}

*{box-sizing:border-box}
/* The canvas behind the page, which is what iOS shows when you rubber-band past
   the top or bottom. Without this, body's paper background propagates to the
   canvas and the overscroll area flashes near-white above a dark green header.
   Matches the theme-color meta on every page. */
html{-webkit-text-size-adjust:100%;background:var(--green-dark)}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.08rem);
  line-height:1.65;
}
img{max-width:100%;display:block}
a{color:var(--green-mid)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* the one recurring motif: a sunset horizon band, drawn from the brand palette */
.band{height:3px;background:var(--sunset);border:0;margin:0}

h1,h2,h3{font-family:var(--display);font-weight:800;text-wrap:balance;margin:0;line-height:.95;
  letter-spacing:-.005em;text-transform:uppercase}
h1{font-size:clamp(2.9rem,1.7rem + 5vw,5.4rem)}
h2{font-size:clamp(2.1rem,1.45rem + 2.7vw,3.4rem)}
h3{font-size:1.3rem;line-height:1.1}
p{margin:0}

.label{
  font-family:var(--varsity);font-size:.72rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.16em;
}


/* ── header ───────────────────────────────────── */
.top{background:var(--green-dark);color:var(--paper)}
.top .wrap{display:flex;align-items:center;gap:1.5rem;min-height:74px;flex-wrap:wrap}
/* The header is a nameplate now: type only, centred, no image. The mark that
   used to sit here was small enough to read as a favicon, and the badge does
   the identifying job properly further down at a size where it can be seen. */
.word{font-family:var(--display);font-weight:800;text-transform:uppercase;
  color:var(--paper);line-height:.92;letter-spacing:.01em;text-decoration:none;
  display:block;text-align:center;font-size:clamp(1.5rem,3.6vw,2.1rem)}
.word span{display:block;font-family:var(--body);font-size:.64rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--sage);margin-top:.45rem}
.word:hover span,.word:focus-visible span{color:var(--gold)}

/* Two centred rows, so the wordmark can sit dead centre without the nav
   pulling it off axis. The phone number joins the nav row for the same reason. */
.top .wrap{display:block;padding-block:1.15rem;min-height:0}
.top nav{margin-top:.9rem}

.navlinks{display:flex;flex-wrap:wrap;gap:1.6rem;list-style:none;margin:0;padding:0;justify-content:center;align-items:center}
.navlinks a{color:var(--paper);text-decoration:none;font-size:.82rem;font-weight:600;
  letter-spacing:.04em;border-bottom:2px solid transparent;
  display:inline-flex;align-items:center;min-height:44px}
.navlinks a:hover,.navlinks a:focus-visible{border-bottom-color:var(--amber)}
.nav-call a{color:var(--gold);font-family:var(--display);font-size:1.05rem;white-space:nowrap;letter-spacing:.02em}
.nav-call a:hover,.nav-call a:focus-visible{color:var(--amber)}
.top-call{color:var(--gold);text-decoration:none;font-family:var(--display);font-size:1.05rem;white-space:nowrap;
  display:flex;align-items:center;min-height:44px;padding-inline:.25rem}
.top-call:hover,.top-call:focus-visible{color:var(--amber)}
/* The call bar carries the number on phones, so the whole nav row goes. */
@media(max-width:820px){.top nav{display:none}.top .wrap{padding-block:1rem}}

/* ── hero ─────────────────────────────────────── */
.hero{position:relative;background:var(--green-dark);color:var(--paper);overflow:hidden}
.hero-photo{position:absolute;inset:0;background-size:cover;background-position:50% 62%}
.hero-veil{position:absolute;inset:0;
  background:linear-gradient(104deg,rgba(24,33,14,.96) 0%,rgba(24,33,14,.9) 44%,rgba(24,33,14,.62) 100%)}
.hero-sun{position:absolute;left:0;right:0;bottom:0;height:170px;pointer-events:none;
  background:linear-gradient(to top,rgba(240,199,102,.34),rgba(238,169,58,.1) 46%,transparent)}
.hero .wrap{position:relative;z-index:2;display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;
  padding-block:clamp(3rem,6vw,5.25rem)}
@media(max-width:920px){.hero .wrap{grid-template-columns:1fr}}

.eyebrow{color:var(--gold);display:flex;align-items:center;gap:.6rem;margin-bottom:1.1rem}
.eyebrow::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--gold),transparent)}
.hero h1{color:var(--paper)}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero-sub{margin-top:1.15rem;max-width:44ch;color:#dfe3d6;font-size:1.06rem}
.hero-acts{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.9rem;align-items:center}
@media(max-width:820px){.hero-acts{justify-content:center}}

.btn{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  display:inline-block;border:0;cursor:pointer;text-decoration:none;
  background:var(--amber);color:var(--ink);
  font-family:var(--body);font-size:.9rem;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;
  padding:1rem 1.5rem;border-radius:var(--r);
  box-shadow:4px 4px 0 var(--green-mid);
  transition:transform .12s ease,box-shadow .12s ease;
}
.btn:hover,.btn:focus-visible{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--green-mid)}
/* Solid, not transparent. It always sits on a dark green ground, and letting
   the badge tile show through the middle of a button made it read as a gap in
   the page rather than as something to press. */
.btn-ghost{background:var(--green-dark);color:var(--paper);border:2px solid var(--sage);
  box-shadow:none;padding:.9rem 1.4rem;border-radius:var(--r)}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--gold);color:var(--gold);transform:none;box-shadow:none}

/* ── quote card ───────────────────────────────── */
.card{background:var(--oat);color:var(--ink);padding:clamp(1.5rem,2.4vw,2rem);
  border-top:5px solid var(--amber);border-radius:var(--r-lg);
  box-shadow:0 22px 48px -14px rgba(1,2,1,.6),0 4px 12px rgba(1,2,1,.28)}
.card h2{font-size:1.5rem}
.card-note{font-size:.83rem;color:#4c5240;margin-top:.45rem}
.fields{display:grid;gap:.8rem;margin-top:1.3rem}
.row2{display:grid;gap:.8rem;grid-template-columns:1fr 1fr}
@media(max-width:480px){.row2{grid-template-columns:1fr}}
.fields label{display:block}
.fields .label{display:block;margin-bottom:.3rem;color:#3f452f}
/* Fields are ruled lines, not boxes. Four bordered rectangles stacked on the
 * oat card read as a form bolted onto the page; a rule under each one reads as
 * something that was designed. The rule then earns its keep: it doubles as the
 * ground the grass grows out of, see .turf below. */
.fields input,.fields select,.fields textarea{
  width:100%;font-family:var(--body);font-size:.95rem;
  padding:.62rem .15rem 1.05rem;background:transparent;color:var(--ink);  /* the deep bottom padding lifts the text clear of the grass */
  -webkit-appearance:none;appearance:none;   /* iOS otherwise redraws its own rounded, shaded box */
  border:0;border-bottom:2px solid #7d7864;border-radius:0;  /* 3.4:1 on oat: WCAG 1.4.11 wants 3:1 for a field boundary, and the old #b9b4a1 box border was 1.7:1 */
}
.fields select{-webkit-appearance:auto;appearance:auto}  /* keep the native dropdown arrow */
.fields input:focus,.fields select:focus,.fields textarea:focus{
  outline:0;border-bottom-color:var(--green-mid);
  box-shadow:0 2px 0 var(--green-mid);   /* thickens the rule without moving anything */
}
/* Keyboard users still get the site-wide amber :focus-visible ring; it is defined
 * once at the bottom of this file and applies here unchanged. */

/* ── grass on the field rule ───────────────────────
 * The turf strip is created by site.js, so a page without JavaScript never
 * carries an empty span. Tall while you are typing in a field, trimmed to
 * stubble once that field is valid, absent before you touch it.
 */
.fields label:not(.hp){position:relative}   /* :not(.hp) keeps the honeypot off-canvas */
.turf{
  position:absolute;left:0;right:0;bottom:0;height:0;pointer-events:none;
  background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0NiAyMCcgcHJlc2VydmVBc3BlY3RSYXRpbz0nbm9uZSc+PHBhdGggZD0nTTAuNSAyMEMxLjEgMTIuMyAtMS44IDYuNCAtMC45IDMuMEMtMC40IDYuNyAyLjcgMTIuOSAzLjEgMjBaIE01LjIgMjBDNS45IDE0LjQgNS4zIDEwLjAgNi4yIDcuNUM2LjcgMTAuMiA3LjQgMTQuOCA3LjggMjBaIE05LjYgMjBDMTAuMiAxMS40IDkuMSA0LjggMTAuMCAxLjBDMTAuNSA1LjIgMTEuOCAxMi4wIDEyLjIgMjBaIE0xNC40IDIwQzE1LjEgMTMuNyAxMi41IDguOCAxMy40IDYuMEMxMy45IDkuMSAxNi42IDE0LjEgMTcuMCAyMFogTTE5LjAgMjBDMTkuNiAxMi4xIDE5LjQgNi4wIDIwLjMgMi41QzIwLjggNi4zIDIxLjIgMTIuNyAyMS42IDIwWiBNMjQuMiAyMEMyNC44IDE0LjggMjIuNiAxMC44IDIzLjUgOC41QzI0LjAgMTEuMCAyNi40IDE1LjIgMjYuOCAyMFogTTI4LjYgMjBDMjkuMiAxMS43IDI4LjYgNS4yIDI5LjUgMS41QzMwLjAgNS42IDMwLjggMTIuMiAzMS4yIDIwWiBNMzMuNCAyMEMzNC4wIDEzLjkgMzEuMiA5LjIgMzIuMSA2LjVDMzIuNiA5LjUgMzUuNiAxNC4zIDM2LjAgMjBaIE0zNy44IDIwQzM4LjQgMTIuNiAzOC4wIDYuOCAzOC45IDMuNUMzOS40IDcuMSA0MC4wIDEzLjEgNDAuNCAyMFogTTQyLjIgMjBDNDIuOSAxNC42IDQwLjUgMTAuNCA0MS40IDguMEM0MS45IDEwLjYgNDQuNCAxNS4wIDQ0LjggMjBaJyBmaWxsPScjNTY3ZTFkJy8+PC9zdmc+") repeat-x left bottom;
  background-size:46px 20px;
  transition:height .4s cubic-bezier(.34,1.28,.5,1);
}
.is-growing > .turf{height:14px}
.is-cut > .turf{
  height:7px;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0NiA3JyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSdub25lJz48cGF0aCBkPSdNMC41IDdDMS4xIDUuMiAtMC44IDMuOCAwLjIgMy4wQzAuNyAzLjkgMi43IDUuMyAzLjEgN1ogTTUuMiA3QzUuOSA0LjggNC41IDMuMiA1LjUgMi4yQzYuMCAzLjMgNy40IDUuMCA3LjggN1ogTTkuNiA3QzEwLjIgNC41IDguOCAyLjUgOS43IDEuNEMxMC4yIDIuNiAxMS44IDQuNiAxMi4yIDdaIE0xNC40IDdDMTUuMSA1LjIgMTMuMiAzLjggMTQuMiAzLjBDMTQuNyAzLjkgMTYuNiA1LjMgMTcuMCA3WiBNMTkuMCA3QzE5LjYgNC44IDE4LjQgMy4yIDE5LjMgMi4yQzE5LjggMy4zIDIxLjIgNS4wIDIxLjYgN1ogTTI0LjIgN0MyNC44IDQuNSAyMy4xIDIuNSAyNC4wIDEuNEMyNC41IDIuNiAyNi40IDQuNiAyNi44IDdaIE0yOC42IDdDMjkuMiA1LjIgMjcuOSAzLjggMjguOCAzLjBDMjkuMyAzLjkgMzAuOCA1LjMgMzEuMiA3WiBNMzMuNCA3QzM0LjAgNC44IDMyLjIgMy4yIDMzLjEgMi4yQzMzLjYgMy4zIDM1LjYgNS4wIDM2LjAgN1ogTTM3LjggN0MzOC40IDQuNSAzNy4yIDIuNSAzOC4xIDEuNEMzOC42IDIuNiA0MC4wIDQuNiA0MC40IDdaIE00Mi4yIDdDNDIuOSA1LjIgNDEuMSAzLjggNDIuMCAzLjBDNDIuNSAzLjkgNDQuNCA1LjMgNDQuOCA3WicgZmlsbD0nIzdmYTM0ZScvPjwvc3ZnPg==");
  background-size:46px 7px;
}
@media(prefers-reduced-motion:reduce){.turf{transition:none}}
.req{color:var(--green-mid)}
.card .btn{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.06em;width:100%;margin-top:1.15rem;text-align:center}
.card-foot{margin-top:.85rem;font-size:.78rem;color:#4c5240;text-align:center}

/* ── trust strip ──────────────────────────────── */
.trust{background:var(--oat)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;padding-inline:0;background:var(--oat-deep);
  border-radius:var(--r-lg);overflow:hidden}
.trust .wrap > div{background:var(--oat);padding:1.15rem var(--gut);text-align:center}
/* `.trust div` used to match .wrap itself, which is also a div. The wrap kept the
   1.15rem block padding, and since the wrap's own background is --oat-deep that
   left an 18px band of it above and below the cells. Invisible while the strip
   had square corners -- it read as a rule -- and obvious the moment it got a
   radius, because the rounded frame no longer lined up with the square cells. */
.trust strong{display:block;font-family:var(--display);font-size:1.02rem}
.trust span{font-size:.78rem;color:#525845}
@media(max-width:780px){.trust .wrap{grid-template-columns:1fr 1fr}}

/* ── generic section ──────────────────────────── */
.sec{padding-block:clamp(3.25rem,6vw,5.25rem)}
.sec-oat{background:var(--oat)}
.sec-dark{background:var(--green-dark);color:var(--paper)}
.sec-head{max-width:60ch;margin-bottom:2.5rem}
.sec-head .label{color:var(--green-mid);display:block;margin-bottom:.7rem}
.sec-dark .sec-head .label{color:var(--gold)}
.sec-head p{margin-top:.9rem;color:#454b3a}
.sec-dark .sec-head p{color:#c9cfba}

/* ── services ─────────────────────────────────── */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#cdc8b6;
  border-radius:var(--r-lg);overflow:hidden}   /* radius on the grid, not the cells: the 1px gaps are the rules */
@media(max-width:860px){.svcs{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.svcs{grid-template-columns:1fr}}
.svc{background:var(--paper);padding:1.6rem 1.4rem}
.sec-oat .svc{background:var(--oat)}
.svc h3{margin-bottom:.5rem}
.svc p{font-size:.9rem;color:#4c5240}
.svc-rule{width:34px;height:3px;background:var(--green);margin-bottom:1rem;border-radius:2px}
.svc:nth-child(3n+2) .svc-rule{background:var(--amber)}
.svc:nth-child(3n+3) .svc-rule{background:var(--gold)}

/* add-ons: not part of the .svcs grid (see the note in index.html) */
.addons{display:flex;gap:1.15rem;align-items:baseline;margin-top:1px;
  background:var(--oat);border-left:3px solid var(--gold);
  border-radius:0 0 var(--r-lg) var(--r-lg);padding:1.4rem 1.4rem 1.5rem}
.addons > .label{flex:0 0 auto;color:#6f7658}
.addons h3{font-size:1.15rem;margin-bottom:.4rem}
.addons p{font-size:.9rem;color:#4c5240;max-width:64ch;margin:0}
@media(max-width:520px){.addons{flex-direction:column;gap:.7rem;align-items:flex-start}}

/* ── before / after ───────────────────────────── */
.pairs{display:grid;gap:2.25rem}
.pair-cap{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  margin-bottom:.7rem;padding-bottom:.6rem;border-bottom:1px solid rgba(240,240,240,.22)}
/* The caption sits directly on the badge tile, where sage-on-green all but
   disappeared. Both halves get the same gold wash: light enough that the badge
   still reads through it, solid enough that white text pops off it. */
.pair-cap h3,.pair-cap .label{
  padding:.34rem .72rem;border-radius:var(--r-sm);
  background:rgba(240,199,102,.12);color:var(--paper)}
.pair-cap h3{font-size:1.05rem}
.pair-cap .label{white-space:nowrap}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(240,240,240,.2);
  border-radius:var(--r-lg);overflow:hidden}
.shot{position:relative;aspect-ratio:1/1;background:#0d1408;overflow:hidden;margin:0}
.shot img{width:100%;height:100%;object-fit:cover}
.shot .tag{position:absolute;top:0;left:0;z-index:2;background:var(--ink);color:var(--paper);
  border-bottom-right-radius:var(--r-sm);
  padding:.34rem .6rem;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.shot.after .tag{background:var(--amber);color:var(--ink)}
.hold{
  position:absolute;inset:0;display:grid;place-content:center;gap:.4rem;text-align:center;padding:1rem;
  border-radius:var(--r-lg);
  color:var(--sage);
  background:
    repeating-linear-gradient(45deg,rgba(154,163,131,.09) 0 10px,transparent 10px 20px),
    var(--green-dark);
  border:1px dashed rgba(154,163,131,.45);
}
.hold b{font-family:var(--display);font-size:1rem;color:#c9cfba}
.hold span{font-size:.76rem;max-width:22ch;margin-inline:auto;line-height:1.4}

/* ── Juan ─────────────────────────────────────── */
/* single column until Juan's photo arrives; drop .juan-solo to restore two columns */
.juan.juan-solo{grid-template-columns:minmax(0,1fr);max-width:68ch;margin-inline:auto}
.juan{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1.75rem,4vw,3.25rem);align-items:center}
@media(max-width:860px){.juan{grid-template-columns:1fr}}
.juan-photo{position:relative;aspect-ratio:4/5;background:#0d1408;overflow:hidden;border-radius:var(--r-lg)}
.juan-photo img{width:100%;height:100%;object-fit:cover}
.juan-photo img{width:100%;height:100%;object-fit:cover}
.quote{font-family:var(--display);font-size:clamp(1.3rem,.95rem + 1.5vw,2rem);line-height:1.28;
  text-wrap:balance;margin:0 0 1.15rem}
.quote-mark{color:var(--green);font-size:1.4em;line-height:0;vertical-align:-.22em;margin-right:.06em}
.juan p+p{margin-top:.9rem;color:#454b3a}
.sig{margin-top:1.4rem;padding-top:1.1rem;border-top:2px solid var(--oat-deep)}
.sig strong{font-family:var(--display);font-size:1.08rem;display:block}
.sig span{font-size:.8rem;color:#525845}

/* ── process (a real sequence, so it is numbered) ── */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.5vw,2.25rem)}
@media(max-width:780px){.steps{grid-template-columns:1fr}}
.step{display:flex;gap:1rem;align-items:flex-start}
.step-n{display:block}
.step-n{font-family:var(--display);font-size:2.6rem;line-height:.85;color:var(--amber);flex:none;
  font-variant-numeric:tabular-nums}
.step h3{color:var(--paper);margin-bottom:.4rem}
.step p{font-size:.9rem;color:#c9cfba}

/* ── area ─────────────────────────────────────── */
/* Even blocks rather than ragged pills. auto-fit keeps every chip the same
   width and fills the row, so the set reads as a tidy grid of places instead of
   a sentence that happened to wrap. The names stay left aligned inside. */
.cities{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:.55rem;margin-top:.4rem;justify-content:center}
.city{font-family:var(--display);font-size:1.02rem;background:var(--paper);border-radius:var(--r);
  border:1px solid var(--oat-deep);padding:.5rem .9rem}
.city.hq{background:var(--green-dark);color:var(--paper);border-color:var(--green-dark)}
.area-note{margin-top:1.5rem;font-size:.85rem;color:#525845;max-width:56ch}

/* ── faq ──────────────────────────────────────── */
.faq{max-width:78ch}
details{border-bottom:1px solid var(--oat-deep)}
summary{cursor:pointer;list-style:none;padding:1.05rem 2rem 1.05rem 0;position:relative;
  font-family:var(--display);font-size:1.06rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:.3rem;top:50%;transform:translateY(-50%);
  color:var(--green);font-size:1.4rem;line-height:1}
details[open] summary::after{content:"–"}
summary:focus-visible{outline:3px solid var(--green);outline-offset:2px}
details p{padding:0 2rem 1.15rem 0;font-size:.94rem;color:#454b3a}

/* ── closing cta ──────────────────────────────── */
.close-cta{text-align:center}
.close-cta h2{color:var(--paper);max-width:20ch;margin-inline:auto}
.close-cta p{color:#c9cfba;max-width:48ch;margin:1rem auto 0}
.close-acts{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;margin-top:1.9rem}

/* ── footer ───────────────────────────────────── */
/* Juan's own claim, in the display face, immediately before the paragraph that
 * backs it up. --green-mid is 6.6:1 on oat; --green would be 3.7:1 and fail. */
.juan-line{font-family:var(--display);text-transform:uppercase;line-height:.95;
  font-size:clamp(1.55rem,3.4vw,2.15rem);color:var(--green-mid);
  margin:1.7rem 0 .85rem}

.foot{background:var(--ink);color:#a9b09c;padding-block:2.5rem 5.5rem;font-size:.85rem}
/* One footer. The badge is centred at the top of it, above the columns, with
 * no rule between them -- a divider there read as a second footer.
 * This is the one place on the site where the badge runs full colour at full
 * size, the way it sits on the truck door. Everywhere else it is the small
 * mark or the watermark tile. Decorative: alt="" because the business name is
 * in the text directly below it. */
.foot .wrap{display:flex;flex-direction:column;align-items:center;gap:2.5rem}
.foot-badge{width:200px;height:auto;display:block}
.foot-cols{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;align-items:flex-start;
  width:100%}
.foot a{color:var(--gold)}
.foot-brand{margin-right:auto;max-width:34ch}
.foot-brand strong{font-family:var(--display);color:var(--paper);font-size:1.05rem;display:block;margin-bottom:.4rem}
.foot h2{margin:0 0 .5rem;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sage)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.foot ul li{display:flex;align-items:center;min-height:40px}
.foot ul a{display:flex;align-items:center;min-height:40px}

/* ── sticky mobile call bar ───────────────────── */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  grid-template-columns:1fr 1fr;gap:1px;background:var(--green-dark);
  box-shadow:0 -4px 18px rgba(1,2,1,.3)}
.callbar a{padding:.95rem .5rem;text-align:center;text-decoration:none;
  font-size:.82rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.callbar .c1{background:var(--green-dark);color:var(--paper)}
.callbar .c2{background:var(--amber);color:var(--ink)}
@media(max-width:820px){.callbar{display:grid}.foot{padding-bottom:5.5rem}}


/* ── reviews ──────────────────────────────────── */
.stars{color:var(--amber);letter-spacing:.04em}
.rev-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:.75rem;margin-bottom:.9rem}
.rev-score{font-family:var(--display);font-size:2.6rem;line-height:1;font-variant-numeric:tabular-nums}
.rev-top .stars{font-size:1.3rem}
.rev-count{font-size:.9rem;color:#525845}
.rev-ctl{display:flex;gap:.5rem;justify-content:flex-end;margin-bottom:.9rem}
.rev-btn{width:46px;height:46px;flex:none;cursor:pointer;background:var(--oat);color:var(--ink);border-radius:var(--r);
  border:1px solid #cdc8b6;font-size:1.1rem;line-height:1;transition:background .12s ease}
.rev-btn:hover:not(:disabled){background:var(--amber);border-color:var(--amber)}
.rev-btn:disabled{opacity:.3;cursor:default}
.rev-btn:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.rev-track{display:flex;gap:1px;background:#cdc8b6;margin-top:2rem;border-radius:var(--r-lg);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rev-track::-webkit-scrollbar{display:none}
.rev-track:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.rev{background:var(--paper);padding:1.6rem 1.4rem;display:flex;flex-direction:column;gap:.9rem;
  flex:0 0 31.5%;scroll-snap-align:start}
/* Full width, not a peek. At 82% a sliver of the next card sat past the screen
   edge, which reads as "this page is wider than my phone" rather than as an
   invitation to swipe. The arrows and the review count carry that job instead. */
@media(max-width:900px){.rev{flex-basis:100%}}
.rev .stars{font-size:.95rem}
.rev blockquote{margin:0;font-family:var(--display);font-size:1.06rem;line-height:1.35;text-wrap:pretty}
.rev blockquote b{color:var(--green-mid)}
.rev-who{margin-top:auto;padding-top:.9rem;border-top:1px solid #ddd8c8;font-size:.82rem;color:#525845}
.rev-who strong{display:block;font-family:var(--display);font-size:1rem;color:var(--ink)}
.rev-all{margin-top:1.6rem;font-size:.9rem}
.rev-all a{display:inline-flex;align-items:center;min-height:44px}

/* ── before/after slider (ADR-0010) ────────────────
 * Animating a custom property needs @property; without it the transition is
 * simply skipped and the slider still works.
 */
@property --pos{syntax:'<percentage>';inherits:false;initial-value:50%}

.ba{position:relative;aspect-ratio:4/3;overflow:hidden;--pos:50%;background:#0d1408;border-radius:var(--r-lg)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
/* "before" sits on top, clipped to --pos; "after" is the base layer beneath */
.ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba.is-wiping{transition:--pos 1.15s cubic-bezier(.4,0,.2,1)}

/* the real control: a range input, so keyboard and assistive tech get it free */
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;
  cursor:ew-resize;appearance:none;background:none}
.ba-range::-webkit-slider-thumb{appearance:none;width:44px;height:100%}
.ba-range::-moz-range-thumb{width:44px;height:100%;border:0;background:none}
.ba-range:focus-visible{outline:none}
.ba-range:focus-visible ~ .ba-line{outline:3px solid var(--amber);outline-offset:2px}

.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;
  background:var(--paper);transform:translateX(-50%);pointer-events:none;
  box-shadow:0 0 0 1px rgba(1,2,1,.35)}
.ba-grip{position:absolute;top:50%;left:var(--pos);width:42px;height:42px;
  transform:translate(-50%,-50%);pointer-events:none;
  background:var(--paper);color:var(--ink);border-radius:50%;
  display:grid;place-items:center;font-size:.95rem;line-height:1;
  box-shadow:0 2px 10px rgba(1,2,1,.45)}

.ba-tag{position:absolute;top:0;z-index:2;background:var(--ink);color:var(--paper);
  padding:.34rem .6rem;font-size:.62rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;pointer-events:none}
.ba-tag.is-before{left:0;border-bottom-right-radius:var(--r-sm)}
.ba-tag.is-after{right:0;background:var(--amber);color:var(--ink);border-bottom-left-radius:var(--r-sm)}

@media(prefers-reduced-motion:reduce){.ba.is-wiping{transition:none}}

/* ── three-stage progression (ADR-0010) ────────────
 * Default layout is a static 3-up row, which needs no JavaScript and works
 * even when the stages were shot from different positions. site.js upgrades
 * it to a stacked cross-fade stepper by adding .is-enhanced.
 */
.prog{border:1.5px solid var(--gold);border-radius:var(--r-lg);overflow:hidden;background:var(--gold)}
.prog-frame{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--gold)}
.prog-stage{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0d1408;
  margin:0}   /* figure's UA margin (1em 40px) was insetting the photo inside its own frame */
.prog-stage img{width:100%;height:100%;object-fit:cover;display:block}
.prog-stage figcaption{position:absolute;top:0;left:0;z-index:2;border-bottom-right-radius:var(--r-sm);
  background:var(--ink);color:var(--paper);padding:.34rem .6rem;
  font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.prog-stage:last-child figcaption{background:var(--amber);color:var(--ink)}
@media(max-width:700px){.prog-frame{grid-template-columns:1fr}}

/* enhanced: one frame, stages cross-fade */
.prog.is-enhanced .prog-frame{display:block;position:relative;aspect-ratio:4/3;gap:0}
.prog.is-enhanced .prog-stage{position:absolute;inset:0;aspect-ratio:auto;
  opacity:0;transition:opacity .5s ease}
.prog.is-enhanced .prog-stage.is-current{opacity:1}
.prog.is-enhanced .prog-stage figcaption{display:none}


.prog.is-enhanced .prog-stage img{transform:scale(1.06);transition:transform 6s ease-out}
.prog.is-enhanced .prog-stage.is-current img{transform:scale(1)}
@media(prefers-reduced-motion:reduce){
  .prog.is-enhanced .prog-stage img{transition:none;transform:none}
}
.prog-steps{display:none;gap:1px;margin-top:1px;background:var(--gold)}
.prog.is-enhanced .prog-steps{display:flex}
.prog-step{flex:1;min-height:48px;cursor:pointer;border:0;
  background:var(--green-dark);color:#c9cfba;font-family:var(--body);
  font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  transition:background .15s ease,color .15s ease}
.prog-step:hover{color:var(--paper)}
.prog-step[aria-pressed="true"]{background:var(--amber);color:var(--ink)}
.prog-step:focus-visible{outline:3px solid var(--amber);outline-offset:-3px}

@media(prefers-reduced-motion:reduce){.prog.is-enhanced .prog-stage{transition:none}}

/* ── badge step-and-repeat on dark sections ───────
 * Dark green sections carry the badge as a sponsor-backdrop tile rather than
 * one badge parked in the corner. A flat silhouette reads as a blob at low
 * opacity, so the source is a tonal badge where the mower and lettering stay
 * faintly legible. Decorative only: behind content, hidden from assistive tech.
 *
 * The spacing between badges is baked into badge-tile.png -- background-size
 * stretches the image to fill the cell, so CSS cannot add air around a
 * repeated motif. The tile holds two badges at (.25,.25) and (.75,.75), which
 * repeats as a half-drop lattice: rows offset by half a step, so it reads as
 * a pattern rather than as columns. Rebuild it with tools/build-watermark.sh.
 */
.sec-dark{position:relative;isolation:isolate;overflow:hidden}  /* clips the tile to its own section */
.sec-dark::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:0;
  background:url('../logo/badge-tile.png') center/220px 446px repeat;
  opacity:.15;
}
@media(max-width:820px){
  /* smaller step so a phone still shows several badges across */
  .sec-dark::before{background-size:150px 304px;opacity:.13}
}
.hero::before{
  /* The hero gets the same step-and-repeat as every other dark section. It sits
     ABOVE .hero-veil rather than behind it: the veil is nearly opaque green at
     its left edge, and a tile underneath it simply disappeared. */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url('../logo/badge-tile.png') center/220px 446px repeat;
  opacity:.15;
}
@media(max-width:820px){.hero::before{background-size:150px 304px;opacity:.13}}
.hero-sun{z-index:1}   /* keep the sunset glow on top of the tile */

/* ── the crest ─────────────────────────────────────
 * The badge was competing with itself: the same artwork at two scales, one
 * behind the other. Covering the tile with a glow does not fix it, because
 * anything soft enough to read as light is nowhere near opaque enough to hide
 * a pattern at 15%.
 *
 * So the disc behind the crest is two stacked radials. The lower one is solid
 * --green-dark fading to nothing, which erases the tile locally because it is
 * the exact ground colour. The upper one pools sunset gold in the cleared
 * space, which reads as light falling on the badge rather than as a panel.
 *
 * This travels WITH the crest. An earlier version masked a hole in the tile at
 * a fixed pixel offset, which was correct on the homepage and 63px wrong on the
 * quote page, where the header is taller. Anything anchored to the page rather
 * than to the element it belongs to has that bug waiting in it.
 *
 * Both grounds are var(--green-dark) and both tiles sit below .crest-wrap in
 * the stacking order, so the same disc works on .hero and on .lp.
 */
.crest-wrap{position:relative;z-index:2;display:flex;justify-content:center;
  padding-top:2.6rem;margin-bottom:1.5rem}
.crest{display:block;width:150px;height:auto;position:relative;z-index:2}
.crest-wrap::before{
  content:"";position:absolute;left:50%;top:calc(2.6rem + 77px);
  transform:translate(-50%,-50%);
  width:460px;height:460px;border-radius:50%;z-index:1;pointer-events:none;
  background:
    radial-gradient(circle,
      rgba(240,199,102,.26) 0%,
      rgba(238,169,58,.13) 34%,
      rgba(24,33,14,0) 68%),
    radial-gradient(circle,
      var(--green-dark) 0%,
      var(--green-dark) 32%,
      rgba(24,33,14,0) 64%);
}
@media(max-width:520px){
  .crest{width:124px}
  .crest-wrap::before{width:360px;height:360px;top:calc(2.6rem + 64px)}
}

/* ── shared utilities ─────────────────────────── */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--amber);color:var(--ink);
  border-radius:0 0 var(--r) 0;
  padding:.8rem 1.2rem;font-weight:800;text-decoration:none}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.top a:focus-visible,.sec-dark a:focus-visible{outline-color:var(--gold)}

/* ── placeholders for assets not yet supplied ─── */
.await{
  display:grid;place-content:center;gap:.4rem;text-align:center;padding:1.25rem;
  color:var(--sage);
  background:
    repeating-linear-gradient(45deg,rgba(154,163,131,.09) 0 10px,transparent 10px 20px),
    var(--green-dark);
  border:1px dashed rgba(154,163,131,.45);
}
.await b{font-family:var(--display);font-size:1rem;color:#c9cfba}
.await span{font-size:.76rem;max-width:24ch;margin-inline:auto;line-height:1.4}
.sec-oat .await,.sec .await{color:#6d7360;background:
    repeating-linear-gradient(45deg,rgba(109,115,96,.08) 0 10px,transparent 10px 20px),
    var(--oat-deep);
  border-color:rgba(109,115,96,.4)}
.sec-oat .await b,.sec .await b{color:#3f452f}

/* ── form messaging ───────────────────────────── */
.form-note{margin-top:.8rem;font-size:.85rem;padding:.7rem .9rem;border-left:3px solid var(--green);
  border-radius:0 var(--r-sm) var(--r-sm) 0}
.form-note[data-state="error"]{border-left-color:#a4331f;background:#f6e9e6;color:#5c1d11}
.hp{position:absolute;left:-9999px}

/* ── quote landing page ───────────────────────── */
.lp{min-height:100vh;display:flex;flex-direction:column;background:var(--green-dark);color:var(--paper);
  position:relative;isolation:isolate;overflow:hidden}
/* the landing page is one long green section, so it carries the same tile */
.lp::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url('../logo/badge-tile.png') center/220px 446px repeat;opacity:.15}
@media(max-width:820px){.lp::before{background-size:150px 304px;opacity:.13}}
.lp-head{padding:1.5rem 0 0}
.lp-main{flex:1;display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,.95fr);padding-block:clamp(2rem,5vw,4rem)}
@media(max-width:920px){.lp-main{grid-template-columns:1fr}}
.lp h1{color:var(--paper)}
.lp h1 em{font-style:normal;color:var(--gold)}
.lp-points{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;gap:.7rem;max-width:46ch}
.lp-points li{display:flex;gap:.7rem;align-items:flex-start;color:#dfe3d6}
.lp-points li::before{content:"";flex:none;width:9px;height:9px;margin-top:.55rem;background:var(--amber);border-radius:2px}
.lp-foot{padding-block:1.5rem;font-size:.8rem;color:var(--sage)}
.lp-foot a{color:var(--gold)}

/* ── thank you page ───────────────────────────── */
/* The confirmation page is a full green surface, so it carries the tile and the
   mark like every other page. Before this it had neither and read as orphaned. */
.ty{min-height:100vh;display:flex;flex-direction:column;text-align:center;
  background:var(--green-dark);color:var(--paper);
  position:relative;isolation:isolate;overflow:hidden}
.ty::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url('../logo/badge-tile.png') center/220px 446px repeat;opacity:.15}
@media(max-width:820px){.ty::before{background-size:150px 304px;opacity:.13}}
.ty-main{flex:1;display:grid;place-items:center;padding:2rem 0}
.ty .lp-head{text-align:left}
.ty-main .wrap{max-width:56ch}
.ty h1{color:var(--paper);margin-bottom:1rem}
.ty p{color:#dfe3d6;margin-bottom:.9rem}
.ty-mark{width:64px;height:64px;margin:0 auto 1.5rem;background:var(--amber);color:var(--ink);border-radius:var(--r-lg);
  display:grid;place-items:center;font-size:2rem;font-family:var(--display)}
.ty-acts{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;margin-top:1.75rem}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* utility classes used by the pages */
.opt{color:#4c5240;font-weight:600}  /* 6.3:1 on --oat; #6d7360 was 3.79 and failed AA */
.juan-eyebrow{color:var(--green-mid);display:block;margin-bottom:.9rem}
.juan-photo.await{aspect-ratio:4/5}
.lp .eyebrow{color:var(--gold)}
.lp .card{color:var(--ink)}
.lp .hero-acts{margin-top:1.9rem}
.ty .lp-foot{margin-top:2rem;color:var(--sage)}
/* ---------- Plans page ----------------------------------------------------
   A numbered list, not a card grid. Ten of anything in a grid reads as a
   menu to scan and dismiss; numbered rows read as something to go down.
   The number is decorative (the <ol> already carries the sequence for a
   screen reader), so it is aria-hidden and never spoken twice. */
.sec-lede{padding-bottom:1rem}
.plans{list-style:none;margin:2.5rem 0 0;padding:0;
  display:grid;gap:1px;background:var(--oat-deep);
  border:1px solid var(--oat-deep);border-radius:var(--r-lg);overflow:hidden}
@media(min-width:900px){.plans{grid-template-columns:1fr 1fr}}
/* The text indent is measured from where the number actually sits, not from a
   fixed guess. A flat 4.4rem happened to clear the digits at desktop --gut and
   collided with them as the gutter shrank. */
.plan{position:relative;background:var(--paper);
  padding:1.6rem var(--gut) 1.7rem calc(var(--gut) + 2.6rem)}
.plan-no{position:absolute;left:var(--gut);top:1.5rem;
  font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1;
  color:var(--green);letter-spacing:.02em}
.plan h2{font-size:clamp(1.15rem,2.1vw,1.4rem);line-height:1.05;margin:0 0 .55rem}
.plan p{margin:0 0 .7rem;font-size:.95rem}
.plan-fit{margin:0;color:#4a4738;font-size:.88rem}
.plan-fit .label{display:inline;margin-right:.4rem;color:var(--green-mid)}
.plans-note{max-width:62ch;margin:2rem 0 0;font-size:.92rem;color:#4a4738}

.plans-cta{text-align:center}
.plans-cta h2{color:var(--paper)}
.plans-cta p{color:#dfe3d6;max-width:52ch;margin:0 auto 1.6rem}
.plans-cta .hero-acts{justify-content:center}

/* The referral follow-up.
   Shown only when "A friend or neighbor" is the answer, and done with :has()
   rather than JavaScript so the reveal survives a no-JS visit. A browser
   without :has() shows the block permanently - the honest fallback, since
   both fields are optional and labelled. The gold rule marks it as a
   follow-up question rather than another thing being asked of everyone. */
.referral{display:none;margin:.35rem 0 .1rem;padding-left:.95rem;
  border-left:3px solid rgba(240,199,102,.55)}
.fields:has(select[name="heard"] option[value="A friend or neighbor"]:checked) .referral{display:block}
@supports not selector(:has(*)){.referral{display:block}}
.referral-note{font-family:var(--body);font-size:.84rem;color:#5b5747;
  margin:0 0 .35rem}
.referral > label + label{margin-top:.15rem}

.ty-wait{margin-top:2.5rem;font-size:.9rem;color:var(--sage)}

/* The Instagram card. Sized as a second call to action rather than a footnote:
   the photos are the strongest proof of work this business has, and a visitor
   who has just handed over their phone number is the likeliest person alive to
   go look at them. The glyph inherits currentColor so icon and text move
   together on hover instead of one lighting up alone. */
.ig-card{display:inline-flex;align-items:center;gap:.9rem;
  padding:.9rem 1.5rem;border:2px solid var(--sage);border-radius:var(--r-lg);
  background:rgba(240,199,102,.06);color:var(--paper);text-decoration:none;
  transition:color .18s,border-color .18s,background .18s,transform .18s}
.ig-card:hover,.ig-card:focus-visible{color:var(--gold);border-color:var(--gold);
  background:rgba(240,199,102,.13);transform:translateY(-2px)}
.ig-glyph{flex:none}
.ig-text{display:flex;flex-direction:column;text-align:left;line-height:1.15}
.ig-lead{font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;font-size:1.15rem}
.ig-handle{font-family:var(--body);font-size:.8rem;color:var(--sage);margin-top:.15rem}
.ig-card:hover .ig-handle,.ig-card:focus-visible .ig-handle{color:inherit}
@media(prefers-reduced-motion:reduce){.ig-card{transition:none}
  .ig-card:hover,.ig-card:focus-visible{transform:none}}