/* Section vertical rhythm + optional decorative doodle accents (no viewport height lock) */

.app-shell > .app-section:not(.hero-section) {
    position: relative;
    box-sizing: border-box;
    /* Content-fit bands with light separation — not large empty height */
    padding-top: clamp(2.15rem, 4vw, 3.25rem);
    padding-bottom: clamp(2.15rem, 4vw, 3.25rem);
}

/* Hero → services: same page bg, no tint band (avoids a visible cut line) */
.app-shell > .app-section.section-from-hero {
    margin-top: -1px;
    padding-top: clamp(1.5rem, 3.5vw, 2.5rem);
    background: var(--bg, #f3f5f4);
    border-top: 0;
    box-shadow: none;
}
.app-shell > .app-section.section-from-hero::before {
    content: none;
    display: none;
}
.app-shell > .app-section.section-from-hero > .container,
.app-shell > .app-section.section-from-hero > .site-content {
    position: relative;
    z-index: 1;
}

.app-shell > .app-section[hidden] {
    display: none !important;
}

/* Slightly tighter when two tinted sections stack (long content still OK) */
.app-shell > .app-section.section-alt + .app-section.section-alt {
    padding-top: clamp(1.85rem, 3.5vw, 2.75rem);
}

/*
 * Short / low-content sections (e.g. By the numbers): a little extra pad only.
 * Avoid tall min-heights that leave empty space on mobile.
 */
.app-shell > .app-section.app-section--short:not(.hero-section) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: clamp(2.35rem, 5vw, 3.75rem);
    padding-bottom: clamp(2.35rem, 5vw, 3.75rem);
    min-height: 0;
}

.app-shell > .app-section.app-section--short:not(.hero-section) > .container,
.app-shell > .app-section.app-section--short:not(.hero-section) > .section-fit-body {
    flex: 0 1 auto;
    width: 100%;
}

@media (min-width: 768px) {
    .app-shell > .app-section.app-section--short:not(.hero-section) {
        min-height: clamp(18rem, 34svh, 24rem);
    }
}

/* When a short section sits above the next band, keep a little extra air below */
.app-shell > .app-section.app-section--short:not(.hero-section) + .app-section:not(.hero-section) {
    padding-top: clamp(2.15rem, 4.5vw, 3.25rem);
}

/* Mobile: modest section air + clearer gaps between elements inside */
@media (max-width: 767.98px) {
    .app-shell > .app-section:not(.hero-section) {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
    .app-shell > .app-section.app-section--short:not(.hero-section) {
        padding-top: 2.6rem;
        padding-bottom: 2.6rem;
        min-height: 0;
    }
    .app-shell > .app-section:not(.hero-section) .section-head {
        margin-bottom: 1.05rem;
    }
    .app-shell > .app-section:not(.hero-section) .section-head h2 {
        margin-top: 0.45rem;
    }
    .app-shell > .app-section:not(.hero-section) .section-sub {
        margin-top: 0.45rem;
        margin-bottom: 0.25rem;
        line-height: 1.5;
    }
    .app-shell > .app-section:not(.hero-section) .h-scroll-wrap,
    .app-shell > .app-section:not(.hero-section) .media-feed-grid,
    .app-shell > .app-section:not(.hero-section) .media-feed-cols,
    .app-shell > .app-section:not(.hero-section) .seo-why-home,
    .app-shell > .app-section:not(.hero-section) .why-us-carousel,
    .app-shell > .app-section:not(.hero-section) .seo-home-faq,
    .app-shell > .app-section:not(.hero-section) .contact-visit-grid,
    .app-shell > .app-section:not(.hero-section) .social-embeds-grid,
    .app-shell > .app-section:not(.hero-section) .site-numbers-grid,
    .app-shell > .app-section:not(.hero-section) .team-grid,
    .app-shell > .app-section:not(.hero-section) .reviews-list,
    .app-shell > .app-section:not(.hero-section) #blogHomeContainer,
    .app-shell > .app-section:not(.hero-section) #servicesContainer {
        margin-top: 0.85rem;
    }
    .gallery-feeds-row {
        --bs-gutter-y: 1.25rem;
    }
}

.app-shell > .app-section:not(.hero-section) > .container,
.app-shell > .app-section:not(.hero-section) > .section-fit-body {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Space between section title block and the content below it */
.app-shell > .app-section:not(.hero-section) .section-head {
    margin-bottom: clamp(1.35rem, 3vw, 2rem);
}
.app-shell > .app-section:not(.hero-section) .section-head + * {
    margin-top: 0.35rem;
}
.app-shell > .app-section:not(.hero-section) .section-sub {
    margin-top: 0.55rem;
    margin-bottom: 0.25rem;
    line-height: 1.55;
}

/* Soft gaps between stacked blocks inside a section */
.app-shell > .app-section:not(.hero-section) .h-scroll-wrap,
.app-shell > .app-section:not(.hero-section) .media-feed-grid,
.app-shell > .app-section:not(.hero-section) .media-feed-cols,
.app-shell > .app-section:not(.hero-section) .seo-why-home,
.app-shell > .app-section:not(.hero-section) .why-us-carousel,
.app-shell > .app-section:not(.hero-section) .seo-home-faq,
.app-shell > .app-section:not(.hero-section) .contact-visit-grid,
.app-shell > .app-section:not(.hero-section) .social-embeds-grid,
.app-shell > .app-section:not(.hero-section) .site-numbers-grid,
.app-shell > .app-section:not(.hero-section) .team-grid,
.app-shell > .app-section:not(.hero-section) .reviews-list,
.app-shell > .app-section:not(.hero-section) #blogHomeContainer,
.app-shell > .app-section:not(.hero-section) #servicesContainer {
    margin-top: clamp(0.85rem, 2vw, 1.35rem);
}

.app-section.is-fit-tight {
    --section-gap: 14px;
}
.app-section.is-fit-tight .section-head {
    margin-bottom: 18px;
}
.app-section.is-fit-tight .section-sub {
    margin-bottom: 0.35rem;
}
.app-section.is-fit-tight .h-scroll-wrap,
.app-section.is-fit-tight .media-feed-grid,
.app-section.is-fit-tight .seo-why-home,
.app-section.is-fit-tight .why-us-carousel,
.app-section.is-fit-tight .seo-home-faq,
.app-section.is-fit-tight .contact-visit-grid,
.app-section.is-fit-tight .social-embeds-grid {
    margin-top: var(--section-gap, 14px);
}

/* —— Doodle layer —— */
.section-doodles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.45s ease;
}
.app-section.has-doodles .section-doodles {
    opacity: 1;
}

.section-doodle {
    position: absolute;
    color: var(--primary, #154b34);
    opacity: 0.14;
    line-height: 0;
}
.section-doodle svg {
    display: block;
    width: 100%;
    height: 100%;
}
.section-doodle--spark {
    width: clamp(28px, 4vw, 44px);
    height: clamp(28px, 4vw, 44px);
    opacity: 0.18;
}
.section-doodle--swirl {
    width: clamp(72px, 12vw, 140px);
    height: clamp(72px, 12vw, 140px);
    opacity: 0.12;
}
.section-doodle--leaf {
    width: clamp(40px, 7vw, 72px);
    height: clamp(40px, 7vw, 72px);
    opacity: 0.16;
}
.section-doodle--drop {
    width: clamp(22px, 3.5vw, 36px);
    height: clamp(28px, 4.5vw, 48px);
    opacity: 0.15;
}
.section-doodle--ring {
    width: clamp(48px, 8vw, 88px);
    height: clamp(48px, 8vw, 88px);
    opacity: 0.1;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-style: dashed;
}

/* Positions filled by JS via CSS vars */
.section-doodle[data-slot="1"] { top: var(--d1-t, 6%); left: var(--d1-l, 4%); }
.section-doodle[data-slot="2"] { top: var(--d2-t, 8%); right: var(--d2-r, 5%); }
.section-doodle[data-slot="3"] { bottom: var(--d3-b, 8%); left: var(--d3-l, 7%); }
.section-doodle[data-slot="4"] { bottom: var(--d4-b, 10%); right: var(--d4-r, 6%); }
.section-doodle[data-slot="5"] { top: var(--d5-t, 42%); left: var(--d5-l, 2%); }
.section-doodle[data-slot="6"] { top: var(--d6-t, 48%); right: var(--d6-r, 3%); }

@media (prefers-reduced-motion: no-preference) {
    .app-section.has-doodles .section-doodle--spark {
        animation: doodleFloat 5.5s ease-in-out infinite;
    }
    .app-section.has-doodles .section-doodle--swirl {
        animation: doodleSpin 28s linear infinite;
    }
    .app-section.has-doodles .section-doodle--leaf {
        animation: doodleFloat 7s ease-in-out infinite reverse;
    }
    .app-section.has-doodles .section-doodle--drop {
        animation: doodleFloat 6.2s ease-in-out 0.4s infinite;
    }
    .app-section.has-doodles .section-doodle--ring {
        animation: doodlePulse 8s ease-in-out infinite;
    }
}

@keyframes doodleFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(6deg); }
}
@keyframes doodleSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes doodlePulse {
    0%, 100% { transform: scale(1); opacity: 0.1; }
    50% { transform: scale(1.08); opacity: 0.16; }
}

@media (prefers-reduced-motion: reduce) {
    .section-doodle { animation: none !important; }
}

/* Alternate section tint keeps doodles readable */
.app-section.section-alt .section-doodle {
    opacity: 0.18;
}