/* ============================================================
   AMERICAN EDGE LAWN CARE — Shared Site Styles
   Brand: Emerald Green #228B22 · Yellow #FFD700 · Orange #FF6600
   Used by every page. Tailwind handles utilities; this covers
   components, fluid type, and bulletproof responsiveness.
   ============================================================ */

html { scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; color: #1F2937; -webkit-font-smoothing: antialiased; }

img, svg, iframe, video { max-width: 100%; height: auto; }
p, a, h1, h2, h3, h4, span, li { overflow-wrap: break-word; word-wrap: break-word; }

/* ── Display fonts ── */
.font-display { font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: 0.02em; line-height: 1.02; }
.font-bold-alt { font-family: 'Montserrat', Inter, sans-serif; }

/* ── Fluid headings ── */
.hero-h1   { font-size: clamp(2.5rem, 9vw, 5.5rem); }
.display-xl { font-size: clamp(2.1rem, 7vw, 4rem); }
.display-lg { font-size: clamp(1.9rem, 6vw, 3.5rem); }
#est-price  { font-size: clamp(3rem, 14vw, 4.5rem); }

/* ── Hero / banner backgrounds ── */
.hero-bg { position: relative; background: linear-gradient(135deg,#1A6B1A 0%, #228B22 60%, #2EAD2E 100%); }
.hero-bg .bg-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: center 30%; z-index:0; opacity:0.55; }
.hero-bg .bg-overlay { position:absolute; inset:0; background: linear-gradient(135deg, rgba(26,107,26,0.74) 0%, rgba(34,139,34,0.48) 60%, rgba(0,0,0,0.28) 100%); z-index:1; }
.hero-bg > .container-inner { position:relative; z-index:2; }

.cta-banner-bg { position: relative; background: linear-gradient(135deg,#1A6B1A 0%, #228B22 60%, #1A6B1A 100%); }
.cta-banner-bg .bg-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:0.30; }
.cta-banner-bg .bg-overlay { position:absolute; inset:0; background: linear-gradient(135deg, rgba(26,107,26,0.82) 0%, rgba(34,139,34,0.78) 100%); z-index:1; }
.cta-banner-bg > .container-inner { position:relative; z-index:2; }

/* ── Buttons ── */
.btn-yellow { background: linear-gradient(135deg,#FFD700,#E6C200); color:#1A1A1A; transition: all .2s ease; font-weight:800; }
.btn-yellow:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(255,215,0,0.55); }
.btn-orange { background: linear-gradient(135deg,#FF6600,#E05A00); color:#FFFFFF; transition: all .2s ease; font-weight:800; }
.btn-orange:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(255,102,0,0.50); }
.btn-green { background: linear-gradient(135deg,#228B22,#1A6B1A); color:#FFFFFF; transition: all .2s ease; font-weight:800; }
.btn-green:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(34,139,34,0.45); }
.btn-white-outline { border:2px solid #FFFFFF; color:#FFFFFF; background:transparent; transition: all .2s ease; font-weight:700; }
.btn-white-outline:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }

/* ── Animations ── */
@keyframes fadeUp { from { opacity:0; transform: translateY(22px);} to { opacity:1; transform:none; } }
.fade-up { animation: fadeUp .8s ease forwards; }
.reveal { opacity:0; transform: translateY(24px); transition: all .7s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ── Range slider (calculator) ── */
input[type=range] { -webkit-appearance:none; height:6px; border-radius:6px; background:#E8F5E8; outline:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; height:26px; width:26px; border-radius:50%; background:#FFD700; cursor:pointer; border:3px solid white; box-shadow:0 2px 8px rgba(0,0,0,0.2); }
input[type=range]::-moz-range-thumb { height:26px; width:26px; border-radius:50%; background:#FFD700; cursor:pointer; border:3px solid white; }

/* ── Owner image frame ── */
.owner-img-frame { background: linear-gradient(135deg,#228B22,#FFD700); padding:5px; border-radius:16px; box-shadow:0 12px 32px rgba(0,0,0,0.18); }
.owner-img-frame img { border-radius:12px; display:block; }

/* ── Section labels ── */
.section-label { display:inline-block; background:#E8F5E8; color:#1A6B1A; font-size:.65rem; font-weight:800; letter-spacing:.15em; padding:.35rem .8rem; border-radius:999px; text-transform:uppercase; }
.section-label-yellow { background:#FFFBCC; color:#9A7A00; }
.section-label-orange { background:#FFF0E0; color:#C04A00; }

/* ── $19 pulse ── */
@keyframes pulse-ring { 0%{box-shadow:0 0 0 0 rgba(255,102,0,0.5);} 70%{box-shadow:0 0 0 12px rgba(255,102,0,0);} 100%{box-shadow:0 0 0 0 rgba(255,102,0,0);} }
.pulse-orange { animation: pulse-ring 2s ease-out infinite; }

.truck-strip { background: linear-gradient(135deg,#1A1A1A 0%, #2d2d2d 100%); }

/* ── FAQ ── */
details summary::-webkit-details-marker { display:none; }
details[open] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .25s ease; }

/* ── Calc toggles ── */
.freq-btn.active, .svc-btn.active { background:#228B22 !important; color:#FFFFFF !important; border-color:#228B22 !important; }

/* ── Marquee ── */
.marquee { display:flex; gap:3rem; animation: marquee-scroll 30s linear infinite; white-space:nowrap; }
@keyframes marquee-scroll { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ── Nav scroll-spy / hover underline ── */
.nav-link { position: relative; }
.nav-link::after { content:''; position:absolute; left:0; right:0; bottom:-6px; height:3px; border-radius:3px; background:#228B22; transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.nav-link:hover::after, .nav-link.active::after { transform:scaleX(1); }
.nav-link.active { color:#228B22; }
#mobile-menu a.active { color:#228B22; background:#E8F5E8; border-radius:8px; padding-left:10px; }

/* ── Mobile sticky bar + floating CTA ── */
.mobile-call-bar { display:none; }
@media (max-width: 768px) {
  .mobile-call-bar { display:flex; padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)); }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}
#floating-cta { position:fixed; right:1.5rem; bottom:1.5rem; z-index:45; opacity:0; transform:translateY(20px) scale(0.95); pointer-events:none; transition:opacity .3s ease, transform .3s ease; }
#floating-cta.show { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
@media (max-width: 768px) { #floating-cta { display:none !important; } }

@media (max-width: 380px) { #top-bar { font-size: 11px; } }
@media (max-width: 1023px) { nav a, .mobile-call-bar a, #top-bar a { min-height:40px; } .marquee { gap:1.5rem; } }