/*
 * Active fall presentation for the core Garden Sage site.
 * The permanent layout remains in /styles.css; this file only changes the
 * seasonal palette and a few atmosphere details. See /SEASONS.md.
 */

:root {
  --bg-dark: #172019;
  --bg-medium: #30382b;
  --bg-light: #f6f1e8;
  --bg-card: rgba(31, 31, 23, 0.82);
  --text-main: #2d2a21;
  --text-muted: rgba(45, 42, 33, 0.72);
  --text-on-dark: #fffaf0;
  --accent: #c97942;
  --accent-dark: #8f4f2d;
  --accent-soft: rgba(201, 121, 66, 0.2);
  --border-soft: rgba(84, 65, 43, 0.16);
  --shadow-soft: 0 18px 45px rgba(58, 40, 21, 0.16);
  --shadow-sharp: 0 30px 60px rgba(33, 24, 14, 0.28);
}

body {
  background: #f6f1e8;
}

.site-header {
  background: rgba(250, 247, 239, 0.95);
  border-bottom-color: rgba(112, 76, 43, 0.12);
}

.site-nav a::after {
  background: linear-gradient(90deg, #8f4f2d, #d29a4a);
}

.cta-button {
  background: linear-gradient(135deg, #a95830, #d89a4c);
  box-shadow: 0 16px 32px rgba(143, 79, 45, 0.34);
}

.cta-button:hover,
.cta-button:focus-visible {
  box-shadow: 0 20px 40px rgba(143, 79, 45, 0.42);
}

.hero__overlay {
  background:
    linear-gradient(90deg, rgba(24, 27, 20, 0.94) 0%, rgba(30, 30, 21, 0.78) 48%, rgba(42, 31, 20, 0.48) 100%),
    linear-gradient(0deg, rgba(105, 54, 27, 0.2), rgba(105, 54, 27, 0.02));
}

.hero__seasonal-card {
  background: rgba(30, 29, 20, 0.86);
  border-color: rgba(232, 188, 121, 0.3);
}

.hero__seasonal-body .eyebrow {
  color: #e5b36b;
}

.seasonal-feature,
.fall-feature {
  background:
    radial-gradient(circle at 88% 12%, rgba(184, 103, 54, 0.16), transparent 30%),
    linear-gradient(135deg, #f4e7d5 0%, #e9ddcb 55%, #dde1d2 100%);
}

.fall-feature::before {
  background: rgba(255, 252, 246, 0.94);
  box-shadow: 0 32px 55px rgba(75, 49, 23, 0.12);
}

.fall-feature__highlights li {
  position: relative;
  padding-left: 1.15rem;
}

.fall-feature__highlights li::before {
  content: "";
  position: absolute;
  top: 0.65rem;
  left: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #b86837;
  box-shadow: 0 0 0 4px rgba(184, 104, 55, 0.13);
}

.services {
  background: linear-gradient(180deg, #faf6ef 0%, #efe8dc 100%);
}

.service-card,
.process-step,
.confidence-card {
  background: #fffdf8;
}

.investment {
  background: #fffaf2;
}

.investment-card,
.confidence-card,
.pillar-link-card {
  background: rgba(250, 245, 235, 0.9);
}

.process-step::after {
  background: linear-gradient(135deg, rgba(201, 121, 66, 0.15), rgba(116, 73, 45, 0.08));
}

.cta-band {
  background:
    radial-gradient(circle at 82% 20%, rgba(211, 151, 76, 0.22), transparent 34%),
    #263027;
}

.contact {
  background: linear-gradient(180deg, #efe7da 0%, #e7ddcf 100%);
}

.site-footer {
  background: #171d18;
}

.showcase-hero__overlay {
  background: linear-gradient(90deg, rgba(27, 27, 18, 0.92), rgba(52, 35, 21, 0.56));
}

.portfolio-hero__overlay {
  background: linear-gradient(90deg, rgba(27, 27, 18, 0.9), rgba(61, 40, 23, 0.5));
}

.showcase-section:nth-of-type(even) {
  background: #f0e8dc;
}

@media (max-width: 920px) {
  .site-nav {
    background: rgba(250, 247, 239, 0.99);
  }

  .hero__overlay {
    background: linear-gradient(180deg, rgba(24, 27, 20, 0.5), rgba(24, 27, 20, 0.94) 68%);
  }
}

@media (max-width: 720px) {
  .hero__media-fallback img {
    object-position: 60% center;
  }
}