/* ==========================================================================
   HILLTOP LANDSCAPING & EXTERIOR SERVICES
   Design system — dark / cinematic / premium
   Built by OptiPath AI
   ========================================================================== */

:root {
  --bg: #0D0D0D;
  --bg-alt: #141414;
  --bg-card: #1C1C1C;
  --bg-card-hover: #222222;
  --green: #2F5235;
  --green-deep: #233E29;
  --green-bright: #4E9457;
  --sun: #F4BC77;
  --sun-bright: #FBD58B;
  --sun-deep: #E9995B;
  --navy: #0D1B2A;
  --navy-glow: #16324f;
  --white: #FFFFFF;
  --gray: #B0B0B0;
  --gray-dim: #7a7a7a;
  --line: rgba(255, 255, 255, 0.08);
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 84px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  /* clip (not hidden): kills sideways scroll AND stops mobile browsers
     expanding the layout viewport for decorative off-canvas layers */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--green); color: #fff; }

/* Film grain over everything — premium texture */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation: grain 9s steps(6) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -2%); }
  80% { transform: translate(3%, 3%); }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Type scale ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--green-bright);
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--green);
  flex-shrink: 0;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--green);
  flex-shrink: 0;
}
.section-title {
  font-size: clamp(44px, 6.5vw, 88px);
  margin: 18px 0 22px;
}
.section-title .accent { color: var(--green-bright); }
.section-title .outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.55);
}
.lead {
  color: var(--gray);
  font-size: clamp(16px, 1.6vw, 19px);
  max-width: 640px;
}

/* ---------- Layout helpers ---------- */
.wrap { width: min(1240px, 92vw); margin: 0 auto; position: relative; }
.section { position: relative; padding: clamp(90px, 12vw, 150px) 0; }
.section--alt { background: var(--bg-alt); }
.section--navy { background: linear-gradient(160deg, var(--navy) 0%, #0a1420 55%, var(--bg) 100%); }

/* Diagonal architectural cuts between sections */
.cut-top { clip-path: polygon(0 0, 100% 3.5vw, 100% 100%, 0 100%); margin-top: -3.6vw; padding-top: calc(clamp(90px, 12vw, 150px) + 3.5vw); }
.cut-top--rev { clip-path: polygon(0 3.5vw, 100% 0, 100% 100%, 0 100%); margin-top: -3.6vw; padding-top: calc(clamp(90px, 12vw, 150px) + 3.5vw); }

/* Ambient edge glows */
.glow-green::before,
.glow-navy::before {
  content: "";
  position: absolute;
  width: 60vw;
  height: 60vw;
  max-width: 800px;
  max-height: 800px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.13;
  pointer-events: none;
}
.glow-green::before { background: var(--green-deep); top: -20%; left: -25%; }
.glow-navy::before { background: #1a3a5c; bottom: -20%; right: -25%; }
/* Glow circles hang past the section edge; clip sideways so they can't
   widen the page on phones (vertical bleed stays visible) */
.glow-green, .glow-navy { overflow-x: clip; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 18px 36px;
  overflow: hidden;
  transition: color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), transform 0.2s var(--ease-out), box-shadow 0.35s var(--ease-out);
  isolation: isolate;
}
.btn:active { transform: scale(0.97); }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateX(-101%);
  transition: transform 0.45s var(--ease-out);
}
.btn--primary { background: linear-gradient(135deg, var(--green-bright), var(--green)); color: #fff; }
.btn--primary::before { background: var(--green-deep); }
.btn--primary:hover::before { transform: translateX(0); }
.btn--primary:hover { box-shadow: 0 0 34px rgba(78, 148, 87, 0.4); }
.btn--ghost { border: 1.5px solid rgba(255, 255, 255, 0.35); color: #fff; }
.btn--ghost::before { background: #fff; }
.btn--ghost:hover { color: #0d0d0d; border-color: #fff; }
.btn--ghost:hover::before { transform: translateX(0); }
.btn .arrow { transition: transform 0.35s var(--ease-out); }
.btn:hover .arrow { transform: translateX(5px); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  transition: background 0.4s ease, box-shadow 0.4s ease, height 0.4s ease;
  background: linear-gradient(rgba(13, 13, 13, 0.75), rgba(13, 13, 13, 0));
}
.site-header.scrolled {
  background: rgba(13, 13, 13, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line), 0 10px 40px rgba(0, 0, 0, 0.4);
}
.nav-inner {
  width: min(1360px, 94vw);
  margin: 0 auto;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 32px;
}
.logo { flex-shrink: 0; display: flex; align-items: center; }
.logo img { height: 76px; width: auto; transition: transform 0.3s var(--ease-out); }
.logo:hover img { transform: scale(1.04); }
.nav-links { display: flex; gap: 34px; margin-left: auto; align-items: center; }
.nav-links > a, .nav-drop > a {
  position: relative;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  padding: 6px 0;
  transition: color 0.3s;
}
.nav-links > a::after, .nav-drop > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--green-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.nav-links > a:hover, .nav-links > a[aria-current="page"],
.nav-drop > a:hover, .nav-drop > a[aria-current="page"] { color: #fff; }
.nav-links > a:hover::after, .nav-links > a[aria-current="page"]::after,
.nav-drop > a:hover::after, .nav-drop > a[aria-current="page"]::after { transform: scaleX(1); }

/* Services mega-dropdown */
.nav-drop { position: relative; }
.nav-drop > a .caret {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.3s var(--ease-out);
}
.nav-drop:hover > a .caret { transform: rotate(225deg) translateY(-1px); }
.dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  padding-top: 18px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-out), transform 0.35s var(--ease-out), visibility 0.3s;
  z-index: 960;
}
.nav-drop:hover .dropdown, .nav-drop:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dropdown__panel {
  width: min(780px, calc(100vw - 48px));
  background: rgba(16, 16, 16, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-top: 2px solid var(--green-bright);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
  padding: 30px 32px 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 32px;
}
.dd-group { display: flex; flex-direction: column; gap: 7px; }
.dd-group .dd-head {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green-bright);
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  transition: color 0.25s;
}
.dd-group .dd-head:hover { color: #fff; }
.dd-group a:not(.dd-head) {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--gray);
  padding: 2px 0;
  transition: color 0.25s, padding-left 0.3s var(--ease-out);
}
.dd-group a:not(.dd-head):hover { color: #fff; padding-left: 7px; }
.dd-all {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  transition: color 0.25s;
}
.dd-all .arrow { color: var(--green-bright); transition: transform 0.3s var(--ease-out); }
.dd-all:hover { color: var(--green-bright); }
.dd-all:hover .arrow { transform: translateX(5px); }
.nav-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  white-space: nowrap;
  transition: color 0.3s;
}
.nav-phone svg { width: 16px; height: 16px; fill: var(--green-bright); }
.nav-phone:hover { color: var(--green-bright); }
.nav-cta { padding: 13px 24px; font-size: 13px; flex-shrink: 0; }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 10px;
  z-index: 1001;
}
.hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  transition: transform 0.35s var(--ease-out), opacity 0.25s;
}
.hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  padding: 0 clamp(24px, 7vw, 48px) calc(28px + env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 55% at 88% -8%, rgba(78, 148, 87, 0.18), transparent 62%),
    radial-gradient(95% 50% at -12% 108%, rgba(35, 62, 41, 0.5), transparent 62%),
    linear-gradient(160deg, #111511 0%, #0d0d0d 52%, #0b100c 100%);
  transform: translateX(100%);
  transition: transform 0.55s var(--ease-out), visibility 0s linear 0.55s;
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.55s var(--ease-out);
}
.mm-head {
  flex-shrink: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mm-head .mm-logo img { height: 58px; width: auto; }
.mm-close {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s var(--ease-out), border-color 0.3s, color 0.3s;
}
.mm-close svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.mm-close:hover, .mm-close:focus-visible {
  color: var(--green-bright);
  border-color: var(--green-bright);
  transform: rotate(90deg);
}
.mm-links {
  display: flex;
  flex-direction: column;
  margin: auto 0;
  padding: 3vh 0;
}
.mobile-menu a.mm-link {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: clamp(9px, 1.7vh, 16px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-family: var(--font-display);
  font-size: clamp(30px, 7.5vw, 46px);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.88);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.4s ease, transform 0.55s var(--ease-out), color 0.3s;
}
.mm-link .mm-num {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--green-bright);
}
.mm-link .mm-arrow {
  margin-left: auto;
  align-self: center;
  font-size: 22px;
  color: var(--green-bright);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.3s, transform 0.35s var(--ease-out);
}
.mm-link:hover, .mm-link[aria-current="page"] { color: var(--green-bright); }
.mm-link:hover .mm-arrow, .mm-link[aria-current="page"] .mm-arrow { opacity: 1; transform: translateX(0); }
.mobile-menu.open a.mm-link { opacity: 1; transform: translateY(0); }
.mobile-menu.open .mm-link:nth-child(1) { transition-delay: 0.08s; }
.mobile-menu.open .mm-link:nth-child(2) { transition-delay: 0.13s; }
.mobile-menu.open .mm-link:nth-child(3) { transition-delay: 0.18s; }
.mobile-menu.open .mm-link:nth-child(4) { transition-delay: 0.23s; }
.mobile-menu.open .mm-link:nth-child(5) { transition-delay: 0.28s; }
.mobile-menu.open .mm-link:nth-child(6) { transition-delay: 0.33s; }
.mobile-menu.open .mm-link:nth-child(7) { transition-delay: 0.38s; }
.mm-foot {
  flex-shrink: 0;
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
  padding-top: 10px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s ease, transform 0.5s var(--ease-out);
}
.mobile-menu.open .mm-foot { opacity: 1; transform: translateY(0); transition-delay: 0.42s; }
.mm-foot .mm-cta { width: 100%; justify-content: center; }
.mm-phone {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  transition: color 0.3s;
}
.mm-phone svg { width: 17px; height: 17px; fill: var(--green-bright); }
.mm-phone:hover { color: var(--green-bright); }
.mm-note { color: var(--gray-dim); font-size: 13px; line-height: 1.5; }

/* ---------- HERO (home) ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5vw), 0 100%);
  padding: calc(var(--nav-h) + 40px) 0 calc(3.5vw + 70px);
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  animation: heroZoom 18s var(--ease-out) forwards;
}
@keyframes heroZoom {
  from { transform: scale(1.12); }
  to { transform: scale(1); }
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(10, 12, 11, 0.92) 0%, rgba(10, 12, 11, 0.68) 40%, rgba(10, 12, 11, 0.16) 72%, rgba(10, 12, 11, 0.4) 100%),
    linear-gradient(to top, var(--bg) 0%, transparent 30%),
    linear-gradient(to bottom, rgba(10, 12, 11, 0.55) 0%, transparent 18%);
}
.hero__content { max-width: 860px; }
.hero__label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(11px, 1.2vw, 13px);
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 28px;
}
.hero__label::before { content: ""; width: 46px; height: 2px; background: var(--green-bright); }
.hero__title {
  font-size: clamp(88px, 14vw, 210px);
  line-height: 0.88;
  letter-spacing: 0.005em;
  margin-bottom: 26px;
}
.hero__title .line:has(.hero__subtitle) { font-size: clamp(13px, 1.5vw, 20px); }
.hero__subtitle {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-body);
  font-size: clamp(13px, 1.5vw, 20px);
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  margin-top: 18px;
  line-height: 1.4;
}
.hero__subtitle::after {
  content: "";
  flex: 1;
  min-width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--green-bright), transparent);
}
.hero__tag {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2.5vw, 36px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.hero__tag .green { color: var(--green-bright); }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: inline-block; transform: translateY(110%); animation: riseUp 0.9s var(--ease-out) calc(var(--introD) + 0.14s) both; }
.hero__title .line:nth-child(2) > span { animation-delay: calc(var(--introD) + 0.3s); }
.hero__title .green { color: var(--green-bright); }
@keyframes riseUp { to { transform: translateY(0); } }
.hero__sub {
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(15.5px, 1.7vw, 19px);
  max-width: 520px;
  margin-bottom: 38px;
}
.hero__sub strong { color: #fff; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 52px; }
/* ---- cinematic intro: the valley shows through HILLTOP, then the
   mask blooms away. --introD shifts the content choreography after it;
   html.no-intro (repeat visits, reduced motion, ?noanim) skips it. ---- */
.hero { --introD: 2.55s; }
.no-intro .hero { --introD: 0s; }
.hero__intro {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.no-intro .hero__intro, .intro-done .hero__intro { display: none; }
/* once the flight lands, the real headline is simply there */
.intro-done .hero__title .line > span { animation: none; transform: none; }
.hero__intro-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: introOut 0.45s ease 1.5s forwards;
}
.hero__intro-word {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(80px, 14.5vw, 250px);
  letter-spacing: 0.005em;
  transform-box: fill-box;
  transform-origin: center;
  animation: introWord 1.4s var(--ease-out) forwards;
}
/* the solid brand word that flies from center stage into the headline */
.hero__intro-fly {
  position: absolute;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(80px, 14.5vw, 250px);
  letter-spacing: 0.005em;
  line-height: 0.88;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  will-change: transform;
}
.hero__intro-fly.flying,
.hero__intro-tag.flying {
  transition: transform 1.05s cubic-bezier(0.7, 0, 0.24, 1), opacity 0.35s ease;
  opacity: 1;
}
/* while the intro plays, the photo glows brighter through the letters
   and the dark veil holds off until the mask blooms away */
html:not(.no-intro) .hero__bg img {
  animation: heroZoom 18s var(--ease-out) forwards, introGlow 2.4s ease forwards;
}
@keyframes introGlow {
  0%, 55% { filter: brightness(1.5) saturate(1.12); }
  100% { filter: brightness(1) saturate(1); }
}
html:not(.no-intro) .hero__bg::after {
  opacity: 0;
  animation: veilIn 0.9s ease 1.5s forwards;
}
@keyframes veilIn {
  to { opacity: 1; }
}
.hero__intro-tag {
  position: absolute;
  top: calc(47% + clamp(56px, 8.6vw, 146px));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 86vw;
  text-align: center;
  line-height: 1.4;
  font-size: clamp(10px, 1.2vw, 14px);
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  opacity: 0;
  will-change: transform;
  animation: introTag 1.2s ease 0.45s forwards;
}
@keyframes introWord {
  from { transform: scale(0.94); }
  to { transform: scale(1); }
}
@keyframes introTag {
  to { opacity: 1; }
}
@keyframes introOut {
  to { opacity: 0; visibility: hidden; }
}
/* choreographed entrance: brand first, then one element at a time */
.hero__label, .hero__tag, .hero__sub, .hero__ctas, .hero__trust, .scroll-cue {
  opacity: 0;
  transform: translateY(26px);
  animation: heroIn 0.85s var(--ease-out) forwards;
}
.hero__label { animation-delay: calc(var(--introD) + 0.05s); }
.hero__tag { animation-delay: calc(var(--introD) + 0.42s); }
.hero__sub { animation-delay: calc(var(--introD) + 0.56s); }
.hero__ctas { animation-delay: calc(var(--introD) + 0.7s); }
.hero__trust { animation-delay: calc(var(--introD) + 0.85s); }
.scroll-cue { animation-delay: calc(var(--introD) + 1.1s); }
@keyframes heroIn {
  to { opacity: 1; transform: none; }
}
/* a soft light sweep crosses the primary CTA every few seconds */
.hero .btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-130%);
  animation: ctaSheen 4.6s ease-in-out calc(var(--introD) + 2s) infinite;
}
@keyframes ctaSheen {
  0% { transform: translateX(-130%); }
  32%, 100% { transform: translateX(130%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__label, .hero__tag, .hero__sub, .hero__ctas, .hero__trust, .scroll-cue,
  .hero__title .line > span { animation: none; opacity: 1; transform: none; }
  .hero__bg img { animation: none; }
  .hero__intro { display: none; }
  .hero .btn--primary::after { animation: none; }
}
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  max-width: 780px;
}
.hero__trust li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 18px 26px 0 0;
  margin-right: 26px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.hero__trust li::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--green-bright);
  transform: rotate(45deg);
  flex-shrink: 0;
}
/* Scheduling strip — weekly / bi-weekly / monthly / as-needed / one-time */
.sched-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.page-hero .sched-strip { margin-top: 26px; }
.sched-strip__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-bright);
  white-space: nowrap;
}
.sched-strip__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sched-strip__list li {
  padding: 7px 15px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.scroll-cue {
  position: absolute;
  bottom: calc(3.5vw + 34px);
  right: 4vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  writing-mode: vertical-rl;
}
.scroll-cue::after {
  content: "";
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, var(--green-bright), transparent);
  animation: cueDrop 2s ease-in-out infinite;
}
@keyframes cueDrop {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Page hero (subpages) ---------- */
.page-hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(70px, 10vw, 130px)) 0 clamp(70px, 9vw, 110px);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3vw), 0 100%);
}
.page-hero__bg { position: absolute; inset: 0; z-index: -1; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(13, 13, 13, 0.97) 10%, rgba(13, 13, 13, 0.75) 60%, rgba(13, 13, 13, 0.55) 100%),
    linear-gradient(to top, var(--bg), transparent 40%);
}
.page-hero h1 { font-size: clamp(52px, 8.5vw, 120px); margin: 18px 0 20px; }
.page-hero .lead { max-width: 700px; }

/* Gallery leads with the work, so its header is compact. At full size the hero
   plus the standard 150px section padding pushed the first photo ~220px below
   the fold on a 1440x900 laptop. Section headings keep their normal scale. */
.page-gallery .page-hero {
  padding: calc(var(--nav-h) + clamp(22px, 2.6vw, 34px)) 0 clamp(26px, 3vw, 38px);
}
.page-gallery .page-hero h1 { font-size: clamp(38px, 4.8vw, 66px); margin: 6px 0 10px; }
.page-gallery .page-hero .lead { max-width: 780px; font-size: 17px; }
/* .page-hero is itself a <section>, so :first-of-type never matched here */
.section--flush { padding-top: clamp(38px, 4.2vw, 56px); }
.page-gallery .ba-cases { margin-top: clamp(22px, 2.4vw, 30px); }
/* keep the "left is before, right is after" line on one row */
.page-gallery .section--flush > .wrap > .lead { max-width: 860px; }
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-dim);
  margin-bottom: 10px;
}
.breadcrumb a { color: var(--gray); transition: color 0.3s; display: inline-block; padding: 12px 0; margin: -12px 0; }
.breadcrumb a:hover { color: var(--green-bright); }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 10px; color: var(--gray-dim); }
.breadcrumb [aria-current] { color: var(--green-bright); }

/* ---------- Service tiles (editorial) ---------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
  margin-top: clamp(40px, 6vw, 70px);
}
.tile {
  position: relative;
  grid-column: span 4;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--bg-card);
  isolation: isolate;
}
.tile--wide { grid-column: span 8; min-height: 420px; }
.tile--tall { grid-column: span 4; min-height: 420px; }
.tile__img { position: absolute; inset: 0; z-index: -1; }
.tile__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out), filter 0.6s;
  filter: saturate(0.85) brightness(0.8);
}
.tile__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 13, 13, 0.95) 8%, rgba(13, 13, 13, 0.45) 45%, rgba(13, 13, 13, 0.15) 100%);
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.55);
}
.tile:hover .tile__img img { transform: scale(1.06); filter: saturate(1) brightness(0.9); }
.tile::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--green-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.tile:hover::after { transform: scaleX(1); }
.tile__body { padding: 28px; width: 100%; }
.tile__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--green-bright);
  display: block;
  margin-bottom: 8px;
}
.tile__title {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800;
  margin-bottom: 8px;
}
.tile--wide .tile__title { font-size: clamp(30px, 3.4vw, 46px); }
.tile__desc {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14.5px;
  max-width: 420px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-out), opacity 0.4s 0.1s, margin 0.5s var(--ease-out);
}
.tile:hover .tile__desc, .tile:focus-visible .tile__desc { max-height: 120px; opacity: 1; margin-bottom: 10px; }
.tile__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.tile__link .arrow { color: var(--green-bright); transition: transform 0.35s var(--ease-out); }
.tile:hover .tile__link .arrow { transform: translateX(6px); }
@media (max-width: 980px) {
  .tile, .tile--wide, .tile--tall { grid-column: span 6; min-height: 300px; }
}
@media (max-width: 640px) {
  .tile, .tile--wide, .tile--tall { grid-column: span 12; min-height: 260px; }
  .tile__desc { max-height: none; opacity: 1; margin-bottom: 10px; }
}

/* ---------- Why choose ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 18px;
  margin-top: clamp(40px, 6vw, 70px);
}
.why-card {
  position: relative;
  background: var(--bg-card);
  padding: 40px 32px;
  border: 1px solid var(--line);
  transition: transform 0.45s var(--ease-out), border-color 0.45s, box-shadow 0.45s;
  overflow: hidden;
}
.why-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--green-bright), var(--navy-glow));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.why-card:hover { transform: translateY(-8px); border-color: rgba(78, 148, 87, 0.35); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 40px rgba(47, 82, 53, 0.08); }
.why-card:hover::before { transform: scaleX(1); }
.why-card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: rgba(47, 82, 53, 0.14);
  border: 1px solid rgba(78, 148, 87, 0.3);
  margin-bottom: 24px;
}
.why-card__icon svg { width: 24px; height: 24px; stroke: var(--green-bright); fill: none; stroke-width: 1.8; }
.why-card h3 { font-size: 24px; margin-bottom: 12px; }
.why-card p { color: var(--gray); font-size: 14.5px; }

/* ---------- Steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 40px 28px;
  margin-top: clamp(44px, 6vw, 80px);
  counter-reset: step;
}
.step { position: relative; padding-top: 26px; }
.step h3 { font-size: 23px; margin-bottom: 10px; }
.step p { color: var(--gray); font-size: 14.5px; }
.step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 3px;
  background: var(--green);
}

/* ---------- Process timeline (How It Works) ---------- */
.timeline {
  position: relative;
  margin-top: clamp(50px, 7vw, 90px);
  padding-bottom: 10px;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, var(--green-bright), rgba(78, 148, 87, 0.35) 55%, rgba(26, 58, 92, 0.6));
  box-shadow: 0 0 18px rgba(78, 148, 87, 0.35);
}
.tl-step {
  position: relative;
  width: calc(50% - 52px);
  margin-bottom: clamp(36px, 5vw, 56px);
}
.tl-step:nth-child(odd) { margin-right: auto; text-align: right; }
.tl-step:nth-child(even) { margin-left: auto; }
.tl-step:last-child { margin-bottom: 0; }
/* node on the line */
.tl-step::before {
  content: "";
  position: absolute;
  top: 42px;
  width: 14px;
  height: 14px;
  background: var(--bg);
  border: 2.5px solid var(--green-bright);
  transform: rotate(45deg);
  box-shadow: 0 0 0 6px rgba(78, 148, 87, 0.12), 0 0 24px rgba(78, 148, 87, 0.5);
  z-index: 1;
}
.tl-step:nth-child(odd)::before { right: -60px; }
.tl-step:nth-child(even)::before { left: -60px; }
/* connector from card to line */
.tl-step::after {
  content: "";
  position: absolute;
  top: 48px;
  width: 38px;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(78, 148, 87, 0.6), rgba(78, 148, 87, 0.1));
}
.tl-step:nth-child(odd)::after { right: -46px; transform: scaleX(-1); }
.tl-step:nth-child(even)::after { left: -46px; }
.tl-card {
  position: relative;
  display: inline-block;
  width: 100%;
  background: linear-gradient(150deg, #1e1e1e 0%, #161616 70%);
  border: 1px solid var(--line);
  padding: 32px 34px 30px;
  overflow: hidden;
  transition: transform 0.45s var(--ease-out), border-color 0.45s, box-shadow 0.45s;
  text-align: left;
}
.tl-step:nth-child(odd) .tl-card { text-align: right; }
.tl-card:hover {
  transform: translateY(-6px);
  border-color: rgba(78, 148, 87, 0.45);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5), 0 0 44px rgba(47, 82, 53, 0.1);
}
.tl-icon {
  width: 54px;
  height: 54px;
  display: inline-grid;
  place-items: center;
  background: rgba(47, 82, 53, 0.14);
  border: 1px solid rgba(78, 148, 87, 0.35);
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.tl-icon svg { width: 25px; height: 25px; stroke: var(--green-bright); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.tl-card:hover .tl-icon {
  background: rgba(47, 82, 53, 0.32);
  border-color: rgba(78, 148, 87, 0.7);
  box-shadow: 0 0 22px rgba(78, 148, 87, 0.25);
}
.tl-card:hover .tl-icon svg { transform: scale(1.14) rotate(-7deg); }
.tl-card h3 { font-size: 25px; margin-bottom: 10px; position: relative; z-index: 1; }
.tl-card h3 .step-tag {
  display: block;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.3em;
  color: var(--green-bright);
  margin-bottom: 8px;
}
.tl-card p { color: var(--gray); font-size: 14.5px; position: relative; z-index: 1; }
.tl-finish {
  position: relative;
  text-align: center;
  padding-top: 26px;
}
.tl-finish::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 16px;
  height: 16px;
  background: var(--green);
  box-shadow: 0 0 30px rgba(78, 148, 87, 0.8);
}
/* ---------- Growing vine enhancement (JS adds .vine-on) ---------- */
.timeline.vine-on::before { display: none; }
.vine-on .tl-step::before { display: none; }
.vine {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.vine__understem {
  fill: none;
  stroke: #23402A;
  stroke-width: 4.5;
  stroke-linecap: round;
  opacity: 0.85;
}
.vine__stem {
  fill: none;
  stroke: url(#vineGrad);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(78, 148, 87, 0.5));
}
.vine__tipG { transition: opacity 0.3s; }
.vine__tip { filter: drop-shadow(0 0 9px rgba(251, 213, 139, 0.9)); }
.vine__tip-halo {
  animation: tipBreathe 2.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes tipBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.45); }
}
/* survey waypoints lock onto the trail at each step */
.wp__diamond {
  fill: var(--bg);
  stroke: var(--green-bright);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  rotate: 45deg;
  scale: 0;
  transition: scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 0 10px rgba(78, 148, 87, 0.55));
}
.wp.grown .wp__diamond { scale: 1; }
.wp__dot {
  fill: #F4BC77;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s;
  filter: drop-shadow(0 0 7px rgba(244, 188, 119, 0.85));
}
.wp.grown .wp__dot { transform: scale(1); }
/* chainage ticks appear as the trail passes them */
.tick__mark {
  stroke: rgba(116, 169, 124, 0.55);
  stroke-width: 1.5;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
  scale: 0 1;
  transition: scale 0.55s var(--ease-out) 0.15s;
}
.tick--gold .tick__mark { stroke: rgba(216, 164, 95, 0.7); }
.tick.grown .tick__mark { scale: 1 1; }

/* ---------- Oregon mountain vista (How It Works) ---------- */
.scene-host { position: relative; overflow: hidden; }
.scene-host > .wrap { position: relative; z-index: 2; }
.topo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* dusk sky: a band of fading light sits right behind the far peaks */
.topo__sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0A1018 0%, #101B22 24%, #1B2A35 33%, #0E1712 58%, #0C130E 100%);
}
/* warm dusk glow behind the peaks — driven by --warm from JS */
.topo__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(52% 26% at 70% 27%, rgba(244, 188, 119, 0.22), transparent 70%);
  opacity: var(--warm, 0);
}
/* the dusk sun, low over the far ridge */
.vista__sun {
  position: absolute;
  left: 68%;
  top: 25%;
  width: 130px;
  height: 130px;
  margin: -65px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #FBD58B 0%, #F4BC77 55%, #E9995B 100%);
  box-shadow:
    0 0 70px 22px rgba(244, 188, 119, 0.35),
    0 0 190px 90px rgba(244, 188, 119, 0.12);
  will-change: transform;
}
.topo__map { position: absolute; inset: 0; width: 100%; height: 100%; }
.topo__map g { will-change: transform; }
/* each ridge rises into place as the section scrolls in */
.vlayer {
  opacity: 0;
  translate: 0 90px;
  transition: opacity 1.3s ease, translate 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.vlayer.on { opacity: 1; translate: 0 0; }
/* dusk light catching the far crests */
.vista-crest { fill: none; stroke-width: 1.6; stroke-linejoin: round; }
/* dusk-lit snowfields on the high peaks */
.vista-snow { fill: rgba(196, 213, 226, 0.42); }
/* golden-hour lens: a warm sunlit copy revealed around the cursor */
.topo-hotbg { fill: rgba(244, 188, 119, 0.05); }
.vista-hotfill { fill: rgba(244, 188, 119, 0.05); }
.vista-hotcrest {
  fill: none;
  stroke: rgba(251, 213, 139, 0.5);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
/* valley mist drifting between the ridges */
.vista__mist {
  position: absolute;
  height: 190px;
  width: 78%;
  background: radial-gradient(closest-side, rgba(158, 190, 172, 0.1), transparent);
  filter: blur(30px);
  animation: mistDrift 26s ease-in-out infinite alternate;
}
.vista__mist--1 { top: 38%; left: -10%; }
.vista__mist--2 { top: 66%; right: -10%; animation-delay: -13s; animation-duration: 34s; }
@keyframes mistDrift {
  from { transform: translateX(0); }
  to { transform: translateX(110px); }
}
/* groves of firs planted on knolls as steps complete */
.grove__mound {
  fill: #152119;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  scale: 0 0.5;
  transition: scale 0.7s var(--ease-out);
}
.grove.planted .grove__mound { scale: 1 1; }
.grove__tree {
  fill: #2E5138;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  scale: 0;
  transition: scale 0.9s cubic-bezier(0.34, 1.56, 0.64, 1), fill 0.5s ease, filter 0.5s ease;
}
.grove.planted .grove__tree { scale: 1; }
.grove .node-ring { stroke: rgba(251, 213, 139, 0.7); }
.grove.planted .node-ring { animation: ringBurst 1.1s var(--ease-out) 0.25s forwards; }
/* hovering the step card floods its grove with golden light */
.grove.hot .grove__tree {
  fill: #4E9457;
  filter: drop-shadow(0 0 12px rgba(251, 213, 139, 0.55));
}
/* golden ring burst when a waypoint locks in */
.node-ring {
  stroke: rgba(251, 213, 139, 0.7);
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.wp.grown .node-ring { animation: ringBurst 1s var(--ease-out) forwards; }
@keyframes ringBurst {
  0% { opacity: 0.9; transform: scale(0.25); }
  100% { opacity: 0; transform: scale(2.1); }
}
/* branch connectors grow out from the vine */
.vine-on .tl-step::after {
  transition: transform 0.45s var(--ease-out);
}
.vine-on .tl-step:nth-child(odd)::after { transform: scaleX(0); transform-origin: 100% 50%; }
.vine-on .tl-step.grown:nth-child(odd)::after { transform: scaleX(-1); }
.vine-on .tl-step:nth-child(even)::after { transform: scaleX(0); transform-origin: 0 50%; }
.vine-on .tl-step.grown:nth-child(even)::after { transform: scaleX(1); }
/* cards bloom off the branch */
.vine-on .tl-card {
  opacity: 0;
  filter: brightness(0.72) saturate(0.8);
  transition:
    transform 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s,
    opacity 0.5s ease 0.1s,
    filter 1s ease 0.2s,
    border-color 0.45s, box-shadow 0.45s;
}
.vine-on .tl-step { perspective: 1100px; }
.vine-on .tl-step:nth-child(odd) .tl-card {
  transform: translate(38px, 12px) scale(0.88) rotate(1.2deg) rotateY(-22deg);
  transform-origin: 100% 30%;
}
.vine-on .tl-step:nth-child(even) .tl-card {
  transform: translate(-38px, 12px) scale(0.88) rotate(-1.2deg) rotateY(22deg);
  transform-origin: 0 30%;
}
.vine-on .tl-step.grown .tl-card { opacity: 1; transform: none; filter: none; }
/* warm sunlight sweeps across each card as it blooms */
.vine-on .tl-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg,
    transparent 22%,
    rgba(251, 213, 139, 0.06) 40%,
    rgba(251, 213, 139, 0.15) 50%,
    rgba(251, 213, 139, 0.06) 60%,
    transparent 78%);
  transform: translateX(-130%);
}
.vine-on .tl-step.grown .tl-card::after {
  transform: translateX(130%);
  transition: transform 1.4s ease 0.5s;
}
/* the vine plants itself in gold at the finish */
.vine-on ~ .tl-finish::before {
  opacity: 0.25;
  transform: translateX(-50%) rotate(45deg) scale(0.55);
  transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vine-on ~ .tl-finish.grown::before {
  opacity: 1;
  transform: translateX(-50%) rotate(45deg) scale(1);
  background: var(--sun);
  box-shadow: 0 0 34px rgba(244, 188, 119, 0.8);
}

@media (max-width: 860px) {
  .timeline::before { left: 20px; transform: none; }
  .vine { left: 0; transform: none; }
  .vine-on .tl-step:nth-child(odd) .tl-card,
  .vine-on .tl-step:nth-child(even) .tl-card {
    transform: translate(-24px, 12px) scale(0.93) rotate(-1deg) rotateY(16deg);
    transform-origin: 0 25%;
  }
  .vista__sun { width: 90px; height: 90px; margin: -45px; }
  .vista__mist { height: 120px; }
  .vine-on .tl-step.grown .tl-card { transform: none; }
  .vine-on .tl-step:nth-child(odd)::after,
  .vine-on .tl-step:nth-child(even)::after { transform: scaleX(0); transform-origin: 0 50%; }
  .vine-on .tl-step.grown:nth-child(odd)::after,
  .vine-on .tl-step.grown:nth-child(even)::after { transform: scaleX(1); }
  .tl-step, .tl-step:nth-child(odd), .tl-step:nth-child(even) {
    width: auto;
    margin: 0 0 30px 0;
    padding-left: 58px;
    text-align: left;
  }
  .tl-step:nth-child(odd) .tl-card { text-align: left; }
  .tl-step:nth-child(odd)::before, .tl-step:nth-child(even)::before { left: 13.5px; right: auto; }
  .tl-step:nth-child(odd)::after, .tl-step:nth-child(even)::after { left: 28px; right: auto; width: 26px; transform: none; }
}

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  text-align: center;
}
.stat { padding: 30px 10px; position: relative; }
.stat + .stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background: var(--line);
}
.stat__value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(64px, 8vw, 110px);
  line-height: 1;
  color: #fff;
}
.stat__value .suffix { color: var(--sun); }
.stat__label {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
}
@media (max-width: 640px) { .stat + .stat::before { display: none; } }

/* ---------- Marquee ---------- */
.marquee-band {
  position: relative;
  padding: 34px 0;
  background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.marquee { display: flex; overflow: hidden; user-select: none; }
.marquee__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  min-width: 100%;
  animation: marquee 42s linear infinite;
}
.marquee-band:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
.marquee__track span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 30px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  padding: 0 18px;
}
.marquee__track .dot { color: var(--green-bright); font-size: clamp(14px, 1.6vw, 18px); padding: 0; }

/* ---------- Testimonials ---------- */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: clamp(40px, 6vw, 70px);
}
.testi {
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  transition: transform 0.45s var(--ease-out), border-color 0.45s;
}
.testi:hover { transform: translateY(-6px); border-color: rgba(78, 148, 87, 0.3); }
.testi::before {
  content: "\201C";
  position: absolute;
  top: 10px;
  right: 24px;
  font-family: Georgia, serif;
  font-size: 90px;
  line-height: 1;
  color: rgba(78, 148, 87, 0.18);
}
.testi__stars { display: flex; gap: 4px; }
.testi__stars svg { width: 17px; height: 17px; fill: var(--green-bright); }
.testi__text { color: rgba(255, 255, 255, 0.85); font-size: 15px; flex-grow: 1; }
.testi__who { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.testi__who span { display: block; color: var(--gray-dim); font-weight: 500; letter-spacing: 0.08em; margin-top: 3px; }

/* ---------- Gallery ---------- */
.gal-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: clamp(40px, 6vw, 70px);
}
.gal-item {
  position: relative;
  overflow: hidden;
  grid-column: span 4;
  aspect-ratio: 4/3;
  background: var(--bg-card);
  isolation: isolate;
}
/* the feature fills two rows, with two previews stacked beside it —
   its height comes from the grid, so every row lines up flush */
.gal-item--big { grid-column: span 8; grid-row: span 2; aspect-ratio: auto; }
/* half-width tile, used to close a row when the count doesn't divide by three */
.gal-item--wide { grid-column: span 6; aspect-ratio: 16/10; }
.gal-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out), filter 0.5s;
  filter: saturate(0.9) brightness(0.85);
}
.gal-item:hover img { transform: scale(1.05); filter: saturate(1.05) brightness(0.95); }
.gal-item__cap {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 40px 22px 18px;
  background: linear-gradient(to top, rgba(13, 13, 13, 0.92), transparent);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform: translateY(12px);
  opacity: 0;
  transition: transform 0.45s var(--ease-out), opacity 0.45s;
}
.gal-item:hover .gal-item__cap, .gal-item:focus-visible .gal-item__cap { transform: translateY(0); opacity: 1; }
/* Touch screens have no hover — captions must be visible by default */
@media (hover: none) {
  .gal-item__cap { transform: none; opacity: 1; }
}
.gal-item__cap strong { font-family: var(--font-display); font-size: 21px; font-weight: 800; text-transform: uppercase; }
.gal-item__cap span { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-bright); font-weight: 600; }
@media (max-width: 860px) {
  .gal-item, .gal-item--wide { grid-column: span 6; aspect-ratio: 4/3; }
  /* feature goes full-width so the previews below stay even */
  .gal-item--big { grid-column: span 12; grid-row: auto; aspect-ratio: 3/2; }
}
@media (max-width: 560px) {
  .gal-item, .gal-item--big, .gal-item--wide { grid-column: span 12; }
  .gal-item--big { aspect-ratio: 4/3; }
  .gal-item__cap { transform: none; opacity: 1; }
}

/* Gallery filters */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.filter-btn {
  padding: 11px 22px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
  border: 1px solid var(--line);
  transition: all 0.3s var(--ease-out);
}
.filter-btn:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.filter-btn.active { background: var(--green); border-color: var(--green); color: #fff; }
.gal-item.hidden { display: none; }

/* Before / After pairs */
/* Shot handheld on different days, so a wipe slider never lines up: it shows
   half of one frame beside half of the other and reads as two places. Both
   full frames sit side by side under labelled headers instead. Nothing is
   cropped away, so the landmarks that prove it is the same spot stay in shot. */
.ba-cases { display: grid; gap: clamp(44px, 6vw, 76px); margin-top: clamp(34px, 4.5vw, 56px); }
.ba-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.5vw, 20px);
}
.ba-shot { min-width: 0; }
.ba-shot__label {
  display: block;
  padding: 11px 16px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray);
  background: var(--bg-card);
  border-bottom: 2px solid var(--line);
}
.ba-shot--after .ba-shot__label {
  color: #fff;
  background: var(--green);
  border-bottom-color: var(--green-bright);
}
.ba-shot__frame { position: relative; overflow: hidden; background: var(--bg-card); }
.ba-shot__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* both halves share one ratio so the frames line up edge to edge */
.ba-pair--landscape .ba-shot__frame { aspect-ratio: 4/3; }
.ba-pair--portrait .ba-shot__frame { aspect-ratio: 3/4; }
.ba-case__cap { margin-top: 16px; }
.ba-case__cap strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
}
.ba-case__cap span {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-bright);
  font-weight: 600;
}
.ba-case__cap p { margin-top: 10px; color: var(--gray); font-size: 15px; line-height: 1.65; max-width: 70ch; }
@media (max-width: 620px) {
  /* stacked: before on top, after underneath, each still labelled */
  .ba-pair { grid-template-columns: 1fr; gap: 14px; }
  .ba-pair--portrait .ba-shot__frame { aspect-ratio: 4/3; }
}

/* ---------- CTA banner ---------- */
.cta-banner {
  position: relative;
  overflow: hidden;
  padding: clamp(90px, 12vw, 160px) 0;
  text-align: center;
  clip-path: polygon(0 3vw, 100% 0, 100% 100%, 0 100%);
  background: var(--bg-alt);
}
.cta-banner__bg { position: absolute; inset: 0; z-index: 0; }
.cta-banner__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5) saturate(0.8); }
.cta-banner__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(13, 13, 13, 0.55) 0%, rgba(13, 13, 13, 0.92) 100%);
}
.cta-banner .wrap { z-index: 1; }
.cta-banner h2 { font-size: clamp(44px, 7vw, 100px); margin: 18px 0 16px; }
.cta-banner .lead { margin: 0 auto 40px; }
.cta-phone {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(38px, 6vw, 76px);
  color: #fff;
  line-height: 1;
  margin-bottom: 36px;
  transition: color 0.3s, text-shadow 0.3s;
}
.cta-phone svg { width: clamp(30px, 4vw, 52px); height: clamp(30px, 4vw, 52px); fill: var(--green-bright); }
.cta-phone:hover { color: var(--green-bright); text-shadow: 0 0 50px rgba(78, 148, 87, 0.5); }
.cta-banner__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 34px; }

/* ---------- Content split (about etc.) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.split__media { position: relative; }
.split__media img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; filter: saturate(0.9); }
.split__media::before {
  content: "";
  position: absolute;
  inset: 24px -24px -24px 24px;
  border: 1.5px solid rgba(78, 148, 87, 0.35);
  z-index: -1;
}
.split__media--frame-navy::before { border-color: rgba(26, 58, 92, 0.7); }
.split__body h2 { font-size: clamp(38px, 5vw, 64px); margin: 18px 0 22px; }
.split__body p { color: var(--gray); margin-bottom: 18px; }
.split__body p strong { color: #fff; }
.check-list { margin: 26px 0; display: grid; gap: 14px; }
.check-list li { display: flex; gap: 14px; align-items: flex-start; color: rgba(255, 255, 255, 0.88); font-size: 15.5px; }
.check-list li::before {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  background: rgba(47, 82, 53, 0.15);
  border: 1px solid rgba(78, 148, 87, 0.4);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2343A047' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 13px;
  background-position: center;
  background-repeat: no-repeat;
}
.split__portrait { display: flex; flex-direction: column; align-items: center; text-align: center; }
.portrait-frame { position: relative; width: clamp(220px, 26vw, 300px); }
.portrait-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  border: 3px solid rgba(78, 148, 87, 0.55);
  filter: saturate(0.95);
}
.portrait-frame::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1.5px solid rgba(78, 148, 87, 0.28);
}
.portrait-frame::after {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: var(--sun);
  border-right-color: var(--sun);
  transform: rotate(-45deg);
}
.portrait-name {
  margin-top: 28px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
}
.portrait-role {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-bright);
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split__media::before { inset: 16px -14px -14px 16px; } .portrait-frame { width: 220px; } }

/* ---------- Service page sections ---------- */
.svc-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
  padding: clamp(50px, 7vw, 90px) 0;
  border-bottom: 1px solid var(--line);
}
.svc-block:last-of-type { border-bottom: none; }
.svc-block:nth-child(even) .svc-block__media { order: 2; }
.svc-block__media { position: relative; overflow: hidden; }
.svc-block__media img { width: 100%; height: auto; aspect-ratio: 16/11; object-fit: cover; filter: saturate(0.88) brightness(0.92); transition: transform 0.8s var(--ease-out); }
.svc-block__media:hover img { transform: scale(1.04); }
.svc-block__media .svc-block__num {
  position: absolute;
  top: 14px;
  left: 18px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 60px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
  line-height: 1;
}
.svc-block h2 { font-size: clamp(34px, 4.4vw, 56px); margin: 14px 0 16px; }
.svc-block > div > p { color: var(--gray); margin-bottom: 22px; }
.svc-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.svc-list li { border-bottom: 1px solid var(--line); padding: 15px 4px; display: flex; align-items: baseline; gap: 14px; transition: background 0.3s, padding-left 0.3s var(--ease-out); }
.svc-list li:hover { background: rgba(255, 255, 255, 0.025); padding-left: 12px; }
.svc-list strong { font-weight: 600; font-size: 15.5px; white-space: nowrap; }
.svc-list span { color: var(--gray-dim); font-size: 13.5px; }
.svc-list li::before { content: "→"; color: var(--green-bright); font-weight: 700; }
@media (max-width: 900px) {
  .svc-block { grid-template-columns: 1fr; }
  .svc-block:nth-child(even) .svc-block__media { order: 0; }
  .svc-list strong { white-space: normal; }
}

/* ---------- FAQ ---------- */
.faq-list { margin-top: clamp(36px, 5vw, 60px); border-top: 1px solid var(--line); max-width: 860px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 4px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 17px;
  transition: color 0.3s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--green-bright);
  flex-shrink: 0;
  transition: transform 0.35s var(--ease-out);
  line-height: 1;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--green-bright); }
.faq-item p { color: var(--gray); padding: 0 4px 26px; max-width: 760px; }

/* ---------- Contact / form ---------- */
.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.contact-card { background: var(--bg-card); border: 1px solid var(--line); padding: 40px 36px; position: sticky; top: calc(var(--nav-h) + 24px); }
.contact-card h3 { font-size: 26px; margin-bottom: 20px; }
.contact-line { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact-line:last-of-type { border-bottom: none; }
.contact-line svg { width: 20px; height: 20px; stroke: var(--green-bright); fill: none; stroke-width: 1.8; flex-shrink: 0; margin-top: 4px; }
.contact-line strong { display: block; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray-dim); margin-bottom: 3px; }
.contact-line a, .contact-line span.val { font-size: 16px; font-weight: 600; color: #fff; transition: color 0.3s; }
.contact-line a:hover { color: var(--green-bright); }
.form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label, .field legend { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray); margin-bottom: 8px; padding: 0; }
.field label .req, .field legend .req { color: var(--green-bright); }
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: #fff;
  font: inherit;
  font-size: 16px; /* ≥16px stops iOS Safari zooming the page on focus */
  padding: 15px 16px;
  transition: border-color 0.3s, box-shadow 0.3s;
  border-radius: 0;
  -webkit-appearance: none;
}
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B0B0B0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--green-bright);
  box-shadow: 0 0 0 3px rgba(78, 148, 87, 0.15);
}
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 16px; }
.checks label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--gray);
  cursor: pointer;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  transition: all 0.25s;
  user-select: none;
}
.checks label:hover { color: #fff; border-color: rgba(255, 255, 255, 0.25); }
.checks input { accent-color: var(--green); width: 16px; height: 16px; flex-shrink: 0; }
.checks label:has(input:checked) { border-color: var(--green-bright); color: #fff; background: rgba(47, 82, 53, 0.12); }
.form-note { font-size: 13px; color: var(--gray-dim); }
.form-note a { color: var(--green-bright); font-weight: 600; }
@media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; } .contact-card { position: static; } }

/* Contact on mobile: the form is the page. Drop the hero imagery, breadcrumb,
   eyebrow and lead so the first thing in the viewport is the estimate form,
   with the reach-us-directly card moved below it. */
@media (max-width: 860px) {
  .page-contact .page-hero {
    padding: calc(var(--nav-h) + 22px) 0 0;
    clip-path: none;
  }
  .page-contact .page-hero__bg,
  .page-contact .page-hero .breadcrumb,
  .page-contact .page-hero .eyebrow,
  .page-contact .page-hero .lead { display: none; }
  .page-contact .page-hero h1 { font-size: clamp(34px, 9vw, 44px); margin: 0; }
  .page-contact .section.glow-green { padding-top: 26px; }
  .page-contact .contact-form-col { order: 1; }
  .page-contact .contact-card { order: 2; }
}
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }

/* ---------- City pages ---------- */
.city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; margin-top: clamp(40px, 6vw, 64px); }
.city-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 32px 28px;
  transition: transform 0.4s var(--ease-out), border-color 0.4s, background 0.4s;
  overflow: hidden;
}
.city-card::after {
  content: "→";
  position: absolute;
  right: 24px;
  bottom: 20px;
  color: var(--green-bright);
  font-size: 20px;
  font-weight: 700;
  transform: translateX(-8px);
  opacity: 0;
  transition: all 0.35s var(--ease-out);
}
.city-card:hover { transform: translateY(-6px); border-color: rgba(78, 148, 87, 0.4); background: var(--bg-card-hover); }
.city-card:hover::after { transform: translateX(0); opacity: 1; }
.city-card h3 { font-size: 26px; margin-bottom: 8px; }
.city-card h3 span { color: var(--green-bright); }
.city-card p { color: var(--gray); font-size: 14px; padding-right: 20px; }
.city-card--simple { display: flex; align-items: center; padding: 26px 28px; }
.city-card--simple h3 { margin-bottom: 0; }

/* Home-base showcase card (Grants Pass) */
.city-card--home {
  grid-column: 1 / -1;
  padding: clamp(34px, 4.5vw, 52px) clamp(28px, 4.5vw, 56px);
  border-color: rgba(78, 148, 87, 0.35);
  background:
    radial-gradient(ellipse at top left, rgba(46, 125, 50, 0.12), transparent 55%),
    var(--bg-card);
}
.city-card--home .home-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-bright);
  border: 1px solid rgba(78, 148, 87, 0.45);
  padding: 7px 14px;
  margin-bottom: 18px;
}
.city-card--home .home-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-bright);
}
.city-card--home h3 { font-size: clamp(32px, 4vw, 44px); }
.city-card--home p { font-size: 15.5px; max-width: 720px; line-height: 1.7; }
.city-card--home::after { right: 32px; bottom: 28px; }

/* ---------- Blog ---------- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: clamp(40px, 6vw, 64px); }
.post-card { background: var(--bg-card); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.45s var(--ease-out), border-color 0.45s; }
.post-card:hover { transform: translateY(-8px); border-color: rgba(78, 148, 87, 0.35); }
.post-card__img { overflow: hidden; aspect-ratio: 16/9; }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: transform 0.7s var(--ease-out); }
.post-card:hover .post-card__img img { transform: scale(1.06); }
.post-card__body { padding: 28px; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; }
.post-card__meta { font-size: 11.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green-bright); }
.post-card h3 { font-size: 24px; line-height: 1.1; }
.post-card p { color: var(--gray); font-size: 14.5px; flex-grow: 1; }
.post-card .tile__link { margin-top: 6px; }

.article { max-width: 760px; margin: 0 auto; }
.article__hero { margin: 0 0 clamp(36px, 5vw, 56px); overflow: hidden; }
.article__hero img { width: 100%; aspect-ratio: 21/9; object-fit: cover; filter: saturate(0.85); }
.article h2 { font-size: clamp(30px, 3.6vw, 42px); margin: 44px 0 16px; }
.article h3 { font-size: 22px; margin: 32px 0 12px; font-family: var(--font-body); font-weight: 700; text-transform: none; letter-spacing: 0; }
.article p { color: var(--gray); margin-bottom: 18px; font-size: 16.5px; }
.article p strong, .article li strong { color: #fff; }
.article ul, .article ol { margin: 0 0 20px 4px; display: grid; gap: 10px; }
.article ul li, .article ol li { color: var(--gray); padding-left: 24px; position: relative; font-size: 16px; }
.article ul li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 8px; height: 8px; background: var(--green); transform: rotate(45deg); }
.article ol { counter-reset: oli; }
.article ol li::before { counter-increment: oli; content: counter(oli, decimal-leading-zero); position: absolute; left: 0; top: 0; color: var(--green-bright); font-weight: 800; font-size: 14px; }
.article blockquote { border-left: 3px solid var(--green); padding: 6px 0 6px 24px; margin: 28px 0; color: #fff; font-size: 18px; font-weight: 500; }
.article-meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-dim); font-weight: 600; margin-top: 16px; }
.article-meta span { color: var(--green-bright); }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  background: #0a0a0a;
  border-top: 1px solid rgba(78, 148, 87, 0.25);
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green-bright), transparent);
}
.footer-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(50px, 7vw, 80px) 0;
  border-bottom: 1px solid var(--line);
}
.footer-cta h2 { font-size: clamp(40px, 6vw, 84px); }
.footer-cta h2 .accent { color: var(--green-bright); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding: clamp(50px, 6vw, 70px) 0;
}
.footer-brand img { width: 290px; margin-bottom: 20px; }
.footer-brand p { color: var(--gray-dim); font-size: 13.5px; max-width: 300px; }
.footer-col h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--green-bright);
  margin-bottom: 20px;
}
.footer-col ul { display: grid; gap: 11px; }
.footer-col a { color: var(--gray); font-size: 14px; transition: color 0.3s, padding-left 0.3s var(--ease-out); }
.footer-col a:hover { color: #fff; padding-left: 6px; }
.footer-contact { display: grid; gap: 16px; }
.footer-contact div { display: flex; gap: 12px; align-items: flex-start; }
.footer-contact svg { width: 17px; height: 17px; stroke: var(--green-bright); fill: none; stroke-width: 1.8; flex-shrink: 0; margin-top: 4px; }
.footer-contact a, .footer-contact span { color: var(--gray); font-size: 14px; }
.footer-contact a:hover { color: var(--green-bright); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--gray-dim);
}
.footer-bottom a { color: var(--gray); transition: color 0.3s; }
.footer-bottom a:hover { color: var(--green-bright); }
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  /* keep the link lists side by side so the footer stays short and wide */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 18px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand img { width: 168px; margin-bottom: 12px; }
  .footer-col--contact { grid-column: 1 / -1; }
}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  display: none;
  grid-template-columns: 1fr 1fr;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.55);
}
.sticky-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 17px 10px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sticky-cta svg { width: 17px; height: 17px; fill: currentColor; }
.sticky-cta .call { background: var(--green); color: #fff; animation: pulse 2.6s ease-in-out infinite; }
.sticky-cta .estimate { background: #101820; color: #fff; border-top: 1px solid rgba(255,255,255,0.08); }
@keyframes pulse {
  0%, 100% { box-shadow: inset 0 0 0 rgba(255,255,255,0); }
  50% { box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.18); }
}
@media (max-width: 860px) {
  .sticky-cta { display: grid; }
  body { padding-bottom: 62px; }
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); will-change: opacity, transform; }
.reveal--left { transform: translateX(-60px); }
.reveal--right { transform: translateX(60px); }
.reveal--zoom { transform: scale(0.92); }
.reveal.in-view { opacity: 1; transform: none; }
.d-1 { transition-delay: 0.08s; } .d-2 { transition-delay: 0.16s; } .d-3 { transition-delay: 0.24s; }
.d-4 { transition-delay: 0.32s; } .d-5 { transition-delay: 0.4s; } .d-6 { transition-delay: 0.48s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- Custom cursor (fine pointers only) ---------- */
@media (pointer: fine) {
  .cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 34px;
    height: 34px;
    border: 1.5px solid rgba(78, 148, 87, 0.65);
    border-radius: 50%;
    pointer-events: none;
    z-index: 3000;
    transform: translate(-50%, -50%);
    transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out), border-color 0.25s, opacity 0.3s;
    opacity: 0;
  }
  body.cursor-active .cursor-ring { opacity: 1; }
  .cursor-ring.hovering { width: 58px; height: 58px; border-color: rgba(78, 148, 87, 1); }
}
.cursor-ring { display: none; }
@media (pointer: fine) { .cursor-ring { display: block; } }

/* ---------- Responsive nav ---------- */
@media (max-width: 1120px) {
  .nav-links { display: none; }
  .nav-phone { margin-left: auto; padding: 14px; }
  .hamburger { display: flex; }
}
@media (max-width: 560px) {
  .nav-phone span { display: none; }
  .nav-cta { display: none; }
  .logo img { height: 62px; }
  :root { --nav-h: 72px; }
}

/* ---------- Mobile ergonomics (comfortable thumb targets) ---------- */
.footer-bottom a { display: inline-block; padding: 10px 6px; margin: -10px -6px; }
main a[href^="tel:"], main a[href^="mailto:"] {
  display: inline-block;
  padding: 10px 4px;
  margin: -10px -4px;
}
@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr 1fr; gap: 6px; }
  .stat { padding: 16px 6px; }
  .stat__value { font-size: clamp(44px, 13vw, 64px); }
  .footer-col ul { gap: 2px; }
  .footer-col a { display: inline-block; padding: 10px 0; }
  .footer-contact a { display: inline-block; padding: 8px 0; margin: -8px 0; font-size: 15px; }
  /* Two up, so twenty services don't become a 1,400px scroll. */
  .checks { grid-template-columns: 1fr 1fr; gap: 8px 10px; }
  /* These inherit .field label's wide tracking, which overflows a 2-up grid. */
  .checks label {
    min-height: 46px; padding: 10px; font-size: 13px; gap: 8px; line-height: 1.25;
    letter-spacing: 0.03em; min-width: 0; overflow-wrap: break-word;
  }
  .checks input { width: 18px; height: 18px; }
}

/* ---------- Utility ---------- */
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.mt-lg { margin-top: clamp(44px, 6vw, 72px); }
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--green);
  color: #fff;
  padding: 12px 20px;
  z-index: 4000;
  font-weight: 700;
}
.skip-link:focus { left: 0; }