/* ==========================================================================
   PEAK LANDSCAPING & OUTDOOR CLEANING 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.
   Previously used filter: blur(120px) on an 800×800 element. That produced
   a huge composited layer the GPU had to re-blur on every nearby composite
   change (i.e. any scroll). A soft radial-gradient painted straight into
   the background is visually indistinguishable and costs the browser zero
   filter work. */
.glow-green::before,
.glow-navy::before {
  content: "";
  position: absolute;
  width: 60vw;
  height: 60vw;
  max-width: 800px;
  max-height: 800px;
  border-radius: 50%;
  opacity: 0.5;
  pointer-events: none;
}
.glow-green::before {
  top: -20%;
  left: -25%;
  background: radial-gradient(closest-side, rgba(47, 82, 53, 0.32), transparent 72%);
}
.glow-navy::before {
  bottom: -20%;
  right: -25%;
  background: radial-gradient(closest-side, rgba(26, 58, 92, 0.32), transparent 72%);
}
/* 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 PEAK, 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; }

/* Simple mode (JS adds .vine-simple on low-power devices): keep the CSS
   center line as the vine, restore the step diamond markers, kill the
   SVG-only bits, use a cheap 2D card reveal instead of the 3D bloom.
   Selectors use .timeline.vine-simple so specificity beats the mobile
   .vine-on overrides that sit further down in the stylesheet. */
.timeline.vine-simple::before { display: block; }
.timeline.vine-simple .tl-step::before { display: block; }
.timeline.vine-simple .tl-step::after { display: none; }
.timeline.vine-simple .tl-step,
.timeline.vine-simple .tl-step:nth-child(odd),
.timeline.vine-simple .tl-step:nth-child(even) { perspective: none; }
.timeline.vine-simple .tl-card {
  opacity: 0;
  transform: translateY(28px);
  filter: none;
  transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.timeline.vine-simple .tl-step:nth-child(odd) .tl-card,
.timeline.vine-simple .tl-step:nth-child(even) .tl-card {
  transform: translateY(28px);
}
.timeline.vine-simple .tl-step.grown .tl-card { opacity: 1; transform: none; }
.timeline.vine-simple .tl-card::after { 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 draws itself via CSS transition on stroke-dashoffset, triggered
     once when the timeline enters the viewport. No scroll listener. */
  transition: stroke-dashoffset 3400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.vine__stem {
  fill: none;
  stroke: url(#vineGrad);
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 3400ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Rebuild after resize snaps the drawn state without re-animating. */
.vine-instant .vine__understem,
.vine-instant .vine__stem { transition: none; }
/* Tip glow group is no longer position-animated per scroll frame, so
   there's nothing to lead the draw — hide it and let the stem itself
   be the visual. */
.vine__tipG { display: none; }
.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;
  /* Isolate this section's rendering — big paint area, lots of layers.
     Combined with the JS-driven .rest class (added when the section is
     off-screen), this keeps idle scroll costs near zero. */
  contain: layout paint;
}
.scene-host > .wrap { position: relative; z-index: 2; }
/* When the section is off-screen the JS adds .rest — pause every infinite
   animation inside so nothing composites while the user is elsewhere. */
.scene-host.rest .vista__mist,
.scene-host.rest .vine__tip-halo { animation-play-state: paused; }
.topo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Promote the whole vista to its own compositor layer. The mountain
     scene has ~250 SVG paths (ridge polygons + tree silhouettes).
     Without this hint the browser re-composites all of them into the
     page every scroll frame — with it, the layer is rasterized once
     and scroll just blits the resulting texture. */
  will-change: transform;
}
/* 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 — static now (no per-frame
   parallax), so no will-change hint keeping a GPU layer around. */
.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 40px 10px rgba(244, 188, 119, 0.36),
    0 0 70px 24px rgba(244, 188, 119, 0.12);
}
.topo__map { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Ridge groups only get a class-flip fade-in; no per-frame transform. */
/* each ridge fades in as the section scrolls in.
   Was translate 90px → 0 over 1.5s + opacity 1.3s. Translating an SVG
   group with hundreds of paths (fills + firs) forces the compositor to
   move the whole thing frame-by-frame — that added ~2 sustained seconds
   of heavy compositor work every time a user scrolled to the section.
   Opacity-only fade is a compositor-friendly effect at 1/3 the cost. */
.vlayer {
  opacity: 0;
  transition: opacity 0.65s ease;
}
.vlayer.on { opacity: 1; }
/* 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 between the ridges — static now. The infinite mistDrift
   translate animation kept the compositor busy for zero visual payoff
   (the mist is subtle enough that the gentle drift is barely
   perceptible even paused). */
.vista__mist {
  position: absolute;
  height: 260px;
  width: 78%;
  background: radial-gradient(closest-side, rgba(158, 190, 172, 0.09), transparent 62%);
}
.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.
   Dropped the brightness+saturate filter transition — animating pixel
   filters on 4 cards simultaneously as they enter view was a sustained
   GPU cost. The opacity + transform reveal reads the same way. */
.vine-on .tl-card {
  opacity: 0;
  transition:
    transform 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s,
    opacity 0.5s ease 0.1s,
    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; }
/* 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); }
.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; }



/* ===== TRUST, HOURS & HOME ESTIMATE FORM ===== */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
  margin-top: clamp(40px, 6vw, 70px);
}
.trust-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 38px 32px;
  overflow: hidden;
  transition: transform 0.45s var(--ease-out), border-color 0.45s, box-shadow 0.45s;
}
.trust-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);
}
.trust-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);
}
.trust-card:hover::before { transform: scaleX(1); }
.trust-card h3 {
  font-family: var(--font-display);
  font-size: 27px;
  letter-spacing: 0.01em;
  margin-bottom: 18px;
}
.trust-card p { color: var(--gray); font-size: 14.5px; }
.trust-card .check-list { margin: 0; }
.trust-card .check-list li { font-size: 14.5px; }
.trust-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--gray-dim);
}

/* Business hours: a definition list is the honest markup for term/value pairs,
   and it is what schema-readers and AI extractors pick up cleanly. */
.hours { display: grid; gap: 2px; }
.hours > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.hours > div:last-child { border-bottom: 0; }
.hours dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
  white-space: nowrap;
}
.hours dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
}

/* Home-page estimate form */
.estimate-split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(34px, 5vw, 72px);
  align-items: start;
  margin-top: clamp(30px, 4vw, 48px);
}
.estimate-intro .section-title { margin-bottom: 18px; }
.estimate-intro .lead { margin-bottom: 6px; }
.estimate-intro .form-note { margin-top: 22px; }
.estimate-form-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: clamp(26px, 3vw, 40px);
  position: relative;
}
.estimate-form-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green-bright), var(--navy-glow));
}
.estimate-form-card .btn { justify-self: start; }

@media (max-width: 900px) {
  .estimate-split { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .trust-card { padding: 32px 24px; }
  .hours > div { flex-direction: column; align-items: flex-start; gap: 4px; }
}


/* ---------- Footer hours ---------- */
/* .footer-contact div is a broad flex rule, so the nested wrappers below
   re-declare only what they need to differ on. */
.footer-contact .footer-hours__body { flex-direction: column; gap: 10px; }
.footer-hours dl { display: grid; gap: 5px; width: 100%; }
.footer-hours dl > div { justify-content: space-between; gap: 14px; align-items: baseline; }
.footer-hours dt {
  color: var(--gray-dim);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.footer-hours dd {
  margin: 0;
  color: var(--gray);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}
.footer-micro { color: var(--gray-dim); font-size: 12.5px; line-height: 1.65; }