:root{
    --g:#061b12;
    --g2:#0d3923;
    --g3:#236b3c;
    --o:#ff4d24;
    --cream:#f1eee3;
    --ink:#102019;
    --muted:#b8c8bd;
    --line:rgba(255,255,255,.13)
}
*{
    box-sizing:border-box;
    margin:0;
    padding:0
}
html{
    scroll-behavior:auto
}
body{
    font-family:"DM Sans",Arial,sans-serif;
    background:var(--g);
    color:#fff;
    line-height:1.6;
    overflow-x:hidden
}
a{
    text-decoration:none;
    color:inherit
}
img{
    max-width:100%;
    display:block
}
.container{
    width:min(1180px,92%);
    margin:auto
}
.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:.76rem;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase
}
.eyebrow:before{
    content:"";
    width:28px;
    height:3px;
    background:var(--o);
    border-radius:5px
}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:15px 22px;
    border-radius:10px;
    font-weight:800;
    border:1px solid transparent;
    transition:.25s
}
.btn-orange{
    background:var(--o);
    box-shadow:0 12px 30px rgba(255,77,36,.18)
}
.btn-orange:hover{
    background:#ff633e;
    transform:translateY(-3px)
}
.btn-ghost{
    border-color:rgba(255,255,255,.22);
    background:rgba(255,255,255,.04)
}
.btn-ghost:hover{
    background:rgba(255,255,255,.09);
    transform:translateY(-3px)
}
header{
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:50
}
nav{
    height:92px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,.1)
}
.brand img{
    width:145px;
    filter:brightness(1) invert(0)
}
.navlinks{
    display:flex;
    gap:30px;
    align-items:center;
    font-weight:700;
    font-size:.92rem
}
.navlinks a{
    opacity:.82
}
.navlinks a:hover{
    opacity:1
}
.nav-cta{
    padding:11px 17px;
    border-radius:8px;
    background:var(--o);
    opacity:1!important
}
.menu{
    display:none;
    background:none;
    border:0;
    color:#fff;
    font-size:25px
}
.hero{
    min-height:850px;
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#04150d 0%,#0d3923 62%,#236b3c 100%)
}
.hero:before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.06;
    background-image:radial-gradient(#fff 1px,transparent 1px);
    background-size:22px 22px
}
.hero-inner{
    min-height:850px;
    display:grid;
    grid-template-columns:1.03fr .97fr;
    gap:60px;
    align-items:center;
    padding-top:90px;
    position:relative;
    z-index:2
}
.hero-copy{
    max-width:660px
}
.hero h1{
    font:800 clamp(3.5rem,7vw,6.7rem)/.91 "Manrope",sans-serif;
    letter-spacing:-.065em;
    margin:22px 0 26px
}
.hero h1 span{
    color:var(--o)
}
.hero p{
    font-size:1.13rem;
    color:#d7e0d9;
    max-width:590px
}
.hero-actions{
    display:flex;
    gap:13px;
    margin-top:34px;
    flex-wrap:wrap
}
.trust-row{
    display:flex;
    align-items:center;
    gap:25px;
    margin-top:46px;
    color:#dce5df;
    font-size:.9rem
}
.trust-row strong{
    font-size:1.4rem;
    color:#fff;
    display:block;
    line-height:1
}
.trust-divider{
    height:38px;
    width:1px;
    background:rgba(255,255,255,.18)
}
.hero-visual{
    position:relative;
    height:570px
}
.hero-photo{
    position:absolute;
    right:0;
    top:20px;
    width:88%;
    height:510px;
    border-radius:28px;
    background:url("./assets/main-box-1.jpg") center/cover;
    box-shadow:0 24px 70px rgba(0,0,0,.28);
    overflow:hidden
}
.hero-photo:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 42%,rgba(6,28,17,.78))
}
.hero-photo:before{
    content:"";
    position:absolute;
    left:-110px;
    bottom:-130px;
    width:420px;
    height:420px;
    border-radius:50%;
    border:60px solid var(--o);
    z-index:1
}
.hero-tag{
    position:absolute;
    z-index:3;
    left:-10px;
    bottom:35px;
    background:var(--cream);
    color:var(--ink);
    padding:22px 25px;
    border-radius:14px;
    box-shadow:0 24px 70px rgba(0,0,0,.28);
    max-width:270px
}
.hero-tag b{
    font:800 1.45rem/1.1 "Manrope";
    display:block
}
.hero-tag small{
    display:block;
    margin-top:7px;
    color:#516157
}
.marquee{
    background:var(--o);
    color:#1d2a21;
    overflow:hidden
}
.marquee-track{
    display:flex;
    gap:38px;
    white-space:nowrap;
    padding:15px 0;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:.78rem;
    width:max-content
}
.marquee-track i{
    font-style:normal;
    opacity:.45
}
.section{
    padding:110px 0
}
.about{
    background:var(--cream);
    color:var(--ink)
}
.about-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:70px;
    align-items:center
}
.about-card{
    min-height:520px;
    border-radius:28px;
    overflow:hidden;
    position:relative;
    background:url("https://www.safetwork.de/pix/fassadenreinigung.jpg") center/cover;
    box-shadow:0 24px 70px rgba(0,0,0,.28)
}
.about-card:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(160deg,rgba(17,73,40,.05),rgba(9,29,18,.82))
}
.about-badge{
    position:absolute;
    z-index:2;
    right:22px;
    top:22px;
    background:var(--o);
    border-radius:14px;
    padding:15px 18px;
    font-weight:800
}
.about-bottom{
    position:absolute;
    z-index:2;
    bottom:25px;
    left:25px;
    right:25px
}
.about-bottom h3{
    font:800 2rem/1.05 "Manrope"
}
.about-bottom p{
    margin-top:9px;
    color:#dbe3dd
}
.about-content h3{
    font:800 2.4rem/1.05 "Manrope";
    letter-spacing:-.04em
}
.about-content p{
    color:#526057;
    margin:18px 0
}
.about-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:13px;
    margin:28px 0
}
.about-list div{
    padding:15px;
    border-radius:12px;
    background:#e5e0d1;
    font-weight:700
}
.about-list span{
    color:var(--o);
    margin-right:7px
}
.iso-row{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:28px
}
.iso{
    min-width:145px;
    border:1px solid #d3ccba;
    background:#f8f5ea;
    border-radius:12px;
    padding:14px;
    text-align:center;
    font-weight:800;
    font-size:.82rem
}
.iso b{
    display:block;
    color:var(--g3);
    font-size:1.1rem
}
.services{
    background:#061b12
}
.section-head{
    max-width:760px;
    margin-bottom:48px
}
.section-head h2{
    font:800 clamp(2.2rem,5vw,4rem)/1.02 "Manrope";
    letter-spacing:-.045em;
    margin-top:18px
}
.section-head p{
    color:var(--muted);
    margin-top:18px;
    font-size:1.05rem
}
.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
.service{
    min-height:410px;
    border-radius:20px;
    overflow:hidden;
    position:relative;
    border:1px solid var(--line);
    isolation:isolate;
    transition:border-color .35s
}
.service:hover{
    border-color:rgba(255,77,36,.5)
}
.service-img{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    z-index:-2;
    transform:scale(1.01);
    transition:transform .7s
}
.service:hover .service-img{
    transform:scale(1.06)
}
.service:after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(180deg,rgba(7,28,17,.03) 15%,rgba(5,22,13,.95) 90%)
}
.service-content{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:27px
}
.service-num{
    display:inline-flex;
    width:38px;
    height:38px;
    border-radius:50%;
    align-items:center;
    justify-content:center;
    background:var(--o);
    font-weight:900;
    font-size:.82rem;
    margin-bottom:17px
}
.service h3{
    font:800 1.45rem/1.1 "Manrope"
}
.service p{
    color:#c1cbc3;
    font-size:.91rem;
    margin-top:10px
}
.service-arrow{
    position:absolute;
    right:24px;
    bottom:28px;
    width:38px;
    height:38px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:50%;
    display:grid;
    place-items:center;
    transition:.3s
}
.service:hover .service-arrow{
    transform:translate(4px,-4px) rotate(8deg);
    background:rgba(255,77,36,.2)
}
.standards{
    background:var(--g3)
}
.standards-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center
}
.standards h2{
    font:800 clamp(2.5rem,5vw,4.5rem)/.98 "Manrope";
    letter-spacing:-.05em
}
.standards p{
    color:#d2ded6;
    margin-top:20px;
    max-width:560px
}
.standards-panel{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px
}
.standard-box{
    padding:28px;
    border-radius:18px;
    background:rgba(4,26,15,.32);
    border:1px solid rgba(255,255,255,.12)
}
.standard-box b{
    font:800 2rem "Manrope"
}
.standard-box span{
    display:block;
    color:#b9c9bd;
    margin-top:3px;
    font-size:.9rem
}
.process{
    background:var(--cream);
    color:var(--ink)
}
.process-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
.step{
    padding:30px;
    border-radius:18px;
    background:#e3dfd1;
    border:1px solid #d7d0be;
    overflow:hidden
}
.step-num{
    font:800 4rem/1 "Manrope";
    color:rgba(35,107,60,.18)
}
.step h3{
    font:800 1.3rem "Manrope";
    margin-top:14px
}
.step p{
    color:#5b665e;
    margin-top:9px
}
.cta{
    background:#06150d;
    padding:100px 0
}
.cta-box{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    padding:65px;
    background:linear-gradient(120deg,#174f2c,#236b3c);
    border:1px solid rgba(255,255,255,.12)
}
.cta-box:after{
    content:"";
    position:absolute;
    width:430px;
    height:430px;
    border:65px solid var(--o);
    border-radius:50%;
    right:-180px;
    top:-220px
}
.cta-box h2{
    font:800 clamp(2.4rem,5vw,4.5rem)/.98 "Manrope";
    letter-spacing:-.05em;
    max-width:700px
}
.cta-box p{
    color:#d6e1d9;
    max-width:620px;
    margin:17px 0 28px
}
footer{
    background:#06130c;
    border-top:1px solid var(--line);
    padding:70px 0 25px
}
.footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:45px
}
.footer-logo{
    width:150px;
    filter:brightness(0) invert(1)
}
footer p,footer a{
    color:#9fac9f;
    font-size:.91rem
}
footer h4{
    font:800 1rem "Manrope";
    margin-bottom:16px
}
.footer-links{
    display:grid;
    gap:9px
}
.contact-line{
    margin:8px 0
}
.bottom{
    margin-top:50px;
    padding-top:20px;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    color:#728077;
    font-size:.8rem
}
.loader{
    position:fixed;
    inset:0;
    background:var(--g);
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center
}
.loader-inner{
    width:min(360px,75%)
}
.loader-logo{
    width:160px;
    margin:0 auto 22px;
    filter:brightness(0) invert(1)
}
.loader-bar{
    height:3px;
    background:rgba(255,255,255,.12);
    overflow:hidden
}
.loader-progress{
    height:100%;
    width:0;
    background:var(--o)
}
.reveal{
    opacity:0;
    transform:translateY(38px)
}
.reveal-left{
    opacity:0;
    transform:translateX(-45px)
}
.reveal-right{
    opacity:0;
    transform:translateX(45px)
}
@media(max-width:900px){
    .navlinks{
        display:none;
        position:absolute;
        top:82px;
        left:4%;
        right:4%;
        background:#0b2618;
        border:1px solid var(--line);
        padding:20px;
        border-radius:14px;
        flex-direction:column;
        align-items:stretch
    }
    .navlinks.open{
        display:flex
    }
    .nav-cta{
        text-align:center
    }
    .menu{
        display:block
    }
    .hero-inner,.about-grid,.standards-grid{
        grid-template-columns:1fr
    }
    .hero{
        min-height:auto
    }
    .hero-inner{
        padding:130px 0 80px
    }
    .hero-visual{
        height:500px
    }
    .services-grid{
        grid-template-columns:1fr 1fr
    }
    .process-grid{
        grid-template-columns:1fr
    }
    .footer-grid{
        grid-template-columns:1fr 1fr
    }
}
@media(max-width:600px){
    .section{
        padding:75px 0
    }
    .hero h1{
        font-size:3.45rem
    }
    .hero-visual{
        height:400px
    }
    .hero-photo{
        height:365px;
        width:92%
    }
    .hero-tag{
        left:0;
        bottom:5px
    }
    .trust-row{
        gap:13px;
        flex-wrap:wrap
    }
    .about-list,.standards-panel,.services-grid,.footer-grid{
        grid-template-columns:1fr
    }
    .cta-box{
        padding:38px 27px
    }
    .bottom{
        flex-direction:column
    }
    .brand img{
        width:125px
    }
}

.service-hero{
    min-height:760px;
    background:linear-gradient(120deg,#04150d,#0d3923 60%,#236b3c);
    position:relative;
    overflow:hidden
}
.service-hero:before{
    content:"";
    position:absolute;
    right:-130px;
    top:100px;
    width:520px;
    height:520px;
    border:80px solid var(--o);
    border-radius:50%;
    opacity:.18
}
.service-grid{
    min-height:700px;
    display:grid;
    grid-template-columns:1fr .9fr;
    gap:70px;
    align-items:center;
    padding-top:90px;
    position:relative;
    z-index:2
}
.crumb{
    font-size:.82rem;
    color:#aebeb3;
    margin-bottom:18px
}
.crumb span{
    color:var(--o);
    font-weight:800
}
.big-number{
    font:800 clamp(6rem,12vw,12rem)/.75 "Manrope";
    color:rgba(255,255,255,.06);
    letter-spacing:-.08em;
    margin-bottom:-30px
}
.service-grid h1{
    font:800 clamp(3.2rem,6vw,6rem)/.92 "Manrope";
    letter-spacing:-.065em
}
.service-grid h1 em{
    font-style:normal;
    color:var(--o)
}
.lead{
    font-size:1.1rem;
    color:#d4dfd7;
    max-width:600px;
    margin-top:25px
}
.service-actions{
    display:flex;
    gap:12px;
    margin-top:30px;
    flex-wrap:wrap
}
.service-visual{
    height:520px;
    border-radius:28px;
    overflow:hidden;
    background:center/cover;
    box-shadow:0 30px 80px rgba(0,0,0,.35);
    position:relative
}
.service-visual:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 35%,rgba(3,20,12,.8))
}
.visual-label{
    position:absolute;
    z-index:3;
    bottom:25px;
    left:25px;
    right:25px;
    padding:20px;
    border-radius:13px;
    background:rgba(4,20,12,.72);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.15)
}
.visual-label strong{
    font:800 1.15rem "Manrope";
    display:block
}
.visual-label span{
    color:#c4d0c7;
    font-size:.88rem
}
.detail{
    background:var(--cream);
    color:var(--ink);
    padding:110px 0
}
.detail-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:75px;
    align-items:start
}
.detail h2{
    font:800 clamp(2.5rem,4vw,4rem)/1.02 "Manrope";
    letter-spacing:-.05em;
    margin-top:17px
}
.detail-intro{
    font-size:1.08rem;
    color:#536159;
    margin-top:20px
}
.inclusions{
    margin-top:35px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
}
.inclusion{
    padding:17px 18px;
    background:#e3dfd1;
    border:1px solid #d7d0be;
    border-radius:11px;
    font-weight:800
}
.inclusion span{
    color:var(--o);
    margin-right:8px
}
.side-card{
    background:var(--g);
    color:#fff;
    border-radius:24px;
    padding:36px;
    position:sticky;
    top:25px
}
.side-card h3{
    font:800 1.7rem "Manrope"
}
.side-card p{
    color:#bdcabe;
    margin-top:10px
}
.side-list{
    list-style:none;
    margin-top:25px;
    border-top:1px solid var(--line)
}
.side-list li{
    padding:13px 0;
    border-bottom:1px solid var(--line);
    color:#d9e1db
}
.side-list li:before{
    content:"✓";
    color:var(--o);
    font-weight:900;
    margin-right:10px
}
.next-service{
    background:#06150d;
    padding:80px 0
}
.next-box{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    padding:35px;
    border:1px solid var(--line);
    border-radius:20px;
    background:rgba(255,255,255,.04)
}
.next-box small{
    color:var(--o);
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.12em
}
.next-box h3{
    font:800 2rem "Manrope";
    margin-top:5px
}
@media(max-width:900px){
    .service-grid,.detail-grid{
        grid-template-columns:1fr
    }
    .service-hero{
        min-height:auto
    }
    .service-grid{
        padding:130px 0 80px
    }
    .service-visual{
        height:420px
    }
    .side-card{
        position:static
    }
    .footer-grid{
        grid-template-columns:1fr 1fr
    }
}
@media(max-width:600px){
    .service-grid h1{
        font-size:3.35rem
    }
    .inclusions{
        grid-template-columns:1fr
    }
    .next-box{
        flex-direction:column;
        align-items:flex-start
    }
    .detail{
        padding:75px 0
    }
}