body {
    scroll-behavior: smooth;
}

/* ========== 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; }

/* ========== OPACITY UTILITIES ==========
   The Tailwind CDN build pinned in index.html (v2.2.19) predates the
   color/opacity slash syntax (bg-white/10 etc.), so those classes are
   undefined and render with no color at all. It also has no teal or
   amber in its default palette (only added as core colors in Tailwind v3),
   so text-teal-*/bg-amber-* etc. are undefined too. Define the ones this
   theme actually uses so hero copy and badges over photos stay legible. */
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
.text-white\/70 { color: rgba(255, 255, 255, 0.7); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
.border-white\/20 { border-color: rgba(255, 255, 255, 0.2); }
.border-white\/30 { border-color: rgba(255, 255, 255, 0.3); }
.border-brand-accent\/50 { border-color: color-mix(in oklch, var(--brand-accent, #f2a426) 50%, transparent); }
.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)); }
.text-teal-50\/90 { color: rgba(240, 253, 250, 0.9); }
.text-teal-100 { color: #ccfbf1; }
.text-teal-900 { color: #134e4a; }
.bg-teal-400 { background-color: #2dd4bf; }
.hover\:bg-teal-400:hover { background-color: #2dd4bf; }
.text-amber-400 { color: #fbbf24; }
.text-amber-600 { color: #d97706; }
.text-amber-800 { color: #92400e; }
.bg-amber-50 { background-color: #fffbeb; }
.bg-amber-100 { background-color: #fef3c7; }
.border-amber-200 { border-color: #fde68a; }
.hover\:bg-orange-600:hover { background-color: #ea580c; }

/* ========== 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, #3022ce) 92%, transparent) 0%,
        color-mix(in oklch, var(--brand, #3022ce) 85%, transparent) 35%,
        color-mix(in oklch, var(--brand, #3022ce) 65%, transparent) 65%,
        color-mix(in oklch, var(--brand, #3022ce) 30%, transparent) 100%
    );
}

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

.inner-hero-bg { background: linear-gradient(120deg, #0f766e 0%, #134e4a 60%, #0f172a 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;
}

.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 (local time + 2.5h) ========== */

.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; }
}

/* 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;
}
/* Footer services: show the first 6, toggle expands the rest in place */
.pp-footer-more-toggle { position: absolute; opacity: 0; pointer-events: none; }
.pp-footer-services li:nth-child(n+7) { display: none; }
.pp-footer-more-toggle:checked + .pp-footer-services li { display: list-item; }
.pp-footer-more-btn {
    display: inline-block;
    margin-top: 6px;
    padding: 8px 16px;
    border: 1px solid var(--brand-accent, #ffc531);
    border-radius: 999px;
    color: var(--brand-accent, #ffc531);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s, color 0.2s;
}
.pp-footer-more-btn:hover { background: var(--brand-accent, #ffc531); color: #111; }
.pp-footer-more-btn .pp-less { display: none; }
.pp-footer-more-toggle:checked ~ .pp-footer-more-btn .pp-more { display: none; }
.pp-footer-more-toggle:checked ~ .pp-footer-more-btn .pp-less { display: inline; }
.pp-footer-more-toggle:focus-visible ~ .pp-footer-more-btn { outline: 2px solid var(--brand-accent, #ffc531); outline-offset: 2px; }
/* Hide the toggle when there are 6 or fewer services */
.pp-footer-services:not(:has(li:nth-child(7))) ~ .pp-footer-more-btn { display: none; }
.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;
}


/* === Theme variant overrides (utility) === */
:root {
  --v-radius: 0.5rem;
  --v-section-alt: #f0fdfa;
  --v-nav-bg: rgba(255,255,255,0.9);
  --v-footer-bg: #134e4a;
}
.font-display { font-family: 'Outfit', system-ui, sans-serif; }
body { font-family: 'Outfit', 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(120deg, rgba(15,118,110,0.85) 0%, rgba(15,23,42,0.55) 100%); }
.inner-hero-bg { background: linear-gradient(120deg, #0f766e 0%, #134e4a 60%, #0f172a 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 utilities used by generated markup but absent from the pinned
   tailwindcss@2.2.19 CDN build. Without min-h-72 the service cards have no
   height (both children are absolute) and the grid renders blank. */
.min-h-72 { min-height: 18rem; }