:root {
    --red: #f13a2b;
    --dark: #181818;
    --ink: #222;
    --muted: #696969;
    --light: #f5f5f5;
    --line: #e7e7e7;
    --white: #fff;
    --shadow: 0 18px 48px rgba(0, 0, 0, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.65;
    background: var(--white);
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
p { color: var(--muted); margin: 0 0 18px; }
ul { margin: 0; padding-left: 22px; }
h1,
h2,
h3,
p,
a,
button,
li,
span,
strong {
    overflow-wrap: anywhere;
    word-break: normal;
}

.site-header {
    background: var(--dark);
    color: var(--white);
}
.topbar {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 34px;
    max-width: 1320px;
    min-height: 90px;
    margin: 0 auto;
    padding: 0 26px;
    border-bottom: 1px solid rgba(255,255,255,.16);
    font-weight: 700;
}
.topbar span,
.social-links a,
.search-toggle { color: var(--red); }
.header-icon { display: inline-block; margin-right: 8px; }
.social-links {
    display: flex;
    justify-content: flex-end;
    gap: 24px;
}
.main-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1320px;
    min-height: 138px;
    margin: 0 auto;
    padding: 0 26px;
}
.brand img { width: 244px; }
.primary-menu {
    display: flex;
    align-items: center;
    gap: 30px;
    color: #f2f2f2;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
}
.primary-menu a:hover,
.menu-item button:hover,
.search-toggle:hover { color: var(--red); }
.menu-item { position: relative; }
.menu-item button {
    border: 0;
    padding: 54px 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-transform: inherit;
    cursor: pointer;
}
.search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}
.search-toggle span {
    font-size: 32px;
    line-height: 1;
}
.search-toggle svg,
.search-field svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.menu-item button:after {
    content: "⌄";
    margin-left: 6px;
}
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    display: none;
    min-width: 235px;
    padding: 18px 0;
    background: #202020;
    box-shadow: var(--shadow);
}
.submenu a {
    display: block;
    padding: 9px 20px;
    color: #f7f7f7;
    text-transform: none;
}
.menu-item:hover .submenu,
.menu-item:focus-within .submenu { display: block; }
.nav-toggle {
    display: none;
    width: 44px;
    height: 38px;
    border: 0;
    background: transparent;
}
.nav-toggle span {
    display: block;
    width: 26px;
    height: 3px;
    margin: 5px auto;
    background: #fff;
}

.search-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 32px;
    background: rgba(18, 18, 18, .96);
    color: var(--white);
}
.search-modal[hidden] { display: none; }
.search-close {
    position: absolute;
    top: 34px;
    right: 42px;
    width: 56px;
    height: 56px;
    border: 0;
    color: var(--white);
    background: transparent;
    font-size: 52px;
    line-height: 1;
    cursor: pointer;
}
.search-close:hover { color: var(--red); }
.search-form {
    width: min(860px, 100%);
}
.search-form label {
    display: block;
    margin-bottom: 24px;
    color: var(--red);
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 8px;
    text-transform: uppercase;
}
.search-field {
    display: grid;
    grid-template-columns: 1fr 78px;
    border-bottom: 2px solid rgba(255, 255, 255, .72);
}
.search-field input {
    min-width: 0;
    height: 82px;
    border: 0;
    outline: 0;
    color: var(--white);
    background: transparent;
    font: inherit;
    font-size: clamp(32px, 6vw, 64px);
    font-weight: 800;
}
.search-field input::placeholder { color: rgba(255, 255, 255, .55); }
.search-field button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    border: 0;
    color: var(--red);
    background: transparent;
    cursor: pointer;
}
body.search-open { overflow: hidden; }

.hero {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    padding: 58px 26px;
    overflow: hidden;
    color: var(--white);
    background:
        linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.56) 38%, rgba(0,0,0,.14) 72%),
        image-set(
            url("/assets/images/hero.webp") type("image/webp"),
            url("/assets/images/hero.jpg") type("image/jpeg")
        ) top center / cover no-repeat;
}
.hero-content {
    width: min(100%, 1320px);
    margin: 0 auto;
}
.eyebrow {
    color: var(--red);
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 8px;
    text-transform: uppercase;
}
.hero h1 {
    max-width: 720px;
    margin: 12px 0 22px;
    color: var(--white);
    font-size: clamp(58px, 7vw, 96px);
    line-height: .94;
    font-weight: 900;
    letter-spacing: 0;
}
.hero h1 span { color: var(--red); }
.hero p {
    max-width: 650px;
    color: #ddd;
    font-size: 18px;
}
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 0 34px;
    max-width: 100%;
    color: var(--white);
    background: var(--red);
    border: 2px solid var(--red);
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
}
.button:hover { background: #1f1f1f; }
.button-dark { background: #1f1f1f; border-color: #1f1f1f; }

.quick-actions {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    background: var(--dark);
    color: var(--white);
    text-align: center;
}
.quick-actions a {
    padding: 14px 8px 16px;
    font-weight: 800;
}
.quick-actions span {
    display: block;
    color: var(--white);
    font-size: 34px;
    line-height: 1;
}

.intro-section,
.offer,
.trust,
.projects,
.cta-band,
.testimonials,
.team-section,
.coverage,
.article-wrap,
.contact-grid,
.legal-copy {
    padding: 84px clamp(24px, 6vw, 96px);
}
.intro-section,
.trust,
.team-section,
.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .86fr);
    gap: 58px;
}
h2 {
    margin: 0 0 20px;
    color: #202020;
    font-size: clamp(36px, 4.6vw, 64px);
    line-height: 1.06;
    font-weight: 900;
    letter-spacing: 0;
}
h3 {
    margin: 0 0 10px;
    color: #202020;
    font-size: 22px;
    line-height: 1.2;
}
.feature-list article,
.service-card,
.testimonial-card,
.contact-card,
.toc,
.article-content {
    background: var(--white);
    box-shadow: var(--shadow);
}
.feature-list {
    display: grid;
    gap: 24px;
}
.feature-list article,
.service-card,
.testimonial-card { padding: 28px; }
.partners {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 32px;
    padding: 34px clamp(24px, 6vw, 96px);
    background: #202020;
    color: var(--white);
}
.partners img {
    max-height: 76px;
    margin: 0 auto;
    object-fit: contain;
}
.partners picture {
    display: flex;
    align-items: center;
    justify-content: center;
}
.partners strong {
    font-size: 24px;
    line-height: 1.1;
}
.offer,
.projects,
.testimonials { background: var(--light); }
.service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 34px;
}
.service-card {
    min-height: 270px;
    border-top: 4px solid var(--red);
}
.service-card a {
    color: var(--red);
    font-weight: 900;
}
.trust {
    color: var(--white);
    background:
        linear-gradient(rgba(18,18,18,.82), rgba(18,18,18,.82)),
        image-set(
            url("/assets/images/projects/dachinstallation.webp") type("image/webp"),
            url("/assets/images/projects/dachinstallation.jpg") type("image/jpeg")
        ) center / cover no-repeat;
    grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr);
    align-items: center;
}
.trust h2,
.trust p { color: var(--white); }
.stats {
    display: grid;
    grid-template-columns: auto 1fr;
    align-content: center;
    justify-self: end;
    gap: 10px 18px;
    min-width: 500px;
}
.stats strong {
    color: var(--red);
    min-width: 126px;
    font-size: 54px;
    line-height: 1;
    text-align: right;
}
.stats span {
    align-self: center;
    color: var(--white);
    font-weight: 800;
}
.project-grid,
.testimonial-grid,
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 34px;
}
.project-card {
    position: relative;
    min-height: 410px;
    overflow: hidden;
    background: #111;
}
.project-card img {
    width: 100%;
    height: 410px;
    object-fit: cover;
    opacity: .72;
    transition: transform .25s ease;
}
.project-card:hover img { transform: scale(1.04); }
.project-card div {
    position: absolute;
    inset: auto 0 0;
    padding: 24px;
    color: var(--white);
    background: linear-gradient(transparent, rgba(0,0,0,.84));
}
.project-card h3,
.project-card p { color: var(--white); }
.project-card span {
    color: var(--red);
    font-weight: 900;
}
.cta-band {
    color: var(--white);
    background: var(--red);
}
.cta-band h2,
.cta-band p { color: var(--white); }
.cta-band .button {
    background: #1e1e1e;
    border-color: #1e1e1e;
}
.testimonial-card img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 18px;
}
.testimonial-card span {
    color: var(--red);
    font-weight: 800;
}
.team-section {
    align-items: center;
}
.team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
}
.team-grid article {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    color: var(--white);
    background: #111;
}
.team-grid img {
    width: 100%;
    height: 430px;
    object-fit: cover;
    opacity: .76;
}
.team-grid h3,
.team-grid p {
    position: relative;
    z-index: 1;
    margin-left: 22px;
    color: var(--white);
}
.team-grid h3 { margin-top: -95px; }
.coverage {
    max-width: 1180px;
    margin: 0 auto;
}
.districts {
    columns: 2;
    column-gap: 46px;
    margin: 28px 0;
}
.districts p { break-inside: avoid; margin-bottom: 8px; }

.site-footer {
    background: #151515;
    color: var(--white);
}
.footer-grid {
    padding: 70px clamp(24px, 6vw, 96px);
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
.footer-grid img { width: 210px; margin-bottom: 18px; }
.footer-grid h2 {
    color: var(--white);
    font-size: 22px;
}
.footer-grid p,
.footer-grid a {
    display: block;
    color: #d5d5d5;
}
.footer-grid a { margin: 8px 0; }
.copyright {
    margin: 0;
    padding: 18px clamp(24px, 6vw, 96px);
    border-top: 1px solid rgba(255,255,255,.12);
    color: #d5d5d5;
}

.service-hero,
.page-hero {
    padding: 110px clamp(24px, 6vw, 96px);
    color: var(--white);
    background: #171717;
}
.service-hero h1,
.page-hero h1 {
    max-width: 920px;
    margin: 0;
    color: var(--white);
    font-size: clamp(42px, 6vw, 82px);
    line-height: 1;
}
.article-wrap,
.contact-grid { display: grid; grid-template-columns: 280px 1fr; gap: 42px; }
.toc,
.article-content,
.contact-card,
.legal-copy { padding: 30px; }
.toc { align-self: start; position: sticky; top: 20px; }
.article-content h2 { font-size: 34px; }
.contact-grid a { color: var(--red); font-weight: 900; }

@media (max-width: 1040px) {
    .topbar {
        display: none;
    }
    .main-nav {
        min-height: 92px;
    }
    .brand img {
        width: 210px;
    }
    .nav-toggle {
        display: block;
    }
    .primary-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 40;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 14px 26px;
        background: #181818;
        max-height: calc(100vh - 92px);
        overflow-y: auto;
    }
    .primary-menu.is-open { display: flex; }
    .primary-menu a,
    .menu-item button {
        display: block;
        width: 100%;
        padding: 12px 0;
        white-space: normal;
        text-align: left;
        line-height: 1.3;
    }
    .submenu a {
        padding: 10px 16px;
        line-height: 1.35;
    }
    .search-toggle {
        justify-content: flex-start;
        width: 100%;
        height: 48px;
    }
    .submenu {
        position: static;
        display: block;
        min-width: 0;
        box-shadow: none;
        background: #202020;
    }
    .hero {
        min-height: 640px;
        background-position: 58% top;
    }
    .quick-actions { display: grid; }
    .intro-section,
    .trust,
    .team-section,
    .footer-grid,
    .article-wrap,
    .contact-grid { grid-template-columns: 1fr; }
    .service-grid,
    .project-grid,
    .testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .button {
        min-height: 54px;
        white-space: normal;
    }
}

@media (max-width: 1040px) {
    .stats {
        justify-self: start;
        min-width: 0;
    }
    .stats strong {
        min-width: 112px;
        text-align: left;
    }
}

@media (max-width: 680px) {
    .main-nav { padding: 0 22px; }
    .brand img { width: 176px; }
    .hero {
        min-height: 382px;
        align-items: flex-start;
        padding: 38px 22px 32px;
        background-position: 55% top;
    }
    .eyebrow {
        font-size: 13px;
        letter-spacing: 4px;
        line-height: 1.45;
    }
    .hero h1 {
        font-size: clamp(40px, 13vw, 48px);
    }
    .hero p {
        font-size: 16px;
        max-width: 320px;
    }
    .hero .button { display: none; }
    .search-modal {
        padding: 24px;
    }
    .search-close {
        top: 18px;
        right: 18px;
    }
    .search-field {
        grid-template-columns: 1fr 56px;
    }
    .search-field input {
        height: 68px;
    }
    .intro-section,
    .offer,
    .trust,
    .projects,
    .cta-band,
    .testimonials,
    .team-section,
    .coverage,
    .article-wrap,
    .contact-grid,
    .legal-copy {
        padding: 56px 22px;
    }
    h2 {
        font-size: clamp(30px, 9.5vw, 36px);
        line-height: 1.1;
    }
    h3 { font-size: 20px; }
    .partners,
    .service-grid,
    .project-grid,
    .testimonial-grid,
    .team-grid { grid-template-columns: 1fr; }
    .partners { text-align: center; }
    .partners strong { font-size: 20px; }
    .service-card,
    .testimonial-card { padding: 24px 20px; }
    .project-card div { padding: 22px 18px; }
    .stats {
        grid-template-columns: minmax(84px, auto) minmax(0, 1fr);
        gap: 12px 14px;
    }
    .stats strong {
        min-width: 84px;
        font-size: 42px;
    }
    .stats span { line-height: 1.25; }
    .search-form label {
        letter-spacing: 5px;
    }
    .search-field {
        grid-template-columns: 1fr 48px;
    }
    .search-field input {
        font-size: clamp(24px, 8vw, 34px);
    }
    .search-field button svg {
        width: 38px;
        height: 38px;
    }
    .footer-grid h2 { font-size: 21px; }
    .districts { columns: 1; }
}