@font-face{

    font-display:swap;

    font-family:"Inter";

    font-style:normal;

    font-weight:400;

    src:url("fonts/inter_400.woff2") format("woff2");

}



@font-face{

    font-display:swap;

    font-family:"Inter";

    font-style:normal;

    font-weight:500;

    src:url("fonts/inter_500.woff2") format("woff2");

}



@font-face{

    font-display:swap;

    font-family:"Inter";

    font-style:normal;

    font-weight:600;

    src:url("fonts/inter_600.woff2") format("woff2");

}



@font-face{

    font-display:swap;

    font-family:"Inter";

    font-style:normal;

    font-weight:700;

    src:url("fonts/inter_700.woff2") format("woff2");

}



@font-face{

    font-display:swap;

    font-family:"Inter Tight";

    font-style:normal;

    font-weight:400;

    src:url("fonts/inter_tight_400.woff2") format("woff2");

}



@font-face{

    font-display:swap;

    font-family:"Inter Tight";

    font-style:normal;

    font-weight:600;

    src:url("fonts/inter_tight_600.woff2") format("woff2");

}



:root{



    --bg:#F8F4EE;

    --beige:#E8DCCB;

    --beige-dark:#CDBDA8;

    --brown:#8C6F5A;

    --dark:#2C2C2C;

    --white:#fff;

}



*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{



    font-family:"Inter",sans-serif;

    background:var(--bg);

    color:var(--dark);

    line-height:1.6;



    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}



section{



    padding:

        clamp(40px,8vw,60px)

        clamp(20px,6vw,10%);



    scroll-margin-top:67px;

}



@media (min-width:375px){



    section{



        scroll-margin-top:74px;

    }

}



@media (min-width:768px){



    section{



        scroll-margin-top:84px;

    }

}



#referenciak{

    padding-top:20px;

}



img{



    display:block;

    max-width:100%;

}



h1, h2{



    font-family:"Inter Tight",sans-serif;

    font-weight:600;

    line-height:1.15;

}



h3{



    font-family:"Inter",sans-serif;

    font-weight:600;

    line-height:1.3;

}



p{



    font-size:clamp(.95rem,1vw + .7rem,1.1rem);

}



.section-title{



    text-align:center;

    margin-bottom:40px;

    font-size:clamp(2rem,6vw,3rem);

}



.page404 h1, .article h1{



    font-size:clamp(2rem,6vw,3rem);

    overflow-wrap:break-word;

    word-break:normal;

    text-align:center;

}



.ref_cim{



    padding:

        clamp(90px,12vw,120px)

        clamp(20px,6vw,10%)

        clamp(16px,3vw,24px);



    text-align:center;

}



.ref_cim h1{



    font-size:clamp(2rem,6vw,3rem);



    line-height:1.15;



    margin-bottom:16px;

}



.ref_cim p{



    max-width:700px;



    margin:20px auto;



    font-size:clamp(1rem,1vw + .7rem,1.15rem);



    line-height:1.7;

}

.ref_cim a{



    color:var(--brown);



    text-decoration:underline;

}



.btn{



    display:inline-flex;

    align-items:center;

    justify-content:center;



    padding:

        clamp(14px,2vw,18px)

        clamp(28px,5vw,40px);



    border-radius:50px;



    background:var(--beige);

    color:var(--dark);



    text-decoration:none;



    font-weight:600;



    font-size:clamp(1.05rem,2vw,1.35rem);



    transition:.3s;

}



.button-container{



    text-align:center;

    margin-top:40px;

}



@media (hover:hover) and (pointer: fine){



    .btn:hover{



        transform:translateY(-3px);

    }

}



.navbar{



    position:fixed;

    inset:0 0 auto 0;



    z-index:1000;



    display:flex;

    justify-content:space-between;

    align-items:center;



    padding:0 20px;



    background:rgba(248,244,238,.9);

    backdrop-filter:blur(10px);

}



.logo img{



    height:55px;

    width:auto;



    margin:6px 0;

}



.hamburger{



    display:block;



    background:none;

    border:none;



    cursor:pointer;



    font-size:30px;

    color:var(--dark);

}



.nav-links{



    display:none;



    position:absolute;



    top:100%;

    right:16px;



    width:min(230px,calc(100vw - 32px));



    flex-direction:column;



    background:rgba(248,244,238,.98);

    backdrop-filter:blur(10px);



    border-radius:16px;



    overflow:hidden;



    box-shadow:0 15px 35px rgba(0,0,0,.15);

}



.nav-links.active{



    display:flex;

}



.nav-links a{



    display:block;



    padding:16px 20px;



    color:var(--dark);



    text-decoration:none;



    font-weight:500;



    transition:.25s;

}



.nav-links a:not(:last-child){



    border-bottom:1px solid #ddd;

}



.menu-overlay{



    position:fixed;

    inset:0;



    background:rgba(0,0,0,.45);



    opacity:0;

    visibility:hidden;



    transition:.3s;



    z-index:900;

}



.menu-overlay.active{



    opacity:1;

    visibility:visible;

}



@media (hover:hover) and (pointer: fine){



    .nav-links a:hover{



        background:#f1ebe2;

    }



}



@media (min-width:375px){



    .navbar{



        padding:0 24px;

    }



    .logo img{



        height:62px;

    }



    .nav-links{



        width:250px;

    }



}



@media (min-width:768px){



    .navbar{



        padding:0 5%;

    }



    .logo img{



        height:72px;

    }



}



@media (min-width:1024px){



    .hamburger{



        display:none;

    }



    .nav-links{



        display:flex;



        position:static;



        width:auto;



        flex-direction:row;



        gap:35px;



        background:none;



        backdrop-filter:none;



        box-shadow:none;



        border-radius:0;



        overflow:visible;



        padding:20px 0;

    }



   .nav-links a:not(:last-child){



        border-bottom:none;

    }



    .nav-links a{



        padding:0;



        border:none;

    }



}



@media (hover:hover) and (pointer: fine){



    .nav-links a:hover{



        background:none;

        transform:translateY(-3px);

    }



}



.hero{



    position:relative;



    display:flex;



    min-height:100dvh;



    align-items:center;



    color:var(--white);



    overflow:hidden;

}



.hero h1{



    font-size:clamp(1.6rem,7vw,2rem);

    line-height:1.1;

    margin-bottom:24px;

}



.hero p{



    font-size:clamp(1rem,2vw,1.3rem);

    margin-bottom:40px;

}



.hero-image{



    position:absolute;

    inset:0;



    width:100%;

    height:100%;



    object-fit:cover;



    z-index:0;

}



.hero::before{



    content:"";



    position:absolute;

    inset:0;



    background:rgba(0,0,0,.35);



    z-index:1;

}



.hero-content{



    position:relative;



    z-index:2;



    width:100%;



    max-width:650px;

}



@media (min-width:375px){



    .hero h1{



        font-size:clamp(2.3rem,8vw,4rem);

        line-height:1.1;

        margin-bottom:24px;

}



}



@media (min-width:768px){



    .hero-content{



        max-width:720px;

    }



}



.about{



    display:grid;



    grid-template-columns:1fr;



    gap:40px;



    align-items:center;

}



.about img{



    width:100%;



    border-radius:20px;



    object-fit:cover;

}



.about p{



    margin-top: 1.5rem;

}



@media (min-width:375px){



    .about{



        gap:50px;

    }



}



@media (min-width:1024px){



    .about{



        grid-template-columns:1fr 1fr;



        gap:70px;

    }



}



.stats{



    background:var(--beige);

}



.stats-grid{



    display:grid;



    grid-template-columns:1fr;



    gap:0px;

}



.stat{



    text-align:center;



    padding:15px 0;

}



.number{



    font-size:clamp(2.1rem,10vw,3.3rem);



    font-weight:700;



    color:var(--brown);



    line-height:1;

}



.stat:not(:last-child){



    border-bottom:1px solid var(--beige-dark);

}



@media (min-width:768px){



    .stats-grid{



        grid-template-columns:repeat(3,1fr);



        gap:30px;

    }



    .stat{



        padding:5px 20px;

    }



    .stat:not(:last-child){



        border-bottom:none;



        border-right:1px solid var(--beige-dark);

    }



}



.services-grid{



    display:grid;



    grid-template-columns:1fr;



    gap:24px;



    margin-bottom:60px;

}



.card{



    position:relative;



    padding:32px 24px;



    background:var(--white);



    border-radius:20px;



    box-shadow:0 10px 30px rgba(0,0,0,.08);



    transition:.3s;

}



.card h3{



    margin-bottom:14px;



    font-size:clamp(1.15rem,2vw,1.35rem);

}



.card p{



    line-height:1.7;

}



.card-icon{



    position:absolute;



    top:24px;

    right:24px;



    width:44px;

    height:44px;

}



@media (hover:hover) and (pointer: fine){



    .card:hover{



        transform:translateY(-8px);



        box-shadow:0 18px 40px rgba(0,0,0,.12);

    }



}



@media (min-width:375px){



    .services-grid{



        gap:28px;

    }



    .card{



        padding:36px 28px;

    }



}



@media (min-width:1024px){



    .services-grid{



        grid-template-columns: repeat(2,minmax(0,1fr));



        gap:40px;

    }



    .card{



        padding:40px;

    }



    .card-icon{



        width:50px;

        height:50px;

    }



}



.furniture-list{

    margin:1.5rem 0;

    padding-left:1.5rem;



    display:grid;

    grid-template-columns:1fr;

    gap:.75rem;

}



.furniture-list li{

    line-height:1.6;

}



@media (min-width:1024px){



    .furniture-list{

        grid-template-columns:repeat(2,1fr);

        column-gap:2rem;

    }



}



.references-text{



    max-width:800px;



    margin:0 auto 40px;



    text-align:center;



    line-height:1.6;

}



.gallery{



    display:grid;



    grid-template-columns:1fr;



    gap:20px;

}



.gallery img{



    width:100%;



    aspect-ratio:4/3;



    object-fit:cover;



    border-radius:16px;



    transition:.3s;

}



@media (hover:hover) and (pointer: fine){



    .gallery img:hover{



        transform:scale(1.04);

    }



}



@media (min-width:375px){



    .gallery{



        gap:24px;

    }



}



@media (min-width:768px){



    .gallery{



        grid-template-columns:repeat(2,1fr);



        gap:28px;

    }



}



@media (min-width:1024px){



    .gallery{



        grid-template-columns:repeat(2,1fr);



        gap:32px;

    }



}



.ref_gallery{



    padding:0 clamp(20px,6vw,10%) 80px;



    display:grid;



    grid-template-columns:1fr;



    gap:24px;

}



@media (min-width:768px){



    .ref_gallery{



        grid-template-columns:repeat(2,1fr);



    }



}



@media (min-width:1024px){



    .ref_gallery{



        grid-template-columns:repeat(3,1fr);



    }

    .ref_gallery:has(> :nth-child(3):last-child){
        grid-template-columns:repeat(2,1fr);
    }



}



.ref_card{



    position:relative;



    display:block;



    overflow:hidden;



    border-radius:18px;



    text-decoration:none;



    color:inherit;

}



.ref_card img{



    width:100%;



    aspect-ratio:4/3;



    object-fit:cover;



    transition:.35s;

}



.ref_overlay{



    position:absolute;



    inset:0;



    display:flex;



    align-items:flex-end;



    padding:20px;



    color:white;



    background:rgba(0,0,0,.35);



    opacity:0;



    transition:.3s;

}



@media (hover:hover) and (pointer: fine){



    .ref_card:hover img{



        transform:scale(1.05);

    }



    .ref_card:hover .ref_overlay{



        opacity:1;

    }



}



.lightbox img{



    max-width:min(92vw,1400px);



    max-height:88vh;



    object-fit:contain;



    border-radius:12px;

}



.contact{



    background:var(--beige);



    text-align:center;

}



.contact-box{



    width:min(700px,100%);



    margin-inline:auto;

}



.contact p{



    margin-top:16px;

}



.contact a{



    color:var(--dark);



    text-decoration:none;



    transition:.25s;

}



@media (hover:hover) and (pointer: fine){



    .contact a:hover{



        color:var(--brown);



        text-decoration:underline;

    }



}



.social-links{



    display:flex;



    justify-content:center;



    flex-wrap:wrap;



    gap:20px;



    margin-top:30px;

}



.social-links img{



    width:48px;



    height:48px;



    transition:.25s;

}



@media (min-width:768px){



    .social-links{



        gap:28px;

    }



    .social-links img{



        width:52px;

        height:52px;

    }



}



@media (hover:hover) and (pointer: fine){



    .social-links img:hover{



        transform:scale(1.08);

    }



}



footer{



    padding:18px clamp(20px,6vw,10%);



    background:#ece3d7;



    text-align:center;

}



.footer-company{



    font-weight:600;



    margin-bottom:12px;

}



.footer-container{



    display:flex;



    flex-direction:column;



    align-items:center;



    gap:8px;

}



@media (min-width:768px){



    .footer-container{



        flex-direction:row;



        justify-content:center;



        flex-wrap:wrap;



        gap:28px;

    }



}



.footer-container a{



    color:var(--dark);



    text-decoration:none;



    font-size:.9rem;



    transition:.25s;

}



@media (hover:hover) and (pointer: fine){



    .footer-container a:hover{



        transform:translateY(-2px);

    }



}



.cookie-link{



    border:none;



    background:none;



    cursor:pointer;



    color:var(--brown);



    text-decoration:underline;



    font-size:.9rem;

}



@media (hover:hover) and (pointer: fine){



    .cookie-link:hover{



        opacity:.7;

    }



}



.reveal{



    opacity:0;



    transform:translateY(60px);



    transition:1s;

}



.reveal.active{



    opacity:1;



    transform:none;

}



.company-name{



    font-size:clamp(1.15rem,2vw,1.4rem);



    font-weight:700;



    margin-bottom:10px;

}



.cookie-modal{



    position:fixed;



    inset:0;



    display:none;



    justify-content:center;

    align-items:flex-end;



    background:transparent;



    backdrop-filter:none;



    pointer-events:none;



    z-index:9999;

}



.cookie-box{



    width:min(calc(100% - 20px),650px);



    padding:28px;



    background:var(--bg);



    color:var(--dark);



    border-radius:20px 20px 0 0;



    box-shadow:0 -10px 40px rgba(0,0,0,.18);



    transform:translateY(100%);



    animation:slideUp .4s ease forwards;



    pointer-events:auto;

    

    max-height:90dvh;

    

    overflow-y:auto;

}



.cookie-box p{



    font-size:.8rem;

}



@media (max-width:379px){



    .cookie-box{



        padding:20px;

    }



}



.cookie-box h2{



    margin-bottom:12px;



    font-size:clamp(1.2rem,3vw,1.4rem);

}



.cookie-box a{



    color:var(--brown);



    text-decoration:underline;

}



@media (hover:hover) and (pointer: fine){



    .cookie-box a:hover{



        opacity:.7;

    }



}



.cookie-buttons{



    display:flex;



    flex-direction:column;



    gap:12px;



    margin-top:24px;

}



@media (min-width:768px){



    .cookie-buttons{



        flex-direction:row;



    }



}



.cookie-buttons button{



    flex:1;



    padding:14px;



    border:none;



    border-radius:999px;



    cursor:pointer;



    font-weight:600;



    transition:.25s;

}



#acceptAll{



    background:var(--brown);



    color:white;



    font-size:.8rem;

}



#onlyNecessary{



    background:var(--beige);



    color:var(--dark);



    font-size:.8rem;

}



#openSettings{



    background:transparent;



    border:1px solid var(--beige-dark);



    color:var(--dark);



    font-size:.8rem;

}



@media (hover:hover) and (pointer: fine){



#acceptAll:hover, #onlyNecessary:hover, #openSettings:hover{



    transform:translateY(-2px);



    box-shadow:0 10px 25px rgba(0,0,0,.15);



}



}



.cookie-settings{



    display:none;



    margin-top:20px;



    padding-top:20px;



    border-top:1px solid var(--beige);

}



.cookie-settings label{

    

    font-size:.8rem;



    display:flex;



    align-items:center;



    gap:14px;



    margin:12px 0;



    padding:16px;



    background:white;



    border:1px solid var(--beige);



    border-radius:16px;



    cursor:pointer;



    transition:.25s;

}



.cookie-settings label strong{



    font-weight:500;

}



@media (hover:hover) and (pointer: fine){



.cookie-settings label:hover{



    transform:translateY(-2px);



    box-shadow:0 8px 18px rgba(0,0,0,.08);

}



}



#saveSettings{



    width:100%;



    margin-top:18px;



    padding:14px;



    border:none;



    border-radius:999px;



    background:var(--brown);



    color:white;



    font-weight:600;



    cursor:pointer;



    transition:.25s;



    font-size:.8rem;

}



@media (hover:hover) and (pointer: fine){



#saveSettings:hover{



    transform:translateY(-2px);



    box-shadow:0 10px 25px rgba(0,0,0,.15);



}



}



.cookie-settings input{



    width:18px;

    height:18px;



    accent-color:var(--brown);



    flex-shrink:0;

}



.article{



    padding:

        100px

        clamp(20px,6vw,10%)

        70px;

    text-align:left;

}



.article h2{



    margin-top:42px;



    margin-bottom:16px;



    font-family:"Inter";



    font-weight:500;



    font-size:clamp(1.2rem,2vw,1.45rem);

}



.article p{



    margin-top:16px;



    line-height:1.8;

}



.article ul{



    margin-top:16px;



    padding-left:22px;

}



.article li{



    margin-top:10px;

}



.article a{



    color:var(--brown);



    text-decoration:underline;

}



@media (hover:hover) and (pointer: fine){



.article a:hover{



    opacity:.7;

}



}



.page404{



    padding:

        120px

        clamp(20px,6vw,10%)

        80px;



    text-align:center;

}



.page404 p{



    margin-top:24px;



    font-size:clamp(1rem,2vw,1.2rem);

}



.lightbox{



    position:fixed;



    inset:0;



    display:none;



    justify-content:center;

    align-items:center;



    background:rgba(0,0,0,.88);



    z-index:2000;



    padding:20px;

}



.lightbox.active{



    display:flex;

}



.lightbox img{



    width:auto;



    max-width:min(92vw,1600px);



    max-height:88vh;



    object-fit:contain;



    border-radius:12px;

}



.close{



    position:absolute;



    top:20px;

    right:25px;



    color:white;



    font-size:40px;



    cursor:pointer;



    user-select:none;



    line-height:1;



    transition:.25s;

}



@media (hover:hover) and (pointer: fine){



.close:hover{



    transform:scale(1.1);



}



}



.nav{



    position:absolute;



    top:50%;



    transform:translateY(-50%);



    color:white;



    font-size:48px;



    cursor:pointer;



    user-select:none;



    padding:10px;



    transition:.25s;

}



.prev{



    left:16px;

}



.next{



    right:16px;

}



@media (hover:hover) and (pointer: fine){



.nav:hover{



    transform:translateY(-50%) scale(1.08);



}



}



@media (max-width:479px){



.nav{



    font-size:36px;

}



.close{



    font-size:34px;

}



}



@keyframes slideUp{



    from{



        transform:translateY(100%);



        opacity:0;

    }



    to{



        transform:translateY(0);



        opacity:1;

    }



}