/* ==========================================================================
   Riverstone Builders — Design System
   Off-black + brass/gold, full-bleed photo heroes, restrained accent use.
   ========================================================================== */

:root {
  /* Color */
  --color-bg: #12100C;
  --color-bg-alt: #1B1712;
  --color-panel: #201B15;
  --color-text: #F3EEE0;
  --color-text-soft: #BDB29C;
  --color-text-faint: #8C806A;
  --color-gold: #C9A66B;
  --color-gold-light: #E3C88F;
  --color-gold-dark: #8F7241;
  --color-line: rgba(243, 238, 224, 0.10);
  --color-line-strong: rgba(243, 238, 224, 0.20);

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 9rem;

  /* Layout */
  --content-max: 1280px;
  --radius-sm: 3px;
  --radius-md: 4px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
/* Smooth scrolling is handled by Lenis (see main.js); native scroll-behavior
   is left as the default so the two don't fight each other. */
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font-family: inherit; cursor: pointer; }

.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}
@media (max-width: 720px) {
  .wrap { padding: 0 var(--space-3); }
}

/* ---- Typography ---- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
}
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(1.9rem, 3vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--color-text);
}
.lede {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--color-text-soft);
  max-width: 46ch;
}
p.body-text { color: var(--color-text-soft); max-width: 62ch; }
.small { font-size: 0.875rem; color: var(--color-text-faint); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-gold);
  color: #17140D;
}
.btn-primary:hover { background: var(--color-gold-light); }
.btn-ghost {
  border-color: rgba(243, 238, 224, 0.38);
  color: var(--color-text);
}
.btn-ghost:hover { border-color: var(--color-gold); color: var(--color-gold); }
.btn-on-gold {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-bg);
}
.btn-on-gold:hover { background: transparent; border-color: #17140D; color: #17140D; }
.btn-outline {
  background: transparent;
  border-color: var(--color-gold);
  color: var(--color-text);
}
.btn-outline:hover { background: var(--color-gold); color: #17140D; }

/* ---- Header ---- */
.site-header .btn { font-size: 0.98rem; }
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid var(--color-gold);
  transition: background 0.3s ease;
}
.site-header.is-scrolled {
  background: var(--color-bg);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  max-width: none;
  padding: 0 var(--space-4);
}
/* Without this the nav, as a flex sibling, squeezes the logo to zero width
   rather than wrapping or collapsing. */
.logo-link { display: flex; align-items: center; height: 34px; flex-shrink: 0; }
.logo-link img { height: 100%; width: auto; filter: brightness(0) invert(1); }

.main-nav { display: flex; align-items: center; gap: var(--space-3); flex: 1; }
@media (min-width: 1101px) {
  .main-nav { border-left: 1px solid var(--color-gold); padding-left: var(--space-3); margin-left: var(--space-3); }
}
.main-nav ul { display: flex; gap: var(--space-3); margin-left: auto; }
.main-nav ul a {
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--color-text-soft);
  padding: 0.4rem 0.1rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.main-nav ul a:hover, .main-nav ul a.active {
  color: var(--color-text);
  border-bottom-color: var(--color-gold);
}
.header-phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.25;
  white-space: nowrap;
  border-left: 1px solid var(--color-gold);
  border-right: 1px solid var(--color-gold);
  padding: 0 var(--space-3);
}
.header-phone .call-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.header-phone .call-number {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  transition: color 0.15s ease;
}
.header-phone:hover .call-number { color: var(--color-gold); }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 1.5px;
  background: var(--color-text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 24px; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

@media (max-width: 1100px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed;
    inset: 84px 0 0 0;
    background: var(--color-bg);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-4) var(--space-3);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  body.nav-open .main-nav { opacity: 1; transform: translateY(0); visibility: visible; }
  .main-nav ul { flex-direction: column; gap: 0; margin-left: 0; }
  .main-nav li { border-bottom: 1px solid var(--color-line); }
  .main-nav ul a { display: block; padding: 1rem 0.1rem; }
  .header-phone {
    align-items: flex-start;
    text-align: left;
    border-left: none;
    border-right: none;
    padding: 0;
    margin-left: 0;
    border-top: 1px solid var(--color-line);
    padding-top: var(--space-3);
    margin-top: var(--space-2);
  }
  .main-nav .btn { margin-top: var(--space-3); align-self: flex-start; }
}

/* ---- Full-bleed hero (photo or blueprint, text overlaid) ---- */
.hero-full {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--color-text);
}

/* Scroll-scrubbed video hero: the section is pinned in place (sticky) for
   the extra scroll distance in .hero-scroll-track, so the video finishes
   playing before the page scrolls past it. Once the track's extra height
   runs out, the section releases and scrolls away normally (see main.js
   for how the fade is timed across that release). */
.hero-scroll-track {
  position: relative;
  height: 160vh;
}
.hero-full.hero-pinned {
  position: sticky;
  top: 0;
}
@media (max-width: 720px) {
  .hero-scroll-track { height: 150vh; }
}
.hero-full .hero-media {
  position: absolute;
  top: -10%; left: 0; right: 0;
  height: 120%;
  z-index: 0;
  will-change: transform;
}
.hero-full .hero-media img,
.hero-full .hero-media video {
  width: 100%; height: 100%; object-fit: cover;
}
.hero-full .hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(18,16,12,0.48) 0%, rgba(18,16,12,0.30) 22%, rgba(18,16,12,0.55) 60%, rgba(18,16,12,0.94) 100%),
    linear-gradient(90deg, rgba(18,16,12,0.80) 0%, rgba(18,16,12,0.15) 60%);
}
.hero-full.hero-blueprint {
  background: var(--color-bg-alt);
  background-image:
    linear-gradient(rgba(201,166,107,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,166,107,0.10) 1px, transparent 1px);
  background-size: 34px 34px;
}
.hero-full.hero-blueprint .hero-scrim {
  background: linear-gradient(90deg, rgba(18,16,12,0.55) 0%, rgba(18,16,12,0) 65%);
}
.hero-full .hero-exit-fade {
  position: absolute; inset: 0; z-index: 3;
  background: var(--color-bg);
  opacity: 0;
  pointer-events: none;
}
.hero-full .wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}
.hero-full-content {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  animation: heroFadeUp 1.1s cubic-bezier(.22,.7,.32,1) 0.1s both;
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(38px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-full-content { animation: none; }
}
.hero-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }

/* Centered hero variant — big statement moment, dual CTAs */
.hero-full.hero-center {
  align-items: center;
  text-align: center;
  justify-content: center;
}
.hero-full.hero-center .hero-scrim {
  background:
    linear-gradient(180deg, rgba(18,16,12,0.52) 0%, rgba(18,16,12,0.28) 20%, rgba(18,16,12,0.45) 45%, rgba(18,16,12,0.90) 100%);
}
.hero-full.hero-center.hero-blueprint .hero-scrim { background: rgba(18,16,12,0.15); }
.hero-full.hero-center .hero-full-content { max-width: 760px; margin: 0 auto; align-items: center; }
.hero-full.hero-center .lede { max-width: 52ch; }
.hero-full.hero-center .hero-actions { justify-content: center; }

@media (max-width: 720px) {
  .hero-full .wrap { padding-top: var(--space-5); padding-bottom: var(--space-5); }
}

/* ---- Capability strip (three-part process banner) ---- */
.capability-strip {
  display: flex;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.capability-strip > div {
  flex: 1;
  padding: var(--space-3) var(--space-3);
  text-align: center;
}
.capability-strip > div:not(:last-child) { border-right: 1px solid var(--color-line); }
.capability-strip .num {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--color-gold);
  margin-bottom: 0.5rem;
}
.capability-strip h3 { font-weight: 350; }
@media (max-width: 720px) {
  .capability-strip { flex-direction: column; }
  .capability-strip > div:not(:last-child) { border-right: none; border-bottom: 1px solid var(--color-line); }
}

/* ---- Process grid (big-number step cards) ---- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
}
.process-card {
  background: var(--color-panel);
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
  transition: background 0.35s ease;
}
.process-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--color-gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.45s cubic-bezier(.22,.7,.32,1);
}
.process-card .num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--color-gold);
  opacity: 0.45;
  transition: transform 0.35s cubic-bezier(.22,.7,.32,1), opacity 0.35s ease;
}
.process-card h3 { margin-top: var(--space-2); transition: color 0.25s ease; }
.process-card p { margin-top: 0.5rem; }

@media (hover: hover) {
  .process-card:hover { background: var(--color-bg-alt); }
  .process-card:hover::before { transform: scaleY(1); }
  .process-card:hover .num { opacity: 0.95; transform: translateX(6px) scale(1.05); }
  .process-grid:hover .process-card:not(:hover) { opacity: 0.55; }
}
@media (max-width: 720px) {
  .process-grid { grid-template-columns: 1fr; }
}

/* ---- Sections ---- */
section { padding: var(--space-6) 0; }
.section-alt { background: var(--color-bg-alt); }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
@media (max-width: 720px) {
  section { padding: var(--space-5) 0; }
  .section-head { flex-direction: column; align-items: flex-start; }
}

/* ---- Service / value cards ---- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
}
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
  .card-grid, .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .card-grid, .card-grid.cols-2, .card-grid.cols-4 { grid-template-columns: 1fr; }
}

.service-card {
  background: var(--color-panel);
  display: flex;
  flex-direction: column;
}
.service-card .card-media { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.service-card .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.service-card:hover .card-media img { transform: scale(1.04); }
.service-card .card-body { padding: var(--space-3); display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.service-card .card-body p { color: var(--color-text-soft); font-size: 0.95rem; flex: 1; }
.card-link { font-size: 0.85rem; font-weight: 600; color: var(--color-gold); display: inline-flex; align-items: center; gap: 0.4rem; }
.card-link .arrow { transition: transform 0.15s ease; }
.service-card:hover .card-link .arrow,
.card-link:hover .arrow { transform: translateX(3px); }

/* ---- County chips: quiet, editorial stand-in for a flat list of counties ---- */
.county-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.county-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-line-strong);
  border-radius: 100px;
  padding: 0.6rem 1.3rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-text-soft);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.county-chip:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  background: rgba(201, 166, 107, 0.08);
}

/* ---- Feature cards: full-bleed photo backer, larger format ---- */
.card-grid.feature .service-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 520px;
  overflow: hidden;
  color: var(--color-text);
}
.card-grid.feature .service-card .card-media {
  position: absolute; inset: 0;
  aspect-ratio: auto;
}
.card-grid.feature .service-card .card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(.22,.7,.32,1);
}
.card-grid.feature .service-card:hover .card-media img { transform: scale(1.06); }
.card-grid.feature .service-card .card-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(18,16,12,0.02) 0%, rgba(18,16,12,0.20) 38%, rgba(18,16,12,0.75) 62%, rgba(18,16,12,0.97) 100%);
}
.card-grid.feature .service-card .card-body {
  position: relative; z-index: 2;
  padding: var(--space-4);
}
.card-grid.feature .service-card .card-body p { color: var(--color-text-soft); }
.card-grid.feature .service-card .eyebrow { display: block; margin-bottom: 0.5rem; }
@media (max-width: 720px) {
  .card-grid.feature .service-card { min-height: 400px; }
}

/* ---- Blueprint placeholder (for services without photos yet) ---- */
.blueprint {
  position: relative;
  background: var(--color-bg-alt);
  background-image:
    linear-gradient(rgba(201,166,107,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,166,107,0.12) 1px, transparent 1px);
  background-size: 28px 28px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  color: rgba(201,166,107,0.85);
}
.blueprint::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 0% 100%, transparent 30%, rgba(0,0,0,0.35));
}
.blueprint span {
  position: relative; z-index: 1;
  padding: 0.9rem 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ---- Spec cards: numbered, typographic category cards used instead of
   photos — one consistent format per grid, so nothing reads as a missing
   image. The top accent line draws in on scroll (staggered per card), and
   hovering brightens that card's number and heading while dimming its
   siblings, echoing the same interaction already used on "How We Work". ---- */
.service-card.card-spec {
  position: relative;
  overflow: hidden;
  transition: background 0.3s ease, opacity 0.3s ease;
}
.service-card.card-spec::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--color-gold);
}
.service-card.card-spec .card-body {
  justify-content: center;
}
.card-spec .num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.75rem;
  line-height: 1;
  color: var(--color-gold);
  opacity: 0.45;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.card-spec h3 { transition: color 0.25s ease; }

/* Scroll-in: the accent line draws left-to-right just after the card's own
   fade-up, staggered to match each card's position in the row. */
.reveal-enabled .card-spec::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(.22,.7,.32,1) 0.1s;
}
.reveal-enabled .card-spec.is-visible::before { transform: scaleX(1); }
.reveal-enabled .card-grid .card-spec:nth-child(2)::before { transition-delay: 0.22s; }
.reveal-enabled .card-grid .card-spec:nth-child(3)::before { transition-delay: 0.34s; }
.reveal-enabled .card-grid .card-spec:nth-child(4)::before { transition-delay: 0.46s; }

@media (hover: hover) {
  .card-spec:hover { background: var(--color-bg-alt); }
  .card-spec:hover .num { opacity: 0.95; transform: translateX(4px) scale(1.05); }
  .card-spec:hover h3 { color: var(--color-gold); }
  .card-grid:hover .card-spec:not(:hover) { opacity: 0.6; }
}

/* ---- Divider list (process steps, service lists) ---- */
.line-list { border-top: 1px solid var(--color-line); }
.line-list > * {
  border-bottom: 1px solid var(--color-line);
  padding: var(--space-3) 0;
  display: flex;
  gap: var(--space-3);
}
.line-list .idx {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-gold);
  min-width: 2.5rem;
}

.check-list li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-text-soft);
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
}
.check-list li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-gold);
  flex-shrink: 0;
  margin-top: 0.55em;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
}
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.gallery-grid .tall { aspect-ratio: 4/5; grid-row: span 2; }
@media (max-width: 720px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid .tall { grid-row: span 1; aspect-ratio: 4/3; }
}

/* ---- CTA band ---- */
.cta-band {
  background: var(--color-gold);
  color: #17140D;
  padding: var(--space-6) 0;
}
.cta-band h2 { color: #17140D; }
.cta-band .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.cta-band h2 { max-width: 30ch; }

/* ---- Lead form section ----
   The form is our own markup styled to the site's design system. It still
   posts into JobTread: their script binds to any form carrying
   [data-jobtread-web-form] and reads values straight off form.elements by
   `name`, so it never sees — or needs — their original markup. */
.lead-form-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-5);
  align-items: center;
}
.lead-form-copy {
  max-width: 40ch;
}
.lead-form-copy .body-text {
  margin-top: var(--space-2);
}
.lead-form-contact {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.lead-form-contact a {
  color: var(--color-text-soft);
  font-size: 0.95rem;
  transition: color 0.15s ease;
}
.lead-form-contact a:hover {
  color: var(--color-gold);
}
.lead-form-contact .divider {
  width: 1px;
  height: 16px;
  background: var(--color-gold);
}
.lead-form-embed {
  display: flex;
  justify-content: flex-start;
}
.lead-form-embed form {
  width: 100%;
  max-width: 34rem;
}
@media (min-width: 1024px) {
  .lead-form-embed form {
    max-width: 42rem;
  }
}
@media (max-width: 900px) {
  .lead-form-layout {
    grid-template-columns: 1fr;
  }
  .lead-form-copy {
    max-width: none;
    order: -1;
  }
}
/* ---- Multi-step project form ---- */
.rs-form {
  scroll-margin-top: 104px;
  background: var(--color-panel);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.rs-progress {
  display: flex;
  gap: 5px;
  margin-bottom: var(--space-3);
}
.rs-progress span {
  flex: 1;
  height: 2px;
  background: var(--color-line-strong);
  transition: background 0.3s ease;
}
.rs-progress span.is-done { background: var(--color-gold); }

/* Steps only collapse once JS has taken over (it adds .is-stepped). If the
   script fails or is blocked, every step stays visible and readable rather
   than leaving an empty bordered box where the form should be. */
.rs-step { display: block; }
.rs-form.is-stepped .rs-step { display: none; }
.rs-form.is-stepped .rs-step.is-active { display: block; }
.rs-step h3:focus { outline: none; }
.rs-step h3:focus-visible,
.rs-choice:focus-visible,
.rs-pill:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}
.reveal-enabled .rs-step.is-active { animation: rsStepIn 0.45s cubic-bezier(.22,.7,.32,1) both; }
@keyframes rsStepIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.rs-step-count {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.rs-step h3 { margin: 0.4rem 0 var(--space-3); }
.rs-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-text-soft);
}
.rs-label .rs-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-faint);
}

/* Big tap-target cards for the opening question — one click, no typing,
   which is what keeps people moving into the rest of the form. */
.rs-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}
.rs-choice {
  background: transparent;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-soft);
  padding: var(--space-3) var(--space-1);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.rs-choice:hover { border-color: var(--color-gold); color: var(--color-text); }
.rs-choice.is-selected {
  border-color: var(--color-gold);
  background: rgba(201, 166, 107, 0.12);
  color: var(--color-text);
}
.rs-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--space-3);
}
.rs-pill {
  background: transparent;
  border: 1px solid var(--color-line-strong);
  border-radius: 100px;
  color: var(--color-text-soft);
  padding: 0.5rem 0.95rem;
  font-size: 0.85rem;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.rs-pill:hover { border-color: var(--color-gold); color: var(--color-text); }
.rs-pill.is-selected {
  border-color: var(--color-gold);
  background: rgba(201, 166, 107, 0.12);
  color: var(--color-text);
}

.rs-field { margin-bottom: var(--space-3); }
.rs-field input,
.rs-field select,
.rs-field textarea {
  width: 100%;
  border: 1px solid var(--color-line-strong);
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
}
.rs-field input::placeholder,
.rs-field textarea::placeholder { color: var(--color-text-faint); }
.rs-field input:focus,
.rs-field select:focus,
.rs-field textarea:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(201, 166, 107, 0.25);
}
.rs-field textarea { resize: vertical; min-height: 110px; }
.rs-field input[type="file"] { padding: 0.6rem; font-size: 0.85rem; color: var(--color-text-soft); }
.rs-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

.rs-error {
  color: #D4795E;
  font-size: 0.85rem;
  margin-bottom: var(--space-2);
}
.rs-error[hidden] { display: none; }

.rs-file-note {
  font-size: 0.8rem;
  color: var(--color-text-faint);
  margin-top: 0.45rem;
}
.rs-file-note.is-over { color: #D4795E; }
.rs-scope-set[hidden] { display: none; }

.rs-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.rs-actions .rs-spacer { margin-right: auto; }
.rs-back {
  background: none;
  border: none;
  color: var(--color-text-faint);
  font-size: 0.85rem;
  padding: 0.5rem 0;
  transition: color 0.15s ease;
}
.rs-back:hover { color: var(--color-gold); }
.rs-reassure {
  margin-top: var(--space-2);
  font-size: 0.8rem;
  color: var(--color-text-faint);
}

@media (max-width: 480px) {
  .rs-form { padding: var(--space-3); }
  .rs-choice-grid { grid-template-columns: 1fr; }
  .rs-field-row { grid-template-columns: 1fr; }
}

/* ---- Service area map ----
   The county list is the real control and the map mirrors it: county shapes
   are far too small to be reliable tap targets on a phone, so the list has to
   stand on its own. */
.rs-map {
  scroll-margin-top: 104px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-5);
  align-items: center;
}
.rs-map-svg { width: 100%; height: auto; display: block; }
.rs-county {
  fill: var(--color-panel);
  stroke: rgba(243, 238, 224, 0.12);
  stroke-width: 0.5;
}
.rs-county.is-served {
  fill: #2b2419;
  stroke: var(--color-gold);
  stroke-width: 0.8;
  transition: fill 0.2s ease;
}
.rs-map.is-enhanced .rs-county.is-served { cursor: pointer; }
.rs-map.is-enhanced .rs-county.is-served:hover { fill: #3b301e; }
.rs-county.is-served.is-active { fill: var(--color-gold); }
.rs-county-label {
  fill: var(--color-text-soft);
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 500;
  text-anchor: middle;
  pointer-events: none;
}
.rs-county-label.is-active { fill: #17140D; font-weight: 600; }

.rs-county-list {
  border-top: 1px solid var(--color-line);
  margin-top: var(--space-3);
}
.rs-county-item { border-bottom: 1px solid var(--color-line); }
.rs-county-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: none;
  border: none;
  padding: var(--space-2) 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-text-soft);
  text-align: left;
  transition: color 0.15s ease;
}
.rs-county-btn:hover { color: var(--color-gold); }
.rs-county-btn[aria-expanded="true"] { color: var(--color-text); }
.rs-county-btn:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}
.rs-county-chev {
  display: inline-block;
  color: var(--color-gold);
  font-size: 1.1rem;
  transition: transform 0.2s ease;
}
.rs-county-btn[aria-expanded="true"] .rs-county-chev { transform: rotate(45deg); }
.rs-towns { padding-bottom: var(--space-3); }
.rs-towns .btn { margin-top: var(--space-2); }
/* Collapse only once JS is driving, so a failed script leaves every town
   list readable instead of hiding the page's actual content. */
.rs-map.is-enhanced .rs-towns { display: none; }
.rs-map.is-enhanced .rs-county-item.is-open .rs-towns { display: block; }

@media (max-width: 900px) {
  .rs-map { grid-template-columns: 1fr; gap: var(--space-4); }
  .rs-map-figure { max-width: 360px; margin: 0 auto; }
}

/* ---- Sticky mobile action bar ---- */
.mobile-cta { display: none; }
@media (max-width: 720px) {
  .mobile-cta {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 95;
    display: flex;
    border-top: 1px solid var(--color-gold);
    background: var(--color-bg);
  }
  .mobile-cta a {
    flex: 1;
    padding: 0.9rem 0.5rem;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .mobile-cta .mobile-cta-call { color: var(--color-text); }
  .mobile-cta .mobile-cta-start { background: var(--color-gold); color: #17140D; }
  body { padding-bottom: 52px; }
  body.nav-open .mobile-cta { display: none; }
}

/* ---- Legal / policy pages: simple prose layout ---- */
.legal-hero {
  padding: var(--space-5) 0;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-line);
}
.legal-hero .eyebrow { display: block; margin-bottom: var(--space-1); }
.legal-hero .small { margin-top: var(--space-2); }
.legal-content { max-width: 70ch; }
.legal-content h2 { margin-top: var(--space-5); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p.body-text { margin-top: var(--space-2); max-width: none; }
.legal-content ul {
  margin-top: var(--space-2);
  padding-left: 1.2rem;
  list-style: disc;
}
.legal-content li {
  color: var(--color-text-soft);
  margin-top: 0.5rem;
  padding-left: 0.3rem;
}
.legal-content a {
  color: var(--color-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Footer ---- */
.site-footer {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-line);
  padding: var(--space-5) 0 var(--space-3);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
}
.footer-top .logo-link { height: 30px; margin-bottom: var(--space-2); }
.footer-col h4 {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}
.footer-col a, .footer-col span { display: block; color: var(--color-text-soft); font-size: 0.9rem; padding: 0.25rem 0; }
.footer-col a:hover { color: var(--color-gold); }
.footer-bottom {
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-3);
  display: flex;
  justify-content: space-between;
  color: var(--color-text-faint);
  font-size: 0.8rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.footer-bottom a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-bottom a:hover { color: var(--color-gold); }
.footer-license {
  margin-top: var(--space-2);
  color: var(--color-text-faint);
  font-size: 0.8rem;
}
@media (max-width: 880px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* ---- Trust strip: thin gold-bordered band for a review/rating badge ---- */
.trust-strip {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-gold);
  border-bottom: 1px solid var(--color-gold);
}
.trust-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  text-align: center;
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.trust-divider {
  width: 1px;
  height: 24px;
  background: var(--color-line-strong);
}
.trust-strip-stars {
  color: var(--color-gold);
  font-size: 1.55rem;
  letter-spacing: 0.2em;
}
.trust-strip-text {
  font-size: 1.2rem;
  color: var(--color-text-soft);
  letter-spacing: 0.02em;
}

/* ---- Service area strip: the county list as a thin band, carrying the
   local-coverage signal onto every page without repeating the map. ---- */
.area-strip {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg-alt);
}
.area-strip .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  flex-wrap: wrap;
  text-align: center;
}
.area-strip-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.area-strip-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-2);
}
.area-strip-list a {
  font-size: 0.95rem;
  color: var(--color-text-soft);
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.area-strip-list a:hover {
  color: var(--color-text);
  border-bottom-color: var(--color-gold);
}
.area-strip-more {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-gold);
  white-space: nowrap;
}
.area-strip-more:hover { color: var(--color-gold-light); }

/* ---- Contact layout ---- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ---- Media frame: offset accent-color backing + scroll parallax.
   The photo and its gold backing drift in opposite directions as the
   section scrolls through view — the backing moves down while the photo
   moves up, so the two visibly separate rather than travel as one unit. ---- */
.media-frame {
  position: relative;
}
.media-frame-accent {
  position: absolute;
  top: -32px; left: -32px;
  width: 100%; height: 100%;
  background: var(--color-gold);
  opacity: 0.35;
  z-index: 0;
  will-change: transform;
}
.media-frame-media {
  position: relative;
  z-index: 1;
  min-height: 420px;
  overflow: hidden;
  will-change: transform;
}
.media-frame-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 720px) {
  .media-frame-accent { top: -18px; left: -18px; }
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); }
.form-grid .full { grid-column: 1 / -1; }
.field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
  color: var(--color-text-soft);
}
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--color-line-strong);
  background: var(--color-panel);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
}
.field input::placeholder, .field textarea::placeholder { color: var(--color-text-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(201, 166, 107, 0.25);
}
.field textarea { resize: vertical; min-height: 120px; }
.form-note { margin-top: var(--space-2); }

.info-card {
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  padding: var(--space-4);
}
.info-card .line-list > * { padding: var(--space-2) 0; }

@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ---- Scroll reveal (progressive enhancement — see main.js) ---- */
.reveal-enabled .section-head,
.reveal-enabled .service-card,
.reveal-enabled .process-card,
.reveal-enabled .capability-strip > div,
.reveal-enabled .info-card,
.reveal-enabled .rs-form {
  opacity: 0;
  transform: translateY(46px) scale(0.97);
  transition: opacity 0.85s cubic-bezier(.22,.7,.32,1), transform 0.85s cubic-bezier(.22,.7,.32,1);
}
.reveal-enabled .is-visible {
  opacity: 1;
  transform: none;
  /* Reset to a snappier transition once the entrance finishes, so later
     interactions (like the process-card hover highlight) aren't stuck
     using the slow entrance timing. */
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
}

/* Staggered reveal within card groups for a more dynamic entrance */
.reveal-enabled .card-grid .service-card:nth-child(2) { transition-delay: 0.12s; }
.reveal-enabled .card-grid .service-card:nth-child(3) { transition-delay: 0.24s; }
.reveal-enabled .card-grid .service-card:nth-child(4) { transition-delay: 0.36s; }
.reveal-enabled .process-grid .process-card:nth-child(2) { transition-delay: 0.12s; }
.reveal-enabled .process-grid .process-card:nth-child(3) { transition-delay: 0.24s; }
.reveal-enabled .process-grid .process-card:nth-child(4) { transition-delay: 0.36s; }
.reveal-enabled .capability-strip > div:nth-child(2) { transition-delay: 0.12s; }
.reveal-enabled .capability-strip > div:nth-child(3) { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal-enabled .section-head,
  .reveal-enabled .service-card,
  .reveal-enabled .process-card,
  .reveal-enabled .capability-strip > div,
  .reveal-enabled .info-card,
  .reveal-enabled .rs-form {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Rendering label (for images that are renderings, not completed work) ---- */
.render-label {
  position: absolute;
  top: 0.75rem; right: 0.85rem;
  z-index: 3;
  font-family: var(--font-body);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(243, 238, 224, 0.38);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.hero-full > .render-label { top: auto; bottom: 1rem; right: 1.25rem; }