/* ============================================================
   Simply Spread — public site
   Depends on base.css for tokens, type and controls.
   ============================================================ */

/* ---- Announcement ---- */
.ss-announce {
  background: var(--clay);
  color: #fff;
  font-family: var(--font-ui);
  font-size: .875rem;
  text-align: center;
  padding: .6em 0;
}

/* ---- Utility bar: sits above the logo ---- */
.ss-utility {
  background: var(--soil-900);
  color: var(--soil-400);
  font-family: var(--font-ui);
  font-size: .8125rem;
}
.ss-utility-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); min-height: 2.5rem;
}
.ss-utility-tag { letter-spacing: .04em; text-transform: uppercase; font-size: .6875rem; font-weight: 600; }
.ss-utility-actions { display: flex; align-items: center; gap: var(--s-4); margin-left: auto; }
.ss-utility-link {
  display: inline-flex; align-items: center; gap: .4em;
  color: var(--bone-2); text-decoration: none; font-weight: 500;
  transition: color var(--t-fast) var(--ease-out);
}
.ss-utility-link:hover { color: #fff; }
.ss-icon--sm { width: 1rem; height: 1rem; }
.ss-btn--sm { font-size: .875rem; padding: .55em 1em; border-radius: var(--r-sm); }
@media (max-width: 52rem) {
  .ss-utility-tag { display: none; }
  .ss-utility-in { justify-content: center; }
  .ss-utility-actions { margin-left: 0; }
}

/* ---- Nav: a translucent layer content scrolls under ---- */
.ss-nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(249, 246, 240, .78);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  /* Scroll edge, not a permanent rule. The divider only exists once there is
     content passing underneath the bar — a hairline against nothing is chrome
     for its own sake. .is-scrolled is set by motion.js. */
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              background-color var(--t-base) var(--ease-out);
}
.ss-nav.is-scrolled {
  border-bottom-color: rgba(222, 213, 196, .7);
  background: rgba(249, 246, 240, .86);
  box-shadow: 0 1px 16px rgba(21, 17, 13, .06);
}
.ss-nav-in { display: flex; align-items: center; gap: var(--s-5); min-height: 4.6rem; }

.ss-logo {
  display: inline-flex; align-items: center; gap: .55em;
  text-decoration: none; color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.125rem; letter-spacing: -.022em;
  white-space: nowrap;
}
.ss-logo-mark { display: block; width: 1.75rem; height: 1.75rem; color: var(--green-deep); }
.ss-logo-mark svg { width: 100%; height: 100%; }

.ss-nav-links { display: flex; align-items: center; gap: var(--s-5); margin-left: auto; }
.ss-nav-links a {
  font-family: var(--font-ui); font-size: .9375rem; font-weight: 500;
  color: var(--ink-2); text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
.ss-nav-links a:hover { color: var(--ink); }
.ss-nav-cta { margin-left: var(--s-2); }
.ss-nav-toggle { display: none; margin-left: auto; padding: .5rem; color: var(--ink); }

.ss-mobile-nav { border-top: 1px solid var(--rule-soft); background: var(--bone); }
.ss-mobile-nav nav { display: flex; flex-direction: column; padding: var(--s-3) var(--s-5) var(--s-5); }
.ss-mobile-nav a {
  font-family: var(--font-ui); font-size: 1.0625rem; font-weight: 500;
  color: var(--ink); text-decoration: none;
  padding: .85em 0; border-bottom: 1px solid var(--rule-soft);
}
.ss-mobile-nav a:last-child { border-bottom: 0; }

@media (max-width: 60rem) {
  .ss-nav-links, .ss-nav-cta { display: none; }
  .ss-nav-toggle { display: block; }
}

/* ============================================================
   Hero — a soil profile.

   The whole business is about what is under the surface, so the
   hero IS a cross-section: turf, thin organic layer, the
   compacted clay that causes the problem, then subsoil. Depth
   marks run down the right edge like a field survey.

   This is also the honest answer to having no photography yet.
   Rather than a placeholder, the empty state is the design — and
   when Jay's hero photo lands it simply sits on top and the
   strata become its backing.
   ============================================================ */
.ss-hero { position: relative; background: var(--soil-900); color: var(--bone); overflow: hidden; }
.ss-hero-media { position: absolute; inset: 0; }
.ss-hero-media .ss-photo { width: 100%; height: 100%; object-fit: cover; }

/* Legibility wash. Heavier at the bottom where the copy sits. */
.ss-hero-media::after {
  content: ""; position: absolute; inset: 0;
  /* Neutral, very slightly cool. The previous wash was a warm brown-black
     which cast visibly orange over green turf. */
  background:
    linear-gradient(to top, rgba(10,12,11,.94) 0%, rgba(10,12,11,.72) 42%, rgba(10,12,11,.40) 78%, rgba(10,12,11,.52) 100%);
}

.ss-hero-body {
  position: relative;
  padding-block: clamp(var(--s-8), 14vw, 11rem);
  display: flex; align-items: flex-end;
  min-height: min(82vh, 46rem);
}
.ss-hero-eyebrow { color: var(--green); }
.ss-hero h1 { color: var(--bone); max-width: 15ch; }
.ss-hero-lead { color: rgba(249,246,240,.84); max-width: 44ch; margin-top: var(--s-4); }
.ss-hero-cta { margin-top: var(--s-6); }
.ss-hero .ss-cta-note { color: rgba(249,246,240,.62); }
.ss-hero .ss-cta-note a { color: rgba(249,246,240,.92); }

/* The strata themselves. Hard-stop gradient = geological banding. */
.ss-strata {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    #3F7D36 0%,   #3F7D36 3.5%,     /* turf canopy */
    #24301C 3.5%, #24301C 7%,       /* thatch */
    #2B1F15 7%,   #33241a 17%,      /* thin organic layer */
    #3B2A1C 17%,  #3B2A1C 31%,      /* what topsoil is left */
    #6E3720 31%,  #7A3C22 55%,      /* THE COMPACTED CLAY — the problem */
    #8B4526 55%,  #6A3620 78%,      /* subsoil */
    #4A2718 78%,  #2A1710 100%      /* parent material */
  );
}

/* Aggregate speckle, so the bands read as material rather than as a chart. */
.ss-strata-grain {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 17% 34%, rgba(255,240,220,.14) 0 1.5px, transparent 2px),
    radial-gradient(circle at 63% 61%, rgba(255,240,220,.10) 0 1px,   transparent 1.5px),
    radial-gradient(circle at 41% 82%, rgba(0,0,0,.34)      0 2.5px, transparent 3px),
    radial-gradient(circle at 86% 22%, rgba(0,0,0,.28)      0 1.5px, transparent 2px),
    radial-gradient(circle at 29% 51%, rgba(0,0,0,.22)      0 2px,   transparent 2.5px);
  background-size: 47px 47px, 71px 71px, 93px 93px, 59px 59px, 113px 113px;
  opacity: .55;
  mix-blend-mode: overlay;
}

/* A compaction seam: the dense plate roots cannot get through. */
.ss-strata-seam {
  position: absolute; left: 0; right: 0; top: 31%;
  height: 2px;
  background: linear-gradient(to right,
    rgba(255,225,190,0) 0%, rgba(255,225,190,.5) 18%,
    rgba(255,225,190,.5) 82%, rgba(255,225,190,0) 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

/* Depth scale down the right edge — a soil survey, not decoration. */
.ss-depths {
  position: absolute; top: 0; bottom: 0; right: clamp(.75rem, 3vw, 2.5rem);
  width: 5.5rem;
  display: flex; flex-direction: column;
  font-family: var(--font-ui);
  font-size: .625rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: rgba(255,245,232,.5);
  pointer-events: none;
}
.ss-depth {
  position: absolute; right: 0;
  display: flex; align-items: center; gap: .5rem;
  white-space: nowrap;
}
.ss-depth::before {
  content: ""; width: 1.75rem; height: 1px;
  background: rgba(255,245,232,.34);
}
.ss-depth b { font-weight: 700; color: rgba(255,245,232,.82); }
.ss-depth--key { color: rgba(255,225,190,.92); }
.ss-depth--key::before { background: rgba(255,225,190,.7); width: 2.5rem; }

@media (max-width: 44rem) { .ss-depths { display: none; } }

/* When a real photo exists the strata sit behind it, dimmed. */
/* Once a real photo is in, the strata are just a brown cast behind it — the
   photo is doing the work. Depth marks stay as a faint signature. */
.ss-hero-media:has(img) .ss-strata,
.ss-hero-media:has(img) .ss-strata-grain,
.ss-hero-media:has(img) .ss-strata-seam { display: none; }
.ss-hero-media:has(img) .ss-depths { opacity: .28; }

/* ---- Photo slots ---- */
.ss-photo { width: 100%; border-radius: var(--r-lg); background: var(--bone-3); }
.ss-photo--empty {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  border-radius: var(--r-lg);
}
.ss-photo--soil  { background: linear-gradient(152deg, #2A2018 0%, #191410 55%, #35291D 100%); }
.ss-photo--green { background: linear-gradient(152deg, #2E4A28 0%, #1B2C18 60%, #3B5C33 100%); }
/* In the hero the strata ARE the empty state, so the generic placeholder
   panel steps aside rather than painting over them. The admin "photo needed"
   note still shows. */
.ss-hero .ss-photo--empty { border-radius: 0; height: 100%; background: none; }
.ss-hero .ss-photo--empty .ss-photo-grain { display: none; }

/* A faint soil-grain texture so an empty slot reads as material, not as a
   missing image. Pure CSS — no asset, no request. */
.ss-photo-grain {
  position: absolute; inset: -20%;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.05) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.04) 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 45% 85%, rgba(0,0,0,.10) 0 2px, transparent 2px),
    radial-gradient(circle at 85% 15%, rgba(0,0,0,.08) 0 1px, transparent 1px);
  background-size: 42px 42px, 67px 67px, 91px 91px, 53px 53px;
  opacity: .8;
}
.ss-photo-note {
  position: relative;
  font-family: var(--font-ui); font-size: .75rem; font-weight: 600;
  color: rgba(255,255,255,.9); background: rgba(0,0,0,.42);
  border: 1px dashed rgba(255,255,255,.4); border-radius: var(--r-sm);
  padding: .5em .75em; margin: var(--s-4); text-align: center; max-width: 30ch;
}
.ss-photo-note em { display: block; font-weight: 400; font-style: normal; opacity: .75; margin-top: .3em; }

/* ---- Credential strip ---- */
.ss-credstrip { background: var(--soil-800); color: var(--bone-2); }
.ss-credstrip-in {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-3) var(--s-6); padding-block: var(--s-4);
  font-family: var(--font-ui); font-size: .875rem;
}
.ss-cred { display: inline-flex; align-items: center; gap: .5em; color: var(--bone-2); }
.ss-cred .ss-icon { color: var(--green); }

/* ---- The soil argument ---- */
.ss-argument h2 { max-width: 22ch; }
.ss-prose { font-size: 1.0625rem; }
.ss-prose p { max-width: 66ch; }
.ss-signature {
  font-family: var(--font-ui); font-size: .875rem; font-weight: 600;
  color: var(--ink-3); margin-top: var(--s-5);
}

/* ---- Service cards ---- */
.ss-card--service { display: flex; flex-direction: column; height: 100%; }
.ss-card--service .ss-small { flex: 1; color: var(--ink-2); }
.ss-card-more {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-ui); font-size: .8125rem; font-weight: 600;
  color: var(--green-deep); margin-top: var(--s-4);
}
.ss-card-more .ss-icon { transition: transform var(--t-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  a.ss-card:hover .ss-card-more .ss-icon { transform: translateX(3px); }
}

/* ---- Pillars ---- */
.ss-pillar-icon {
  display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: var(--r-md);
  background: var(--green-tint); color: var(--green-dark);
  margin-bottom: var(--s-4);
}
.ss-pillar p { color: var(--ink-2); }

/* ---- Steps ---- */
.ss-step-n {
  display: block;
  font-family: var(--font-ui); font-size: .8125rem; font-weight: 700;
  letter-spacing: .1em; color: var(--green);
  margin-bottom: var(--s-3);
}
.ss-section--dark .ss-step p { color: var(--soil-400); }

/* ---- Before/after teaser ---- */
.ss-ba-teaser { display: grid; gap: var(--s-4); }
@media (min-width: 40rem) { .ss-ba-teaser { grid-template-columns: 1fr 1fr; } }

/* ---- Seasonal ---- */
.ss-season-card {
  background: var(--soil-900); color: var(--bone-2);
  border-radius: var(--r-xl); padding: var(--s-6);
}
.ss-season-card h3 { color: var(--bone); }
.ss-season-list { margin: 0; }
.ss-season-list dt {
  font-family: var(--font-ui); font-size: .75rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--green); margin-top: var(--s-4);
}
.ss-season-list dd { margin: .35em 0 0; font-size: .9375rem; color: var(--soil-400); }

/* ---- Town list ---- */
.ss-town-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.ss-town-list a {
  display: block; padding: .85em 1em;
  background: #fff; border: 1px solid var(--rule-soft); border-radius: var(--r-md);
  font-family: var(--font-ui); font-size: .9375rem; font-weight: 500;
  color: var(--ink); text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ss-town-list a:hover { border-color: var(--green); transform: translateY(-1px); }
}
.ss-town-list a:active { border-color: var(--green); }

/* ---- FAQ ---- */
.ss-faq { border-top: 1px solid var(--rule); }
.ss-faq-item { border-bottom: 1px solid var(--rule); }
.ss-faq-item summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem;
  letter-spacing: -.008em;
}
.ss-faq-item summary::-webkit-details-marker { display: none; }
.ss-faq-mark { flex: 0 0 auto; margin-top: .15em; color: var(--green-deep); transition: transform var(--t-base) var(--ease-out); }
.ss-faq-item[open] .ss-faq-mark { transform: rotate(45deg); }
.ss-faq-body { padding-bottom: var(--s-4); }
.ss-faq-body p { max-width: 68ch; color: var(--ink-2); margin: 0; }

/* ---- Owner ---- */
.ss-owner-photo .ss-photo { border-radius: var(--r-xl); }
.ss-limitation {
  border-left: 3px solid var(--clay);
  padding-left: var(--s-4);
  font-style: italic; color: var(--ink-2);
}

/* ---- Quotes ---- */
.ss-quote { margin: 0; background: #fff; border: 1px solid var(--rule-soft); border-radius: var(--r-lg); padding: var(--s-5); }
.ss-quote-claim { font-size: 1.0625rem; margin-bottom: var(--s-3); }
.ss-quote blockquote { margin: 0; color: var(--ink-2); font-size: .9375rem; }
.ss-quote figcaption {
  margin-top: var(--s-4); font-family: var(--font-ui);
  font-size: .8125rem; font-weight: 600; color: var(--ink-3);
}

/* ---- Closing ---- */
.ss-closing-title { max-width: 18ch; margin-inline: auto; }
.ss-closing .ss-hero-cta { display: inline-block; }

/* ---- Steps list (confirmation copy) ---- */
.ss-steps-list { counter-reset: ss; list-style: none; padding: 0; }
.ss-steps-list li {
  counter-increment: ss; position: relative;
  padding-left: 2.25rem; margin-bottom: var(--s-3);
}
.ss-steps-list li::before {
  content: counter(ss);
  position: absolute; left: 0; top: .1em;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--green-tint); color: var(--green-dark);
  display: grid; place-items: center;
  font-family: var(--font-ui); font-size: .75rem; font-weight: 700;
}

/* ---- Footer ---- */
.ss-footer { background: var(--soil-900); color: var(--soil-400); padding-block: var(--s-8) var(--s-5); margin-top: 0; }
.ss-footer-top { display: grid; gap: var(--s-6); }
@media (min-width: 48rem) { .ss-footer-top { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-7); } }
.ss-footer .ss-logo { color: var(--bone); }
.ss-footer-brand p { max-width: 34ch; margin-top: var(--s-4); }
.ss-footer .ss-footer-h { color: var(--bone); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--s-4); }
.ss-footer-list { list-style: none; padding: 0; margin: 0; }
.ss-footer-list li { margin-bottom: .55em; }
.ss-footer-list a { color: var(--soil-400); text-decoration: none; font-family: var(--font-ui); font-size: .875rem; }
.ss-footer-list a:hover { color: var(--bone); }
.ss-footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  justify-content: space-between; align-items: center;
  border-top: 1px solid rgba(148,130,109,.22);
  margin-top: var(--s-7); padding-top: var(--s-5);
}
.ss-footer-bottom a { color: var(--soil-400); }

/* ---- Sticky mobile bar ---- */
.ss-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none; gap: 1px;
  background: rgba(222,213,196,.5);
  border-top: 1px solid var(--rule);
  padding-bottom: env(safe-area-inset-bottom);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}
.ss-sticky-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2em;
  padding: .7em .5em; background: rgba(249,246,240,.92);
  font-family: var(--font-ui); font-size: .75rem; font-weight: 600;
  color: var(--ink); text-decoration: none; min-height: 3.5rem;
  transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.ss-sticky-btn:active { transform: scale(.97); }
.ss-sticky-btn--cta { flex: 1.4; background: var(--clay); color: #fff; font-size: .875rem; }
.ss-sticky-btn--cta:hover, .ss-sticky-btn--cta:active { color: #fff; }
@media (max-width: 48rem) {
  .ss-sticky { display: flex; }
  body { padding-bottom: 3.5rem; }
}

/* ---- Reduced transparency: make frosted layers solid ---- */
@media (prefers-reduced-transparency: reduce) {
  .ss-nav, .ss-sticky { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bone); }
  .ss-sticky-btn { background: var(--bone); }
  .ss-sticky-btn--cta { background: var(--clay); }
}
@media (prefers-contrast: more) {
  .ss-nav { background: var(--bone); border-bottom-color: var(--soil-700); }
  .ss-card { border-color: var(--soil-600); }
}

/* ============================================================
   Quote form
   ============================================================ */
.ss-quote-hero { padding-top: clamp(var(--s-6), 6vw, var(--s-8)); }
.ss-quote-hero h1 { max-width: 18ch; }
.ss-quote-hero .ss-lead { max-width: 58ch; }

.ss-qcard {
  background: #fff;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-xl);
  padding: clamp(var(--s-5), 4vw, var(--s-7));
  margin-top: var(--s-6);
  box-shadow: var(--shadow-1);
}

.ss-qform { margin: 0; }
.ss-qstep { border: 0; padding: 0; margin: 0; min-width: 0; }
.ss-qstep + .ss-qstep { margin-top: var(--s-7); padding-top: var(--s-7); border-top: 1px solid var(--rule-soft); }
/* Once JS takes over, only one step shows at a time and the rules go away. */
.ss-qform--stepped .ss-qstep + .ss-qstep { margin-top: 0; padding-top: 0; border-top: 0; }

.ss-qstep-title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 700; letter-spacing: -.018em; line-height: 1.15;
  padding: 0; margin: 0 0 var(--s-2);
}
.ss-qstep-sub { color: var(--ink-2); font-size: .9375rem; margin-bottom: var(--s-5); max-width: 56ch; }

.ss-field-row { display: grid; gap: var(--s-4); }
@media (min-width: 34rem) {
  .ss-field-row { grid-template-columns: 1fr 1fr; }
  .ss-field-row:has(.ss-field--zip) { grid-template-columns: 1fr 9rem; }
}
.ss-optional { font-weight: 500; color: var(--ink-3); font-size: .8125rem; }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.ss-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ss-file { padding: .7em; background: var(--bone-2); }
.ss-file-list { list-style: none; padding: 0; margin: var(--s-3) 0 0; }
.ss-file-list li {
  font-family: var(--font-ui); font-size: .8125rem; color: var(--ink-2);
  padding: .35em 0; border-bottom: 1px solid var(--rule-soft);
}

.ss-choice--consent { align-items: flex-start; background: var(--bone-2); border-color: var(--rule); }
.ss-consent-text { font-size: .8125rem; line-height: 1.55; color: var(--ink-2); }

/* ---- Progress ---- */
.ss-qprogress { margin-bottom: var(--s-6); }
.ss-qprogress-bar { height: 3px; background: var(--bone-3); border-radius: 999px; overflow: hidden; }
.ss-qprogress-bar span {
  /* Full width, scaled down — animating width would trigger layout and paint
     on every frame; scaleX runs on the GPU. transform-origin keeps it growing
     from the left rather than the centre. */
  display: block; height: 100%; width: 100%;
  transform: scaleX(0.25); transform-origin: left center;
  background: var(--green); border-radius: 999px;
  transition: transform var(--t-slow) var(--ease-out);
}
.ss-qprogress-label {
  font-family: var(--font-ui); font-size: .75rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); margin: var(--s-3) 0 0;
}

/* ---- Step nav ---- */
.ss-qnav { display: flex; gap: var(--s-3); margin-top: var(--s-6); }
.ss-qnav [data-ss-next] { margin-left: auto; }
.ss-qnav [data-ss-back][hidden] { display: none; }

.ss-qerror {
  background: #FDF0EE; border: 1px solid rgba(178,58,43,.3);
  color: #8E2F22; border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4);
  font-family: var(--font-ui); font-size: .9375rem;
}
.ss-qerror--page { margin-top: var(--s-5); }

/* ---- Confirmation ---- */
.ss-qdone {
  background: #fff; border: 1px solid var(--rule-soft); border-left: 4px solid var(--green);
  border-radius: var(--r-lg); padding: clamp(var(--s-5), 4vw, var(--s-6));
}
.ss-qdone:focus { outline: none; }
.ss-qdone h2 { margin-bottom: var(--s-3); }
.ss-qdone h3 { font-size: 1rem; margin-top: var(--s-5); }
.ss-qdone--page { margin-top: var(--s-5); }

/* ---- Aside ---- */
.ss-qaside {
  margin-top: var(--s-7); padding-top: var(--s-6);
  border-top: 1px solid var(--rule);
}
.ss-qaside h2 { font-size: 1.25rem; }
.ss-qaside ul { padding-left: 1.1em; }
.ss-qaside li { margin-bottom: .5em; color: var(--ink-2); }
.ss-qaside strong { color: var(--ink); }

/* ============================================================
   Modal — a dimmed, focused task, so the background is pushed
   back rather than left competing for attention.
   ============================================================ */
.ss-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--s-4); }
.ss-modal[hidden] { display: none; }
.ss-modal-scrim { position: absolute; inset: 0; background: rgba(21,17,13,.55); backdrop-filter: blur(3px); }
.ss-modal-panel {
  position: relative;
  width: min(42rem, 100%);
  max-height: min(90vh, 54rem);
  display: flex; flex-direction: column;
  background: var(--bone);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.ss-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--rule-soft);
  background: rgba(249,246,240,.85);
  backdrop-filter: blur(12px);
}
.ss-modal-head h2 { margin: 0; font-size: 1.25rem; }
.ss-modal-close {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: var(--r-sm); color: var(--ink-2);
  transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.ss-modal-close:hover { background: var(--bone-3); color: var(--ink); }
.ss-modal-close:active { transform: scale(.94); }
.ss-modal-body { padding: var(--s-5); overflow-y: auto; -webkit-overflow-scrolling: touch; }
body.ss-modal-open { overflow: hidden; }

@media (max-width: 40rem) {
  .ss-modal { padding: 0; align-items: flex-end; }
  .ss-modal-panel { max-height: 92vh; border-radius: var(--r-xl) var(--r-xl) 0 0; width: 100%; }
}
@media (prefers-reduced-transparency: reduce) {
  .ss-modal-scrim { backdrop-filter: none; background: rgba(21,17,13,.75); }
  .ss-modal-head { backdrop-filter: none; background: var(--bone); }
}

/* ============================================================
   Interior pages
   ============================================================ */
.ss-crumbs {
  font-family: var(--font-ui); font-size: .8125rem; color: var(--ink-3);
  margin-bottom: var(--s-4); display: flex; gap: .5em; align-items: center;
}
.ss-crumbs a { color: var(--ink-3); text-decoration: none; }
.ss-crumbs a:hover { color: var(--green-deep); }

.ss-svc-media { margin-bottom: var(--s-6); }
.ss-svc-head h1 { max-width: 20ch; }

/* Scope vs exclusions, side by side — publishing both is the point. */
.ss-scope { display: grid; gap: var(--s-6); }
@media (min-width: 54rem) { .ss-scope { grid-template-columns: 1fr 1fr; gap: var(--s-7); } }
.ss-scope-col h2 { font-size: 1.25rem; }
.ss-scope-col--out h2 { color: var(--clay-deep); }

.ss-ticks, .ss-crosses { list-style: none; padding: 0; margin: var(--s-4) 0 0; }
.ss-ticks li, .ss-crosses li {
  display: flex; gap: .7em; align-items: flex-start;
  padding: .5em 0; font-size: .9375rem; line-height: 1.55;
}
.ss-ticks .ss-icon { color: var(--green-deep); margin-top: .25em; }
.ss-crosses .ss-icon { color: var(--clay); margin-top: .25em; }

.ss-timing {
  background: var(--bone-2); border-radius: var(--r-lg);
  padding: var(--s-5); margin-top: var(--s-6);
}
.ss-timing h3 { display: flex; align-items: center; gap: .5em; font-size: 1rem; margin-bottom: var(--s-2); }
.ss-timing h3 .ss-icon { color: var(--green-deep); }
.ss-timing p { margin: 0; }

/* Services list */
.ss-svc-list { display: grid; gap: var(--s-6); }
.ss-svc-item { display: grid; gap: var(--s-4); align-items: center; padding-bottom: var(--s-6); border-bottom: 1px solid var(--rule); }
.ss-svc-item:last-child { border-bottom: 0; }
@media (min-width: 54rem) {
  .ss-svc-item { grid-template-columns: 1.3fr 1fr; gap: var(--s-7); }
  .ss-svc-item:nth-child(even) .ss-svc-item-media { order: -1; }
}
.ss-svc-item h2 { font-size: clamp(1.375rem, 2.6vw, 1.875rem); margin-bottom: var(--s-3); }
.ss-svc-item h2 a { color: inherit; text-decoration: none; }
.ss-svc-item h2 a:hover { color: var(--green-deep); }
.ss-svc-when {
  display: flex; align-items: flex-start; gap: .5em;
  font-family: var(--font-ui); font-size: .8125rem; color: var(--ink-3);
  margin-top: var(--s-3);
}
.ss-svc-when .ss-icon { margin-top: .15em; color: var(--green-deep); }

/* Big numbered steps */
.ss-steps-big { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-6); }
@media (min-width: 54rem) { .ss-steps-big { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.ss-steps-big li { border-top: 2px solid var(--green); padding-top: var(--s-4); }
.ss-steps-big h2 { font-size: 1.25rem; margin-bottom: var(--s-3); }
.ss-steps-big p { color: var(--ink-2); font-size: .9375rem; }

.ss-cred-line { font-family: var(--font-ui); font-weight: 600; color: var(--green-dark); }

/* Service area */
.ss-area-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.ss-area-card h2 { font-size: 1.125rem; margin-bottom: var(--s-1); }
.ss-area-card .ss-eyebrow { margin-bottom: var(--s-3); }
.ss-area-card .ss-small { color: var(--ink-2); }

/* Before/after comparison */
.ss-compare { margin: 0; }
.ss-compare-frame {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); background: var(--soil-800);
  touch-action: pan-y;   /* let vertical scrolling through, capture horizontal */
  cursor: ew-resize;
}
.ss-compare-frame img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.ss-compare-before-wrap {
  position: absolute; inset: 0; width: 50%;
  overflow: hidden;
}
.ss-compare-before-wrap img { position: absolute; top: 0; left: 0; height: 100%; width: auto; max-width: none; }
.ss-compare-label {
  position: absolute; bottom: var(--s-3);
  font-family: var(--font-ui); font-size: .6875rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  background: rgba(21,17,13,.66); color: #fff;
  padding: .3em .6em; border-radius: 999px;
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.ss-compare-label--before { left: var(--s-3); }
.ss-compare-label--after { right: var(--s-3); }
.ss-compare-handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; background: rgba(255,255,255,.9);
  transform: translateX(-1px); pointer-events: none;
  box-shadow: 0 0 0 1px rgba(21,17,13,.25);
}
.ss-compare-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 2.25rem; height: 2.25rem; transform: translate(-50%, -50%);
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-2);
}
/* The native range stays present and operable — it is what makes this
   keyboard accessible — but is visually replaced by the handle above. */
.ss-compare-range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: ew-resize;
}
.ss-compare-range:focus-visible { opacity: 0; }
.ss-compare-frame:focus-within .ss-compare-handle::after { outline: 3px solid var(--green); outline-offset: 2px; }
.ss-compare figcaption { font-family: var(--font-ui); font-size: .8125rem; color: var(--ink-3); margin-top: var(--s-3); }

.ss-ba-pending {
  background: var(--bone-2); border: 1px dashed var(--rule);
  border-radius: var(--r-lg); padding: var(--s-6);
}
.ss-ba-pending h2 { font-size: 1.25rem; }

/* Legal */
.ss-legal .ss-prose h2 { font-size: 1.25rem; margin-top: var(--s-6); }

/* ---- Touch targets ------------------------------------------
   On a phone these are thumb targets, not mouse targets. Anything
   interactive gets at least ~44px of height even where the text
   itself is small. -------------------------------------------- */
@media (max-width: 48rem) {
  .ss-utility-in { min-height: 2.75rem; }
  .ss-utility-link { padding-block: .7rem; min-height: 2.75rem; }
  .ss-nav-toggle { min-width: 2.75rem; min-height: 2.75rem; display: grid; place-items: center; }
  .ss-nav-in { min-height: 3.75rem; }
  .ss-logo { padding-block: .45rem; }
  .ss-footer-list a { display: inline-block; padding-block: .35rem; }
  .ss-crumbs a { padding-block: .3rem; }
}

/* ============================================================
   Carrying the profile through
   The hero establishes strata as the brand's visual language.
   These reuse it at smaller scale so the page reads as one idea
   rather than a hero with a generic site attached.
   ============================================================ */

/* A core-sample edge on service cards: the same four layers, 3px tall. */
.ss-card--service {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--s-5) + 3px);
}
.ss-card--service::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(to right,
    #3F7D36 0%, #3F7D36 14%,
    #3B2A1C 14%, #3B2A1C 38%,
    #7A3C22 38%, #7A3C22 74%,
    #8B4526 74%, #8B4526 100%);
  opacity: .55;
  transform-origin: left center;
  transition: opacity var(--t-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  a.ss-card--service:hover::before { opacity: 1; }
}
a.ss-card--service:active::before { opacity: 1; }

/* Empty photo slots elsewhere become shallow core samples rather than
   flat panels, so a page without photography still looks authored. */
.ss-photo--empty.ss-photo--soil {
  background: linear-gradient(
    to bottom,
    #3F7D36 0%,   #3F7D36 4%,
    #24301C 4%,   #24301C 9%,
    #2B1F15 9%,   #33241a 22%,
    #3B2A1C 22%,  #3B2A1C 38%,
    #6E3720 38%,  #7A3C22 62%,
    #8B4526 62%,  #6A3620 82%,
    #4A2718 82%,  #2A1710 100%
  );
}
.ss-photo--empty.ss-photo--green {
  background: linear-gradient(to bottom,
    #4E9A44 0%, #3F7D36 26%, #2E5A28 62%, #1B2C18 100%);
}

/* The compaction seam, echoed on non-hero slots. */
.ss-photo--empty.ss-photo--soil::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 38%; height: 1px;
  background: linear-gradient(to right,
    rgba(255,225,190,0), rgba(255,225,190,.45) 20%,
    rgba(255,225,190,.45) 80%, rgba(255,225,190,0));
}

/* Card lift, gated on a real pointer. */
@media (hover: hover) and (pointer: fine) {
  a.ss-card:hover, .ss-card--link:hover {
    border-color: var(--bone-3);
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
  }
}
/* Touch gets the press instead of the lift. */
a.ss-card:active, .ss-card--link:active { transform: scale(.995); }

/* Eyebrows read as field annotations: tabular figures, wider tracking. */
.ss-eyebrow { font-variant-numeric: tabular-nums; }

/* ============================================================
   Reviews
   ============================================================ */
.ss-stars { display: inline-flex; gap: .1em; vertical-align: -.15em; }
.ss-star { width: 1rem; height: 1rem; fill: var(--bone-3); stroke: none; }
.ss-star.is-on { fill: #D9A21B; }

.ss-review-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.ss-review {
  margin: 0; background: #fff; border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg); padding: var(--s-5);
}
.ss-review-claim { font-size: 1.0625rem; margin: var(--s-3) 0 var(--s-2); }
.ss-review blockquote { margin: 0; color: var(--ink-2); font-size: .9375rem; }
.ss-review figcaption {
  margin-top: var(--s-4); font-family: var(--font-ui);
  font-size: .8125rem; font-weight: 600; color: var(--ink-3);
}
.ss-review-src { font-weight: 500; opacity: .8; }

/* Facebook attribution.
   Deliberately quiet: it is a credit line, not a Facebook advert sitting on
   top of someone's words. Meta blue only on the glyph, so the badge still
   reads as part of this site's type rather than a pasted-in social button. */
.ss-fb-badge {
  display: inline-flex; align-items: center; gap: .35em;
  font-family: var(--font-ui); font-size: .75rem; font-weight: 600;
  letter-spacing: .01em; color: var(--ink-3); white-space: nowrap;
}
.ss-fb-badge svg { width: 1em; height: 1em; fill: #1877F2; flex: none; }
.ss-review figcaption .ss-fb-badge { margin-left: .5em; }
.ss-fb-badge-link { text-decoration: none; border: 0; }
.ss-fb-badge-link:hover .ss-fb-badge { color: var(--ink); }
.ss-fb-badge-link:hover svg { opacity: .85; }
.ss-review-more { margin: var(--s-6) 0 0; text-align: center; }
.ss-review-more .ss-fb-badge { font-size: inherit; color: inherit; }

/* Rating input — a real radio group, styled. Reversed in the DOM so the CSS
   sibling selector can light up the chosen star and everything before it. */
.ss-rating-input { display: inline-flex; flex-direction: row-reverse; gap: .15em; }
.ss-rating-star input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ss-rating-star span { display: block; cursor: pointer; padding: .1em; }
.ss-rating-star svg { width: 2rem; height: 2rem; fill: var(--bone-3); transition: fill var(--t-fast) var(--ease-out); }
.ss-rating-star input:checked ~ span svg,
.ss-rating-star input:checked ~ span ~ span svg { fill: #D9A21B; }
.ss-rating-star:hover svg,
.ss-rating-star:hover ~ .ss-rating-star svg { fill: #E8BC4E; }
.ss-rating-input:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }
.ss-review-form { margin-top: var(--s-5); }

/* Uploaded logo. Height-capped so any aspect ratio sits correctly in the bar,
   and inverted contexts get the same treatment. */
/* Logo image.
   The supplied artwork is a badge on its own opaque dark plate, not a
   transparent mark. On the dark footer that is invisible and it simply works.
   In the cream nav the plate WILL read as a dark block whatever we do, so the
   job here is to make it look deliberate rather than like a pasted screenshot:
   give it real size so the wordmark is legible, round the plate to match the
   site's radius, and let it sit as a badge.

   Replacing this with a transparent PNG is the actual fix — see TODO-JAY.md.
   Nothing below needs changing when that lands; a transparent file just stops
   the plate being visible. */
.ss-logo--img { gap: 0; }
.ss-logo--img img {
  height: 2.9rem; width: auto; max-width: 15rem;
  object-fit: contain;
  border-radius: var(--r-sm);
}
.ss-footer .ss-logo--img img { height: 3.1rem; border-radius: 0; }
@media (max-width: 60rem) { .ss-logo--img img { height: 2.5rem; max-width: 12rem; } }
@media (max-width: 34rem) { .ss-logo--img img { height: 2.2rem; max-width: 10.5rem; } }