.template-modern {
    --site-nav-hover-color: var(--primary-color);
}

.template-modern .site-nav {
    position: sticky;
    top: 0;
    z-index: 25;
    max-width: none;
    padding-right: max(24px, calc((100% - 1240px) / 2));
    padding-left: max(24px, calc((100% - 1240px) / 2));
    border-bottom: 1px solid color-mix(in srgb, var(--secondary-color) 14%, transparent);
    background: color-mix(in srgb, var(--background-color) 94%, transparent);
    backdrop-filter: blur(16px);
}

.template-modern .site-brand {
    min-width: 0;
}

.template-modern .site-brand strong {
    max-width: min(300px, 26vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.template-modern .customer-hero {
    min-height: 720px;
    padding-right: max(24px, calc((100% - 1240px) / 2));
    padding-left: max(24px, calc((100% - 1240px) / 2));
    background: var(--secondary-color);
    color: #fff;
}

.template-modern .customer-hero,
.template-modern .customer-section,
.template-modern .contact-section,
.template-modern .map-section {
    scroll-margin-top: 100px;
}

.template-modern .customer-hero h1,
.template-modern .customer-section h2,
.template-modern .contact-section h2 {
    overflow-wrap: anywhere;
}

.template-modern .customer-hero .hero-inner > p:not(.site-eyebrow) {
    color: color-mix(in srgb, #fff 68%, var(--secondary-color));
    overflow-wrap: anywhere;
}

.template-modern .hero-media {
    border-radius: 4px 60px 4px 60px;
    box-shadow: 28px 28px 0 color-mix(in srgb, var(--primary-color) 70%, transparent);
}

.template-modern .customer-section {
    max-width: 1240px;
}

.template-modern .customer-section.tinted,
.template-modern .review-section {
    max-width: none;
    background: color-mix(in srgb, var(--primary-color) 9%, var(--background-color));
}

.template-modern .service-grid article,
.template-modern .portfolio-grid article,
.template-modern .review-grid blockquote {
    min-width: 0;
    border-radius: 4px;
    overflow-wrap: anywhere;
}

.template-modern .about-copy {
    border-left-width: 8px;
    overflow-wrap: anywhere;
}

.template-modern .about-section:has(.about-copy > p:empty) {
    grid-template-columns: minmax(0, 1fr);
}

.template-modern .about-section:has(.about-copy > p:empty) .section-kicker,
.template-modern .about-section:has(.about-copy > p:empty) .about-intro {
    grid-column: auto;
    grid-row: auto;
}

.template-modern .about-section:has(.about-copy > p:empty) .about-copy {
    display: none;
}

@media (max-width: 1000px) {
    .template-modern .site-nav > nav {
        display: none;
    }

    .template-modern .mobile-site-menu {
        display: block;
    }

    .template-modern .mobile-site-menu summary {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: 1px solid color-mix(in srgb, var(--secondary-color) 14%, transparent);
        border-radius: 4px;
        color: var(--secondary-color);
        font-size: 0;
        cursor: pointer;
    }

    .template-modern .mobile-site-menu summary::before {
        content: "☰";
        font-size: 21px;
    }

    .template-modern .mobile-site-menu nav {
        width: min(320px, calc(100vw - 32px));
        max-height: calc(100vh - 100px);
        max-height: calc(100dvh - 100px);
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: 4px;
    }

    .template-modern .mobile-site-menu nav a {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 600px) {
    .template-modern .site-brand strong {
        max-width: 150px;
    }
}