/* ============================================================
   People's Window Washing : shared CSS for service pages
   (window-washing, power-washing, gutters, screen-repair)
   Layout containers (.grid-3, .process-steps) intentionally
   left page-specific: they alternate grid/flex depending on the page.
   ============================================================ */

.container { padding: 0 1.5rem; }
.section { padding: 5rem 0; }
.section-title { margin-bottom: 1.5rem; }
.section-subtitle { margin-bottom: 3rem; max-width: 800px; line-height: 1.8; }

/* 2-column grid */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 992px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* Cards */
.card { background: var(--color-bg-card); padding: 2.5rem; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: var(--transition); display: flex; flex-direction: column; height: 100%; position: relative; border-top: 4px solid transparent; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-top-color: var(--color-accent-1); }
.card-icon { width: 60px; height: 60px; background: var(--color-bg-main); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; }
.card-icon svg { width: 30px; height: 30px; color: var(--color-accent-1); }
.card h4 { font-family: var(--font-serif); font-size: 1.4rem; margin-bottom: 1rem; color: var(--color-text-main); }
.card p { color: var(--color-text-light); font-size: 0.95rem; line-height: 1.6; flex: 1; }

/* Highlight banner */
.highlight-banner { background: var(--color-bg-darker); border-left: 5px solid var(--color-accent-1); padding: 2rem; border-radius: var(--radius-md); margin-bottom: 3rem; }
.highlight-banner h3 { font-size: 1.5rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 14px; color: var(--color-text-main); font-family: var(--font-serif); }
.highlight-banner-icon { width: 80px; height: 80px; flex-shrink: 0; object-fit: contain; }
.highlight-banner p { color: var(--color-text-main); font-size: 1.05rem; }

/* Bulleted feature list (formerly 'enemies list') */
.enemies-list { list-style: none; margin-top: 2rem; }
.enemies-list li { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; background: var(--color-white); padding: 1.5rem; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.enemies-list li .icon-wrapper { background: var(--color-bg-main); padding: 10px; border-radius: 50%; color: var(--color-accent-1); flex-shrink: 0; }
.enemies-list li h5 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.enemies-list li p { color: var(--color-text-light); font-size: 0.95rem; margin: 0; }

/* Vertical benefits list */
.benefits-vertical { display: flex; flex-direction: column; gap: 1.5rem; }
.benefit-row { display: flex; align-items: center; gap: 1rem; background: var(--color-white); padding: 1.5rem; border-radius: var(--radius-md); border: 1px solid var(--color-bg-darker); }
.benefit-row svg { width: 32px; height: 32px; color: var(--color-accent-1); flex-shrink: 0; }
.benefit-row div h5 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.benefit-row div p { color: var(--color-text-light); font-size: 0.9rem; margin: 0; }

/* Before/after image comparison */
.image-compare { position: relative; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4/3; }
.image-compare img { width: 100%; height: 100%; object-fit: cover; }

/* Process steps : shared item styling (.process-steps container stays page-specific) */
.process-step { background: var(--color-white); padding: 2.5rem 2rem; border-radius: var(--radius-md); text-align: center; box-shadow: var(--shadow-sm); position: relative; }
.process-step-icon { width: 56px; height: 56px; background: var(--color-bg-darker); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem auto; }
.process-step-icon svg { width: 28px; height: 28px; stroke: var(--color-accent-1); }
.process-step h4 { font-family: var(--font-serif); font-size: 1.2rem; margin-bottom: 0.5rem; }
.process-step p { color: var(--color-text-light); font-size: 0.95rem; }

/* FAQ accordion (shared across all service pages) */
.faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.faq-item { background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.faq-question { width: 100%; background: none; border: none; padding: 1.5rem; text-align: left; font-family: var(--font-serif); font-size: 1.15rem; color: var(--color-text-main); font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.faq-question svg { width: 20px; height: 20px; color: var(--color-accent-1); transition: transform 0.3s ease; }
.faq-question.active svg { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-answer-inner { padding: 0 1.5rem 1.5rem 1.5rem; color: var(--color-text-light); line-height: 1.6; }

/* Mobile accordions for long sections (shared across all service pages) */
.toggle-chevron { display: none; }
@media (max-width: 1024px) {
    .mobile-toggle-header { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 0.75rem; }
    .toggle-chevron { display: block; width: 18px; height: 18px; color: var(--color-accent-1); flex-shrink: 0; margin-left: auto; transition: transform 0.3s ease; }
    .mobile-toggle-header.active .toggle-chevron { transform: rotate(180deg); }
    .mobile-collapsible { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; margin: 0 !important; }
}

/* Our Story: keep the family photo pinned alongside the longer letter, desktop only */
@media (min-width: 992px) {
    .our-story-photo { position: sticky; top: 110px; }
}
@media (max-width: 991px) {
    .our-story-photo { position: static; }
}

/* Mobile-only quick-nav buttons in the service page hero, to jump between sections */
.hero-quicknav { display: none; }
.hero-quicknav-fixed { display: none; }
@media (max-width: 768px) {
    .hero-quicknav { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
    .hero-quicknav a {
        padding: 8px 16px; border-radius: 30px; font-size: 0.85rem; font-weight: 600;
        background: rgba(8,16,28,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
        color: #FFFFFF; border: 1px solid rgba(255,255,255,0.55); text-decoration: none; text-transform: none;
        letter-spacing: normal; text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    }

    /* A second copy of the same nav, pinned below the header once the hero scrolls out of
       view, so the user doesn't have to scroll back up to jump between sections. Kept as a
       separate fixed element (rather than repositioning the original) to avoid any layout jump. */
    .hero-quicknav-fixed {
        position: fixed; top: 76px; left: 0; width: 100%; z-index: 998;
        display: flex; flex-wrap: nowrap; gap: 0.6rem; align-items: center;
        background: rgba(255,255,255,0.9); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
        padding: 0.55rem 1.25rem; box-shadow: 0 4px 15px rgba(0,0,0,0.08); border-bottom: 1px solid var(--color-bg-darker);
        overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
        transform: translateY(-200px); transition: transform 0.25s ease;
    }
    .hero-quicknav-fixed::-webkit-scrollbar { display: none; }
    .hero-quicknav-fixed.visible { transform: translateY(0); }
    .hero-quicknav-fixed a {
        flex-shrink: 0; padding: 6px 14px; border-radius: 30px; font-size: 0.8rem; font-weight: 600;
        background: var(--color-bg-main); color: var(--color-text-main); border: 1px solid var(--color-bg-darker);
        text-decoration: none;
    }
}