/* RATIONALE: Ground is warm unpainted paper with a deep green-black ink, because the direction asks for something as tidy as a new fence line, not a glossy brochure. The accent is the green of fresh pressure-treated pine, one of the three materials they build with, and it is spent only on the quote action and the numbers they stand behind. The display face stays Archivo Black, because a blunt, wide, immovable poster face is a set post, and the customer asked for a bold modern font. The bold move: the quick facts (3-year warranty, a start within a week, done in a day or two) ride one full-bleed ink rail under the headline, like the top rail of a finished fence. */

:root {
  --r-bg: #f4f2ec;
  --r-surface: #ebe8df;
  --r-fg: #1c2420;
  --r-muted: #555a56;
  --r-line: #cdc9be;
  --r-accent: #2f6b4f;
  --r-accent-text: #285c44;
  --r-on-accent: #ffffff;

  --r-inverse-bg: #1c2420;
  --r-inverse-fg: #f4f2ec;
  --r-inverse-muted: #b3b8b3;
  --r-inverse-line: #3a433e;
  --r-inverse-accent: #8cc0a2;

  --r-display-weight: 400;
  --r-display-tracking: -0.025em;
  --r-case-display: none;
  --r-case-label: uppercase;

  --cx-body: 1.0625rem;
  --cx-h1: clamp(2.5rem, 8.4vw + 0.5rem, 6.25rem);
  --cx-h2: clamp(1.75rem, 2.8vw + 0.8rem, 3rem);
  --cx-h3: clamp(1.125rem, 0.8vw + 0.9rem, 1.375rem);
  --cx-band: clamp(4rem, 9vw, 7.5rem);
  --cx-radius: 0px;
  --cx-radius-media: 0px;

  /* local helpers */
  --fs-micro: 0.78rem;
  --fs-track: 0.16em;
  --fs-grade: saturate(0.82) contrast(1.06) brightness(0.98);
  --fs-rail: 3px;
}

/* ---------- grounds ---------- */
[data-theme="light"] {
  --r-bg: #f4f2ec;
  --r-surface: #ebe8df;
  --r-fg: #1c2420;
  --r-muted: #555a56;
  --r-line: #cdc9be;
  --r-accent: #2f6b4f;
  --r-accent-text: #285c44;
  --r-on-accent: #ffffff;
}

[data-theme="dark"] {
  --r-bg: #1c2420;
  --r-surface: #252d29;
  --r-fg: #f4f2ec;
  --r-muted: #b3b8b3;
  --r-line: #3a433e;
  --r-accent: #8cc0a2;
  --r-accent-text: #9ccbb0;
  --r-on-accent: #1c2420;
}

[data-theme="brand"] {
  --r-bg: #2f6b4f;
  --r-surface: #2a6147;
  --r-fg: #ffffff;
  --r-muted: #dce8df;
  --r-line: rgba(255, 255, 255, 0.3);
  --r-accent: #f4f2ec;
  --r-accent-text: #ffffff;
  --r-on-accent: #1c2420;
}

[data-theme="accent"] {
  --r-bg: #dce8df;
  --r-surface: #cfdfd3;
  --r-fg: #1c2420;
  --r-muted: #3f4a44;
  --r-line: #b4c7b9;
  --r-accent: #2f6b4f;
  --r-accent-text: #24563f;
  --r-on-accent: #ffffff;
}

/* ---------- base type ---------- */
body {
  background: var(--r-bg);
  color: var(--r-fg);
  font-size: var(--cx-body);
  line-height: 1.6;
  font-feature-settings: "tnum" 0, "kern" 1;
}

h1, h2, h3 {
  font-family: var(--r-display);
  font-weight: var(--r-display-weight);
  letter-spacing: var(--r-display-tracking);
  text-transform: var(--r-case-display);
  color: var(--r-fg);
}

h1 { font-size: clamp(2.2rem, 5.6vw + 0.6rem, 4.75rem); line-height: 0.96; }
h2 { font-size: var(--cx-h2); line-height: 1.02; max-width: 18ch; }
h3 { font-size: var(--cx-h3); line-height: 1.15; letter-spacing: -0.01em; }

p:not(:where([class*="eyebrow"], [class*="kicker"])) { max-width: var(--cx-measure); }

::selection { background: #2f6b4f; color: #fff; }

:focus-visible {
  outline: 3px solid var(--r-accent);
  outline-offset: 3px;
}

/* ---------- section rhythm ---------- */
.r-section {
  background: var(--r-bg);
  color: var(--r-fg);
}

/* two paper sections in a row meet on a hard rule, never on padding alone */
.r-section[data-theme="light"] + .r-section[data-theme="light"] {
  border-top: 1px solid var(--r-fg);
}

/* the image tiles and the FAQs drop onto the darker board so the page alternates */
.r-tiles[data-theme="light"],
.r-faq[data-theme="light"],
.r-proof[data-theme="light"] {
  background: var(--r-surface);
}

/* ---------- heads, eyebrows, leads ---------- */
.r-head {
  text-align: left;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.r-head--center {
  text-align: left;
  margin-inline: 0;
}

.r-head--center h2,
.r-head--center .r-lead {
  margin-inline: 0;
}

.r-eyebrow {
  font-family: var(--r-body);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--fs-track);
  text-transform: var(--r-case-label);
  color: var(--r-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.r-eyebrow-rule {
  width: 2.5rem;
  height: 2px;
  background: currentColor;
  opacity: 1;
}

.r-lead {
  font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.25rem);
  line-height: 1.55;
  color: var(--r-muted);
  max-width: 46ch;
}

.r-display {
  font-family: var(--r-display);
  letter-spacing: var(--r-display-tracking);
}

.r-hairline {
  border: 0;
  height: 1px;
  background: var(--r-line);
}

/* ---------- buttons ---------- */
.r-btn {
  min-height: 48px;
  padding: 0.8rem 1.4rem;
  border-radius: 0;
  font-family: var(--r-body);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 2px solid transparent;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.r-btn:hover { transform: translateY(-1px); }

.r-btn--solid {
  background: var(--r-fg);
  color: var(--r-bg);
  border-color: var(--r-fg);
}

.r-btn--solid:hover {
  background: var(--r-accent);
  border-color: var(--r-accent);
  color: var(--r-on-accent);
}

.r-btn--accent {
  background: var(--r-accent);
  color: var(--r-on-accent);
  border-color: var(--r-accent);
}

.r-btn--accent:hover {
  background: var(--r-fg);
  border-color: var(--r-fg);
  color: var(--r-bg);
}

.r-btn--ghost,
.r-btn--outline {
  background: transparent;
  color: var(--r-fg);
  border-color: var(--r-fg);
}

.r-btn--ghost:hover,
.r-btn--outline:hover {
  background: var(--r-fg);
  color: var(--r-bg);
}

.r-btns { gap: 0.75rem; }

.r-textlink {
  color: var(--r-fg);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--r-accent);
  transition: color 0.18s ease;
}

.r-textlink:hover { color: var(--r-accent-text); }

/* ---------- header, nav, bar ---------- */
.cx-head {
  background: #f4f2ec;
  color: #1c2420;
  border-bottom: 1px solid #1c2420;
}

.cx-nav a:not(:where(.r-btn)) {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1c2420;
  text-decoration: none;
  transition: color 0.18s ease;
}

.cx-nav a:not(:where(.r-btn)):hover,
.cx-nav a[aria-current="page"] {
  color: #2f6b4f;
}

.cx-navbtn {
  min-width: 44px;
  min-height: 44px;
  border-radius: 0;
  color: #1c2420;
}

.cx-bar {
  background: #1c2420;
  color: #f4f2ec;
  border-top: var(--fs-rail) solid #2f6b4f;
}

/* ---------- home hero: statement on paper ---------- */
.r-hero--statement {
  background: var(--r-bg);
  text-align: left;
}

.r-statement-h1,
.r-poster-h1 {
  font-size: var(--cx-h1);
  line-height: 0.94;
  letter-spacing: -0.035em;
  max-width: 13ch;
}

/* a taut string line under the headline: what you pull before setting a post */
.r-hero--statement .r-hero-sub {
  padding-top: 1.25rem;
  margin-top: 1.5rem;
  background: linear-gradient(var(--r-accent), var(--r-accent)) top left / 4.5rem var(--fs-rail) no-repeat;
  font-size: clamp(1.0625rem, 0.6vw + 0.95rem, 1.3rem);
  color: var(--r-muted);
  max-width: 40ch;
}

.r-hero--statement img {
  filter: var(--fs-grade);
  border-bottom: 6px solid var(--r-fg);
}

/* THE bold move: quick facts sit on a full-bleed ink rail */
.r-hero-stats {
  background: var(--r-inverse-bg);
  color: var(--r-inverse-fg);
  box-shadow: 0 0 0 100vmax var(--r-inverse-bg);
  clip-path: inset(0 -100vmax);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-block: 1.5rem;
  gap: 0;
}

.r-hero-stat {
  border-left: 1px solid var(--r-inverse-line);
  padding: 0.75rem 1.25rem;
}

.r-hero-stat:first-child { border-left-color: var(--r-inverse-accent); }

.r-hero-stat-n {
  font-family: var(--r-display);
  font-size: clamp(1.75rem, 3vw + 0.8rem, 2.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--r-inverse-accent);
  font-variant-numeric: lining-nums tabular-nums;
}

.r-hero-stat-l {
  margin-top: 0.4rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--r-inverse-muted);
}

/* ---------- interior heroes: photo band ---------- */
.r-hero:not(.r-hero--statement) {
  text-align: left;
}

.r-hero:not(.r-hero--statement) h1 {
  font-size: clamp(2.2rem, 5.6vw + 0.6rem, 4.75rem);
  max-width: 15ch;
  color: #f4f2ec;
}

.r-hero:not(.r-hero--statement) img {
  filter: var(--fs-grade) saturate(0.85);
}

/* scrim leans in from the left where the text lives, and never drops under .6 */
.r-hero-scrim {
  background:
    linear-gradient(90deg, rgba(20, 27, 24, 0.9) 0%, rgba(20, 27, 24, 0.72) 55%, rgba(20, 27, 24, 0.6) 100%),
    linear-gradient(0deg, rgba(20, 27, 24, 0.55) 0%, rgba(20, 27, 24, 0) 45%);
}

.r-hero:not(.r-hero--statement) .r-hero-sub {
  color: #dfe3df;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.r-hero:not(.r-hero--statement) {
  border-bottom: 6px solid #2f6b4f;
}

/* ---------- services: image tiles + gallery ---------- */
.r-tiles img,
.r-tile-img,
.r-gallery-grid img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: var(--fs-grade);
  border-radius: 0;
  transition: transform 0.4s ease, opacity 0.3s ease;
}

.r-tiles a:hover img,
.r-tile:hover .r-tile-img {
  transform: scale(1.03);
}

.r-tiles [class*="-cap"],
.r-tile-cap {
  background: linear-gradient(0deg, rgba(20, 27, 24, 0.92) 0%, rgba(20, 27, 24, 0.7) 100%);
  color: #f4f2ec;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  border-top: var(--fs-rail) solid #2f6b4f;
}

.r-tiles [class*="-cap"] h3,
.r-tile-cap {
  font-family: var(--r-display);
  letter-spacing: -0.01em;
}

.r-tile {
  border-radius: 0;
  overflow: hidden;
}

/* ---------- heritage numeral ---------- */
.r-heritage [class*="num"],
.r-heritage [class*="-n"] {
  font-family: var(--r-display);
  font-size: clamp(7rem, 28vw, 15rem);
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--r-accent);
  font-variant-numeric: lining-nums;
}

.r-heritage h2 { max-width: 14ch; }

/* ---------- reasons (sticky list) ---------- */
.r-why-row {
  border-top: 1px solid var(--r-line);
  padding-block: 1.5rem;
}

.r-why-row:last-child { border-bottom: 1px solid var(--r-line); }

.r-why-n {
  font-family: var(--r-display);
  font-size: 1rem;
  color: var(--r-accent-text);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.r-why-row h3 { margin-bottom: 0.4rem; }
.r-why-row p:not(:where([class*="eyebrow"], [class*="kicker"])) { color: var(--r-muted); }

/* ---------- zigzag rows ---------- */
.r-zig img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: var(--fs-grade);
  border-bottom: 6px solid var(--r-fg);
}

.r-zig h3,
.r-zig h2 {
  font-size: clamp(1.5rem, 2.2vw + 0.8rem, 2.25rem);
  line-height: 1.05;
}

/* ---------- split / story ---------- */
.r-split-img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: var(--fs-grade);
  border-radius: 0;
}

.r-split-card {
  background: var(--r-bg);
  color: var(--r-fg);
  border-top: 6px solid var(--r-fg);
  border-radius: 0;
  box-shadow: none;
}

/* ---------- process: ghost numerals ---------- */
.r-step {
  border-top: var(--fs-rail) solid var(--r-fg);
  padding-top: 1.25rem;
}

.r-step-n {
  font-family: var(--r-display);
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--r-fg);
  letter-spacing: -0.04em;
}

.r-step p:not(:where([class*="eyebrow"], [class*="kicker"])) { color: var(--r-muted); }

/* ---------- triad: posts, not circles ---------- */
.r-triad [class*="circle"],
.r-triad [class*="ring"] {
  border-radius: 0;
  border-color: var(--r-fg);
}

.r-triad h3 { margin-top: 1rem; }

/* ---------- proof strip ---------- */
.r-proof-list {
  gap: 0;
  border-top: 1px solid var(--r-fg);
  border-bottom: 1px solid var(--r-fg);
}

.r-proof-list > * {
  padding: 1.1rem 1.25rem;
  border-left: 1px solid var(--r-line);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.r-proof-list > *:first-child { border-left: 0; }

.r-proof-mark {
  color: var(--r-accent);
  background: transparent;
  border-radius: 0;
}

/* ---------- stats (where used) ---------- */
.r-stat { border-left: var(--fs-rail) solid var(--r-fg); padding-left: 1rem; }

.r-stat-n {
  font-family: var(--r-display);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.r-stat-l {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--r-muted);
}

/* ---------- reviews ---------- */
.r-reviews-note {
  font-size: 0.875rem;
  color: var(--r-muted);
}

.r-reviews-links a:not(:where(.r-btn)) {
  font-weight: 700;
  color: var(--r-fg);
  text-underline-offset: 0.25em;
}

/* ---------- FAQ: a ruled list ---------- */
.r-faq-list { border-bottom: 1px solid var(--r-fg); }

.r-faq-item {
  border-top: 1px solid var(--r-fg);
  border-radius: 0;
  background: transparent;
}

.r-faq-item summary {
  min-height: 44px;
  padding-block: 1.15rem;
  font-family: var(--r-display);
  font-size: clamp(1.0625rem, 0.6vw + 0.95rem, 1.3rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  transition: color 0.18s ease;
}

.r-faq-item summary::-webkit-details-marker { display: none; }

.r-faq-item summary::after {
  content: "+";
  font-family: var(--r-body);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--r-accent-text);
  flex: none;
}

.r-faq-item[open] summary::after { content: "\2013"; }

.r-faq-item summary:hover { color: var(--r-accent-text); }

.r-faq-item p:not(:where([class*="eyebrow"], [class*="kicker"])) {
  color: var(--r-muted);
  padding-bottom: 1.25rem;
}

/* ---------- prose ---------- */
.r-prose h2 { margin-bottom: 1.25rem; }

.r-prose p:not(:where([class*="eyebrow"], [class*="kicker"])) { line-height: 1.7; }

.r-prose ul li::marker { color: var(--r-accent); }

/* ---------- areas / territories ---------- */
.r-areas-list li,
.r-terr li {
  border-top: 1px solid var(--r-line);
  padding-block: 0.85rem;
  font-weight: 700;
}

.r-terr h3,
.r-terr h2 {
  font-size: clamp(1.75rem, 3vw + 0.8rem, 2.75rem);
}

/* ---------- CTA band: green boards ---------- */
.r-ctaband {
  background-color: var(--r-bg);
  /* faint board seams at picket spacing */
  background-image: repeating-linear-gradient(90deg, transparent 0 58px, rgba(0, 0, 0, 0.07) 58px 60px);
}

.r-ctaband h2 {
  color: var(--r-fg);
  max-width: 16ch;
}

.r-ctaband-img { filter: var(--fs-grade); }

/* ---------- contact ---------- */
.r-contact-num {
  font-family: var(--r-display);
  font-size: clamp(1.75rem, 4vw + 0.6rem, 3rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--r-fg);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.r-contact-tel {
  border-top: var(--fs-rail) solid var(--r-fg);
  padding-top: 1rem;
}

.r-contact-expect {
  color: var(--r-muted);
  border-left: 2px solid var(--r-accent);
  padding-left: 1rem;
}

.r-contact-form,
.cx-form {
  background: var(--r-surface);
  border-top: 6px solid var(--r-fg);
  border-radius: 0; padding: clamp(18px, 2.5vw, 28px)}

.cx-field label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--r-fg);
}

.cx-field input,
.cx-field select,
.cx-field textarea {
  background: #fbfaf6;
  color: #1c2420;
  border-color: #1c2420;
  border-radius: 0;
  font-size: 1rem;
  transition: border-color 0.18s ease;
}

.cx-field input:focus,
.cx-field select:focus,
.cx-field textarea:focus {
  border-color: #2f6b4f;
}

.r-rows > * {
  border-top: 1px solid var(--r-line);
}

.r-rows svg { color: var(--r-accent); }

/* ---------- utility pages ---------- */
.cx-util-head {
  border-bottom: 1px solid var(--r-fg);
}

/* ---------- footer ---------- */
.cx-foot,
.r-foot,
.r-foot2 {
  background: #1c2420;
  color: #f4f2ec;
  border-top: 6px solid #2f6b4f;
}

.cx-fh {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--fs-track);
  text-transform: uppercase;
  color: #8cc0a2;
}

.cx-fcol a:not(:where(.r-btn)),
.r-foot a:not(:where(.r-btn)) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  color: #dfe3df;
  text-decoration: none;
  transition: color 0.18s ease;
}

.cx-fcol a:not(:where(.r-btn)):hover,
.r-foot a:not(:where(.r-btn)):hover {
  color: #ffffff;
}

.r-foot-sub {
  color: #b3b8b3;
  font-size: 0.875rem;
}

.r-foot-logo {
  font-family: var(--r-display);
  letter-spacing: -0.02em;
}

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .r-hero-stat {
    border-left: 0;
    border-top: 1px solid var(--r-inverse-line);
    padding: 0.9rem 0;
  }

  .r-hero-stat:first-child {
    border-top-color: var(--r-inverse-accent);
  }

  .r-proof-list > * {
    border-left: 0;
    border-top: 1px solid var(--r-line);
  }

  .r-proof-list > *:first-child { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .r-btn,
  .r-tiles img,
  .r-tile-img {
    transition: none;
  }
}

/* ---- repair ---- */
.r-hdr2-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
}

@media (max-width: 640px) {
  .r-hdr2-brand {
    font-size: 0.92rem;
    letter-spacing: -0.02em;
  }
}

/* ---- repair ---- */
p.cx-wrap { text-transform: none; font-family: var(--r-body); }

/* normalizer: a head re-aligned to the left keeps its lead with it */
.r-head--center.r-head--center, .r-head--center.r-head--center > :is(h1, h2, h3), .r-head--center.r-head--center p, .r-head--center.r-head--center .r-lead { margin-inline: 0; }