/* Zen Grass — built from the brand: pebble cairn, slate, lime, real turf. */

:root {
  --bg: #f5f4ee;
  --bg-2: #ecebe2;
  --paper: #fbfaf6;
  --line: #dcdbcf;
  --ink: #22312d;
  --slate: #304945;
  --slate-2: #637673;
  --slate-3: #97a3a1;
  --lime: #98b04b;
  --lime-ink: #627d22;
  --lime-soft: #e7eccf;
  --char: #4a4a4a;
  --turf: #4f7f2a;
  --err: #a2462a;

  --f-display: 'Newsreader', 'Georgia', serif;
  --f-ui: 'Poppins', system-ui, sans-serif;

  --wrap: 1320px;
  --gut: clamp(1rem, 4vw, 3rem);
  --sec: clamp(5.5rem, 11vw, 10rem);
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --stone-r: 20px 24px 22px 18px / 24px 19px 23px 20px;

  --shadow: 0 1px 0 rgba(48, 73, 69, .06), 0 24px 48px -28px rgba(36, 58, 40, .45);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.16, 1, .3, 1);

  --z-nav: 40;
  --z-sheet: 50;
  --z-fab: 30;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--f-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3 { margin: 0; }
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--slate); color: var(--bg); padding: .7rem 1rem; border-radius: var(--r-sm); }
.skip:focus { top: 1rem; }

/* ---------- type ---------- */
.h2 {
  font: 400 clamp(2.2rem, 4.4vw, 3.75rem)/1.04 var(--f-display);
  font-variation-settings: 'SOFT' 100, 'opsz' 120;
  letter-spacing: -.018em;
  text-wrap: balance;
  max-width: 17ch;
  color: var(--ink);
}
.h3 { font: 600 1.3rem/1.25 var(--f-ui); letter-spacing: -.01em; }
.label {
  display: inline-flex; align-items: center; gap: .6em;
  font: 500 .95rem/1 var(--f-ui); color: var(--slate-2);
  margin-bottom: 1.4rem;
}
.label--light { color: var(--bg); }
.pebble {
  display: inline-block; width: 16px; height: 10px;
  background: var(--lime);
  border-radius: 55% 45% 50% 50% / 60% 55% 45% 40%;
  transform: rotate(-9deg);
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.12);
}

/* ---------- buttons & links ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.05rem 1.6rem 1.1rem;
  background: var(--slate); color: var(--bg);
  border: 0; border-radius: var(--stone-r);
  font: 600 1rem/1 var(--f-ui); letter-spacing: .005em; text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 22px -12px rgba(48, 73, 69, .7);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s;
}
.btn span { position: relative; z-index: 2; }
/* grass grows up through the button on hover */
.btn::after {
  content: ''; position: absolute; left: -4%; right: -4%; bottom: -2px; height: 70%;
  background: url('../img/blades.svg') bottom / 120px 100% repeat-x;
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .5s var(--spring);
  z-index: 1; opacity: .95;
}
.btn:hover { transform: translateY(-2px); background: #2a403c; box-shadow: 0 16px 28px -14px rgba(48, 73, 69, .75); }
.btn:hover::after { transform: scaleY(.62); }
.btn:active { transform: translateY(1px) scale(.98); transition-duration: .1s; }
.btn--sm { padding: .78rem 1.15rem .82rem; font-size: .92rem; }
.btn--wide { width: 100%; }

.tlink {
  display: inline-flex; align-items: center; gap: .45rem;
  font: 600 1rem/1.2 var(--f-ui); color: var(--slate); text-decoration: none;
  background: none; border: 0; padding: .3rem 0; cursor: pointer;
  background-image: linear-gradient(var(--lime), var(--lime));
  background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .45s var(--ease), color .2s;
}
.tlink svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.tlink:hover { background-size: 100% 2px; }
.tlink:hover svg { transform: translateX(4px); }

/* ---------- top bar + nav ---------- */
.topbar { background: var(--slate); color: #dfe6e1; font-size: .82rem; }
.topbar__in { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 38px; }
.topbar p { margin: 0; }
.topbar__contact { display: flex; gap: 1.5rem; }
.topbar a { text-decoration: none; opacity: .92; }
.topbar a:hover { color: #fff; opacity: 1; }

.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: rgba(245, 244, 238, .82);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background-color .3s;
}
.nav.is-scrolled { border-color: var(--line); background: rgba(245, 244, 238, .92); }
.nav__in { display: flex; align-items: center; gap: 2rem; min-height: 78px; }
.nav__links { display: flex; gap: .3rem; margin-left: auto; }
.nav__links a {
  position: relative; padding: .55rem .8rem; border-radius: var(--r-sm);
  font: 500 .95rem/1 var(--f-ui); color: var(--slate); text-decoration: none;
  transition: background-color .25s, color .25s;
}
.nav__links a:hover { background: var(--bg-2); }
.nav__links a.is-active { color: var(--ink); }
.nav__links a.is-active::after {
  content: ''; position: absolute; left: 50%; bottom: 2px; width: 12px; height: 7px; translate: -50% 0;
  background: var(--lime); border-radius: 55% 45% 50% 50% / 60% 55% 45% 40%;
}
.nav__burger { display: none; margin-left: auto; width: 46px; height: 46px; border: 0; background: var(--bg-2); border-radius: 14px; cursor: pointer; position: relative; }
.nav__burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--slate); border-radius: 2px; transition: transform .3s var(--ease), top .3s var(--ease); }
.nav__burger span:first-child { top: 18px; }
.nav__burger span:last-child { top: 26px; }
.nav__burger[aria-expanded="true"] span:first-child { top: 22px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { top: 22px; transform: rotate(-45deg); }
.nav__sheet[hidden] { display: none; }
.nav__sheet { display: grid; gap: .2rem; padding: .5rem var(--gut) 1.5rem; border-top: 1px solid var(--line); }
.nav__sheet a { padding: .8rem 0; font: 500 1.25rem/1.2 var(--f-ui); text-decoration: none; color: var(--slate); border-bottom: 1px solid var(--line); }
.nav__sheet-tel { color: var(--lime-ink) !important; border: 0 !important; }

.logo { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--char); }
.logo__mark { width: 44px; height: 42px; fill: currentColor; overflow: visible; }
.logo__mark .st { fill: currentColor; }
.logo__type { display: grid; line-height: 1; }
.logo__type b { font: 700 1.45rem/1 var(--f-ui); letter-spacing: -.015em; }
.logo__type i { font-style: normal; color: var(--lime); }
.logo__type small { font: 400 .72rem/1 var(--f-ui); margin-top: .3rem; letter-spacing: .01em; }
.logo--light { color: #e9ede7; }

.hero__kicker { display: flex; align-items: center; gap: .6rem; font: 500 .95rem/1.3 var(--f-ui); color: var(--slate); margin-bottom: 1.4rem; }
.hero__title {
  font: 360 clamp(2.7rem, 6.2vw, 6rem)/.96 var(--f-display);
  font-variation-settings: 'opsz' 72;
  letter-spacing: -.03em;
  max-width: 13ch;
  color: var(--ink);
  text-wrap: balance;
}
.hero__title em { font-style: italic; font-weight: 330; color: var(--lime-ink); }
.hero__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__title .w > span { display: inline-block; }
.hero__lede { max-width: 31rem; margin: 0 0 1.7rem; font-size: clamp(1.02rem, 1.2vw, 1.15rem); color: #34453f; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; }

/* ---------- hero: real gardens, rolled out like turf ---------- */
.hero { position: relative; padding: clamp(2rem, 5vh, 4rem) 0 clamp(2rem, 4vh, 3rem); }
.hero__top { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(1.8rem, 4vh, 3rem); }
.hero__top > * { min-width: 0; }
.show { position: relative; margin-inline: var(--gut); height: clamp(380px, 66vh, 760px); border-radius: 28px; overflow: hidden; background: var(--bg-2); }
.show__slide { position: absolute; inset: 0; margin: 0; clip-path: inset(0 100% 0 0); z-index: 1; }
.show__slide.is-on { clip-path: inset(0 0 0 0); z-index: 2; }
.show__slide.is-in { z-index: 3; animation: showRoll 1.5s cubic-bezier(.65, 0, .35, 1) forwards; }
.show__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.show__slide.is-on img, .show__slide.is-in img { animation: showDrift 8s linear forwards; }
.show__slide figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@keyframes showRoll { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes showDrift { from { transform: scale(1.06); } to { transform: scale(1); } }
/* the turf roll travelling ahead of the new lawn: flat, the latex backing with a green lip */
.show__roll { position: absolute; top: 0; bottom: 0; left: 0; width: 26px; z-index: 4; opacity: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, #2b2d2a 0 6px, #343632 6px 7px); box-shadow: -6px 0 0 #6fa633; translate: -50% 0; }
.show__roll.is-rolling { animation: rollMove 1.5s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes rollMove { 0% { left: 0%; opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.show__meta {
  position: absolute; left: 1.1rem; bottom: 1.1rem; z-index: 5; display: flex; align-items: center; gap: .9rem;
  padding: .55rem .55rem .55rem 1rem; border-radius: 16px; background: rgba(251, 250, 246, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden;
}
.show__count { font: 500 .82rem/1 var(--f-ui); color: var(--slate-2); font-variant-numeric: tabular-nums; }
.show__count b { color: var(--ink); font-weight: 600; }
.show__cap { font: italic 400 1.1rem/1.2 var(--f-display); color: var(--ink); min-width: 13ch; }
.show__next { width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--slate); color: var(--bg); cursor: pointer; display: grid; place-items: center; transition: background-color .3s; }
.show__next:hover { background: #2a403c; }
.show__next svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.show__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(48, 73, 69, .1); }
.show__bar i { position: absolute; inset: 0; background: var(--lime); transform-origin: left center; transform: scaleX(0); }

/* sub-page heads: words left, a real garden right */
.pagehead { padding: clamp(2rem, 5vh, 3.5rem) 0 clamp(2.5rem, 6vw, 5rem); }
.pagehead__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.pagehead__grid > * { min-width: 0; }
.pagehead .hero__title { font-size: clamp(2.5rem, 4.8vw, 4.7rem); }
.pagehead .hero__lede { margin-top: 1.4rem; }
.pagehead__photo { aspect-ratio: 4 / 3.2; margin: 0; }

@media (max-width: 1080px) {
  .hero__top, .pagehead__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 760px) {
  .show { height: min(110vw, 520px); border-radius: 20px; }
  .show__meta { left: .6rem; right: .6rem; bottom: .6rem; }
  .show__cap { min-width: 0; font-size: 1rem; flex: 1; }
}

/* ---------- why ---------- */
.why { padding: var(--sec) 0; }
.why__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(3rem, 7vw, 7rem); align-items: center; }
.why__lede { font-size: 1.15rem; max-width: 34rem; margin-top: 1.6rem; color: #3a4b45; }
.why__points { list-style: none; padding: 0; margin: 2.6rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2.2rem; }
.why__points li { display: flex; gap: 1rem; align-items: flex-start; }
.why__points img { width: 46px; height: auto; flex: none; mix-blend-mode: multiply; margin-top: .15rem; }
.why__points b { display: block; font-weight: 600; margin-bottom: .15rem; }
.why__points span { font-size: .96rem; color: var(--slate-2); line-height: 1.5; }

.cert { margin: 0; position: relative; }
.cert__paper {
  position: relative;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(48, 73, 69, .05) 31px 32px),
    var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  box-shadow: 0 2px 0 rgba(48,73,69,.05), 0 40px 70px -40px rgba(36, 58, 40, .55), 12px 14px 0 -2px var(--bg-2), 12px 14px 0 -1px var(--line);
  rotate: -1.8deg;
}
.cert__head { display: flex; gap: .9rem; align-items: center; padding-bottom: 1.1rem; border-bottom: 1px dashed var(--line); }
.cert__mark { width: 42px; height: 42px; color: var(--char); }
.cert__head b { display: block; font: 500 1.35rem/1.1 var(--f-display); font-variation-settings: 'SOFT' 100; }
.cert__head span { font-size: .82rem; color: var(--slate-2); }
.cert__years { display: flex; align-items: baseline; gap: .7rem; margin: 1.2rem 0 .6rem; font: italic 400 1.6rem/1 var(--f-display); color: var(--slate-2); }
.cert__years span { font: normal 380 clamp(6rem, 11vw, 9rem)/.85 var(--f-display); font-variation-settings: 'SOFT' 100, 'opsz' 144; color: var(--lime-ink); letter-spacing: -.04em; }
.cert__rows { margin: 0 0 1.4rem; display: grid; gap: .1rem; }
.cert__rows div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid rgba(48,73,69,.08); font-size: .95rem; }
.cert__rows dt { color: var(--slate-2); }
.cert__rows dd { margin: 0; font-weight: 500; }
.cert__blank { font-family: var(--f-display); font-style: italic; font-weight: 400 !important; font-size: 1.15rem; color: var(--slate); }
.cert__sign { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.cert__sign svg { width: min(260px, 70%); height: auto; }
.cert__sign span { font-size: .78rem; color: var(--slate-2); padding-bottom: .4rem; }
.cert__sig { fill: none; stroke: var(--slate); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cert__sig--b { stroke-width: 1; stroke: var(--slate-3); }
.cert__seal { position: absolute; top: -34px; right: -26px; width: 118px; height: 118px; rotate: 12deg; filter: drop-shadow(0 8px 12px rgba(60, 80, 20, .3)); }
.cert__seal svg { width: 100%; height: 100%; animation: spin 40s linear infinite; }
.cert__seal circle { fill: var(--lime); }
.cert__seal text { font: 600 9.4px/1 var(--f-ui); letter-spacing: .14em; fill: var(--ink); }
.cert__seal use { color: var(--ink); }
@keyframes spin { to { rotate: 360deg; } }
.cert figcaption { position: relative; margin-top: 2.4rem; max-width: 30rem; font-size: .95rem; color: var(--slate-2); padding-left: 1.7rem; }
.cert figcaption::before { content: ''; position: absolute; left: 0; top: .45em; width: 14px; height: 9px; border-radius: 55% 45% 50% 50% / 60% 55% 45% 40%; background: var(--lime); rotate: -8deg; }

/* ---------- grass / gauge ---------- */
.grass { padding: var(--sec) 0; background: var(--bg-2); }
.grass__head { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 4rem; align-items: end; margin-bottom: 3.5rem; }
.grass__head .label { grid-column: 1 / -1; margin-bottom: 0; }
.grass__head p:last-child { max-width: 32rem; margin: 0; color: #3a4b45; font-size: 1.08rem; }
.gauge { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: stretch; }
.gauge__stage {
  position: relative; min-height: 440px; border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(180deg, #e9ede2 0%, #e2e8da 70%, #dfe5d4 100%);
  box-shadow: inset 0 0 0 1px rgba(48, 73, 69, .08);
}
.gauge__readout { position: absolute; top: 1.5rem; right: 1.8rem; text-align: right; line-height: .9; color: var(--ink); }
.gauge__readout span { display: block; font: 360 clamp(4.5rem, 8vw, 7rem)/.85 var(--f-display); font-variation-settings: 'SOFT' 100, 'opsz' 144; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.gauge__readout small { font: 500 .9rem/1 var(--f-ui); color: var(--slate-2); }
.gauge__name { position: absolute; left: 5.2rem; top: 1.8rem; margin: 0; font: italic 400 1.15rem/1 var(--f-display); color: var(--slate); }
.gauge__controls { display: flex; flex-direction: column; justify-content: center; padding: 2rem clamp(1.2rem, 2.5vw, 2.2rem); background: var(--paper); border-radius: var(--r-lg); border: 1px solid var(--line); }
.gauge__label { font: 600 1.05rem/1.2 var(--f-ui); margin-bottom: 1.4rem; }
.gauge__range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: grab; margin: 0; }
.gauge__range:active { cursor: grabbing; }
.gauge__range::-webkit-slider-runnable-track {
  height: 12px; border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(48,73,69,.35) 0 1px, transparent 1px calc(100% / 12)),
    linear-gradient(90deg, var(--lime) var(--fill, 83%), var(--bg-2) var(--fill, 83%));
  box-shadow: inset 0 0 0 1px rgba(48,73,69,.12);
}
.gauge__range::-moz-range-track { height: 12px; border-radius: 8px; background: linear-gradient(90deg, var(--lime) var(--fill, 83%), var(--bg-2) var(--fill, 83%)); }
.gauge__range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 40px; height: 28px; margin-top: -8px;
  background: var(--char); border-radius: 55% 45% 50% 50% / 60% 55% 45% 40%;
  box-shadow: inset -4px -4px 0 rgba(0,0,0,.18), inset 3px 3px 0 rgba(255,255,255,.12), 0 6px 12px -4px rgba(0,0,0,.4);
  transition: transform .25s var(--spring);
}
.gauge__range::-moz-range-thumb { width: 40px; height: 28px; border: 0; background: var(--char); border-radius: 55% 45% 50% 50% / 60% 55% 45% 40%; }
.gauge__range:active::-webkit-slider-thumb { transform: scale(1.1) rotate(-6deg); }
.gauge__ticks { display: flex; justify-content: space-between; font-size: .8rem; color: var(--slate-2); margin-top: .4rem; font-variant-numeric: tabular-nums; }
.gauge__note { margin: 1.6rem 0 0; min-height: 3.3em; font: italic 400 1.15rem/1.4 var(--f-display); color: var(--slate); }

.grass__specs { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); margin-top: 4rem; align-items: start; }
.yarns { display: grid; gap: 1.6rem; }
.yarn { margin: 0; display: grid; grid-template-columns: 96px 1fr; gap: 1rem; align-items: center; }
.yarn svg { width: 96px; height: 64px; background: var(--paper); border-radius: var(--r-md); border: 1px solid var(--line); }
.yarn__c, .yarn__f { fill: var(--lime); stroke: var(--turf); stroke-width: 2; }
.yarn__c { fill: none; stroke: var(--lime); stroke-width: 9; stroke-linecap: round; }
.yarn circle { fill: var(--turf); }
.yarn figcaption { font-size: .95rem; color: var(--slate-2); line-height: 1.5; }
.yarn b { display: block; color: var(--ink); font-weight: 600; }
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.feature-list li { display: flex; gap: .8rem; align-items: baseline; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.feature-list li::before { content: ''; width: 10px; height: 14px; flex: none; translate: 0 2px; background: var(--lime); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.grass__quote { margin: 0; padding: 1.8rem; background: var(--slate); color: #eef1ea; border-radius: var(--stone-r); }
.grass__quote p { font: 400 1.25rem/1.4 var(--f-display); font-variation-settings: 'SOFT' 100; }
.grass__quote cite { font-style: normal; font-size: .9rem; color: var(--lime); font-weight: 500; }

/* ---------- under the lawn ---------- */
.under { padding: var(--sec) 0; overflow: hidden; }
.under__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.under__text > p { max-width: 32rem; color: #3a4b45; margin-top: 1.4rem; }
.layers-list { list-style: none; padding: 0; margin: 2.2rem 0 0; counter-reset: layer; }
.layers-list li {
  position: relative; display: grid; grid-template-columns: 2.4rem 1fr; column-gap: .6rem;
  padding: .9rem .8rem .9rem 0; border-top: 1px solid var(--line); cursor: default;
  transition: background-color .3s;
  border-radius: 12px;
}
.layers-list li::before { counter-increment: layer; content: counter(layer, decimal-leading-zero); grid-row: span 2; font: 500 .85rem/1.6 var(--f-ui); color: var(--slate-3); padding-left: .7rem; }
.layers-list li b { font-weight: 600; }
.layers-list li span { font-size: .93rem; color: var(--slate-2); line-height: 1.5; }
.layers-list li.is-on { background: var(--paper); }
.layers-list li.is-on::before { color: var(--lime-ink); }

.strata { position: relative; height: clamp(420px, 52vw, 640px); perspective: 2200px; }
.strata__scene { position: absolute; left: 50%; top: 52%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-38deg); }
.slab3d { position: absolute; transform-style: preserve-3d; transition: transform .9s var(--ease); }
.slab3d .face { position: absolute; left: 0; top: 0; backface-visibility: hidden; }
.slab3d .top { transform-origin: 0 0; }
.slab3d.is-dim .face { filter: saturate(.6) brightness(1.06); opacity: .55; }
.slab3d .tag {
  position: absolute; white-space: nowrap; transform-origin: 0 0;
  font: 600 13px/1 var(--f-ui); color: var(--ink);
  background: var(--paper); padding: 7px 10px; border-radius: 8px;
  box-shadow: 0 6px 14px -8px rgba(0,0,0,.4);
  opacity: 0; transition: opacity .5s;
}
.strata.is-open .slab3d .tag { opacity: 1; }

/* ---------- services: plant labels in a bed of turf ---------- */
.services { padding: var(--sec) 0 calc(var(--sec) * .8); background: var(--bg-2); }
.services__head { margin-bottom: 2rem; }
.bed { position: relative; height: 300px; margin-bottom: 3.5rem; }
.bed__stakes { position: relative; z-index: 1; height: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: .8rem; padding-bottom: 0; }
.stake {
  --lift: 0px; --rot: 0deg; --base: 0px;
  position: relative; flex: 1 1 0; max-width: 168px; height: 250px;
  border: 0; background: none; padding: 0; cursor: pointer;
  transform: translateY(calc(var(--base) - var(--lift))) rotate(var(--rot));
  transform-origin: 50% 100%;
  transition: transform .55s var(--spring);
  -webkit-tap-highlight-color: transparent;
}
.stake::after {
  content: ''; position: absolute; left: 50%; top: 84px; width: 38px; height: 150px; translate: -50% 0;
  background: linear-gradient(90deg, #e9e8e0, #fbfaf6 45%, #dddcd2);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.stake__n, .stake__t { position: relative; z-index: 1; display: block; }
.stake::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 92px; z-index: 1;
  background: linear-gradient(180deg, #fefdf9, #f2f1ea);
  border-radius: 12px 12px 10px 10px;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 10px 20px -12px rgba(30, 50, 20, .55);
  transition: background .35s;
}
.stake__n { position: absolute; z-index: 2; top: 14px; left: 14px; font: 500 .78rem/1 var(--f-ui); color: var(--slate-3); }
.stake__t { position: absolute; z-index: 2; top: 38px; left: 14px; right: 10px; text-align: left; font: 600 1.02rem/1.15 var(--f-ui); color: var(--ink); }
.stake:nth-child(1) { --rot: -3deg; --base: 6px; }
.stake:nth-child(2) { --rot: 2deg; --base: 20px; }
.stake:nth-child(3) { --rot: -1.5deg; --base: 0px; }
.stake:nth-child(4) { --rot: 3.5deg; --base: 14px; }
.stake:nth-child(5) { --rot: -2.5deg; --base: 26px; }
.stake:nth-child(6) { --rot: 1.5deg; --base: 8px; }
.stake:hover { --lift: 12px; }
.stake[aria-selected="true"] { --lift: 34px; --rot: 0deg; }
.stake[aria-selected="true"]::before { background: linear-gradient(180deg, #eef3d6, #dfe8bb); }
.stake[aria-selected="true"] .stake__n { color: var(--lime-ink); }
.bed__turf {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: -1px; height: 96px; pointer-events: none;
  background: url('../img/lawn-strip.webp') 0 30% / 1200px auto repeat-x;
  box-shadow: inset 0 18px 22px -16px rgba(20, 40, 10, .55);
}
.bed__fringe { position: absolute; left: 0; right: 0; bottom: calc(100% - 4px); width: 100%; height: 44px; }

.svc { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.svc__media { aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; background: var(--line); }
.svc__media img { width: 100%; height: 100%; object-fit: cover; transition: opacity .45s, transform 1.2s var(--ease); }
.svc__media img.is-swap { opacity: 0; transform: scale(1.04); }
.svc__body p { margin: 1.1rem 0 1.6rem; color: #3a4b45; max-width: 34rem; }
.svc__body > * { transition: opacity .35s, transform .45s var(--ease); }
.svc.is-swap .svc__body > * { opacity: 0; transform: translateY(8px); }

/* ---------- work: rolled-out photos ---------- */
.work { padding: var(--sec) 0; }
.work__head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 1rem 4rem; margin-bottom: 3rem; }
.work__head .label { grid-column: 1 / -1; margin-bottom: 0; }
.work__head p:last-child { margin: 0; color: #3a4b45; max-width: 30rem; }
.film { position: relative; margin: 0 0 1.4rem; aspect-ratio: 16 / 8; border-radius: var(--r-lg); overflow: hidden; background: #2a3a2e; }
.film video { width: 100%; height: 100%; object-fit: cover; }
.film__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 150px; height: 82px; border: 0; padding: 0; background: none; cursor: pointer;
  transition: transform .5s var(--spring), opacity .4s;
}
.film__play > svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--paper); filter: drop-shadow(0 12px 20px rgba(0,0,0,.3)); }
.film__play span { position: relative; display: inline-flex; align-items: center; gap: .4rem; font: 600 1rem/1 var(--f-ui); color: var(--ink); }
.film__play span svg { width: 16px; height: 16px; fill: var(--slate); }
.film__play:hover { transform: scale(1.07) rotate(-3deg); }
.film.is-playing .film__play { opacity: 0; pointer-events: none; }
.film figcaption {
  position: absolute; left: 1.2rem; bottom: 1.2rem; display: flex; gap: .7rem; align-items: baseline;
  padding: .65rem .95rem; background: rgba(251, 250, 246, .92); border-radius: 12px;
  font-size: .88rem; color: var(--slate-2);
}
.film figcaption b { color: var(--ink); font-weight: 600; font-size: .95rem; }

.rolls { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(70px, 8.4vw, 118px); gap: 1.4rem; }
.roll { --p: 0; position: relative; margin: 0; min-height: 0; }
.roll__img { position: absolute; inset: 0; border-radius: var(--r-md); overflow: hidden; clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0 round var(--r-md)); background: var(--line); }
.roll__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.12 - var(--p) * .12)); transform-origin: left center; }
/* the turf roll itself, rolling out ahead of the photo */
.roll::after {
  content: ''; position: absolute; top: -4px; bottom: -4px; z-index: 2;
  left: calc(var(--p) * 100%);
  width: calc(34px * (1 - var(--p) * .55));
  translate: -50% 0;
  border-radius: 999px / 22px;
  /* artificial turf is rolled grass-in, so you see the latex backing and a green lip */
  background:
    linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,0) 28%, rgba(255,255,255,.22) 46%, rgba(0,0,0,0) 60%, rgba(0,0,0,.5)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 9px),
    #34362f;
  box-shadow: -5px 0 0 -1px #6fa633, -8px 0 0 -2px #4a8227, 8px 0 16px -6px rgba(20, 40, 10, .55);
  opacity: var(--ro, 1);
  pointer-events: none;
}
.roll figcaption {
  position: absolute; left: .8rem; bottom: .8rem; z-index: 1;
  padding: .4rem .7rem; border-radius: 9px; background: rgba(251, 250, 246, .92);
  font: 500 .8rem/1.2 var(--f-ui); color: var(--ink);
  opacity: var(--ro-cap, 0);
  transition: opacity .5s;
}
.roll--a { grid-column: 1 / 8; grid-row: span 4; }
.roll--b { grid-column: 8 / 13; grid-row: span 2; }
.roll--c { grid-column: 8 / 13; grid-row: span 2; }
.roll--d { grid-column: 1 / 5; grid-row: span 3; }
.roll--e { grid-column: 5 / 9; grid-row: span 3; }
.roll--f { grid-column: 9 / 13; grid-row: span 3; }
.roll--g { grid-column: 1 / 6; grid-row: span 3; }
.roll--h { grid-column: 6 / 10; grid-row: span 3; }
.roll--i { grid-column: 10 / 13; grid-row: span 3; }

.pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.6rem; align-items: center; margin-top: 4.5rem; }
.pair .roll { aspect-ratio: 4 / 3; }
.pair__arrow { display: grid; justify-items: center; gap: .3rem; font: italic 400 1.1rem/1 var(--f-display); color: var(--slate-2); }
.pair__arrow svg { width: 80px; height: 40px; fill: none; stroke: var(--slate); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- reviews: stepping stones on the lawn ---------- */
.reviews {
  position: relative; padding: calc(var(--sec) * .9) 0 var(--sec);
  background: #4c7a28 url('../img/lawn-field.webp') center / cover no-repeat;
}
.reviews::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 50%, transparent 40%, rgba(25, 45, 12, .35)); pointer-events: none; }
.reviews__head { position: relative; margin-bottom: 3rem; }
.reviews__sign { display: inline-block; background: var(--paper); padding: 1.4rem 2rem 1.7rem; border-radius: 6px; box-shadow: 0 22px 34px -16px rgba(15, 35, 8, .7), inset 0 -3px 0 rgba(0,0,0,.05); rotate: -1deg; }
.reviews__sign .label { margin-bottom: .8rem; }
.reviews__sign .h2 { max-width: 22ch; }
.path { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem 2.2rem; align-items: start; }
.slab {
  --r: 0deg;
  margin: 0; padding: 1.7rem 1.7rem 1.5rem;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.35) 0 1px, transparent 1.5px) 0 0 / 9px 9px,
    radial-gradient(circle at 70% 60%, rgba(0,0,0,.05) 0 1px, transparent 1.5px) 0 0 / 13px 13px,
    linear-gradient(150deg, #eceae2, #d9d7cd);
  border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -3px 0 rgba(0,0,0,.06), 0 24px 30px -18px rgba(12, 32, 6, .8), 0 3px 4px rgba(12, 32, 6, .35);
  rotate: var(--r);
}
.slab p { font: 400 1.12rem/1.45 var(--f-display); font-variation-settings: 'SOFT' 100; color: var(--ink); margin-bottom: 1.1rem; }
.slab cite { font: 600 .85rem/1 var(--f-ui); font-style: normal; color: var(--slate-2); }
.slab:nth-child(1) { --r: -1.6deg; }
.slab:nth-child(2) { --r: 1.2deg; margin-top: 4.5rem; }
.slab:nth-child(3) { --r: -.8deg; margin-top: 1.5rem; }
.slab:nth-child(4) { --r: 1.8deg; margin-left: 12%; }
.slab:nth-child(5) { --r: -1.2deg; margin-top: 3.5rem; }
.slab:nth-child(6) { --r: .9deg; margin-top: -1rem; margin-right: 10%; }
.slab:nth-child(7) { --r: -1deg; grid-column: 2 / 4; max-width: 640px; justify-self: center; }

/* ---------- quote ---------- */
.quote { padding: var(--sec) 0; }
.quote__head { margin-bottom: 3rem; }
.quote__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.plan { background: var(--bg-2); border-radius: var(--r-lg); padding: clamp(1.2rem, 2.5vw, 2rem); }
.plan__board { position: relative; aspect-ratio: 5 / 4; background: var(--paper); border-radius: var(--r-md); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.plan__svg { width: 100%; height: 100%; touch-action: none; user-select: none; }
.plan__svg .grid { stroke: rgba(48, 73, 69, .08); stroke-width: 1; }
.plan__svg .dim { font: 500 12px/1 var(--f-ui); fill: var(--slate-2); }
.plan__svg .dimline { stroke: var(--slate-3); stroke-width: 1; }
.plan__svg .seam { stroke: rgba(255, 255, 255, .75); stroke-width: 1.5; stroke-dasharray: 6 5; }
.plan__svg .lawn-edge { fill: none; stroke: var(--turf); stroke-width: 2; }
.plan__svg .handle { cursor: nwse-resize; }
.plan__svg .handle path { fill: var(--char); transition: transform .3s var(--spring); transform-box: fill-box; transform-origin: center; }
.plan__svg .handle:hover path, .plan__svg .handle.is-drag path { transform: scale(1.15) rotate(-8deg); }
.plan__inputs { display: flex; gap: 1rem; margin-top: 1.2rem; }
.plan__inputs label { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .55rem .6rem .55rem 1rem; background: var(--paper); border-radius: 12px; font-weight: 500; font-size: .92rem; }
.plan__inputs span { display: flex; align-items: center; gap: .35rem; color: var(--slate-2); }
.plan__inputs input { width: 4.4rem; padding: .45rem .5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font: 600 1rem/1 var(--f-ui); text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.plan__out { display: grid; grid-template-columns: auto auto 1fr; gap: 1.6rem; margin: 1.5rem 0 1rem; padding: 1.1rem 1.2rem; background: var(--slate); color: var(--bg); border-radius: var(--stone-r); }
.plan__out small { display: block; font-size: .78rem; opacity: .75; margin-bottom: .3rem; }
.plan__out b { font: 500 1.25rem/1 var(--f-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan__price { text-align: right; }
.plan__price b { font: 400 1.5rem/1 var(--f-display); color: #dfeaa9; }
.plan__note { font-size: .85rem; color: var(--slate-2); margin-bottom: .8rem; }

.form { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2.6rem); box-shadow: var(--shadow); }
.form__steps { display: flex; gap: .4rem; margin-bottom: 1.4rem; }
.form__steps span { width: 44px; height: 6px; border-radius: 4px; background: var(--line); transform: scaleX(.64); transform-origin: left center; transition: background .3s, transform .4s var(--ease); }
.form__steps span.is-on { background: var(--lime); transform: none; }
.form__step { border: 0; margin: 0; padding: 0; display: none; grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem; }
.form__step.is-active { display: grid; animation: stepIn .5s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateX(14px); } }
.form__step legend { grid-column: 1 / -1; float: left; width: 100%; margin-bottom: .2rem; }
.form__intro { grid-column: 1 / -1; color: var(--slate-2); font-size: .95rem; margin: .4rem 0 .4rem; }
.field { display: grid; gap: .45rem; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field__label { font: 500 .88rem/1.2 var(--f-ui); color: var(--slate); }
.field__label i { color: var(--err); font-style: normal; }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1rem; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--bg); font: 400 1rem/1.3 var(--f-ui); color: var(--ink);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23304945' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 18px; }
.field textarea { resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #c7c6b8; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--slate); background: #fff; box-shadow: 0 0 0 4px var(--lime-soft); }
.field__err { display: none; margin: 0; font-size: .82rem; color: var(--err); }
.field.is-invalid .field__err { display: block; }
.field.is-invalid input, .field.is-invalid .choice span { border-color: var(--err); }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.choice label { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; border: 1.5px solid var(--line); border-radius: 12px; font-weight: 500; transition: border-color .2s, background-color .2s; background: var(--bg); }
.choice span::before { content: ''; width: 16px; height: 11px; border-radius: 55% 45% 50% 50% / 60% 55% 45% 40%; background: var(--line); transition: background .2s, transform .35s var(--spring); }
.choice input:checked + span { border-color: var(--slate); background: #fff; }
.choice input:checked + span::before { background: var(--lime); transform: scale(1.25) rotate(-10deg); }
.choice input:focus-visible + span { box-shadow: 0 0 0 4px var(--lime-soft); }
.form .btn { grid-column: 1 / -1; margin-top: .6rem; }
.form__row { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; margin-top: .6rem; }
.form__row .btn { margin: 0; }
.form__done { text-align: center; padding: 3rem 1rem; }
.form__done svg { width: 64px; height: 60px; margin: 0 auto 1.4rem; color: var(--char); }
.form__done p { color: var(--slate-2); margin-top: .8rem; }

/* ---------- process ---------- */
.process { padding: var(--sec) 0; background: var(--bg-2); }
.process__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2rem clamp(2rem, 6vw, 6rem); align-items: center; }
.process__head { grid-column: 1 / -1; }
.cairn svg { width: 100%; max-width: 380px; height: auto; margin-inline: auto; overflow: visible; }
.cairn__stone { fill: var(--char); }
.cs2 { fill: #555756; }
.cs3 { fill: #5e605f; }
.cairn__shine { fill: none; stroke: rgba(255,255,255,.7); stroke-width: 2.5; stroke-linecap: round; }
.cairn__shadow { fill: rgba(48, 73, 69, .18); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.step { position: relative; padding: 1.8rem 0 1.8rem 4.2rem; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before { content: ''; position: absolute; left: .3rem; top: 2.05rem; width: 34px; height: 22px; background: var(--char); border-radius: 55% 45% 50% 50% / 60% 55% 45% 40%; box-shadow: inset -3px -3px 0 rgba(0,0,0,.18); }
.step:nth-child(3)::before { background: var(--lime); }
.step__n { display: block; font: 500 .85rem/1 var(--f-ui); color: var(--slate-2); margin-bottom: .5rem; }
.step h3 { font: 400 1.9rem/1.1 var(--f-display); font-variation-settings: 'SOFT' 100; letter-spacing: -.01em; }
.step p { margin: .7rem 0 0; color: #3a4b45; max-width: 34rem; }

/* ---------- areas ---------- */
.areas { padding: var(--sec) 0; }
.areas__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.areas__text > p { color: #3a4b45; max-width: 32rem; margin-top: 1.4rem; }
.areas__links { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.8rem 0 1.2rem; }
.areas__links a {
  display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-radius: 12px;
  background: var(--paper); border: 1px solid var(--line); text-decoration: none; font-weight: 500;
  transition: border-color .25s, transform .35s var(--spring), background-color .25s;
}
.areas__links a::before { content: ''; width: 12px; height: 8px; border-radius: 55% 45% 50% 50% / 60% 55% 45% 40%; background: var(--lime); }
.areas__links a:hover { border-color: var(--slate); transform: translateY(-2px) rotate(-1deg); }
.areas__more { font-size: .92rem; color: var(--slate-2); max-width: 30rem; }
.map { background: var(--bg-2); border-radius: var(--r-lg); overflow: hidden; }
.map svg { width: 100%; height: auto; overflow: visible; }
.map .lens-bg { fill: var(--paper); }
.map .lens-edge { fill: none; stroke: var(--char); stroke-width: 5; }
.map .lens-ring { fill: rgba(152,176,75,.14); stroke: var(--char); stroke-width: 2; stroke-dasharray: 4 4; }
.map .lens-arm { stroke: var(--char); stroke-width: 2; stroke-dasharray: 4 4; }
.map .lens .town text { font-size: 12px; }
.map .contour { fill: none; stroke: rgba(48, 73, 69, .1); stroke-width: 1.2; }
.map .route { fill: none; stroke: var(--slate); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.map .town circle { fill: var(--paper); stroke: var(--slate); stroke-width: 2; }
.map .town text { font: 500 13px/1 var(--f-ui); fill: var(--ink); }
.map .office path { fill: var(--char); }
.map .office text { font: 600 14px/1 var(--f-ui); fill: var(--ink); }
.map .office .sub { font: 400 11.5px/1 var(--f-ui); fill: var(--slate-2); }
.map .halo { fill: var(--lime); opacity: .28; transform-box: fill-box; transform-origin: center; animation: halo 3.2s var(--ease) infinite; }
@keyframes halo { 0% { transform: scale(.4); opacity: .5; } 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- faq ---------- */
.faq { padding: var(--sec) 0; background: var(--bg-2); }
.faq__head { margin-bottom: 3rem; }
.faq__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.faq__qs { display: grid; }
.faq__q {
  position: relative; display: grid; grid-template-columns: 2.2rem 1fr; text-align: left;
  padding: 1.1rem .8rem 1.1rem 0; border: 0; border-top: 1px solid var(--line); background: none; cursor: pointer;
  font: 500 1.05rem/1.4 var(--f-ui); color: var(--slate-2);
  transition: color .25s;
}
.faq__q:last-child { border-bottom: 1px solid var(--line); }
.faq__q span:first-child { font-size: .82rem; color: var(--slate-3); padding-top: .2rem; }
.faq__q:hover { color: var(--ink); }
.faq__q > span { transition: transform .35s var(--ease); }
.faq__q[aria-selected="true"] { color: var(--ink); }
.faq__q[aria-selected="true"] > span:last-child { transform: translateX(.5rem); }
.faq__q[aria-selected="true"] > span:first-child { color: transparent; position: relative; }
.faq__q[aria-selected="true"] > span:first-child::before { content: ''; position: absolute; left: 0; top: .5rem; width: 14px; height: 9px; border-radius: 55% 45% 50% 50% / 60% 55% 45% 40%; background: var(--lime); rotate: -8deg; }
.faq__a { background: var(--paper); border-radius: var(--r-lg); padding: clamp(1.6rem, 3vw, 2.8rem); border: 1px solid var(--line); min-height: 320px; }
.faq__a h3 { font: 400 1.75rem/1.15 var(--f-display); font-variation-settings: 'SOFT' 100; margin-bottom: 1.1rem; text-wrap: balance; }
.faq__a p { color: #3a4b45; }
.faq__a > * { animation: stepIn .5s var(--ease); }
.faq__inline { display: none; }

/* ---------- footer ---------- */
.foot { position: relative; background: var(--slate); color: #dfe6e1; padding: 5rem 0 2rem; margin-top: 3rem; }
.foot__fringe { position: absolute; left: 0; right: 0; bottom: calc(100% - 2px); width: 100%; height: 48px; }
.foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 2.5rem; }
.foot__brand p { margin-top: 1.4rem; max-width: 26rem; font-size: .93rem; color: #c3cec9; }
.foot__col { display: grid; align-content: start; gap: .55rem; }
.foot h3 { font: 600 .95rem/1 var(--f-ui); color: var(--lime); margin-bottom: .5rem; }
.foot a { text-decoration: none; color: #e9ede7; font-size: .95rem; }
.foot a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 4px; }
.foot address { font-style: normal; font-size: .95rem; line-height: 1.6; }
.foot__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 4rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .84rem; color: #aebbb6; }
.foot__legal nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.foot__legal a { font-size: .84rem; color: #c3cec9; }

.fringe-blade { transform-box: fill-box; transform-origin: 50% 100%; animation: sway var(--d, 4s) ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes sway { from { transform: rotate(calc(var(--a, 4deg) * -1)); } to { transform: rotate(var(--a, 4deg)); } }

.callfab { opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .4s, transform .5s var(--ease); display: none; position: fixed; right: 1rem; bottom: 1rem; z-index: var(--z-fab); width: 58px; height: 58px; border-radius: 50%; background: var(--slate); place-items: center; box-shadow: 0 12px 24px -10px rgba(36, 58, 40, .8); }
.callfab svg { width: 24px; height: 24px; fill: var(--bg); }

/* ---------- reveal defaults (JS adds motion) ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav__in > .btn { display: none; }
  .why__grid, .under__grid, .areas__grid, .quote__grid, .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .cert { max-width: 560px; margin-inline: auto; width: 100%; }
  .gauge { grid-template-columns: 1fr; }
  .grass__specs { grid-template-columns: 1fr 1fr; }
  .grass__quote { grid-column: 1 / -1; }
  .svc { grid-template-columns: 1fr; }
  .path { grid-template-columns: 1fr 1fr; }
  .slab:nth-child(n) { margin: 0; grid-column: auto; max-width: none; }
  .slab:nth-child(even) { margin-top: 2.5rem; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .process__grid { grid-template-columns: 1fr; }
  .cairn svg { max-width: 260px; }
}
@media (max-width: 760px) {
  body { font-size: 1rem; }
  .topbar p { display: none; }
  .topbar__in { justify-content: center; }
  .nav__in { min-height: 66px; }
  .logo__type b { font-size: 1.25rem; }
  .logo__mark { width: 38px; height: 36px; }
  .why__points { grid-template-columns: 1fr; }
  .cert__seal { width: 92px; height: 92px; right: -6px; top: -30px; }
  .cert__rows div { grid-template-columns: 6.5rem 1fr; }
  .grass__head, .work__head { grid-template-columns: 1fr; }
  .gauge__stage { min-height: 340px; }
  .gauge__name { left: 4.2rem; top: 1.2rem; font-size: 1rem; }
  .gauge__readout { top: 1rem; right: 1.1rem; }
  .grass__specs { grid-template-columns: 1fr; }
  .bed { height: 250px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin-inline: 0; }
  .bed::-webkit-scrollbar { display: none; }
  .bed__stakes { width: max-content; gap: .9rem; padding-inline: var(--gut); max-width: none; }
  .bed__turf { width: max(100%, 1060px); }
  .stake { flex: 0 0 132px; height: 210px; }
  .film { aspect-ratio: 4 / 3; }
  .rolls { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: .9rem; }
  .roll--a, .roll--h { grid-column: 1 / -1; grid-row: span 2; }
  .roll--b, .roll--c, .roll--d, .roll--e, .roll--f, .roll--g, .roll--i { grid-column: auto; grid-row: span 1; }
  .roll figcaption { display: none; }
  .pair { grid-template-columns: 1fr; }
  .pair__arrow svg { rotate: 90deg; }
  .path { grid-template-columns: 1fr; gap: 1.4rem; }
  .slab:nth-child(even) { margin-top: 0; }
  .slab:nth-child(odd) { margin-right: 6%; }
  .slab:nth-child(even) { margin-left: 6%; }
  .plan__out { grid-template-columns: 1fr 1fr; }
  .plan__price { grid-column: 1 / -1; text-align: left; }
  .form__step { grid-template-columns: 1fr; }
  .faq__a { display: none; }
  .faq__inline { display: block; padding: 0 0 1.2rem 2.2rem; color: #3a4b45; }
  .faq__inline[hidden] { display: none; }
  .foot__grid { grid-template-columns: 1fr; }
  .callfab { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .roll { --p: 1 !important; }
}

/* ---------- additions ---------- */

.gauge__sample { display: flex; gap: 1rem; align-items: center; margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px dashed var(--line); }
.gauge__sample img { width: 76px; height: 76px; border-radius: 55% 45% 50% 50% / 60% 55% 45% 40%; object-fit: cover; flex: none; box-shadow: 0 8px 16px -10px rgba(30,50,20,.7); }
.gauge__sample p { margin: 0; font-size: .92rem; color: var(--slate-2); line-height: 1.5; }
.gauge__sample b { color: var(--ink); font-weight: 600; }

.case { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; margin-bottom: 4.5rem; }
.case__place { font: 500 .95rem/1 var(--f-ui); color: var(--lime-ink); margin-bottom: 1rem; }
.case__title { font: 400 clamp(1.6rem, 2.4vw, 2.2rem)/1.15 var(--f-display); font-variation-settings: 'SOFT' 100; letter-spacing: -.01em; text-wrap: balance; }
.case__marks { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .9rem; }
.case__marks li { display: flex; gap: .8rem; align-items: baseline; color: var(--slate-3); font-size: .98rem; transition: color .4s; }
.case__marks li span { width: 14px; height: 9px; flex: none; border-radius: 55% 45% 50% 50% / 60% 55% 45% 40%; background: var(--line); transition: background .4s, transform .4s var(--spring); }
.case__marks li.is-on { color: var(--ink); }
.case__marks li.is-on span { background: var(--lime); transform: scale(1.3) rotate(-8deg); }
.film { aspect-ratio: 53 / 30; margin: 0; }
.film__state { position: absolute; top: 1rem; left: 1rem; margin: 0; display: flex; gap: .3rem; padding: .3rem; background: rgba(251, 250, 246, .9); border-radius: 12px; }
.film__state span { padding: .4rem .7rem; border-radius: 9px; font: 600 .82rem/1 var(--f-ui); color: var(--slate-3); transition: background .35s, color .35s; }
.film[data-phase="before"] [data-state-before], .film[data-phase="after"] [data-state-after] { background: var(--slate); color: var(--bg); }
.film:not([data-phase]) [data-state-before] { background: var(--slate); color: var(--bg); }
.film__play { width: 250px; height: 92px; }
.film__bar { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; height: 4px; border-radius: 4px; background: rgba(251,250,246,.45); }
.film__bar i { position: absolute; inset: 0 auto 0 0; width: var(--fp, 0%); background: var(--lime); border-radius: 4px; }
.film__bar b { position: absolute; top: -4px; width: 2px; height: 12px; background: var(--paper); }
.film.is-playing .film__bar { opacity: 1; }

.slab3d .num {
  position: absolute; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font: 600 12px/1 var(--f-ui); color: var(--ink); background: var(--paper);
  box-shadow: 0 6px 12px -6px rgba(0,0,0,.5); transform-origin: 50% 50%;
}
.slab3d.is-hot .num { background: var(--lime); }
.slab3d { cursor: default; }

@media (max-width: 1080px) { .case { grid-template-columns: 1fr; } }

/* grid children must be allowed to shrink below their content width */
.why__grid > *, .under__grid > *, .areas__grid > *, .quote__grid > *, .faq__grid > *, .gauge > *, .svc > *, .case > *, .grass__specs > * { min-width: 0; }
@media (max-width: 760px) {
  .plan__inputs { gap: .6rem; }
  .plan__inputs label { padding-left: .8rem; font-size: .88rem; }
  .plan__inputs input { width: 3.6rem; }
  .choice { grid-template-columns: 1fr; }
  .form { padding: 1.3rem; }
}

/* ---------- sub-pages ---------- */
.crumbs { display: flex; gap: .55rem; align-items: center; margin-bottom: 1.4rem; font: 500 .9rem/1 var(--f-ui); color: var(--slate-2); }
.crumbs a { text-decoration: none; color: var(--slate); }
.crumbs a:hover { text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 4px; }
.crumbs span[aria-hidden] { color: var(--slate-3); }
.hero__contact { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: .8rem; pointer-events: auto; }
.hero__contact li { display: grid; gap: .3rem; padding: .9rem 1.1rem; background: rgba(251, 250, 246, .88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 14px; box-shadow: 0 10px 24px -18px rgba(30, 50, 20, .6); }
.hero__contact small { font-size: .78rem; color: var(--slate-2); }
.hero__contact a, .hero__contact span { font-weight: 600; color: var(--ink); text-decoration: none; font-size: 1rem; }
.hero__contact a:hover { color: var(--lime-ink); }

.plainhead { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2rem, 4vw, 3rem); background: linear-gradient(180deg, #dde5dc, var(--bg)); }
.plainhead__title { font: 380 clamp(2.4rem, 5vw, 4.4rem)/1 var(--f-display); font-variation-settings: 'SOFT' 100, 'opsz' 144; letter-spacing: -.025em; max-width: 18ch; text-wrap: balance; }
.plainhead__lede { margin-top: 1.2rem; color: var(--slate-2); max-width: 40rem; }
.plainhead__lede a { color: var(--slate); text-decoration-color: var(--lime); text-underline-offset: 3px; }
.legal { padding: 1rem 0 var(--sec); }
.legal__in { max-width: 760px; }
.legal h2 { font: 600 1.15rem/1.3 var(--f-ui); margin: 2.4rem 0 .7rem; }
.legal p, .legal li { color: #3a4b45; }
.legal ul { padding-left: 1.2rem; margin: 0 0 1em; }
.legal li { margin: .25rem 0; }
.legal li::marker { color: var(--lime-ink); }
.legal a { color: var(--slate); text-decoration-color: var(--lime); text-underline-offset: 3px; }
.legal__note { padding: 1.2rem 1.4rem; background: var(--bg-2); border-radius: 12px; }

.story { padding: var(--sec) 0 calc(var(--sec) * .5); }
.story__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.story__lead { font: 380 clamp(1.7rem, 3vw, 2.7rem)/1.18 var(--f-display); font-variation-settings: 'SOFT' 100; letter-spacing: -.012em; margin: 0; text-wrap: balance; }
.story__img { aspect-ratio: 4 / 3; margin: 0 0 1.4rem; }
.story__side p { color: #3a4b45; }

.local { padding: var(--sec) 0; }
.local__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.local__text > p { margin-top: 1.4rem; color: #3a4b45; max-width: 34rem; }
.local__points { list-style: none; padding: 0; margin: 0; display: grid; }
.local__points li { display: grid; gap: .25rem; padding: 1.15rem 0 1.15rem 2.4rem; border-top: 1px solid var(--line); position: relative; }
.local__points li:last-child { border-bottom: 1px solid var(--line); }
.local__points li::before { content: ''; position: absolute; left: 0; top: 1.5rem; width: 16px; height: 10px; border-radius: 55% 45% 50% 50% / 60% 55% 45% 40%; background: var(--lime); rotate: -8deg; }
.local__points b { font-weight: 600; }
.local__points span { color: var(--slate-2); font-size: .97rem; }
.local__features { list-style: none; padding: 0; margin: 4rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.local__features li { display: grid; gap: .35rem; align-content: start; padding: 1.5rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--stone-r); }
.local__features li:nth-child(even) { translate: 0 1.4rem; }
.local__features img { width: 52px; height: auto; mix-blend-mode: multiply; margin-bottom: .6rem; }
.local__features b { font-weight: 600; }
.local__features span { font-size: .93rem; color: var(--slate-2); line-height: 1.5; }

.reviews--short .path { grid-template-columns: repeat(3, 1fr); }
.reviews--short .slab:nth-child(n) { margin: 0; grid-column: auto; max-width: none; }
.reviews--short .slab:nth-child(2) { margin-top: 3rem; }
.reviews--short .slab:nth-child(3) { margin-top: 1rem; }

.nearby { padding: calc(var(--sec) * .7) 0 0; }
.nearby__in { display: grid; grid-template-columns: .7fr 1.3fr; gap: 2rem; align-items: start; }
.nearby__tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.nearby__tags li { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .95rem; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); font-weight: 500; font-size: .95rem; }
.nearby__tags li::before { content: ''; width: 11px; height: 7px; border-radius: 55% 45% 50% 50% / 60% 55% 45% 40%; background: var(--lime); }
.nearby__tags li.nearby__more { background: none; border-style: dashed; color: var(--slate-2); }
.nearby__tags li.nearby__more::before { display: none; }

@media (max-width: 1080px) {
  .story__grid, .local__grid, .nearby__in { grid-template-columns: minmax(0, 1fr); }
  .local__features { grid-template-columns: 1fr 1fr; }
  .reviews--short .path { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .local__features { grid-template-columns: 1fr; }
  .local__features li:nth-child(even) { translate: none; }
  .reviews--short .path { grid-template-columns: 1fr; }
  .reviews--short .slab:nth-child(n) { margin-top: 0; }
  .hero__contact li { width: 100%; }
}

.past-hero .callfab { opacity: 1; pointer-events: auto; transform: none; }

/* =====================================================================
   v3: the pebble language, across the whole page
   ===================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.h2--xl { font-size: clamp(2.6rem, 6.4vw, 6rem); line-height: .98; letter-spacing: -.03em; max-width: 15ch; }

/* sections with the deeper ground get a soft edge of resting stones instead of a ruler line */
.edge { position: relative; }
.edge::before, .edge::after {
  content: ''; position: absolute; left: 0; right: 0; height: clamp(18px, 2.6vw, 36px); z-index: 1; pointer-events: none;
  background: var(--bg-2);
  -webkit-mask: url('../shapes/stones-edge.svg') 0 0 / 100% 100% no-repeat; mask: url('../shapes/stones-edge.svg') 0 0 / 100% 100% no-repeat;
}
.edge::before { bottom: calc(100% - 1px); }
.edge::after { top: calc(100% - 1px); transform: scale(-1, -1); }

/* ---------- why ---------- */
.why .h2--xl { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.why__grid { grid-template-columns: .9fr 1.1fr; align-items: start; }
.why__lede { margin-top: 0; font-size: clamp(1.1rem, 1.4vw, 1.3rem); }
.why__points { grid-template-columns: 1fr; gap: 1.1rem; }
.why__points li { align-items: center; gap: 1.2rem; padding: .9rem 1.2rem .9rem .9rem; border-radius: var(--stone-r); transition: background-color .3s; }
.why__points li:hover { background: var(--bg-2); }
.why__icon { width: 74px; height: 58px; flex: none; display: grid; place-items: center; background: var(--bg-2);
  -webkit-mask: url('../shapes/pebble-3.svg') 0 0 / 100% 100%; mask: url('../shapes/pebble-3.svg') 0 0 / 100% 100%; }
.why__points li:hover .why__icon { background: var(--paper); }
.why__points li:nth-child(2) .why__icon { -webkit-mask-image: url('../shapes/pebble-5.svg'); mask-image: url('../shapes/pebble-5.svg'); }
.why__points li:nth-child(3) .why__icon { -webkit-mask-image: url('../shapes/pebble-1.svg'); mask-image: url('../shapes/pebble-1.svg'); }
.why__points li:nth-child(4) .why__icon { -webkit-mask-image: url('../shapes/pebble-6.svg'); mask-image: url('../shapes/pebble-6.svg'); }
.why__icon img { width: 40px; margin: 0; }
.cert { padding: 0; }
.cert__garden { position: absolute; top: 0; left: 0; width: 80%; aspect-ratio: 16 / 10; z-index: 0;
  -webkit-mask: url('../shapes/pebble-2.svg') 0 0 / 100% 100%; mask: url('../shapes/pebble-2.svg') 0 0 / 100% 100%; }
.cert__garden img { width: 100%; height: 100%; object-fit: cover; }
.cert__paper { z-index: 1; margin: 24% 0 0 16%; }
.cert figcaption { margin-left: 16%; }

/* ---------- grass: the pile, edge to edge ---------- */
.grass { padding-bottom: calc(var(--sec) * .8); }
.grass__head { margin-bottom: 2rem; }
.gauge__panel .gauge__name { position: static; margin: 0 0 .9rem; font-size: 1.25rem; }
.gauge__panel .gauge__label { display: block; font-size: .9rem; margin-bottom: .4rem; color: var(--slate-2); font-weight: 500; }
.gauge__panel .gauge__note { margin-top: 1rem; min-height: 2.8em; font-size: 1.05rem; }
.grass__specs { margin-top: 3.5rem; }
.yarns .gauge__sample { margin-top: .4rem; padding-top: 0; border: 0; }

/* ---------- services: photo in a pebble ---------- */
.svc__media { aspect-ratio: 5 / 3.4; border-radius: 0; -webkit-mask: url('../shapes/pebble-1.svg') 0 0 / 100% 100%; mask: url('../shapes/pebble-1.svg') 0 0 / 100% 100%; }

/* ---------- work: a path of pebbles ---------- */
.work .case { margin-bottom: clamp(4rem, 8vw, 7rem); }
.pebbles { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(44px, 4.6vw, 70px); gap: .8rem 1.6rem; padding-bottom: 8rem; }
.pb {
  --bob: 0px; position: relative; padding: 0; border: 0; background: none; cursor: zoom-in; min-width: 0;
  transform: translateY(var(--bob)); transition: transform .8s var(--ease);
}
.pb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  -webkit-mask: url('../shapes/pebble-1.svg') 0 0 / 100% 100% no-repeat; mask: url('../shapes/pebble-1.svg') 0 0 / 100% 100% no-repeat;
  transition: transform .9s var(--ease);
}
.pb[data-shape="2"] img { -webkit-mask-image: url('../shapes/pebble-2.svg'); mask-image: url('../shapes/pebble-2.svg'); }
.pb[data-shape="3"] img { -webkit-mask-image: url('../shapes/pebble-3.svg'); mask-image: url('../shapes/pebble-3.svg'); }
.pb[data-shape="4"] img { -webkit-mask-image: url('../shapes/pebble-4.svg'); mask-image: url('../shapes/pebble-4.svg'); }
.pb[data-shape="5"] img { -webkit-mask-image: url('../shapes/pebble-5.svg'); mask-image: url('../shapes/pebble-5.svg'); }
.pb[data-shape="6"] img { -webkit-mask-image: url('../shapes/pebble-6.svg'); mask-image: url('../shapes/pebble-6.svg'); }
.pb::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -10px; height: 18px; border-radius: 50%; background: rgba(30, 50, 20, .18); filter: blur(8px); z-index: -1; transition: transform .8s var(--ease), opacity .5s; }
.pb:hover { transform: translateY(calc(var(--bob) - 10px)) rotate(-1.2deg); }
.pb:hover::after { transform: scale(.85); opacity: .7; }
.pb:hover img { transform: scale(1.03); }
.pb__cap {
  position: absolute; left: 50%; bottom: -1.4rem; translate: -50% 6px; white-space: nowrap; opacity: 0;
  padding: .4rem .7rem; border-radius: 10px; background: var(--slate); color: var(--bg); font: 500 .82rem/1 var(--f-ui);
  transition: opacity .3s, translate .4s var(--ease); pointer-events: none; z-index: 2;
}
.pb:hover .pb__cap, .pb:focus-visible .pb__cap { opacity: 1; translate: -50% 0; }
.pebbles > .pb:nth-child(11n+1) { grid-column: 1 / 6; grid-row: span 3; }
.pebbles > .pb:nth-child(11n+2) { grid-column: 6 / 10; grid-row: span 3; margin-top: 3.5rem; }
.pebbles > .pb:nth-child(11n+3) { grid-column: 10 / 13; grid-row: span 3; margin-top: 1rem; }
.pebbles > .pb:nth-child(11n+4) { grid-column: 2 / 5; grid-row: span 3; margin-top: 2rem; }
.pebbles > .pb:nth-child(11n+5) { grid-column: 5 / 8; grid-row: span 3; margin-top: 5rem; }
.pebbles > .pb:nth-child(11n+6) { grid-column: 8 / 13; grid-row: span 3; margin-top: 2.5rem; }
.pebbles > .pb:nth-child(11n+7) { grid-column: 1 / 5; grid-row: span 3; margin-top: 3.5rem; }
.pebbles > .pb:nth-child(11n+8) { grid-column: 5 / 10; grid-row: span 3; margin-top: 5.5rem; }
.pebbles > .pb:nth-child(11n+9) { grid-column: 10 / 13; grid-row: span 3; margin-top: 3rem; }
.pebbles > .pb:nth-child(11n+10) { grid-column: 3 / 7; grid-row: span 3; margin-top: 6rem; }
.pebbles > .pb:nth-child(11n+11) { grid-column: 7 / 11; grid-row: span 3; margin-top: 7.5rem; }

.lightbox { width: min(1200px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: 22px; background: var(--ink); overflow: hidden; }
.lightbox::backdrop { background: rgba(28, 40, 34, .78); backdrop-filter: blur(6px); }
.lightbox[open] { animation: lbIn .45s var(--ease); }
@keyframes lbIn { from { opacity: 0; transform: scale(.96) translateY(10px); } }
.lightbox img { display: block; width: 100%; max-height: 82vh; object-fit: contain; background: #1d2723; }
.lightbox__cap { margin: 0; padding: .9rem 1.2rem; color: var(--bg); font: 500 .95rem/1.3 var(--f-ui); }
.lightbox__btn { position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(251, 250, 246, .92); display: grid; place-items: center; }
.lightbox__btn svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__prev { left: 1rem; }
.lightbox__next { right: 1rem; }
.lightbox__close { position: absolute; top: 1rem; right: 1rem; border: 0; border-radius: 10px; padding: .55rem .8rem; cursor: pointer; background: rgba(251, 250, 246, .92); font: 600 .85rem/1 var(--f-ui); color: var(--ink); }

/* ---------- process ---------- */
.process__grid { grid-template-columns: 1fr 1fr; }
.process__photo { aspect-ratio: 4 / 3.4; margin: 0; align-self: center; }
.process__photo figcaption { opacity: 1; }

@media (max-width: 1080px) {
  .why__grid, .process__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .pebbles { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; gap: 1.6rem 1rem; }
  .pebbles > .pb:nth-child(n) { grid-column: auto; grid-row: auto; margin: 0; aspect-ratio: 4 / 3; }
  .pebbles > .pb:nth-child(11n+1), .pebbles > .pb:nth-child(11n+8) { grid-column: 1 / -1; }
  .pb__cap { display: none; }
  .cert__paper { margin: 30% 0 0 6%; }
  .cert figcaption { margin-left: 0; }
}

.pebbles.is-armed .pb { opacity: 0; translate: 0 -80px; rotate: var(--r0, -6deg); transition: translate 1.1s var(--ease), rotate 1.1s var(--ease), opacity .7s ease, transform .8s var(--ease); }
.pebbles.is-armed .pb.is-in { opacity: 1; translate: 0 0; rotate: 0deg; }



/* ---------- our grass, under a magnifying glass ---------- */
.loupe { position: relative; margin: 0; aspect-ratio: 2.19 / 1; border-radius: var(--r-lg); overflow: hidden; background: #3c6326; cursor: zoom-in; touch-action: pan-y; }
.loupe.is-looking { cursor: none; }
.loupe__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .5s; }
.loupe.is-looking .loupe__img { filter: brightness(.82) saturate(.9); }
.loupe__lens {
  position: absolute; left: 0; top: 0; width: clamp(180px, 22vw, 300px); aspect-ratio: 1; border-radius: 50%; z-index: 3; pointer-events: none;
  background-repeat: no-repeat; opacity: 0; scale: .6; transition: opacity .3s, scale .45s var(--spring);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px rgba(48, 73, 69, .25), 0 26px 50px -18px rgba(10, 25, 5, .7);
}
.loupe.is-looking .loupe__lens { opacity: 1; scale: 1; }
.loupe__lens span { position: absolute; left: 50%; bottom: -14px; translate: -50% 0; padding: .3rem .55rem; border-radius: 8px; background: var(--slate); color: var(--bg); font: 600 .74rem/1 var(--f-ui); }
.loupe__cap { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; max-width: 30rem; margin: 0; padding: .7rem .95rem; border-radius: 12px; background: rgba(251, 250, 246, .92); font: 500 .86rem/1.4 var(--f-ui); color: var(--ink); transition: opacity .3s; }
.loupe__cap span { color: var(--lime-ink); }
.loupe.is-looking .loupe__cap { opacity: 0; }
.hs { position: absolute; z-index: 4; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: none; cursor: pointer; }
.hs__dot { position: absolute; inset: 11px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 0 rgba(251, 250, 246, .7), 0 4px 10px rgba(0, 0, 0, .35); animation: hsPulse 2.4s ease-out infinite; }
.hs__dot::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--lime-ink); }
@keyframes hsPulse { 0% { box-shadow: 0 0 0 0 rgba(251, 250, 246, .7), 0 4px 10px rgba(0,0,0,.35); } 80%, 100% { box-shadow: 0 0 0 16px rgba(251, 250, 246, 0), 0 4px 10px rgba(0,0,0,.35); } }
.hs__card {
  position: absolute; left: 34px; top: 50%; translate: 0 -50%; width: 15.5rem; padding: .85rem 1rem; border-radius: 14px; text-align: left;
  background: var(--paper); color: #3a4b45; font: 400 .86rem/1.45 var(--f-ui); box-shadow: 0 18px 34px -16px rgba(10, 25, 5, .6);
  opacity: 0; transform: translateX(-6px); pointer-events: none; transition: opacity .25s, transform .35s var(--ease);
}
.hs__card b { display: block; color: var(--ink); font-weight: 600; font-size: .92rem; margin-bottom: .2rem; }
.hs--left .hs__card { left: auto; right: 34px; transform: translateX(6px); }
.hs:hover .hs__card, .hs:focus-visible .hs__card, .hs.is-open .hs__card { opacity: 1; transform: none; }
.hs:focus-visible { outline: none; }
.hs:focus-visible .hs__dot { outline: 3px solid var(--lime); outline-offset: 3px; }
.grass__specs { margin-top: 3rem; }
@media (max-width: 760px) {
  .loupe { aspect-ratio: 4 / 3.2; }
  .loupe__cap { font-size: .78rem; left: .6rem; right: .6rem; bottom: .6rem; }
  .loupe__cap span { display: none; }
  .hs__card { width: 12rem; }
}
.loupe.is-looking .hs { opacity: .35; }
.hs { transition: opacity .3s; }

/* ---------------- quote form: spam trap and send errors ---------------- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__err { grid-column: 1 / -1; margin: 0; padding: .75rem 1rem; border-radius: var(--r-sm); background: #f6e6df; color: var(--err); font-size: .92rem; }

/* ---------------- builder blocks: sections Adam adds himself in the admin ---------------- */
.zb { padding: var(--sec) 0; }
.zb--paper { background: var(--paper); }
.zb--lawn { background: var(--lime-soft); }
.zb-text { max-width: 760px; }
.zb-text .h2, .zb-split__txt .h2 { margin-bottom: 1.1rem; }
.zb-prose > * { margin: 0 0 1rem; }
.zb-prose p, .zb-prose li { font-size: 1.06rem; line-height: 1.75; color: #3a4b45; }
.zb-prose h3 { font: 500 1.45rem/1.2 var(--f-display); margin: 2rem 0 .6rem; color: var(--slate); }
.zb-prose a { color: var(--lime-ink); text-underline-offset: .2em; }
.zb-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.zb-split--flip .zb-split__media { order: -1; }
.zb-split__media { margin: 0; aspect-ratio: 5 / 4; -webkit-mask: url('../shapes/pebble-2.svg') 0 0 / 100% 100% no-repeat; mask: url('../shapes/pebble-2.svg') 0 0 / 100% 100% no-repeat; background: var(--line); }
.zb-split--flip .zb-split__media { -webkit-mask-image: url('../shapes/pebble-4.svg'); mask-image: url('../shapes/pebble-4.svg'); }
.zb-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zb-split__txt > p { color: #3a4b45; line-height: 1.7; }
.zb-ticks { list-style: none; padding: 0; margin: 1.4rem 0 1.8rem; display: grid; gap: .75rem; }
.zb-ticks li { position: relative; padding-left: 2rem; }
.zb-ticks li::before { content: ''; position: absolute; left: 0; top: .42em; width: 1.15rem; height: .78rem; background: var(--lime); border-radius: var(--stone-r); }
.zb-cta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(1.4rem, 4vw, 3rem); align-items: center; padding: clamp(2rem, 5vw, 4rem); border-radius: var(--r-lg); background: var(--slate); color: var(--bg); }
.zb-cta__mark { width: 60px; height: 70px; color: var(--lime); }
.zb-cta .h2 { color: #fff; }
.zb-cta p { margin: .6rem 0 0; color: rgba(245, 244, 238, .8); max-width: 46ch; }
.zb-cta__acts { display: grid; gap: .9rem; justify-items: start; }
.zb-cta .tlink { color: #fff; }
.zb-quote { max-width: 900px; margin: 0 auto; text-align: center; }
.zb-quote__mark { display: block; width: 44px; height: 52px; margin: 0 auto 1.4rem; color: var(--lime); }
.zb-quote p { margin: 0; font: 400 clamp(1.6rem, 3.4vw, 2.6rem)/1.25 var(--f-display); color: var(--slate); }
.zb-quote cite { display: block; margin-top: 1.4rem; font: 500 .95rem var(--f-ui); font-style: normal; color: var(--slate-2); }
.zb-stones { list-style: none; padding: 0; margin: 2.4rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.zb-stones li { padding: 1.8rem 1.6rem; border-radius: var(--stone-r); background: #fff; box-shadow: var(--shadow); }
.zb-stones b { display: block; margin-bottom: .5rem; font: 500 1.35rem/1.2 var(--f-display); color: var(--slate); }
.zb-stones span { color: #4c5c57; line-height: 1.6; }
.zb-photo { margin: 0; }
.zb-photo img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--r-lg); }
.zb-photo figcaption { margin-top: .8rem; font-size: .92rem; color: var(--slate-2); }
@media (max-width: 860px) {
  .zb-split, .zb-cta { grid-template-columns: 1fr; }
  .zb-split--flip .zb-split__media { order: 0; }
  .zb-stones { grid-template-columns: 1fr; }
  .zb-photo img { aspect-ratio: 4 / 3; }
}

/* ---------------- blog: garden notes ---------------- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6rem 1.8rem; }
.post-card a { display: grid; gap: .65rem; color: inherit; text-decoration: none; }
.post-card__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--stone-r); background: var(--line); }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.post-card a:hover .post-card__img img { transform: scale(1.04); }
.post-card time { font-size: .86rem; color: var(--slate-2); }
.post-card h3 { margin: 0; font: 450 1.55rem/1.15 var(--f-display); color: var(--slate); text-wrap: balance; }
.post-card a:hover h3 { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.post-card p { margin: 0; color: #4c5c57; line-height: 1.6; }
.posts__empty { grid-column: 1 / -1; color: var(--slate-2); }
.post__meta { margin-top: .9rem; font-size: .92rem; color: var(--slate-2); }
.post__cover { margin: 0 0 2.6rem; }
.post__cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); }
.post .zb-prose h2 { margin: 2.4rem 0 .8rem; font: 450 clamp(1.6rem, 2.6vw, 2.1rem)/1.15 var(--f-display); color: var(--slate); }
.post .zb-prose ul { padding-left: 1.2rem; }
@media (max-width: 860px) { .posts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .posts { grid-template-columns: 1fr; } }

/* sections hidden in the admin */
[data-kmi-hide] { display: none !important; }