/* ==========================================================================
   Redbrook Lawn & Property Care — demo site stylesheet

   THE THREE TIERS DELIBERATELY DIFFER NOW.

   These started identical, on the theory that matching design would make the
   price difference read as scope rather than polish. It did not survive
   contact with the job: if a prospect cannot see the difference, the demo is
   not selling anything. Each tier now carries the design attention its price
   actually buys, which is also the truth of how the work is quoted.

   The shared base below is common to all three. Tier-specific overrides are
   appended at the bottom of tiers 1 and 3. css/tour.css and js/tour.js ARE
   still identical everywhere and should stay that way.

   CONTRAST (measured against --paper #F6F2E9):
     --ink        #1F3D2B   11.8:1   body text
     --ink-soft   #4A5A4E    6.6:1   muted text
     --accent-ink #9A4A22    5.6:1   links and small accent text
     white on --ink         11.8:1   primary button
   --accent #B85C2E is 4.07:1 and FAILS AA for normal text. It is decorative
   only: rules, icon strokes, borders. Never put words in it.
   ========================================================================== */

:root {
  --green:       #1F3D2B;
  --green-deep:  #162C1F;
  --green-mid:   #2F5A40;
  --paper:       #F6F2E9;
  --paper-alt:   #EFE9DC;
  --surface:     #FFFFFF;
  --ink:         #1F3D2B;
  --ink-soft:    #4A5A4E;
  --ink-faint:   #6B7A6E;
  --accent:      #B85C2E;
  --accent-ink:  #9A4A22;
  --accent-tint: #F2E3D7;
  --border:      rgba(31, 61, 43, 0.12);
  --border-strong: rgba(31, 61, 43, 0.24);

  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Karla", "Segoe UI", system-ui, -apple-system, sans-serif;

  --container: 1120px;
  --radius:    4px;
  --shadow-sm: 0 2px 10px -4px rgba(31, 61, 43, 0.15);
  --shadow:    0 16px 36px -20px rgba(31, 61, 43, 0.32);
  --header-h:  76px;
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent-ink); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--green); }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; border-radius: 3px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }
.section { padding-block: clamp(56px, 8vw, 100px); }
.section--tight { padding-block: clamp(40px, 6vw, 68px); }
.section--alt { background: var(--paper-alt); }
.section--green { background: var(--green); color: var(--paper); }
.section--green h2 { color: var(--paper); }
.section--green p { color: #C9D6CC; }
.page-hero + .section { padding-top: clamp(26px, 3.5vw, 44px); }
.center { text-align: center; }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--green); color: #fff; padding: 10px 18px; border-radius: 3px; font-weight: 700;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-ink);
  margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--accent); }
.section--green .eyebrow { color: #E5B698; }
.section--green .eyebrow::before { background: #E5B698; }
.section-head { max-width: 700px; margin-bottom: clamp(30px, 5vw, 48px); }
.section-head.center { margin-inline: auto; }
.section-head h2 { font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.5rem); }
.section-head p { color: var(--ink-soft); margin-top: 14px; font-size: 1.05rem; }
.lede { color: var(--ink-soft); font-size: 1.08rem; max-width: 62ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.97rem; line-height: 1;
  padding: 15px 26px; border-radius: 3px; border: 2px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform 0.16s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-mid); color: #fff; transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn--ghost:hover { color: var(--ink); border-color: var(--green); transform: translateY(-2px); }
.btn--light { background: var(--paper); color: var(--green); }
.btn--light:hover { background: #fff; color: var(--green); transform: translateY(-2px); }
.btn--outline-light { background: transparent; color: var(--paper); border-color: rgba(246, 242, 233, 0.4); }
.btn--outline-light:hover { color: #fff; border-color: var(--paper); transform: translateY(-2px); }
.btn--lg { padding: 17px 32px; font-size: 1.04rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(246, 242, 233, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; height: var(--header-h); gap: 18px; }
.nav__brand { display: inline-flex; align-items: center; gap: 11px; margin-right: auto; flex: none; color: var(--ink); }
.nav__brand:hover { color: var(--ink); }
.nav__brand svg { width: 34px; height: 34px; flex: none; color: var(--green); }
.nav__brand .wordmark { font-family: var(--font-head); font-weight: 600; font-size: 1.14rem; line-height: 1.1; letter-spacing: -0.01em; }
.nav__brand .wordmark small { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); margin-top: 3px; }
.nav__menu { display: flex; align-items: center; gap: 6px; }
.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__links a {
  position: relative; white-space: nowrap;
  font-weight: 600; font-size: 0.94rem; color: var(--ink-soft);
  padding: 9px 13px; transition: color 0.2s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px;
  background: var(--accent); transform: scaleX(0); transition: transform 0.22s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--ink); }
.nav__cta { margin-left: 8px; }
.nav__toggle {
  display: none; background: transparent; border: 1px solid var(--border-strong);
  width: 44px; height: 44px; border-radius: 3px; cursor: pointer; padding: 0;
  color: var(--ink); align-items: center; justify-content: center;
}
.nav__toggle svg { width: 22px; height: 22px; }
.nav__toggle .icon-close { display: none; }
.nav[data-open="true"] .nav__toggle .icon-open { display: none; }
.nav[data-open="true"] .nav__toggle .icon-close { display: block; }

@media (max-width: 900px) {
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--paper); border-bottom: 1px solid var(--border);
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 18px clamp(20px, 5vw, 40px) 26px;
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
    box-shadow: var(--shadow);
  }
  .nav[data-open="true"] .nav__menu { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__links a { padding: 14px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--border); }
  .nav__links a::after { display: none; }
  .nav__cta { margin: 14px 0 0; }
  .nav__cta .btn { width: 100%; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(60px, 10vw, 120px); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(720px 380px at 82% 10%, rgba(184, 92, 46, 0.12), transparent 62%),
    linear-gradient(170deg, #FBF8F1 0%, var(--paper) 55%, var(--paper-alt) 100%);
}
.hero__inner { max-width: 760px; }
.hero h1 { font-size: clamp(2.2rem, 1.3rem + 3.8vw, 3.5rem); letter-spacing: -0.02em; }
.hero h1 .accent { color: var(--accent-ink); }
.hero__lead { color: var(--ink-soft); font-size: clamp(1.06rem, 1rem + 0.5vw, 1.22rem); margin-top: 20px; max-width: 56ch; }
.hero .btn-row { margin-top: 32px; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 36px; color: var(--ink-soft); font-size: 0.92rem; }
.hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero__meta svg { width: 17px; height: 17px; color: var(--accent-ink); flex: none; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; padding-block: clamp(42px, 6vw, 76px); background: linear-gradient(170deg, #FBF8F1, var(--paper)); border-bottom: 1px solid var(--border); }
.page-hero h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.8rem); }
.page-hero p { color: var(--ink-soft); margin-top: 14px; font-size: 1.08rem; max-width: 60ch; }
.breadcrumb { font-size: 0.85rem; color: var(--ink-faint); margin-bottom: 14px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 9px; }
.breadcrumb li + li::before { content: "/"; color: var(--ink-faint); }

/* ---------- Grids & cards ---------- */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm); height: 100%;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.card h3 { font-size: 1.16rem; margin-bottom: 8px; }
.card p { color: var(--ink-soft); font-size: 0.96rem; }
a.card { color: inherit; display: block; }
a.card:hover { color: inherit; }
.card__more { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-weight: 700; font-size: 0.9rem; color: var(--accent-ink); }
.card__more svg { width: 15px; height: 15px; transition: transform 0.2s var(--ease); }
a.card:hover .card__more svg { transform: translateX(3px); }

.icon-badge {
  width: 46px; height: 46px; border-radius: 3px; display: grid; place-items: center;
  background: var(--accent-tint); border: 1px solid rgba(184, 92, 46, 0.24);
  color: var(--accent-ink); margin-bottom: 16px;
}
.icon-badge svg { width: 23px; height: 23px; }

/* ---------- Checklist ---------- */
.ticks { display: grid; gap: 10px; margin-top: 16px; }
.ticks li { display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start; color: var(--ink-soft); font-size: 0.95rem; }
.ticks svg { width: 16px; height: 16px; color: var(--accent-ink); margin-top: 5px; }

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split__body p + p { margin-top: 16px; }
.split__body p { color: var(--ink-soft); }

/* Decorative panel standing in for a photograph */
.photo {
  aspect-ratio: 4 / 3; border-radius: var(--radius); border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--green-mid);
  background:
    repeating-linear-gradient(45deg, rgba(31, 61, 43, 0.045) 0 12px, transparent 12px 24px),
    linear-gradient(150deg, #E4EADF, #D6E0D2);
}
.photo svg { width: 58px; height: 58px; opacity: 0.5; }
.photo--tall { aspect-ratio: 3 / 4; }
.photo--wide { aspect-ratio: 16 / 9; }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--ink); padding: 8px 14px; border-radius: 999px; font-size: 0.88rem; font-weight: 600;
}
.chip svg { width: 14px; height: 14px; color: var(--accent-ink); }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.steps li { position: relative; padding-top: 26px; border-top: 2px solid var(--accent); }
.steps li::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; top: -0.85em; left: 0; padding-right: 10px; background: var(--paper);
  font-family: var(--font-head); font-weight: 700; font-size: 0.92rem; color: var(--accent-ink);
}
.section--alt .steps li::before { background: var(--paper-alt); }
.steps h3 { font-size: 1.05rem; margin-bottom: 6px; }
.steps p { color: var(--ink-soft); font-size: 0.94rem; }

/* ---------- Price list ---------- */
.pricelist { display: grid; gap: 0; max-width: 720px; }
.pricelist div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 18px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.pricelist dt { font-weight: 700; }
.pricelist dd { margin: 0; color: var(--accent-ink); font-weight: 700; }
.pricelist .note { color: var(--ink-faint); font-size: 0.88rem; width: 100%; }

/* ---------- Quote / testimonial ---------- */
.quote { border-left: 3px solid var(--accent); padding-left: 22px; }
.quote p { font-family: var(--font-head); font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem); line-height: 1.45; }
.quote footer { color: var(--ink-faint); font-size: 0.92rem; margin-top: 14px; }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } }
.gallery figure { margin: 0; }
.gallery figcaption { color: var(--ink-soft); font-size: 0.9rem; margin-top: 10px; }

/* ---------- Forms ---------- */
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 22px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font-weight: 700; font-size: 0.9rem; color: var(--ink); }
.field .hint { color: var(--ink-faint); font-size: 0.85rem; }
.field .req { color: var(--accent-ink); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--border-strong);
  border-radius: 3px; padding: 13px 14px; width: 100%;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent-ink); background: var(--surface); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A4A22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 18px;
}
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
@media (max-width: 620px) { .check-grid { grid-template-columns: 1fr; } }
.check-grid label, .radio-row label { display: inline-flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 0.95rem; color: var(--ink-soft); cursor: pointer; }
.check-grid input, .radio-row input { width: auto; accent-color: var(--green); margin-top: 3px; flex: none; }
.radio-row { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 26px; }
.form-actions .privacy { color: var(--ink-faint); font-size: 0.87rem; max-width: 44ch; }

/* ---------- Thanks ---------- */
.thanks { max-width: 620px; }
.thanks__mark { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-tint); border: 1px solid rgba(184, 92, 46, 0.3); color: var(--accent-ink); margin-bottom: 24px; }
.thanks__mark svg { width: 26px; height: 26px; }
.thanks h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.8rem); }
.thanks__lead { color: var(--ink-soft); font-size: 1.1rem; margin-top: 16px; }
.thanks .btn-row { margin-top: 30px; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--green); border-radius: var(--radius); padding: clamp(30px, 5vw, 54px); text-align: center; color: var(--paper); }
.cta-band h2 { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.1rem); color: var(--paper); }
.cta-band p { color: #C9D6CC; max-width: 52ch; margin: 14px auto 26px; }
.cta-band .btn-row { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--green-deep); color: var(--paper); padding-block: 52px 26px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 34px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 26px; } }
.footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; color: var(--paper); }
.footer-brand svg { width: 32px; height: 32px; color: #9FC0A8; flex: none; }
.footer-brand .wordmark { font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; }
.site-footer .blurb { color: #AFC0B4; font-size: 0.93rem; max-width: 34ch; }
.footer-col h4 { font-size: 0.76rem; letter-spacing: 0.15em; text-transform: uppercase; color: #8FA595; margin-bottom: 10px; font-family: var(--font-body); font-weight: 700; }
.footer-col ul { display: grid; gap: 1px; }
.footer-col a, .footer-col span { display: inline-block; padding-block: 8px; color: var(--paper); font-size: 0.94rem; }
.footer-col a:hover { color: #E5B698; }
.footer-bottom {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(246, 242, 233, 0.14);
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: center;
  color: #8FA595; font-size: 0.85rem;
}
/* The demo notice. Do not remove it while these sites are public: they are
   not a real business, and anything that could be mistaken for one should
   say so plainly somewhere a reader will find it. */
.demo-note {
  background: #14261B; color: #AFC0B4; font-size: 0.82rem; text-align: center;
  padding: 11px 20px; border-top: 1px solid rgba(246, 242, 233, 0.1);
}
.demo-note strong { color: #E5B698; }
.demo-note a { color: #E5B698; text-decoration: underline; }

/* ---------- Reveal ---------- */
.js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
.js-reveal .reveal[data-delay="1"] { transition-delay: 0.07s; }
.js-reveal .reveal[data-delay="2"] { transition-delay: 0.14s; }
.js-reveal .reveal[data-delay="3"] { transition-delay: 0.21s; }

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

/* ==========================================================================
   TIER 3 OVERRIDES — the most designed of the three

   Everything here is the visible half of what $750 buys: layered composition,
   components that do something rather than just sit there, and motion used
   to explain rather than decorate.

   The components below (stat band, before/after slider, filterable gallery,
   FAQ accordion) are all real and all work. Nothing here is a picture of a
   feature.
   ========================================================================== */

:root { --container: 1180px; }

/* ---------- Layered hero ---------- */
.hero { padding-block: clamp(72px, 11vw, 132px); }
.hero::before {
  background:
    radial-gradient(820px 420px at 78% 4%, rgba(184, 92, 46, 0.16), transparent 62%),
    radial-gradient(620px 420px at 8% 96%, rgba(47, 90, 64, 0.16), transparent 60%),
    linear-gradient(165deg, #FCFAF4 0%, var(--paper) 48%, var(--paper-alt) 100%);
}
/* A quiet ruled texture behind the hero, masked out before it reaches the copy */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5;
  background-image: linear-gradient(var(--border) 1px, transparent 1px);
  background-size: 100% 34px;
  mask-image: linear-gradient(180deg, #000, transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 72%);
}
.hero h1 { font-size: clamp(2.4rem, 1.3rem + 4.4vw, 4rem); letter-spacing: -0.03em; line-height: 1.06; }

/* ---------- Richer cards ---------- */
.card { border-radius: 6px; }
.card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -24px rgba(31, 61, 43, 0.4); }
a.card { position: relative; overflow: hidden; }
/* A copper edge that wipes in on hover */
a.card::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
a.card:hover::before { transform: scaleX(1); }

/* ---------- Stat band ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { text-align: center; padding: 8px 4px; }
.stat__num {
  font-family: var(--font-head); font-weight: 700; letter-spacing: -0.03em;
  font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.1rem); line-height: 1; color: var(--paper);
}
.stat__label { color: #C9D6CC; font-size: 0.9rem; margin-top: 10px; }

/* ---------- Before / after slider ---------- */
.ba {
  position: relative; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--border-strong); touch-action: none; user-select: none;
}
.ba__pane { position: absolute; inset: 0; display: grid; place-items: center; }
.ba__pane span {
  position: absolute; top: 14px; padding: 5px 11px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.ba__before { background: repeating-linear-gradient(45deg, #CBC8BA 0 14px, #C2BFB1 14px 28px); color: #5A5A4E; }
.ba__before span { left: 14px; background: rgba(255,255,255,0.9); color: #4A4A40; }
.ba__after {
  background: repeating-linear-gradient(45deg, rgba(31,61,43,0.06) 0 14px, transparent 14px 28px), linear-gradient(150deg, #D9E4D5, #C3D4BE);
  color: var(--green-mid);
  clip-path: inset(0 0 0 var(--split, 50%));
}
.ba__after span { right: 14px; background: var(--green); color: var(--paper); }
.ba__pane svg { width: 54px; height: 54px; opacity: 0.45; }
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: var(--split, 50%);
  width: 3px; background: var(--paper); transform: translateX(-50%);
  box-shadow: 0 0 0 1px rgba(31, 61, 43, 0.25);
}
.ba__handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--paper); border: 2px solid var(--green);
  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.4);
}
.ba__range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; margin: 0;
}
.ba__range:focus-visible + .ba__handle::after { outline: 3px solid var(--accent-ink); outline-offset: 3px; }

/* ---------- Filterable gallery ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.filter {
  background: transparent; border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 9px 17px; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 0.86rem; color: var(--ink-soft);
  transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.filter:hover { border-color: var(--green); color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--paper); }
.gallery figure { transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.gallery figure[hidden] { display: none; }

/* ---------- FAQ accordion ---------- */
.faq { display: grid; gap: 10px; max-width: 800px; }
.faq details {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.faq details[open] { border-color: var(--border-strong); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer; list-style: none; padding: 18px 22px;
  font-family: var(--font-head); font-weight: 600; font-size: 1.04rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-ink); }
.faq summary svg { width: 20px; height: 20px; flex: none; color: var(--accent-ink); transition: transform 0.25s var(--ease); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq__body { padding: 0 22px 20px; color: var(--ink-soft); font-size: 0.97rem; }
.faq__body p + p { margin-top: 10px; }

/* ---------- Sticky in-page sub-nav ---------- */
.subnav {
  position: sticky; top: calc(var(--header-h) + var(--tour-bar-h, 0px)); z-index: 90;
  background: rgba(246, 242, 233, 0.95);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.subnav ul { display: flex; gap: 4px; overflow-x: auto; padding: 10px 0; }
.subnav a {
  white-space: nowrap; padding: 8px 14px; border-radius: 999px;
  font-weight: 700; font-size: 0.86rem; color: var(--ink-soft);
}
.subnav a:hover { background: var(--accent-tint); color: var(--accent-ink); }

@media (prefers-reduced-motion: reduce) {
  a.card::before, .gallery figure, .faq summary svg { transition: none; }
}

/* Screen-reader-only, for the gallery filter's live region */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   TIER 3 — refinements
   ========================================================================== */

/* ---------- Stat band ---------- */
/* Was four bare numbers on a flat green field, with nothing telling you what
   they were or why you should care. Now a titled band with a divider between
   each figure and a line of context under it. */
.section--green {
  position: relative; overflow: hidden;
  background:
    radial-gradient(700px 340px at 15% 0%, rgba(184, 92, 46, 0.22), transparent 62%),
    linear-gradient(155deg, var(--green-mid) 0%, var(--green) 45%, var(--green-deep) 100%);
}
.section--green::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(246, 242, 233, 0.05) 1px, transparent 1px);
  background-size: 100% 30px;
  mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent);
  pointer-events: none;
}
.section--green > .container { position: relative; z-index: 1; }
.section--green .section-head p { color: #B9C9BD; }

.stats { gap: 0; }
.stat { padding: 6px 22px; position: relative; }
/* Hairline between figures rather than four islands of nothing */
.stat + .stat::before {
  content: ""; position: absolute; left: 0; top: 12%; bottom: 12%;
  width: 1px; background: rgba(246, 242, 233, 0.18);
}
@media (max-width: 860px) { .stat:nth-child(odd)::before { display: none; } }
.stat__num { display: block; }
/* Tabular figures so the digits do not jitter while the counter runs */
.stat__num span { font-variant-numeric: tabular-nums; }
.stat__num::after {
  content: ""; display: block; width: 26px; height: 3px; margin: 14px auto 0;
  background: #E5B698; border-radius: 2px;
}
.stat__label { color: var(--paper); font-weight: 700; font-size: 0.95rem; margin-top: 12px; }
.stat__sub { color: #A8BCAD; font-size: 0.82rem; line-height: 1.45; margin-top: 5px; }

/* ---------- FAQ ---------- */
/* The chevron was rendering at the browser's 300x150 default for an unsized
   SVG, which is why it looked like a giant checkmark. Sized explicitly here,
   and belt-and-braces on the element itself further down. */
.faq { gap: 12px; max-width: 860px; margin-inline: auto; }
.faq details {
  border-radius: 8px;
  border-left: 3px solid transparent;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.faq details:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
/* Open questions get a copper edge, so the one you are reading is obvious */
.faq details[open] { border-left-color: var(--accent); box-shadow: var(--shadow-sm); }
.faq summary { padding: 20px 24px; gap: 20px; font-size: 1.06rem; line-height: 1.4; }
.faq summary svg {
  width: 20px !important; height: 20px !important;
  flex: 0 0 20px; color: var(--accent-ink);
}
.faq details[open] summary { padding-bottom: 12px; }
.faq__body { padding: 0 24px 22px; font-size: 0.98rem; line-height: 1.65; max-width: 68ch; }

/* SAFETY NET. An inline SVG with no width from CSS or markup falls back to
   the browser default of 300x150. That is what turned the FAQ chevron into a
   giant checkmark when a stale stylesheet was being served.

   :where() gives this ZERO specificity, so any real rule beats it. Written as
   svg:not([width]) it would have scored the same as .icon-badge svg, come
   later in the file, and shrunk every icon on the site. */
svg:where(:not([width])) { width: 1.15em; height: 1.15em; }