/* === BASE === */
:root {
  --bg: #f5f0e8;
  --fg: #1c2e20;
  --forest: #1a3d2e;
  --forest-dark: #0f2218;
  --earth: #8B7355;
  --earth-light: #a8936e;
  --mist: #e8e2d4;
  --cream: #faf7f2;
  --dusk: #2d3b4f;
  --text: #2a2a2a;
  --muted: #6b6b5a;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Figtree', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--forest);
  color: var(--cream);
}

/* === TYPOGRAPHY === */
h1, h2, h3, h4 {
  font-family: 'Bitter', serif;
  font-weight: 600;
  line-height: 1.15;
  color: var(--forest-dark);
}

.section-heading {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

/* === LAYOUT UTILITIES === */
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
}

.label-tag {
  display: inline-block;
  font-family: 'Bitter', serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--earth);
  margin-bottom: 0.75rem;
}

/* === HEADER === */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.25rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to bottom, rgba(10,20,12,0.85) 0%, transparent 100%);
  backdrop-filter: blur(4px);
}

.wordmark {
  font-family: 'Bitter', serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--cream);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.nav-link {
  font-size: 0.85rem;
  color: rgba(250,247,242,0.8);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}

.nav-link:hover { color: var(--cream); }

/* === HERO === */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--forest-dark);
}

.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.dawn-light {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(100,140,90,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 120% 80% at 30% 60%, rgba(30,60,35,0.6) 0%, transparent 60%),
    linear-gradient(160deg, #0f2218 0%, #162e1c 40%, #1a3d2e 100%);
}

/* Abstract tree silhouettes */
.forest-silhouette {
  position: absolute;
  bottom: 0;
  left: -5%;
  width: 55%;
  height: 70%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 500' preserveAspectRatio='xMidYMax slice'%3E%3Cpath fill='%230f1e12' d='M0 500 L40 500 L60 340 L90 350 L110 220 L130 230 L145 180 L160 190 L170 140 L185 150 L200 90 L210 100 L225 60 L235 70 L250 50 L255 65 L275 90 L285 80 L300 120 L310 110 L325 160 L335 150 L360 200 L370 190 L390 240 L400 230 L420 280 L430 270 L455 310 L465 300 L485 340 L495 330 L520 370 L530 360 L560 400 L570 390 L600 430 L610 420 L650 460 L660 450 L700 480 L710 475 L750 500 Z'/%3E%3C/svg%3E") no-repeat bottom left;
  background-size: cover;
  opacity: 0.7;
}

.forest-silhouette.fore-2 {
  left: auto;
  right: -5%;
  width: 45%;
  height: 55%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 500' preserveAspectRatio='xMidYMax slice'%3E%3Cpath fill='%23112218' d='M600 500 L550 500 L535 360 L520 365 L505 250 L490 255 L478 200 L465 205 L455 160 L442 165 L430 120 L418 125 L405 80 L392 85 L378 60 L368 68 L352 95 L340 88 L325 115 L312 108 L298 145 L285 138 L270 170 L258 163 L242 195 L230 188 L215 220 L202 213 L185 250 L172 242 L155 280 L142 272 L125 310 L112 302 L90 340 L78 332 L55 370 L45 365 L25 400 L15 395 L0 425 L0 500 Z'/%3E%3C/svg%3E") no-repeat bottom right;
  background-size: cover;
  opacity: 0.5;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 7rem 5rem 5rem;
  max-width: 860px;
}

.hero-kicker {
  font-family: 'Bitter', serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--earth-light);
  margin-bottom: 1.25rem;
  opacity: 0.9;
}

.hero-headline {
  font-family: 'Bitter', serif;
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  font-weight: 700;
  color: var(--cream);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 1.75rem;
}

.hero-sub {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: rgba(250,247,242,0.75);
  max-width: 520px;
  line-height: 1.7;
  font-weight: 400;
}

/* === CANOPY (Services) === */
.canopy {
  background: var(--cream);
  padding: 7rem 0 6rem;
}

.canopy-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
}

.canopy-label {
  font-family: 'Bitter', serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--earth);
  margin-bottom: 0.75rem;
}

.canopy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem 3rem;
  margin-top: 3rem;
}

.canopy-card {
  padding: 2rem 2rem 2rem 0;
  border-top: 1px solid rgba(26,61,46,0.12);
}

.canopy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--forest);
  margin-bottom: 1.25rem;
}

.canopy-card h3 {
  font-family: 'Bitter', serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--forest-dark);
  margin-bottom: 0.75rem;
}

.canopy-card p {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.7;
}

/* === RIGGING (Removals) === */
.rigging {
  background: var(--mist);
  padding: 7rem 0;
  border-top: 1px solid rgba(26,61,46,0.08);
  border-bottom: 1px solid rgba(26,61,46,0.08);
}

.rigging-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.rigging-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rigging-graphic {
  position: relative;
  width: 240px;
  height: 340px;
}

.tree-trunk {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 18px;
  height: 280px;
  background: linear-gradient(to top, #2d2010, #4a3520, #6b5030);
  border-radius: 4px 4px 2px 2px;
}

/* Crown of tree */
.tree-crown {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 140px;
  background: radial-gradient(ellipse at 50% 80%, #2d5a35 0%, #1a3d2e 60%, transparent 100%);
  border-radius: 50% 50% 40% 40%;
}

.rope {
  position: absolute;
  background: #c8b87a;
  height: 2px;
}

.rope-1 {
  width: 90px;
  top: 60px;
  left: 10px;
  transform: rotate(-35deg);
  transform-origin: left top;
}

.rope-2 {
  width: 70px;
  top: 80px;
  right: 40px;
  transform: rotate(40deg);
  transform-origin: right top;
  background: #d4c48a;
}

.climber-figure {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 28px;
  background: #d46030;
  border-radius: 3px;
}

.climber-figure::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 12px;
  background: #d46030;
  border-radius: 50% 50% 30% 30%;
}

.crane-arm {
  position: absolute;
  bottom: 40px;
  right: 0;
  width: 100px;
  height: 4px;
  background: #8a8a7a;
  border-radius: 2px;
  transform: rotate(-20deg);
  transform-origin: right center;
}

.crane-arm::after {
  content: '';
  position: absolute;
  right: -4px;
  top: -3px;
  width: 10px;
  height: 10px;
  background: #8a8a7a;
  border-radius: 50%;
}

.ground-line {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(26,61,46,0.25);
}

.rigging-label {
  font-family: 'Bitter', serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--earth);
  margin-bottom: 0.75rem;
}

.rigging-list {
  list-style: none;
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.rigging-list li {
  font-size: 0.95rem;
  color: var(--muted);
  padding-left: 1.5rem;
  position: relative;
}

.rigging-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 2px;
  background: var(--earth);
  border-radius: 1px;
}

/* === REMEDIATION (Storm) === */
.remediation {
  background: var(--forest);
  padding: 6rem 0;
}

.remediation-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.remediation-label {
  font-family: 'Bitter', serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--earth-light);
  margin-bottom: 0.75rem;
}

.remediation-text .section-heading {
  color: var(--cream);
}

.remediation-text p {
  color: rgba(250,247,242,0.72);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: 1rem;
}

.remediation-detail {
  color: rgba(250,247,242,0.5) !important;
  font-size: 0.85rem !important;
}

.remediation-visual {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.storm-stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.5rem;
  border: 1px solid rgba(200,184,122,0.2);
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
}

.stat-number {
  font-family: 'Bitter', serif;
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: -0.04em;
  line-height: 1;
}

.stat-label {
  font-size: 0.85rem;
  color: rgba(250,247,242,0.55);
  font-weight: 400;
}

/* === GEOGRAPHY === */
.geography {
  background: var(--cream);
  padding: 6rem 0;
  border-top: 1px solid rgba(26,61,46,0.08);
}

.geography-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
}

.geography-label {
  font-family: 'Bitter', serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--earth);
  margin-bottom: 0.75rem;
}

.geography-desc {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 560px;
  margin-bottom: 3rem;
  line-height: 1.7;
}

.geo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem 3rem;
}

.geo-region {
  padding: 1.5rem;
  background: var(--mist);
  border-radius: 4px;
}

.geo-region h3 {
  font-family: 'Bitter', serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--forest-dark);
  margin-bottom: 0.5rem;
}

.geo-region p {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.6;
}

/* === PRINCIPLES === */
.principles {
  background: var(--dusk);
  padding: 8rem 0;
}

.principles-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}

.principles-heading {
  font-family: 'Bitter', serif;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  color: var(--cream);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 3rem;
}

.principles-body {
  max-width: 660px;
  margin: 0 auto 3rem;
}

.principles-body p {
  font-size: 1rem;
  color: rgba(250,247,242,0.65);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.principles-rule {
  display: inline-block;
  padding: 0.6rem 2rem;
  border: 1px solid rgba(200,184,122,0.3);
  border-radius: 2px;
}

.principles-rule span {
  font-family: 'Bitter', serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--earth-light);
}

/* === CLOSING === */
.closing {
  background: var(--forest-dark);
  padding: 7rem 0;
  text-align: center;
}

.closing-inner {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 2rem;
}

.closing-statement {
  font-family: 'Bitter', serif;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 600;
  color: var(--cream);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 2.5rem;
}

.closing-cta {
  display: inline-block;
  font-family: 'Bitter', serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--forest-dark);
  background: var(--cream);
  padding: 0.9rem 2.25rem;
  text-decoration: none;
  border-radius: 3px;
  letter-spacing: 0.02em;
  transition: background 0.2s, color 0.2s;
}

.closing-cta:hover {
  background: var(--earth-light);
  color: var(--forest-dark);
}

.closing-phone {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: rgba(250,247,242,0.5);
}

.closing-phone strong {
  color: rgba(250,247,242,0.75);
  font-weight: 600;
}

/* === FOOTER === */
.site-footer {
  background: var(--bg);
  padding: 4rem 0 2rem;
  border-top: 1px solid rgba(26,61,46,0.1);
}

.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-wordmark {
  font-family: 'Bitter', serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--forest-dark);
  display: block;
  margin-bottom: 0.5rem;
}

.footer-brand p {
  font-size: 0.875rem;
  color: var(--muted);
  max-width: 300px;
  line-height: 1.6;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: right;
}

.footer-contact a {
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-contact a:hover { color: var(--forest); }

.footer-bottom {
  max-width: 1160px;
  margin: 0 auto;
  padding: 1.5rem 2rem 0;
  border-top: 1px solid rgba(26,61,46,0.08);
}

.footer-bottom p {
  font-size: 0.8rem;
  color: var(--muted);
  opacity: 0.6;
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
  .rigging-inner,
  .remediation-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .rigging-visual {
    order: -1;
  }

  .hero-content {
    padding: 7rem 2rem 5rem;
  }

  .footer-inner {
    flex-direction: column;
  }

  .footer-contact {
    text-align: left;
  }
}

@media (max-width: 600px) {
  .site-header {
    padding: 1rem 1.5rem;
  }

  .hero-headline {
    font-size: 2.25rem;
  }

  .storm-stat {
    padding: 1rem 1.25rem;
  }

  .stat-number {
    font-size: 2.25rem;
  }

  .canopy-grid {
    grid-template-columns: 1fr;
  }
}