/* === TOKENS ===
   Ridge (deep teal-forest, Crowley's Ridge oak-hickory canopy): primary accent/CTA
   Loess (pale wind-borne ridge soil): secondary surface/divider tone
   Delta (warm neutral, flat Craighead County farmland): body background
*/
:root {
  --delta:      #f5f2e9;
  --delta-line: #ddd4bb;
  --loess:      #e2dac0;
  --loess-line: #c9bd9a;
  --ridge:      #1f5c4e;
  --ridge-dark: #143f35;
  --charcoal:   #1e2420;
  --text:       #1e2420;
  --bg:         #f5f2e9;
  --card-bg:    #ffffff;
  --max-w:      880px;
  --radius:     4px;
  --font-display: 'Manrope', sans-serif;
  --font-body:    'Source Sans 3', sans-serif;
  --font-mono:    'Space Mono', monospace;
  /* Dedicated conversion-action color. Deliberately fixed (not redefined in
     the dark-mode media query) so button contrast can never collapse the
     way --loess/--ridge-dark did before (see the Phase 3 dark-mode bug) -
     one guaranteed-legible color for every call/quote CTA, in both modes. */
  --action:       #e3a73e;
  --action-hover: #c98a28;
  --action-text:  #2a1b04;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg); color: var(--text); line-height: 1.7;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ridge); }
a:hover { color: var(--ridge-dark); }

/* === TYPOGRAPHY === */
h1, h2, h3 {
  font-family: var(--font-display); font-weight: 800;
  line-height: 1.2; color: var(--ridge);
}
h1 { font-size: clamp(1.8rem, 5vw, 2.7rem); }
h2 { font-size: clamp(1.3rem, 3vw, 1.75rem); margin-bottom: 0.75rem; }
h3 { font-size: 1.1rem; margin: 1.5rem 0 0.4rem; color: var(--ridge); }
p  { margin-bottom: 1rem; }
ul, ol { padding-left: 1.5rem; margin-bottom: 1rem; }
li { margin-bottom: 0.35rem; }
strong { font-weight: 700; }
.mono { font-family: var(--font-mono); }

/* === LAYOUT === */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 1.25rem; }
.content-area { max-width: var(--max-w); margin: 0 auto; padding: 2.5rem 1.25rem 3rem; }

/* === SIGNATURE DEVICE: ridge-line section divider ===
   A jagged silhouette echoing Crowley's Ridge rising out of the flat Delta
   farmland around it, real regional geography, not a decorative pattern.
   Mechanically distinct from Macon's plank-divider (repeating solid blocks)
   and Springfield's plank-tick divider (repeating thin vertical lines): this
   is one continuous jagged polygon skyline, not a repeating discrete unit. */
.section-divider {
  border: none; height: 28px; margin: 2.5rem 0 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='28' viewBox='0 0 140 28'%3E%3Cpolyline points='0,28 0,16 12,5 24,18 38,3 52,14 66,2 80,17 94,6 108,19 122,4 140,15 140,28' fill='%231f5c4e' opacity='0.55'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: 140px 28px;
}

/* === HEADER === */
.site-header { background: var(--ridge); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 1.25rem; max-width: var(--max-w); margin: 0 auto;
}
.logo {
  color: white; font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 800; text-decoration: none; line-height: 1.2;
}
.logo span { display: block; font-size: 0.68rem; font-weight: 400; opacity: .75; letter-spacing: .05em; font-family: var(--font-body); }
/* Header phone is a real button, not a text link - this is the one CTA that
   stays visible above the fold on every page even with the mobile nav
   collapsed behind the hamburger, so it carries real conversion weight on
   its own. */
.header-phone {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--action); color: var(--action-text);
  font-weight: 700; font-size: 0.98rem; text-decoration: none;
  font-family: var(--font-mono); padding: 0.45rem 0.9rem; border-radius: var(--radius);
  white-space: nowrap;
}
.header-phone:hover { background: var(--action-hover); color: var(--action-text); }
.nav-toggle { display: none; background: none; border: none; color: white; font-size: 1.6rem; cursor: pointer; line-height: 1; padding: 0 0.25rem; }

/* === NAV === */
.site-nav { background: rgba(0,0,0,.2); }
.nav-list { display: flex; list-style: none; max-width: var(--max-w); margin: 0 auto; padding: 0 1.25rem; flex-wrap: wrap; }
.nav-list > li > a { display: block; padding: 0.55rem 0.85rem; color: rgba(255,255,255,.85); text-decoration: none; font-size: 0.85rem; white-space: nowrap; }
.nav-list > li > a:hover { color: white; }
.nav-cta > a { background: var(--action); color: var(--action-text) !important; border-radius: var(--radius); margin: 0.3rem 0.4rem; padding: 0.5rem 1.15rem !important; font-weight: 800; font-size: 0.92rem; }
.nav-cta > a:hover { background: var(--action-hover) !important; }

/* === HERO === */
.hero { position: relative; height: 440px; overflow: hidden; }
.hero-img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(31,92,78,.92) 0%, rgba(31,92,78,.6) 55%, rgba(31,92,78,.2) 100%);
  display: flex; align-items: center;
}
.hero-content { padding: 0 1.25rem; max-width: 640px; margin: 0 auto; width: 100%; }
.hero h1 { color: white; margin-bottom: 0.75rem; max-width: 640px; }
.hero-sub { color: rgba(255,255,255,.85); margin-bottom: 1.25rem; font-size: 1.05rem; max-width: 560px; }
.hero-cta-row, .page-header-cta-row { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-top: 0.25rem; }
.btn-cta {
  display: inline-block; background: var(--action); color: var(--action-text);
  padding: 0.85rem 1.85rem; border-radius: var(--radius);
  font-family: var(--font-display); font-size: 1.08rem; font-weight: 800;
  text-decoration: none; box-shadow: 0 3px 10px rgba(0,0,0,.2);
}
.btn-cta:hover { background: var(--action-hover); color: var(--action-text); }
.btn-cta-secondary {
  display: inline-block; background: transparent; color: white;
  padding: 0.8rem 1.75rem; border-radius: var(--radius); border: 2px solid rgba(255,255,255,.8);
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
  text-decoration: none;
}
.btn-cta-secondary:hover { background: rgba(255,255,255,.15); color: white; }

/* === SUPPORTING PAGE IMAGE === */
.page-image { width: 100%; height: 320px; object-fit: cover; border-radius: 6px; margin: 1.25rem 0; }
@media (max-width: 640px) {
  .hero { height: 360px; }
  .hero-content { padding: 0 1.25rem; }
  .page-image { height: 220px; }
}

/* === PAGE HEADER (non-home) === */
.page-header { background: var(--ridge); padding: 2.5rem 1.25rem 2rem; }
.page-header h1 { color: white; max-width: var(--max-w); margin: 0 auto; }
.page-header .page-header-cta-row { max-width: var(--max-w); margin: 1.1rem auto 0; }

/* === SECTION SUBHEAD === */
p.subhead { font-weight: 700; color: var(--ridge); margin-bottom: 0.25rem; font-size: 1rem; }

/* === TABLE === */
.table-wrap { overflow-x: auto; margin-bottom: 1.5rem; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; min-width: 400px; }
th { background: var(--ridge); color: white; padding: 0.6rem 0.85rem; text-align: left; font-family: var(--font-display); font-size: 0.9rem; }
td { padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--delta-line); font-family: var(--font-mono); font-size: 0.92rem; }
td:first-child { font-family: var(--font-body); }
tr:nth-child(even) td { background: var(--loess); }

/* === FAQ ACCORDION === */
.faq-section { margin-top: 0.5rem; }
.faq-item { border-bottom: 1px solid var(--delta-line); }
.faq-item summary {
  padding: 1rem 0; cursor: pointer; font-weight: 700; color: var(--ridge);
  list-style: none; display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; font-family: var(--font-display); font-size: 0.98rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.4rem; color: var(--ridge); flex-shrink: 0; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p { padding: 0 0 1rem; }

/* === SERVICE LINK CARDS === */
.service-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.9rem; margin: 1.5rem 0; }
.service-link-card {
  display: block; background: var(--card-bg); border: 1px solid var(--delta-line); border-radius: 6px;
  padding: 1rem 1.1rem; text-decoration: none; color: var(--text);
}
.service-link-card:hover { border-color: var(--ridge); }
.service-link-card strong { display: block; font-family: var(--font-display); color: var(--ridge); margin-bottom: 0.25rem; font-size: 1rem; }
.service-link-card span { font-size: 0.85rem; color: var(--text); opacity: 0.8; }

/* === DECK COST ESTIMATOR ===
   Spotlight treatment (added per Christian's visual-pass request): the
   estimator is the site's signature differentiator against the farm
   competitors and was rendering as just another plain card, indistinguishable
   in weight from a service-link-card. The gradient frame + floating eyebrow
   badge + heavier shadow + larger readout are all new; the module's own
   markup (deck_estimator.py) is untouched, this is wrapper CSS only. */
/* Black-and-white treatment (per Christian's follow-up: less aesthetic,
   more attention-grabbing). Deliberately fixed colors, not theme variables,
   so the widget always reads as a stark, deliberate interruption of the
   site's palette in both light AND dark mode rather than blending in. */
.estimator-spotlight {
  position: relative; margin: 2.25rem 0; padding: 4px; border-radius: 13px;
  background: #0d0d0d;
  box-shadow: 0 14px 36px rgba(0,0,0,.45);
}
.estimator-eyebrow {
  position: absolute; top: -0.95rem; left: 1.5rem; z-index: 2;
  display: inline-block; background: #0d0d0d; color: #ffffff;
  border: 2px solid #ffffff;
  font-family: var(--font-display); font-weight: 800; font-size: 0.76rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.35rem 1rem; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.estimator-wrapper { background: #ffffff; border-radius: 10px; padding: 2.25rem 1.75rem 1.75rem; }
.estimator-controls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; margin-bottom: 1.25rem; }
.estimator-field label { display: block; font-size: 0.85rem; font-weight: 700; color: #0d0d0d; margin-bottom: 0.35rem; }
.estimator-field select { width: 100%; padding: 0.55rem; border: 1px solid #999; border-radius: var(--radius); font-family: var(--font-body); background: white; color: #0d0d0d; }
.estimator-checkbox { display: flex; align-items: center; gap: 0.5rem; grid-column: 1 / -1; }
.estimator-checkbox label { font-size: 0.9rem; font-weight: 600; color: #0d0d0d; }
.estimator-result { text-align: center; padding: 1.5rem 0.5rem; margin-bottom: 1rem; background: #0d0d0d; border-radius: var(--radius); }
.estimator-range { font-family: var(--font-mono); font-size: 2.6rem; font-weight: 700; color: #ffffff; }
.estimator-range-label { font-size: 0.85rem; color: #ffffff; opacity: 0.75; margin-top: 0.2rem; }
.estimator-note {
  border-left: 4px solid var(--ridge); padding: 0.75rem 1rem;
  background: var(--loess); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.92rem;
}
.estimator-cta { text-align: center; margin-top: 1.25rem; }

/* === QUOTE FORM === */
.quote-form { background: var(--card-bg); border: 1px solid var(--delta-line); border-radius: 6px; padding: 2rem; margin-top: 1.5rem; }
.quote-form .form-title { font-family: var(--font-display); font-size: 1.3rem; color: var(--ridge); margin-bottom: 1.25rem; }
.form-row { margin-bottom: 1rem; }
.form-row label { display: block; font-weight: 700; font-size: 0.875rem; margin-bottom: 0.3rem; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 0.6rem 0.75rem;
  border: 1px solid var(--delta-line); border-radius: var(--radius);
  font-family: var(--font-body); font-size: 1rem; background: white;
}
.form-row textarea { min-height: 90px; resize: vertical; }
.form-submit {
  width: 100%; padding: 0.8rem; border: none; border-radius: var(--radius); cursor: pointer;
  background: var(--ridge); color: white;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
}
.form-submit:hover { background: var(--ridge-dark); }
.form-submit:disabled { opacity: .65; cursor: not-allowed; }
.form-msg { margin-top: 0.85rem; padding: 0.75rem; border-radius: var(--radius); display: none; font-size: 0.95rem; }
.form-msg.success { background: #d9ead9; color: #1e4620; display: block; }
.form-msg.error   { background: #f5d9d3; color: #7a2a17; display: block; }

/* === FOOTER === */
.site-footer { background: var(--ridge); color: rgba(255,255,255,.8); padding: 0 1.25rem 1rem; margin-top: 3rem; }
.footer-cta { text-align: center; padding: 2rem 1.25rem 2.25rem; border-bottom: 1px solid rgba(255,255,255,.15); margin-bottom: 2rem; }
.footer-cta-text { color: white; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; margin-bottom: 1rem; }
.footer-cta-row { display: flex; gap: 0.85rem; flex-wrap: wrap; justify-content: center; }
.footer-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 2rem; max-width: var(--max-w); margin: 0 auto 2rem;
}
.footer-col strong { color: white; display: block; margin-bottom: 0.6rem; font-family: var(--font-display); font-size: 1rem; }
.footer-col ul { list-style: none; padding: 0; }
.footer-col li { margin-bottom: 0.3rem; }
.footer-col a { color: rgba(255,255,255,.7); text-decoration: none; font-size: 0.875rem; }
.footer-col a:hover { color: white; }
.footer-col p { font-size: 0.875rem; margin-bottom: 0.4rem; }
.footer-phone { color: #cfe8de !important; font-weight: 700 !important; font-size: 1rem !important; font-family: var(--font-mono); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.15); padding-top: 1.1rem;
  text-align: center; font-size: 0.8rem; color: rgba(255,255,255,.45);
  max-width: var(--max-w); margin: 0 auto;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; }
  .site-nav.open { display: block; }
  .nav-list { flex-direction: column; padding: 0.5rem 0; }
  .nav-list > li > a { padding: 0.7rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav-cta > a { margin: 0.5rem 1.5rem; display: block; text-align: center; }
  .estimator-controls { grid-template-columns: 1fr; }
}

/* === DARK MODE === */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131a17; --text: #e5e2d6; --card-bg: #1c2622;
    --delta-line: #33403a; --loess: #223129; --loess-line: #3a4a41;
  }
  .section-divider {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='28' viewBox='0 0 140 28'%3E%3Cpolyline points='0,28 0,16 12,5 24,18 38,3 52,14 66,2 80,17 94,6 108,19 122,4 140,15 140,28' fill='%234a9c82' opacity='0.7'/%3E%3C/svg%3E");
  }
  .quote-form, .service-link-card { background: var(--card-bg); border-color: var(--delta-line); }
  /* Estimator stays fixed white/black in dark mode too - see the .estimator-*
     rules above, none of them use theme variables, deliberately, so it
     always reads as a stark interruption of the page rather than blending
     into whichever mode the visitor is in. */
  .form-row input, .form-row select, .form-row textarea { background: #131a17; border-color: var(--delta-line); color: var(--text); }
  td { border-color: var(--delta-line); }
  tr:nth-child(even) td { background: #1c2622; }
  .faq-item { border-color: var(--delta-line); }
  .estimator-note { background: #1c2622; }
  h2, h3, .service-link-card strong { color: #8fcdb6; }
  .page-header h1, .hero h1, .footer-col strong { color: white; }
  .quote-form .form-title { color: white; }
  .faq-item summary { color: #8fcdb6; }
  a { color: #6ec8a9; }
  a:hover { color: #8fcdb6; }
  /* No CTA override needed here anymore: .btn-cta, .nav-cta, and .header-phone
     all use the fixed --action/--action-text tokens defined once in :root,
     not redefined per mode, so button contrast can't collapse the way the
     old --loess/--ridge-dark combination did (see the Phase 3 report). */
  .hero { background: linear-gradient(135deg, #101815 0%, #1f5c4e 55%, #33403a 140%); }
}