:root{--brand:#16a34a;--brand-700:#15803d;--ring:rgba(22,163,74,.18);}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol',sans-serif;color:#0f172a;background:#fff}
.nav-link{color:#0f172a}.nav-link:hover{color:var(--brand-700)}.nav-link.text-emerald-700{color:#047857!important}
.section-title{font-size:1.875rem;line-height:2.25rem;font-weight:800;color:#0f172a;margin-bottom:1rem}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;padding:1rem;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.card-title{font-weight:700;color:#0f172a;margin-bottom:.25rem}
.card-text{color:#334155}
.btn-primary{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(90deg,var(--brand),#22c55e);color:#fff;padding:.65rem 1.05rem;border-radius:.8rem;border:1px solid rgba(34,197,94,.4)}
.btn-secondary{display:inline-flex;align-items:center;gap:.5rem;background:#ecfdf5;color:#065f46;padding:.6rem 1rem;border-radius:.8rem;border:1px solid rgba(22,163,74,.25)}
.btn-ghost{display:inline-flex;align-items:center;gap:.5rem;border:1px solid #e2e8f0;background:#fff;color:#0f172a;padding:.6rem 1rem;border-radius:.8rem}
.link{color:var(--brand-700)}.link:hover{text-decoration:underline}
.label{display:block;margin-bottom:.25rem;font-weight:600;color:#0f172a}
.input{width:100%;border:1px solid #e2e8f0;border-radius:.8rem;padding:.6rem .8rem;background:#fff}
.input:focus{outline:2px solid #bbf7d0;outline-offset:2px;box-shadow:0 0 0 4px var(--ring)}
.faq{background:#fff;border:1px solid #e2e8f0;border-radius:.75rem;padding:.75rem 1rem;margin:.5rem 0}
.phone-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .8rem;border-radius:.75rem;border:1px solid rgba(22,163,74,.25);background:rgba(22,163,74,.1);color:#065f46}
.picture-frame{border-radius:1rem;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.07);border:1px solid #e2e8f0}
.dropzone{display:flex;align-items:center;justify-content:center;text-align:center;border:2px dashed #94a3b8;border-radius:0.75rem;background:#f8fafc;padding:1.25rem;min-height:110px;cursor:pointer}
.dropzone.dragover{background:#f1f5f9;border-color:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.12) inset}
.preview-item{position:relative;border:1px solid #e2e8f0;border-radius:.5rem;overflow:hidden;background:#fff}
.preview-item img{display:block;width:100%;height:100%;object-fit:cover}
.preview-meta{position:absolute;left:.25rem;bottom:.25rem;background:rgba(0,0,0,.55);color:#fff;font-size:.7rem;padding:.1rem .3rem;border-radius:.25rem}
.preview-remove{position:absolute;top:.25rem;right:.25rem;background:#fff;border:1px solid #e2e8f0;border-radius:.375rem;padding:.05rem .35rem;font-size:.75rem;line-height:1;cursor:pointer}
.error-text{color:#b91c1c}

/* Shared Auto-Scrolling Gallery */
.itad-scroller{overflow:hidden;border-radius:1rem;border:1px solid #e2e8f0;background:#fff;padding:.5rem}
.itad-track{display:flex;align-items:center;gap:.75rem;animation:itad-scroll 20s linear infinite;will-change:transform}
.itad-scroller:hover .itad-track,.itad-scroller.pause .itad-track{animation-play-state:paused}
@keyframes itad-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Uniform sizing for 'How to Drop Off' images */
.dropoff-img{width:100%;height:220px;object-fit:cover;border-radius:0.5rem}
@media (max-width: 768px){.dropoff-img{height:200px}}

/* Drag-to-scroll affordance */
.itad-scroller{touch-action: pan-y; cursor: grab}
.itad-scroller.dragging{cursor: grabbing}

/* Disable native image dragging/select within scrollers */
.itad-scroller img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}




/* Business/ITAD image: responsive width, auto height */
.business-itad-img{width:100%;height:auto;max-height:none;display:block;object-fit:cover;}


/* --- Services polish (non-breaking) --- */
.services-modern .service-item{
  border-top: 4px solid var(--brand);
  padding-top: 1.5rem;
}
.services-modern .service-bullets li{
  margin: .4rem 0;
  font-size: .95rem;
}
.services-modern .service-cta{ margin-top: 1rem; }
.services-modern .service-cta a{
  display: inline-block;
  padding: .6rem 1.1rem;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  border-radius: .6rem;
  border: 1px solid rgba(22,163,74,.25);
  transition: background .2s ease, transform .05s ease;
}
.services-modern .service-cta a:hover{ background: var(--brand-700); }
.services-modern .service-cta a:active{ transform: translateY(1px); }


/* --- Services UI/UX polish (scoped, non-breaking) --- */
.services-modern { scroll-margin-top: 80px; }
.services-modern .service-item{
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 26px;
  box-shadow: 0 4px 16px rgba(2,8,20,.04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.services-modern .service-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(2,8,20,.08);
  border-color: rgba(22,163,74,.35);
}
.services-modern .service-title{
  font-size: 1.35rem;
  line-height: 1.3;
}
.services-modern p{
  font-size: 1rem;
  line-height: 1.7;
  color: #334155;
}
/* Tag chips */
.services-modern .service-tags{ 
  display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 .5rem;
}
.services-modern .service-tag{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .55rem; border-radius:999px;
  background:#ecfdf5; color:#065f46; 
  font-size:.78rem; font-weight:700; letter-spacing:.02em;
  border:1px solid rgba(22,163,74,.2);
  white-space:nowrap;
}
/* Bullets with checkmarks (preserve existing content) */
.services-modern .service-bullets{
  margin-top:.85rem; padding-left:0;
}
.services-modern .service-bullets li{
  list-style:none; position:relative; padding-left:1.6rem;
  margin:.45rem 0; line-height:1.55;
}
.services-modern .service-bullets li::before{
  content:"\2713"; /* checkmark */
  position:absolute; left:0; top:.05rem;
  width:1.05rem; height:1.05rem; 
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; font-size:.8rem; 
  background:#dcfce7; color:#065f46; 
  border:1px solid rgba(22,163,74,.35);
}
/* CTA buttons */
.services-modern .service-cta{ margin-top: 1rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.services-modern .service-cta a{
  display:inline-block; padding:.65rem 1.1rem;
  background: var(--brand); color:#fff; font-weight:700;
  border-radius:.7rem; border:1px solid rgba(22,163,74,.25);
  transition: background .2s ease, transform .05s ease, box-shadow .2s ease;
  box-shadow: 0 2px 0 rgba(2,8,20,.06);
}
.services-modern .service-cta a:hover{ background: var(--brand-700); box-shadow: 0 6px 16px rgba(2,8,20,.08); }
.services-modern .service-cta a:active{ transform: translateY(1px); }
/* Ghost secondary link style if present */
.services-modern .service-cta .btn-ghost{
  background:#fff; color:#0f172a; border:1px solid #e2e8f0; box-shadow:none;
}
.services-modern .service-cta .btn-ghost:hover{ border-color:#cbd5e1; }
/* Focus states for accessibility */
.services-modern a:focus-visible, .services-modern button:focus-visible, .services-modern .service-item:focus-within{
  outline:2px solid #bbf7d0; outline-offset:3px;
  box-shadow: 0 0 0 4px rgba(22,163,74,.18);
  border-color: rgba(22,163,74,.35);
}
/* Responsive spacing */
@media (min-width: 1024px){
  .services-modern .service-item{ padding: 30px; }
}


/* --- Gradient header + icon polish (scoped) --- */
.services-modern .service-item{
  position: relative;
  overflow: hidden; /* ensure gradient strip stays clipped */
}
.services-modern .service-item::before{
  content:"";
  position:absolute; left:0; top:0; right:0; height:6px;
  background: linear-gradient(90deg, var(--brand), #22c55e, var(--brand-700));
  opacity: .9;
  pointer-events:none;
}
/* Icon badge: subtle ring + gradient tint */
.services-modern .service-icon{
  background: radial-gradient(circle at 50% 40%, #ecfdf5 0 60%, #e8f8ef 61% 100%);
  color:#0f5132;
  box-shadow: inset 0 0 0 1px rgba(4,120,87,.28), 0 1px 0 rgba(2,8,20,.04);
}
/* Slightly thinner strokes for outlined look on high-DPI */
.services-modern .service-icon svg [stroke]{
  stroke-width: 1.6 !important;
}
/* Elevation on hover pairs nicely with the gradient strip */
.services-modern .service-item:hover::before{
  opacity: 1;
}


/* --- Services section soft gradient background (scoped) --- */
.services-modern{
  position: relative;
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(16,185,129,.06), transparent 60%),
    radial-gradient(1000px 500px at 90% 10%, rgba(34,197,94,.05), transparent 55%),
    linear-gradient(#fafdfb, #ffffff);
}


/* --- Mobile Sticky CTA (non-breaking) --- */
.mobile-sticky-cta{
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: none;
  background: #fffffffa;
  box-shadow: 0 -4px 18px rgba(2,8,20,.12);
  border-top: 1px solid #e2e8f0;
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-sticky-cta .mobile-sticky-inner{
  max-width: 1000px; margin: 0 auto; padding: .55rem .9rem;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-size: .95rem;
}
.mobile-sticky-cta .sticky-note{ color:#065f46; font-weight: 800; }
.mobile-sticky-cta a{ text-decoration: none; }
.mobile-sticky-cta .sticky-call, .mobile-sticky-cta .sticky-text{
  padding: .45rem .8rem; border-radius: .6rem;
  border:1px solid #e2e8f0; background:#fff; color:#0f172a; font-weight:700;
}
.mobile-sticky-cta .sticky-primary{
  padding: .55rem .9rem; border-radius: .7rem; font-weight:800;
  background: var(--brand); color: #fff; border: 1px solid rgba(22,163,74,.25);
  box-shadow: 0 2px 0 rgba(2,8,20,.06);
}
@media (max-width: 768px){
  .mobile-sticky-cta{ display:block; }
  body{ padding-bottom: 64px; } /* space for bar */
}

/* CTA quick links under cards */
.services-modern .cta-quick{
  margin-left: .75rem; font-size: .95rem; color:#0f172a;
}
.services-modern .cta-quick .cta-link{
  color: var(--brand-700);
}
.services-modern .cta-quick .cta-link:hover{
  text-decoration: underline;
}


/* --- Override CTA quick links font color to white --- */
.services-modern .cta-quick{
  margin-left: .75rem; font-size: .95rem; color:#ffffff;
}
.services-modern .cta-quick .cta-link{
  color: #ffffff;
}
.services-modern .cta-quick .cta-link:hover{
  text-decoration: underline;
  color:#f0fdf4; /* slightly lighter white-green tint */
}


/* --- Schedule Pickup visual alignment (scoped) --- */
[data-page="schedule-pickup"] input[type="text"],
[data-page="schedule-pickup"] input[type="email"],
[data-page="schedule-pickup"] input[type="tel"],
[data-page="schedule-pickup"] input[type="date"],
[data-page="schedule-pickup"] input[type="time"],
[data-page="schedule-pickup"] textarea{
  border:1px solid #e2e8f0; border-radius: .8rem; padding: .65rem .8rem;
}
[data-page="schedule-pickup"] input:focus,
[data-page="schedule-pickup"] textarea:focus{
  outline:2px solid #bbf7d0; outline-offset:2px; box-shadow:0 0 0 4px rgba(22,163,74,.18);
}

/* Make the upload intro match brand cards */
[data-page="schedule-pickup"] .upload-intro{
  background:linear-gradient(135deg, var(--brand-light), var(--brand));
  color:#063a1a; border:1px solid rgba(22,163,74,.35);
}

/* File choose buttons aligned to services feel */
[data-page="schedule-pickup"] .filebtn{
  background:linear-gradient(180deg, var(--brand-light), var(--brand));
  color:#063616; border:1px solid rgba(22,163,74,.35); border-radius:12px;
}
[data-page="schedule-pickup"] .filebtn:hover{ filter:brightness(1.03); }


/* --- Schedule Pickup: helper text, subheads, upload progress --- */
[data-page="schedule-pickup"] .form-subhead{
  font-size: 1.05rem; font-weight: 800; color:#0f172a; margin: 1rem 0 .25rem;
}
[data-page="schedule-pickup"] .field-hint{
  font-size: .9rem; color:#475569; margin-top: .25rem;
}
[data-page="schedule-pickup"] .upload-progress{
  position: relative; margin-top: .6rem; border:1px solid #e2e8f0; border-radius: 10px; padding: .5rem .6rem; background:#fff;
}
[data-page="schedule-pickup"] .upload-progress-bar{
  height: 6px; width: 0%; background: linear-gradient(90deg, var(--brand), #22c55e);
  border-radius: 999px; margin-bottom: .4rem;
}
[data-page="schedule-pickup"] .upload-progress-label{
  font-size: .9rem; color:#065f46; font-weight: 700;
}
/* Success reassurance baseline style (if modal is present) */
.success-reassure{ margin-top: .6rem; color:#0f172a; font-weight:600; }


/* --- Unified Button Typography (Services + Schedule Pickup) --- */
:root{
  --btn-font-weight: 800;
  --btn-letter-spacing: .02em;
  --btn-line-height: 1.1;
}

/* Services page CTAs */
.services-modern .service-cta a{
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  line-height: var(--btn-line-height);
}

/* Sticky mobile CTA links */
.mobile-sticky-cta .sticky-call,
.mobile-sticky-cta .sticky-text,
.mobile-sticky-cta .sticky-primary{
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  line-height: var(--btn-line-height);
}

/* Schedule Pickup generic .btn + file buttons */
[data-page="schedule-pickup"] .btn,
[data-page="schedule-pickup"] .filebtn{
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  line-height: var(--btn-line-height);
}


/* =============================================================
   ===== 2026 Modernization Layer (additive, mobile-first) =====
   Adds: scroll-smooth, motion-safe defaults, scroll-reveal hooks,
   smoother mobile nav, header behavior, floating recycle FAB,
   tap-target sizing, count-up shimmer, focus rings, eco-decor.
   ============================================================= */

/* Smooth scrolling + motion preference */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* Extended brand tokens */
:root{
  --brand-50:#f0fdf4;
  --brand-100:#dcfce7;
  --brand-200:#bbf7d0;
  --brand-light:#34d399;
  --brand-dark:#064e3b;
  --shadow-soft:0 10px 30px rgba(2,8,20,.08);
  --shadow-glow:0 0 28px rgba(16,185,129,.25);
}

/* Better global focus ring (keyboard accessibility) */
:focus-visible{
  outline: 3px solid var(--brand-200);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(22,163,74,.18);
  border-radius: .35rem;
}

/* Scroll-reveal hooks (opt-in via data-reveal) */
[data-reveal]{
  opacity:0; transform:translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
[data-reveal-delay="1"].is-visible{ transition-delay: .08s; }
[data-reveal-delay="2"].is-visible{ transition-delay: .16s; }
[data-reveal-delay="3"].is-visible{ transition-delay: .24s; }
[data-reveal-delay="4"].is-visible{ transition-delay: .32s; }

/* Tabular numerals for animated counters */
.counter[data-target]{ font-variant-numeric: tabular-nums; }

/* Mobile-first tap targets and spacing */
@media (max-width: 640px){
  a, button, .btn-primary, .btn-secondary, .btn-ghost, .item-pill{ min-height: 44px; }
  .nav-link{ padding: .35rem .25rem; }
  h1{ font-size: clamp(1.95rem, 8vw, 2.6rem); line-height:1.1; }
  h2{ font-size: clamp(1.6rem, 6vw, 2.1rem); line-height:1.15; }
  .section-title{ font-size: clamp(1.55rem, 6vw, 2rem); }
  /* Smoother section padding on tiny screens */
  section{ scroll-margin-top: 72px; }
}

/* Smoother mobile nav slide-down (works with existing #mobileNav .hidden toggle) */
#mobileNav{
  transition: max-height .35s ease, opacity .25s ease, padding .25s ease;
  overflow:hidden; max-height: 60vh; opacity: 1;
}
#mobileNav.hidden{
  display:block !important; /* override Tailwind hidden so we can animate */
  max-height:0; opacity:0; padding-top:0; padding-bottom:0; pointer-events:none;
}
#mobileNav nav a.nav-link{
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1rem; border-radius:12px; font-weight:700;
  border:1px solid transparent;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
#mobileNav nav a.nav-link::after{
  content:"›"; font-size:1.25rem; color:#94a3b8; line-height:1; transition: transform .2s ease, color .2s ease;
}
#mobileNav nav a.nav-link:hover,
#mobileNav nav a.nav-link:active{
  background:#ecfdf5; border-color:rgba(22,163,74,.22); color:#065f46;
}
#mobileNav nav a.nav-link:hover::after,
#mobileNav nav a.nav-link:active::after{ transform: translateX(3px); color:#16a34a; }

/* Animated hamburger button */
#menuBtn{
  position:relative; width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #e2e8f0; border-radius:12px;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
#menuBtn:hover{ background:#ecfdf5; border-color:rgba(22,163,74,.3); }
#menuBtn:active{ transform: scale(.96); }

/* Header nav: defer collapse until xl (1280px) so the desktop nav
   doesn't crowd the logo + phone pill between ~768px and 1280px.
   Also fixes a pre-existing issue where the #menuBtn ID rule's
   display:inline-flex outranked Tailwind's .md\:hidden on desktop. */
@media (min-width: 768px) and (max-width: 1279.98px){
  header nav[aria-label="Primary"]{ display: none; }
  header #menuBtn{ display: inline-flex; }
  header #mobileNav:not(.hidden){ display: block; }
}
@media (min-width: 1280px){
  header nav[aria-label="Primary"]{ display: flex; }
  header #menuBtn{ display: none; }
  header #mobileNav{ display: none; }
}

/* Header behavior: subtle elevation on scroll, hide on scroll-down (opt-in via JS class) */
header{ transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease; }
header.is-stuck{ box-shadow: 0 6px 20px rgba(2,8,20,.08); background: rgba(255,255,255,.96); }
header.is-hidden{ transform: translateY(-100%); }

/* Primary CTA polish — subtle lift + glow */
.btn-primary{
  position:relative;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, filter .2s ease;
  box-shadow: 0 6px 14px rgba(22,163,74,.22);
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(22,163,74,.32); filter:brightness(1.03); }
.btn-primary:active{ transform: translateY(0); }

/* Item pill micro-interaction */
.item-pill{ transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.item-pill:hover{ box-shadow: 0 6px 16px rgba(22,163,74,.16); }
.item-pill:active{ transform: scale(.97); }

/* Trust stat shimmer for the big number */
.trust-stat .stat-value{
  background: linear-gradient(90deg,#ffffff 0%,#a7f3d0 45%,#ffffff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: stat-shine 5s ease-in-out infinite;
}
@keyframes stat-shine{
  0%,100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}

/* Floating FAB (back-to-top, mobile-primary, hidden until scrolled) */
.fab-recycle{
  position: fixed; right: 14px; bottom: 76px; z-index: 49;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), #22c55e);
  color: #fff; display: none; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px rgba(22,163,74,.45);
  text-decoration: none; cursor: pointer; padding: 0;
  border: none; outline: none;
  transition: transform .2s ease, box-shadow .2s ease, opacity .25s ease;
  animation: fab-pulse 2.6s ease-in-out infinite;
}
.fab-recycle:hover{ transform: translateY(-3px); }
.fab-recycle:active{ transform: scale(.94); }
.fab-recycle svg{ width: 26px; height: 26px; }
@keyframes fab-pulse{
  0%,100%{ box-shadow: 0 12px 28px rgba(22,163,74,.45), 0 0 0 0 rgba(34,197,94,.55); }
  50%   { box-shadow: 0 12px 28px rgba(22,163,74,.45), 0 0 0 14px rgba(34,197,94,0); }
}
/* Show on mobile only (sticky CTA bar handles primary actions on mobile) */
@media (max-width: 768px){ .fab-recycle{ display: inline-flex; } }
/* Back-to-top variant: hidden until user scrolls past the threshold */
.fab-top{ opacity: 0; pointer-events: none; transform: translateY(8px); }
.fab-top.is-visible{ opacity: 1; pointer-events: auto; transform: translateY(0); }

/* Decorative floating eco-leaves in hero */
.hero-gradient .eco-leaf{
  position: absolute; pointer-events: none;
  opacity: .35; color: #16a34a; filter: drop-shadow(0 4px 8px rgba(22,163,74,.18));
  animation: leaf-float 14s ease-in-out infinite;
}
.hero-gradient .eco-leaf.l1{ top: 8%;  left: 6%;  width: 38px; animation-delay: 0s; }
.hero-gradient .eco-leaf.l2{ top: 65%; left: 3%;  width: 28px; animation-delay: -4s; opacity:.28; }
.hero-gradient .eco-leaf.l3{ top: 18%; right: 9%; width: 44px; animation-delay: -8s; opacity:.22; }
.hero-gradient .eco-leaf.l4{ bottom: 12%; right: 18%; width: 30px; animation-delay: -2s; opacity:.3; }
@keyframes leaf-float{
  0%,100%{ transform: translate(0,0) rotate(0deg); }
  25%{ transform: translate(8px,-12px) rotate(6deg); }
  50%{ transform: translate(-6px,-22px) rotate(-4deg); }
  75%{ transform: translate(10px,-10px) rotate(3deg); }
}
@media (max-width: 640px){
  .hero-gradient .eco-leaf.l3, .hero-gradient .eco-leaf.l4{ display:none; }
  .hero-gradient .eco-leaf{ opacity: .22; }
}

/* Step-card numeric badge — subtle continuous bob on hover */
.step-card{ transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; }
.step-card:hover .step-number{ animation: bob .9s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-3px); } }

/* Section divider — soft eco gradient line */
.eco-divider{
  height: 4px; width: 80px; margin: 0 auto 1.25rem;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  border-radius: 999px;
}

/* ====== Premium Mobile Sticky CTA (frosted-glass design) ====== */
.mobile-sticky-cta{
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(240,253,244,.95)) !important;
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border-top: 1px solid rgba(22,163,74,.16) !important;
  box-shadow: 0 -10px 32px rgba(2,8,20,.10), 0 -1px 0 rgba(255,255,255,.6) inset !important;
  position: fixed; left: 0; right: 0; bottom: 0;
}
/* Top glowing line that gently flows */
.mobile-sticky-cta::before{
  content:""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(22,163,74,.0) 10%, #16a34a 30%, #22c55e 50%, #16a34a 70%, rgba(22,163,74,.0) 90%, transparent 100%);
  background-size: 220% 100%;
  animation: sticky-glow-flow 6s linear infinite;
}
@keyframes sticky-glow-flow{
  0%   { background-position: -60% 0; }
  100% { background-position: 160% 0; }
}
.mobile-sticky-cta .mobile-sticky-inner{
  padding: .6rem .8rem !important;
  gap: .45rem !important;
  font-size: .9rem;
  justify-content: flex-start !important;
  align-items: center;
}
/* Group Call+Text close together; push Schedule Pickup to the right edge */
.mobile-sticky-cta a.sticky-primary{ margin-left: auto !important; }

/* "Free Drop-Off" → frosted pill with pulsing live dot */
.mobile-sticky-cta .sticky-note{
  display: inline-flex !important;
  align-items: center; gap: .45rem;
  padding: .4rem .75rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(22,163,74,.14), rgba(34,197,94,.08));
  color: #065f46 !important;
  font-weight: 800 !important; font-size: .8rem; letter-spacing: .01em;
  border: 1px solid rgba(22,163,74,.28);
  white-space: nowrap;
  position: relative;
}
.mobile-sticky-cta .sticky-note::before{
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #16a34a; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(34,197,94,.7);
  animation: sticky-dot-pulse 1.7s ease-out infinite;
}
@keyframes sticky-dot-pulse{
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.75); }
  70%  { box-shadow: 0 0 0 9px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* SVG icons inside sticky buttons */
.mobile-sticky-cta .sticky-icon{
  width: 16px; height: 16px; flex-shrink: 0; display: inline-block;
}

/* Call + Text: glass pill buttons */
.mobile-sticky-cta a.sticky-call,
.mobile-sticky-cta a.sticky-text{
  display: inline-flex !important;
  align-items: center; gap: .35rem;
  padding: .55rem .8rem !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(22,163,74,.18) !important;
  color: #065f46 !important;
  font-weight: 800 !important;
  font-size: .9rem;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  box-shadow: 0 2px 6px rgba(2,8,20,.06), 0 0 0 0 rgba(22,163,74,0);
}
.mobile-sticky-cta a.sticky-call > span,
.mobile-sticky-cta a.sticky-text > span,
.mobile-sticky-cta a.sticky-primary > span{
  white-space: nowrap;
}
.mobile-sticky-cta a.sticky-call:hover,
.mobile-sticky-cta a.sticky-text:hover{
  background: #ecfdf5 !important;
  border-color: rgba(22,163,74,.45) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(22,163,74,.20), 0 0 0 4px rgba(34,197,94,.08);
}
.mobile-sticky-cta a.sticky-call:active,
.mobile-sticky-cta a.sticky-text:active{ transform: scale(.96); }
.mobile-sticky-cta a.sticky-call .sticky-icon,
.mobile-sticky-cta a.sticky-text .sticky-icon{ color: #16a34a; }

/* Schedule Pickup: bold gradient, animated, with shine sweep */
.mobile-sticky-cta a.sticky-primary{
  display: inline-flex !important;
  align-items: center; gap: .4rem;
  padding: .65rem 1.05rem !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 50%, #16a34a 100%) !important;
  background-size: 220% 100% !important;
  color: #fff !important;
  font-weight: 900 !important;
  font-size: .92rem;
  letter-spacing: .01em;
  border: 1px solid rgba(22,163,74,.45) !important;
  box-shadow: 0 8px 18px rgba(22,163,74,.42) !important;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative; overflow: hidden;
  text-decoration: none;
  animation: sticky-primary-shift 7s ease-in-out infinite;
  transition: transform .15s ease, box-shadow .2s ease;
}
.mobile-sticky-cta a.sticky-primary .sticky-icon{ color:#fff; width: 16px; height: 16px; }
@keyframes sticky-primary-shift{
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
/* Diagonal shine sweeping across primary button */
.mobile-sticky-cta a.sticky-primary::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: sticky-primary-sweep 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sticky-primary-sweep{
  0%, 30%  { transform: translateX(-120%); }
  70%,100% { transform: translateX(120%); }
}
.mobile-sticky-cta a.sticky-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(22,163,74,.55), 0 0 0 6px rgba(34,197,94,.12) !important;
}
.mobile-sticky-cta a.sticky-primary:active{ transform: scale(.96); }

/* Compact layout for narrow phones — keep all buttons fully readable */
@media (max-width: 480px){
  .mobile-sticky-cta a.sticky-call,
  .mobile-sticky-cta a.sticky-text{ padding: .55rem .75rem !important; font-size: .9rem; }
  .mobile-sticky-cta a.sticky-primary{ padding: .6rem .9rem !important; font-size: .88rem; }
  .mobile-sticky-cta .mobile-sticky-inner{ gap: .4rem !important; padding: .55rem .65rem !important; }
}
/* Hide the "Free Drop-Off" pill on phones — keeps Call/Text/Schedule fully readable */
@media (max-width: 520px){
  .mobile-sticky-cta .sticky-note{ display: none !important; }
}
@media (max-width: 360px){
  .mobile-sticky-cta a.sticky-call,
  .mobile-sticky-cta a.sticky-text{ padding: .5rem .6rem !important; font-size: .85rem; }
  .mobile-sticky-cta a.sticky-primary{ padding: .55rem .75rem !important; font-size: .85rem; }
  .mobile-sticky-cta .mobile-sticky-inner{ gap: .3rem !important; padding: .5rem .55rem !important; }
}

/* Reduce-motion safety on the sticky bar animations */
@media (prefers-reduced-motion: reduce){
  .mobile-sticky-cta::before,
  .mobile-sticky-cta .sticky-note::before,
  .mobile-sticky-cta a.sticky-primary,
  .mobile-sticky-cta a.sticky-primary::after{ animation: none !important; }
}

/* Smooth lazy image placeholder (no layout jank) */
img{ background-color: #f8fafc; }
img[loading="lazy"]{ transition: opacity .3s ease; }

/* Improve link underline aesthetics */
.link, a.link{ text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Map iframe rounded look */
iframe[src*="google.com/maps"]{ border-radius: 16px; box-shadow: 0 6px 18px rgba(2,8,20,.08); }

/* Desktop side-rail Schedule Pickup CTA */
.side-rail-cta{
  position: fixed; right: 0; top: 50%; transform: translate(110%, -50%);
  z-index: 48; display: none; align-items: center; gap: .55rem;
  background: linear-gradient(135deg, var(--brand), #22c55e);
  color: #fff; font-weight: 800; letter-spacing: .02em;
  padding: .8rem .95rem .8rem .8rem;
  border-radius: 14px 0 0 14px;
  box-shadow: 0 12px 28px rgba(22,163,74,.35);
  text-decoration: none; opacity: 0;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease, filter .2s ease, padding-right .25s ease;
}
.side-rail-cta.is-visible{ transform: translate(0, -50%); opacity: 1; }
.side-rail-cta:hover{ filter: brightness(1.05); padding-right: 1.2rem; }
.side-rail-cta svg{ width: 22px; height: 22px; flex-shrink: 0; }
.side-rail-cta .side-rail-text{ font-size: .92rem; }
@media (min-width: 1024px){ .side-rail-cta{ display: inline-flex; } }

/* Hero recycle icon backdrop (static, no rotation — gradient shift handles motion) */
.hero-gradient::after{
  content: "";
  position: absolute; right: -120px; bottom: -160px;
  width: 480px; height: 480px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M7 19l-3-3 3-3'/><path d='M4 16h12c2 0 3-1 3-3'/><path d='M17 5l3 3-3 3'/><path d='M20 8H8c-2 0-3 1-3 3'/><path d='M11 21l3-3-3-3'/><path d='M14 18h6'/></svg>");
  background-repeat: no-repeat; background-size: contain; background-position: center;
  opacity: .07; pointer-events: none;
  z-index: 0;
}
.hero-gradient > div, .hero-gradient .eco-leaf{ position: relative; z-index: 1; }
@media (max-width: 768px){
  .hero-gradient::after{ width: 340px; height: 340px; right: -100px; bottom: -120px; opacity: .05; }
}

/* Mobile hero stars row — prevent right-edge overflow */
.hero-gradient .stars-row{
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
}
@media (max-width: 480px){
  .hero-gradient .stars-row{ font-size: .9rem; }
  .hero-gradient .stars-row .stars-text{ flex: 1 1 100%; }
}

/* Make sure the FAB never overlaps long lines on small screens */
@media (max-width: 480px){
  .fab-recycle{ width: 52px; height: 52px; bottom: 72px; right: 12px; }
  .fab-recycle svg{ width: 24px; height: 24px; }
}

/* Better looking H2 + section heading rhythm */
section h2.section-title,
section > div > h2,
section > .max-w-7xl > div > h2{ scroll-margin-top: 80px; }

/* Subpage-injected reveals — provide a softer fade-up so first-load looks intentional */
body:not(.no-auto-reveal) main section[data-reveal]{
  /* slightly faster so subpages don't feel slow */
  transition-duration: .6s;
}

/* =============================================================
   ===== Round 3: Animation Polish (additive, GPU-friendly) =====
   Hero particles + shifting gradient, hover spotlights on cards,
   CTA shimmer sweep, FAB ping ring, custom eco scrollbar, logo
   hover, animated eco-divider, item-pill stagger, page fade-in,
   trust-stat reveal pulse. All transform/opacity-based.
   ============================================================= */

/* Page-load gentle fade-in (single shot, no perf cost) */
@keyframes page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body { animation: page-fade-in .55s ease-out both; }

/* Animated hero gradient — slow eco-shift across the surface */
.hero-gradient{
  background: linear-gradient(135deg,#ecfdf5 0%,#d1fae5 25%,#a7f3d0 50%,#d1fae5 75%,#ecfdf5 100%);
  background-size: 300% 300%;
  animation: hero-gradient-shift 22s ease-in-out infinite;
}
@keyframes hero-gradient-shift{
  0%,100%{ background-position: 0% 50%; }
  50%   { background-position: 100% 50%; }
}

/* Floating eco-particles (JS-injected) */
.hero-gradient .eco-particle{
  position: absolute; pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,197,94,.55) 0%, rgba(34,197,94,.15) 55%, rgba(34,197,94,0) 100%);
  animation: particle-drift linear infinite;
  z-index: 0;
}
@keyframes particle-drift{
  0%   { transform: translate3d(0, 0, 0) scale(.7); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: .8; }
  100% { transform: translate3d(40px, -120px, 0) scale(1.15); opacity: 0; }
}

/* Card hover spotlight (mouse-tracked via JS-set --mx/--my OR fixed center fallback) */
.step-card, .service-item, .services-modern .service-item{
  isolation: isolate;
  position: relative;
}
.step-card::before, .service-item::before{
  content:""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
              rgba(22,163,74,.10), transparent 45%);
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none; z-index: 0;
}
.step-card:hover::before, .service-item:hover::before{ opacity: 1; }
.step-card > *, .service-item > *{ position: relative; z-index: 1; }

/* Service-card icon micro-bounce on hover */
section a[href] > div.w-12.h-12,
section a[href] > div.rounded-xl{
  transition: transform .35s cubic-bezier(.2,.8,.2,1), background-color .25s ease;
}
section a[href]:hover > div.w-12.h-12,
section a[href]:hover > div.rounded-xl{
  transform: translateY(-3px) rotate(-6deg) scale(1.08);
  background-color: #d1fae5;
}

/* Item pill stagger pop-in when section reveals */
[data-reveal].is-visible .item-pill{
  animation: pill-pop .55s cubic-bezier(.2,.8,.2,1) backwards;
}
[data-reveal].is-visible .item-pill:nth-child(1){ animation-delay:.05s; }
[data-reveal].is-visible .item-pill:nth-child(2){ animation-delay:.10s; }
[data-reveal].is-visible .item-pill:nth-child(3){ animation-delay:.15s; }
[data-reveal].is-visible .item-pill:nth-child(4){ animation-delay:.20s; }
[data-reveal].is-visible .item-pill:nth-child(5){ animation-delay:.25s; }
[data-reveal].is-visible .item-pill:nth-child(6){ animation-delay:.30s; }
[data-reveal].is-visible .item-pill:nth-child(7){ animation-delay:.35s; }
[data-reveal].is-visible .item-pill:nth-child(8){ animation-delay:.40s; }
[data-reveal].is-visible .item-pill:nth-child(9){ animation-delay:.45s; }
[data-reveal].is-visible .item-pill:nth-child(10){ animation-delay:.50s; }
[data-reveal].is-visible .item-pill:nth-child(n+11){ animation-delay:.55s; }
@keyframes pill-pop{
  from{ opacity: 0; transform: translateY(10px) scale(.92); }
  to  { opacity: 1; transform: translateY(0) scale(1); }
}

/* Logo soft glow on hover */
header a img{ transition: filter .3s ease, transform .3s ease; }
header a:hover img{
  filter: drop-shadow(0 6px 14px rgba(22,163,74,.35));
  transform: rotate(-2deg) scale(1.04);
}

/* Custom eco-green scrollbar */
html{ scrollbar-width: thin; scrollbar-color: #16a34a #f0fdf4; }
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: #f0fdf4; }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg,#16a34a,#22c55e);
  border-radius: 5px; border: 2px solid #f0fdf4;
}
::-webkit-scrollbar-thumb:hover{ background: linear-gradient(180deg,#15803d,#16a34a); }

/* CTA glow rotating + breathing */
.cta-glow::before{ animation: cta-breathe 6s ease-in-out infinite; }
@keyframes cta-breathe{
  0%,100%{ filter: blur(20px); opacity: .5; }
  50%   { filter: blur(28px); opacity: .8; }
}

/* Primary button shimmer sweep on hover */
.btn-primary{ overflow: hidden; position: relative; }
.btn-primary::after{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-110%); transition: transform .6s ease;
  pointer-events: none;
}
.btn-primary:hover::after{ transform: translateX(110%); }

/* FAB outer ping ring */
.fab-recycle::before{
  content:""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid rgba(34,197,94,.55);
  animation: fab-ping 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes fab-ping{
  0%   { opacity: 0; transform: scale(.85); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.6); }
}

/* Animated eco-divider (grows from 0 when revealed) */
.eco-divider{
  width: 0;
  transition: width .9s cubic-bezier(.2,.8,.2,1) .15s;
}
[data-reveal].is-visible .eco-divider{ width: 80px; }
/* Fallback: when used without data-reveal, just show */
section:not([data-reveal]) .eco-divider,
div:not([data-reveal]) > .eco-divider{ width: 80px; }

/* Trust-stat reveal pulse ring */
[data-reveal].is-visible .trust-stat .stat-value{ position: relative; display: inline-block; }
[data-reveal].is-visible .trust-stat .stat-value::after{
  content:""; position: absolute; inset: -10px; border-radius: 14px;
  border: 2px solid rgba(34,197,94,.55);
  animation: stat-ring 1.4s ease-out 1 both;
  pointer-events: none;
}
@keyframes stat-ring{
  0%   { opacity: 0; transform: scale(.5); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.25); }
}

/* Step-number subtle continuous pulse (always-on, very gentle) */
.step-number{ animation: step-num-pulse 3s ease-in-out infinite; }
@keyframes step-num-pulse{
  0%,100%{ box-shadow: 0 4px 12px rgba(22,163,74,.30); }
  50%   { box-shadow: 0 4px 18px rgba(22,163,74,.55), 0 0 0 6px rgba(34,197,94,.15); }
}

/* Side-rail: gentle attention bounce when first appearing */
.side-rail-cta.is-visible{ animation: rail-bounce-in .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rail-bounce-in{
  from{ transform: translate(110%, -50%); }
  60% { transform: translate(-6%, -50%); }
  100%{ transform: translate(0, -50%); }
}

/* Smooth FAQ details open transition */
details[open] summary ~ *{
  animation: fade-down .25s ease-out both;
}
@keyframes fade-down{
  from{ opacity: 0; transform: translateY(-6px); }
  to  { opacity: 1; transform: translateY(0); }
}

/* Reviews carousel: subtle floating effect */
.reviews-track > article{
  transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
}
.reviews-track > article:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(22,163,74,.18);
  border-color: rgba(22,163,74,.35);
}

/* Honor reduced motion for the heaviest loops */
@media (prefers-reduced-motion: reduce){
  .hero-gradient,
  .hero-gradient .eco-particle,
  .cta-glow::before,
  .fab-recycle::before,
  .step-number{ animation: none !important; }
}

/* End Round 3 Animation Polish */

/* ===== Defensive overflow guards =====
   Prevent horizontal scroll caused by long link rows that lack flex-wrap.
   This affects every page (footers, pill rows, etc.) without HTML edits. */
html, body{ max-width: 100%; overflow-x: hidden; }
footer .flex{ flex-wrap: wrap !important; }
footer .flex.gap-3, footer .flex.gap-4{ flex-wrap: wrap !important; }
/* Catch any other in-content link rows that may overflow */
main section .flex.gap-3:not(.flex-wrap-none),
main section .flex.gap-4:not(.flex-wrap-none){
  flex-wrap: wrap;
}

/* ===== Premium Footer Polish =====
   Calmer typography, organized link pills, soft eco background.
   Applies site-wide via existing footer markup (no HTML edits). */
footer{
  position: relative;
  background: linear-gradient(180deg,#f8fafc 0%,#f0fdf4 100%) !important;
  border-top: 1px solid #d1fae5 !important;
  padding: 2.75rem 0 2.5rem !important;
  color: #475569;
}
/* Thin animated emerald strip at the very top of the footer */
footer::before{
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, transparent 12%, #16a34a 35%, #22c55e 50%, #16a34a 65%, transparent 88%, transparent 100%);
  background-size: 220% 100%;
  animation: footer-glow-flow 9s linear infinite;
  opacity: .55;
}
@keyframes footer-glow-flow{
  0%   { background-position: -50% 0; }
  100% { background-position: 150% 0; }
}
footer > div{ max-width: 80rem !important; margin: 0 auto !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

/* Top row — copyright + main nav, calmly separated */
footer > div > div:first-child{
  padding-bottom: 1.4rem;
  border-bottom: 1px solid rgba(22,163,74,.14);
  margin-bottom: 1.25rem;
}
footer > div > div:first-child > div:first-child{
  font-weight: 800; color: #064e3b; font-size: .92rem;
}
footer > div > div:first-child > div:last-child{
  display: flex !important; flex-wrap: wrap !important; gap: .25rem .5rem;
}
footer > div > div:first-child a{
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: .85rem !important;
  padding: .35rem .7rem !important;
  border-radius: .5rem !important;
  text-decoration: none !important;
  transition: color .15s ease, background-color .15s ease, transform .12s ease;
  min-height: 0 !important;
  line-height: 1.3 !important;
}
footer > div > div:first-child a:hover{
  color: #15803d !important;
  background: rgba(22,163,74,.08) !important;
  transform: translateY(-1px);
}

/* Tagline + responsibility lines — quieter typography */
footer p.mt-3{
  font-size: .82rem !important;
  color: #64748b !important;
  max-width: 56rem;
  margin-top: .55rem !important;
  line-height: 1.55;
}

/* ===== Popular Recycling Services section ===== */
footer .mt-6.pt-6{
  margin-top: 2rem !important;
  padding-top: 1.75rem !important;
  border-top: 1px solid rgba(22,163,74,.18) !important;
}
/* Heading — small uppercase eyebrow, brand green */
footer .mt-6.pt-6 > p:first-child{
  font-size: .7rem !important;
  font-weight: 900 !important;
  color: #16a34a !important;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin: 0 0 1rem !important;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
footer .mt-6.pt-6 > p:first-child::before{
  content: "";
  width: 18px; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg,#16a34a,#22c55e);
  display: inline-block;
}
/* Link grid — subtle calm pill tags */
footer .mt-6.pt-6 > .flex,
footer .mt-6.pt-6 > div:last-child{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .4rem !important;
}
footer .mt-6.pt-6 a,
footer .mt-6.pt-6 a.link,
footer .mt-6.pt-6 a[class]{
  display: inline-flex !important;
  align-items: center !important;
  font-size: .75rem !important;
  color: #475569 !important;
  font-weight: 600 !important;
  padding: .35rem .65rem !important;
  border: 1px solid rgba(22,163,74,.25) !important;
  border-radius: 999px !important;
  background-color: rgba(255,255,255,.85) !important;
  background-image: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  min-height: 0 !important;
  line-height: 1.3 !important;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
footer .mt-6.pt-6 a:hover,
footer .mt-6.pt-6 a.link:hover,
footer .mt-6.pt-6 a[class]:hover{
  color: #15803d !important;
  background-color: #ecfdf5 !important;
  border-color: #16a34a !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(22,163,74,.15);
  text-decoration: none !important;
}
@media (max-width: 480px){
  footer{ padding: 2.25rem 0 2rem !important; }
  footer .mt-6.pt-6 a{ font-size: .72rem !important; padding: .3rem .55rem; }
  footer > div > div:first-child a{ font-size: .82rem; padding: .3rem .6rem; }
}
@media (prefers-reduced-motion: reduce){
  footer::before{ animation: none !important; }
}

/* ===== Premium global breadcrumb pill =====
   Applies to every page automatically (no HTML edits required).
   - Frosted-glass pill background
   - Compact rounded shape with green border + soft shadow
   - Home link gets icon (auto-injected by script.js)
   - Final crumb truncates with ellipsis if too long for viewport */
nav[aria-label="Breadcrumb"]{
  display: inline-flex !important;
  align-items: center;
  gap: .5rem !important;
  flex-wrap: nowrap !important;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(22,163,74,.18);
  padding: .4rem .85rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(22,163,74,.10);
  font-size: .85rem;
  max-width: 100%;
  min-width: 0;
}
/* Crumb links: bold green, with optional inline icon */
nav[aria-label="Breadcrumb"] > a{
  display: inline-flex !important;
  align-items: center;
  gap: .3rem;
  color: #065f46;
  font-weight: 700;
  text-decoration: none;
  padding: .15rem .25rem;
  border-radius: .4rem;
  transition: color .15s ease, background-color .15s ease, transform .12s ease;
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 0 !important;        /* override global 44px tap target */
  line-height: 1.2;
}
nav[aria-label="Breadcrumb"] > a > svg{
  width: 14px; height: 14px;
  color: #16a34a;
  flex-shrink: 0;
}
nav[aria-label="Breadcrumb"] > a:hover{
  color: #15803d;
  background: rgba(22,163,74,.08);
  transform: translateX(-1px);
}
/* Separator: green chevron */
nav[aria-label="Breadcrumb"] > span[aria-hidden],
nav[aria-label="Breadcrumb"] > span[aria-hidden="true"]{
  color: #16a34a;
  font-weight: 900;
  flex-shrink: 0;
  white-space: nowrap;
}
/* Final crumb (current page) — bold dark, ellipsis on overflow */
nav[aria-label="Breadcrumb"] > span:not([aria-hidden]),
nav[aria-label="Breadcrumb"] > strong{
  color: #0f172a !important;
  font-weight: 800;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Compact at narrow phones */
@media (max-width: 480px){
  nav[aria-label="Breadcrumb"]{
    font-size: .8rem;
    padding: .35rem .7rem;
    gap: .4rem !important;
  }
  nav[aria-label="Breadcrumb"] > a > svg{ width: 13px; height: 13px; }
}
/* Soften the breadcrumb-band section for visual consistency */
section.bg-emerald-50.py-3{
  background: linear-gradient(180deg,#f0fdf4,#ecfdf5) !important;
  border-bottom: 1px solid #d1fae5;
}

/* ============================================================
   ===== Round 4: Cinematic Polish (site-wide) =================
   Tasteful additions: text balance, eco selection, hero gradient
   text, image fade-in, premium nav underline, card 3D tilt,
   button ripple, badge shimmer, section gradient seams.
   All transform/opacity-driven; honors prefers-reduced-motion.
   ============================================================ */

/* Better headline wrapping */
h1, h2, h3{ text-wrap: balance; }

/* Eco-themed text selection */
::selection{ background: #bbf7d0; color: #052e16; }
::-moz-selection{ background: #bbf7d0; color: #052e16; }

/* Premium gradient text on hero h1 (homepage + page heroes) */
.hero-gradient h1,
.sp-h1,
.page-hero h1{
  background: linear-gradient(135deg,#052e16 0%,#064e3b 25%,#047857 50%,#064e3b 75%,#052e16 100%);
  background-size: 220% 220%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent;
  animation: hero-text-shimmer 12s ease-in-out infinite;
}
@keyframes hero-text-shimmer{
  0%,100%{ background-position: 0% 50%; }
  50%   { background-position: 100% 50%; }
}
/* Inline accents (strong, em, .underline-accent) inside hero stay vivid */
.hero-gradient h1 .underline-accent,
.sp-h1 .underline-accent{
  -webkit-text-fill-color: initial;
  color: #064e3b;
}

/* Image lazy fade-in (works with native loading=lazy) */
img[loading="lazy"]{ opacity: 0; transition: opacity .6s ease; }
img[loading="lazy"].is-loaded,
img[loading="lazy"][data-loaded="1"]{ opacity: 1; }
/* Eager-loaded images already visible; no fade needed */
img:not([loading="lazy"]){ opacity: 1; }

/* Picture-frame ken-burns on hover (desktop) */
@media (hover: hover){
  .picture-frame{ overflow: hidden; }
  .picture-frame img{ transition: transform 1.4s cubic-bezier(.2,.8,.2,1); }
  .picture-frame:hover img{ transform: scale(1.05) rotate(.4deg); }
}

/* Premium nav-link underline animation */
header nav .nav-link{ position: relative; padding-bottom: 2px; }
header nav .nav-link::after{
  content:""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg,#16a34a,#22c55e);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
header nav .nav-link:hover::after,
header nav .nav-link:focus-visible::after{ transform: scaleX(1); }

/* Subtle card 3D tilt (desktop only, mouse-tracked via JS-set --rx/--ry) */
@media (hover: hover){
  .step-card, .service-item, .services-modern .service-item{
    transform-style: preserve-3d;
    transform: perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;
  }
}

/* Button click ripple (CSS-only, expanding green halo) */
.btn-primary, .btn-secondary, .btn-ghost, .sp-submit, .sp-call-cta,
.sp-notice-cta-pri, .sp-filebtn{
  position: relative; overflow: hidden;
}
.btn-primary::before, .btn-secondary::before, .btn-ghost::before,
.sp-submit::before, .sp-call-cta::before, .sp-notice-cta-pri::before,
.sp-filebtn::before{
  content:""; position: absolute; left: var(--rx, 50%); top: var(--ry, 50%);
  width: 0; height: 0; border-radius: 50%;
  background: rgba(255,255,255,.5);
  transform: translate(-50%,-50%);
  pointer-events: none;
}
.btn-primary.is-rippling::before, .btn-secondary.is-rippling::before, .btn-ghost.is-rippling::before,
.sp-submit.is-rippling::before, .sp-call-cta.is-rippling::before, .sp-notice-cta-pri.is-rippling::before,
.sp-filebtn.is-rippling::before{
  animation: btn-ripple .55s ease-out forwards;
}
@keyframes btn-ripple{
  from{ width: 0; height: 0; opacity: .6; }
  to  { width: 480px; height: 480px; opacity: 0; }
}

/* Free-badge soft underline glow */
.free-badge{
  background: linear-gradient(135deg,#16a34a,#22c55e,#16a34a);
  background-size: 220% 100%;
  animation: pulse-free 2.5s ease-in-out infinite, free-badge-shift 7s linear infinite;
}
@keyframes free-badge-shift{
  0%   { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}

/* Eyebrow chip — small green underline accent */
.eyebrow{ position: relative; }
.eyebrow::before{
  content:""; display:inline-block;
  width: 18px; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg,#16a34a,#22c55e);
  margin-right: .4rem;
  vertical-align: middle;
}

/* Section seams — soft eco gradient line between major sections */
main > section + section{
  position: relative;
}
main > section + section::before{
  content:""; position:absolute; left: 50%; top: 0;
  width: min(80%, 800px); height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(22,163,74,.18), transparent);
  pointer-events:none;
}

/* Desktop side-rail polish — pulse halo */
.side-rail-cta.is-visible::after{
  content:""; position: absolute; inset: -6px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(34,197,94,.4), rgba(22,163,74,.4));
  filter: blur(14px);
  z-index: -1; opacity: .4;
  animation: rail-halo 4s ease-in-out infinite;
}
@keyframes rail-halo{
  0%,100%{ opacity: .35; transform: scale(1); }
  50%   { opacity: .55; transform: scale(1.05); }
}

/* Trust-stat numbers — improve countup feel with slight shimmer  */
.stat-value{ display: inline-block; }

/* Improved focus ring (animated) */
:focus-visible{
  outline: 2px solid #16a34a;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(34,197,94,.18);
  border-radius: 6px;
  transition: outline-offset .15s ease, box-shadow .2s ease;
}
*:focus-visible{ animation: focus-pop .2s ease-out; }
@keyframes focus-pop{ from{ outline-offset: 1px; } to{ outline-offset: 3px; } }

/* Smooth section background bands — eco-tinted */
section.bg-white + section.bg-white{
  background: linear-gradient(180deg,#ffffff,#f8fdfa) !important;
}
section.bg-emerald-50, section.bg-slate-50{
  background-attachment: local;
}

/* Reviews track — momentum scrolling polish */
.reviews-track{ scrollbar-width: none; }
.reviews-track::-webkit-scrollbar{ display: none; }

/* Map iframe — subtle hover lift */
iframe[src*="google.com/maps"]{
  transition: box-shadow .3s ease, transform .3s ease;
}
iframe[src*="google.com/maps"]:hover{
  box-shadow: 0 14px 36px rgba(2,8,20,.16);
  transform: translateY(-2px);
}

/* Subtle noise texture overlay for hero (very faint) */
.hero-gradient::before{
  background:
    radial-gradient(ellipse 800px 600px at 80% 20%,rgba(16,185,129,.12),transparent),
    radial-gradient(ellipse 500px 400px at 10% 80%,rgba(34,197,94,.06),transparent);
}

/* Detail accordion smoother (FAQ summaries) */
details{ transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
details[open]{ box-shadow: 0 8px 22px rgba(22,163,74,.10); }
details > summary{ list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker{ display: none; }

/* Ensure honor reduced motion for the heaviest Round-4 effects */
@media (prefers-reduced-motion: reduce){
  .hero-gradient h1, .sp-h1, .page-hero h1,
  .free-badge, .side-rail-cta.is-visible::after,
  img[loading="lazy"], .picture-frame img,
  *:focus-visible{
    animation: none !important;
    transition: none !important;
  }
}

/* End Round 4 Cinematic Polish */

/* End 2026 Modernization Layer */