/* ============================================================
   Stonebrook Landscape & Lawn template
   Palette: deep forest green / warm cream / antique brass.
   Type: Fraunces (display serif) + Inter (body).
   Cinematic documentary hero, architectural sharp-cornered cards,
   dark forest bands bookending the page for rhythm.
   ============================================================ */

@import url("../fonts/fonts.css");

:root {
  --cream: #F5F0E3;
  --cream-2: #EAE0C5;
  --white: #FFFFFF;
  --ink: #1E2018;
  --ink-soft: #33362B;
  --forest: #1B2F22;
  --forest-2: #28452F;
  --forest-hi: #4C7256;
  --brass: #A9822E;
  --brass-hi: #C7A047;
  --brass-deep: #7C5F20;
  --stone: #857F6D;
  --gold: #E0A83E;
  --line: rgba(30, 32, 24, .14);
  --line-light: rgba(245, 240, 227, .16);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --radius: 14px;
  --radius-s: 8px;
  --shadow: 0 18px 50px rgba(15, 20, 14, .16);
  --wrap: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
/* the fixed nav (82px) sits over the top of the page at every width, so an
   anchor jump needs scroll-padding-top or it lands the target flush under
   the header instead of visible below it. */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, canvas { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); margin: 0; line-height: 1.05; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 999; background: #fff; padding: 10px 16px; border-radius: 8px; }
.skip:focus { left: 8px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }
.section { padding-block: clamp(72px, 9vw, 120px); }
.section.alt { background: var(--cream-2); }
.section-head { max-width: 660px; margin-bottom: clamp(34px, 5vw, 56px); }
.section-head h2 { font-size: clamp(32px, 4.4vw, 54px); font-weight: 800; margin: 14px 0 15px; }
.section-head p { font-size: 18px; color: rgba(51, 54, 43, .78); margin: 0; }
.dark { background: var(--forest); color: rgba(245, 240, 227, .84); }
.dark h2, .dark h3, .dark h4 { color: var(--cream); }
.dark .section-head p { color: rgba(245, 240, 227, .72); }

/* ---------- eyebrow ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass-deep);
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--brass); }
.eyebrow.light { color: var(--brass-hi); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-weight: 700; font-size: 15.5px; letter-spacing: .01em;
  padding: 0 26px; height: 52px; border-radius: var(--radius-s);
  border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary { background: var(--brass); color: #fff; }
.btn-primary:hover { background: var(--brass-hi); transform: translateY(-2px); }
.btn-lg { height: 60px; padding: 0 34px; font-size: 17px; }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--cream); }
.hero .btn-ghost { color: var(--cream); border-color: rgba(245, 240, 227, .55); }
.hero .btn-ghost:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 800; color: var(--cream);
  transition: background .25s ease, box-shadow .25s ease, color .25s ease; }
.nav-in { display: flex; align-items: center; gap: 26px; height: 82px; }
.logo { display: flex; flex-direction: column; text-decoration: none; margin-right: auto; line-height: 1; gap: 4px; }
.logo-word { font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -.01em; color: inherit; }
.logo-sub { font-family: var(--font-body); font-size: 9.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: inherit; opacity: .72; }
.nav-links { display: flex; gap: 26px; }
.nav-links a { text-decoration: none; font-weight: 600; font-size: 14.5px; letter-spacing: .01em; opacity: .94; padding: 6px 0; position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--brass-hi); transition: width .22s ease; }
.nav-links a:hover::after { width: 100%; }
.nav-phone {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-weight: 800; font-size: 16px; letter-spacing: .01em; white-space: nowrap; color: inherit;
}
.nav-phone svg { color: var(--brass-hi); }
.nav .btn.nav-cta { height: 44px; padding: 0 20px; font-size: 14.5px; }
.nav.is-solid { background: rgba(245, 240, 227, .95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.nav.is-solid .nav-phone svg { color: var(--brass); }
/* color: inherit is load-bearing. A <button> resets color to buttontext (black),
   so the bars below, which paint with currentColor, ignore the cream and
   render near-invisible against a dark hero. */
.nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; color: inherit; }
.nav-burger span { width: 24px; height: 2px; background: currentColor; transition: transform .25s ease, opacity .25s ease; }
.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0; z-index: 790; background: var(--forest); color: var(--cream); display: none; flex-direction: column; justify-content: center; padding: 40px clamp(24px, 6vw, 48px); }
.menu-open .mobile-menu { display: flex; }
.mobile-menu a { text-decoration: none; }
.mobile-menu nav a { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 8vw, 42px); padding: 12px 0; border-bottom: 1px solid var(--line-light); }
.mobile-menu .mm-foot { margin-top: 34px; display: flex; flex-direction: column; gap: 16px; }
.mobile-menu .nav-phone { font-size: 22px; }

/* ---------- hero: cinematic documentary ---------- */
/* Full-bleed video/photo, vertically centered headline (house hard rule:
   hero text is never bottom-aligned), no card. A slim stat ribbon runs the
   full width along the very bottom edge. */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; color: var(--cream); overflow: hidden; }
.hero-media { position: absolute; inset: 0; background: var(--forest); }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-fallback { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.hero-slide.is-active { opacity: 1; }
/* dark band at top (nav legibility) and a heavier one at the bottom (headline +
   ribbon legibility), with the middle left clearer so the footage reads. */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 19, 13, .60) 0%, rgba(15, 19, 13, .22) 26%,
      rgba(15, 19, 13, .40) 50%, rgba(15, 19, 13, .62) 78%, rgba(15, 19, 13, .9) 100%);
}
/* horizontal alignment comes from the nested .wrap now (matches the nav's
   container exactly), so hero-in only carries vertical spacing. */
.hero-in { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 118px 0 0; }
/* .wrap's centering (max-width + margin-inline:auto) is written for normal
   block layout, where width:auto fills the container before the max-width
   cap applies. As a flex item here, width:auto does NOT fill: a flex item
   with both cross-axis margins auto is disqualified from stretch (spec
   9.4) and instead shrink-wraps to its content, so it rendered ~880px wide
   (hero-content's 800px + this padding) and off-center instead of matching
   the nav's 1240px box. An explicit width forces a definite cross size so
   max-width + the auto margins center it exactly like every other .wrap. */
.hero-in > .wrap { width: 100%; }
.hero-content { max-width: 800px; padding-bottom: clamp(36px, 5vw, 56px); }
.hero-kicker { font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(245, 240, 227, .95); display: inline-flex; align-items: center; gap: 10px; text-shadow: 0 1px 3px rgba(10, 16, 8, .85), 0 2px 14px rgba(10, 16, 8, .6); }
.hero-kicker::before { content: ""; width: 26px; height: 2px; background: var(--brass-hi); }
.hero h1 {
  color: var(--cream); font-weight: 800; font-size: clamp(42px, 7.4vw, 106px); line-height: 1.02;
  letter-spacing: -.015em; margin: 16px 0 0; max-width: 13ch; text-shadow: 0 4px 40px rgba(0, 0, 0, .4);
}
.hero-sub { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; max-width: 50ch; color: rgba(245, 240, 227, .92); margin: 20px 0 0; text-shadow: 0 1px 3px rgba(10, 16, 8, .7), 0 2px 16px rgba(0, 0, 0, .5); }
.hero-load h1, .hero-load .hero-kicker, .hero-load .hero-sub, .hero-load .hero-cta-row { opacity: 0; transform: translateY(24px); }
.hero-ready h1, .hero-ready .hero-kicker, .hero-ready .hero-sub, .hero-ready .hero-cta-row { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s cubic-bezier(.2, .6, .2, 1); }
.hero-ready .hero-kicker { transition-delay: .05s; }
.hero-ready h1 { transition-delay: .15s; }
.hero-ready .hero-sub { transition-delay: .3s; }
.hero-ready .hero-cta-row { transition-delay: .4s; }

.hero-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px; }
.hero-call { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; color: #fff;
  height: 60px; padding: 0 26px 0 18px; border-radius: var(--radius-s); background: var(--brass);
  box-shadow: 0 14px 34px rgba(169, 130, 46, .4); transition: background .2s ease, transform .2s ease; }
.hero-call:hover { background: var(--brass-hi); transform: translateY(-2px); }
.hero-call svg { width: 22px; height: 22px; flex: none; }
.hero-call span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.hero-call small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; opacity: .85; }
.hero-call b { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -.01em; }
.hero-estimate-btn { height: 60px; padding: 0 28px; border-radius: var(--radius-s); border: 1.5px solid rgba(245, 240, 227, .6);
  background: rgba(15, 19, 13, .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--cream); font-weight: 700; font-size: 15.5px; display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.hero-estimate-btn:hover { background: rgba(245, 240, 227, .14); border-color: var(--cream); transform: translateY(-2px); }
.hero-estimate-btn svg { width: 17px; height: 17px; }

/* slim full-width stat ribbon along the hero's bottom edge; doubles as proof
   chips. The band (background/blur/divider) stays full-bleed edge to edge,
   but the grid inside is a .wrap so item 1's icon and item 4's text align to
   the same left/right edges as the nav logo and the hero headline above. */
.hero-ribbon { position: relative; z-index: 2;
  background: rgba(15, 19, 13, .5); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border-top: 1px solid rgba(245, 240, 227, .16); }
.hr-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
/* padding max trimmed from 28px to 22px: containing the ribbon to the .wrap
   width (was near-full-bleed before) cost each column ~40px, enough to
   ellipsis-clip the longest stat ("210+ weekly maintenance clients") by a
   few px at wide desktop widths. The extra 12px this reclaims covers it. */
.hr-item { display: flex; align-items: center; gap: 10px; padding: 17px clamp(14px, 2.4vw, 22px); border-right: 1px solid rgba(245, 240, 227, .13);
  font-size: 13px; font-weight: 600; color: rgba(245, 240, 227, .95); min-width: 0; }
.hr-item:last-child { border-right: 0; }
.hr-item svg { width: 18px; height: 18px; flex: none; color: var(--brass-hi); }
.hr-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* cancel the item's own edge padding at the grid's outer edges so the wrap's
   padding-inline is the only inset there (no double gap vs. the headline). */
.hr-grid .hr-item:first-child { padding-left: 0; }
.hr-grid .hr-item:last-child { padding-right: 0; }

/* ---------- estimate drawer (slide-over) ---------- */
.drawer-scrim { position: fixed; inset: 0; background: rgba(15, 19, 13, .58); z-index: 950; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.drawer-scrim.is-open { opacity: 1; pointer-events: auto; }
.estimate-drawer { position: fixed; top: 0; right: 0; height: 100dvh; width: min(460px, 100vw); z-index: 960;
  background: var(--cream); box-shadow: -34px 0 80px rgba(10, 13, 9, .4); transform: translateX(100%);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1); display: flex; flex-direction: column; }
.estimate-drawer.is-open { transform: translateX(0); }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 26px 26px 0; flex: none; }
.drawer-close { background: rgba(30, 32, 24, .06); border: 0; width: 38px; height: 38px; border-radius: 50%; color: var(--ink);
  font-size: 20px; line-height: 1; cursor: pointer; flex: none; display: flex; align-items: center; justify-content: center; transition: background .15s ease; }
.drawer-close:hover { background: rgba(30, 32, 24, .12); }
.drawer-body { padding: 6px 26px 30px; overflow-y: auto; flex: 1; }
.drawer-flag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--forest-2); margin-bottom: 14px; }
.drawer-flag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2E9B57; box-shadow: 0 0 0 3px rgba(46, 155, 87, .22); }
.estimate-drawer h2 { font-size: 27px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.drawer-sub { font-size: 14.5px; color: rgba(51, 54, 43, .74); margin: 0 0 22px; }
.d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.d-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 13px; }
.d-field.full { grid-column: 1 / -1; }
.d-field label { font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--ink); }
.d-field input, .d-field select {
  height: 50px; padding: 0 14px; font-family: var(--font-body); font-size: 15.5px; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius-s);
  transition: border-color .18s ease, box-shadow .18s ease; width: 100%; appearance: none;
}
.d-field select { cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231E2018'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 20px; padding-right: 34px; }
.d-field input:focus, .d-field select:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(169, 130, 46, .18); }
.d-field input.bad, .d-field select.bad { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192, 57, 43, .16); }
.estimate-drawer .chips button { border-color: var(--line); }
.estimate-drawer .btn { width: 100%; margin-top: 6px; height: 56px; font-size: 16px; }
.d-note { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgba(51, 54, 43, .62); margin: 13px 0 0; }
.d-note svg { width: 14px; height: 14px; flex: none; color: var(--forest-2); }
.d-step { display: none; }
.d-step.on { display: block; animation: dIn .3s ease; }
@keyframes dIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.d-done { text-align: center; padding: 40px 4px 10px; }
.d-done .mark { width: 60px; height: 60px; border-radius: 50%; background: var(--brass); color: #fff; font-size: 30px;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; box-shadow: 0 10px 26px rgba(169, 130, 46, .4); }
.d-done h2 { margin-bottom: 10px; }
.d-done p { font-size: 15px; color: rgba(51, 54, 43, .78); }

/* ---------- trust / credentials strip ---------- */
.trust { border-bottom: 1px solid var(--line); background: var(--cream); }
.trust-in { display: flex; align-items: center; flex-wrap: nowrap; gap: 44px; padding: 24px clamp(20px, 4vw, 44px);
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.trust-in::-webkit-scrollbar { display: none; }
.trust-in > * { flex: none; }
.trust-in.is-centered { justify-content: center; }

/* Google rating block — shared below-hero + footer */
.rating-blk { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; color: var(--ink); flex: none; }
.rating-blk > svg { width: 32px; height: 32px; flex: none; }
.rating-blk .rb-meta { display: flex; flex-direction: column; }
.rating-blk .rb-top { display: flex; align-items: center; gap: 9px; line-height: 1; }
.rating-blk .rb-top b { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -.02em; }
.rating-blk .rb-stars { color: var(--gold); font-size: 16px; letter-spacing: 1.5px; }
.rating-blk .rb-sub { font-size: 12.5px; color: var(--stone); margin-top: 4px; font-weight: 600; }
.rating-blk:hover .rb-sub { color: var(--ink-soft); }
.rating-lg > svg { width: 36px; height: 36px; }
.rating-lg .rb-top b { font-size: 29px; }

/* credential badges */
.cred { display: inline-flex; align-items: center; gap: 11px; }
.cred-em { width: 36px; height: 36px; border-radius: var(--radius-s); flex: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(30, 32, 24, .16); }
.cred-em svg { width: 20px; height: 20px; }
.cred-em-g { background: #fff; box-shadow: 0 3px 8px rgba(30, 32, 24, .16), inset 0 0 0 1px var(--line); }
.cred-em-g svg { width: 22px; height: 22px; }
.cred-t b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; line-height: 1.2; color: var(--ink); }
.cred-t em { display: block; font-style: normal; font-size: 11.5px; color: var(--stone); margin-top: 1px; }

/* ---------- services ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; }
.svc:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.svc-img { aspect-ratio: 16 / 9.4; overflow: hidden; }
.svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.svc:hover .svc-img img { transform: scale(1.045); }
.svc-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.svc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.svc h3 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.svc-range { font-size: 12.5px; font-weight: 700; letter-spacing: .01em; color: var(--brass-deep); white-space: nowrap; }
.svc p { font-size: 15px; color: rgba(51, 54, 43, .78); margin: 0; flex: 1; }
.svc-cta { font-size: 13.5px; font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; }
.svc-cta::after { content: "→"; color: var(--brass); transition: transform .2s ease; }
.svc:hover .svc-cta::after { transform: translateX(5px); }

/* ---------- lawn care programs (recurring revenue) ---------- */
.prog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.prog { position: relative; background: rgba(245, 240, 227, .05); border: 1px solid rgba(245, 240, 227, .2);
  border-radius: var(--radius); padding: 34px 28px 30px; display: flex; flex-direction: column; }
.prog-hi { background: var(--cream); color: var(--ink); border-color: var(--brass); transform: translateY(-12px);
  box-shadow: 0 26px 64px rgba(0, 0, 0, .38); }
.prog-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--brass); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 7px 16px; border-radius: 999px; white-space: nowrap; }
.prog-name { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.01em; color: var(--cream); }
.prog-hi .prog-name { color: var(--ink); }
.prog-price-row { display: flex; align-items: baseline; gap: 4px; margin: 12px 0 4px; }
.prog-price { font-family: var(--font-display); font-weight: 800; font-size: 44px; letter-spacing: -.02em; color: var(--cream); }
.prog-hi .prog-price { color: var(--ink); }
.prog-period { font-size: 15px; font-weight: 700; color: var(--brass-hi); }
.prog-hi .prog-period { color: var(--brass-deep); }
.prog-detail { font-size: 14px; color: rgba(245, 240, 227, .74); margin: 0 0 22px; }
.prog-hi .prog-detail { color: rgba(51, 54, 43, .72); }
.prog ul { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.prog li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: rgba(245, 240, 227, .9); }
.prog-hi li { color: rgba(30, 32, 24, .84); }
.prog li::before { content: "✓"; color: var(--brass-hi); font-weight: 800; flex: none; }
.prog-hi li::before { color: var(--brass); }
.prog .btn { width: 100%; }
.prog:not(.prog-hi) .btn-primary { background: rgba(245, 240, 227, .12); color: var(--cream); border: 1.5px solid rgba(245, 240, 227, .4); }
.prog:not(.prog-hi) .btn-primary:hover { background: rgba(245, 240, 227, .2); }

/* ---------- design-build transformation (before / after) ---------- */
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.ba-item { display: flex; flex-direction: column; gap: 14px; }
.ba { position: relative; aspect-ratio: 16 / 10.6; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--forest); user-select: none; touch-action: pan-y; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba .ba-before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.ba-tag { position: absolute; top: 14px; z-index: 3; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 6px 11px; background: rgba(15, 19, 13, .78); color: var(--cream); border-radius: 5px; }
.ba-tag.before { left: 14px; }
.ba-tag.after { right: 14px; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); z-index: 2; width: 2px; background: var(--cream); transform: translateX(-1px); box-shadow: 0 0 0 .5px rgba(15, 19, 13, .3); }
.ba-handle::after { content: "⟷"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: var(--brass); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700; box-shadow: 0 6px 18px rgba(15, 19, 13, .35); }
.ba input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 4; }
.ba-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ba-meta h3 { font-size: 19px; font-weight: 700; }
.ba-note { font-size: 13px; font-weight: 600; color: var(--stone); }

/* ---------- process ---------- */
.proc { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.proc-step { position: relative; padding-top: 20px; }
.proc-num { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--brass); color: var(--brass-deep); font-family: var(--font-display); font-weight: 800; font-size: 17px; margin-bottom: 16px; }
.proc-week { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brass-deep); display: block; margin-bottom: 8px; }
.proc-step h3 { font-size: 19px; font-weight: 700; }
.proc-step p { font-size: 14.5px; color: rgba(51, 54, 43, .78); margin-top: 10px; }

/* ---------- photo gallery + lightbox ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery-item { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-s); cursor: zoom-in; border: 0; padding: 0; display: block; width: 100%; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item .cap { position: absolute; inset: auto 0 0 0; padding: 10px 12px 9px; background: linear-gradient(0deg, rgba(15, 19, 13, .8), transparent);
  color: #fff; font-size: 12px; font-weight: 600; text-align: left; opacity: 0; transition: opacity .25s ease; }
.gallery-item:hover .cap, .gallery-item:focus-visible .cap { opacity: 1; }
.lightbox { position: fixed; inset: 0; z-index: 980; background: rgba(10, 13, 9, .95); display: none; align-items: center; justify-content: center; flex-direction: column; padding: 60px 20px 40px; }
.lightbox.is-open { display: flex; }
.lightbox-frame { position: relative; display: flex; align-items: center; justify-content: center; max-width: 100%; }
.lightbox img { max-width: min(1100px, 88vw); max-height: 70vh; border-radius: 10px; object-fit: contain; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.lightbox-cap { color: var(--cream); margin-top: 18px; font-size: 14px; text-align: center; }
.lightbox-close { position: absolute; top: 18px; right: 20px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(245, 240, 227, .3);
  background: rgba(245, 240, 227, .08); color: var(--cream); font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lightbox-close:hover { background: rgba(245, 240, 227, .18); }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(245, 240, 227, .3); background: rgba(245, 240, 227, .08); color: var(--cream); font-size: 22px; cursor: pointer; }
.lightbox-nav:hover { background: rgba(245, 240, 227, .18); }
.lightbox-prev { left: -64px; }
.lightbox-next { right: -64px; }

/* ---------- reviews (Google style) ---------- */
.reviews-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.g-summary { display: flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 14px 20px; box-shadow: var(--shadow); }
.g-score { display: flex; align-items: center; gap: 10px; }
.g-score b { font-family: var(--font-display); font-size: 30px; font-weight: 800; color: var(--ink); line-height: 1; }
.g-stars { color: var(--gold); font-size: 18px; letter-spacing: .05em; }
.g-count { font-size: 13px; color: var(--stone); margin-top: 3px; }
.greviews { position: relative; }
.greviews-track { display: flex; gap: 20px; overflow-x: auto; padding: 8px clamp(20px, 4vw, 40px) 20px; -ms-overflow-style: none; scrollbar-width: none; }
.greviews-track::-webkit-scrollbar { display: none; }
.greview { flex: 0 0 clamp(290px, 78vw, 400px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 24px 26px; box-shadow: 0 8px 24px rgba(30, 32, 24, .06); display: flex; flex-direction: column; }
.greview-top { display: flex; align-items: center; gap: 13px; }
.gavatar { position: relative; overflow: hidden; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 19px; flex: none; }
.gavatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gname { font-weight: 700; font-size: 15.5px; color: var(--ink); line-height: 1.2; }
.gsub { font-size: 12.5px; color: var(--stone); margin-top: 2px; }
.greview-top .g-mark { margin-left: auto; width: 22px; height: 22px; flex: none; }
.greview .g-row { display: flex; align-items: center; gap: 8px; margin: 14px 0 10px; }
.greview .g-row .g-stars { font-size: 16px; }
.greview .g-when { font-size: 12.5px; color: var(--stone); }
.gtext { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; flex: 0 1 auto; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; }
.g-nav { position: absolute; top: 42%; z-index: 5; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.g-nav:hover { background: var(--ink); color: var(--cream); }
.g-prev { left: 6px; }
.g-next { right: 6px; }

/* ---------- stats + credentials band ---------- */
.awards-sec { padding-block: clamp(56px, 7vw, 84px); }
.awards-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line-light); }
.stat .n { font-family: var(--font-display); font-weight: 800; font-size: clamp(38px, 4.4vw, 56px); color: var(--cream); line-height: 1; letter-spacing: -.02em; }
.stat .n em { color: var(--brass-hi); font-style: normal; }
.stat .l { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(245, 240, 227, .62); margin-top: 10px; display: block; font-weight: 600; }
.awards-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 40px; }
.award { grid-column: span 2; display: flex; align-items: center; gap: 15px; background: rgba(245, 240, 227, .05); border: 1px solid var(--line-light); border-radius: var(--radius-s); padding: 18px 20px; }
.award .cred-em { width: 48px; height: 48px; border-radius: 11px; box-shadow: 0 4px 12px rgba(0, 0, 0, .28); }
.award .cred-em svg { width: 26px; height: 26px; }
.award b { display: block; color: var(--cream); font-family: var(--font-display); font-weight: 700; font-size: 14.5px; line-height: 1.2; }
.award > div > span { display: block; font-size: 12.5px; color: rgba(245, 240, 227, .6); margin-top: 3px; }

/* ---------- service area ---------- */
.areas-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.area-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.area-chips span { font-size: 13.5px; font-weight: 600; border: 1px solid var(--line); background: var(--white); border-radius: 999px; padding: 9px 16px; }
.areas-note { margin-top: 20px; font-size: 14.5px; color: rgba(51, 54, 43, .7); }

/* ---------- faq ---------- */
.faq-wrap { max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 24px; color: var(--brass); transition: transform .25s ease; flex: none; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a { padding: 0 0 24px; max-width: 64ch; color: rgba(51, 54, 43, .82); font-size: 15.5px; }

/* ---------- bottom estimate ---------- */
.estimate-grid { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.est-copy h2 { font-size: clamp(34px, 4.6vw, 54px); font-weight: 800; margin: 14px 0 18px; }
.est-copy .promise { font-size: 17.5px; color: rgba(245, 240, 227, .88); max-width: 46ch; }
.est-points { list-style: none; margin: 26px 0 30px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.est-points li { display: flex; gap: 12px; align-items: baseline; font-size: 15.5px; color: rgba(245, 240, 227, .88); }
.est-points li::before { content: "✓"; color: var(--brass-hi); font-weight: 800; flex: none; }
.est-phone { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--cream); }
.est-phone svg { color: var(--brass-hi); }
.est-phone span { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3vw, 34px); letter-spacing: -.01em; }
.est-meta { margin-top: 14px; font-size: 13px; color: rgba(245, 240, 227, .6); }
.form-card { background: var(--cream); border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.form-card h3 { font-size: 22px; font-weight: 700; margin-bottom: 4px; color: var(--ink); }
.form-sub { font-size: 14px; color: rgba(51, 54, 43, .64); margin-bottom: 22px; }
.f-step { display: none; }
.f-step.on { display: block; animation: fIn .3s ease; }
@keyframes fIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.f-field { display: flex; flex-direction: column; gap: 7px; }
.f-field.full { grid-column: 1 / -1; }
.f-field label { font-size: 13px; font-weight: 700; color: var(--ink); }
.f-field input, .f-field select { height: 52px; border: 1.5px solid var(--line); border-radius: var(--radius-s); padding: 0 16px; font-size: 15.5px; font-family: inherit; background: var(--white); color: var(--ink); width: 100%; appearance: none; }
.f-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231E2018' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.f-field input:focus, .f-field select:focus { outline: none; border-color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips button { border: 1.5px solid var(--line); background: var(--white); color: var(--ink); border-radius: 999px; padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.f-opt { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: rgba(51, 54, 43, .7); margin-top: 16px; }
.f-opt input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--brass); }
.f-submit { width: 100%; margin-top: 20px; }
.f-note { text-align: center; font-size: 12px; color: rgba(51, 54, 43, .55); margin-top: 14px; }
.f-done { text-align: center; padding: 30px 6px; }
.f-done .mark { width: 58px; height: 58px; border-radius: 50%; background: var(--brass); color: #fff; font-size: 26px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.f-done h3 { margin-bottom: 10px; }
.f-done p { font-size: 15px; color: rgba(51, 54, 43, .78); }

/* ---------- footer ---------- */
.footer { padding-top: clamp(28px, 3.5vw, 48px); background: #142219; }
.footer .logo-word, .footer .logo-sub { color: var(--cream); }
.foot-grid { display: grid; grid-template-columns: 4fr 2.4fr 2.4fr 3.2fr; gap: 36px; padding-bottom: 44px; border-bottom: 1px solid var(--line-light); }
.foot-grid h4 { color: var(--cream); font-size: 15px; margin-bottom: 16px; font-weight: 700; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot-grid a { text-decoration: none; font-size: 14.5px; color: rgba(245, 240, 227, .74); }
.foot-grid a:hover { color: var(--cream); }
.foot-phone { font-weight: 800 !important; font-size: 17px !important; color: var(--cream) !important; }
.foot-muted { font-size: 14px; color: rgba(245, 240, 227, .6); }
.foot-brand p { font-size: 14.5px; color: rgba(245, 240, 227, .74); max-width: 30ch; margin: 14px 0 18px; }
.foot-brand .logo { margin-bottom: 4px; }
.social { display: flex; gap: 10px; }
.social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-light); display: flex; align-items: center; justify-content: center; color: rgba(245, 240, 227, .82); transition: background .2s, color .2s, border-color .2s; }
.social a:hover { background: var(--brass); border-color: var(--brass); color: #fff; }
.social svg { width: 18px; height: 18px; }
.badge-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; padding: 28px 0; border-bottom: 1px solid var(--line-light); }
.foot-creds { display: flex; flex-wrap: wrap; align-items: center; gap: 17px 28px; }
.rating-foot, .rating-foot .rb-top b { color: var(--cream); }
.rating-foot .rb-sub { color: rgba(245, 240, 227, .6); }
.rating-foot:hover .rb-sub { color: rgba(245, 240, 227, .82); }
.cred-foot .cred-t b { color: var(--cream); }
.cred-foot .cred-t em { color: rgba(245, 240, 227, .55); }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; align-items: center; padding: 22px 0 30px; font-size: 12.5px; color: rgba(245, 240, 227, .5); }
.foot-bottom a { color: rgba(245, 240, 227, .74); }

/* ---------- mobile call bar ---------- */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 850; display: none; grid-template-columns: 1fr 1fr 1.4fr; gap: 1px; background: var(--ink); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 30px rgba(15, 19, 13, .25); }
.callbar a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 60px; text-decoration: none; font-weight: 700; font-size: 14.5px; background: var(--ink); color: var(--cream); }
.callbar a.cb-est { background: var(--brass); color: #fff; }

/* ---------- reveals ---------- */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .6, .2, 1); transition-delay: calc(var(--i, 0) * 80ms); }
.rv.on { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}
@media (max-width: 1020px) {
  .hero h1 { max-width: 11ch; }
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .prog-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .prog-hi { transform: none; }
  .proc { grid-template-columns: 1fr 1fr; gap: 30px 26px; }
  .areas-grid, .estimate-grid { grid-template-columns: 1fr; }
  .awards-grid { grid-template-columns: repeat(4, 1fr); }
  .award { grid-column: span 2; }
  .awards-stats { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .nav-links, .nav .nav-phone, .nav .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .hero { padding-bottom: 60px; }
  .hr-grid { grid-template-columns: 1fr 1fr; }
  .hr-item:nth-child(2) { border-right: 0; }
  .hr-item:nth-child(3), .hr-item:nth-child(4) { border-top: 1px solid rgba(245, 240, 227, .13); }
  .hr-item { align-items: flex-start; padding: 14px clamp(12px, 3vw, 20px); font-size: 12px; line-height: 1.35; }
  .hr-item svg { margin-top: 1px; }
  .hr-item span { white-space: normal; overflow: visible; text-overflow: clip; }
  /* two columns now, so the left/right edge cancel-out must apply per
     column (odd = left column, even = right column), not just first/last. */
  .hr-grid .hr-item:nth-child(odd) { padding-left: 0; }
  .hr-grid .hr-item:nth-child(even) { padding-right: 0; }
  /* item 4 (bottom-right cell) sits near the persistent chat launcher, which
     is fixed bottom-right and raised above the call bar on mobile. Order the
     stats so the one most likely to be partly covered is the one already
     reinforced again in the trust bar and credentials band below. */
  .ba-grid { grid-template-columns: 1fr; }
  .proc { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .callbar { display: grid; }
  body { padding-bottom: 60px; }
  html { scroll-padding-bottom: 76px; }
  .reviews-head { align-items: flex-start; }
  .estimate-drawer { bottom: 60px; height: calc(100dvh - 60px); }
  .drawer-scrim { bottom: 60px; }
}
@media (max-width: 560px) {
  .f-grid, .d-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(38px, 12vw, 52px); max-width: 10ch; }
  .hero-call { height: 56px; padding: 0 20px 0 16px; }
  .hero-call b { font-size: 18px; }
  .hero-estimate-btn { height: 56px; padding: 0 22px; }
  .foot-grid { grid-template-columns: 1fr; }
  .awards-grid { grid-template-columns: 1fr; }
  .award { grid-column: span 1; }
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .svc-top { flex-direction: column; align-items: flex-start; gap: 3px; }
}

/* chat bubble rides above the mobile call bar */
@media (max-width: 768px) { .cw-root { bottom: 74px !important; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .hero-load h1, .hero-load .hero-kicker, .hero-load .hero-sub, .hero-load .hero-cta-row { opacity: 1; transform: none; }
  .hero-slide { transition: none; }
  .svc, .svc-img img { transition: none; }
  .estimate-drawer, .drawer-scrim { transition: none; }
}