body {
    scroll-behavior: smooth;
}

/* ========== DUMPSTER V2 DESIGN SYSTEM ========== */

.font-display {
    font-family: 'Bebas Neue', Impact, Haettenschweiler, sans-serif;
    letter-spacing: 0.02em;
}

.nav-v2 {
    background: rgba(17, 24, 39, 0.94);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-overlay-v2 {
    background: linear-gradient(
        to top,
        rgba(17, 24, 39, 0.97) 0%,
        rgba(17, 24, 39, 0.75) 45%,
        rgba(17, 24, 39, 0.35) 100%
    );
}

.hero-v2-img {
    transform: scale(1.02);
    animation: heroKenBurns 18s ease-in-out infinite alternate;
}

@keyframes heroKenBurns {
    from { transform: scale(1.02) translate3d(0, 0, 0); }
    to { transform: scale(1.08) translate3d(-1.5%, -1%, 0); }
}

.value-strip-list {
    counter-reset: value-strip;
}
.value-strip-num::before {
    counter-increment: value-strip;
    content: counter(value-strip, decimal-leading-zero);
}

.process-rail::before {
    content: '';
    display: none;
}
@media (min-width: 768px) {
    .process-rail::before {
        display: block;
        position: absolute;
        top: 2.25rem;
        left: 12%;
        right: 12%;
        height: 3px;
        background: linear-gradient(90deg, var(--brand-accent, #f2a426), transparent 90%);
        opacity: 0.45;
        pointer-events: none;
    }
    .process-step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 2rem;
        right: 0;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--brand-accent, #f2a426);
        transform: translateX(50%);
    }
}

.service-row .md\:col-span-3 {
    min-height: 11rem;
}

.dumpster-type-card-v2 .dumpster-type-image-wrap {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #111827;
}

.dumpster-type-benefits-v2 {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dumpster-type-benefits-v2 li {
    position: relative;
    padding-left: 1rem;
}
.dumpster-type-benefits-v2 li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 0.35rem;
    height: 0.35rem;
    background: var(--brand-accent, #f2a426);
}

.pp-footer-v2 {
    background: #0b0f14;
}
.pp-footer-accent-bar {
    height: 4px;
    background: var(--brand-accent, #f2a426);
    margin-bottom: 40px;
}
.pp-footer-v2 .pp-footer-site-title {
    font-size: 1.5rem;
    font-weight: 400;
}
.pp-footer-v2 .pp-footer-logo img {
    border-radius: 0;
    border: 2px solid var(--brand-accent, #f2a426);
}

/* ========== ANIMATIONS ========== */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes subtlePulse {
    0%, 100% { opacity: 0.15; transform: scale(1); }
    50% { opacity: 0.25; transform: scale(1.05); }
}
@keyframes liveDot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.anim-fade-up { animation: fadeInUp .7s ease-out both; }
.anim-fade-up-d1 { animation: fadeInUp .7s ease-out .15s both; }
.anim-fade-up-d2 { animation: fadeInUp .7s ease-out .3s both; }
.anim-fade-up-d3 { animation: fadeInUp .7s ease-out .45s both; }
.anim-fade-right { animation: fadeInRight .8s ease-out .3s both; }
.anim-pulse-slow { animation: subtlePulse 6s ease-in-out infinite; }
.anim-live-dot { animation: liveDot 2s ease-in-out infinite; }

/* ========== HERO STYLES ========== */

.hero-section {
    min-height: 100vh;
    min-height: 100dvh;
}

/* Hero image overlay: follows :root --brand (theme / row_data), not fixed blue */
.hero-overlay-brand-gradient {
    background: linear-gradient(
        to right,
        color-mix(in oklch, var(--brand, #111827) 92%, transparent) 0%,
        color-mix(in oklch, var(--brand, #111827) 85%, transparent) 35%,
        color-mix(in oklch, var(--brand, #111827) 65%, transparent) 65%,
        color-mix(in oklch, var(--brand, #111827) 30%, transparent) 100%
    );
}

@media (max-width: 1023px) {
    .hero-section {
        min-height: auto;
    }
}

.inner-hero-bg { background: linear-gradient(135deg, #020617 0%, #0f172a 50%, #1e293b 100%); }

.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.text-gradient-accent {
    background: linear-gradient(135deg, var(--brand-accent, #f2a426) 30%, #fbbf24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Decorative blobs */
.hero-blob-1 {
    position: absolute;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242,164,38,0.18) 0%, transparent 70%);
    top: -160px; right: -80px;
    pointer-events: none;
}
.hero-blob-2 {
    position: absolute;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
    bottom: -100px; left: -60px;
    pointer-events: none;
}

.wave-sep {
    position: absolute; bottom: -1px; left: 0; width: 100%;
    overflow: hidden; line-height: 0;
}
.wave-sep svg {
    display: block; width: calc(100% + 1.3px); height: 54px;
}

.dot-pattern {
    background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* ========== STEP CARDS (How It Works) ========== */

.step-card-3d {
    perspective: 800px;
}
.step-card-3d .card-inner {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    transform-style: preserve-3d;
}
.step-card-3d:hover .card-inner {
    transform: translateY(-8px) rotateX(3deg) rotateY(-2deg);
}
.step-card-3d:hover .card-shadow {
    transform: scale(0.95) translateY(8px);
    opacity: 0.12;
}
.step-card-3d .card-shadow {
    transition: all 0.4s ease;
}
.step-connector {
    position: relative;
}
.step-connector::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -1.5rem;
    width: 3rem;
    height: 2px;
    background: linear-gradient(90deg, var(--brand, #3022ce), transparent);
    transform: translateY(-50%);
}
@media (max-width: 767px) {
    .step-connector::after { display: none; }
}

/* ========== FAQ ACCORDION ========== */

details summary::-webkit-details-marker {
    display: none;
}

details[open] summary {
    color: var(--brand, #3022ce);
}

/* ========== UTILITIES ========== */

.capitalize-words { text-transform: capitalize; }

.service-card h3,
.service-name,
h3.service-title { text-transform: capitalize; }

section h3 a,
section h3 span { text-transform: capitalize; }

.grid a h3 { text-transform: capitalize; }

footer ul li a { text-transform: capitalize; }

.break-words {
    word-break: break-word;
    overflow-wrap: break-word;
}

.truncate-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.neighborhood-pill {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: #f3f4f6;
    border-radius: 9999px;
    font-size: 0.875rem;
    color: #374151;
    margin: 0.25rem;
}

/* ========== CALL BUTTON ANIMATIONS ========== */

@keyframes callPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in oklch, var(--brand-accent, #f2a426) 55%, transparent);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 10px color-mix(in oklch, var(--brand-accent, #f2a426) 0%, transparent);
        transform: scale(1.03);
    }
}

@keyframes callShimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes callBarSlideUp {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
}

.btn-call {
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.btn-call:hover {
    transform: scale(1.05);
}

.btn-call:focus-visible {
    outline: 2px solid var(--brand-accent, #f2a426);
    outline-offset: 2px;
}

.btn-call--pulse {
    animation: callPulse 2s ease-in-out infinite;
}

.btn-call--icon {
    transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.btn-call--card {
    background-size: 200% auto;
}

.btn-call--card:hover {
    background-image: linear-gradient(
        90deg,
        var(--brand-accent, #f2a426) 0%,
        #fbbf24 50%,
        var(--brand-accent, #f2a426) 100%
    );
    animation: callShimmer 2.5s linear infinite, callPulse 2s ease-in-out infinite;
}

.btn-call--bar {
    animation: callBarSlideUp 0.45s ease-out both;
}

.floating-cta-wrap {
    position: fixed;
    bottom: 1rem;
    left: 0.75rem;
    right: 0.75rem;
    z-index: 50;
    display: flex;
    justify-content: center;
    pointer-events: none;
    animation: callBarSlideUp 0.45s ease-out both;
}

@media (min-width: 768px) {
    .floating-cta-wrap {
        bottom: 1.5rem;
        left: 0;
        right: 0;
    }
}

@keyframes mobileCallRingBurst {
    /* 8s loop: ring → 2s pause → ring → reset */
    0%, 7%, 9%, 16%, 40%, 42%, 50%, 58%, 100% {
        opacity: 0;
        transform: scale(0.9);
    }
    8%, 10% {
        opacity: 0.9;
        transform: scale(1);
    }
    15% {
        opacity: 0;
        transform: scale(1.85);
    }
    41%, 43% {
        opacity: 0.9;
        transform: scale(1);
    }
    49% {
        opacity: 0;
        transform: scale(1.85);
    }
}

.floating-cta-pill-link,
.floating-cta-mobile-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
    min-height: 3.75rem;
    padding: 0.875rem 1.125rem;
    overflow: visible;
    pointer-events: auto;
    background-color: var(--brand, #3022ce);
    border-radius: 9999px;
    box-shadow: 0 8px 28px rgba(48, 34, 206, 0.45), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.floating-cta-copy {
    flex: 1;
    min-width: 0;
}

@media (min-width: 768px) {
    .floating-cta-pill-link,
    .floating-cta-mobile-link {
        max-width: 30rem;
        min-height: 4rem;
        padding: 1rem 1.25rem;
    }
}

.floating-cta-phone-stage {
    position: relative;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.floating-cta-phone-icon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
}

.floating-cta-ring {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.75);
    pointer-events: none;
    animation: mobileCallRingBurst 8s ease-out infinite;
}

.floating-cta-ring--delay {
    animation-delay: 0.12s;
}

.floating-cta-icon-pulse {
    animation: callPulse 2s ease-in-out infinite;
}

/* ========== SERVICE PREVIEW CARD (What We Do) ========== */

@keyframes callAttention {
    0%, 100% {
        transform: scale(1) translateY(0);
        box-shadow: 0 4px 16px rgba(242, 164, 38, 0.45), 0 0 0 0 rgba(242, 164, 38, 0.35);
    }
    50% {
        transform: scale(1.05) translateY(-1px);
        box-shadow: 0 8px 24px rgba(242, 164, 38, 0.6), 0 0 0 10px rgba(242, 164, 38, 0);
    }
}

@keyframes callGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.12); }
}

.service-preview-card {
    display: block;
    min-height: 320px;
    height: 100%;
}

.service-preview-card .service-card-media {
    transition: transform 0.7s ease;
}

.service-preview-card:hover .service-card-media {
    transform: scale(1.05);
}

.service-card-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    padding-top: 4rem;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.65) 45%,
        transparent 100%
    );
}

.service-card-body h3 {
    margin-bottom: 0.375rem;
}

.service-card-body p {
    margin-bottom: 0;
}

.service-card-actions {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-shrink: 0;
}

.service-card-learn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0.625rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.service-card-learn:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.55);
    transform: translateY(-1px);
}

.service-card-call {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-accent, #f2a426) 0%, #fbbf24 50%, var(--brand-accent, #f2a426) 100%);
    background-size: 200% auto;
    border-radius: 0.625rem;
    box-shadow: 0 4px 16px rgba(242, 164, 38, 0.45);
    animation: callAttention 1.75s ease-in-out infinite, callGlow 2.5s ease-in-out infinite;
    transition: transform 0.2s ease;
}

.service-card-call:hover {
    animation: callShimmer 1.2s linear infinite, callAttention 1.75s ease-in-out infinite;
    transform: scale(1.06);
}

.service-card-call svg {
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .btn-call--pulse,
    .btn-call--card:hover,
    .btn-call--bar,
    .floating-cta-wrap,
    .floating-cta-bar,
    .floating-cta-icon-pulse,
    .floating-cta-phone-stage,
    .floating-cta-ring,
    .service-card-call,
    .service-card-call:hover,
    .phone-icon-animated__ring,
    .phone-icon-animated__handset,
    .cta-phone-icon .phone-icon-animated__handset {
        animation: none !important;
    }
    .floating-cta-phone-stage {
        transform: none;
    }
    .btn-call:hover {
        transform: none;
    }
}

/* ========== PHONE-VOLUME ICON (handset + 3 range arcs) ========== */

.phone-icon-animated {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
    vertical-align: middle;
}

.phone-icon-animated__svg {
    display: block;
    width: 100%;
    height: 100%;
}

.phone-icon-animated--sm { width: 1.125rem; height: 1.125rem; }
.phone-icon-animated--md { width: 1.375rem; height: 1.375rem; }
.phone-icon-animated--lg { width: 1.75rem; height: 1.75rem; }
.phone-icon-animated--xl { width: 2.25rem; height: 2.25rem; }

.phone-icon-animated--light { color: #fff; }
.phone-icon-animated--brand { color: var(--brand, #3022ce); }
.phone-icon-animated--accent { color: var(--brand-accent, #b5de3b); }

.phone-icon-animated__ring {
    opacity: 0;
    transform-origin: 300px 150px;
}

/* Range lines: show one at a time — 1st, then 2nd, then 3rd, loop */
.phone-icon-animated__ring--1 {
    animation: phoneRingSeq 1.8s linear infinite;
}

.phone-icon-animated__ring--2 {
    animation: phoneRingSeq 1.8s linear infinite 0.6s;
}

.phone-icon-animated__ring--3 {
    animation: phoneRingSeq 1.8s linear infinite 1.2s;
}

@keyframes phoneRingSeq {
    0%, 100% { opacity: 0; }
    4% { opacity: 1; }
    30% { opacity: 1; }
    33.333% { opacity: 0; }
}

/* Handset only: ringing shake motion */
.phone-icon-animated__handset {
    transform-origin: 42% 62%;
    transform-box: fill-box;
    animation: phoneHandsetRing 0.5s ease-in-out infinite;
}

@keyframes phoneHandsetRing {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(-7deg); }
    30% { transform: rotate(7deg); }
    45% { transform: rotate(-5deg); }
    60% { transform: rotate(5deg); }
    75% { transform: rotate(-3deg); }
    90% { transform: rotate(3deg); }
}

.btn-call .phone-icon-animated--md,
.btn-call .phone-icon-animated--sm {
    margin-right: 0.35rem;
}

.cta-phone-icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    color: #fff;
    flex-shrink: 0;
}

/* ========== CALL DEADLINE (whole hours window) ========== */

.hero-call-deadline {
    letter-spacing: 0.01em;
}

.btn-call--deadline {
    gap: 0;
}

.btn-call__main {
    line-height: 1.2;
}

.call-deadline-line--btn {
    font-weight: 600;
    text-wrap: balance;
}

.call-deadline-line--floating {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0.125rem;
}

/* ========== MOBILE BOTTOM PADDING ========== */

@media (max-width: 767px) {
    body { padding-bottom: 5.5rem; }
}

@media (min-width: 768px) {
    body { padding-bottom: 5rem; }
}

/* ========== LIMITED OFFER / COUNTDOWN ========== */

.limited-offer-glow {
    background: radial-gradient(circle, rgba(181, 222, 59, 0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}
.limited-offer-glow--accent {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    transform: translate(-30%, 30%);
}

.limited-offer-timer-card {
    animation: fadeInUp 0.7s ease-out 0.2s both;
}

.countdown-unit {
    text-align: center;
    padding: 0.75rem 0.25rem;
    border-radius: 1rem;
    background: linear-gradient(180deg, #f8f7ff 0%, #f3f4f6 100%);
    border: 1px solid #e5e7eb;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.countdown-unit--primary {
    background: linear-gradient(180deg, #ede9fe 0%, #e0e7ff 100%);
    border-color: color-mix(in oklch, var(--brand, #3022ce) 25%, #e5e7eb);
}

.countdown-unit--primary .countdown-value {
    color: var(--brand, #3022ce);
    font-size: 2rem;
}

@media (min-width: 640px) {
    .countdown-unit--primary .countdown-value {
        font-size: 2.5rem;
    }
}

.limited-offer-countdown.grid-cols-3 {
    max-width: 20rem;
    margin-left: auto;
    margin-right: auto;
}

.limited-offer-countdown .countdown-unit {
    padding: 1rem 0.5rem;
}

.countdown-unit--accent {
    background: linear-gradient(180deg, #f0fdf4 0%, #ecfccb 100%);
    border-color: color-mix(in oklch, var(--brand-accent, #b5de3b) 40%, #e5e7eb);
}

.countdown-unit--accent .countdown-value {
    color: color-mix(in oklch, var(--brand-accent, #b5de3b) 80%, #1f2937);
}

.countdown-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--brand, #3022ce);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    transition: transform 0.15s ease;
}

@media (min-width: 640px) {
    .countdown-value {
        font-size: 2.25rem;
    }
}

.countdown-value.tick-flip {
    transform: scale(1.08);
}

.countdown-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
    margin-top: 0.25rem;
}

.countdown-expired .countdown-value {
    color: #ef4444;
}

.countdown-expired::after {
    content: 'Offer expired';
    display: block;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #ef4444;
    margin-top: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .limited-offer-timer-card {
        animation: none;
    }
    .countdown-value.tick-flip {
        transform: none;
    }
}

/* Footer */
.pp-footer {
    background: #080e24;
    color: #b5bacc;
    padding: 40px 16px 24px;
}
.pp-footer-inner { max-width: 1200px; margin: 0 auto; }
.pp-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px 24px;
    margin-bottom: 28px;
}
@media (min-width: 640px) {
    .pp-footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .pp-footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); }
}
.pp-footer-brand { margin-bottom: 8px; }
.pp-footer-brand-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.pp-footer-logo {
    flex-shrink: 0;
    line-height: 0;
}
.pp-footer-logo img {
    height: 40px;
    width: 40px;
    display: block;
    object-fit: contain;
    border-radius: 8px;
}
.pp-footer-site-title {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    line-height: 1.25;
    margin: 0;
}
.pp-footer-site-title:hover { color: var(--brand-accent, #ffc531); }
.pp-footer-brand-row:hover .pp-footer-site-title { color: var(--brand-accent, #ffc531); }
.pp-footer-tagline {
    font-size: 13px;
    line-height: 1.6;
    color: #878ea7;
    margin: 0;
    max-width: 280px;
}
.pp-footer-heading {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pp-footer-col-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pp-footer-col-links li { margin-bottom: 8px; }
.pp-footer-col-links a {
    color: #b5bacc;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
}
.pp-footer-col-links a:hover { color: #fff; }
.pp-footer-view-all {
    font-weight: 700;
    color: var(--brand-accent, #ffc531) !important;
}
.pp-footer-top {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 24px;
}
.pp-footer-links { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; padding: 0; margin: 0; }
.pp-footer-links a { color: #b5bacc; text-decoration: none; font-size: 14px; }
.pp-footer-links a:hover { color: #fff; }
.pp-footer-contact {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
}
.pp-footer-contact li { margin-bottom: 10px; }
.pp-footer-contact a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #b5bacc;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
}
.pp-footer-contact a:hover { color: #fff; }
.pp-footer-contact-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--brand-accent, #ffc531);
}
.pp-footer-contact-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #b5bacc;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
}
.pp-footer-contact-link:hover { color: #fff; }
.pp-footer-company-list .pp-footer-list-divider {
    height: 1px;
    margin: 12px 0 10px;
    background: #212841;
    list-style: none;
}
.pp-footer-copyright {
    border-top: 1px solid #212841;
    padding-top: 20px;
    font-size: 12px;
    line-height: 1.6;
    color: #878ea7;
    text-align: center;
}

/* ========== DUMPSTER TYPES SECTION ========== */

.dumpster-type-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.dumpster-type-image-wrap {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f3f4f6;
}

.dumpster-type-image {
    display: block;
}

.dumpster-type-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dumpster-type-benefits li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #6b7280;
}

.dumpster-type-benefits li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--brand, #7e23af);
}


/* === Theme variant overrides (night) === */
:root {
  --v-radius: 0.75rem;
  --v-section-alt: #0f172a;
  --v-nav-bg: rgba(2,6,23,0.92);
  --v-footer-bg: #020617;
}
.font-display { font-family: 'Space Grotesk', system-ui, sans-serif; }
body { font-family: 'Sora', system-ui, sans-serif; }
.nav-v {
  background: var(--v-nav-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(128,128,128,0.15);
}
.hero-overlay-v { background: linear-gradient(135deg, rgba(2,6,23,0.92) 0%, rgba(2,6,23,0.55) 100%); }
.inner-hero-bg { background: linear-gradient(135deg, #020617 0%, #0f172a 50%, #1e293b 100%); }
.pp-footer, .pp-footer-v { background: var(--v-footer-bg); }
.pp-footer-accent-bar { height: 4px; background: var(--brand-accent, #f2a426); margin-bottom: 2rem; }
.value-strip-list { counter-reset: value-strip; }
.value-strip-num::before { counter-increment: value-strip; content: counter(value-strip, decimal-leading-zero); }
.dumpster-type-image-wrap { aspect-ratio: 16/10; overflow: hidden; background: #111; }
.safety-stripe {
  background: repeating-linear-gradient(-45deg, var(--brand-accent, #f59e0b), var(--brand-accent, #f59e0b) 12px, #111 12px, #111 24px);
}
@media (min-width: 768px) {
  .process-rail::before {
    content: '';
    position: absolute;
    top: 1.75rem; left: 12%; right: 12%; height: 2px;
    background: linear-gradient(90deg, var(--brand-accent), transparent 90%);
    opacity: 0.4;
  }
}

/* === Tailwind v3 slash-opacity utility fallbacks ===
   This theme loads Tailwind v2.2.19 from the CDN, which predates the
   text-white/80 style opacity-modifier syntax used throughout the markup.
   Those classes go unmatched under v2 and silently do nothing, so affected
   elements fall back to the inherited body text color instead of the
   intended translucent white/etc. These rules restore the intended colors. */
.bg-white\/10 { background-color: rgba(255,255,255,0.1); }
.bg-white\/20 { background-color: rgba(255,255,255,0.2); }
.bg-white\/95 { background-color: rgba(255,255,255,0.95); }
.border-brand-accent\/40 { border-color: color-mix(in srgb, var(--brand-accent, #f2a426) 40%, transparent); }
.border-white\/20 { border-color: rgba(255,255,255,0.2); }
.text-orange-800\/70 { color: rgba(154,52,18,0.7); }
.text-teal-50\/90 { color: rgba(240,253,250,0.9); }
.text-white\/60 { color: rgba(255,255,255,0.6); }
.text-white\/70 { color: rgba(255,255,255,0.7); }
.text-white\/75 { color: rgba(255,255,255,0.75); }
.text-white\/80 { color: rgba(255,255,255,0.8); }
.text-white\/90 { color: rgba(255,255,255,0.9); }
.text-white\/95 { color: rgba(255,255,255,0.95); }
.from-black\/85 { --tw-gradient-from: rgba(0,0,0,0.85); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }
.via-black\/40 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.4), var(--tw-gradient-to, rgba(0,0,0,0)); }
.via-gray-900\/90 { --tw-gradient-stops: var(--tw-gradient-from), rgba(17,24,39,0.9), var(--tw-gradient-to, rgba(0,0,0,0)); }
.via-gray-900\/95 { --tw-gradient-stops: var(--tw-gradient-from), rgba(17,24,39,0.95), var(--tw-gradient-to, rgba(0,0,0,0)); }
.to-gray-900\/60 { --tw-gradient-to: rgba(17,24,39,0.6); }
.to-gray-900\/70 { --tw-gradient-to: rgba(17,24,39,0.7); }

/* === Tailwind "slate" palette fallback ===
   Same issue as the stone/opacity fallbacks above: the Tailwind v2.2.19 CDN
   build used by this theme doesn't include the extended "slate" gray scale,
   so slate-* classes match nothing and fall back to the dark inherited body
   color — invisible against this theme's dark navy sections. */
.text-slate-100 { color: #f1f5f9; }
.text-slate-300 { color: #cbd5e1; }
.text-slate-400 { color: #94a3b8; }
.text-slate-900 { color: #0f172a; }
.bg-slate-800 { background-color: #1e293b; }
.bg-slate-900 { background-color: #0f172a; }
.bg-slate-950 { background-color: #020617; }
.border-slate-600 { border-color: #475569; }
.border-slate-800 { border-color: #1e293b; }

/* === Tailwind min-h-* arbitrary value fallback ===
   Tailwind's default minHeight scale only ships 0/full/screen (unlike
   height, which gets the full spacing scale) — min-h-40/min-h-72 aren't
   real utilities in any stock Tailwind config. Cards using them rely on
   absolutely-positioned children for content, so with no min-height they
   collapse to 0px and the whole grid renders blank. */
.min-h-40 { min-height: 10rem; }
.min-h-72 { min-height: 18rem; }

/* ========== SERVICES SCROLLER (horizontal, avoids a long stacked list) ========== */
.services-scroller {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--brand-accent, #a3e635) transparent;
}
.services-scroller > * { scroll-snap-align: start; }
.services-scroller::-webkit-scrollbar { height: 8px; }
.services-scroller::-webkit-scrollbar-track { background: transparent; }
.services-scroller::-webkit-scrollbar-thumb { background: var(--brand-accent, #a3e635); border-radius: 9999px; }