/* Manente Lawn & Landscape: the stone-yard catalog */

:root {
  --stone: #D9D9D5;
  --stone-deep: #C8C8C3;
  --sand: #BDB5A5;
  --ink: #1F201E;
  --ink-2: #4D4C48;
  --char: #262725;
  --char-2: #323330;
  --on-char: #ECEBE6;
  --on-char-2: #ABAAA3;
  --tag: #F7F7F3;

  /* collection swatches: deep for page fields, lit for marks on charcoal */
  --turf: #2C6E24;
  --turf-btn: #2F7A25;
  --turf-lit: #63B252;
  --mulch: #4A3426;
  --mulch-lit: #B9845A;
  --paver: #262725;
  --paver-lit: #A9A7A0;
  --salt: #EEF0EE;
  --brick: #A23A24;
  --gold: #F5B400;
  --gold-deep: #B57F00;

  /* the logo's paver tones */
  --pv-light: #C7C6C1;
  --pv-1: #A9A8A3;
  --pv-2: #6B6C69;
  --pv-3: #3A3B39;

  --focus: #2F7A25;
  --display: "Big Shoulders Display", "Archivo", sans-serif;
  --sans: "Archivo", system-ui, sans-serif;
  --pad: clamp(16px, 4vw, 56px);
  --rail: 0px;
  --joint: 7px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

@media (min-width: 1024px) {
  :root { --rail: 60px; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--pv-2) var(--stone-deep);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--stone);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--sans);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
a { color: inherit; }
::selection { background: var(--turf-btn); color: #fff; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--ink); color: #fff; padding: 10px 16px;
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

/* spec-label voice: wide caps, echoing the logo's engraved line */
.mast-nav a, .mast-menu summary, .mast-menu a, .tab, .btn,
.pick, .field span, .months, .cr-who, .stone figcaption, .gcap, .lb figcaption, .chart thead th,
.year-key, .spec li, blockquote footer,
.spec-table dt, .towns thead th, .towns td, .back-bar a, .link {
  font-stretch: 125%;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* ---------- buttons & links ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 22px;
  border: 0; border-radius: 0;
  font-family: var(--sans); font-size: .8125rem; font-weight: 750;
  text-decoration: none; cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
/* shine that sweeps across once on hover */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .28) 50%, transparent 65%);
  transform: translateX(-120%);
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { transform: translateX(120%); transition: transform .7s var(--ease); }
.btn:active { transform: translateY(1px) scale(.985); box-shadow: none; }
.btn-light:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink), 0 8px 16px -8px rgb(0 0 0 / .35); }
.btn-ink::after { background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .18) 50%, transparent 65%); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #000; box-shadow: 0 6px 14px -6px rgb(0 0 0 / .45); }
.btn-light { background: var(--tag); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-on-dark { background: var(--tag); color: var(--ink); }
.btn-on-dark:hover { background: #fff; box-shadow: 0 8px 18px -8px rgb(0 0 0 / .6); }

.link {
  font-size: .75rem;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
.link:hover { color: var(--turf-btn); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.stars { display: inline-flex; gap: 2px; margin-right: .45em; vertical-align: -.08em; }
.stars svg { width: .82em; height: .82em; fill: var(--gold); }
.stars-deep svg { fill: var(--gold-deep); }
.stars-lg svg { width: 1.1em; height: 1.1em; }

.chip {
  display: inline-block; flex: none;
  width: .9em; height: .9em;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18);
}
.chip-lawn { background: var(--turf-btn); }
.chip-landscape { background: var(--mulch); }
.chip-hardscape { background: var(--paver); }
.chip-snow { background: var(--salt); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .35); }

/* ---------- masthead ---------- */

.mast {
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px);
  margin: 0 calc(var(--pad) + var(--rail)) 0 var(--pad);
  padding: 14px 0;
  border-bottom: 2px solid var(--ink);
  position: relative; z-index: 30;
}
.mast-logo { flex: none; margin-right: auto; }
.mast-logo img { width: auto; height: clamp(32px, 3.6vw, 46px); }
.mast-nav { display: flex; gap: clamp(14px, 1.8vw, 28px); }
.mast-nav a, .mast-menu a { font-size: .75rem; text-decoration: none; padding: 6px 0; }
.mast-nav a:hover, .mast-menu a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.mast-call {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 16px;
  background: var(--ink); color: #fff; text-decoration: none;
  font: 800 1.375rem/1 var(--display); letter-spacing: .02em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: background-color .2s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.mast-call:hover { background: #000; transform: translateY(-2px); box-shadow: 0 10px 18px -10px rgb(0 0 0 / .6); }
.mast-call:active { transform: translateY(0) scale(.98); box-shadow: none; }
.mast-call:hover svg { animation: ring .8s var(--ease); }
@keyframes ring {
  10% { transform: rotate(-18deg); } 20% { transform: rotate(16deg); } 30% { transform: rotate(-12deg); }
  40% { transform: rotate(9deg); } 50% { transform: rotate(-5deg); } 60% { transform: rotate(0); }
}
.mast-call svg { width: 18px; height: 18px; fill: currentColor; }
.mast-menu { display: none; }

@media (max-width: 1023px) {
  .mast-nav { display: none; }
  .mast-menu { display: block; }
  .mast-menu summary {
    list-style: none; cursor: pointer;
    min-height: 46px; padding: 0 14px; display: flex; align-items: center;
    box-shadow: inset 0 0 0 1.5px var(--ink); font-size: .75rem;
  }
  .mast-menu summary::-webkit-details-marker { display: none; }
  .mast-menu[open] summary { background: var(--ink); color: #fff; }
  .mast-menu nav {
    position: absolute; left: 0; right: 0; top: 100%;
    display: grid; background: var(--stone);
    border-bottom: 2px solid var(--ink);
    padding: 8px 0 16px;
  }
  .mast-menu nav a { padding: 12px 0; font-size: .875rem; border-bottom: 1px solid rgb(31 32 30 / .15); }
}
@media (max-width: 560px) {
  .mast { gap: 10px; }
  .mast-call span { display: none; }
  .mast-call { padding: 0 14px; }
  .mast-call svg { width: 20px; height: 20px; }
}

.logo-light { display: none; }

/* ---------- services mega menu ---------- */

.mm { position: static; }
.mast { position: relative; }
.mm-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; cursor: pointer; color: var(--ink);
  font: 650 .75rem var(--sans); font-stretch: 125%; letter-spacing: .07em; text-transform: uppercase;
}
.mm-btn svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .25s var(--ease); }
.mm-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.mm-btn:hover, .mm-btn[aria-expanded="true"] { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.mm-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 60;
  display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(0, 1fr); grid-template-rows: 1fr auto;
  gap: var(--joint); padding: var(--joint); background: var(--sand);
  box-shadow: 0 24px 40px -18px rgb(0 0 0 / .45);
  opacity: 0; transform: translateY(-6px); transition: opacity .2s var(--ease), transform .25s var(--ease);
}
.mm-panel[hidden] { display: none; }
.mm-panel.is-open { opacity: 1; transform: none; }
.mm-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--joint); }
.mm-col { padding: 20px 20px 22px; }
.mm-lawn { background: var(--turf); color: #fff; --focus: #fff; }
.mm-landscape { background: var(--mulch); color: #F1E9E0; --focus: #fff; }
.mm-hardscape { background: var(--paver); color: var(--on-char); --focus: #fff; }
.mm-snow { background: var(--salt); color: var(--ink); }
.mm-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent); font: 900 1.5rem/1 var(--display); text-transform: uppercase; }
.mm-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mast-nav .mm-col a { display: block; padding: 6px 0; color: inherit; text-decoration: none; font: 500 1rem/1.3 var(--sans); font-stretch: 100%; letter-spacing: 0; text-transform: none; transition: padding .2s var(--ease); }
.mast-nav .mm-col a:hover, .mast-nav .mm-col a:focus-visible { padding-left: 8px; text-decoration: underline; text-underline-offset: 3px; }
.mm-feature { grid-row: span 2; position: relative; display: block; min-height: 260px; overflow: hidden; background: var(--pv-3); color: #fff; text-decoration: none; --focus: #fff; }
.mm-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.mm-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgb(0 0 0 / .72)); }
.mm-feature:hover img { transform: scale(1.04); }
.mm-f-body { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 1; display: grid; gap: 10px; }
.mm-f-title { font: 900 1.875rem/.9 var(--display); text-transform: uppercase; }
.mm-f-go { display: inline-flex; align-items: center; gap: 8px; font-size: .6875rem; font-stretch: 125%; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.mm-f-go::after { content: ""; width: 14px; height: 2px; background: currentColor; transition: width .3s var(--ease); }
.mm-feature:hover .mm-f-go::after { width: 28px; }
.mm-foot { display: flex; justify-content: space-between; gap: 16px; padding: 12px 18px; background: var(--ink); }
.mm-foot a { color: #fff; text-decoration: none; font-size: .6875rem; font-stretch: 125%; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; --focus: #fff; }
.mm-foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* phone menu */
.mast-menu .mm-m summary { min-height: 0; display: block; background: none; color: inherit; box-shadow: none; list-style: none; cursor: pointer; padding: 12px 0; font-size: .875rem; border-bottom: 1px solid rgb(31 32 30 / .15); font-stretch: 125%; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.mm-m summary::-webkit-details-marker { display: none; }
.mm-m summary::after { content: " +"; }
.mast-menu .mm-m[open] summary { background: none; color: inherit; }
.mm-m[open] summary::after { content: " −"; }
.mm-m-body { display: grid; padding: 4px 0 10px 12px; }
.mm-m-head { display: flex; align-items: center; gap: 8px; margin-top: 12px; font: 900 1.125rem/1 var(--display); text-transform: uppercase; }
.mast-menu nav .mm-m-link { padding: 9px 0; font-size: .9375rem; font-stretch: 100%; font-weight: 500; letter-spacing: 0; text-transform: none; border-bottom: 0; }
.mast-menu nav .mm-m-all { font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .mm-panel { transition: none; } }

/* ---------- thumb tabs (collection navigation) ---------- */

.tabs { display: none; }
@media (min-width: 1024px) {
  .tabs {
    position: fixed; right: 0; top: 50%; z-index: 25;
    transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  }
  .tab {
    --focus: #fff;
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: clamp(92px, 15vh, 134px);
    writing-mode: vertical-rl;
    font-size: .6875rem; letter-spacing: .16em; text-decoration: none;
    box-shadow: -4px 0 10px -4px rgb(0 0 0 / .35);
    transition: width .35s var(--ease);
  }
  .tab:hover { width: 52px; }
  .tab[aria-current="true"] { width: 62px; }
  .tab-lawn { background: var(--turf-btn); color: #fff; }
  .tab-landscape { background: var(--mulch); color: #F1E9E0; }
  .tab-hardscape { background: var(--paver); color: var(--on-char); }
  .tab-snow { --focus: var(--turf-btn); background: var(--salt); color: var(--ink); }
}

/* ---------- cover ---------- */

.cover {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "index field"
    "rev   field"
    "tag   field";
  column-gap: clamp(28px, 3.4vw, 56px);
  padding: clamp(18px, 3.2vh, 36px) calc(var(--pad) + var(--rail)) 0 var(--pad);
}

.cover-copy { display: contents; }

.index {
  grid-area: index;
  font: 900 clamp(3.25rem, min(7.2vw, 10.6vh), 6rem)/.86 var(--display);
  letter-spacing: -.005em;
  text-transform: uppercase;
}
.index a {
  display: flex; align-items: center; gap: .16em;
  width: fit-content;
  text-decoration: none;
}
.index .chip {
  width: .36em; height: .36em;
  transition: width .4s var(--ease);
}
.index a:hover .chip { width: 1.1em; }

/* ---------- the pallet tag (quote form) ---------- */

.tag {
  grid-area: tag;
  align-self: end;
  position: relative; z-index: 3;
  filter: drop-shadow(0 14px 22px rgb(31 32 30 / .22)) drop-shadow(0 2px 3px rgb(31 32 30 / .25));
}
.tag-card {
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-areas: "stub head" "stub body";
  background: var(--tag);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}
.tag-stub {
  grid-area: stub;
  position: relative;
  border-right: 1.5px dashed rgb(31 32 30 / .35);
}
.tag-stub::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--stone);
  box-shadow: 0 0 0 3px #9C9A93;
}
.tag-head {
  grid-area: head;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 20px 9px;
  background: var(--ink); color: var(--on-char);
}
.tag-head h2 { font: 900 1.75rem/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.tag-head { --focus: #9AD58B; }
.tag-head p { font-size: .8125rem; color: var(--on-char-2); }
.tag-more { color: var(--on-char); font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
.tag-more::after { content: ""; display: inline-block; vertical-align: middle; width: 12px; height: 1.5px; margin-left: 6px; background: currentColor; transition: width .3s var(--ease); }
.tag-more:hover { color: var(--turf-lit); }
.tag-more:hover::after { width: 22px; }
.tag-body { grid-area: body; padding: 14px 20px 18px; }

.tag-picks { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pick {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 0 12px 0 10px;
  font-size: .6875rem; letter-spacing: .05em;
  box-shadow: inset 0 0 0 1.5px var(--ink);
  cursor: pointer; user-select: none;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.pick:hover { background: #fff; }
.pick input {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; margin: 0; flex: none;
  border: 1.5px solid currentColor; border-radius: 0;
  background: transparent; cursor: pointer;
}
.pick input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pick:has(input:checked) { background: var(--turf-btn); color: #fff; box-shadow: none; }
.pick input:checked {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%232F7A25' stroke-width='2.4'/%3E%3C/svg%3E") center/12px no-repeat;
  border-color: #fff;
}
.pick.pressed { animation: press .32s var(--ease); }
@media (min-width: 1024px) and (max-width: 1439px) { .pick { font-stretch: 106%; letter-spacing: .03em; padding: 0 10px 0 8px; } }
@keyframes press { 40% { transform: scale(.94); } }

.months {
  list-style: none; padding: 0; margin: 12px 0 6px;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px;
  font-size: .6875rem; letter-spacing: 0;
}
.months li {
  --i: 0;
  height: 28px; display: grid; place-items: end center; padding-bottom: 4px;
  background: var(--stone-deep); color: var(--ink-2);
  transition: background-color .25s var(--ease) calc(var(--i) * 22ms), color .25s var(--ease) calc(var(--i) * 22ms);
}
.months li:nth-child(2) { --i: 1; } .months li:nth-child(3) { --i: 2; } .months li:nth-child(4) { --i: 3; }
.months li:nth-child(5) { --i: 4; } .months li:nth-child(6) { --i: 5; } .months li:nth-child(7) { --i: 6; }
.months li:nth-child(8) { --i: 7; } .months li:nth-child(9) { --i: 8; } .months li:nth-child(10) { --i: 9; }
.months li:nth-child(11) { --i: 10; } .months li:nth-child(12) { --i: 11; }
.months li.on { background: var(--turf-btn); color: #fff; }
.months li.maybe {
  background: repeating-linear-gradient(135deg, var(--turf-btn) 0 3px, transparent 3px 7px), var(--stone-deep);
  color: var(--ink);
}
.tag-count { font-size: .8125rem; color: var(--ink-2); min-height: 1.4em; }
.tag-count strong { color: var(--ink); }

.tag-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 12px;
}
.field { position: relative; display: block; }
.field span {
  position: absolute; left: 11px; top: 7px;
  font-size: .6875rem; color: var(--ink-2); pointer-events: none;
}
.field input {
  width: 100%; height: 50px; padding: 18px 11px 4px;
  border: 0; border-radius: 0; background: #fff;
  box-shadow: inset 0 0 0 1.5px rgb(31 32 30 / .55);
  font: 500 1rem/1 var(--sans); color: var(--ink);
  transition: box-shadow .2s var(--ease);
}
.field input::placeholder { color: #75736D; }
.field input:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.field input:focus { outline: none; box-shadow: inset 0 0 0 2.5px var(--turf-btn); }
.field input[aria-invalid="true"] { box-shadow: inset 0 0 0 2.5px var(--brick); }
.tag-fields .btn { height: 50px; }
@media (min-width: 1440px) {
  .tag-fields { grid-template-columns: 1fr 1.15fr .8fr auto; }
  .tag-fields .btn { padding: 0 16px; }
}

.tag-error { margin-top: 10px; font-size: .875rem; font-weight: 600; color: var(--brick); }

.tag.is-done .tag-fields, .tag.is-done .tag-error { display: none; }
.tag-done { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; margin-top: 14px; font-size: .9375rem; }
.tag-done[hidden] { display: none; }
.stamp {
  font: 900 1.75rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em;
  color: var(--turf-btn); padding: 6px 10px 4px;
  box-shadow: inset 0 0 0 3px var(--turf-btn);
  transform: rotate(-7deg);
  animation: stamp .45s var(--ease) both;
}
@keyframes stamp { from { transform: rotate(-7deg) scale(1.6); opacity: 0; } }

/* ---------- stone fields ---------- */

.stones {
  display: grid; gap: var(--joint); padding: var(--joint);
  background: var(--sand);
}
.stone {
  position: relative; overflow: hidden; margin: 0;
  background: var(--pv-3);
}
.stone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stone figcaption, .gcap {
  position: absolute; left: 8px; bottom: 8px; z-index: 1;
  padding: 5px 8px 4px;
  background: var(--char); color: var(--on-char);
  font-size: .6875rem; letter-spacing: .08em; line-height: 1.3;
}

.field-ashlar {
  grid-area: field;
  min-height: clamp(480px, calc(100svh - 128px), 920px);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  grid-template-areas:
    "a a a a b b"
    "a a a a b b"
    "a a a a b b"
    "d d e e c c"
    "d d f f c c"
    "g g f f c c";
}
.s-a { grid-area: a; } .s-b { grid-area: b; } .s-c { grid-area: c; } .s-d { grid-area: d; }
.s-e { grid-area: e; } .s-f { grid-area: f; } .s-g { grid-area: g; }
.s-a img { object-position: 50% 70%; }

/* reviews: a label line under the index */
.cover-reviews {
  grid-area: rev;
  display: flex; align-items: center; gap: 12px;
  width: fit-content; max-width: 100%;
  margin: clamp(14px, 2.4vh, 24px) 0 clamp(20px, 3.4vh, 34px);
  text-decoration: none;
}
.cr-count {
  flex: none;
  padding: 6px 10px 5px;
  background: var(--ink); color: #fff;
  font: 800 1.125rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em;
  white-space: nowrap;
  transition: background-color .2s var(--ease);
}
.cr-quote { min-width: 0; font-size: .9375rem; line-height: 1.35; }
.cr-who { display: block; margin-top: 3px; font-size: .6875rem; color: var(--ink-2); }
.cr-who::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 12px; height: 2px; margin-left: 8px; background: currentColor;
  transition: width .3s var(--ease);
}
.cover-reviews:hover .cr-count { background: var(--turf-btn); }
.cover-reviews:hover .cr-who::after { width: 24px; }

/* one press: stones set once, then stay still */
@media (prefers-reduced-motion: no-preference) {
  .field-ashlar .stone { animation: set .9s var(--ease) both; }
  .field-ashlar .s-a { animation-delay: .10s; } .field-ashlar .s-b { animation-delay: .18s; }
  .field-ashlar .s-c { animation-delay: .26s; } .field-ashlar .s-d { animation-delay: .32s; }
  .field-ashlar .s-e { animation-delay: .38s; } .field-ashlar .s-f { animation-delay: .44s; }
  .field-ashlar .s-g { animation-delay: .50s; }
  .tag { animation: hang .8s var(--ease) .55s both; }
}
@keyframes set {
  from { transform: translateY(-16px) scale(1.04); opacity: 0; filter: brightness(1.2); }
  55% { opacity: 1; }
}
@keyframes hang { from { transform: translateY(10px); opacity: 0; } }

/* ---------- year chart ---------- */

.year {
  --focus: #9AD58B;
  margin-top: clamp(72px, 11vh, 128px);
  padding: clamp(64px, 10vh, 112px) calc(var(--pad) + var(--rail)) clamp(48px, 7vh, 80px) var(--pad);
  background: var(--char); color: var(--on-char);
}
.year-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 56px; align-items: end;
  margin-bottom: clamp(36px, 5vh, 56px);
}
.year-head h2 { font: 900 clamp(3rem, 7vw, 6rem)/.86 var(--display); text-transform: uppercase; }
.year-head p { max-width: 46ch; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); color: var(--on-char-2); text-wrap: pretty; }

.year-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.chart { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 3px 4px; }
.chart thead th { font-size: .6875rem; color: var(--on-char-2); font-weight: 600; padding: 0 0 6px; text-align: center; }
.chart thead th.now { color: #fff; }
.chart thead th.now::after { content: ""; display: block; width: 6px; height: 6px; margin: 5px auto 0; background: var(--turf-lit); }
.chart tbody th {
  text-align: left; white-space: nowrap;
  padding: 0 18px 0 0;
  font-size: .9375rem; font-weight: 500; color: var(--on-char);
  position: sticky; left: 0; background: var(--char); z-index: 1;
}
.chart tbody th .chip { width: 10px; height: 10px; margin-right: 10px; vertical-align: 1px; }
.chart .chip-hardscape { background: var(--paver-lit); }
.chart .chip-lawn { background: var(--turf-lit); }
.chart .chip-landscape { background: var(--mulch-lit); }
.chart td { height: 26px; min-width: 22px; background: var(--char-2); }
.chart td.now { background: #3E3F3B; }
.chart tr.group-start > * { border-top: 14px solid var(--char); }
.chart td { background-clip: padding-box; }
.row-lawn { --c: var(--turf-lit); }
.row-landscape { --c: var(--mulch-lit); }
.row-hardscape { --c: var(--paver-lit); }
.row-snow { --c: var(--salt); }
.chart td.on { background-color: var(--c); }
.chart td.maybe { background: repeating-linear-gradient(135deg, var(--c) 0 3px, transparent 3px 7px) padding-box, var(--char-2) padding-box; }

.year-key {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px;
  margin-top: 22px; font-size: .6875rem; color: var(--on-char-2);
}
.year-key p { display: flex; align-items: center; gap: 8px; }
.key { width: 22px; height: 12px; }
.key-on { background: var(--on-char); }
.key-maybe { background: repeating-linear-gradient(135deg, var(--on-char) 0 3px, transparent 3px 7px), var(--char-2); }
.year-note { margin-left: auto; }

/* ---------- collection spreads ---------- */

.spread {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: clamp(600px, 92vh, 900px);
}
.page-swatch {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(48px, 8vh, 96px) clamp(24px, 4vw, 72px) clamp(28px, 4vh, 40px) clamp(24px, 4vw, 72px);
}
.page-swatch h2 {
  font: 900 clamp(3.5rem, 8vw, 6rem)/.86 var(--display); text-transform: uppercase;
  margin-bottom: clamp(18px, 3vh, 28px);
}
.lede { max-width: 38ch; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); text-wrap: pretty; }
.spec {
  list-style: none; padding: 0; width: min(100%, 440px);
  margin: clamp(24px, 4vh, 36px) 0 clamp(24px, 4vh, 36px);
  border-top: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}
.spec li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  font-size: .75rem;
  border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}
.spec li::before { content: ""; width: 8px; height: 8px; background: currentColor; flex: none; }
.spread-lawn .page-swatch { --focus: #fff; background: var(--turf); color: #fff; }
.spread-landscape .page-swatch { --focus: #fff; background: var(--mulch); color: #F1E9E0; }
.spread-hardscape .page-swatch { --focus: #fff; background: var(--paver); color: var(--on-char); }
.spread-snow .page-swatch { background: var(--salt); color: var(--ink); }

.contract { max-width: 38ch; margin: -8px 0 28px; font-size: 1.0625rem; }

.plan { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 18px; align-items: center; margin: -4px 0 32px; max-width: 520px; }
.plan img { filter: drop-shadow(0 12px 14px rgb(0 0 0 / .45)); }
.plan figcaption { font-size: .9375rem; color: var(--on-char-2); }
.plan strong { display: block; color: var(--on-char); font-weight: 700; }

.page-photos {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--sand);
}
.page-photos .stones { flex: 1; min-height: 520px; }
.spread:not(.flip) .page-photos { padding-right: var(--rail); }
.spread.flip .page-photos { order: -1; }
.spread.flip .page-swatch { padding-right: calc(clamp(24px, 4vw, 72px) + var(--rail)); }
/* the catalog's fold */
.page-photos::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 28px; z-index: 2; pointer-events: none;
  left: 0; background: linear-gradient(90deg, rgb(0 0 0 / .16), transparent);
}
.spread.flip .page-photos::before { left: auto; right: 0; background: linear-gradient(-90deg, rgb(0 0 0 / .16), transparent); }

.bond-running { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "a a a a a b b b" "c c c d d d d d"; }
.r-a { grid-area: a; } .r-b { grid-area: b; } .r-c { grid-area: c; } .r-d { grid-area: d; }
.r-d img { object-position: 50% 70%; } .r-c img { object-position: 50% 85%; }
.bond-basket { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a b b" "a c d"; }
.b-a { grid-area: a; } .b-b { grid-area: b; } .b-c { grid-area: c; } .b-d { grid-area: d; }
.bond-ashlar { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a a a b b" "c c d d d"; }
.h-a { grid-area: a; } .h-b { grid-area: b; } .h-c { grid-area: c; } .h-d { grid-area: d; }
.bond-stack { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a b" "c c"; }
.k-a { grid-area: a; } .k-b { grid-area: b; } .k-c { grid-area: c; }

.stone-quote {
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  padding: clamp(16px, 2vw, 28px);
  background: var(--pv-3); color: var(--on-char);
}
.stone-quote p { font: 800 clamp(1.5rem, 2.6vw, 2.75rem)/.94 var(--display); text-transform: uppercase; text-wrap: balance; }
.stone-quote footer { font-size: .6875rem; color: var(--on-char-2); }
.b-c { background: var(--pv-2); color: #fff; }
.b-c footer { color: #fff; }
.h-c p { font-size: clamp(1.25rem, 1.7vw, 1.75rem); }
.b-c p { font: 500 clamp(1.0625rem, 1.35vw, 1.3125rem)/1.45 var(--sans); text-transform: none; }
.h-c { background: var(--pv-light); color: var(--ink); }
.h-c footer { color: var(--ink-2); }
.k-c { background: var(--pv-3); }
.k-c p { font: 500 clamp(1.0625rem, 1.35vw, 1.3125rem)/1.45 var(--sans); text-transform: none; max-width: 52ch; }
/* desktop: quote type scales with its stone so no stone is left half empty */
@media (min-width: 1024px) {
  .r-b, .h-c, .b-c { container-type: size; }
  .r-b p { font-size: clamp(1.75rem, min(24cqw, 13cqh), 4.5rem); }
  .h-c p { font-size: clamp(1.5rem, min(18cqw, 10cqh), 3.25rem); }
  .b-c p { font-size: clamp(1.0625rem, min(12.5cqw, 7cqh), 1.625rem); }
  .bond-stack { grid-template-rows: minmax(0, 1fr) auto; }
}

/* ---------- request-a-quote page ---------- */

.quote-page {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.45fr); align-items: start;
  gap: clamp(32px, 4.4vw, 72px);
  padding: clamp(32px, 6vh, 64px) calc(var(--pad) + var(--rail)) clamp(80px, 12vh, 128px) var(--pad);
}
.qp-intro { position: sticky; top: 24px; }
.qp-title { font: 900 clamp(3.25rem, 6.4vw, 6rem)/.86 var(--display); text-transform: uppercase; }
.qp-lede { max-width: 34ch; margin: 18px 0 0; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); color: var(--ink-2); text-wrap: pretty; }
.qp-intro .cover-reviews { flex-direction: column; align-items: flex-start; gap: 10px; margin: 26px 0 0; }
.qp-facts { margin-top: 34px; }
.qp-facts a { text-underline-offset: 3px; }
.qp-facts dd { overflow-wrap: anywhere; }
.qp-facts a:hover { color: var(--turf-btn); }

.tag-full { grid-area: auto; animation: none; }
.tag-full .tag-head { padding: 14px 28px 12px; }
.tag-full .tag-head h2 { font-size: 2.25rem; }
.tag-full .tag-body { padding: 26px 28px 30px; }
.qp-group { border: 0; margin: 0; padding: 0 0 26px; }
.qp-group + .qp-group, .qp-submit { border-top: 1.5px dashed rgb(31 32 30 / .25); padding-top: 24px; }
.qp-group > legend { float: left; width: 100%; padding: 0; margin-bottom: 14px; font: 800 1.5rem/1 var(--display); text-transform: uppercase; }
.qp-group > legend + * { clear: both; }
.qp-sub { border: 0; margin: 16px 0 0; padding: 0; }
.qp-more[hidden], .qp-follow[hidden] { display: none; }
.qp-follow { padding: 16px 0 18px; border-top: 1px solid rgb(31 32 30 / .15); animation: follow-in .3s var(--ease); }
.qp-follow:first-of-type { border-top: 0; padding-top: 4px; }
.qp-follow .field { margin-top: 14px; }
@keyframes follow-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .qp-follow { animation: none; } }
.qp-sub > legend { padding: 0; margin-bottom: 8px; font-size: .6875rem; color: var(--ink-2); font-stretch: 125%; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.qp-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.qp-col-name { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 800 1.125rem/1 var(--display); text-transform: uppercase; }
.qp-col-name .chip { width: 12px; height: 12px; }
.qp-other { margin-top: 16px; }
.qp-radios { margin-bottom: 12px; }
.pick:has(input[type="radio"]) input { border-radius: 50%; }
.pick input[type="radio"]:checked { background: #fff; box-shadow: inset 0 0 0 3.5px var(--turf-btn); border-color: #fff; }
.qp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.field-wide { grid-column: 1 / -1; }
.field-area { margin-bottom: 12px; }
.field textarea {
  display: block; width: 100%; min-height: 132px; padding: 24px 11px 10px;
  border: 0; border-radius: 0; background: #fff; resize: vertical;
  box-shadow: inset 0 0 0 1.5px rgb(31 32 30 / .55);
  font: 500 1rem/1.5 var(--sans); color: var(--ink);
  transition: box-shadow .2s var(--ease);
}
.field textarea::placeholder { color: #75736D; }
.field textarea:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.field textarea:focus { outline: none; box-shadow: inset 0 0 0 2.5px var(--turf-btn); }
.qp-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.qp-submit .btn { min-height: 56px; padding: 0 28px; font-size: .875rem; }
.qp-submit p { font-size: .9375rem; color: var(--ink-2); }

@media (max-width: 1023px) {
  .quote-page { grid-template-columns: minmax(0, 1fr); }
  .qp-intro { position: static; }
}
@media (max-width: 640px) {
  .qp-services, .qp-fields { grid-template-columns: minmax(0, 1fr); }
  .tag-full .tag-head, .tag-full .tag-body { padding-left: 14px; padding-right: 14px; }
}

/* ---------- services page: the property plan ---------- */

.svc-plan {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start;
  gap: clamp(28px, 3.6vw, 56px);
  padding: clamp(24px, 4vh, 40px) calc(var(--pad) + var(--rail)) clamp(72px, 11vh, 120px) var(--pad);
}
.plan-fig { margin: 0; padding: var(--joint); background: var(--sand); position: sticky; top: 20px; }
/* 4:3 frame over the wide photo; the zoom layer keeps the photo's own ratio so labels stay on their spots */
.pan { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--pv-3); }
.pan-drift { position: absolute; inset: 0; }
.pan-zoom { position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 1284 / 627; translate: -50% 0; }
.pan-zoom { transition: transform 1.1s var(--ease); transform-origin: 50% 60%; }
.pan img { width: 100%; height: 100%; }
/* the photo drifts slowly; pointing at a zone glides in toward it */
@media (prefers-reduced-motion: no-preference) {
  .pan-drift { animation: drift 22s ease-in-out infinite alternate; }
}
@keyframes drift { from { transform: scale(1.03) translate(0, 0); } to { transform: scale(1.1) translate(-2%, -1.5%); } }
.lab {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  display: flex; align-items: stretch; text-decoration: none; color: var(--on-char);
  box-shadow: 0 6px 14px -6px rgb(0 0 0 / .6);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.lab b { display: grid; place-items: center; width: 30px; color: #fff; font: 800 1.25rem/1 var(--display); }
.lab span { padding: 7px 10px 6px; background: var(--char); font-size: .6875rem; font-stretch: 125%; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.plan-fig figcaption { padding: 8px 4px 2px; font-size: .6875rem; font-stretch: 125%; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); }
.lab-1 b, .leg-1 b { background: #2F7A25; }
.lab-2 b, .leg-2 b { background: #4A3426; }
.lab-3 b, .leg-3 b { background: #262725; }
.lab-4 b, .leg-4 b { background: #1F201E; }
.svc-plan:has(.leg-1 a:hover, .leg-1 a:focus-visible, .lab-1:hover) .pan-zoom { transform: scale(1.32); transform-origin: 33% 63%; }
.svc-plan:has(.leg-1 a:hover, .leg-1 a:focus-visible, .lab-1:hover) .lab:not(.lab-1) { opacity: .25; }
.svc-plan:has(.leg-1 a:hover, .leg-1 a:focus-visible, .lab-1:hover) .lab-1 { transform: translate(-50%, -50%) scale(1.12); }
.svc-plan:has(.lab-1:hover) .leg-1 a { background: var(--tag); }
.svc-plan:has(.leg-2 a:hover, .leg-2 a:focus-visible, .lab-2:hover) .pan-zoom { transform: scale(1.32); transform-origin: 54% 80%; }
.svc-plan:has(.leg-2 a:hover, .leg-2 a:focus-visible, .lab-2:hover) .lab:not(.lab-2) { opacity: .25; }
.svc-plan:has(.leg-2 a:hover, .leg-2 a:focus-visible, .lab-2:hover) .lab-2 { transform: translate(-50%, -50%) scale(1.12); }
.svc-plan:has(.lab-2:hover) .leg-2 a { background: var(--tag); }
.svc-plan:has(.leg-3 a:hover, .leg-3 a:focus-visible, .lab-3:hover) .pan-zoom { transform: scale(1.32); transform-origin: 43% 52%; }
.svc-plan:has(.leg-3 a:hover, .leg-3 a:focus-visible, .lab-3:hover) .lab:not(.lab-3) { opacity: .25; }
.svc-plan:has(.leg-3 a:hover, .leg-3 a:focus-visible, .lab-3:hover) .lab-3 { transform: translate(-50%, -50%) scale(1.12); }
.svc-plan:has(.lab-3:hover) .leg-3 a { background: var(--tag); }
.svc-plan:has(.leg-4 a:hover, .leg-4 a:focus-visible, .lab-4:hover) .pan-zoom { transform: scale(1.32); transform-origin: 31% 92%; }
.svc-plan:has(.leg-4 a:hover, .leg-4 a:focus-visible, .lab-4:hover) .lab:not(.lab-4) { opacity: .25; }
.svc-plan:has(.leg-4 a:hover, .leg-4 a:focus-visible, .lab-4:hover) .lab-4 { transform: translate(-50%, -50%) scale(1.12); }
.svc-plan:has(.lab-4:hover) .leg-4 a { background: var(--tag); }

.plan-legend h1 { font: 900 clamp(2.75rem, 4.1vw, 4.25rem)/.86 var(--display); text-transform: uppercase; }
.plan-lede { margin: 12px 0 16px; max-width: 42ch; color: var(--ink-2); text-wrap: pretty; }
.legend { list-style: none; margin: 0 0 18px; padding: 0; border-top: 2px solid var(--ink); }
.legend li { border-bottom: 1px solid rgb(31 32 30 / .2); }
.legend a { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 8px 10px 8px 0; text-decoration: none; transition: background-color .25s var(--ease), padding .25s var(--ease); }
.legend a:hover, .legend a:focus-visible { background: var(--tag); padding-left: 10px; }
.legend b { display: grid; place-items: center; width: 40px; height: 40px; color: #fff; font: 800 1.5rem/1 var(--display); }
.legend strong { display: block; font: 800 1.5rem/1 var(--display); text-transform: uppercase; }
.legend strong + span { display: block; margin-top: 5px; font-size: .875rem; line-height: 1.45; color: var(--ink-2); }
.plan-biz { margin-top: 16px; font-size: .9375rem; color: var(--ink-2); max-width: 44ch; }
.plan-biz strong { color: var(--ink); }

.zone-no {
  display: inline-grid; place-items: center; width: 1.2em; height: 1.2em; margin-right: .4em;
  font-size: .5em; line-height: 1; vertical-align: .32em;
  box-shadow: inset 0 0 0 .08em currentColor;
}
.svc { list-style: none; padding: 0; width: min(100%, 520px); margin: clamp(22px, 3.4vh, 32px) 0; border-top: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.svc li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.svc h3 { font: 800 1.375rem/1 var(--display); text-transform: uppercase; }
.svc p { grid-column: 1; font-size: .9375rem; line-height: 1.45; opacity: .88; }
.svc a { grid-column: 2; grid-row: 1 / span 2; font-size: .6875rem; font-stretch: 125%; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.svc a:hover { text-decoration-thickness: 3px; }

.faq {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 24px clamp(32px, 4vw, 72px); align-items: start;
  padding: clamp(80px, 12vh, 128px) calc(var(--pad) + var(--rail)) clamp(80px, 12vh, 128px) var(--pad);
}
.faq h2 { font: 900 clamp(2.5rem, 5vw, 4.5rem)/.88 var(--display); text-transform: uppercase; }
.faq-list { border-top: 2px solid var(--ink); }
.faq-side { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 1024px) { .faq-side { position: sticky; top: 24px; } }
.faq-side > p { max-width: 34ch; color: var(--ink-2); line-height: 1.5; } .faq-side > p a { white-space: nowrap; color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.faq-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-width: 420px; }
.faq-links a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 14px; box-shadow: inset 0 0 0 1.5px var(--ink); text-decoration: none; font: 800 1.125rem/1 var(--display); text-transform: uppercase; transition: background-color .2s var(--ease), color .2s var(--ease); }
.faq-links a::after { content: "→"; font-family: var(--sans); font-weight: 400; transition: transform .25s var(--ease); }
.faq-links a:hover { background: var(--ink); color: #fff; } .faq-links a:hover::after { transform: translateX(3px); }
.faq details { border-bottom: 1px solid rgb(31 32 30 / .2); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 18px 0; cursor: pointer; list-style: none;
  font: 800 clamp(1.25rem, 1.7vw, 1.5rem)/1.1 var(--display); text-transform: uppercase;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 16px; height: 16px;
  background: linear-gradient(currentColor, currentColor) center / 100% 2.5px no-repeat, linear-gradient(currentColor, currentColor) center / 2.5px 100% no-repeat;
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover::after { transform: rotate(90deg); }
.faq details p { padding: 0 0 20px; max-width: 62ch; color: var(--ink-2); }

@media (max-width: 1023px) {
  .svc-plan, .faq { grid-template-columns: minmax(0, 1fr); }
  .plan-legend { order: -1; }
  .plan-fig { position: static; }
  .lab b { width: 26px; height: 26px; font-size: 1.0625rem; }
  .lab span { padding: 5px 8px 4px; font-size: .625rem; }
}
@media (max-width: 640px) {
  .lab span { display: none; }
  .svc li { grid-template-columns: minmax(0, 1fr); }
  .svc a { grid-column: 1; grid-row: auto; margin-top: 6px; }
}

/* ---------- gallery: the laying-pattern wall ---------- */

.gal { padding: clamp(24px, 4vh, 40px) calc(var(--pad) + var(--rail)) clamp(72px, 11vh, 120px) var(--pad); }
.gal-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 18px 40px; margin-bottom: 20px; }
.gal-head h1 { font: 900 clamp(3rem, 6vw, 5.5rem)/.86 var(--display); text-transform: uppercase; }
.gal-lede { margin-top: 12px; max-width: 52ch; color: var(--ink-2); text-wrap: pretty; }
.gal-filter { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gal-filter .pick { padding: 0 14px; }
.gal-filter .pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.gal-filter .pick:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.gal-filter .pick .chip { width: 10px; height: 10px; margin-right: 8px; vertical-align: 0; }
.gal-filter .pick:has(input:checked) .chip { box-shadow: 0 0 0 1.5px #fff; }
.gal-filter .pick i { font-style: normal; margin-left: 4px; }

.gal-wall { display: flex; flex-wrap: wrap; }
.gstone { display: block; flex: 1 1 calc(var(--w, 33.33%) - var(--joint)); min-width: 0; }
.gstone[hidden] { display: none; }
.gstone img { transition: transform .6s var(--ease); }
.gstone:hover img { transform: scale(1.04); }
.gal-wall[data-bond="all"] .gstone { height: clamp(150px, 14vw, 210px); }
.gal-wall[data-bond="all"] .gstone[data-n="0"] { --w: 40%; }
.gal-wall[data-bond="all"] .gstone[data-n="1"] { --w: 25%; }
.gal-wall[data-bond="all"] .gstone[data-n="2"] { --w: 35%; }
.gal-wall[data-bond="all"] .gstone[data-n="3"] { --w: 28%; }
.gal-wall[data-bond="all"] .gstone[data-n="4"] { --w: 44%; }
.gal-wall[data-bond="all"] .gstone[data-n="5"] { --w: 28%; }
.gal-wall[data-bond="lawn"] .gstone { height: clamp(160px, 15vw, 230px); }
.gal-wall[data-bond="lawn"] .gstone[data-n="0"] { --w: 33.33%; }
.gal-wall[data-bond="lawn"] .gstone[data-n="1"] { --w: 33.33%; }
.gal-wall[data-bond="lawn"] .gstone[data-n="2"] { --w: 33.33%; }
.gal-wall[data-bond="lawn"] .gstone[data-n="3"] { --w: 16.66%; }
.gal-wall[data-bond="lawn"] .gstone[data-n="4"] { --w: 33.33%; }
.gal-wall[data-bond="lawn"] .gstone[data-n="5"] { --w: 33.33%; }
.gal-wall[data-bond="lawn"] .gstone[data-n="6"] { --w: 16.66%; }
.gal-wall[data-bond="landscape"] .gstone { height: clamp(150px, 13vw, 200px); }
.gal-wall[data-bond="landscape"] .gstone[data-n="0"] { --w: 50%; }
.gal-wall[data-bond="landscape"] .gstone[data-n="1"] { --w: 50%; }
.gal-wall[data-bond="landscape"] .gstone[data-n="2"] { --w: 25%; height: clamp(220px, 21vw, 320px); }
.gal-wall[data-bond="landscape"] .gstone[data-n="3"] { --w: 25%; height: clamp(220px, 21vw, 320px); }
.gal-wall[data-bond="landscape"] .gstone[data-n="4"] { --w: 25%; height: clamp(220px, 21vw, 320px); }
.gal-wall[data-bond="landscape"] .gstone[data-n="5"] { --w: 25%; height: clamp(220px, 21vw, 320px); }
.gal-wall[data-bond="hardscape"] .gstone { height: clamp(190px, 18vw, 280px); }
.gal-wall[data-bond="hardscape"] .gstone[data-n="0"] { --w: 62%; }
.gal-wall[data-bond="hardscape"] .gstone[data-n="1"] { --w: 38%; }
.gal-wall[data-bond="hardscape"] .gstone[data-n="2"] { --w: 30%; }
.gal-wall[data-bond="hardscape"] .gstone[data-n="3"] { --w: 40%; }
.gal-wall[data-bond="hardscape"] .gstone[data-n="4"] { --w: 30%; }
.gal-wall[data-bond="snow"] .gstone { height: clamp(240px, 26vw, 380px); }
.gal-wall[data-bond="snow"] .gstone[data-n="0"] { --w: 50%; }
.gal-wall[data-bond="snow"] .gstone[data-n="1"] { --w: 50%; }
::view-transition-group(*) { animation-duration: .6s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
::view-transition-old(*), ::view-transition-new(*) { height: 100%; object-fit: cover; }

.gal-close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; margin-top: 28px; }
.gal-close p { font: 800 clamp(1.75rem, 3vw, 2.75rem)/1 var(--display); text-transform: uppercase; }

.lb { padding: 0; border: 0; background: transparent; max-width: min(1200px, 94vw); max-height: 94vh; overflow: visible; }
.lb::backdrop { background: rgb(31 32 30 / .9); }
.lb figure { margin: 0; padding: var(--joint); background: var(--sand); }
.lb img { display: block; width: auto; max-width: 100%; max-height: calc(94vh - 80px); margin: 0 auto; }
.lb figcaption { display: flex; justify-content: space-between; gap: 16px; padding: 10px 6px 4px; color: var(--ink); font-size: .6875rem; }
.lb-nav button {
  position: fixed; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 0;
  background: var(--tag); color: var(--ink); cursor: pointer; transition: background-color .2s var(--ease);
}
.lb-nav button:hover { background: #fff; }
.lb-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.lb-prev { left: 16px; top: 50%; translate: 0 -50%; }
.lb-next { right: 16px; top: 50%; translate: 0 -50%; }
.lb-close { right: 16px; top: 16px; }

@media (max-width: 640px) {
  .gal-wall[data-bond] .gstone { --w: 50%; height: 150px; }
  .gal-wall[data-bond] .gstone[data-n="0"], .gal-wall[data-bond] .gstone[data-n="3"] { --w: 100%; height: 210px; }
  .lb-prev, .lb-next { top: auto; bottom: 16px; translate: none; }
}

.lb-quote { position: fixed; left: 50%; bottom: 16px; translate: -50% 0; }

/* ---------- contact page ---------- */

.ct { padding: clamp(24px, 4vh, 40px) calc(var(--pad) + var(--rail)) clamp(56px, 8vh, 88px) var(--pad); }
.ct-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 40px; margin-bottom: 24px; }
.ct-head h1 { font: 900 clamp(3rem, 6vw, 5.5rem)/.86 var(--display); text-transform: uppercase; }
/* open-now sign: a shop sign with a lamp */
.sign { display: flex; align-items: center; gap: 16px; padding: 16px 22px; background: var(--ink); color: var(--on-char); box-shadow: 0 14px 24px -14px rgb(0 0 0 / .6); }
.sign-lamp { width: 18px; height: 18px; border-radius: 50%; background: #5C5D59; flex: none; }
.sign[data-state="open"] .sign-lamp { background: var(--turf-lit); box-shadow: 0 0 0 4px rgb(99 178 82 / .25); }
.sign[data-state="closed"] .sign-lamp { background: var(--brick); }
.sign strong { display: block; font: 900 clamp(1.5rem, 2.4vw, 2rem)/1 var(--display); text-transform: uppercase; }
.sign-note { display: block; margin-top: 4px; font-size: .875rem; color: var(--on-char-2); }
@media (prefers-reduced-motion: no-preference) {
  .sign[data-state="open"] .sign-lamp { animation: blink-open 1.2s steps(1, end) infinite; }
  .sign[data-state="closed"] .sign-lamp { animation: blink 1.2s steps(1, end) infinite; }
}
@keyframes blink { 50% { background: #4A1F16; } }
@keyframes blink-open { 50% { background: #1F4A1A; box-shadow: none; } }

.ways { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.way a { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 220px; padding: clamp(20px, 2.2vw, 30px); text-decoration: none; transition: filter .2s var(--ease); }
.way a:hover { filter: brightness(1.08); }
.way-name { font: 900 clamp(2.25rem, 3.6vw, 3.25rem)/.9 var(--display); text-transform: uppercase; }
.way-val { font: 800 1.25rem/1.15 var(--display); overflow-wrap: anywhere; }
.way-use { margin-top: auto; font-size: .9375rem; line-height: 1.45; }
.way-call a { background: var(--ink); color: #fff; }
.way-text a { background: var(--turf); color: #fff; }
.way-mail a { background: var(--pv-light); color: var(--ink); }
.way-quote a { background: var(--tag); color: var(--ink); }

.area-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: center; padding: clamp(56px, 8vh, 88px) calc(var(--pad) + var(--rail)); background: var(--char); color: var(--on-char); }
.area-fig { margin: 0; }
.area-map { display: block; width: 100%; height: auto; max-height: 86vh; }
/* every town is a stone; the joints between them are sand */
.town { stroke: var(--sand); stroke-width: 2.2; stroke-linejoin: round; transition: fill .25s var(--ease); }
.t-sussex.v0 { fill: #4A7A40; } .t-sussex.v1 { fill: #42703A; } .t-sussex.v2 { fill: #538447; }
.t-passaic.v0 { fill: #5E8A3A; } .t-passaic.v1 { fill: #557F33; } .t-passaic.v2 { fill: #679541; }
.t-morris.v0 { fill: #2C6E24; } .t-morris.v1 { fill: #27631F; } .t-morris.v2 { fill: #33792A; }
.town:hover, a:focus-visible .town { fill: #7DBF6C; }
.town.hit { fill: var(--gold); }
.town-labels text { fill: rgb(255 255 255 / .82); font: 650 10px var(--sans); font-stretch: 112%; letter-spacing: .04em; text-transform: uppercase; text-anchor: middle; pointer-events: none; }
.base-pin circle { fill: var(--gold); stroke: var(--ink); stroke-width: 3; }
.base-pin text { fill: #fff; font: 800 18px var(--display); text-transform: uppercase; paint-order: stroke; stroke: var(--ink); stroke-width: 4px; }
.area-fig figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; font-size: .6875rem; font-stretch: 125%; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--on-char-2); }
.key { width: 14px; height: 14px; }
.key-sx { background: #4A7A40; } .key-pa { background: #5E8A3A; margin-left: 10px; } .key-hit { background: var(--gold); } .key-mo { background: #2C6E24; margin-left: 10px; }
.map-hit { margin-left: auto; color: var(--gold); }
.area-check h2 { font: 900 clamp(2.5rem, 4.4vw, 4rem)/.88 var(--display); text-transform: uppercase; margin-bottom: 20px; }
.town-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; max-width: 460px; }
.town-form .field { background: #fff; }
.town-form .btn { height: 50px; background: var(--tag); color: var(--ink); }
.town-result { min-height: 3em; margin-top: 16px; font: 800 1.5rem/1.15 var(--display); text-transform: uppercase; }
.town-result a { color: var(--turf-lit); text-underline-offset: 4px; }
.area-note { max-width: 42ch; color: var(--on-char-2); }

.msg-sec { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); align-items: start; padding: clamp(64px, 10vh, 112px) calc(var(--pad) + var(--rail)) clamp(72px, 11vh, 120px) var(--pad); }
.msg-copy h2 { font: 900 clamp(2.5rem, 4.4vw, 4rem)/.88 var(--display); text-transform: uppercase; margin-bottom: 14px; }
.msg-copy > p { max-width: 38ch; color: var(--ink-2); }
.msg-copy .spec-table { margin-top: 28px; }
.msg-copy .spec-table a { text-underline-offset: 3px; }
.msg-form { grid-area: auto; animation: none; }
.msg-form .tag-body > .btn { margin-top: 4px; }

@media (max-width: 1023px) {
  .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-sec, .msg-sec { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ways { grid-template-columns: minmax(0, 1fr); }
  .way a { min-height: 0; }
  .sign { width: 100%; }
  .town-labels { display: none; }
}

/* ---------- locations hub & county pages ---------- */

.loc { padding: clamp(24px, 4vh, 40px) calc(var(--pad) + var(--rail)) clamp(56px, 8vh, 88px) var(--pad); }
.loc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 48px; margin-bottom: 24px; }
.loc-head h1 { font: 900 clamp(3rem, 6vw, 5.5rem)/.86 var(--display); text-transform: uppercase; }
.loc-head p { max-width: 46ch; color: var(--ink-2); text-wrap: pretty; }
.loc-map .area-fig { width: min(100%, 720px); }
.loc-map { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(24px, 4vw, 56px); align-items: start; padding: clamp(24px, 3vw, 40px); background: var(--char); color: var(--on-char); }
.cty-link:hover .town, .cty-link:focus-visible .town { fill: #6FAF5E; }
.cty-link:focus-visible { outline: none; }

.cspreads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cspread { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 20px; padding: clamp(28px, 4vw, 56px); color: #fff; text-decoration: none; }
.cspread-sussex { background: #42703A; } .cspread-morris { background: var(--turf); } .cspread-passaic { background: #4E7330; }
.cspread-map svg { width: 100%; height: auto; max-height: 260px; }
.cspread-map .town { stroke: rgb(255 255 255 / .35); stroke-width: 1.5; fill: rgb(255 255 255 / .12); }
.cspread-body { display: flex; flex-direction: column; gap: 8px; }
.cspread-name { font: 900 clamp(2.25rem, 3.6vw, 3.5rem)/.88 var(--display); text-transform: uppercase; }
.cspread-n { font-size: .75rem; font-stretch: 125%; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.cspread-lede { font-size: .9375rem; line-height: 1.5; color: rgb(255 255 255 / .88); }
.cspread-go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: .75rem; font-stretch: 125%; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.cspread-go::after { content: ""; width: 14px; height: 2px; background: currentColor; transition: width .3s var(--ease); }
.cspread:hover .cspread-go::after { width: 30px; }
.cspread-photo { grid-column: 1 / -1; }
.cspread-photo .stone { height: clamp(200px, 22vw, 320px); }

.dir { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(28px, 4vw, 64px); align-items: start; padding: clamp(64px, 10vh, 104px) calc(var(--pad) + var(--rail)); background: var(--char); color: var(--on-char); }
.dir-check h2 { font: 900 clamp(2.5rem, 4.4vw, 4rem)/.88 var(--display); text-transform: uppercase; margin-bottom: 20px; }
.dir .town-form .field { background: #fff; }
.dir .town-form .btn { height: 50px; background: var(--tag); color: var(--ink); }
.dir-other { margin-top: 18px; color: var(--on-char-2); }
.dir-other a, .dir h3 a { color: var(--on-char); text-underline-offset: 4px; }
.dir-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.dir h3 { font: 900 1.75rem/1 var(--display); text-transform: uppercase; margin-bottom: 12px; }
.town-list { list-style: none; margin: 0; padding: 0; columns: 1; column-gap: 24px; border-top: 1px solid rgb(236 235 230 / .25); padding-top: 10px; }
.dir-one .town-list { columns: 3; }
.town-list li { break-inside: avoid; padding: 5px 0; font-size: .9375rem; color: var(--on-char-2); }
.town-list a { color: var(--turf-lit); font-weight: 600; text-underline-offset: 3px; }

.cty-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; padding: clamp(24px, 4vh, 40px) calc(var(--pad) + var(--rail)) clamp(56px, 8vh, 88px) var(--pad); }
.cty-page h1 { font: 900 clamp(2.75rem, 5vw, 4.75rem)/.88 var(--display); text-transform: uppercase; }
.cty-lede { margin: 18px 0 20px; max-width: 48ch; color: var(--ink-2); text-wrap: pretty; }
.cty-svc { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cty-svc a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--tag); text-decoration: none; font: 800 1.25rem/1 var(--display); text-transform: uppercase; transition: background-color .2s var(--ease); }
.cty-svc a:hover { background: #fff; }
.cty-quote { margin: 0 0 24px; padding-left: 0; }
.cty-quote p { font: 800 clamp(1.25rem, 1.8vw, 1.625rem)/1.1 var(--display); text-transform: uppercase; max-width: 30ch; }
.cty-quote footer { margin-top: 8px; font-size: .6875rem; color: var(--ink-2); }
.cty-fig { padding: clamp(16px, 2vw, 28px); background: var(--char); color: var(--on-char); }
.cty-fig figcaption { color: var(--on-char-2); }
.cty-jobs { padding: 0 calc(var(--pad) + var(--rail)) clamp(64px, 10vh, 104px) var(--pad); }
.cty-jobs h2 { font: 900 clamp(2.25rem, 4vw, 3.5rem)/.9 var(--display); text-transform: uppercase; margin-bottom: 18px; }
.cty-stones { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows: clamp(200px, 20vw, 300px); }

@media (max-width: 1023px) {
  .loc-map, .cspreads, .dir, .cty-page { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cspread { grid-template-columns: 1fr; }
  .cspread-map { display: none; }
  .dir-cols { grid-template-columns: 1fr; }
  .dir-one .town-list, .town-list { columns: 2; }
  .cty-svc { grid-template-columns: 1fr; }
}

/* ---------- commercial snow plowing landing ---------- */

.snw { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(20px, 3vh, 36px) calc(var(--pad) + var(--rail)) clamp(56px, 8vh, 88px) var(--pad); background: var(--salt); }
.crumbs { margin-bottom: 18px; font-size: .6875rem; font-stretch: 125%; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.crumbs a { color: var(--ink); text-underline-offset: 3px; }
.snw h1 { font: 900 clamp(3rem, 5.6vw, 5.25rem)/.86 var(--display); text-transform: uppercase; }
.snw-lede { margin: 18px 0 20px; max-width: 46ch; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); color: var(--ink-2); text-wrap: pretty; }
.snw-chips { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.snw-chips li { padding: 9px 12px; box-shadow: inset 0 0 0 1.5px var(--ink); font-size: .6875rem; font-stretch: 125%; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.snw-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-bottom: 26px; }
.snw-cta .btn { min-height: 56px; padding: 0 26px; font-size: .875rem; }
.snw-call { font: 800 1.5rem/1 var(--display); text-decoration: none; }
.snw-call:hover { color: var(--turf-btn); }
.snw-photo { padding: var(--joint); }
.snw-photo .stone { height: clamp(380px, 62vh, 640px); }

.snw-clear { padding: clamp(64px, 10vh, 104px) calc(var(--pad) + var(--rail)) 0 var(--pad); }
.snw-clear h2, .how-copy h2, .snw-area h2 { font: 900 clamp(2.5rem, 4.6vw, 4.25rem)/.88 var(--display); text-transform: uppercase; margin-bottom: 20px; }
.clear-list { list-style: none; margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.clear-list li { display: flex; flex-direction: column; gap: 10px; min-height: 200px; padding: clamp(20px, 2vw, 28px); background: var(--ink); color: var(--on-char); }
@media (min-width: 1024px) { .clear-list:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.clear-list li:nth-child(2) { background: var(--pv-3); } .clear-list li:nth-child(3) { background: var(--pv-2); color: #fff; } .clear-list li:nth-child(4) { background: var(--salt); color: var(--ink); }
.clear-list h3 { font: 900 clamp(1.625rem, 2.2vw, 2.125rem)/.92 var(--display); text-transform: uppercase; }
.clear-list p { margin-top: auto; font-size: .9375rem; line-height: 1.45; }

.snw-how { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(64px, 10vh, 104px) calc(var(--pad) + var(--rail)) clamp(64px, 10vh, 104px) var(--pad); }
.how-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; border-top: 2px solid var(--ink); }
.how-steps li { counter-increment: step; display: grid; grid-template-columns: 52px 1fr; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid rgb(31 32 30 / .2); color: var(--ink-2); }
.how-steps li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; background: var(--ink); color: #fff; font: 800 1.5rem/1 var(--display); }
.how-steps strong { display: block; color: var(--ink); font: 800 1.375rem/1.05 var(--display); text-transform: uppercase; }
.how-photo { height: clamp(300px, 34vw, 460px); outline: var(--joint) solid var(--sand); }

.snw-proof { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); padding: clamp(56px, 8vh, 88px) calc(var(--pad) + var(--rail)); background: var(--char); color: var(--on-char); }
.snw-proof { align-items: center; }
.snw-said { display: flex; flex-direction: column; gap: 18px; }
.said-stars { font-size: 1.5rem; } .said-stars .stars { margin: 0; gap: 5px; }
.said-more { align-self: flex-start; color: var(--on-char); }
.snw-proof .svcp-photo .stone { min-height: 0; height: auto; aspect-ratio: 4 / 3; }
.snw-quote { margin: 0; }
.snw-quote p { font: 900 clamp(2rem, 3.4vw, 3.25rem)/.98 var(--display); text-transform: uppercase; max-width: 22ch; text-wrap: pretty; }
.snw-quote.is-long p { font: 500 clamp(1.25rem, 1.8vw, 1.625rem)/1.45 var(--sans); text-transform: none; max-width: 40ch; }
.snw-quote footer { margin-top: 14px; font-size: .6875rem; font-stretch: 125%; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--on-char-2); }
.snw-year { padding: 26px; background: var(--turf); color: #fff; }
.snw-year h3 { font: 900 clamp(1.75rem, 2.6vw, 2.5rem)/.9 var(--display); text-transform: uppercase; margin-bottom: 12px; }
.snw-year p { margin-bottom: 14px; line-height: 1.5; }
.snw-year .link { color: #fff; }

.snw-area { padding: clamp(64px, 10vh, 104px) calc(var(--pad) + var(--rail)) 0 var(--pad); }
.snw-area p { max-width: 70ch; font-size: 1.0625rem; color: var(--ink-2); }
.snw-area a { color: var(--ink); text-underline-offset: 3px; font-weight: 600; }

.snw-end { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 32px; padding: clamp(48px, 7vh, 72px) calc(var(--pad) + var(--rail)) clamp(48px, 7vh, 72px) var(--pad); background: var(--ink); color: #fff; }
.snw-end > p { font: 900 clamp(1.75rem, 3.2vw, 3rem)/.95 var(--display); text-transform: uppercase; max-width: 22ch; }
.snw-end .snw-cta { margin: 0; }
.snw-end .snw-call { color: #fff; }

@media (max-width: 1023px) {
  .snw, .snw-how, .snw-proof { grid-template-columns: minmax(0, 1fr); }
  .clear-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .snw-photo .stone { height: 60vw; }
}
@media (max-width: 640px) {
  .clear-list { grid-template-columns: minmax(0, 1fr); }
  .clear-list li { min-height: 0; }
}

/* ---------- snow board ---------- */

.sb { padding: clamp(24px, 4vh, 40px) calc(var(--pad) + var(--rail)) clamp(72px, 11vh, 120px) var(--pad); background: var(--salt); }
.sb-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px 40px; margin-bottom: 24px; }
.sb-head h1 { font: 900 clamp(3rem, 6vw, 5.5rem)/.86 var(--display); text-transform: uppercase; }
.sb-lede { margin-top: 12px; max-width: 48ch; color: var(--ink-2); }
.sb-town { width: min(100%, 340px); }
.sb-town select { width: 100%; height: 54px; padding: 18px 11px 4px; border: 0; border-radius: 0; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); font: 600 1rem var(--sans); color: var(--ink); }
.sb-town select:focus { outline: none; box-shadow: inset 0 0 0 2.5px var(--turf-btn); }
.sb-alerts { display: grid; gap: 6px; margin-bottom: 12px; }
.sb-alert { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 14px 18px; background: var(--brick); color: #fff; }
.sb-alert strong { font: 900 1.5rem/1 var(--display); text-transform: uppercase; }
.sb-alert span { font-size: .9375rem; }
.sb-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--joint); padding: var(--joint); background: var(--sand); }
.sb-total { display: flex; flex-direction: column; gap: 6px; padding: clamp(20px, 2.4vw, 32px); background: var(--ink); color: #fff; }
.sb-total:nth-child(2) { background: var(--pv-3); }
.sb-temp { background: var(--tag) !important; color: var(--ink); }
.sb-num { font: 900 clamp(4rem, 9vw, 8rem)/.85 var(--display); font-variant-numeric: tabular-nums; }
.sb-cap { font-size: .75rem; font-stretch: 125%; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; opacity: .85; }
.sb[data-state="loading"] .sb-num { opacity: .35; }
.sb-status { margin: 16px 0 22px; font: 800 clamp(1.25rem, 2vw, 1.75rem)/1.1 var(--display); text-transform: uppercase; }
.sb[data-state="error"] .sb-status { color: var(--brick); }
.sb-chart { margin: 0; padding: 20px 20px 12px; background: var(--ink); color: var(--on-char); }
.sb-bars { display: flex; align-items: flex-end; gap: 2px; height: 180px; padding-top: 24px; border-bottom: 1px solid rgb(236 235 230 / .3); }
.sb-bars span { position: relative; flex: 1; height: var(--h, 0%); min-height: 0; background: #E8F0FB; transition: height .5s var(--ease); }
.sb-bars span:hover { background: #fff; }
.sb-bars span[data-t]::after { content: attr(data-t); position: absolute; left: 0; top: calc(100% + 8px); height: 0; font-size: .625rem; letter-spacing: .04em; white-space: nowrap; color: var(--on-char-2); }
.sb-bars span[data-t]::before { content: ""; position: absolute; left: 0; bottom: -6px; width: 1px; height: 6px; background: rgb(236 235 230 / .4); }
.sb-chart figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px; margin-top: 34px; font-size: .6875rem; font-stretch: 125%; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--on-char-2); }
.sb-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 28px; margin-top: 28px; }
.sb-foot p { max-width: 46ch; }
.sb-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.sb-credit { margin-top: 22px; font-size: .8125rem; color: var(--ink-2); }
.sb-credit a { color: var(--ink); text-underline-offset: 3px; }
@media (max-width: 640px) {
  .sb-totals { grid-template-columns: 1fr 1fr; }
  .sb-temp { grid-column: 1 / -1; }
  .sb-bars span[data-t]:nth-of-type(12n + 7)::after { content: none; }
}

/* ---------- service pages (reuse the snow landing layout) ---------- */

.svcp-lawn { background: var(--turf); color: #fff; }
.svcp-landscape { background: var(--mulch); color: #F1E9E0; }
.svcp-hardscape { background: var(--paver); color: var(--on-char); }
.svcp:not(.svcp-snow) { --focus: #fff; }
.svcp:not(.svcp-snow) .crumbs, .svcp:not(.svcp-snow) .crumbs a, .svcp:not(.svcp-snow) .snw-call { color: inherit; }
.svcp:not(.svcp-snow) .snw-lede { color: inherit; opacity: .9; }
.svcp:not(.svcp-snow) .snw-chips li { box-shadow: inset 0 0 0 1.5px currentColor; }
.svcp:not(.svcp-snow) .cr-count { background: rgb(0 0 0 / .35); }
.svcp ~ .snw-clear { padding-bottom: clamp(64px, 10vh, 104px); }
.svcp-photo { padding: var(--joint); align-self: stretch; }
.svcp-photo .stone { height: 100%; min-height: 260px; }
.svcp-more { padding: 0 calc(var(--pad) + var(--rail)) clamp(64px, 10vh, 104px) var(--pad); }
.svcp-more h2 { font: 900 clamp(2rem, 3.6vw, 3rem)/.9 var(--display); text-transform: uppercase; margin-bottom: 16px; }
.svcp-more ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.svcp-more li a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; background: var(--tag); text-decoration: none; font: 800 1.25rem/1 var(--display); text-transform: uppercase; transition: background-color .2s var(--ease); }
.svcp-more li a:hover { background: #fff; }
.svcp-more .svcp-all { background: var(--ink); color: #fff; }
.svcp-more .svcp-all:hover { background: #000; }
.svcp-more p { color: var(--ink-2); }
.svcp-more p a { color: var(--ink); text-underline-offset: 3px; }
.svc h3 a, .spec li a { color: inherit; text-decoration: none; }
.svc h3 a:hover, .spec li a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* ---------- seasonal promo ---------- */

.promo { display: grid; background: #B8541C; color: #fff; transition: background-color .8s var(--ease); }
.promo:has(.promo-slide:nth-child(2).is-on) { background: #2B4A6B; }
.promo-slide { grid-area: 1 / 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 18px; padding: 10px var(--pad); color: inherit; text-decoration: none; font-size: .875rem; opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.promo-slide.is-on { opacity: 1; transform: none; }
.promo strong { font: 800 1.125rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.promo-go { font-size: .6875rem; font-stretch: 125%; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
.promo-slide:hover .promo-go { text-decoration-thickness: 2px; }
.promo-leaf { width: 30px; height: 30px; flex: none; fill: #F2C14E; color: #F2C14E; transform: rotate(-12deg); transition: transform .4s var(--ease); }
.promo-slide:hover .promo-leaf { transform: rotate(10deg); }
.promo-flake { fill: none; color: #CFE6FF; }
.promo-slide:hover .promo-flake { transform: rotate(60deg); }
/* ---------- facebook ad landing page ---------- */

.lp-top { display: flex; justify-content: space-between; align-items: center; padding: 12px var(--pad); border-bottom: 2px solid var(--ink); }
.lp-logo { height: 40px; width: auto; }
.lp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: start; padding: clamp(20px, 4vh, 44px) var(--pad) clamp(48px, 7vh, 80px); }
.lp-rev { display: inline-flex; align-items: center; padding: 6px 10px 5px; background: var(--ink); color: #fff; font: 800 1rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.lp-pitch h1 { margin: 16px 0 14px; font: 900 clamp(2.75rem, 5.6vw, 5.25rem)/.86 var(--display); text-transform: uppercase; }
.lp-lede { max-width: 44ch; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: var(--ink-2); }
.lp-ticks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 8px; }
.lp-ticks li { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.lp-ticks li::before { content: ""; width: 18px; height: 18px; flex: none; background: var(--turf-btn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E") center/12px no-repeat; }
.lp-form { grid-area: auto; animation: none; }
.lp-step-n { font-size: .8125rem; color: var(--on-char-2); }
.lp-step { border: 0; margin: 0; padding: 0; }
.lp-step[hidden] { display: none; }
.lp-step > legend { float: left; width: 100%; margin-bottom: 14px; font: 800 1.5rem/1 var(--display); text-transform: uppercase; }
.lp-step > legend + * { clear: both; }
.lp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lp-card { position: relative; display: block; cursor: pointer; background: var(--ink); overflow: hidden; }
.lp-card input { position: absolute; opacity: 0; }
.lp-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; opacity: .82; transition: opacity .2s var(--ease), transform .4s var(--ease); }
.lp-card span { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; background: linear-gradient(transparent, rgb(0 0 0 / .75)); color: #fff; font: 800 1.25rem/1 var(--display); text-transform: uppercase; }
.lp-card:hover img { opacity: 1; transform: scale(1.04); }
.lp-card:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.lp-card:has(input:checked) { box-shadow: inset 0 0 0 4px var(--turf-btn); }
.lp-plan { margin: 12px 0 14px; }
.lp-submit { width: 100%; min-height: 58px; font-size: .9375rem; }
.lp-back { margin-top: 10px; border: 0; background: none; font: 650 .75rem var(--sans); font-stretch: 125%; letter-spacing: .07em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: var(--ink-2); }
.lp-fine { margin-top: 8px; font-size: .8125rem; color: var(--ink-2); }
.lp-proof { margin: 0 var(--pad); grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px 220px; }
.lp-proof .p1 { grid-row: span 2; } .lp-proof .p4 { grid-column: 2 / span 2; }
.lp-how { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px clamp(28px, 4vw, 64px); align-items: center; padding: clamp(56px, 9vh, 96px) var(--pad); }
.lp-how h2 { grid-column: 1 / -1; font: 900 clamp(2.5rem, 4.6vw, 4.25rem)/.88 var(--display); text-transform: uppercase; }
.lp-plan-img img { filter: drop-shadow(0 16px 20px rgb(0 0 0 / .3)); }
.lp-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--joint); padding: var(--joint); margin: 0 var(--pad) clamp(56px, 9vh, 96px); background: var(--sand); }
.lp-quotes blockquote { margin: 0; padding: 24px; background: var(--ink); color: var(--on-char); display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.lp-quotes blockquote:nth-child(2) { background: var(--pv-3); } .lp-quotes blockquote:nth-child(3) { background: var(--pv-light); color: var(--ink); }
.lp-quotes p { font-size: 1.0625rem; line-height: 1.45; }
.lp-quotes footer { font-size: .6875rem; font-stretch: 125%; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; opacity: .8; }
.lp-foot { padding: 20px var(--pad) 90px; font-size: .8125rem; color: var(--ink-2); }
.lp-foot a { color: var(--ink); }
.lp-dock { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; min-height: 56px; transform: translateY(140%); transition: transform .35s var(--ease); }
.lp-dock.on { transform: none; }
@media (min-width: 1024px) { .lp-dock { display: none; } .lp-foot { padding-bottom: 28px; } }
@media (max-width: 1023px) {
  .lp-hero, .lp-how { grid-template-columns: minmax(0, 1fr); }
  .lp-ticks { display: none; }
  .lp-proof { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 150px auto; }
  .lp-proof .p1 { grid-column: 1 / -1; grid-row: auto; } .lp-proof .p4 { grid-column: 1 / -1; }
  .lp-quotes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) { .lp-top .mast-call span { display: none; } .lp-pitch h1 { margin-top: 12px; } }

.lp-card-tile { display: flex; align-items: flex-end; aspect-ratio: 4 / 3; background: var(--bg); }
.lp-card-tile span { position: static; background: none; padding: 14px; font-size: 1.5rem; line-height: .95; }
.lp-card-tile:hover { filter: brightness(1.15); }
.lp-snow { background: #E9EEF3; }
.lp-snow .p4 p { font: 500 clamp(1.125rem, 1.6vw, 1.5rem)/1.4 var(--sans); text-transform: none; }
.lp-snowcard { padding: 26px; background: #2B4A6B; color: #fff; }
.lp-snowcard .d { font: 900 clamp(1.75rem, 2.6vw, 2.5rem)/.9 var(--display); text-transform: uppercase; margin-bottom: 12px; }
.lp-snowcard p:not(.d) { margin-bottom: 14px; line-height: 1.5; }
.lp-snowcard .link { color: #fff; }

/* ---------- 404 ---------- */

.nf { min-height: 62vh; display: flex; align-items: center; padding: clamp(48px, 9vh, 104px) calc(var(--pad) + var(--rail)) clamp(72px, 11vh, 120px) var(--pad); }
.nf-copy > .nf-code { font: 900 clamp(6rem, 18vw, 15rem)/.8 var(--display); color: transparent; -webkit-text-stroke: 2px var(--ink-2); max-width: none; margin-bottom: 14px; }
.nf-copy h1 { font: 900 clamp(3.5rem, 8vw, 7rem)/.86 var(--display); text-transform: uppercase; margin-bottom: 18px; }
.nf-copy > p { max-width: 42ch; color: var(--ink-2); margin-bottom: 22px; }
.nf-links { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.nf-links a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; background: var(--ink); color: #fff; text-decoration: none; font: 800 1.25rem/1 var(--display); text-transform: uppercase; }
.nf-links a:hover { background: var(--turf-btn); }

/* ---------- seasons pair (under hero) ---------- */

.seasons { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(72px, 11vh, 128px); }
.season { display: grid; grid-template-rows: auto 1fr; color: #fff; --focus: #fff; }
.season-fall { background: #8A3E14; }
.season-snow { background: #2B4A6B; }
.season-photo { padding: var(--joint); background: var(--sand); }
.season-photo img { width: 100%; height: clamp(240px, 26vw, 380px); object-fit: cover; }
.season-snow .season-photo img { object-position: 50% 40%; }
.season-copy { padding: clamp(28px, 3.4vw, 52px); display: flex; flex-direction: column; gap: 16px; }
.season-copy h2 { font: 900 clamp(2.25rem, 3.8vw, 3.75rem)/.88 var(--display); text-transform: uppercase; }
.season-copy p { max-width: 40ch; font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); line-height: 1.5; }
.season-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: auto; padding-top: 8px; }
.season-cta .link { color: #fff; }
.seasons + .year { margin-top: 0; }
@media (max-width: 1023px) { .seasons { grid-template-columns: minmax(0, 1fr); } }

/* ---------- about ---------- */

.ab-hero { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(24px, 4vh, 40px) calc(var(--pad) + var(--rail)) clamp(56px, 8vh, 88px) var(--pad); }
.ab-hero h1 { font: 900 clamp(3.25rem, 6.4vw, 6rem)/.86 var(--display); text-transform: uppercase; }
.ab-lede { margin: 18px 0 22px; max-width: 42ch; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); color: var(--ink-2); }
.ab-photo { padding: var(--joint); }
.ab-photo .stone { height: clamp(320px, 38vw, 560px); }
.ab-story { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 72px); align-items: center; padding: clamp(56px, 9vh, 96px) calc(var(--pad) + var(--rail)); background: var(--char); color: var(--on-char); }
.ab-story-photo { padding: var(--joint); }
.ab-story-photo .stone { height: clamp(320px, 36vw, 520px); }
.ab-headshot { justify-self: center; width: min(100%, 262px); } .ab-headshot .stone { height: auto; aspect-ratio: 235 / 306; }
.ab-story h2 { font: 900 clamp(2.5rem, 4.4vw, 4rem)/.88 var(--display); text-transform: uppercase; }
.ab-big { margin: 14px 0 22px; font: 600 clamp(1.25rem, 1.8vw, 1.625rem)/1.35 var(--sans); color: #fff; max-width: 34ch; }
.ab-story-copy > p:not(.ab-big) { max-width: 60ch; margin-bottom: 14px; color: var(--on-char-2); line-height: 1.6; }
.ab-story .sheet-quote { margin-top: 24px; }
.ab-story .sheet-quote p { color: #fff; }
.ab-story .sheet-quote footer { color: var(--on-char-2); }
.ab-values { padding: clamp(56px, 9vh, 96px) calc(var(--pad) + var(--rail)) 0 var(--pad); }
.ab-values .clear-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-values .clear-list li { min-height: 220px; }
.ab-gear { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(56px, 9vh, 96px) calc(var(--pad) + var(--rail)); }
.ab-gear h2, .ab-hours h2 { font: 900 clamp(2.5rem, 4.4vw, 4rem)/.88 var(--display); text-transform: uppercase; margin-bottom: 16px; }
.ab-gear-copy > p { max-width: 44ch; color: var(--ink-2); margin-bottom: 22px; }
.ab-gear blockquote { margin: 0; padding: 20px 22px; background: var(--ink); color: var(--on-char); }
.ab-gear blockquote p { line-height: 1.5; }
.ab-gear blockquote footer { margin-top: 10px; font-size: .6875rem; font-stretch: 125%; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--on-char-2); }
.ab-gear-stones { grid-template-columns: 1.4fr 1fr .8fr; grid-template-rows: 220px 220px; grid-template-areas: "a c d" "b c d"; }
.ab-gear-stones .g1 { grid-area: a; } .ab-gear-stones .g2 { grid-area: b; } .ab-gear-stones .g3 { grid-area: c; } .ab-gear-stones .g4 { grid-area: d; }
.ab-hours { margin: 0 calc(var(--pad) + var(--rail)) clamp(64px, 10vh, 104px) var(--pad); padding: clamp(32px, 4vw, 56px); background: var(--char); color: var(--on-char); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: 28px clamp(28px, 4vw, 64px); align-items: center; }
.ab-hours h2 { color: #fff; margin-bottom: 12px; }
.ab-hours-copy p { color: var(--on-char-2); max-width: 36ch; }
.ab-hours-copy a { color: #fff; text-underline-offset: 3px; }
.ab-days { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-days li { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 150px; padding: 20px 22px; background: var(--char-2); }
.ab-days li:first-child { background: var(--turf); }
.ab-days li.off { background: #1B1C1A; color: var(--on-char-2); }
.ab-day { font-size: .75rem; font-stretch: 125%; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.ab-time { font: 900 clamp(1.5rem, 2.2vw, 2.25rem)/.95 var(--display); text-transform: uppercase; color: #fff; white-space: nowrap; }
.ab-days li.off .ab-time { color: var(--on-char-2); }
@media (max-width: 1023px) {
  .ab-hero, .ab-story, .ab-gear, .ab-hours { grid-template-columns: minmax(0, 1fr); }
  .ab-days { grid-template-columns: minmax(0, 1fr); }
  .ab-days li { min-height: 0; flex-direction: row; align-items: baseline; }
  .ab-values .clear-list { grid-template-columns: minmax(0, 1fr); }
  .ab-gear-stones { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px 260px; grid-template-areas: "a a" "b b" "c d"; }
}

/* ---------- shared hover lift for button-like links ---------- */

.nf-links a, .svcp-more li a, .cty-svc a, .lb-nav button, .way a, .mm-foot a, .snw-call, .back-phone {
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s var(--ease), color .2s var(--ease), filter .2s var(--ease);
}
.nf-links a:hover, .svcp-more li a:hover, .cty-svc a:hover, .way a:hover { transform: translateY(-2px); box-shadow: 0 10px 18px -10px rgb(0 0 0 / .45); }
.nf-links a:active, .svcp-more li a:active, .cty-svc a:active, .way a:active, .lb-nav button:active { transform: translateY(1px) scale(.98); box-shadow: none; }
.lb-nav button:hover { transform: scale(1.06); }
.snw-call:hover, .back-phone:hover { transform: translateX(3px); }
.tag-fields .btn:hover, .qp-submit .btn:hover, .lp-submit:hover { box-shadow: 0 10px 20px -10px rgb(0 0 0 / .55); }

/* ---------- town pages ---------- */

.town-page .crumbs { margin-bottom: 16px; }
.town-page .snw-cta { margin: 22px 0 0; }
.town-page .area-map .town:not(.hit) { opacity: .78; }
.tp-work { padding-bottom: clamp(56px, 9vh, 96px); }
.tp-stones { grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: 230px 230px; grid-template-areas: "a b c" "a d d"; margin-bottom: 16px; }
.tp-stones .t0 { grid-area: a; } .tp-stones .t1 { grid-area: b; } .tp-stones .t2 { grid-area: c; } .tp-stones .t3 { grid-area: d; }
.tp-work .link { color: var(--ink); }
@media (max-width: 640px) { .tp-stones { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 160px 160px; grid-template-areas: "a a" "b c" "d d"; } }
.cty-near { margin: -6px 0 20px; color: var(--ink-2); }
.cty-near a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.tp-svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--joint); padding: var(--joint); margin: 0 calc(var(--pad) + var(--rail)) clamp(56px, 9vh, 96px) var(--pad); background: var(--sand); }
.tp-col { padding: clamp(22px, 2.4vw, 34px); background: var(--turf); color: #fff; }
.tp-col:nth-child(2) { background: var(--mulch); }
.tp-col:nth-child(3) { background: var(--paver); }
.tp-col h2 { font: 900 clamp(1.625rem, 2.2vw, 2.125rem)/.92 var(--display); text-transform: uppercase; margin-bottom: 14px; }
.tp-col p { line-height: 1.55; opacity: .92; }
.tp-links { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); padding: 0 calc(var(--pad) + var(--rail)) clamp(64px, 10vh, 104px) var(--pad); }
.tp-links h2 { font: 900 clamp(2rem, 3.4vw, 3rem)/.9 var(--display); text-transform: uppercase; margin-bottom: 16px; }
.svcp-more-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.svcp-more-list a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; background: var(--tag); text-decoration: none; font: 800 1.25rem/1 var(--display); text-transform: uppercase; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s var(--ease); }
.svcp-more-list a:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 10px 18px -10px rgb(0 0 0 / .45); }
.tp-near { line-height: 1.8; color: var(--ink-2); }
.tp-near a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 1023px) { .tp-svc, .tp-links { grid-template-columns: minmax(0, 1fr); } .cspreads, .dir-cols { grid-template-columns: minmax(0, 1fr); } }

/* no rule under the header when the page opens on a colored band */
body:has(main > :first-child:is(.snw, .sb, .seasons)) .mast { border-bottom-color: transparent; }

/* ---------- faq page ---------- */

.faq-hero { padding: clamp(28px, 5vh, 56px) calc(var(--pad) + var(--rail)) 0 var(--pad); }
.faq-hero h1 { font: 900 clamp(3rem, 6vw, 5.5rem)/.86 var(--display); text-transform: uppercase; }
.faq-hero p { margin-top: 14px; color: var(--ink-2); max-width: 48ch; }
.faq-hero a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.faq-group { padding-top: clamp(48px, 7vh, 72px); padding-bottom: 0; }
.faq-group:last-of-type { padding-bottom: clamp(72px, 11vh, 120px); }
.faq details p a { color: var(--ink); text-underline-offset: 3px; }

/* ---------- services hub ---------- */

.hub-hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 40px; padding: clamp(28px, 5vh, 56px) calc(var(--pad) + var(--rail)) clamp(40px, 6vh, 64px) var(--pad); }
.hub-hero h1 { font: 900 clamp(3.5rem, 8vw, 7rem)/.84 var(--display); text-transform: uppercase; }
.hub-hero p { margin: 14px 0 18px; max-width: 46ch; color: var(--ink-2); font-size: clamp(1.0625rem, 1.3vw, 1.25rem); }
.hub-jump { display: flex; flex-wrap: wrap; gap: 6px; }
.hub-jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; box-shadow: inset 0 0 0 1.5px var(--ink); text-decoration: none; font-size: .6875rem; font-stretch: 125%; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; transition: background-color .2s var(--ease), color .2s var(--ease); }
.hub-jump a:hover { background: var(--ink); color: #fff; }
.hub-band { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(24px, 3vw, 48px); padding: clamp(48px, 7vh, 80px) calc(var(--pad) + var(--rail)) clamp(48px, 7vh, 80px) var(--pad); scroll-margin-top: 20px; }
.hub-lawn { background: var(--turf); color: #fff; } .hub-landscape { background: var(--mulch); color: #F1E9E0; } .hub-hardscape { background: var(--paver); color: var(--on-char); } .hub-snow { background: var(--salt); color: var(--ink); }
.hub-band:not(.hub-snow) { --focus: #fff; }
.hub-intro h2 { font: 900 clamp(2.75rem, 5vw, 4.75rem)/.86 var(--display); text-transform: uppercase; }
.hub-intro p { margin: 14px 0 22px; max-width: 36ch; line-height: 1.5; opacity: .92; }
.hub-cover { margin: 0; padding: var(--joint); } .hub-cover .stone { height: clamp(200px, 22vw, 300px); }
.hub-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.hub-card { display: grid; grid-template-columns: 120px 1fr; height: 100%; background: rgb(255 255 255 / .1); color: inherit; text-decoration: none; transition: background-color .2s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.hub-snow .hub-card { background: #fff; }
.hub-card:hover { background: rgb(255 255 255 / .18); transform: translateY(-2px); box-shadow: 0 12px 22px -12px rgb(0 0 0 / .5); }
.hub-snow .hub-card:hover { background: #fff; }
.hub-img { position: relative; overflow: hidden; min-height: 112px; } .hub-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.hub-card:hover .hub-img img { transform: scale(1.05); }
.hub-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }
.hub-name { font: 800 1.375rem/1 var(--display); text-transform: uppercase; }
.hub-lede { font-size: .875rem; line-height: 1.45; }
.hub-go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: .6875rem; font-stretch: 125%; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.hub-go::after { content: ""; width: 12px; height: 2px; background: currentColor; transition: width .3s var(--ease); }
.hub-card:hover .hub-go::after { width: 24px; }
@media (max-width: 1023px) { .hub-band { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .hub-cards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- review request ---------- */

.rv-main { max-width: 660px; margin: 0 auto; padding: 28px 20px 56px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.rv-logo { width: min(240px, 60%); margin-bottom: 22px; }
.rv-photo { margin: 0 0 28px; padding: var(--joint); width: 100%; } .rv-photo .stone { height: clamp(200px, 48vw, 340px); }
.rv h1 { font: 900 clamp(2.75rem, 9vw, 4.5rem)/.86 var(--display); text-transform: uppercase; }
.rv-lede { margin: 16px 0 18px; max-width: 40ch; font-size: 1.125rem; color: var(--ink-2); }
.rv-stars { font-size: 1.75rem; margin-bottom: 18px; } .rv-stars .stars { margin: 0; gap: 6px; }
.rv-go { width: 100%; max-width: 420px; min-height: 64px; gap: 12px; font-size: .875rem; letter-spacing: .04em; white-space: nowrap; }
.rv-go svg { width: 24px; height: 24px; flex: none; }
.rv-note { margin-top: 10px; font-size: .875rem; color: var(--ink-2); }
.rv-social { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 36px 0 26px; padding-top: 26px; border-top: 1px solid rgb(31 32 30 / .2); width: 100%; }
.rv-social p { width: 100%; font-size: .6875rem; font-stretch: 125%; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.rv-soc { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px; box-shadow: inset 0 0 0 1.5px var(--ink); text-decoration: none; font: 800 1.25rem/1 var(--display); text-transform: uppercase; transition: background-color .2s var(--ease), color .2s var(--ease), transform .25s var(--ease); }
.rv-soc:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
.rv-soc svg { width: 22px; height: 22px; }
.rv-sign { font-size: .875rem; color: var(--ink-2); } .rv-sign a { color: var(--ink); text-underline-offset: 3px; }

/* ---------- legal pages ---------- */

.doc {
  max-width: 68ch;
  padding: clamp(40px, 7vh, 72px) var(--pad) clamp(80px, 12vh, 128px);
  margin-left: max(var(--pad), calc((100vw - var(--rail) - 68ch) / 2 - var(--pad)));
}
.doc h1 { font: 900 clamp(3rem, 6vw, 5rem)/.88 var(--display); text-transform: uppercase; margin-bottom: 14px; }
.doc-date { font-size: .6875rem; font-stretch: 125%; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 32px; }
.doc h2 { font: 800 1.5rem/1.1 var(--display); text-transform: uppercase; margin: 40px 0 12px; }
.doc p, .doc ul { margin-bottom: 14px; }
.doc ul { padding-left: 1.2em; }
.doc li { margin-bottom: 4px; }
.doc li::marker { color: var(--turf-btn); }
.doc a { text-underline-offset: 3px; }
.doc a:hover { color: var(--turf-btn); }

/* ---------- review wall ---------- */

.wall { padding: clamp(80px, 13vh, 144px) calc(var(--pad) + var(--rail)) 0 var(--pad); }
.wall-cap {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap;
  padding: clamp(22px, 3vw, 36px) clamp(20px, 3vw, 36px);
  background: var(--ink); color: var(--on-char);
  box-shadow: 0 var(--joint) 0 var(--sand);
  position: relative; z-index: 1;
}
.wall-cap h2 { font: 900 clamp(2.5rem, 5.4vw, 5rem)/.88 var(--display); text-transform: uppercase; max-width: 16ch; }
.wall-score { display: grid; justify-items: end; gap: 10px; text-align: right; }
.wall-score p { font: 800 clamp(1.25rem, 1.8vw, 1.75rem)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.wall-cap .link { color: var(--on-char); }
.wall-cap .link:hover { color: var(--turf-lit); }
.courses {
  display: grid; gap: var(--joint);
  padding: var(--joint); margin-top: var(--joint);
  background: var(--sand);
}
.course { display: flex; gap: var(--joint); }
.course.offset::after { content: none; }
.wall-swipe { display: none; margin: 12px 0 0; font-size: .6875rem; font-stretch: 125%; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.block {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  padding: clamp(18px, 2vw, 28px);
  background: var(--pv-1); color: var(--ink);
}
.block p { font-size: clamp(1rem, 1.2vw, 1.125rem); font-weight: 500; line-height: 1.45; text-wrap: pretty; max-width: 60ch; }
.block footer { font-size: .6875rem; color: rgb(31 32 30 / .78); }
.w-1 { flex: 1 1 0; } .w-2 { flex: 2 1 0; } .w-3 { flex: 3 1 0; }
.tone-light { background: var(--pv-light); }
.tone-mid { background: var(--pv-2); color: #fff; }
.tone-dark { background: var(--pv-3); color: var(--on-char); }
.tone-black { background: var(--ink); color: var(--on-char); }
.tone-mid footer { color: #fff; }
.tone-dark footer, .tone-black footer { color: rgb(236 235 230 / .8); }

/* ---------- spec sheet: crew & area ---------- */

.sheet-quote p { font-size: clamp(1.1875rem, 1.6vw, 1.4375rem); line-height: 1.4; font-weight: 500; max-width: 34ch; text-wrap: pretty; }
.sheet-quote footer { margin-top: 12px; font-size: .6875rem; color: var(--ink-2); }
.spec-table { margin-top: 36px; border-top: 2px solid var(--ink); }
.spec-table div { display: grid; grid-template-columns: minmax(120px, 42%) 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgb(31 32 30 / .2); }
.spec-table dt { font-size: .6875rem; color: var(--ink-2); padding-top: 4px; }
.spec-table dd { font-weight: 600; font-variant-numeric: tabular-nums; }

.area h3 { font: 900 clamp(2rem, 3vw, 2.75rem)/.9 var(--display); text-transform: uppercase; margin-bottom: 18px; }
.towns { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); }
.towns thead th { text-align: left; font-size: .6875rem; color: var(--ink-2); padding: 10px 0 8px; font-weight: 600; }
.towns thead th + th { text-align: right; }
.towns tbody > tr { border-top: 1px solid rgb(31 32 30 / .2); }
.towns tbody th { text-align: left; padding: 0; }
.towns tbody th a {
  display: block; padding: 12px 0 10px;
  font: 800 1.5rem/1 var(--display); text-transform: uppercase; text-decoration: none;
  transition: color .2s var(--ease);
}
.towns tbody th a:hover { color: var(--turf-btn); }
.towns td { font-size: .6875rem; color: var(--ink-2); text-align: right; vertical-align: middle; white-space: nowrap; padding-left: 16px; }
.area > p { margin-top: 18px; font-size: .9375rem; color: var(--ink-2); max-width: 36ch; }

/* ---------- back cover ---------- */

.back {
  --focus: #9AD58B;
  background: var(--char); color: var(--on-char);
  padding: clamp(56px, 8vh, 88px) calc(var(--pad) + var(--rail)) 28px var(--pad);
}
.back-top { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px 72px; align-items: center; }
.back-logo { width: 330px; max-width: 100%; }
.back-phone {
  display: block; width: fit-content; margin: 0 0 20px;
  font: 900 clamp(3.25rem, 8vw, 6rem)/.9 var(--display); letter-spacing: .01em;
  font-variant-numeric: tabular-nums; text-decoration: none; color: #fff;
  transition: color .2s var(--ease);
}
.back-phone:hover { color: var(--turf-lit); }
.back-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.link-light { color: var(--on-char); font-size: .6875rem; }
.link-light:hover { color: var(--turf-lit); }
.back-id { display: grid; justify-items: center; gap: 16px; width: fit-content; max-width: 100%; text-align: center; }
/* wide engraved caps, like the logo's own "lawn & landscape" line */
.back-hours {
  font-size: .75rem; font-stretch: 125%; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  line-height: 2; color: var(--on-char-2);
}
.back-bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px;
  margin-top: clamp(36px, 5vh, 52px); padding-top: 18px;
  border-top: 1px solid rgb(236 235 230 / .2);
}
.back-bar nav { display: flex; flex-wrap: wrap; gap: 0 26px; }
.back-bar a { font-size: .6875rem; text-decoration: none; color: var(--on-char); padding: 8px 0; }
.back-bar a:hover { color: var(--turf-lit); }

/* back to top: a thumb tab at the foot of the page edge */
.to-top {
  position: fixed; right: 0; bottom: 24px; z-index: 35;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  background: var(--ink); color: #fff;
  box-shadow: -4px 0 10px -4px rgb(0 0 0 / .35);
  opacity: 0; visibility: hidden; transform: translateX(12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s, width .3s var(--ease), background-color .2s var(--ease);
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:hover { width: 56px; background: #000; }
.to-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; transition: transform .3s var(--ease); }
.to-top:hover svg { transform: translateY(-3px); }

.back-legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 28px; margin-top: 16px; font-size: .8125rem; color: var(--on-char-2); }
.back-legal nav { display: flex; gap: 22px; }
.back-legal a { color: var(--on-char); text-underline-offset: 3px; }

/* ---------- mobile dock ---------- */

.dock { display: none; }

/* ---------- tablet & phone ---------- */

@media (max-width: 1023px) {
  .back { padding-bottom: calc(32px + 76px + env(safe-area-inset-bottom)); }
  .to-top { bottom: calc(86px + env(safe-area-inset-bottom)); }
  .dock {
    display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
    background: var(--stone); border-top: 2px solid var(--ink);
  }
  .dock .btn { min-height: 52px; padding: 0 10px; white-space: nowrap; letter-spacing: .04em; }

  .cover {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "index" "rev" "field" "tag";
  }
  .tag { margin-top: 18px; align-self: start; }
  .field-ashlar {
    min-height: 0; height: clamp(200px, 48vw, 380px);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas:
      "a a b c";
  }
  .s-d, .s-e, .s-f, .s-g { display: none; }

  .year-head { grid-template-columns: 1fr; }
  .year-note { margin-left: 0; }

  .spread, .spread.flip { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .spread.flip .page-photos { order: 0; }
  .page-photos::before { display: none; }
  .page-photos .stones { min-height: 0; grid-auto-rows: minmax(150px, auto); }
  .bond-running { grid-template-rows: 220px 220px; }
  .bond-basket, .bond-ashlar, .bond-stack { grid-template-rows: 220px auto; }
  .stone-quote { min-height: 180px; }

  .area { grid-column: 1 / -1; }
  .back-top { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .tag-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body"; }
  .tag-stub { display: none; }
  /* reviews: one row of matching cards to swipe through */
  .courses { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .courses::-webkit-scrollbar { display: none; }
  .course, .course.offset { display: contents; }
  .courses .block { flex: 0 0 84%; scroll-snap-align: start; justify-content: flex-start; gap: 14px; background: var(--tag); color: var(--ink); }
  .courses .block::before { content: "\2605\2605\2605\2605\2605"; color: var(--gold); font-size: 1.125rem; letter-spacing: 3px; line-height: 1; }
  .courses .block p { font-size: 1.0625rem; }
  .courses .block footer { margin-top: auto; color: var(--ink-2); }
  .wall-swipe { display: block; }
  .seasons { margin-top: 32px; }
  .field-ashlar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a"; height: clamp(220px, 66vw, 340px); }
  .field-ashlar .s-b, .field-ashlar .s-c { display: none; }
  .tag-body, .tag-head { padding-left: 14px; padding-right: 14px; }
  .cover-reviews { flex-direction: column; align-items: flex-start; gap: 8px; }
  .tag-fields { grid-template-columns: 1fr; }
  .tag-picks { display: grid; grid-template-columns: 1fr 1fr; }
  .pick { font-stretch: 100%; letter-spacing: .03em; padding: 0 8px; gap: 7px; }
  .tag-done { grid-template-columns: 1fr; }
  .stamp { width: fit-content; }

  .field-ashlar figcaption { display: none; }
  .chart { min-width: 0; border-spacing: 2px 3px; }
  .chart thead th { font-size: .5625rem; letter-spacing: 0; }
  .chart thead .m-rest { display: none; }
  .chart tbody th { white-space: normal; width: 34%; padding-right: 8px; font-size: .8125rem; line-height: 1.3; }
  .chart tbody th .chip { display: none; }
  .chart td { min-width: 0; height: 22px; }
  .bond-running { grid-template-columns: 1fr 1fr; grid-template-rows: 200px auto 170px; grid-template-areas: "a a" "b b" "c d"; }
  .page-photos .stone-quote { min-height: 0; gap: 18px; }
  .bond-basket { grid-template-columns: 1fr 1fr; grid-template-rows: 240px auto; grid-template-areas: "a b" "c c"; }
  .bond-basket .b-d { display: none; }
  .bond-ashlar { grid-template-columns: 1fr 1fr; grid-template-rows: 190px 170px auto; grid-template-areas: "a a" "b d" "c c"; }
  .bond-stack { grid-template-columns: 1fr 1fr; grid-template-rows: 170px auto; }
  .plan { grid-template-columns: 1fr; }

  .wall { padding-top: 72px; }
  .course { flex-direction: column; }
  .course.offset { padding-left: 18px; }

  .back-bar nav { gap: 0 20px; }
  .back-hours { font-size: .6875rem; letter-spacing: .05em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}

/* ---------- homepage before & after ---------- */

.ba { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.7fr); align-items: center; gap: 28px clamp(28px, 4vw, 64px); padding: clamp(64px, 10vh, 112px) calc(var(--pad) + var(--rail)) clamp(64px, 10vh, 112px) var(--pad); }
.ba-copy h2 { font: 900 clamp(2.5rem, 5vw, 4.5rem)/.88 var(--display); text-transform: uppercase; margin-bottom: 16px; }
.ba-copy p { max-width: 36ch; color: var(--ink-2); margin-bottom: 18px; }
.ba-view { --pos: 50%; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--pv-3); touch-action: pan-y; }
.ba-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-view::after { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .25); pointer-events: none; }
.ba-view::before { content: "\2194"; position: absolute; z-index: 2; top: 50%; left: var(--pos); width: 48px; height: 48px; translate: -50% -50%; display: grid; place-items: center; background: #fff; color: var(--ink); font: 700 1.25rem/1 var(--sans); box-shadow: 0 4px 14px -4px rgb(0 0 0 / .5); pointer-events: none; }
.ba-tag { position: absolute; z-index: 1; left: 12px; top: 12px; padding: 6px 10px 5px; background: var(--ink); color: #fff; font-size: .6875rem; font-stretch: 125%; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; pointer-events: none; }
.ba-tag-after { left: auto; right: 12px; background: var(--turf-btn); }
.ba-range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.ba-view { cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.ba-view img { pointer-events: none; -webkit-user-drag: none; }
.ba-view:has(.ba-range:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (max-width: 1023px) { .ba { grid-template-columns: minmax(0, 1fr); } }

/* ---------- homepage where we work ---------- */

.where { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 24px clamp(28px, 4vw, 64px); align-items: start; padding: clamp(64px, 10vh, 112px) calc(var(--pad) + var(--rail)) clamp(64px, 10vh, 112px) var(--pad); }
.where h2 { font: 900 clamp(2.5rem, 5vw, 4.5rem)/.88 var(--display); text-transform: uppercase; margin-bottom: 16px; }
.where-copy p { max-width: 34ch; color: var(--ink-2); }
.where-copy a { color: var(--ink); text-underline-offset: 3px; }
@media (max-width: 1023px) { .where { grid-template-columns: minmax(0, 1fr); } }

/* form honeypot: hidden from people, filled by bots */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }