/* Top Notch: warm cream, forest green, and generous photography. */
:root {
  --color-page: #f8f5eb;
  --color-section-alt: #f8f5eb;
  --color-surface: #fbf8ef;
  --color-surface-2: #eeedde;
  --color-ink: #102c22;
  --color-muted: #43584a;
  --color-line: #e4e3d5;
  --color-brand: #123e2d;
  --color-brand-dark: #103b2a;
  --color-brand-hover: #245b3c;
  --color-accent: #657e46;
  --color-accent-soft: #e4e9d7;
  --font-display: "Segoe UI", Arial, sans-serif;
  --font-body: "Segoe UI", Arial, sans-serif;
  --site-width: 1320px;
  --gutter: clamp(22px, 4.8vw, 72px);
  --section-space: clamp(64px, 6vw, 96px);
  --radius: 10px;
  --button-radius: 5px;
}

html { scroll-padding-top: 116px; }
body { font-size: 17px; line-height: 1.6; }
a { text-underline-offset: 4px; }
:focus-visible { outline: 3px solid #8b9e50; outline-offset: 5px; }

.section h2 {
  max-width: 100%;
  font-size: clamp(2.2rem, 4.1vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.1;
}
.section .section-eyebrow {
  margin-bottom: 14px;
  color: #627a45;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.section p { color: var(--color-muted); }
.section + .section { border: 0; }

/* Wordmark and compact contact information mirror the reference header. */
.site-header {
  padding-block: 20px;
  background: rgba(248, 245, 235, 0.97);
  border: 0;
  box-shadow: 0 2px 20px #102c2208;
}
.nav { gap: clamp(18px, 2.1vw, 32px); }
.brand { flex-shrink: 0; color: #103b2a; }
.brand .brand-wordmark { display: grid; gap: 2px; }
.brand-wordmark strong {
  font-size: clamp(1.7rem, 2.65vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.brand-wordmark > span { font-size: clamp(0.72rem, 1.13vw, 1.04rem); line-height: 1.2; font-weight: 650; }
.nav-links { flex-wrap: nowrap; gap: 26px; }
.nav-links a {
  position: relative;
  color: var(--color-ink);
  font-size: 0.88rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }
.header-contact { display: grid; gap: 3px; flex-shrink: 0; }
.header-contact a { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 0.8rem; }
.header-contact a:first-child { font-size: 0.9rem; font-weight: 600; }
.header-contact svg { width: 16px; height: 16px; fill: currentColor; }
.nav-action { flex-shrink: 0; }

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 58px;
  padding: 15px 32px;
  border: 1px solid transparent;
  background: var(--color-brand);
  color: #fff;
  box-shadow: none;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.nav-action .button { min-height: 48px; padding: 12px 22px; font-size: 0.85rem; }
.button:hover { background: var(--color-brand-hover); color: white; transform: translateY(-3px); box-shadow: 0 9px 22px #0c362621; }
.button:active { transform: translateY(0); }

/* The original arborist remains the hero subject. */
.home-hero.hero-image-ready.hero-with-image {
  min-height: 690px;
  padding-block: 70px;
}
.home-hero .inner { padding-block: 0; }
.home-hero.hero-with-image h1 {
  max-width: 730px;
  margin-bottom: 24px;
  font-size: clamp(2.7rem, 4.7vw, 4.4rem);
  font-weight: 850;
  line-height: 1.06;
  letter-spacing: -0.045em;
  text-shadow: none;
}
.home-hero.hero-with-image p:not(.section-eyebrow) { max-width: 570px; font-size: 1.12rem; line-height: 1.55; }
.home-hero.hero-with-image p + p { margin-top: 14px; font-size: 0.95rem; color: #e3eadf; }
.home-hero .hero-actions { margin-bottom: 20px; }
.home-hero .button, .home-how-it-works .button, .final-cta .button {
  min-width: 260px;
  background: #f8f5eb;
  color: #123e2d;
  border-color: #d6ddc8;
}
.home-hero .button:hover, .home-how-it-works .button:hover, .final-cta .button:hover { background: #e2e9d2; box-shadow: 0 10px 28px #0003; }
.home-hero .hero-actions + p { font-size: 0.92rem !important; }

/* Photo-led service cards with restrained borders. */
.home-services { padding-block: 64px; }
.home-services > .inner > .section-lede { max-width: 820px; margin-top: 20px; }
.service-list { margin-top: 32px; gap: 24px; }
.service-item {
  background: transparent;
  border-color: #e6e4d7;
  box-shadow: 0 2px 5px #102c2203;
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
.home-services .service-card-image { height: auto; aspect-ratio: 1.25; transition: transform 600ms cubic-bezier(.2,.65,.3,1); }
.service-card-media { margin-bottom: 22px; }
.service-item h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 800; letter-spacing: -0.035em; }
.service-item p { font-size: 1rem; line-height: 1.55; }
.section-outro { margin-top: 30px; }

/* A green process band with numbered, open columns. */
.home-how-it-works {
  background: radial-gradient(ellipse at 75% 20%, #205137, #103b2a 75%);
  color: #fff;
}
.home-how-it-works > .inner { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr); gap: 48px; align-items: center; }
.process-intro { display: block; }
.home-how-it-works h2 { font-size: clamp(2rem, 3.3vw, 3rem); }
.home-how-it-works .section-eyebrow { color: #d8e4c8; }
.home-how-it-works p { color: #e7ecdf; }
.home-how-it-works .section-lede { margin-top: 18px; }
.process-contact { display: grid; gap: 6px; margin-top: 22px; }
.process-contact a { width: fit-content; font-size: 1.05rem; font-weight: 600; text-decoration: none; }
.process-contact a:hover { text-decoration: underline; }
.home-how-it-works .benefit-list { gap: 0; margin: 0; }
.home-how-it-works .benefit-card { padding: 0 22px; min-height: 0; background: none; border: 0; border-left: 1px solid #d8e4c83d; border-radius: 0; }
.home-how-it-works .benefit-card:first-child { border-left: 0; }
.step-number {
  display: inline-grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 22px;
  border: 1px solid #ebefdc;
  border-radius: 50%;
  background: #71864c66;
  font-size: 1.4rem;
  font-weight: 600;
  transition: background 220ms ease, transform 220ms ease;
}
.home-how-it-works .benefit-card h3 { color: #fff; font-size: 1.15rem; line-height: 1.25; font-weight: 650; }
.home-how-it-works .benefit-card p { font-size: 0.95rem; margin-top: 14px; }
.process-photo { grid-column: 1 / -1; height: clamp(200px, 25vw, 340px); aspect-ratio: auto; object-position: center 58%; }

.faq-layout { gap: clamp(32px, 6vw, 90px); }
.faq h2 { font-size: clamp(2.1rem, 3.6vw, 3.2rem); }
.faq-photo { margin-top: 32px; }
.faq-list { border: 0; border-radius: 0; }
.faq-list details { padding: 23px 0; background: transparent; border-bottom: 1px solid #ced4c1; transition: background 200ms ease; }
.faq-list details:first-child { border-top: 1px solid #ced4c1; }
.faq-list details:last-child { border-bottom: 1px solid #ced4c1; }
.faq-list summary { font-weight: 650; line-height: 1.4; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { font-size: 1.4rem; color: #627a45; }
.faq-list p { font-size: 0.98rem; }
.final-cta { min-height: 570px; }
.final-cta h2 { max-width: 800px; font-size: clamp(2.4rem, 4.5vw, 4rem); }
.final-cta p { color: #f4f6ec; }
.final-cta .section-eyebrow { color: #d8e4c8; }
.final-cta .button { margin-bottom: 24px; }
.final-cta-with-photo::before { background: #0e392bc9; }
.site-footer { background: #efeee1; }
.footer-brand-mark { background: #123e2d; border-radius: 50%; }
.footer-lockup strong { color: #123e2d; font-weight: 850; }
.footer-bottom { display: flex; }
.header-contact a, .footer-links a, .footer-visit a { transition: color 180ms ease; }
.header-contact a:hover, .footer-links a:hover, .footer-visit a:hover { color: #627a45; }

/* Motion is enabled only when supported and requested by the browser. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .service-item:hover { transform: translateY(-7px); border-color: #b5c19e; box-shadow: 0 16px 35px #183c2914; }
  .service-item:hover .service-card-image { transform: scale(1.045); }
  .benefit-card:hover .step-number { background: #829653b3; transform: translateY(-4px); }
  .faq-list details:hover { background: #eeefdf; }
}
.scroll-reveal {
  transition: opacity 650ms ease var(--reveal-delay, 0ms),
    translate 650ms cubic-bezier(.2,.65,.3,1) var(--reveal-delay, 0ms),
    transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease, background 200ms ease;
}
.scroll-reveal.is-pending { opacity: 0; translate: 0 26px; }
.scroll-reveal.is-pending:focus-within { opacity: 1; translate: none; }

@media (max-width: 1150px) {
  .header-contact { display: none; }
  .home-how-it-works > .inner { grid-template-columns: 1fr; gap: 36px; }
  .process-intro > div { max-width: 720px; }
  .home-how-it-works .benefit-card { padding-inline: 28px; }
  .home-how-it-works .benefit-card:first-child { padding-left: 0; }
}
@media (max-width: 850px) {
  .footer-content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .nav-links { gap: 18px; }
  .nav { gap: 16px; }
  .nav-action .button { padding-inline: 16px; font-size: 0.78rem; }
  .home-hero.hero-with-image h1 { max-width: 620px; }
  .service-list { gap: 16px; }
  .service-item h3, .service-item p { margin-inline: 18px; }
}
@media (max-width: 720px) {
  .footer-content { grid-template-columns: minmax(0, 1fr); }
  html { scroll-padding-top: 100px; }
  .site-header { padding-block: 17px; }
  .nav { grid-template-columns: minmax(0, 1fr) auto; }
  .nav-toggle { grid-column: 2; border-color: #b6c1a5; }
  .nav-action { display: none; }
  .nav-links { padding-top: 14px; justify-items: start; }
  .nav-links a { width: 100%; justify-content: flex-start; min-height: 48px; font-size: 1rem; }
  .brand .brand-wordmark { display: grid; overflow: visible; }
  .brand-wordmark strong { font-size: 1.85rem; }
  .brand-wordmark > span { display: block; font-size: 0.8rem; overflow: visible; }
  .home-hero.hero-image-ready.hero-with-image { padding: 0; min-height: 0; background: #103b2a; }
  .home-hero.hero-with-image .inner { padding: 38px var(--gutter) 46px; }
  .home-hero.hero-with-image h1 { font-size: clamp(2.3rem, 7.5vw, 3.4rem); }
  .home-hero.hero-with-image p:not(.section-eyebrow) { font-size: 1rem; }
  .home-hero .button { min-width: min(100%, 280px); }
  .home-services { padding-block: 52px; }
  .service-list { gap: 26px; }
  .home-services .service-card-image { aspect-ratio: 3 / 2; }
  .service-item h3 { font-size: 1.8rem; }
  .service-item h3, .service-item p { margin-inline: 24px; }
  .home-how-it-works .benefit-list { gap: 28px; }
  .home-how-it-works .benefit-card, .home-how-it-works .benefit-card:first-child {
    padding: 0 0 0 82px;
    position: relative;
    border: 0;
  }
  .step-number { position: absolute; left: 0; top: 0; width: 56px; height: 56px; }
  .home-how-it-works .benefit-card h3 { font-size: 1.25rem; }
  .process-photo { height: 240px; }
  .faq-list details { padding-block: 22px; }
  .final-cta { min-height: 600px; }
  .footer-bottom { font-size: 0.75rem; }
}
/* Local demo estimate form and chat. */
.button { cursor: pointer; font-family: inherit; }
.lead-modal { padding: 20px; }
.lead-modal-backdrop { background: #08291dcc; backdrop-filter: blur(4px); }
#lead-modal .lead-modal-panel { width: min(480px, 100%); max-height: calc(100dvh - 40px); padding: 38px 32px 30px; }
#lead-modal .section-eyebrow { margin-bottom: 12px; color: #627a45; }
#lead-modal h2 { padding-right: 20px; font-size: 2rem; letter-spacing: -0.04em; }
#lead-modal .lead-capture-placeholder { margin-top: 20px; padding: 0; border: 0; min-height: 0; display: block; }
#lead-modal .form-help { margin: 0 0 4px; font-size: 0.95rem; }
#lead-modal .form-field { gap: 6px; font-weight: 600; }
#lead-modal input { min-height: 48px; background: #fffdf6; border-color: #cdd5c0; border-radius: 5px; font-size: 16px; font-weight: 400; }
#lead-modal input:focus { border-color: #627a45; }
#lead-modal .button { width: 100%; margin-top: 4px; }
#lead-modal .mock-notice { text-align: center; font-size: 0.78rem; }
#lead-modal .lead-form-status { font-size: 0.9rem; color: #123e2d; }
.lead-modal-close { font-size: 1.45rem; line-height: 1; transition: background 180ms ease; }
.lead-modal-close:hover { background: #e2e9d2; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.mock-chat { position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); z-index: 60; display: grid; justify-items: end; gap: 14px; }
.mock-chat button, .mock-chat input { font: inherit; }
.mock-chat button { cursor: pointer; }
.chat-toggle { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 16px 22px; border: 1px solid #66816b; border-radius: 999px; background: #123e2d; color: #fff; box-shadow: 0 6px 26px #08291d40; font-size: 0.95rem !important; font-weight: 650 !important; transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease; }
.chat-toggle svg { width: 24px; height: 24px; fill: currentColor; }
.chat-toggle:hover { transform: translateY(-3px); background: #245b3c; box-shadow: 0 10px 30px #08291d50; }
.mock-chat-panel { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; width: min(370px, calc(100vw - 32px)); height: min(560px, calc(100dvh - 120px)); overflow: hidden; border: 1px solid #ced5c0; border-radius: 16px; background: #f8f5eb; box-shadow: 0 18px 64px #08291d38; animation: chat-appear 220ms ease both; }
.mock-chat-panel[hidden] { display: none; }
.mock-chat-header { display: flex; align-items: center; gap: 12px; padding: 18px; background: #123e2d; color: white; }
.chat-avatar { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border: 1px solid #b0c49b; border-radius: 50%; background: #6c824c66; font-size: 0.85rem; font-weight: 700; }
.mock-chat-header h2 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.mock-chat-header p { margin: 3px 0 0; font-size: 0.75rem; color: #e5eadc; }
.chat-close { align-self: start; margin-left: auto; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: white; font-size: 1.5rem !important; line-height: 1; }
.chat-close:hover { background: #ffffff24; }
.chat-demo-label { margin: 0; padding: 8px 18px; border-bottom: 1px solid #e1e4d5; color: #56694c; font-size: 0.72rem; }
.chat-messages { overflow-y: auto; overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.chat-message { flex-shrink: 0; align-self: flex-start; max-width: 92%; margin: 0; padding: 12px 14px; border: 1px solid #dbe1ce; border-radius: 12px 12px 12px 3px; background: #e9eddc; color: #163a2a; font-size: 0.88rem; line-height: 1.5; overflow-wrap: anywhere; }
.chat-message-user { align-self: flex-end; border-radius: 12px 12px 3px 12px; border-color: #123e2d; background: #123e2d; color: #fff; }
.chat-quick-actions { display: flex; flex-wrap: wrap; gap: 7px; padding: 8px 16px 14px; }
.chat-quick-actions button { padding: 7px 10px; border: 1px solid #b8c7a5; border-radius: 6px; background: transparent; color: #123e2d; font-size: 0.75rem; transition: background 180ms ease; }
.chat-quick-actions button:hover { background: #e2e9d2; }
.chat-compose { display: flex; gap: 8px; margin: 0 16px; }
.chat-compose input { min-width: 0; flex: 1; width: 100%; padding: 11px 12px; border: 1px solid #cbd5be; border-radius: 6px; background: #fffdf7; color: #123e2d; font-size: 16px; }
.chat-compose button { flex-shrink: 0; display: grid; place-items: center; width: 44px; border: 0; border-radius: 6px; background: #123e2d; color: #fff; }
.chat-compose button:hover { background: #245b3c; }
.chat-compose svg { width: 20px; height: 20px; fill: currentColor; }
.chat-privacy-note { margin: 9px 16px 13px; font-size: 0.66rem; text-align: center; color: #5c6b54; }
@keyframes chat-appear { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 520px) {
  .mock-chat { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); gap: 10px; }
  .chat-toggle { padding: 15px; min-height: 54px; }
  .chat-toggle > span { display: none; }
  .mock-chat-panel { height: min(540px, calc(100dvh - 100px)); }
  #lead-modal .lead-modal-panel { padding: 36px 22px 24px; }
  #lead-modal h2 { font-size: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .scroll-reveal.is-pending { opacity: 1; translate: none; }
  .button:hover, .service-item:hover, .chat-toggle:hover { transform: none; }
}