/* ======================================================
   RESPONSIVE
   BASE ADAPTATION
====================================================== */

@media (max-width:1919px){

    html{
        scroll-behavior:smooth;
		scrollbar-width:thin;
        scrollbar-color:#00A5FF rgba(255,255,255,.06);
    }

    body{
        overflow-x:hidden;
        overflow-y:auto;
    }
	
	    ::-webkit-scrollbar{
        width:6px;
    }

    ::-webkit-scrollbar-track{
        background:rgba(255,255,255,.035);
    }

    ::-webkit-scrollbar-thumb{
        background:#00A5FF;
        border-radius:999px;
        border:1px solid rgba(255,255,255,.08);
    }

    ::-webkit-scrollbar-thumb:hover{
        background:#18AEFF;
    }
	
	
		.op-tech__grid{
    width:100%;
    max-width:1750px;
    margin:0 auto;
    
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:50px;
}

.op-tech__content{
    width:100%;
    max-width:100%;
    height:auto;
    overflow:visible;
    padding-right:0;
}

.op-accordion{
    width:100%;
    max-width:none;
}

.op-tech__image{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0 auto;
}
	
.op-accordion__body p
	{
	max-width: 100%;	
	}

 

   
}


@media (max-width:1900px) and (min-width:1050px){

 		.op-tech__grid{
    width:100%;
    max-width:1750px;
    margin:0 auto;
    
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:50px;
}

.op-tech__content{
    width:100%;
    max-width:100%;
    height:auto;
    overflow:visible;
    padding-right:0;
}

.op-accordion{
    width:100%;
    max-width:none;
}

.op-tech__image{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0 auto;
}
	
.op-accordion__body p
	{
	max-width: 100%;	
	}

}


/* ======================================================
   1850px — зона page-nav
====================================================== */

@media (max-width:1899px) {

    .op-container{
        max-width:1799px;
    }
	
	
			.op-tech__grid{
    width:100%;
    max-width:1650px;
    margin:0 auto;
    
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:50px;
}

.op-tech__content{
    width:100%;
    max-width:100%;
    height:auto;
    overflow:visible;
    padding-right:0;
}

.op-accordion{
    width:100%;
    max-width:none;
}

.op-tech__image{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0 auto;
}
	
.op-accordion__body p
	{
	max-width: 100%;	
	}

}


@media (max-width:1850px) {

    .op-container{
        max-width:1750px;
    }
	
			.op-tech__grid{
    width:100%;
    max-width:1600px;
    margin:0 auto;
    
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:50px;
}

.op-tech__content{
    width:100%;
    max-width:100%;
    height:auto;
    overflow:visible;
    padding-right:0;
}

.op-accordion{
    width:100%;
    max-width:none;
}

.op-tech__image{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0 auto;
}
	
.op-accordion__body p
	{
	max-width: 100%;	
	}

}


@media (max-width:1800px) {

    .op-container{
        max-width:1700px;
    }
	
		.op-tech__grid{
    width:100%;
    max-width:1650px;
    margin:0 auto;
    
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:50px;
}

.op-tech__content{
    width:100%;
    max-width:100%;
    height:auto;
    overflow:visible;
    padding-right:0;
}

.op-accordion{
    width:100%;
    max-width:none;
}

.op-tech__image{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0 auto;
}
	
.op-accordion__body p
	{
	max-width: 100%;	
	}

}

/* ======================================================
   ≤ 1700px
====================================================== */

@media (max-width:1700px){

    .op-container{
        padding-left:40px;
        padding-right:40px;
		max-width:1600px;
    }

    .op-header__nav{
        gap:32px;
    }

    .op-page-nav{
        left:28px;
    }
	
	.op-tech__grid{
    width:100%;
    max-width:1550px;
    margin:0 auto;
    
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:50px;
}

.op-tech__content{
    width:100%;
    max-width:100%;
    height:auto;
    overflow:visible;
    padding-right:0;
}

.op-accordion{
    width:100%;
    max-width:none;
}

.op-tech__image{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0 auto;
}
	
.op-accordion__body p
	{
	max-width: 100%;	
	}

}


@media (max-width:1600px) {

    .op-container{
        max-width:1500px;
    }
	
	.op-tech__grid{
    width:100%;
    max-width:1400px;
    margin:0 auto;
    
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:50px;
}

.op-tech__content{
    width:100%;
    max-width:100%;
    height:auto;
    overflow:visible;
    padding-right:0;
}

.op-accordion{
    width:100%;
    max-width:none;
}

.op-tech__image{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0 auto;
}
	
.op-accordion__body p
	{
	max-width: 100%;	
	}

}

@media (max-width:1550px) {
	
	.op-container{
        max-width:1450px;
    }
	
	
	
	
	   #contacts .op-contact__card{
        padding:20px;
        margin-top:10px;
    }

    #contacts .op-contact__item{
        padding:10px 0;
    }

    #contacts .op-contact__item i{
        width:40px;
        height:40px;
    }
	
	
	
}

@media (max-width:1500px) {

    .op-container{
        max-width:1400px;
    }
	
	.op-tech__grid{
    width:100%;
    max-width:1300px;
    margin:0 auto;
    
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:50px;
}

.op-tech__content{
    width:100%;
    max-width:100%;
    height:auto;
    overflow:visible;
    padding-right:0;
}

.op-accordion{
    width:100%;
    max-width:none;
}

.op-tech__image{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0 auto;
}
	
	.op-accordion__body p
	{
	max-width: 100%;	
	}
	
	   #contacts .op-contact__card{
        padding:28px;
        margin-top:30px;
    }

    #contacts .op-contact__item{
        padding:10px 0;
    }

    #contacts .op-contact__item i{
        width:44px;
        height:44px;
    }

}

@media (max-width:1450px){
	    .op-container{
        		max-width:1350px;
    }
	
	.op-header__link{
        font-size:13px;
    }
}


/* ======================================================
   ≤ 1400px
====================================================== */

@media (max-width:1400px){

    .op-container{
        padding-left:32px;
        padding-right:32px;
		max-width:1300px;
    }



    .op-header__link{
        font-size:13px;
    }

    .op-page-nav{
        left:22px;
    }
	
	
	   /* обычная навигация */
    .op-header__nav{
        display:none;
    }

    /* burger */
    .op-menu__grid{
        grid-template-columns:360px 1fr;
        gap:50px;
    }

    .op-header__actions{
        margin-left:auto;
    }

}



@media (max-width:1350px){
	.op-hero__subtitle
	{
		font-size: 19px;
	}
}



@media (max-width:1300px){
.op-page-nav {
	display: none;
	}
}


/* ======================================================
   1400px
====================================================== */

@media (max-width:1399px) and (min-width:993px){

    .op-container{
        max-width:1299px;
    }
	
	
	.op-tech__grid{
    width:100%;
    max-width:1300px;
    margin:0 auto;
    
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:50px;
}

.op-tech__content{
    width:100%;
    max-width:100%;
    height:auto;
    overflow:visible;
    padding-right:0;
}

.op-accordion{
    width:100%;
    max-width:none;
}

.op-tech__image{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0 auto;
}
	
	
	.op-models__header{
    grid-template-columns:1fr;
    gap:45px;
}

.op-models__info{
    max-width:760px;
    width:100%;
}

.op-models__features{
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 40px;
    margin-top:0;
}

.op-models__features li{
    min-width:0;
    padding-right:20px;
}

.op-models__features span{
    min-width:0;
    overflow-wrap:break-word;
}

}


@media (max-width:1280px){
	.op-hero__subtitle
	{
		font-size: 19px;
	}
}


/* ======================================================
   ≤ 1200px
====================================================== */

@media (max-width:1200px){

    /*
        Header:
        обычная навигация исчезает,
        burger становится главным меню.
    */

    .op-header__nav{
        display:none;
    }

    .op-header__actions{
        margin-left:auto;
    }

    .op-header__left{
        gap:14px;
    }

    .op-menu__grid{
        grid-template-columns:360px 1fr;
        gap:50px;
    }

    .op-menu__item strong{
        font-size:24px;
    }

    .op-menu__item{
        height:46px;
    }

    .op-menu__aside{
        gap:18px;
    }
	
	    .op-hero__content{
    width:100%;
    max-width:760px;
}

.op-badge{
    max-width:100%;
    font-size:12px;
    padding:9px 16px;
}

    .op-hero__title{
        font-size:clamp(58px, 6vw, 88px);
    }

    .op-hero__subtitle{
        max-width:600px;
        font-size:18px;
    }
	
	.op-models__header{
    grid-template-columns:1fr;
    gap:45px;
}

.op-models__info{
    max-width:760px;
    width:100%;
}

.op-models__features{
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 40px;
    margin-top:0;
}

.op-models__features li{
    min-width:0;
    padding-right:20px;
}

.op-models__features span{
    min-width:0;
    overflow-wrap:break-word;
}
	
	.op-tech__grid{
    width:100%;
    max-width:1100px;
    margin:0 auto;
    
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:50px;
}

.op-tech__content{
    width:100%;
    max-width:100%;
    height:auto;
    overflow:visible;
    padding-right:0;
}

.op-accordion{
    width:100%;
    max-width:none;
}

.op-tech__image{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0 auto;
}

}


/* ======================================================
   ≤ 992px
====================================================== */

@media (max-width:992px){

    /*
        С этого момента сайт становится
        обычным вертикальным scroll-сайтом.
    */

    html{
        scroll-behavior:smooth;
    }

    body{
        overflow-x:hidden;
        overflow-y:auto;
    }

    /*
        Левая навигация fullscreen-презентации
        больше не нужна.
    */

    .op-page-nav{
        display:none;
    }

    /*
        Все основные экраны снова участвуют
        в нормальном потоке страницы.
    */

    .op-screen{
        min-height:100vh;
    }

    /*
        Header navigation уже скрыта на 1200,
        burger остаётся.
    */

    .op-header{
        z-index:1010;
    }

    /*
        Общий контейнер
    */

    .op-container{
        padding-left:28px;
        padding-right:28px;
    }
	
	.op-hero{
    min-height:100svh;
    height:auto;

    padding-top:90px;
    padding-bottom:150px;

    display:flex;
    align-items:center;
}

	
	.op-hero > .op-container{
    width:100%;
}

     .op-hero__content{
    width:100%;
    margin-top:0;
}
	
	    .op-badge{

        margin-bottom:18px;

        font-size:12px;

        padding:9px 16px;

    }
	
       .op-hero__title{

        max-width:680px;

        margin-bottom:20px;

        font-size:clamp(48px,7vw,64px);

        line-height:.92;

    }

       .op-hero__subtitle{

        max-width:600px;

        margin-bottom:28px;

        font-size:17px;

        line-height:1.6;

    }
	
	.op-hero__features{

        gap:20px 28px;

        margin-bottom:32px;

    }

    .op-hero__features li{

        gap:10px;

    }

    .op-hero__features svg{

        width:30px;
        height:30px;

    }

    .op-hero__buttons{

        gap:14px;

    }

    .op-hero__navigation{

        right:28px;
        bottom:24px;

    }
	
	.op-hero__navigation{

        position:absolute;

        left:25px;
        right:auto;
        bottom:28px;

        width:auto;

        display:flex;
        flex-direction:column;
        align-items:flex-start;

    }

    .op-hero__controls{

        justify-content:flex-start;

        gap:14px;

    }
	
	.op-models{

        min-height:auto;

        padding-top:110px;
        padding-bottom:80px;

    }

    .op-models__header{

        display:block;

    }

    .op-models__title{

        width: 100%;

        margin-bottom:18px;

        font-size:clamp(42px,7vw,58px);

    }

    .op-models__title2{

        margin-bottom:18px;

        font-size:30px;

    }

    .op-models__subtitle{

        width: 100%;

        margin-bottom:35px;

        font-size:17px;

        line-height:1.6;

    }

    .op-models__features{

        margin-top:45px;

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

        gap:24px;

    }
	
	   .op-models__grid{

        grid-template-columns:1fr;

        gap:24px;

    }

    .op-models__card{

        min-height:320px;

    }
	
	.op-tech{

        min-height:auto;

        padding-top:110px;
        padding-bottom:80px;

        align-items:flex-start;

    }

    .op-tech__grid{

        display:flex;

        flex-direction:column;

        gap:50px;

        align-items:stretch;

    }

    .op-tech__content{

        height:auto;

        overflow:visible;

        padding-right:0;

    }

    .op-tech__title{

        width:100%;

        margin:22px 0 28px;

        font-size:clamp(38px,7vw,54px);

    }

    .op-accordion{

        max-width:none;

    }

    .op-tech__image{

        width:100%;

        max-width:100%;

        height:auto;

    }
	
	  .op-projects{

        min-height:auto;

        padding-top:110px;
        padding-bottom:80px;

        align-items:flex-start;

    }

    .op-projects__header{

        margin-bottom:35px;

    }

    .op-projects__content{

        display:flex;

        flex-direction:column;

        gap:45px;

        width:100%;

    }

    .op-projects__left{

        width:100%;

    }

    .op-projects__list{

        width:100%;

        gap:4px;

    }

    .op-projects__right{

        width:100%;

        gap:30px;

    }

    .op-projects__image{

        width:100%;

        height:auto;

        max-height:420px;

        object-fit:cover;

    }

    .op-projects__stats{

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

        gap:30px;

    }

	 .op-tech{

        min-height:auto;

        padding-top:110px;
        padding-bottom:80px;

        align-items:flex-start;

    }

    .op-screen__scroll{

        height:auto;

        max-height:none;

        overflow-y:visible;

        padding-right:0;

    }
	
	
	 /* CLIENT LOGOS */

    .op-clients__logos{
        gap:18px;
        margin-bottom:60px;
    }

    .op-client{
        height:110px;
    }

    .op-client img{
        max-width:145px;
        max-height:80px;
    }


    /* REVIEWS */

    .op-reviews{
        padding-top:55px;
    }

    .op-reviews__header{
        margin-bottom:40px;
    }

    .op-review{
        grid-template-columns:120px 1fr;
        gap:35px;
        padding:40px;
    }

    .op-review__quote{
        font-size:190px;
    }

    .op-review__stars{
        font-size:24px;
        margin-bottom:20px;
    }

    .op-review__text{
        max-width:680px;
        margin-bottom:25px;
        font-size:18px;
        line-height:1.7;
    }

    .op-review__author strong{
        font-size:19px;
    }

    .op-review__author span{
        font-size:16px;
    }
	
	/* ========================================================
   CLIENTS — REFINED LAYOUT
======================================================== */

#clients .op-container{
    width:100%;
    max-width:1440px;
    margin:0 auto;
    padding-left:40px;
    padding-right:40px;
}

#clients .op-clients__logos{
    width:100%;
}

#clients .op-reviews{
    width:100%;
}

#clients .op-review{
    width:100%;
}
	
	#clients .op-review{
    grid-template-columns:130px minmax(0, 760px);
    justify-content:center;
    gap:40px;
    padding:45px 50px;
}

#clients .op-review__quote{
    font-size:200px;
}

#clients .op-review__text{
    max-width:760px;
    font-size:19px;
    line-height:1.75;
}
	
	#production .op-production__content{
    gap:100px;
}

#production .op-production__left{
    max-width:680px;
}

#production .op-production__text{
    margin:32px 0 40px;
    max-width:520px;
    font-size:20px;
    line-height:1.7;
}

#production .op-production__right{
    gap:42px;
    min-width:300px;
}

#production .op-production__stat{
    padding-bottom:32px;
}

#production .op-production__stat span{
    font-size:92px;
}
	
	#contacts .op-contact__card{
    width:480px;
    padding:36px;
    margin-top:50px;
}

#contacts .op-contact .op-section-title{
    margin-top:24px;
    margin-bottom:28px;
}

#contacts .op-contact__text{
    margin-bottom:34px;
    font-size:17px;
}

#contacts .op-contact__items{
    gap:18px;
}

#contacts .op-contact__item{
    gap:16px;
    padding:16px 0;
}

#contacts .op-contact__item i{
    width:52px;
    height:52px;
    border-radius:14px;
}

#contacts .op-contact__item strong{
    margin-bottom:4px;
    font-size:18px;
}

#contacts .op-contact__item span{
    font-size:15px;
}
	
	.op-accordion__body p
	
	{ 
		max-width: 100%;
	}
	
	/* BURGER MENU */

.op-menu__grid{
    grid-template-columns:3fr 7fr;
    gap:30px;
}

.op-menu__aside{
    min-width:0;
}

.op-menu__video{
    width:100%;
}

.op-menu__card{
    width:100%;
}

}

/* ======================================================
   ≤ 768px
   TABLET / iPAD MINI
====================================================== */

@media (max-width:768px){

    /* CONTAINER */

    .op-container{
        padding-left:22px;
        padding-right:22px;
    }


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

    .op-hero{
        min-height:100svh;
        height:auto;

        padding-top:100px;
        padding-bottom:40px;

        align-items:center;
    }

    .op-hero > .op-container{
        width:100%;
    }

    .op-hero__content{
        width:100%;
        max-width:620px;

        padding-top:0;

        margin-top:-20px;
    }


    /* BADGE */

    .op-badge{
        margin-bottom:16px;

        padding:8px 14px;

        font-size:16px;
    }


    /* TITLE */

    .op-hero__title{
        max-width:100%;

        margin-bottom:18px;

        font-size:clamp(42px,7vw,56px);

        line-height:.94;
    }


    /* SUBTITLE */

    .op-hero__subtitle{
        max-width:560px;

        margin-bottom:26px;

        font-size:16px;

        line-height:1.55;
    }


    /* FEATURES */

    .op-hero__features{
        gap:18px 22px;

        margin-bottom:28px;
    }

    .op-hero__features li{
        gap:9px;
    }

    .op-hero__features svg{
        width:28px;
        height:28px;
    }


    /* BUTTONS */

    .op-hero__buttons{
        gap:12px;
    }


    /* MODEL RANGE */

    .op-hero__navigation{
        left:22px;
        right:auto;

        bottom:22px;
    }
	
	    /* ==================================================
       ADVANTAGES
    ================================================== */

    #advantages .op-advantages__grid{
        grid-template-columns:repeat(1, 1fr);

        gap:12px;

        margin-bottom:50px;
    }

    #advantages .op-advantage{
        gap:12px;

        padding:18px;

        align-items:center;
    }

    #advantages .op-advantage__icon{
        width:52px;
        height:52px;
    }

    #advantages .op-advantage__icon svg{
        width:26px;
        height:26px;
    }

    #advantages .op-advantage__content h3{
        font-size:15px;
        line-height:1.25;
    }

    #advantages .op-advantage__content p{
        font-size:13px;
        line-height:1.5;
    }
	
	    /* ==================================================
       CONTACTS
    ================================================== */

    #contacts .op-contact__card{
        width:420px;

        padding:30px;

        margin-top:40px;
    }

    #contacts .op-contact .op-section-title{
        margin-top:20px;
        margin-bottom:24px;

        font-size:38px;
    }

    #contacts .op-contact__text{
        margin-bottom:28px;

        font-size:16px;

        line-height:1.6;
    }

    #contacts .op-contact__items{
        gap:14px;
    }

    #contacts .op-contact__item{
        gap:12px;

        padding:13px 0;
    }

    #contacts .op-contact__item i{
        width:46px;
        height:46px;

        border-radius:12px;
    }

    #contacts .op-contact__item strong{
        font-size:16px;
    }

    #contacts .op-contact__item span{
        font-size:14px;
    }
	
	    /* ==================================================
       DOCUMENTS
    ================================================== */

    #documents .op-documents__grid{
        grid-template-columns:repeat(2, 1fr);

        gap:16px;
    }

    #documents .op-document-card{
        padding:22px;
    }

    #documents .op-document-card__icon{
        width:52px;
        height:52px;

        margin-bottom:16px;
    }

    #documents .op-document-card__icon svg{
        width:24px;
        height:24px;
    }

    #documents .op-document-card h3{
        font-size:18px;
        line-height:1.25;
    }

    #documents .op-document-card p{
        font-size:14px;
        line-height:1.55;
    }

    #documents .op-document-card .op-btn{
        height:42px;

        padding:0 20px;

        font-size:14px;
    }
	
	/* BURGER MENU */

.op-menu__grid{
    grid-template-columns:3fr 7fr;
    gap:30px;
	height:100%;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
}
	
	.op-menu .op-container{
    height:100%;
    min-height:0;
}

.op-menu__aside{
    min-width:0;
}

.op-menu__video{
    width:100%;
}

.op-menu__card{
    width:100%;
}

}

/* ======================================================
   ≤ 576px
   MOBILE
====================================================== */

@media (max-width:576px){

    /* ==================================================
       GLOBAL
    ================================================== */

    .op-container{
        padding-left:20px;
        padding-right:20px;
    }

    .op-section-title{
        font-size:36px;
        line-height:1.05;
    }


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

    .op-header{
        padding-left:20px;
        padding-right:20px;
    }

    .op-header__left{
        gap:10px;
    }

    .op-header__logo img{
        width:145px;
    }

    .op-header__actions{
        gap:8px;
    }

    .op-header__icon{
        width:44px;
        height:44px;
    }

    .op-burger{
        width:52px;
        height:52px;
    }


    /* ==================================================
       BURGER / MEGA MENU
    ================================================== */

    .op-menu__grid{
        grid-template-columns:1fr;
        gap:35px;
		overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    }

    .op-menu__nav{
        width:100%;
		margin-top: 40px;
		margin-bottom: 20px;
    }

    .op-menu__item{
        height:42px;
    }

    .op-menu__item strong{
        font-size:22px;
    }

    .op-menu__item span{
        font-size:11px;
    }

    .op-menu__aside{
        width:100%;
        gap:16px;
        margin-top:0;
    }

    .op-menu__video{
        display: none;
    }

    .op-menu__card{
        width:100%;
    }


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

    .op-hero{
        min-height:100svh;
        padding-top:100px;
        padding-bottom:30px;
    }

    .op-hero__content{
        max-width:none;
        padding-top:10px;
		margin-bottom: 100px
    }

    .op-badge{
        margin-bottom:16px;
        padding:8px 12px;
        font-size:11px;
        line-height:1.3;
    }

    .op-hero__title{
        width:100%;
        max-width:none;
        margin-bottom:18px;

        font-size:42px;
        line-height:.94;
        letter-spacing:-.02em;
    }

    .op-hero__subtitle{
        width:100%;
        max-width:none;
        margin-bottom:24px;

        font-size:16px;
        line-height:1.5;
    }

    .op-hero__features{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));

        gap:18px 16px;
        margin-bottom:28px;
    }

    .op-hero__features li{
        gap:9px;
    }

    .op-hero__features svg{
        width:27px;
        height:27px;
        flex-shrink:0;
    }

    .op-hero__features li span{
        font-size:14px;
        line-height:1.35;
    }

    .op-hero__buttons{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:10px;
    }

    .op-hero__buttons .op-btn{
        width:100%;
        justify-content:center;
    }


    /* Hero image transition */
    .op-hero__background::before{
        background:
            linear-gradient(
                90deg,
                rgba(16,23,35,1) 0%,
                rgba(16,23,35,.94) 18%,
                rgba(16,23,35,.72) 34%,
                rgba(16,23,35,.35) 52%,
                rgba(16,23,35,0) 75%
            );
    }

    .op-hero__background::after{
        background:
            linear-gradient(
                0deg,
                rgba(16,23,35,.85) 0%,
                rgba(16,23,35,.20) 25%,
                rgba(16,23,35,0) 50%
            );
    }


    /* Hero model row */

.op-hero__navigation{
    left:16px;
    right:16px;
    bottom:16px;
}

.op-hero__controls{
    width:80%;
    justify-content:flex-start;
    gap:10px;
}

.op-hero-thumbs{
    width:calc(100% - 86px);
    flex-shrink:1;
    margin:0;
}

.op-hero-thumb{
    width:88px;
    padding:6px;
    gap:6px;
}

.op-hero-thumb img{
    height:46px;
}

.op-hero__model{
    font-size:11px;
}



    .op-hero-thumb span{
        font-size:11px;
    }

    .op-hero-prev,
    .op-hero-next{
        width:38px;
        height:38px;
    }


    /* ==================================================
       MODELS
    ================================================== */

    .op-models{
        padding-top:80px;
        padding-bottom:60px;
    }

    .op-models__title{
        font-size:40px;
        line-height: 1.2;
    }

    .op-models__title2{
        font-size:26px;
    }

    .op-models__subtitle{
        font-size:16px;
        line-height:1.5;
        margin-bottom:28px;
    }

    .op-models__features{
        grid-template-columns:1fr;
        gap:18px;
        margin-top:32px;
    }

    .op-models__grid{
        gap:18px;
    }

    .op-models__card{
        min-height:280px;
    }


    /* ==================================================
       TECH
    ================================================== */

    .op-tech{
        padding-top:80px;
        padding-bottom:60px;
    }

    .op-tech__grid{
        gap:35px;
    }

    .op-tech__title{
        margin:18px 0 24px;
        font-size:38px;
        line-height:1.02;
    }

    .op-tech__image{
        width:100%;
    }


    /* ==================================================
       PROJECTS
    ================================================== */

    .op-projects{
        padding-top:80px;
        padding-bottom:60px;
    }

    .op-projects__header{
    margin-bottom:36px;
}

.op-projects__left{
    padding-top:4px;
}

.op-projects__item.active::before{
    height:48px;
}

    .op-projects__item h3{
        font-size:18px;
        line-height:1.2;
    }

    .op-projects__item p{
        font-size:14px;
		padding-left: 10px;
    }

    .op-projects__number{
        font-size:13px;
    }

    .op-projects__right{
        gap:24px;
    }

    .op-projects__image{
        max-height:300px;
    }

    .op-projects__stats{
        grid-template-columns:1fr 1fr;
        gap:18px;
    }


    /* ==================================================
       ADVANTAGES
    ================================================== */

    #advantages{
        padding-top:80px;
        padding-bottom:60px;
    }

    #advantages .op-advantages__grid{
        grid-template-columns:1fr;
        gap:16px;
    }


    /* ==================================================
       CLIENTS
    ================================================== */

    #clients .op-container{
        padding-left:20px;
        padding-right:20px;
    }

    #clients .op-clients__logos{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
        margin-bottom:45px;
    }

    #clients .op-client{
        height:90px;
    }

    #clients .op-client img{
        max-width:110px;
        max-height:55px;
    }

    #clients .op-reviews{
        padding-top:40px;
    }

    #clients .op-reviews__header{
        margin-bottom:28px;
    }

    #clients .op-review{
        grid-template-columns:1fr;
        gap:12px;
        padding:28px 22px;
    }

    #clients .op-review__quote{
        font-size:110px;
        line-height:.7;
    }

    #clients .op-review__text{
        max-width:100%;
        font-size:16px;
        line-height:1.55;
    }

    #clients .op-review__stars{
        font-size:20px;
        margin-bottom:34px;
    }

    #clients .op-review__author strong{
        font-size:17px;
    }

    #clients .op-review__author span{
        font-size:14px;
    }


    /* ==================================================
       PRODUCTION
    ================================================== */

    #production{
        padding-top:80px;
        padding-bottom:60px;
    }

    #production .op-production__content{
        gap:45px;
    }

    #production .op-production__left{
        max-width:none;
    }

    #production .op-production__text{
        margin:24px 0 30px;
        max-width:none;
        font-size:17px;
        line-height:1.6;
    }

    #production .op-production__right{
        min-width:0;
        gap:24px;
    }

    #production .op-production__stat{
        padding-bottom:22px;
    }

    #production .op-production__stat span{
        font-size:64px;
    }


    /* ==================================================
       CONTACTS
    ================================================== */

    #contacts{
        padding-top:80px;
        padding-bottom:60px;
    }

    #contacts .op-contact__card{
        width:80%;
        padding:26px 22px;
        margin-top:35px;
    }

    #contacts .op-contact .op-section-title{
        margin-top:18px;
        margin-bottom:22px;
    }

    #contacts .op-contact__text{
        margin-bottom:26px;
        font-size:16px;
        line-height:1.55;
    }

    #contacts .op-contact__items{
        gap:10px;
    }

    #contacts .op-contact__item{
        gap:12px;
        padding:12px 0;
    }

    #contacts .op-contact__item i{
        width:44px;
        height:44px;
        border-radius:12px;
    }

    #contacts .op-contact__item strong{
        font-size:16px;
    }

    #contacts .op-contact__item span{
        font-size:13px;
    }


    /* ==================================================
       DOCUMENTS
    ================================================== */

    #documents{
        padding-top:80px;
        padding-bottom:0;
    }

    .op-documents__header{
        margin-bottom:35px;
    }

    .op-documents__text{
        font-size:16px;
        line-height:1.55;
    }

    .op-documents__grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .op-document-card{
        padding:24px 20px;
    }

    .op-document-card h3{
        font-size:20px;
    }

    .op-document-card p{
        font-size:15px;
        line-height:1.5;
    }

    .op-documents__social{
        flex-direction:column;
        align-items: center;
        gap:16px;
    }
	
	.op-counter
	{
	 font-size: 44px;	
	}
	
	.op-production__right
	{
	display: none;	
	}
	
	.op-models__features li:nth-child(3),
.op-models__features li:nth-child(1){

    border-right: none;

}
	
	#documents .op-document-card .op-btn
	{
		height: 60px;
	}
	
	.op-callout--02
   {
	   display: none; 
	}

	.op-callout--04
   {
	   display: none; 
	}
	
	.op-menu__card
	{
		display: none;
	}
	
}


/* ======================================================
   ≤ 430px
   SMALL MOBILE
====================================================== */

@media (max-width:430px){

    .op-container{
        padding-left:16px;
        padding-right:16px;
    }


    /* HEADER */

    .op-header{
        padding-left:16px;
        padding-right:16px;
    }

    .op-logo img{
        width:125px;
    }
	
	

    .op-header__actions{
        gap:6px;
    }

    .op-header__icon{
        width:40px;
        height:40px;
    }

    .op-burger{
        width:48px;
        height:48px;
    }


    /* HERO */

    .op-hero{
        padding-top:92px;
        padding-bottom:25px;
    }

    .op-badge{
        max-width:100%;
        font-size:14px;
        padding:7px 10px;
    }

    .op-hero__title{
        font-size:30px;
        line-height:.95;
        margin-bottom:16px;
    }

    .op-hero__subtitle{
        font-size:13px;
        line-height:1.5;
        margin-bottom:22px;
    }

    .op-hero__features{
        display: grid;
        gap:14px;
        margin-bottom:24px;
    }

    .op-hero__features li{
        gap:10px;
    }

    .op-hero__features li span{
        font-size:14px;
    }

    .op-hero__buttons{
        gap:8px;
    }

    .op-hero__buttons .op-btn{
        min-height:48px;
        font-size:15px;
    }


    /* HERO IMAGE */

    .op-hero__background::before{
        background:
            linear-gradient(
                90deg,
                rgba(16,23,35,1) 0%,
                rgba(16,23,35,.96) 20%,
                rgba(16,23,35,.78) 40%,
                rgba(16,23,35,.42) 60%,
                rgba(16,23,35,0) 82%
            );
    }

    .op-hero__background::after{
        background:
            linear-gradient(
                0deg,
                rgba(16,23,35,.92) 0%,
                rgba(16,23,35,.40) 28%,
                rgba(16,23,35,0) 55%
            );
    }


    /* HERO MODELS */

    .op-hero__navigation{
        left:16px;
        right:16px;
        bottom:16px;
    }

    .op-hero-thumbs{
        width:calc(100vw - 90px);
    }

    .op-hero-thumb{
        width:88px;
        padding:6px;
    }

    .op-hero-thumb img{
        height:45px;
    }

    .op-hero-thumb span{
        font-size:10px;
    }

    .op-hero-prev,
    .op-hero-next{
        width:34px;
        height:34px;
    }


    /* MODELS */

    .op-models{
        padding-top:65px;
        padding-bottom:50px;
    }

    .op-models__title{
        font-size:34px;
    }

    .op-models__title2{
        font-size:24px;
    }

    .op-models__subtitle{
        font-size:15px;
    }

    .op-models__card{
        min-height:250px;
    }


    /* TECH */

    .op-tech{
        padding-top:65px;
        padding-bottom:50px;
    }

    .op-tech__title{
        font-size:34px;
    }


    /* PROJECTS */

    .op-projects{
        padding-top:65px;
        padding-bottom:50px;
    }

    .op-projects__item{
        padding:15px 0;
    }

    .op-projects__item h3{
        font-size:17px;
    }

    .op-projects__item p{
        font-size:13px;
    }

    .op-projects__image{
        max-height:250px;
    }


    /* ADVANTAGES */

    #advantages{
        padding-top:65px;
        padding-bottom:50px;
    }


    /* CLIENTS */

    #clients .op-client{
        height:82px;
    }

    #clients .op-client img{
        max-width:95px;
        max-height:48px;
    }

    #clients .op-review{
        padding:24px 18px;
    }

    #clients .op-review__quote{
        font-size:90px;
    }

    #clients .op-review__text{
        font-size:15px;
        line-height:1.5;
    }


    /* PRODUCTION */

    #production{
        padding-top:65px;
        padding-bottom:50px;
    }

    #production .op-production__text{
        font-size:16px;
    }

    #production .op-production__stat span{
        font-size:54px;
    }


    /* CONTACTS */

    #contacts{
        padding-top:65px;
        padding-bottom:50px;
    }

    #contacts .op-contact__card{
        padding:22px 18px;
    }

    #contacts .op-contact__item i{
        width:40px;
        height:40px;
    }

    #contacts .op-contact__item strong{
        font-size:15px;
    }

    #contacts .op-contact__item span{
        font-size:12px;
    }


    /* DOCUMENTS */

    #documents{
        padding-top:65px;
    }

    .op-document-card{
        padding:22px 18px;
    }

    .op-document-card h3{
        font-size:19px;
    }

    .op-document-card p{
        font-size:14px;
    }
	
	
	.op-hero__controls{
    width:100%;
    
}
	
	
	.op-hero-thumb{
    width:75px;
    
}
	
	.op-accordion__label
	{
	font-size: 14px;	
	}
	
	.op-documents__footer .op-container
	{
	width: 90%;
    padding: 10px;
    text-align: center;	
	}
	
	#documents .op-documents__grid
	{
	display: grid;
grid-template-columns: 1fr;	
	}
	
	.op-callout--03 {
    bottom: 7%;
    left: 10%;
}
	
	.op-callout--01 {
    top: 24%;
    left: 17%;
}
	
.op-projects__left{
    width:100%;
    padding-left:0;
    padding-right:0;
}

.op-projects__item{
    grid-template-columns:48px minmax(0,1fr);
    column-gap:14px;
}

.op-projects__item h3{
    font-size:17px;
    line-height:1.15;
}

.op-projects__item p{
    font-size:13px;
}
	
	.op-projects__number
{
	padding-left: 10px;
	}
	

}

@media (max-height: 410px) {
    .op-page-nav__line {
        height: 18px !important;
    }
}




/* ======================================================
   ≤ 375px
   VERY SMALL MOBILE
====================================================== */

@media (max-width:375px){

    .op-container{
        padding-left:14px;
        padding-right:14px;
    }

    .op-header{
        padding-left:14px;
        padding-right:14px;
    }

    .op-header__logo img{
        width:112px;
    }

    .op-header__icon{
        width:38px;
        height:38px;
    }

    .op-burger{
        width:46px;
        height:46px;
    }


    .op-hero{
        padding-top:88px;
    }

    .op-hero__title{
        font-size:27px;
    }

    .op-hero__subtitle{
        font-size:11px;
    }

    .op-hero__features li span{
        font-size:13px;
    }

    .op-models__title{
        font-size:31px;
    }

    .op-tech__title{
        font-size:31px;
    }

    .op-projects__item h3{
        font-size:16px;
    }

    #production .op-production__stat span{
        font-size:48px;
    }
	
	.op-logo img
	{
	width: 90px;	
	}
	
	    .op-callout--01 {
        top: 7%;
        left: 17%;
    }

}


/* ======================================================
   ≤ 320px
====================================================== */

@media (max-width:320px){

    .op-container{
        padding-left:12px;
        padding-right:12px;
    }

    .op-header__actions{
        gap:4px;
    }

    .op-header__icon{
        width:36px;
        height:36px;
    }

    .op-header__logo img{
        width:100px;
    }

    .op-burger{
        width:44px;
        height:44px;
    }

    .op-hero__title{
        font-size:29px;
    }

    .op-hero__subtitle{
        font-size:12px;
    }

    .op-hero__features li span{
        font-size:12px;
    }

    .op-hero__buttons .op-btn{
        font-size:14px;
    }

    .op-models__title,
    .op-tech__title{
        font-size:28px;
    }

    #clients .op-clients__logos{
        gap:8px;
    }

    #clients .op-client{
        height:74px;
    }

    #clients .op-client img{
        max-width:82px;
    }

}