@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}
html{-webkit-text-size-adjust:100%}
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}
.mark{display:flex;align-items:center;gap:.7rem;margin-right:auto;text-decoration:none;color:inherit}
.mark-lock{width:44px;height:44px;flex:none;display:block}
.mark-name{font-family:var(--display);font-weight:800;font-size:1.24rem;line-height:1;
  color:var(--paper);text-transform:uppercase;letter-spacing:.01em}
.mark-name span{display:block;font-family:var(--body);font-size:.62rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--sage);margin-top:.2rem}
.navlinks{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0}
.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)}
.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)}
@media(max-width:820px){.navlinks{display:none}}

/* ── 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}

.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)}
.btn-ghost{background:transparent;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 ─────────────────────────────────────── */
.cities{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.4rem}
.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}
@media(max-width:900px){.rev{flex-basis:82%}}
.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:3px 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:.085;
}
@media(max-width:820px){
  /* smaller step so a phone still shows several badges across */
  .sec-dark::before{background-size:150px 304px;opacity:.07}
}
.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:.085;
}
@media(max-width:820px){.hero::before{background-size:150px 304px;opacity:.07}}
.hero-sun{z-index:1}   /* keep the sunset glow on top of the tile */

/* ── 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:.085}
@media(max-width:820px){.lp::before{background-size:150px 304px;opacity:.07}}
.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:.085}
@media(max-width:820px){.ty::before{background-size:150px 304px;opacity:.07}}
.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)}