/* ============================================================================
   ecoHero.css — the dark "eco hero" page-title header, extracted from the
   public pages that already inline it (childCare/salesTrends/benchmarks). Link
   this on pages that have a plain/light header so the dark, transparent-over-
   hero top nav (publicNav.css) has a dark hero to sit over. Self-contained
   (literal brand colours, no CSS-var dependency).
   ============================================================================ */
.eco-hero-wrapper {
    margin-top: 60px;
    position: relative;
    background: linear-gradient(135deg, #0a0f1a 0%, #141c2e 50%, #1a2540 100%);
    border-bottom: 1px solid rgba(26, 188, 156, 0.3);
    overflow: hidden;
    contain: layout style;
}
.eco-hero-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.02;
    z-index: 0;
    pointer-events: none;
}
.eco-fan-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.5; }
.fan-line {
    fill: none; stroke: url(#fanGrad); stroke-width: 1.5; stroke-linecap: round;
    stroke-dasharray: 2500; stroke-dashoffset: 2500;
    animation: drawLine 2s ease-out forwards;
    filter: drop-shadow(0 0 3px rgba(26, 188, 156, 0.5));
}
.fl1 { animation-delay: 0s; } .fl2 { animation-delay: 0.15s; } .fl3 { animation-delay: 0.3s; }
.fl4 { animation-delay: 0.45s; } .fl5 { animation-delay: 0.6s; } .fl6 { animation-delay: 0.75s; }
.fl7 { animation-delay: 0.9s; } .fl8 { animation-delay: 1.05s; } .fl9 { animation-delay: 1.2s; } .fl10 { animation-delay: 1.35s; }
@keyframes drawLine { 0% { stroke-dashoffset: 2500; opacity: 0; } 10% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
.eco-fan-secondary { opacity: 0.3; }
.fan-line-secondary {
    fill: none; stroke: url(#fanGrad2); stroke-width: 1; stroke-linecap: round;
    stroke-dasharray: 2500; stroke-dashoffset: 2500;
    animation: drawLine 1.5s ease-out forwards;
    filter: drop-shadow(0 0 2px rgba(237, 139, 0, 0.3));
}
.fs1 { animation-delay: 3s; } .fs2 { animation-delay: 3.12s; } .fs3 { animation-delay: 3.24s; }
.fs4 { animation-delay: 3.36s; } .fs5 { animation-delay: 3.48s; } .fs6 { animation-delay: 3.6s; }
.eco-hero-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(10, 15, 26, 0.8), transparent 30%),
        radial-gradient(ellipse 60% 70% at 80% 30%, rgba(26, 188, 156, 0.08), transparent),
        radial-gradient(ellipse 50% 60% at 20% 70%, rgba(0, 95, 110, 0.1), transparent);
    z-index: 0;
    pointer-events: none;
}
.eco-hero { position: relative; z-index: 1; padding: 3rem 0 2.5rem; }
.eco-hero-content { max-width: 800px; }
.eco-breadcrumb {
    display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem;
    font-family: 'Inter', sans-serif; font-size: 0.85rem;
}
.eco-breadcrumb a { color: #1ABC9C; text-decoration: none; transition: color 0.2s ease; }
.eco-breadcrumb a:hover { color: #ED8B00; text-decoration: underline; }
.eco-breadcrumb-sep { color: rgba(255, 255, 255, 0.3); font-size: 0.65rem; }
.eco-breadcrumb-current { color: rgba(255, 255, 255, 0.6); }
.eco-hero-title-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.eco-hero-title {
    font-family: 'Raleway', sans-serif; font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 800;
    color: #ffffff; margin: 0; letter-spacing: -0.025em; line-height: 1.1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.eco-hero-badge {
    display: inline-flex; align-items: center; padding: 0.4rem 1rem;
    background: linear-gradient(135deg, #ED8B00 0%, #f5a623 100%); color: #1A171B;
    font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.025em;
    border-radius: 100px; box-shadow: 0 2px 12px rgba(237, 139, 0, 0.4); min-width: 130px; min-height: 30px;
}
.eco-hero-subtitle { font-family: 'Inter', sans-serif; font-size: 1.1rem; color: rgba(255, 255, 255, 0.75); margin: 0 0 1.25rem; line-height: 1.5; }
.eco-hero-meta { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.eco-hero-meta-item { display: inline-flex; align-items: center; gap: 0.5rem; font-family: 'Inter', sans-serif; font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); }
.eco-hero-meta-item i { color: #1ABC9C; font-size: 0.9rem; }