/* ============================================================
   Renovations by IronWood: stylesheet

   Palette: "Sage & Clay". Light sage body and surfaces carry dark
   forest ink; clay is the accent. The stats banner, testimonial and
   footer are deep-forest accent bands: they RE-SCOPE the same tokens
   (see the .stats-band/.quote-band/.site-footer block) so every
   descendant flips to light-on-dark without touching its own rule.
   Change the tokens below and the whole site moves with them.
   ============================================================ */
:root {
  --forest-900: #2C332B;   /* deep forest: accent bands + footer ground */
  --forest-800: #DCE0D4;   /* page background, light-medium sage */
  --forest-700: #EEF0E9;   /* cards, raised surfaces, header */
  --forest-600: #CDD3C4;   /* tinted light for thumbs / placeholders */
  --alt:        #E6E9E0;   /* alternating / hero / cta light band */
  --copper:     #8A4529;   /* clay: primary accent */
  --copper-2:   #6F3820;   /* clay, hover / pressed */
  --sand:       #2C332B;   /* headings (deep forest ink) */
  --cream:      #262B25;   /* body ink */
  --muted:      #555C50;   /* secondary ink */

  --on-copper:  #FBF6F2;   /* ink on a clay fill */
  --line:       rgba(38,43,37,0.16);
  --line-soft:  rgba(38,43,37,0.09);
  --shadow:     0 18px 40px rgba(38,43,37,0.16);

  /* text roles on the deep-forest accent bands */
  --band-strong: #EDF0E7;
  --band-muted:  #9EA79A;
  --band-accent: #C98A63;
  --accent-2:    #48593F;   /* forest-green secondary accent */

  --wrap: 1140px;
  /* Playfair Display picks up the high stroke contrast of the logo wordmark;
     Inter stays quiet underneath it. Both self-hosted, see fonts.css. */
  --serif: "Playfair Display", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Deep-forest accent bands: re-scope the palette tokens so every descendant
   (headings, text, hairlines, accents) flips to light-on-dark automatically. */
.stats-band, .quote-band, .site-footer {
  --sand:       var(--band-strong);
  --cream:      var(--band-strong);
  --muted:      var(--band-muted);
  --copper:     var(--band-accent);
  --copper-2:   #d8a98a;
  --forest-700: rgba(237,240,231,0.05);
  --line:       rgba(237,240,231,0.16);
  --line-soft:  rgba(237,240,231,0.09);
  --on-copper:  #2C332B;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--forest-800);
  color: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--copper); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.serif { font-family: var(--serif); font-weight: 500; }

h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; }
h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 5.4vw, 54px); letter-spacing: -0.01em; }
h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3.8vw, 38px); }
h3 { font-size: 19px; font-weight: 700; }
p  { margin: 0 0 1em; }

/* Skip link: keyboard users land past the nav */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--copper); color: var(--on-copper);
  padding: 10px 16px; font-weight: 700; border-radius: 0 0 6px 0;
}
.skip:focus { left: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 8px; border: 1px solid transparent;
  font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--copper); color: var(--on-copper); }
.btn-primary:hover { background: var(--copper-2); transform: translateY(-1px); }
.btn-ghost { border-color: var(--line); color: var(--cream); background: rgba(38,43,37,0.03); }
.btn-ghost:hover { border-color: var(--copper); color: var(--copper); }
.btn-lg { padding: 16px 28px; font-size: 16px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0;
  /* Deep forest sitewide. Every page now opens dark header into a dark band and
     then down into the light body, so the top of the screen never changes
     colour as you navigate. The white logo is used in the markup on all pages. */
  background: rgba(44,51,43,0.95);
  border-bottom: 1px solid rgba(237,240,231,0.12);
  --navlink:   var(--band-strong);
  /* Must outrank .nav-backdrop (110). The drawer lives inside this header, and
     a positioned z-index here creates a stacking context, so the drawer's own
     z-index only sorts it against its siblings. At 100 the backdrop painted
     over the whole header subtree and swallowed every tap in the open drawer. */
  z-index: 130;
}
/* backdrop-filter is deliberately applied only above the drawer breakpoint.
   Any non-none backdrop-filter turns the element into a containing block for
   its position:fixed descendants, which made the mobile drawer size itself
   against the 69px header instead of the viewport. It opened 114px tall with
   zero-height links, so the hamburger looked like it did nothing. */
@media (min-width: 901px) {
  .site-header { backdrop-filter: saturate(140%) blur(10px); }
}
/* Keep .wrap's 20px side padding: this shorthand would otherwise reset it to 0
   and run the logo and buttons flush to the screen edge below 1180px. */
.nav { display: flex; align-items: center; gap: 20px; padding: 12px 20px; }
.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
/* Dark logo artwork (logo-header-p2.png) so the lockup reads on the light
   header. The white lockup is kept for the dark footer. Header crop is the
   top two lines; the tagline line is dropped as unreadable at this size. */
.brand-logo { height: 44px; width: auto; display: block; }

.menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; align-items: center; }
.navlink {
  /* Header is deep forest sitewide, so these are light-on-dark and must not
     read the light-theme --cream token. */
  text-decoration: none; color: var(--band-strong); font-weight: 600; font-size: 15px;
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  background: none; border: 0; font-family: inherit; padding: 6px 0;
}
.navlink:hover, .navlink:focus-visible { color: var(--band-accent); }
.navlink .caret { transition: transform .2s ease; }

/* Services dropdown */
.has-drop { position: relative; }
.drop-menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 470px; background: var(--forest-700);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  padding: 14px; margin: 0; list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px;
  opacity: 0; visibility: hidden; transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.has-drop:hover .drop-menu,
.has-drop:focus-within .drop-menu,
.has-drop.open .drop-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.has-drop:hover .caret, .has-drop.open .caret { transform: rotate(180deg); }
.drop-col > ul { list-style: none; margin: 0; padding: 0; }
.drop-head {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--copper); font-weight: 700; padding: 6px 10px 4px; margin: 0;
}
.drop-menu a {
  display: block; padding: 9px 10px; border-radius: 7px;
  text-decoration: none; color: var(--cream); font-size: 14.5px; font-weight: 600;
}
.drop-menu a:hover { background: rgba(138,69,41,0.10); color: var(--copper); }

.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-call {
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; color: var(--band-accent); font-weight: 700; font-size: 15px;
}
.nav-call:hover { color: #d8a98a; }

.nav-toggle {
  display: none; background: none; border: 1px solid rgba(237,240,231,0.22);
  color: var(--band-strong);
  border-radius: 7px; padding: 8px 10px; color: var(--cream); cursor: pointer;
}

/* ---------- Hero ----------
   Split layout on purpose: the best photos Alec has are phone shots in
   portrait, and a portrait image crammed into a wide banner crops down to an
   unreadable strip. Giving it its own column shows the whole shower. */
.hero {
  position: relative; overflow: hidden;
  border-bottom: 1px solid rgba(237,240,231,0.14);
  background: var(--forest-900);
  --sand:       var(--band-strong);
  --cream:      var(--band-strong);
  --muted:      var(--band-muted);
  --copper:     var(--band-accent);
  --copper-2:   #d8a98a;
  --line:       rgba(237,240,231,0.16);
  --line-soft:  rgba(237,240,231,0.09);
  --on-copper:  #2C332B;
  /* .hero is a <section>; its own grid owns the vertical rhythm, so the
     blanket section padding has to be cancelled or it stacks on top. */
  padding: 0;
}
/* Soft clay bloom behind the photo so the panel is not a flat rectangle. */
.hero::before {
  content: ""; position: absolute; top: -120px; right: -140px;
  width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(138,69,41,0.10), transparent 68%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: 56px; align-items: center;
  padding: 68px 0 72px;
}
.hero-inner { max-width: 620px; }

.hero-figure {
  position: relative; margin: 0;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.hero-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 42%; }
.hero-figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 46px 20px 18px;
  background: linear-gradient(to top, rgba(30,36,29,.94), transparent);
  color: var(--band-muted); font-size: 13px; line-height: 1.45;
}
.hero-figure figcaption strong {
  display: block; color: var(--band-strong); font-weight: 700; font-size: 15px; margin-bottom: 2px;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--copper); font-weight: 700; margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--copper); }
.hero h1 { color: var(--sand); margin-bottom: 18px; }
.hero h1 em { font-style: normal; color: var(--copper); }
.hero-sub { font-size: 18px; color: var(--muted); max-width: 560px; margin-bottom: 26px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
/* Grouped Interior / Exterior to mirror the Services dropdown, so the two
   navigation routes into the service pages describe the work the same way. */
.hero-services { display: flex; flex-direction: column; gap: 16px; }
.hero-svc-group { display: flex; flex-direction: column; gap: 9px; }
.hero-svc-label {
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--copper); font-weight: 700;
}
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* Zero-height full-width flex item: forces the wrap point so the Interior row
   always reads 3 then 2, rather than reflowing with the viewport. */
.chip-break { flex-basis: 100%; height: 0; margin: -8px 0 0; }
.chip {
  font-size: 13px; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(38,43,37,0.03);
  color: var(--muted); text-decoration: none;
}
.chip:hover { border-color: var(--copper); color: var(--copper); }

/* ---------- Accent bands ----------
   The stats banner and the testimonial share one treatment on purpose, so the
   two proof points on the page read as a matching pair and stand apart from
   the ordinary sections around them. Change this rule and both move together. */
.stats-band, .quote-band {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #2C332B 0%, #262D25 100%);
}
.stats-band::before, .quote-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(201,138,99,0.13), transparent 62%);
}
.stats-band > .wrap, .quote-grid { position: relative; }

.stats-band {
  /* Deliberately light: it sits between the dark header and the dark hero, and
     the contrast is what makes the credential strip register as its own thing. */
  background: var(--alt);
  --sand: #2C332B; --cream: #262B25; --muted: #555C50;
  --copper: #8A4529; --line: rgba(38,43,37,0.16); --line-soft: rgba(38,43,37,0.09);
  --on-copper: #FBF6F2;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  /* Same trap as .hero: this is a <section>, so the blanket 76px section
     padding stacks on top of the grid's own and leaves a huge dead band. */
  padding: 0;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  text-align: center; padding: 22px 0;
}
.stat + .stat { border-left: 1px solid var(--line-soft); }
.stat .num { font-family: var(--serif); font-weight: 500; font-size: 32px; color: var(--copper); line-height: 1.1; }
.stat .lbl { font-size: 12.5px; color: var(--muted); letter-spacing: .04em; }

/* ---------- Section furniture ---------- */
section { padding: 76px 0; }
.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-tag {
  display: inline-block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--copper); font-weight: 700; margin-bottom: 12px;
}
.section-head h2 { color: var(--sand); }
.section-head p { color: var(--muted); font-size: 17px; margin-bottom: 0; }
.alt { background: var(--alt); }

/* ---------- Services ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.svc-grid .feature { grid-column: span 3; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.svc-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--forest-700); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.svc-card:hover { border-color: var(--copper); transform: translateY(-3px); box-shadow: var(--shadow); }
.svc-thumb { aspect-ratio: 4 / 3; overflow: hidden; background: var(--forest-600); }
.feature .svc-thumb { aspect-ratio: 16 / 10; }
.svc-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.svc-card:hover .svc-thumb img { transform: scale(1.04); }
.svc-body { padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; }
.svc-body h3 { color: var(--sand); font-family: var(--serif); font-weight: 500; font-size: 22px; }
.feature .svc-body h3 { font-size: 26px; }
.svc-body p { color: var(--muted); font-size: 14.5px; margin-bottom: 14px; }
.svc-more { margin-top: auto; color: var(--copper); font-weight: 700; font-size: 14px; }
/* Cards without a photo yet still have to read as a real card, not a gap. */
.svc-thumb.placeholder {
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--forest-600), var(--forest-700));
  color: rgba(138,69,41,0.5);
}

/* ---------- Featured project ----------
   The grid gets an explicit height rather than letting the images size it.
   All four photos are tall portraits, so with auto height the three stacked
   ones ran to their intrinsic size, made the row far taller than the single
   main image, and left a large dead gap under it. */
.feat-grid {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px;
  height: clamp(420px, 46vw, 600px);
}
.feat-main {
  border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
  height: 100%; min-height: 0;
}
.feat-main img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.feat-side {
  display: grid; grid-template-rows: repeat(3, 1fr); gap: 14px;
  height: 100%; min-height: 0;
}
.feat-side img {
  width: 100%; height: 100%; min-height: 0; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--line);
}
.feat-caption {
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center;
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 14.5px;
}
.feat-caption b { color: var(--sand); font-weight: 700; }

/* ---------- Project-type strip (under the featured build) ---------- */
.strip-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 20px;
  margin: 46px 0 16px; padding-top: 26px; border-top: 1px solid var(--line);
}
.strip-label {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--copper); font-weight: 700;
}
.strip-all { font-size: 14px; font-weight: 700; text-decoration: none; }
.strip-all:hover { color: var(--copper-2); }

.type-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.type-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--forest-700); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.type-card:hover { border-color: var(--copper); transform: translateY(-3px); box-shadow: var(--shadow); }
.type-thumb { aspect-ratio: 1 / 1; overflow: hidden; background: var(--forest-600); }
.type-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.type-card:hover .type-thumb img { transform: scale(1.05); }
.type-thumb.placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(135deg, var(--forest-600), var(--forest-700));
  color: rgba(138,69,41,0.5);
}
.type-thumb .soon-label {
  font-family: var(--serif); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--copper);
  background: rgba(138,69,41,0.12);
  border: 1px solid rgba(138,69,41,0.45);
  border-radius: 999px; padding: 5px 13px;
}
.type-card h3 {
  font-family: var(--serif); font-weight: 500; font-size: 15px;
  color: var(--sand); margin: 0; padding: 12px 12px 14px; line-height: 1.3;
}

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gallery img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line);
}
.gallery.wide img { aspect-ratio: 4 / 3; }

/* ---------- Why band ---------- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.why-card {
  background: var(--forest-700); border: 1px solid var(--line);
  border-radius: 12px; padding: 26px 24px;
}
.why-num {
  width: 34px; height: 34px; border-radius: 8px; margin-bottom: 14px;
  background: rgba(138,69,41,0.12); color: var(--copper);
  display: grid; place-items: center; font-weight: 800; font-size: 15px;
}
.why-card h3 { color: var(--sand); }
.why-card p { color: var(--muted); font-size: 15px; margin-bottom: 14px; }
.we-do {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--copper);
}

/* ---------- Meet Alec ---------- */
.meet { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 44px; align-items: center; }
.meet-photo img { border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.meet h2 { color: var(--sand); }
.meet p { color: var(--muted); font-size: 16.5px; }
.meet-sign {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
  font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--sand);
}
.meet-sign span { display: block; font-family: var(--sans); font-size: 13px; color: var(--muted); letter-spacing: .05em; }

/* ---------- Testimonial ----------
   Shares the accent-band treatment defined above with the stats banner.
   The quote itself sits in a real bordered card so it reads as an object on
   the page rather than as loose text. */
.quote-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* Flex rather than auto-fit grid: with a single card auto-fit leaves a phantom
   empty track. One card centres at a readable measure; drop in a second or
   third and they share the row automatically. */
.quote-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 30px; max-width: 900px; margin: 0 auto;
}
.quote-card {
  position: relative; margin: 0; text-align: center;
  flex: 1 1 300px; max-width: 640px;
  background: rgba(237,240,231,0.06);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 44px 34px 30px;
  box-shadow: var(--shadow);
}
/* Oversized opening quote, sitting over the card edge so the block has a
   recognisable silhouette instead of being a plain rectangle of text. */
.quote-mark {
  position: absolute; top: -16px; left: 24px;
  font-family: var(--serif); font-weight: 500;
  font-size: 104px; line-height: 1; color: var(--copper);
  opacity: .3; pointer-events: none;
}
.stars { display: flex; justify-content: center; gap: 5px; margin-bottom: 20px; }
.stars svg { width: 22px; height: 22px; color: var(--copper); }
.quote-card blockquote {
  margin: 0 0 26px;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(17px, 1.9vw, 20px); line-height: 1.55;
  color: var(--muted);
}
/* Her opening two sentences, set larger. Same words, same order, just weighted
   the way a magazine weights a lead line. */
.quote-lead {
  display: block; margin-bottom: .55em;
  font-size: clamp(21px, 2.5vw, 27px); line-height: 1.4;
  color: var(--cream);
}
.quote-card figcaption {
  display: flex; align-items: center; justify-content: center; gap: 13px;
  padding-top: 22px; border-top: 1px solid var(--line);
}
.quote-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--copper); color: var(--on-copper);
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; font-size: 15px; letter-spacing: .5px;
}
.quote-who { display: flex; flex-direction: column; text-align: left; }
.quote-name { font-weight: 700; color: var(--sand); font-size: 15.5px; }
.quote-role {
  font-size: 11.5px; color: var(--muted);
  letter-spacing: .1em; text-transform: uppercase;
}

/* "How It Works" is a deep-forest band too, so the home page alternates
   dark / light all the way down instead of running light from the hero to the
   footer. Tokens re-scoped the same way the other bands do it. */
#process {
  background: var(--forest-900);
  --sand:       var(--band-strong);
  --cream:      var(--band-strong);
  --muted:      var(--band-muted);
  --copper:     var(--band-accent);
  --forest-700: rgba(237,240,231,0.05);
  --line:       rgba(237,240,231,0.16);
  --line-soft:  rgba(237,240,231,0.09);
  --on-copper:  #2C332B;
}

/* ---------- Process ----------
   Numbered cards with the specifics spelled out, same shape as the Nettles
   build. The bare numbered text this replaced gave no sense of what actually
   happens at each stage. */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.step {
  background: var(--forest-700); border: 1px solid var(--line);
  border-radius: 12px; padding: 24px 22px;
}
.step-num {
  width: 38px; height: 38px; border-radius: 999px;
  background: var(--copper); color: var(--on-copper);
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; font-size: 18px;
  margin-bottom: 15px;
}
.step h3 { color: var(--sand); margin: 0 0 7px; font-size: 18px; }
.step p { color: var(--muted); font-size: 14.5px; margin: 0; }
.step ul { list-style: none; padding: 0; margin: 14px 0 0; }
.step ul li {
  position: relative; padding-left: 18px; margin-bottom: 6px;
  font-size: 13px; color: var(--muted); line-height: 1.45;
}
.step ul li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--copper);
}

/* ---------- Areas ---------- */
.area-list { display: flex; flex-wrap: wrap; gap: 10px; }
.area-list a, .area-list span {
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--forest-700); color: var(--cream);
  text-decoration: none; font-size: 14.5px; font-weight: 600;
}
.area-list a:hover { border-color: var(--copper); color: var(--copper); }

/* ---------- Estimate form ---------- */
.est-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px; align-items: start; }
.est-points { list-style: none; padding: 0; margin: 24px 0 0; }
.est-points li {
  display: flex; gap: 11px; align-items: flex-start;
  color: var(--muted); font-size: 15.5px; margin-bottom: 13px;
}
.est-points svg { color: var(--copper); flex-shrink: 0; margin-top: 4px; }
.form-card {
  background: var(--forest-700); border: 1px solid var(--line);
  border-radius: 14px; padding: 28px; box-shadow: var(--shadow);
}
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 6px; color: var(--cream); }
.field .req { color: var(--copper); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border-radius: 8px;
  border: 1px solid var(--line); background: #F5F6F1;
  color: var(--cream); font-family: inherit; font-size: 15px;
}
.field textarea { min-height: 112px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--copper); box-shadow: 0 0 0 3px rgba(138,69,41,0.16);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Multi-select project type, styled as tappable chips */
.chip-field { border: 0; padding: 0; margin: 0 0 16px; }
.chip-field legend {
  padding: 0; font-size: 13.5px; font-weight: 700; color: var(--cream); margin-bottom: 8px;
}
.chip-field .hint { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-input { position: relative; }
/* The box itself is hidden but still focusable, so the label carries the ring. */
.chip-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-input label {
  display: inline-block; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: #F5F6F1;
  color: var(--cream); font-size: 13.5px; font-weight: 600;
  cursor: pointer; margin: 0; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.chip-input label:hover { border-color: var(--copper); color: var(--copper); }
.chip-input input:checked + label {
  background: var(--copper); border-color: var(--copper); color: var(--on-copper);
}
.chip-input input:focus-visible + label {
  outline: 2px solid var(--copper); outline-offset: 2px;
}
/* Netlify honeypot: hidden from people, irresistible to bots. */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--alt); text-align: center; border-top: 1px solid var(--line); }
.cta-band h2 { color: var(--sand); }
.cta-band p { color: var(--muted); max-width: 560px; margin: 0 auto 26px; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; }
/* Category headings so the page can be scanned instead of read straight down. */
.faq-group {
  font-family: var(--sans);
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--copper);
  margin: 46px 0 4px; padding-bottom: 10px;
  border-bottom: 1px solid var(--copper-2);
}
.faq-group:first-child { margin-top: 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  padding: 20px 40px 20px 0; cursor: pointer; position: relative;
  font-weight: 700; font-size: 16.5px; color: var(--cream); list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  color: var(--copper); font-size: 22px; font-weight: 400;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item[open] summary { color: var(--copper); }
.faq-item .answer { padding: 0 40px 22px 0; color: var(--muted); font-size: 15.5px; }
.faq-item .answer p:last-child { margin-bottom: 0; }

/* ---------- Interior page hero ---------- */
/* Interior pages open the same way the home page does: dark header straight
   into a dark banner, then the light body underneath. */
.page-hero {
  background: var(--forest-900);
  --sand:       var(--band-strong);
  --cream:      var(--band-strong);
  --muted:      var(--band-muted);
  --copper:     var(--band-accent);
  --line:       rgba(237,240,231,0.16);
  border-bottom: 1px solid rgba(237,240,231,0.14);
  padding: 56px 0 48px;
}
.page-hero h1 { color: var(--sand); margin-bottom: 14px; }
.page-hero p { color: var(--muted); font-size: 17.5px; max-width: 680px; margin-bottom: 0; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--copper); }

/* ---------- Prose (service page bodies) ---------- */
.prose { max-width: 740px; }
.prose h2 { color: var(--sand); margin-top: 40px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--cream); font-size: 16.5px; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 9px; }
.prose li::marker { color: var(--copper); }
.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start; }
.aside-card {
  background: var(--forest-700); border: 1px solid var(--line);
  border-radius: 12px; padding: 24px; position: sticky; top: 96px;
}
.aside-card h3 { color: var(--sand); font-family: var(--serif); font-weight: 500; font-size: 21px; }
.aside-card p { color: var(--muted); font-size: 14.5px; }
.aside-card .btn { width: 100%; }

/* Empty-gallery state: honest placeholder, never stock photography. */
.no-photos {
  border: 1px dashed var(--line); border-radius: 12px;
  padding: 34px 26px; text-align: center; color: var(--muted); font-size: 15px;
  background: rgba(38,43,37,0.02);
}
.no-photos strong { color: var(--sand); display: block; margin-bottom: 6px; font-size: 16px; }
.no-photos .soon-badge {
  display: inline-block;
  font-family: var(--serif); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--copper);
  background: rgba(138,69,41,0.12);
  border: 1px solid rgba(138,69,41,0.45);
  border-radius: 999px; padding: 5px 14px; margin-bottom: 14px;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--forest-900); border-top: 1px solid var(--line); padding: 54px 0 0; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; }
.foot-grid h4 {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--copper); margin: 0 0 14px;
}
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: 9px; }
/* Short link lists run as two columns so the footer does not become one long
   vertical stack. break-inside stops an item splitting across the gutter. */
.foot-grid ul.two-col { columns: 2; column-gap: 20px; }
.foot-grid ul.two-col li { break-inside: avoid; }
/* Eight towns as eight stacked rows made the footer taller than a phone screen.
   Flowing them inline wraps them into three or four lines instead. */
.foot-grid ul.foot-inline li { display: inline; margin: 0; line-height: 2.1; }
.foot-grid ul.foot-inline li:not(:last-child)::after {
  content: " \00B7 "; color: var(--muted); opacity: .55;
}
.foot-meta { color: var(--muted); font-size: 14.5px; margin: 12px 0 0; line-height: 1.7; }
.foot-grid a { color: var(--muted); text-decoration: none; font-size: 14.5px; }
.foot-grid a:hover { color: var(--sand); }
.foot-about p { color: var(--muted); font-size: 14.5px; max-width: 330px; }
/* Full white lockup here, tagline included: it sits on the dark footer band. */
.foot-logo { height: 76px; width: auto; display: block; margin: 0 0 18px; }
.foot-bottom {
  margin-top: 42px; padding: 20px 0; border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between;
  color: var(--muted); font-size: 13px;
}

.nav-backdrop { display: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-grid .feature { grid-column: span 2; }
  .why-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .meet { grid-template-columns: 1fr; gap: 30px; }
  .meet-photo { max-width: 420px; }
  .est-grid { grid-template-columns: 1fr; gap: 34px; }
  .split { grid-template-columns: 1fr; gap: 34px; }
  .aside-card { position: static; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .feat-grid { grid-template-columns: 1fr; height: auto; }
  .feat-main { height: auto; }
  .feat-main img { aspect-ratio: 4 / 3; height: auto; }
  .feat-side { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); height: auto; }
  .feat-side img { aspect-ratio: 1 / 1; height: auto; }
  .drop-menu { min-width: 420px; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; padding: 54px 0 60px; }
  .hero-inner { max-width: none; }
  .hero-figure { max-width: 520px; }
  .hero-figure img { aspect-ratio: 16 / 11; object-position: center 46%; }
  .type-strip { grid-template-columns: repeat(4, 1fr); }
}

/* Between the drawer breakpoint and this one the full horizontal menu is still
   shown, and the spelled-out phone number is the widest thing that can be given
   up. The icon stays, so the call is still one tap. */
@media (max-width: 1024px) {
  .nav-call span.num { display: none; }
}

/* Nav collapses to a right-hand drawer.
   This breaks earlier than the rest of the layout on purpose: the full
   horizontal menu plus the brand lockup, the call link and the Estimate
   button run out of room around 770px, so the drawer takes over well
   before anything gets pinned to the edges. */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .menu {
    /* Self-contained deep-forest panel. The drawer re-scopes the same tokens the
       accent bands use, so it renders identically no matter what colour the
       header above it happens to be. Without this the home page dark-header
       override painted the nav links near-white on a light drawer: contrast
       1.0, invisible. Keeping the drawer independent also means it survives the
       pending decision about a sitewide dark header. */
    --sand:       var(--band-strong);
    --cream:      var(--band-strong);
    --muted:      var(--band-muted);
    --copper:     var(--band-accent);
    --copper-2:   #d8a98a;
    --line:       rgba(237,240,231,0.16);
    --line-soft:  rgba(237,240,231,0.09);
    --on-copper:  #2C332B;

    position: fixed; inset: 0 0 0 auto; width: min(330px, 86vw);
    background: var(--forest-900); border-left: 1px solid rgba(237,240,231,0.16);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 84px 20px 30px; overflow-y: auto;
    transform: translateX(100%); z-index: 120;
    /* visibility, not just transform: a translated-off drawer is still in the
       tab order, so keyboard users would tab into invisible links. It flips
       at the end of the close transition and the start of the open one. */
    visibility: hidden;
    transition: transform .26s ease, visibility .26s;
    box-shadow: var(--shadow);
  }
  .menu.open { transform: translateX(0); visibility: visible; }
  .menu > li { border-bottom: 1px solid var(--line-soft); }
  .menu .navlink { padding: 15px 4px; width: 100%; justify-content: space-between; font-size: 16px; }
  /* In the drawer the submenu is an accordion, so hover must not open it. */
  .drop-menu {
    position: static; transform: none; opacity: 1; visibility: visible;
    min-width: 0; background: none; border: 0; box-shadow: none;
    padding: 0 0 12px 10px; grid-template-columns: 1fr; display: none;
  }
  .has-drop:hover .drop-menu { display: none; }
  .has-drop.open .drop-menu, .has-drop.open:hover .drop-menu { display: grid; transform: none; }
  .drop-head { padding: 10px 8px 2px; }
  .nav-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45);
    opacity: 0; visibility: hidden; transition: opacity .26s ease, visibility .26s; z-index: 110;
  }
  .nav-backdrop.open { opacity: 1; visibility: visible; }
}

@media (max-width: 760px) {
  section { padding: 56px 0; }
  /* Three stats stay in three columns here; the labels are short enough. */
  .stats-grid { grid-template-columns: repeat(3, 1fr); padding: 22px 0; }
  .stat .num { font-size: 27px; }
  .stat .lbl { font-size: 11.5px; }
  .type-strip { grid-template-columns: repeat(3, 1fr); }

  /* No sticky bottom bar: the header keeps a call button and an Estimate
     button visible at every width instead. */
  .nav-call span.num { display: none; }
  .cta-long { display: none; }
  .nav-actions .btn { padding: 10px 14px; font-size: 14px; }

  .hero-grid { padding: 44px 0 50px; gap: 30px; }
  .hero-figure img { aspect-ratio: 4 / 3; }
  /* Four steps read as a sequence, so they stack one per row on phones
     rather than sitting in a 2x2 block that breaks the reading order. */
  .quote-card { padding: 36px 20px 24px; }
  .quote-mark { font-size: 76px; top: -10px; left: 14px; }
  .steps { grid-template-columns: 1fr; row-gap: 14px; }
  .step { padding: 20px 18px; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .svc-grid, .svc-grid .feature { grid-template-columns: 1fr; }
  .svc-grid .feature { grid-column: span 1; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .form-card { padding: 22px 18px; }
  /* Footer stays two-up on phones. A single stacked column made it roughly
     three screens tall on its own. The logo and blurb span the full width;
     the four link blocks pair off below it. */
  .site-footer { padding-top: 38px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .foot-about { grid-column: 1 / -1; }
  .foot-about p { max-width: none; }
  .foot-logo { height: 58px; margin-bottom: 14px; }
  /* Nested two-up columns are too cramped inside a half-width block. */
  .foot-grid ul.two-col { columns: 1; }
  .foot-grid li { margin-bottom: 7px; }
  .foot-grid h4 { margin-bottom: 11px; }
  .foot-bottom { flex-direction: column; margin-top: 30px; }
}

@media (max-width: 480px) {
  /* The logo is a wide lockup, so it has to give way to the call and menu
     buttons rather than shove them off the edge. */
  .brand-logo { height: 34px; }
  .nav { gap: 10px; }
  .nav-actions { gap: 8px; }
  .foot-logo { height: 64px; }
}

@media (max-width: 420px) {
  /* The banner stays a single row of three at every width. Stacking it made
     the numbers read as three separate claims instead of one credential line. */
  .stats-grid { grid-template-columns: repeat(3, 1fr); padding: 18px 0; }
  .stat { padding: 0 6px; }
  .stat .num { font-size: 23px; }
  .stat .lbl { font-size: 10.5px; line-height: 1.3; }
  .gallery { grid-template-columns: 1fr; }
  .feat-side { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .type-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  .site-header, .cta-band, .nav-backdrop { display: none; }
  body { background: #fff; color: #000; }
}