/* =========================================================
   LOKALE SCHRIFTARTEN
========================================================= */

@font-face{
    font-family:"Manrope";
    src:url("assets/fonts/Manrope-Regular.woff2") format("woff2");
    font-style:normal;
    font-weight:400;
    font-display:swap;
}

@font-face{
    font-family:"Manrope";
    src:url("assets/fonts/Manrope-Medium.woff2") format("woff2");
    font-style:normal;
    font-weight:500;
    font-display:swap;
}

@font-face{
    font-family:"Manrope";
    src:url("assets/fonts/Manrope-SemiBold.woff2") format("woff2");
    font-style:normal;
    font-weight:600;
    font-display:swap;
}

@font-face{
    font-family:"Manrope";
    src:url("assets/fonts/Manrope-Bold.woff2") format("woff2");
    font-style:normal;
    font-weight:700;
    font-display:swap;
}

@font-face{
    font-family:"Manrope";
    src:url("assets/fonts/Manrope-ExtraBold.woff2") format("woff2");
    font-style:normal;
    font-weight:800;
    font-display:swap;
}

@font-face{
    font-family:"Montserrat";
    src:url("assets/fonts/Montserrat-ExtraLight.woff2?v=2") format("woff2");
    font-style:normal;
    font-weight:200;
    font-display:swap;
}

@font-face{
    font-family:"Montserrat";
    src:url("assets/fonts/Montserrat-Light.woff2") format("woff2");
    font-style:normal;
    font-weight:300;
    font-display:swap;
}

@font-face{
    font-family:"Montserrat";
    src:url("assets/fonts/Montserrat-Regular.woff2") format("woff2");
    font-style:normal;
    font-weight:400;
    font-display:swap;
}

@font-face{
    font-family:"Montserrat";
    src:url("assets/fonts/Montserrat-Medium.woff2") format("woff2");
    font-style:normal;
    font-weight:500;
    font-display:swap;
}

:root{
    --navy:#041a27;
    --navy2:#082738;
    --gold:#c09d68;
    --cream:#ddcda4;
    --white:#f7f5ef;
    --ink:#10232d;
    --muted:#78868c;
    --line:rgba(4,26,39,.14);
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:Manrope,Arial,sans-serif;
    color:var(--ink);
    background:#f7f5ef;
}

img{
    max-width:100%;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
textarea{
    font:inherit;
}

#leistungen,
#projekte,
#ueber-uns,
#faq,
#kontakt{
    scroll-margin-top:100px;
}


/* =========================================================
   HEADER
========================================================= */

.site-header{
    position:fixed;
    top:0;
    left:0;
    z-index:1000;
    width:100%;
    height:100px;
    display:flex;
    align-items:center;
    padding:0 5vw;
    color:#fff;
    background:transparent;
    border-bottom:1px solid rgba(255,255,255,.13);
    transition:
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        height .3s ease;
}

.site-header.scrolled{
    background:rgba(4,26,39,.97);
    border-bottom-color:rgba(192,157,104,.18);
    box-shadow:0 8px 30px rgba(0,0,0,.12);
}

.header-brand{
    display:flex;
    align-items:center;
    width:235px;
    flex-shrink:0;
}

.header-brand img{
    display:block;
    width:100%;
    height:auto;
}


/* =========================================================
   NAVIGATION
========================================================= */

.nav{
    display:flex;
    align-items:center;
    gap:34px;
    margin-left:auto;
    font-size:13px;
    font-weight:600;
}

.nav a{
    position:relative;
    padding:8px 0;
    opacity:.85;
    transition:opacity .2s ease;
}

.nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:1px;
    background:var(--gold);
    transition:width .25s ease;
}

.nav a:hover{
    opacity:1;
}

.nav a:hover::after{
    width:100%;
}

.menu-btn{
    display:none;
}


/* =========================================================
   HERO
========================================================= */

.hero{
    position:relative;
    min-height:790px;
    height:100vh;
    overflow:hidden;
    display:flex;
    align-items:center;
    padding:130px 8vw 100px;
    background:var(--navy);
    color:#fff;
}

.hero-brand-slogan{
    position:absolute;
    left:6.5vw;
    top:120px;
    z-index:5;
    width:520px;
    height:60px;
    overflow:hidden;
    animation:
        sloganReveal
        2.6s
        cubic-bezier(.77,0,.18,1)
        .35s
        both;
}

.hero-brand-slogan img{
    position:absolute;
    left:0;
    top:-250px;
    width:520px;
    height:520px;
    max-width:none;
    object-fit:contain;
}

@keyframes sloganReveal{
    0%{
        clip-path:inset(0 100% 0 0);
        opacity:0;
        transform:translateX(-8px);
    }

    10%{
        opacity:1;
    }

    100%{
        clip-path:inset(0 0 0 0);
        opacity:1;
        transform:translateX(0);
    }
}

.hero-copy{
    position:relative;
    z-index:4;
    max-width:780px;
}


/* =========================================================
   TYPOGRAFIE
========================================================= */

.hero h1,
.section h2,
.contact h2,
.about-heading h2{
    margin:0;
    font-family:Montserrat,Arial,sans-serif;
    font-weight:200;
    letter-spacing:-.015em;
    line-height:1.08;
}

.hero h1{
    font-size:clamp(60px,6.4vw,96px);
}

.section h2,
.contact h2,
.about-heading h2{
    font-size:clamp(48px,5.4vw,76px);
}

.hero h1 span,
.section h2 span,
.contact h2 span,
.about-heading h2 span{
    color:var(--gold);
    font-weight:200;
}

.section-label{
    margin:0 0 25px;
    color:var(--gold);
    font-size:18px;
    line-height:1;
    font-weight:700;
    letter-spacing:.16em;
}

.hero-text{
    max-width:575px;
    margin:31px 0 33px;
    color:#c7d0d4;
    font-size:16px;
    line-height:1.75;
}


/* =========================================================
   BUTTONS
========================================================= */

.hero-actions,
.contact-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:17px 24px;
    font-size:13px;
    font-weight:800;
    letter-spacing:.03em;
    border:1px solid transparent;
    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}

.btn:hover{
    transform:translateY(-2px);
}

.primary{
    background:var(--gold);
    color:var(--navy);
}

.primary:hover{
    background:var(--cream);
}

.ghost{
    color:#fff;
    border-color:rgba(255,255,255,.3);
}

.ghost:hover{
    border-color:var(--gold);
}


/* =========================================================
   HERO SYMBOL
========================================================= */

.hero-symbol{
    position:absolute;
    right:-55px;
    top:120px;
    z-index:1;
    width:790px;
    height:790px;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
}

.hero-symbol img{
    width:100%;
    height:100%;
    object-fit:contain;
    opacity:.10;
}


/* =========================================================
   ALLGEMEINE SEKTIONEN
========================================================= */

.section{
    position:relative;
    padding:120px 8vw;
}

.section-head{
    position:relative;
    z-index:2;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:50px;
    margin-bottom:65px;
}

.section-head > p{
    max-width:390px;
    margin:0;
    color:#66777f;
    font-size:15px;
    line-height:1.8;
}

.section-symbol{
    position:absolute;
    z-index:0;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
}

.section-symbol img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}


/* =========================================================
   LEISTUNGEN
========================================================= */

.services{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    background:#fff;
    padding-top:105px;
    padding-bottom:115px;
}

.services-symbol{
    left:-35px;
    right:auto;
    top:390px;
    width:790px;
    height:790px;
}

.services-symbol img{
    opacity:.035;
}

.services .section-head,
.services .service-list{
    position:relative;
    z-index:2;
}

.services-head{
    margin-bottom:70px;
}

.service-list{
    border-top:1px solid var(--line);
}

.service-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:190px;
    min-width:190px;
    height:135px;
    overflow:hidden;
}

.service-icon img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    filter:none;
    transition:transform .35s ease;
}

.service{
    display:grid;
    grid-template-columns:190px minmax(0,1fr);
    align-items:center;
    gap:38px;
    min-height:170px;
    padding:18px 20px 18px 0;
    border-bottom:1px solid var(--line);
    transition:
        background .35s ease,
        padding-left .35s ease;
}

.service:hover{
    padding-left:14px;
    background:
        linear-gradient(
            90deg,
            rgba(192,157,104,.07),
            rgba(192,157,104,.018) 60%,
            transparent
        );
}

.service:hover .service-icon img{
    transform:scale(1.035);
}

.service-content{
    min-width:0;
    max-width:950px;
}

.service h3{
    margin:0 0 9px;
    color:var(--ink);
    font-size:27px;
    line-height:1.2;
    font-weight:600;
    letter-spacing:-.02em;
}

.service p{
    max-width:780px;
    margin:0;
    color:#7c898e;
    font-size:14px;
    line-height:1.7;
}


/* =========================================================
   REFERENZEN
========================================================= */

.projects{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    background:#eae7df;
}

.projects-symbol{
    left:auto;
    right:-55px;
    top:50%;
    bottom:auto;
    width:790px;
    height:790px;
    transform:translateY(-50%);
}

.projects-symbol img{
    width:100%;
    height:100%;
    object-fit:contain;
    opacity:.05;
}

.projects .section-head,
.projects .project-grid{
    position:relative;
    z-index:2;
}

.project-grid{
    display:grid;
    grid-template-columns:1.6fr 1fr;
    grid-template-rows:280px 280px;
    gap:16px;
}

.project-placeholder{
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:25px;
    background:var(--navy);
    color:#fff;
}

.project-placeholder::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            135deg,
            transparent 40%,
            rgba(192,157,104,.08)
        );
}

.project-placeholder.large{
    grid-row:1/3;
}

.project-placeholder span{
    position:absolute;
    top:24px;
    left:25px;
    color:var(--gold);
    font-size:10px;
    letter-spacing:.2em;
}

.project-placeholder strong{
    position:relative;
    z-index:2;
    font-size:24px;
}

.project-placeholder small{
    position:relative;
    z-index:2;
    margin-top:5px;
    color:#91a0a7;
}


/* =========================================================
   ÜBER UNS
========================================================= */

.about{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    padding-top:115px;
    padding-bottom:115px;
    background:#f4f2ec;
}

.about-symbol{
    left:-35px;
    right:auto;
    top:40px;
    width:690px;
    height:690px;
}

.about-symbol img{
    opacity:.035;
}

.about-layout{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px;
    align-items:start;
}

.about-content{
    max-width:590px;
    padding-top:46px;
}

.about-content p{
    margin:0 0 19px;
    color:#697980;
    font-size:14px;
    line-height:1.85;
}

.about-content .about-lead{
    margin-bottom:23px;
    color:var(--ink);
    font-size:20px;
    font-weight:500;
    line-height:1.55;
}

.about-location{
    display:flex;
    flex-direction:column;
    gap:7px;
    margin-top:37px;
    padding-top:24px;
    border-top:1px solid var(--line);
}

.about-location span{
    color:var(--gold);
    font-size:10px;
    font-weight:800;
    letter-spacing:.19em;
}

.about-location strong{
    color:var(--navy);
    font-size:16px;
    font-weight:600;
}


/* =========================================================
   VERTRAUEN
========================================================= */

.trust-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;
    margin-top:90px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.trust-item{
    position:relative;
    min-height:210px;
    padding:40px 38px 37px;
    border-right:1px solid var(--line);
    transition:
        background .3s ease,
        transform .3s ease;
}

.trust-item:first-child{
    padding-left:0;
}

.trust-item:last-child{
    border-right:0;
}

.trust-item:hover{
    background:rgba(192,157,104,.07);
    transform:translateY(-3px);
}

.trust-line{
    width:36px;
    height:1px;
    margin-bottom:28px;
    background:var(--gold);
    transition:width .3s ease;
}

.trust-item:hover .trust-line{
    width:58px;
}

.trust-item h3{
    margin:0 0 13px;
    color:var(--navy);
    font-size:19px;
    font-weight:600;
}

.trust-item p{
    max-width:310px;
    margin:0;
    color:#78868c;
    font-size:13px;
    line-height:1.75;
}


/* =========================================================
   SO ARBEITEN WIR
========================================================= */

.process{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    background:#fff;
}

.process-symbol{
    left:auto;
    right:-35px;
    top:-10px;
    width:650px;
    height:650px;
}

.process-symbol img{
    opacity:.035;
}

.process .section-head,
.process .steps{
    position:relative;
    z-index:2;
}

.steps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.step{
    position:relative;
    min-height:190px;
    padding:38px 30px 35px 0;
    border-right:1px solid var(--line);
    transform-origin:center;
    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.step:not(:first-child){
    padding-left:30px;
}

.step:last-child{
    border-right:0;
}

.step:hover{
    z-index:3;
    transform:translateY(-4px) scale(1.025);
    background:rgba(192,157,104,.07);
    box-shadow:0 12px 28px rgba(4,26,39,.06);
}

.step h3{
    margin:0 0 12px;
    font-size:20px;
}

.step p{
    margin:0;
    color:#748188;
    font-size:13px;
    line-height:1.7;
}


/* =========================================================
   FAQ
========================================================= */

.faq{
    position:relative;
    overflow:hidden;
    background:#f4f2ec;
}

.faq-inner{
    position:relative;
    z-index:2;
}

.faq-list{
    border-top:1px solid var(--line);
}

.faq-item{
    position:relative;
    border-bottom:1px solid var(--line);
    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.faq-item:hover{
    z-index:2;
    background:rgba(192,157,104,.07);
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(4,26,39,.035);
}

.faq-item.open{
    background:rgba(192,157,104,.045);
}

.faq-question{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) 42px;
    align-items:center;
    gap:25px;
    padding:27px 0;
    border:0;
    background:transparent;
    color:var(--navy);
    text-align:left;
    cursor:pointer;
}

.faq-title{
    font-size:20px;
    line-height:1.4;
    font-weight:600;
    letter-spacing:-.015em;
    transition:
        transform .3s ease,
        color .3s ease;
}

.faq-item:hover .faq-title{
    transform:translateX(10px);
}

.faq-plus{
    position:relative;
    width:22px;
    height:22px;
    justify-self:end;
    transition:transform .3s ease;
}

.faq-item:hover .faq-plus{
    transform:scale(1.12);
}

.faq-plus::before,
.faq-plus::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:18px;
    height:1px;
    background:var(--gold);
    transform:translate(-50%,-50%);
    transition:
        transform .3s ease,
        width .3s ease;
}

.faq-plus::after{
    transform:translate(-50%,-50%) rotate(90deg);
}

.faq-item:hover .faq-plus::before,
.faq-item:hover .faq-plus::after{
    width:20px;
}

.faq-item.open .faq-plus::after{
    transform:translate(-50%,-50%) rotate(0deg);
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s cubic-bezier(.4,0,.2,1);
}

.faq-answer-inner{
    max-width:850px;
    padding:0 62px 28px 0;
    color:#6f7e84;
    font-size:14px;
    line-height:1.8;
}


/* =========================================================
   KONTAKT
========================================================= */

.contact{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:570px;
    padding:95px 8vw;
    background:var(--gold);
    color:var(--navy);
    text-align:center;
}

.contact-inner{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1150px;
    margin:0 auto;
}

.contact-label{
    color:var(--navy);
}

.contact h2{
    text-align:center;
}

.contact h2 span{
    color:#fff;
}

.contact-text{
    max-width:620px;
    margin:38px auto 32px;
    font-size:16px;
    line-height:1.7;
}

.contact-actions{
    align-items:center;
    justify-content:center;
}

.primary.light{
    min-width:150px;
    background:#041a27;
    color:#fff;
    border:1px solid #041a27;
}

.primary.light:hover{
    background:#fff;
    color:#041a27;
    border-color:#fff;
}

.contact-whatsapp{
    min-width:150px;
    background:#fff;
    color:#041a27;
    border:1px solid #fff;
}

.contact-whatsapp:hover{
    background:#041a27;
    color:#fff;
    border-color:#041a27;
}


/* =========================================================
   FOOTER DESKTOP
========================================================= */

.site-footer{
    padding:42px 8vw 24px;
    background:var(--navy);
    color:#c6d0d4;
}

.footer-brand{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    margin:0 0 38px;
}

.footer-brand img{
    display:block;
    width:235px;
    height:auto;
}

.footer-main{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;
    width:100%;
    max-width:1050px;
    margin:0 auto;
    align-items:start;
}

.footer-column{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.footer-column:nth-child(1){
    justify-self:start;
}

.footer-column:nth-child(2){
    justify-self:center;
}

.footer-column:nth-child(3){
    justify-self:end;
}

.footer-column h4{
    margin:0 0 19px;
    color:var(--gold);
    font-size:11px;
    font-weight:800;
    letter-spacing:.2em;
}

.footer-icon-link{
    display:flex;
    align-items:flex-start;
    gap:12px;
    width:max-content;
    max-width:100%;
    margin:0 0 13px;
    color:#c6d0d4;
    font-size:13px;
    line-height:1.55;
    transition:
        color .2s ease,
        transform .2s ease;
}

a.footer-icon-link:hover{
    color:var(--gold);
    transform:translateX(2px);
}

.footer-icon-link svg{
    display:block;
    flex:0 0 18px;
    width:18px;
    height:18px;
    margin-top:1px;
    fill:none;
    stroke:var(--gold);
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.footer-icon-fill{
    fill:var(--gold);
    stroke:none;
}

.footer-address{
    cursor:default;
}

.footer-address span{
    display:block;
}

.footer-bottom{
    max-width:1400px;
    margin:38px auto 0;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.1);
}

.copyright{
    width:100%;
    color:#647782;
    font-size:12px;
    line-height:1.5;
    text-align:center;
}


/* =========================================================
   REVEAL
========================================================= */

.reveal{
    opacity:0;
    transform:translateY(22px);
    transition:
        opacity .75s ease,
        transform .75s ease;
}

.reveal.visible{
    opacity:1;
    transform:none;
}


/* =========================================================
   GROSSE DESKTOPS – INHALT KOMPAKTER
========================================================= */

@media(min-width:901px){

    .services .section-head,
    .services .service-list,
    .about .about-layout,
    .about .trust-grid,
    .process .section-head,
    .process .steps,
    .faq .section-head,
    .faq .faq-list{
        width:100%;
        max-width:1450px;
        margin-left:auto;
        margin-right:auto;
    }

    .services .section-head,
    .process .section-head,
    .faq .section-head{
        margin-bottom:65px;
    }

    .services .services-head{
        margin-bottom:70px;
    }

    .about .trust-grid{
        margin-top:90px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

    #leistungen,
    #projekte,
    #ueber-uns,
    #faq,
    #kontakt{
        scroll-margin-top:78px;
    }

    .site-header{
        height:78px;
        padding:0 6vw;
    }

    .header-brand{
        width:190px;
    }

    .menu-btn{
        position:relative;
        display:block;
        width:38px;
        height:38px;
        margin-left:auto;
        padding:0;
        border:0;
        background:none;
        cursor:pointer;
    }

    .menu-btn span{
        display:block;
        width:25px;
        height:1px;
        margin:7px auto;
        background:#fff;
    }

    .nav{
        position:absolute;
        top:78px;
        left:0;
        right:0;
        display:none;
        flex-direction:column;
        align-items:flex-start;
        gap:22px;
        padding:25px 6vw 35px;
        background:rgba(4,26,39,.98);
    }

    .nav.open{
        display:flex;
    }

    .hero{
        min-height:720px;
        padding:145px 6vw 90px;
    }

    .hero-brand-slogan{
        left:6vw;
        top:95px;
        width:400px;
        height:50px;
    }

    .hero-brand-slogan img{
        top:-192px;
        width:400px;
        height:400px;
    }

    .hero h1{
        font-size:clamp(50px,11vw,72px);
    }

    .hero-symbol{
        display:none;
    }

    .section{
        padding:85px 6vw;
    }

    .section h2,
    .contact h2,
    .about-heading h2{
        font-size:clamp(44px,8vw,65px);
    }

    .section-label{
        font-size:16px;
    }

    .section-head{
        display:block;
    }

    .section-head > p{
        margin-top:25px;
    }

    .services-symbol{
        width:620px;
        height:620px;
        left:-100px;
        right:auto;
        top:420px;
    }

    .service{
        grid-template-columns:160px minmax(0,1fr);
        gap:28px;
    }

    .service-icon{
        width:160px;
        min-width:160px;
        height:118px;
    }

    .service h3{
        font-size:23px;
    }

    .service.scroll-active{
        padding-left:14px;
        background:
            linear-gradient(
                90deg,
                rgba(192,157,104,.10),
                rgba(192,157,104,.025) 65%,
                transparent
            );
    }

    .service.scroll-active .service-icon img{
        transform:scale(1.075);
    }

    .projects-symbol{
        left:auto;
        right:-75px;
        top:50%;
        width:600px;
        height:600px;
        transform:translateY(-50%);
    }

    .project-grid{
        grid-template-columns:1fr;
        grid-template-rows:420px 250px 250px;
    }

    .project-placeholder.large{
        grid-row:auto;
    }

    .about-symbol{
        left:-100px;
        right:auto;
    }

    .about-layout{
        grid-template-columns:1fr;
        gap:10px;
    }

    .about-content{
        padding-top:30px;
    }

    .process-symbol{
        left:auto;
        right:-100px;
    }

    .steps{
        grid-template-columns:1fr 1fr;
    }


    /* FAQ TABLET */

    .faq-question{
        grid-template-columns:minmax(0,1fr) 34px;
        gap:15px;
        padding:24px 0;
    }

    .faq-title{
        font-size:18px;
    }

    .faq-answer-inner{
        padding:0 48px 26px 0;
    }


    /* FOOTER TABLET */

    .site-footer{
        padding:42px 6vw 24px;
    }

    .footer-brand{
        width:100%;
        margin:0 0 42px;
        justify-content:center;
    }

    .footer-brand img{
        width:225px;
        margin:0 auto;
    }

    .footer-main{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        width:100%;
        max-width:none;
        gap:0;
        margin:0;
    }

    .footer-column,
    .footer-column:nth-child(1),
    .footer-column:nth-child(2),
    .footer-column:nth-child(3){
        width:100%;
        margin:0 0 38px;
        padding:0;
        justify-self:auto;
        align-items:flex-start;
        text-align:left;
    }

    .footer-column:last-child{
        margin-bottom:0;
    }

    .footer-column h4{
        width:100%;
        margin:0 0 20px;
        padding:0;
        text-align:left;
    }

    .footer-icon-link,
    .footer-column:first-child .footer-icon-link{
        display:flex;
        width:auto;
        max-width:100%;
        align-items:center;
        justify-content:flex-start;
        gap:12px;
        margin:0 0 14px;
        padding:0;
        position:static;
        left:auto;
        transform:none;
        text-align:left;
    }

    .footer-icon-link svg{
        flex:0 0 18px;
        width:18px;
        height:18px;
        margin-top:0;
    }

    .footer-address{
        align-items:flex-start;
    }

    .footer-address span{
        text-align:left;
    }

    .footer-bottom{
        margin-top:35px;
        padding-top:20px;
    }
}


/* =========================================================
   SMARTPHONE
========================================================= */

@media(max-width:560px){

    .header-brand{
        width:165px;
        margin-left:-6vw;
    }

    .hero{
        padding:145px 6vw 85px;
    }

    .hero-brand-slogan{
        left:4.5vw;
        top:91px;
        width:300px;
        height:42px;
    }

    .hero-brand-slogan img{
        top:-143px;
        width:300px;
        height:300px;
    }

    .hero h1{
        font-size:clamp(43px,13vw,62px);
    }

    .hero-text{
        font-size:14px;
    }

    .hero-actions .btn{
        width:100%;
    }

    .hero-symbol{
        display:flex;
        width:430px;
        height:430px;
        right:-150px;
        top:330px;
    }

    .hero-symbol img{
        width:100%;
        height:100%;
        object-fit:contain;
        opacity:.07;
    }

    .section{
        padding:75px 6vw;
    }

    .section h2,
    .contact h2,
    .about-heading h2{
        font-size:clamp(40px,11vw,54px);
    }

    .section-label{
        font-size:14px;
    }

    .services{
        padding-top:70px;
        padding-bottom:75px;
    }

    .services-symbol{
        width:430px;
        height:430px;
        left:-70px;
        right:auto;
        top:420px;
    }

    .service{
        grid-template-columns:105px minmax(0,1fr);
        gap:18px;
        min-height:125px;
        padding:18px 0;
    }

    .service-icon{
        width:105px;
        min-width:105px;
        height:88px;
    }

    .service:hover{
        padding-left:0;
    }

    .service h3{
        margin-bottom:7px;
        font-size:19px;
    }

    .service p{
        font-size:12px;
        line-height:1.6;
    }

    .service.scroll-active{
        padding-left:8px;
        background:
            linear-gradient(
                90deg,
                rgba(192,157,104,.11),
                rgba(192,157,104,.03) 70%,
                transparent
            );
    }

    .service.scroll-active .service-icon img{
        transform:scale(1.09);
    }

    .projects-symbol{
        left:auto;
        right:-150px;
        top:50%;
        width:430px;
        height:430px;
        transform:translateY(-50%);
    }

    .project-grid{
        grid-template-rows:330px 220px 220px;
    }

    .about-symbol{
        width:430px;
        height:430px;
        left:-70px;
        right:auto;
    }

    .about-layout{
        display:block;
    }

    .about-content{
        padding-top:31px;
    }

    .about-content .about-lead{
        font-size:17px;
    }

    .trust-grid{
        grid-template-columns:1fr;
        margin-top:55px;
        border-bottom:0;
    }

    .trust-item,
    .trust-item:first-child{
        min-height:auto;
        padding:29px 0;
        border-right:0;
        border-bottom:1px solid var(--line);
    }

    .process-symbol{
        width:430px;
        height:430px;
        left:auto;
        right:-70px;
    }

    .steps{
        grid-template-columns:1fr;
    }

    .step,
    .step:not(:first-child){
        min-height:auto;
        padding:28px 0;
        border-right:0;
        border-top:1px solid var(--line);
    }

    .step:first-child{
        border-top:0;
    }


    /* FAQ SMARTPHONE */

    .faq-question{
        grid-template-columns:minmax(0,1fr) 28px;
        gap:12px;
        padding:21px 0;
    }

    .faq-title{
        font-size:16px;
        line-height:1.45;
    }

    .faq-item:hover .faq-title{
        transform:translateX(6px);
    }

    .faq-plus{
        width:20px;
        height:20px;
    }

    .faq-plus::before,
    .faq-plus::after{
        width:16px;
    }

    .faq-answer-inner{
        padding:0 38px 23px 0;
        font-size:13px;
        line-height:1.75;
    }


    /* KONTAKT SMARTPHONE */

    .contact{
        min-height:520px;
        padding:75px 6vw;
    }

    .contact-text{
        margin:28px auto;
        font-size:14px;
    }

    .contact-actions{
        flex-direction:column;
    }

    .contact-actions .btn{
        width:100%;
    }


    /* FOOTER SMARTPHONE */

    .site-footer{
        padding:40px 7vw 22px;
    }

    .footer-brand{
        width:100%;
        margin:0 0 38px;
        justify-content:center;
    }

    .footer-brand img{
        width:215px;
        max-width:75vw;
        margin:0 auto;
    }

    .footer-main{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:0;
        width:100%;
        margin:0;
    }

    .footer-column,
    .footer-column:nth-child(1),
    .footer-column:nth-child(2),
    .footer-column:nth-child(3){
        width:100%;
        margin:0 0 34px;
        padding:0;
        justify-self:auto;
        align-items:flex-start;
        text-align:left;
    }

    .footer-column:last-child{
        margin-bottom:0;
    }

    .footer-column h4{
        width:100%;
        margin:0 0 19px;
        padding:0;
        font-size:12px;
        letter-spacing:.18em;
        text-align:left;
    }

    .footer-icon-link,
    .footer-column:first-child .footer-icon-link{
        display:flex;
        width:auto;
        max-width:100%;
        align-items:center;
        justify-content:flex-start;
        gap:12px;
        margin:0 0 14px;
        padding:0;
        position:static;
        left:auto;
        font-size:14px;
        line-height:1.55;
        text-align:left;
        transform:none;
    }

    .footer-icon-link svg{
        flex:0 0 18px;
        width:18px;
        height:18px;
        margin-top:0;
    }

    .footer-address{
        align-items:flex-start;
    }

    .footer-address span{
        text-align:left;
    }

    .footer-bottom{
        margin-top:32px;
        padding-top:20px;
    }

    .copyright{
        font-size:10px;
        line-height:1.6;
        text-align:center;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    .hero-brand-slogan{
        animation:none;
    }

    .reveal{
        opacity:1;
        transform:none;
        transition:none;
    }

    *{
        transition-duration:.01ms !important;
    }
}