/* fonts.css is a sibling <link> in the document head now, not an @import here —
   see the comment in layouts/base.njk for why. */

/* =============================================================================
   Yaple Site Solutions — design tokens
   Evolution of the v2 palette, not a replacement. Pine, cream and ochre stay;
   ochre is rebuilt because it was failing accessibility on every page.
   ============================================================================= */

:root {
  /* --- Colour ---------------------------------------------------------------
     Greens and neutrals carried over from v2 unchanged — they measured well
     (body 13.79:1, headings 11.97:1) and they are what makes the brand legible
     as a landscaping company rather than a generic contractor. */
  --pine: #0e3320;
  --deep: #072e1c;
  --ink: #15251c;
  --cream: #f2eee3;
  --paper: #faf8f1;
  --line: #dad3c0;

  /* Ochre, rebuilt. v2 used a single #B07E24 everywhere, which measures 3.09:1
     on cream — below the 4.5:1 AA floor for normal text — and 3.59:1 under white
     button text. Every eyebrow, every "see more" link and the primary mobile CTA
     failed. These four were derived in OKLCH holding hue at 77.3deg and chroma at
     0.118, so they remain the same colour, only legal. Do not collapse them back
     into one value. */
  --ochre: #b07e24;          /* 3.09:1 on cream — accents, borders, >=24px display text ONLY */
  --ochre-text: #936300;     /* 4.50:1 on cream, 4.91:1 on paper — all small ochre text */
  --ochre-solid: #9e6d04;    /* 4.52:1 under white text — filled buttons */
  --ochre-on-dark: #bc8a33;  /* 4.51:1 on pine, 4.80:1 on deep — ochre text on dark grounds */

  /* Muted text, all AA-verified against their intended grounds. */
  --ink-soft: #4a5850;       /* 7.05:1 on paper */
  --ink-softer: #5a685e;     /* 5.53:1 on paper */
  --cream-soft: #dce5dc;     /* 11.50:1 on deep */
  --cream-softer: #c7d3c8;   /* 9.59:1 on deep */

  /* --- Type -----------------------------------------------------------------
     A modular scale at 1.25 (major third), fluid between 380px and 1240px
     viewports. v2 had ad-hoc clamps per element and a 16.5px base, which is why
     its vertical rhythm never quite settled. */
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.91rem);
  --step-0: clamp(1rem, 0.97rem + 0.17vw, 1.09rem);
  --step-1: clamp(1.19rem, 1.13rem + 0.30vw, 1.36rem);
  --step-2: clamp(1.41rem, 1.31rem + 0.50vw, 1.70rem);
  --step-3: clamp(1.68rem, 1.52rem + 0.80vw, 2.13rem);
  --step-4: clamp(2.00rem, 1.75rem + 1.24vw, 2.66rem);
  --step-5: clamp(2.37rem, 2.00rem + 1.86vw, 3.32rem);
  --step-6: clamp(2.82rem, 2.27rem + 2.75vw, 4.15rem);

  /* --- Space ----------------------------------------------------------------
     One 8px-derived rhythm used everywhere. Section padding is fluid so the page
     breathes on desktop without wasting a phone screen. */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-section: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);

  --measure: 62ch;
  --wrap: 1120px;
  --wrap-narrow: 760px;

  --radius-s: 6px;
  --radius: 12px;
  --radius-l: 18px;

  /* Shadows tinted with the brand green rather than neutral black — a black
     shadow on a warm cream ground reads as grey sludge. */
  --shadow-s: 0 1px 2px rgba(14, 51, 32, 0.06), 0 2px 6px rgba(14, 51, 32, 0.05);
  --shadow-m: 0 4px 12px rgba(14, 51, 32, 0.08), 0 12px 28px rgba(14, 51, 32, 0.07);
  --shadow-l: 0 8px 24px rgba(14, 51, 32, 0.10), 0 24px 56px rgba(14, 51, 32, 0.12);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 180ms;
}

/* =============================================================================
   Reset
   ============================================================================= */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sticky header would otherwise cover anchor targets. */
  scroll-padding-top: 5rem;
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* The <picture> element is a wrapper with no layout role of its own. Left as a normal
   box it breaks percentage heights on the <img> inside — height:100% resolves against
   the picture, which is content-sized, so object-fit:cover never receives a box to
   fill and the hero photo cuts off mid-element. display:contents removes the box and
   lets the img participate in the real container's layout. */
picture { display: contents; }

input, button, textarea, select { font: inherit; color: inherit; }

/* Respect the OS setting. Motion here is decoration; none of it carries meaning. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================================
   Typography
   ============================================================================= */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--pine);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: var(--step-6); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: var(--step-4); font-weight: 700; }
h3 { font-size: var(--step-2); font-weight: 700; line-height: 1.2; }
h4 { font-size: var(--step-1); font-weight: 700; }

p { text-wrap: pretty; max-width: var(--measure); }

a { color: var(--pine); text-underline-offset: 0.2em; }

strong { font-weight: 700; }

/* The eyebrow is the single most repeated use of ochre on the site, at ~0.8rem.
   It is exactly what was failing AA in v2, so it takes --ochre-text, never --ochre. */
.eyebrow {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ochre-text);
  margin-bottom: var(--space-xs);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 54ch;
}

/* On dark grounds the ochre must go the other way — lighter, not darker. */
.on-dark .eyebrow { color: var(--ochre-on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--cream); }
.on-dark p { color: var(--cream-soft); }

/* =============================================================================
   Layout
   ============================================================================= */

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }

.section { padding-block: var(--space-section); }
.section--tight { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }

.section-head { margin-bottom: var(--space-xl); max-width: 46ch; }

.stack > * + * { margin-top: var(--space-s); }
.stack-l > * + * { margin-top: var(--space-m); }

/* Visually hidden but available to screen readers and the accessibility tree. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-s);
  z-index: 200;
  background: var(--pine);
  color: var(--cream);
  padding: var(--space-xs) var(--space-s);
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  text-decoration: none;
  font-weight: 700;
}
.skip-link:focus { top: 0; }

/* =============================================================================
   Focus — one visible, consistent ring everywhere.
   ============================================================================= */

:focus-visible {
  outline: 3px solid var(--ochre-solid);
  outline-offset: 2px;
  border-radius: 2px;
}
.on-dark :focus-visible,
.site-footer :focus-visible { outline-color: var(--ochre-on-dark); }

/* =============================================================================
   Buttons
   ============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font-weight: 700;
  font-size: var(--step--1);
  line-height: 1;
  text-decoration: none;
  padding: 0.9em 1.5em;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  /* Comfortable thumb target on mobile. */
  min-height: 44px;
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--pine);
  color: var(--cream);
  border-color: var(--pine);
}
.btn--primary:hover { background: var(--deep); border-color: var(--deep); }

/* The one filled-ochre button. Uses --ochre-solid so white text clears 4.5:1;
   the v2 equivalent sat at 3.59:1. */
.btn--accent {
  background: var(--ochre-solid);
  color: #fff;
  border-color: var(--ochre-solid);
}
.btn--accent:hover { filter: brightness(0.92); }

.btn--ghost {
  background: transparent;
  color: var(--pine);
  border-color: currentColor;
}
.btn--ghost:hover { background: var(--pine); color: var(--cream); border-color: var(--pine); }

.btn--light {
  background: var(--cream);
  color: var(--pine);
  border-color: var(--cream);
}
.btn--light:hover { background: transparent; color: var(--cream); }

.btn--outline-light {
  background: transparent;
  color: var(--cream);
  border-color: rgba(242, 238, 227, 0.55);
}
.btn--outline-light:hover { border-color: var(--cream); background: rgba(242, 238, 227, 0.1); }

.btn-row {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  align-items: center;
}

/* =============================================================================
   Header
   ============================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: var(--space-2xs);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  text-decoration: none;
  flex-shrink: 0;
}
.brand img { height: 46px; width: auto; }
.brand span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step--1);
  color: var(--pine);
  line-height: 1.05;
  letter-spacing: 0.005em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  list-style: none;
  padding: 0;
}
.nav-links a {
  text-decoration: none;
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--ink);
  padding-block: var(--space-2xs);
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--ochre-text); }
.nav-links a[aria-current='page'] {
  color: var(--ochre-text);
  border-bottom-color: var(--ochre);
}

.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 0.5rem 0.7rem;
  color: var(--pine);
  cursor: pointer;
  min-height: 44px;
}

@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; align-items: center; }
  .nav-links {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    padding: var(--space-2xs) 1.25rem var(--space-s);
    box-shadow: var(--shadow-m);
  }
  .nav-links[data-open='true'] { display: flex; }
  .nav-links a { padding-block: var(--space-xs); border-bottom: 1px solid var(--line); }
  .nav .btn { display: none; }
}

/* =============================================================================
   Hero
   ============================================================================= */

.hero {
  position: relative;
  background: var(--deep);
  display: flex;
  align-items: flex-end;
  min-height: min(78vh, 720px);
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The subject of this photo — gravel, stone steps, shrub line — sits in the lower
     half of the frame; the top half is brick and sky. A default centred crop in a
     wide, short hero lands squarely on the roofline and shows none of the work.
     Biasing downward keeps the actual landscaping in shot at every viewport. */
  object-position: 50% 72%;
  /* Legibility now comes mostly from the gradient below, so the photo can sit
     brighter than v2's 0.55 and the work is actually visible. Raising this further
     means revisiting the hero quality delta in scripts/images.mjs. */
  opacity: 0.68;
}

/* Scrim. Horizontal rather than vertical: the copy sits bottom-left, so darkening
   the left keeps text legible while the right side of the photo stays open. A
   bottom-up gradient would have buried the gravel, which is the thing being sold. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(7, 46, 28, 0.70) 0%, rgba(7, 46, 28, 0.10) 45%, transparent 70%),
    linear-gradient(to right, rgba(7, 46, 28, 0.88) 0%, rgba(7, 46, 28, 0.66) 34%, rgba(7, 46, 28, 0.20) 72%, rgba(7, 46, 28, 0.10) 100%);
}

/* On narrow screens the copy spans the full width, so the horizontal scrim can no
   longer protect it — fall back to a vertical one. */
@media (max-width: 760px) {
  .hero__media::after {
    background: linear-gradient(to top, rgba(7, 46, 28, 0.90) 0%, rgba(7, 46, 28, 0.62) 45%, rgba(7, 46, 28, 0.35) 100%);
  }
}

.hero__panel {
  position: relative;
  z-index: 2;
  padding-block: clamp(4rem, 3rem + 8vw, 7rem) clamp(2.5rem, 2rem + 3vw, 4rem);
}

.hero h1 { color: var(--cream); max-width: 16ch; }
.hero__sub {
  color: var(--cream-soft);
  font-size: var(--step-1);
  max-width: 50ch;
  margin-block: var(--space-m) var(--space-l);
}

.hero__phone {
  color: var(--cream);
  font-weight: 700;
  font-size: var(--step-1);
  text-decoration: none;
  font-family: var(--font-display);
  padding: 0.5em 0;
}
.hero__phone:hover { color: var(--ochre-on-dark); }

.trust-chips {
  display: flex;
  gap: var(--space-2xs);
  flex-wrap: wrap;
  margin-top: var(--space-l);
  list-style: none;
  padding: 0;
}
.trust-chips li {
  background: rgba(242, 238, 227, 0.12);
  border: 1px solid rgba(242, 238, 227, 0.32);
  color: var(--cream);
  backdrop-filter: blur(4px);
  font-size: var(--step--2);
  font-weight: 600;
  padding: 0.45em 0.9em;
  border-radius: 999px;
}

/* Interior page hero — flat, no photo. */
.page-hero {
  background: var(--deep);
  padding-block: clamp(3rem, 2.5rem + 3vw, 5rem) clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
.page-hero h1 { color: var(--cream); max-width: 20ch; }
.page-hero p { color: var(--cream-soft); font-size: var(--step-1); margin-top: var(--space-m); }

/* =============================================================================
   Cards
   ============================================================================= */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-m);
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-m);
  border-color: var(--ochre);
}

.card__media { overflow: hidden; aspect-ratio: 4 / 3; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }

.card__body { padding: var(--space-m); display: flex; flex-direction: column; flex: 1; }
.card__body p { font-size: var(--step--1); color: var(--ink-soft); margin-top: var(--space-2xs); }

.card__go {
  margin-top: auto;
  padding-top: var(--space-s);
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--ochre-text);
}
.card:hover .card__go { color: var(--pine); }

/* =============================================================================
   Bands
   ============================================================================= */

.band-pine { background: var(--pine); }
.band-deep { background: var(--deep); }
.band-paper { background: var(--paper); border-block: 1px solid var(--line); }

.band-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
@media (max-width: 860px) { .band-split { grid-template-columns: 1fr; } }

.cta-band { text-align: center; }
.cta-band h2 { margin-inline: auto; max-width: 20ch; }
.cta-band p { margin: var(--space-s) auto var(--space-l); }
.cta-band .btn-row { justify-content: center; }

/* =============================================================================
   Forms
   ============================================================================= */

.field { display: block; margin-bottom: var(--space-s); }
.field > label { display: block; font-weight: 600; font-size: var(--step--1); margin-bottom: var(--space-3xs); }

input[type='text'], input[type='tel'], input[type='email'], select, textarea {
  width: 100%;
  padding: 0.8em 0.9em;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--paper);
  color: var(--ink);
  min-height: 44px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--ochre-solid); }
textarea { min-height: 7rem; resize: vertical; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s); }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.form-note { font-size: var(--step--1); color: var(--ink-softer); }

/* The honeypot. Must not be display:none — some bots skip hidden inputs, and some
   assistive tech would announce it. Positioned off-canvas and hidden from AT. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =============================================================================
   Footer
   ============================================================================= */

.site-footer {
  background: var(--deep);
  color: var(--cream-softer);
  padding-block: var(--space-2xl) var(--space-l);
  font-size: var(--step--1);
}
.site-footer h3 { color: var(--cream); font-size: var(--step-0); margin-bottom: var(--space-xs); }
.site-footer a { color: var(--cream-softer); text-decoration: none; }
.site-footer a:hover { color: var(--ochre-on-dark); text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li + li { margin-top: var(--space-3xs); }

.footer-cols {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}
@media (max-width: 1080px) { .footer-cols { grid-template-columns: 1.2fr 1fr 1fr; } }
@media (max-width: 900px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-cols { grid-template-columns: 1fr; gap: var(--space-l); } }

.footer-legal {
  border-top: 1px solid rgba(242, 238, 227, 0.14);
  padding-top: var(--space-m);
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  flex-wrap: wrap;
  font-size: var(--step--2);
  /* 5.38:1 on deep — verified, not eyeballed. */
  color: #8fa093;
}

/* =============================================================================
   Sticky mobile action bar
   ============================================================================= */

.action-bar {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  gap: var(--space-2xs);
  background: var(--deep);
  padding: var(--space-2xs) var(--space-xs);
  padding-bottom: calc(var(--space-2xs) + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.28);
}
.action-bar .btn { flex: 1; }

@media (max-width: 900px) {
  .action-bar { display: flex; }
  body { padding-bottom: 5rem; }
}

/* =============================================================================
   Motion — reveal on scroll. JS adds .is-in; without JS everything is visible,
   because content must never depend on a script to be readable.
   ============================================================================= */

.reveal { opacity: 1; }

.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* Staggered reveal in grids and step lists — a flat cascade rather than every card
   arriving at once. Capped at four steps so a long grid doesn't make the fifth card
   wait needlessly; delay is on top of the shared 600ms transition above. */
.js .card-grid > .reveal:nth-child(2) { transition-delay: 80ms; }
.js .card-grid > .reveal:nth-child(3) { transition-delay: 160ms; }
.js .card-grid > .reveal:nth-child(4) { transition-delay: 240ms; }
.js .card-grid > .reveal:nth-child(n + 5) { transition-delay: 320ms; }

.js .steps-list > .reveal:nth-child(2) { transition-delay: 100ms; }
.js .steps-list > .reveal:nth-child(3) { transition-delay: 200ms; }
.js .steps-list > .reveal:nth-child(n + 4) { transition-delay: 300ms; }

/* Hero entrance — pure CSS, no JS or IntersectionObserver dependency. The hero is
   above the fold on load, so the scroll-reveal system above (which needs a scroll
   event to fire) never applies to it; this plays once on load instead. Content stays
   in the DOM and reachable throughout, so a failed/slow animation never hides it. */
.hero__panel > .eyebrow,
.hero__panel > h1,
.hero__panel > .hero__sub,
.hero__panel > .btn-row,
.hero__panel > .trust-chips {
  animation: hero-in 700ms var(--ease) both;
}
.hero__panel > .eyebrow { animation-delay: 0ms; }
.hero__panel > h1 { animation-delay: 90ms; }
.hero__panel > .hero__sub { animation-delay: 180ms; }
.hero__panel > .btn-row { animation-delay: 270ms; }
.hero__panel > .trust-chips { animation-delay: 360ms; }

@keyframes hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* =============================================================================
   Breadcrumbs
   ============================================================================= */

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-s);
  font-size: var(--step--2);
}
.crumbs li + li::before { content: '/'; margin-right: var(--space-2xs); opacity: 0.5; }
.crumbs a { color: var(--cream-softer); text-decoration: none; }
.crumbs a:hover { color: var(--ochre-on-dark); text-decoration: underline; }
.crumbs [aria-current] { color: var(--cream); }

/* =============================================================================
   Check lists
   ============================================================================= */

.check { list-style: none; padding: 0; margin-top: var(--space-m); }
.check li {
  position: relative;
  padding: var(--space-3xs) 0 var(--space-3xs) 1.75rem;
  max-width: var(--measure);
}
/* A rotated square rather than a tick glyph — no font dependency, no emoji. */
.check li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.6em;
  height: 0.6em;
  background: var(--ochre);
  border-radius: 2px;
  transform: rotate(45deg);
}

/* =============================================================================
   Pricing
   ============================================================================= */

.price-list { list-style: none; padding: 0; margin: 0 0 var(--space-s); max-width: 44rem; }
.price-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-s);
  padding: var(--space-s) 0;
  border-bottom: 1px dashed var(--line);
}
.price-list__svc { font-weight: 600; }
.price-list__amt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--pine);
  white-space: nowrap;
}
.price-caveat { max-width: 44rem; margin-bottom: var(--space-xl); }
.price-drivers { max-width: 44rem; }
.price-drivers h3 { margin-bottom: var(--space-2xs); }

/* =============================================================================
   Numbered process
   ============================================================================= */

.steps-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--space-m);
  counter-reset: step;
}
.steps-list li {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-m);
}
.band-paper .steps-list li { background: var(--cream); }
.steps-list__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--pine);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  margin-bottom: var(--space-2xs);
}
.steps-list h3 { margin-bottom: var(--space-3xs); }
.steps-list p { font-size: var(--step--1); color: var(--ink-soft); }
.steps-list.compact { grid-template-columns: 1fr; gap: var(--space-s); }

/* =============================================================================
   FAQ
   ============================================================================= */

.faq { max-width: 52rem; }
.faq__item { padding: var(--space-m) 0; border-bottom: 1px solid var(--line); }
.faq dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--pine);
  line-height: 1.25;
  margin-bottom: var(--space-2xs);
}
.faq dd { margin: 0; color: var(--ink-soft); max-width: var(--measure); }

/* =============================================================================
   Cards without media / quote cards
   ============================================================================= */

.card.plain, .card.quote { background: var(--cream); }
.band-paper .card.plain, .band-paper .card.quote { background: var(--cream); }
.card.plain:hover, .card.quote:hover { transform: none; box-shadow: var(--shadow-s); border-color: var(--line); }
.card.quote blockquote p { font-size: var(--step-0); color: var(--ink); }
.card.quote .card__go { color: var(--ink-softer); font-weight: 600; }

.rounded { border-radius: var(--radius); }
.btn-row.centered { justify-content: center; margin-top: var(--space-l); }

/* =============================================================================
   Service areas
   ============================================================================= */

.area-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--space-xs);
}
.area-grid__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.area-grid__item > * {
  display: block;
  padding: var(--space-s) var(--space-m);
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}
.area-grid__item.has-page { border-color: var(--ochre); }
.area-grid__item.has-page a:hover { background: var(--cream); }
.area-grid__more {
  display: block;
  font-size: var(--step--2);
  font-weight: 700;
  color: var(--ochre-text);
  margin-top: var(--space-3xs);
}

/* =============================================================================
   Contact
   ============================================================================= */

.contact-aside { align-self: start; }
.contact-aside p { margin-bottom: var(--space-s); }
.contact-phone a {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-3);
  text-decoration: none;
  color: var(--pine);
}
.contact-phone a:hover { color: var(--ochre-text); }

/* =============================================================================
   Estimate form
   ============================================================================= */

.estimate-form { max-width: 34rem; }
.estimate-form fieldset { border: 0; padding: 0; margin: 0; }
.estimate-form legend {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  color: var(--pine);
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-m);
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  background: var(--pine);
  color: var(--cream);
  font-size: var(--step--1);
  flex-shrink: 0;
}

/* The progress bar is meaningless until JS turns this into a stepped form, so it
   only appears once .is-stepped is set. Without JS the visitor sees one long form. */
.steps-bar { display: none; gap: var(--space-3xs); margin-bottom: var(--space-l); }
.is-stepped .steps-bar { display: flex; }
.steps-bar span {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--line);
  transition: background var(--dur) var(--ease);
}
.steps-bar span.is-done { background: var(--ochre); }

/* Separator between steps only in the non-JS long-form view. */
.fstep + .fstep { margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid var(--line); }
.is-stepped .fstep + .fstep { margin-top: 0; padding-top: 0; border-top: 0; }
.fstep[hidden] { display: none; }

.svc-pick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xs); }
@media (max-width: 560px) { .svc-pick { grid-template-columns: 1fr; } }

.svc-pick label {
  display: block;
  position: relative;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--paper);
  padding: var(--space-s);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.svc-pick label:hover { border-color: var(--ochre); }
.svc-pick__t { display: block; font-weight: 700; font-size: var(--step--1); }
.svc-pick small { display: block; color: var(--ink-softer); font-size: var(--step--2); margin-top: 2px; }

/* The radio is visually hidden but stays focusable and in the a11y tree, so
   keyboard and screen-reader users get the real control. */
.svc-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.svc-pick label:has(input:checked) { border-color: var(--ochre-solid); background: #fbf5e8; }
.svc-pick label:has(input:focus-visible) { outline: 3px solid var(--ochre-solid); outline-offset: 2px; }

.svc-pick.needs-pick label { border-color: #9a3412; }

.form-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
  margin-top: var(--space-m);
  flex-wrap: wrap;
}

.expectation {
  margin-top: var(--space-m);
  padding: var(--space-s);
  background: var(--paper);
  border-left: 3px solid var(--ochre);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  max-width: none;
}
.expectation strong { color: var(--pine); }

/* The single starting-at figure on the site (landscape-design page only). */
.full-yard {
  max-width: 44rem;
  margin-bottom: var(--space-s);
  padding: var(--space-s) var(--space-m);
  background: var(--cream);
  border: 1px solid var(--ochre);
  border-radius: var(--radius-s);
}
.full-yard strong { display: block; font-family: var(--font-display); font-size: var(--step-1); color: var(--pine); margin-bottom: var(--space-3xs); }

/* =============================================================================
   Before/after slider. CSP has no 'unsafe-inline' for style-src, which rules out
   both inline style="" and JS setting element.style/.setProperty() at runtime —
   both count as inline style under CSP, not just markup. The drag position is
   instead expressed as a data-pos attribute (0-100, step 2) that JS toggles with
   setAttribute — plain DOM attribute manipulation, untouched by style-src — and
   every possible value is pre-declared below as an external stylesheet rule
   setting --pos, which the two generic rules underneath then consume.
   ============================================================================= */

.ba-slider {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  touch-action: none;
  user-select: none;
  --pos: 50%;
}

.ba-slider__after,
.ba-slider__before {
  position: absolute;
  inset: 0;
}
.ba-slider__after picture,
.ba-slider__before picture,
.ba-slider__after img,
.ba-slider__before img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ba-slider__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.ba-slider__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  transform: translateX(-50%);
  width: 3px;
  background: var(--cream);
  border: none;
  cursor: ew-resize;
  padding: 0;
}
.ba-slider__handle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.ba-slider__handle::after {
  content: '\2194';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.1rem;
  color: var(--pine);
}
.ba-slider__handle:focus-visible::before { outline: 3px solid var(--ochre-on-dark); outline-offset: 2px; }

.ba-slider__label {
  position: absolute;
  top: var(--space-xs);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-s);
  background: rgba(14, 51, 32, 0.72);
  color: var(--cream);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.ba-slider__label--before { left: var(--space-xs); }
.ba-slider__label--after { right: var(--space-xs); }

.ba-slider[data-pos="0"] { --pos: 0%; }
.ba-slider[data-pos="2"] { --pos: 2%; }
.ba-slider[data-pos="4"] { --pos: 4%; }
.ba-slider[data-pos="6"] { --pos: 6%; }
.ba-slider[data-pos="8"] { --pos: 8%; }
.ba-slider[data-pos="10"] { --pos: 10%; }
.ba-slider[data-pos="12"] { --pos: 12%; }
.ba-slider[data-pos="14"] { --pos: 14%; }
.ba-slider[data-pos="16"] { --pos: 16%; }
.ba-slider[data-pos="18"] { --pos: 18%; }
.ba-slider[data-pos="20"] { --pos: 20%; }
.ba-slider[data-pos="22"] { --pos: 22%; }
.ba-slider[data-pos="24"] { --pos: 24%; }
.ba-slider[data-pos="26"] { --pos: 26%; }
.ba-slider[data-pos="28"] { --pos: 28%; }
.ba-slider[data-pos="30"] { --pos: 30%; }
.ba-slider[data-pos="32"] { --pos: 32%; }
.ba-slider[data-pos="34"] { --pos: 34%; }
.ba-slider[data-pos="36"] { --pos: 36%; }
.ba-slider[data-pos="38"] { --pos: 38%; }
.ba-slider[data-pos="40"] { --pos: 40%; }
.ba-slider[data-pos="42"] { --pos: 42%; }
.ba-slider[data-pos="44"] { --pos: 44%; }
.ba-slider[data-pos="46"] { --pos: 46%; }
.ba-slider[data-pos="48"] { --pos: 48%; }
.ba-slider[data-pos="50"] { --pos: 50%; }
.ba-slider[data-pos="52"] { --pos: 52%; }
.ba-slider[data-pos="54"] { --pos: 54%; }
.ba-slider[data-pos="56"] { --pos: 56%; }
.ba-slider[data-pos="58"] { --pos: 58%; }
.ba-slider[data-pos="60"] { --pos: 60%; }
.ba-slider[data-pos="62"] { --pos: 62%; }
.ba-slider[data-pos="64"] { --pos: 64%; }
.ba-slider[data-pos="66"] { --pos: 66%; }
.ba-slider[data-pos="68"] { --pos: 68%; }
.ba-slider[data-pos="70"] { --pos: 70%; }
.ba-slider[data-pos="72"] { --pos: 72%; }
.ba-slider[data-pos="74"] { --pos: 74%; }
.ba-slider[data-pos="76"] { --pos: 76%; }
.ba-slider[data-pos="78"] { --pos: 78%; }
.ba-slider[data-pos="80"] { --pos: 80%; }
.ba-slider[data-pos="82"] { --pos: 82%; }
.ba-slider[data-pos="84"] { --pos: 84%; }
.ba-slider[data-pos="86"] { --pos: 86%; }
.ba-slider[data-pos="88"] { --pos: 88%; }
.ba-slider[data-pos="90"] { --pos: 90%; }
.ba-slider[data-pos="92"] { --pos: 92%; }
.ba-slider[data-pos="94"] { --pos: 94%; }
.ba-slider[data-pos="96"] { --pos: 96%; }
.ba-slider[data-pos="98"] { --pos: 98%; }
.ba-slider[data-pos="100"] { --pos: 100%; }