/* =====================================================
   GLOBAL COMPACT SCALE
===================================================== */

:root{

    --space-2:14px;
    --space-3:20px;
    --space-4:26px;
    --space-5:34px;
    --space-6:40px;
    --space-7:46px;
    --space-8:54px;
    --space-9:66px;
    --space-10:76px;

}

body.home-page h1,
body.home-page h2,
body.home-page h3,
body.home-page h4,
body.home-page h5,
body.home-page h6{
    color:var(--graphite);
}

body{

    font-size:15px;

    line-height:1.48;

}

.header__nav > ul{

    gap:32px;

}

.header__nav a{

    font-size:15px;

}

.hero .container{

    min-height:82vh;

}

.hero__frame{

    width:min(500px,100%);

    padding:52px var(--space-5) 52px 50px;

}

.hero__title{

    max-width:420px;

    font-size:40px;

    line-height:1.1;

    margin-bottom:var(--space-4);

}

.hero__lead{

    max-width:420px;

    font-size:16px;

    line-height:1.62;

    margin-bottom:var(--space-5);

}

.btn{

    min-width:190px;

    height:50px;

    padding:0 26px;

    font-size:15px;

}

.benefits{

    padding:var(--space-4) 0;

}

.what-is,
.features,
.process,
.story,
.configuration,
.inspirations,
.faq,
.contact,
.about-story,
.about-quote,
.about-values,
.solutions-intro{

    padding:var(--space-9) 0;

}

.about-hero{

    padding:78px 0 var(--space-4);

}

.about-hero__media{

    height:54vh;

    min-height:360px;

    max-height:500px;

}

.about-hero__frame{

    padding:var(--space-5);

}

.what-is__title,
.features__title,
.story__title,
.configuration__title,
.inspirations__title,
.faq__title,
.contact__title,
.about-story__title,
.about-values__title,
.solutions-intro__content .what-is__title,
.solutions-intro__title{

    font-size:34px;

    line-height:1.16;

}

.process__title{

    font-size:33px;

    line-height:1.16;

}

.about-hero__title{

    max-width:none;

    font-size:38px;

    line-height:1.14;

}

.about-hero__lead{

    max-width:none;

}

.about-hero__frame .about-hero__title,
.about-hero__frame .about-hero__lead{

    max-width:none;

}

.about-cta__title{

    font-size:26px;

    line-height:1.18;

}

.what-is__lead,
.features__lead,
.story__lead,
.configuration__lead,
.inspirations__lead,
.faq__lead,
.contact__lead,
.about-hero__lead,
.process__lead,
.solutions-intro__content .what-is__lead,
.solutions-intro__lead{

    font-size:16px;

    line-height:1.62;

}

.what-is__text,
.story__text,
.about-story__text,
.about-values__item p,
.features__card p,
.configuration__card-description,
.configuration__card-list,
.inspirations__text,
.faq__answer,
.contact__detail a,
.contact__detail span,
.solutions-intro__point p{

    font-size:14.5px;

    line-height:1.62;

}

.features__header,
.inspirations__header{

    margin-bottom:var(--space-6);

}

.features__grid,
.inspirations__grid{

    gap:var(--space-3);

}

.features__card{

    min-height:220px;

    padding:var(--space-5);

}

.features__card h3,
.about-values__item h3{

    font-size:19px;

}

.benefits__card{

    padding:14px 18px;

}

.benefits__title{

    font-size:15px;

}

.benefits__text{

    font-size:12.5px;

    line-height:1.48;

}

.process__layout,
.story__layout,
.contact__layout{

    gap:var(--space-6);

}

.process__intro,
.story__card,
.contact__form-card,
.contact__info{

    padding:var(--space-5);

}

.process__timeline{

    min-height:0;

}

.process__number{

    font-size:23px;

}

.process__step-title,
.faq__question,
.contact__detail p{

    font-size:16px;

}

.configuration__header{

    padding:var(--space-4);

}

.configuration__header .configuration__title{

    font-size:28px;

}

.configuration__header .configuration__lead{

    font-size:14.5px;

    line-height:1.55;

}

.configuration__grid{

    gap:var(--space-3);

}

.configuration__card{

    padding:var(--space-2);

}

.configuration__card-title{

    font-size:13.5px;

}

.configuration__toggle-text,
.configuration__card-body{

    font-size:12.5px;

}

.inspirations__title{

    margin-bottom:var(--space-2);

}

.inspirations__caption h3,
.faq__intro h3{

    font-size:18px;

}

.about-story__content{

    min-height:580px;

}

.about-story__text{

    gap:var(--space-2);

}

.about-quote blockquote{

    padding:var(--space-7) var(--space-6);

}

.about-quote p{

    font-size:28px;

    line-height:1.35;

}

.about-quote blockquote::before,
.about-quote blockquote::after{

    font-size:72px;

}

.about-values__header{

    margin-bottom:var(--space-5);

}

.about-values__list{

    gap:var(--space-4);

}

.about-values__layout{

    gap:var(--space-6);

}

.solutions-intro__content{

    padding:var(--space-6);

}

.solutions-intro__points{

    gap:18px 22px;

}

.solutions-intro__point h3{

    font-size:16px;

}

.site-footer{

    padding:var(--space-7) 0 var(--space-5);

}

.site-footer__grid{

    gap:var(--space-5);

}

.site-footer__brand p,
.site-footer__socials a,
.site-footer__nav a,
.site-footer__contact a,
.site-footer__contact span{

    font-size:14px;

    line-height:1.55;

}

.site-footer__nav h2,
.site-footer__contact h2{

    font-size:15.5px;

}

@media (max-width:1024px){

    :root{

        --space-8:48px;
        --space-9:58px;
        --space-10:66px;

    }

    .hero__title,
    .about-hero__title{

        font-size:34px;

    }

    .what-is__title,
    .features__title,
    .story__title,
    .process__title,
    .configuration__title,
    .inspirations__title,
    .faq__title,
    .contact__title,
    .about-story__title,
    .about-values__title,
    .solutions-intro__content .what-is__title,
    .solutions-intro__title{

        font-size:30px;

    }

    .hero__frame{

        padding:44px 30px 44px 42px;

    }

    .hero__lead,
    .about-hero__lead,
    .what-is__lead,
    .features__lead,
    .story__lead,
    .process__lead,
    .configuration__lead,
    .inspirations__lead,
    .faq__lead,
    .contact__lead,
    .solutions-intro__content .what-is__lead,
    .solutions-intro__lead{

        font-size:15.5px;

    }

    .about-story__content{

        min-height:0;

    }

}

@media (max-width:720px){

    :root{

        --space-6:34px;
        --space-7:40px;
        --space-8:44px;
        --space-9:50px;
        --space-10:58px;

    }

    body{

        font-size:14.5px;

    }

    .header__nav a{

        font-size:14px;

    }

    .hero{

        --hero-mobile-photo-height:clamp(300px,46vh,380px);

        display:block;

        min-height:0;

        padding-top:var(--hero-mobile-photo-height);

        background-color:var(--color-warm-white);

        background-image:none;

        isolation:isolate;

    }

    .hero::before{

        content:"";

        position:absolute;

        top:0;
        left:0;
        right:0;

        height:var(--hero-mobile-photo-height);

        background-image:url("../images/inspiracje/heromobile.webp");

        background-size:cover;

        background-position:center top;

        background-repeat:no-repeat;

        z-index:0;

    }

    .hero__overlay{

        inset:0 0 auto;

        height:var(--hero-mobile-photo-height);

        background:linear-gradient(
            180deg,
            rgba(47,49,51,.05) 0%,
            rgba(47,49,51,.08) 62%,
            rgba(250,248,244,.2) 100%
        );

    }

    .hero .container{

        display:block;

        min-height:0;

        margin:var(--space-3) auto var(--space-4);

    }

    .hero__frame{

        width:100%;

        margin-top:0;

        padding:30px 22px 26px;

        background:rgba(250,248,244,.96);

        box-shadow:0 14px 34px rgba(47,49,51,.1);

    }

    .about-hero{

        padding-bottom:var(--space-7);

    }

    .about-hero__media{

        height:auto;
        min-height:0;
        max-height:none;

    }

    .about-hero__frame{

        margin-bottom:var(--space-2);

    }

    .about-hero__frame,
    .about-hero.is-visible .about-hero__frame{

        transform:none;

    }

    .hero__title,
    .about-hero__title{

        font-size:30px;

    }

    .hero__title{

        font-size:28px;

        line-height:1.1;

    }

    .what-is__title,
    .features__title,
    .story__title,
    .process__title,
    .configuration__title,
    .inspirations__title,
    .faq__title,
    .contact__title,
    .about-story__title,
    .about-values__title,
    .about-cta__title,
    .solutions-intro__content .what-is__title,
    .solutions-intro__title{

        font-size:26px;

    }

    .hero__lead,
    .about-hero__lead,
    .what-is__lead,
    .features__lead,
    .story__lead,
    .process__lead,
    .configuration__lead,
    .inspirations__lead,
    .faq__lead,
    .contact__lead,
    .solutions-intro__content .what-is__lead,
    .solutions-intro__lead{

        font-size:14.5px;

        line-height:1.58;

    }

    .what-is__text,
    .story__text,
    .about-story__text,
    .about-values__item p,
    .features__card p,
    .configuration__card-description,
    .configuration__card-list,
    .inspirations__text,
    .faq__answer,
    .contact__detail a,
    .contact__detail span,
    .solutions-intro__point p{

        font-size:14px;

    }

    .btn{

        min-width:0;

        height:48px;

        padding:0 22px;

        font-size:14px;

    }

    .hero__buttons{

        width:100%;

        align-items:stretch;

        flex-direction:column;

        gap:12px;

    }

    .hero__buttons .btn{

        width:100%;

        height:auto;

        min-height:48px;

        padding:12px 18px;

        line-height:1.25;

        text-align:center;

        white-space:normal;

    }

    .hero__buttons .btn span{

        max-width:100%;

    }

    .benefits{

        padding:var(--space-3) 0;

    }

    .features__card,
    .process__intro,
    .story__card,
    .contact__form-card,
    .contact__info,
    .solutions-intro__content{

        padding:var(--space-4);

    }

    .about-quote p{

        font-size:22px;

    }

    .about-quote blockquote::before,
    .about-quote blockquote::after{

        font-size:52px;

    }

}

@media (max-width:900px){
    body.is-menu-open{
        overflow:hidden;
    }

    .header__nav > ul{
        gap:2px;
    }

    .site-footer{
        padding:var(--space-6) 0 var(--space-4);
    }

    .site-footer__grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:var(--space-5) var(--space-5);
    }

    .site-footer__grid > .site-footer__nav:nth-of-type(2){
        order:1;
    }

    .site-footer__grid > .site-footer__nav:nth-of-type(1){
        order:2;
    }

    .site-footer__brand{
        order:3;
        grid-column:auto;
        padding-bottom:0;
        margin-bottom:0;
        border-bottom:0;
    }

    .site-footer__contact{
        order:4;
    }

    .site-footer__brand p{
        max-width:360px;
    }

    .site-footer__nav,
    .site-footer__contact{
        min-width:0;
    }
}

@media (max-width:640px){
    .site-footer{
        padding:var(--space-5) 0 var(--space-4);
    }

    .site-footer__grid{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        gap:var(--space-4) var(--space-3);
    }

    .site-footer__brand,
    .site-footer__nav,
    .site-footer__contact{
        min-width:0;
        padding:0;
        margin:0;
        border-bottom:0;
    }

    .site-footer__grid > .site-footer__brand,
    .site-footer__grid > .site-footer__contact{
        padding-top:var(--space-3);
        border-top:1px solid rgba(115,138,105,.18);
    }

    .site-footer__grid > .site-footer__nav:nth-of-type(2){
        padding-top:0;
        border-top:0;
    }

    .site-footer__logo{
        margin-bottom:10px;
    }

    .site-footer__logo img{
        width:132px;
        max-width:100%;
    }

    .site-footer__brand p{
        max-width:none;
        font-size:13px;
        line-height:1.55;
    }

    .site-footer__socials{
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        gap:6px;
        margin-top:10px;
    }

    .site-footer__nav,
    .site-footer__contact{
        gap:7px;
    }

    .site-footer__nav h2,
    .site-footer__contact h2{
        margin-bottom:6px;
        font-size:14px;
    }

    .site-footer__nav a{
        display:block;
        padding:3px 0;
    }

    .site-footer__contact p{
        grid-template-columns:18px minmax(0,1fr);
        gap:8px;
        margin:0;
    }

    .site-footer__contact svg{
        width:17px;
        height:17px;
        margin-top:2px;
    }

    .site-footer__socials a,
    .site-footer__socials span,
    .site-footer__nav a,
    .site-footer__contact a,
    .site-footer__contact span{
        font-size:13px;
        line-height:1.55;
        overflow-wrap:anywhere;
    }
}

@media (max-width:360px){

    .hero{

        --hero-mobile-photo-height:280px;

    }

    .hero__frame{

        padding:26px 18px 24px;

    }

    .hero__title{

        font-size:24px;

        line-height:1.12;

        margin-bottom:var(--space-3);

    }

    .hero__lead{

        font-size:13.5px;

        line-height:1.5;

        margin-bottom:var(--space-4);

    }

}