/* Fort Mill Tree Removal — custom styles */
/* Direction: warm Carolina, terracotta + sage on cream paper. Slab-serif headings. */

html {
  scroll-behavior: smooth;
}

body {
  background-color: #f7f4ef;
}

/* Faint paper grain over the whole page for a warm, tactile feel */
.paper-grain {
  background-image:
    radial-gradient(circle at 15% 20%, rgba(169, 80, 43, 0.04) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(125, 147, 112, 0.05) 0%, transparent 45%);
}

/* ===== Announcement strip ===== */
.strip {
  background: linear-gradient(90deg, #2e2620, #4a3f36);
}

/* ===== Masthead (sticky header) ===== */
.masthead--pinned {
  background-color: rgba(247, 244, 239, 0.96) !important;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 18px rgba(46, 38, 32, 0.09);
}

/* Leaf mark badge */
.leaf-mark {
  background: linear-gradient(135deg, #a9502b, #8f4023);
  box-shadow: 0 6px 16px rgba(169, 80, 43, 0.28);
}

/* Dropdown menu (desktop) */
.pulldown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.pulldown-host:hover .pulldown,
.pulldown-host:focus-within .pulldown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ===== Slide-out drawer (mobile nav) ===== */
.drawer {
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.drawer.is-open {
  transform: translateX(0);
}

/* ===== Hero form card ===== */
.quote-card {
  box-shadow: 0 24px 60px rgba(46, 38, 32, 0.14);
}

/* Soft sage-tinted hero wash */
.hero-wash {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(125, 147, 112, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 80%, rgba(169, 80, 43, 0.08) 0%, transparent 50%),
    #f7f4ef;
}

/* ===== Town pill links ===== */
.town-pill {
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.town-pill:hover {
  transform: translateY(-2px);
}

/* ===== Raised cards ===== */
.raise {
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.raise:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(46, 38, 32, 0.13);
}

/* ===== Organic top divider (canopy silhouette feel) ===== */
.canopy-edge {
  position: relative;
}
.canopy-edge::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C 150 6 250 6 400 26 C 550 46 650 2 800 22 C 950 42 1050 8 1200 30 L 1200 0 L 0 0 Z' fill='%23f7f4ef'/%3E%3C/svg%3E") no-repeat top center;
  background-size: 100% 100%;
}

/* ===== Reveal on scroll ===== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-shown {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Step markers ===== */
.step-marker {
  width: 3rem;
  height: 3rem;
  border-radius: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
  font-family: 'Bitter', serif;
}

/* ===== Accordion (FAQ) ===== */
.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.accordion-panel.is-expanded {
  max-height: 600px;
}
.accordion-sign {
  transition: transform 0.3s ease;
}
.accordion-trigger[aria-expanded="true"] .accordion-sign {
  transform: rotate(45deg);
}

/* ===== Form fields ===== */
.field {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field:focus {
  outline: none;
  border-color: #a9502b;
  box-shadow: 0 0 0 3px rgba(169, 80, 43, 0.16);
}

/* ===== Skip link ===== */
.skip-to {
  position: absolute;
  top: -120%;
  left: 1rem;
  background: #2e2620;
  color: #f7f4ef;
  padding: 0.6rem 1.1rem;
  border-radius: 0 0 0.5rem 0.5rem;
  z-index: 200;
  transition: top 0.2s ease;
}
.skip-to:focus {
  top: 0;
}

/* Underline flourish for active nav item */
.nav-active {
  position: relative;
}
.nav-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: #a9502b;
  border-radius: 2px;
}

@media print {
  .masthead, footer, .drawer, .strip {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }
}