:root{
                --g:#061b12;
                --g2:#0d3923;
                --g3:#236b3c;
                --o:#ff4d24;
                --c:#f1eee3;
                --ink:#102019;
                --m:#b9c9bd
            }
            *{
                box-sizing:border-box;
                margin:0;
                padding:0
            }
            body{
                font-family:"DM Sans",sans-serif;
                background:var(--g);
                color:#fff;
                line-height:1.6
            }
            a{
                text-decoration:none;
                color:inherit
            }
            .wrap{
                width:min(1180px,92%);
                margin:auto
            }
            header{
                position:absolute;
                top:0;
                left:0;
                right:0;
                z-index:5
            }
            nav{
                height:92px;
                display:flex;
                align-items:center;
                justify-content:space-between;
                border-bottom:1px solid #ffffff1a
            }
            .logo{
                width:145px;
                filter:brightness(0) invert(1)
            }
            .nav{
                display:flex;
                gap:28px;
                align-items:center;
                font-weight:700;
                font-size:14px
            }
            .nav a{
                opacity:.85
            }
            .nav a:hover{
                opacity:1
            }
            .nav .cta{
                background:var(--o);
                padding:11px 17px;
                border-radius:8px;
                opacity:1
            }
            .eyebrow{
                display:inline-flex;
                gap:9px;
                align-items:center;
                font-size:12px;
                font-weight:900;
                letter-spacing:.14em;
                text-transform:uppercase
            }
            .eyebrow:before{
                content:"";
                width:30px;
                height:3px;
                background:var(--o);
                border-radius:5px
            }
            .hero{
                min-height:780px;
                background:radial-gradient(circle at 80% 30%,#236b3c55,transparent 30%),linear-gradient(135deg,#04150d,#0d3923 65%,#236b3c);
                position:relative;
                overflow:hidden
            }
            .hero:after{
                content:"";
                position:absolute;
                width:560px;
                height:560px;
                right:-300px;
                bottom:-300px;
                border:75px solid var(--o);
                border-radius:50%;
                opacity:.15
            }
            .heroGrid{
                min-height:780px;
                padding-top:90px;
                display:grid;
                grid-template-columns:1fr .9fr;
                gap:65px;
                align-items:center;
                position:relative;
                z-index:2
            }
            .hero h1{
                font:800 clamp(3.5rem,7vw,6.5rem)/.92 Manrope,sans-serif;
                letter-spacing:-.065em;
                margin-top:22px
            }
            .hero h1 span{
                color:var(--o)
            }
            .lead{
                max-width:610px;
                color:#d3dfd7;
                font-size:17px;
                margin-top:25px
            }
            .actions{
                display:flex;
                gap:12px;
                margin-top:30px;
                flex-wrap:wrap
            }
            .btn{
                display:inline-flex;
                padding:15px 21px;
                border-radius:10px;
                font-weight:800;
                transition:.25s
            }
            .orange{
                background:var(--o);
                box-shadow:0 12px 30px #ff4d242e
            }
            .orange:hover{
                transform:translateY(-3px);
                background:#ff633e
            }
            .ghost{
                border:1px solid #ffffff33;
                background:#ffffff0a
            }
            .ghost:hover{
                background:#ffffff17;
                transform:translateY(-3px)
            }
            .heroImg{
                height:500px;
                border-radius:28px;
                background:linear-gradient(#03140c22,#03140cd9),url("https://www.safetwork.de/pix/fassadenreinigung.jpg") center/cover;
                box-shadow:0 30px 90px #0006;
                position:relative
            }
            .heroCard{
                position:absolute;
                left:-28px;
                bottom:25px;
                width:275px;
                padding:22px;
                border:1px solid #ffffff22;
                border-radius:16px;
                background:#061b12e8;
                backdrop-filter:blur(12px)
            }
            .heroCard b{
                display:block;
                color:var(--o);
                font:800 42px/1 Manrope
            }
            .heroCard strong{
                display:block;
                margin-top:7px;
                font:800 20px/1.1 Manrope
            }
            .heroCard p{
                color:#bdcbc1;
                font-size:13px;
                margin-top:7px
            }
            .section{
                padding:110px 0
            }
            .cream{
                background:var(--c);
                color:var(--ink)
            }
            .head{
                max-width:800px;
                margin-bottom:50px
            }
            .head h2{
                font:800 clamp(2.5rem,5vw,4.5rem)/1 Manrope;
                letter-spacing:-.055em;
                margin-top:17px
            }
            .head p{
                color:#5b675f;
                margin-top:18px
            }
            .grid9{
                display:grid;
                grid-template-columns:repeat(3,1fr);
                gap:16px
            }
            .card{
                min-height:205px;
                padding:27px;
                border-radius:18px;
                background:#e4e0d2;
                border:1px solid #d5cfbe;
                transition:.3s;
                overflow:hidden
            }
            .card:hover{
                transform:translateY(-7px);
                background:#e9e5d9
            }
            .num{
                font:800 3.5rem/1 Manrope;
                color:#236b3c26
            }
            .card h3{
                font:800 20px/1.12 Manrope;
                margin-top:18px;
                letter-spacing:-.025em
            }
            .card p{
                color:#647068;
                font-size:13px;
                margin-top:8px
            }
            .approach{
                padding:115px 0;
                background:var(--g)
            }
            .approachTop{
                display:flex;
                justify-content:space-between;
                gap:40px;
                align-items:end;
                margin-bottom:60px
            }
            .approachTop h2{
                font:800 clamp(2.5rem,5vw,4.6rem)/.98 Manrope;
                letter-spacing:-.055em;
                margin-top:17px
            }
            .approachTop p{
                max-width:350px;
                color:var(--m)
            }
            .timeline{
                display:grid;
                grid-template-columns:repeat(7,1fr);
                position:relative
            }
            .line{
                position:absolute;
                top:38px;
                left:6%;
                right:6%;
                height:1px;
                background:#ffffff2b
            }
            .progress{
                position:absolute;
                top:38px;
                left:6%;
                width:0;
                height:2px;
                background:var(--o)
            }
            .step{
                text-align:center;
                position:relative;
                z-index:1
            }
            .dot{
                width:76px;
                height:76px;
                margin:auto;
                border-radius:50%;
                display:grid;
                place-items:center;
                border:1px solid #ffffff33;
                background:var(--g);
                font:800 17px Manrope;
                transition:.3s
            }
            .step:hover .dot{
                background:var(--o);
                border-color:var(--o);
                transform:scale(1.08)
            }
            .step h3{
                font:800 16px Manrope;
                margin-top:19px
            }
            .step p{
                color:#93a59a;
                font-size:12px;
                max-width:135px;
                margin:7px auto 0
            }
            .outcomes{
                background:var(--g3);
                padding:110px 0
            }
            .outGrid{
                display:grid;
                grid-template-columns:1fr 1fr;
                gap:80px;
                align-items:center
            }
            .outGrid h2{
                font:800 clamp(2.5rem,5vw,4.5rem)/.98 Manrope;
                letter-spacing:-.055em;
                margin-top:17px
            }
            .outGrid>div>p{
                color:#d0ddd4;
                max-width:570px;
                margin-top:20px
            }
            .outList{
                display:grid;
                gap:12px
            }
            .out{
                display:flex;
                gap:15px;
                align-items:center;
                padding:19px;
                border-radius:15px;
                background:#04190f55;
                border:1px solid #ffffff1f;
                transition:.3s
            }
            .out:hover{
                transform:translateX(6px);
                border-color:#ff4d2466
            }
            .out i{
                font-style:normal;
                flex:0 0 42px;
                height:42px;
                border-radius:50%;
                display:grid;
                place-items:center;
                background:var(--o);
                font-weight:900
            }
            .out strong{
                font:800 15px Manrope
            }
            .out span{
                display:block;
                color:#aebfb4;
                font-size:12px
            }
            .ctaSec{
                padding:100px 0;
                background:#06150d
            }
            .ctaBox{
                padding:60px;
                border-radius:28px;
                background:linear-gradient(120deg,#174f2c,#236b3c);
                position:relative;
                overflow:hidden
            }
            .ctaBox:after{
                content:"";
                position:absolute;
                width:430px;
                height:430px;
                right:-190px;
                top:-240px;
                border:65px solid var(--o);
                border-radius:50%;
                opacity:.9
            }
            .ctaBox h2{
                font:800 clamp(2.5rem,5vw,4.5rem)/.98 Manrope;
                max-width:720px;
                letter-spacing:-.055em;
                margin-top:17px
            }
            .ctaBox p{
                color:#d5e0d8;
                max-width:610px;
                margin:18px 0 28px
            }
            footer{
                background:#06130c;
                border-top:1px solid #ffffff1a;
                padding:65px 0 25px
            }
            .foot{
                display:grid;
                grid-template-columns:1.4fr 1fr 1fr 1fr;
                gap:40px
            }
            .foot h4{
                font:800 15px Manrope;
                margin-bottom:14px
            }
            .foot p,.foot a{
                color:#9fac9f;
                font-size:13px
            }
            .links{
                display:grid;
                gap:8px
            }
            .bottom{
                margin-top:45px;
                padding-top:18px;
                border-top:1px solid #ffffff1a;
                display:flex;
                justify-content:space-between;
                color:#728077;
                font-size:11px
            }
            .reveal{
                opacity:0;
                transform:translateY(40px)
            }
            .left{
                opacity:0;
                transform:translateX(-45px)
            }
            .right{
                opacity:0;
                transform:translateX(45px)
            }
            @media(max-width:900px){
                .heroGrid,.outGrid{
                    grid-template-columns:1fr
                }
                .heroGrid{
                    padding:130px 0 80px
                }
                .hero{
                    min-height:auto
                }
                .heroImg{
                    height:440px
                }
                .grid9{
                    grid-template-columns:1fr 1fr
                }
                .timeline{
                    grid-template-columns:1fr;
                    gap:24px
                }
                .line,.progress{
                    display:none
                }
                .step{
                    display:grid;
                    grid-template-columns:76px 1fr;
                    text-align:left;
                    gap:18px;
                    align-items:center
                }
                .step h3{
                    margin:0
                }
                .step p{
                    max-width:none;
                    margin:5px 0
                }
                .foot{
                    grid-template-columns:1fr 1fr
                }
            }
            @media(max-width:600px){
                .nav{
                    display:none
                }
                .hero h1{
                    font-size:3.45rem
                }
                .heroImg{
                    height:370px
                }
                .heroCard{
                    left:10px
                }
                .grid9{
                    grid-template-columns:1fr
                }
                .section,.approach,.outcomes{
                    padding:75px 0
                }
                .ctaBox{
                    padding:40px 27px
                }
                .foot{
                    grid-template-columns:1fr
                }
                .bottom{
                    flex-direction:column;
                    gap:8px
                }
            }