/* =========================================================
   DECOART — ИНЖЕНЕРНЫЕ ПРОЕКТЫ
   Центральный пылесос
   style-inzh-projects-001.css

   ВАЖНО:
   Стили построены по предоставленному макету.
   Дизайн, порядок блоков, цвета и визуальная иерархия
   не переосмысливаются.
   ========================================================= */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:#090909;font-family:"Proxima Nova", sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
h3 {

	font-family: "RF Dewi Expanded", sans-serif;
	line-height: 1.1;
	text-transform: uppercase;
	color: #000;
	font-weight: 400;

	text-align: center;
}


.sub-title {
	color: #000;
	text-transform: uppercase;
	font-size: 24px;
	font-family: "RF Dewi Expanded", sans-serif;
	letter-spacing: 0.6px;
	margin: 0 0 19px 0;
}

.project-card:nth-child(4n+2), .project-card:nth-child(4n+3), .project-card:nth-child(4n+4) {
	border-left: 0px solid #dfe7ea !important;
}

.project-card:nth-child(n+5) {
	border-top: 0px solid #e5e5e5 !important;
}

.project-card img {
	width: 120px !important;
	height: 120px !important;
}

.hero {
	display: grid;
	grid-template-columns: 56% 44%;
	min-height: 900px;
	border-bottom: 1px solid #e6e6e6;
}


.hero__content {
	padding: 15px 34px 24px 42px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}


.hero {
	padding-top: 10px;
	max-height: 1080px;
	height: 98vh;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}


.hero__image {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}


.hero__content {z-index: 3;}

.hero__content h2 {border-bottom: 0px solid #00b8e4;}

.hero__content {
	padding: 5px 34px 44px 42px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.hero {
	padding-top: 40px;
	max-height: 1080px;
	height: 120vh;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;

}

.hero__image::after {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	content: '';
	height: 25%;
	background: -webkit-gradient(linear, left top, left bottom, from(#000000), color-stop(10%, #000000), to(rgba(0, 0, 0, 0.7)));
	background: -webkit-linear-gradient(top, #000000 0%, #000000 10%, rgba(0, 0, 0, 0.7) 100%);
	background: -o-linear-gradient(top, #000000 0%, #000000 10%, rgba(0, 0, 0, 0.7) 100%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.7) 100%);
}

.hero {
	padding-top: 20px;
	max-height: 1080px;
	height: 110vh;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: center;
}

.hero {
	display: grid;
	grid-template-columns: 65% 35%;
	min-height: 515px;
	border-bottom: 1px solid #e6e6e6;
}


.hero__image::after {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	content: '';
	height: 25%;
	background: -webkit-gradient(linear, left top, left bottom, from(#000000), color-stop(10%, #000000), to(rgba(0, 0, 0, 0.7)));
	background: -webkit-linear-gradient(top, #000000 0%, #000000 10%, rgba(0, 0, 0, 0.7) 100%);
	background: -o-linear-gradient(top, #000000 0%, #000000 10%, rgba(0, 0, 0, 0.7) 100%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0.7) 100%);
}

.hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right;
	padding-left: 260px;
}


.eyebrow {
	font-size: 31px;
	line-height: 1.05;
	font-weight: 800;
	color: #06b8e8;
	letter-spacing: -.8px;
	margin-bottom: 28px;
font-family: "RF Dewi Expanded", sans-serif;
}


section {
	padding-top: 100px;
}


.cta {
	display: grid;
	grid-template-columns: 34% 66%;
	min-height: 305px;
	border-top: 0px solid #e7e7e7;
	border-bottom: 1px solid #e7e7e7;
}















/* =========================================================
   DESKTOP — стандартные мониторы
   Горизонтальная ориентация
   1024–1439 px
   ========================================================= */
.hero{display:grid;grid-template-columns:56% 44%;min-height:515px;border-bottom:1px solid #e6e6e6}
.hero__content{padding:45px 34px 24px 42px;display:flex;flex-direction:column;justify-content:flex-start}
.eyebrow{font-size:31px;line-height:1.05;font-weight:800;color:#06b8e8;letter-spacing:-.8px;margin-bottom:28px}
h1,h2,h3,p{margin-top:0}
.hero h1{font-size:37px;line-height:1.02;letter-spacing:-1.2px;font-weight:800;margin-bottom:21px}
.hero__text{font-size:16px;line-height:1.43;max-width:500px;margin-bottom:20px}
.hero__image{min-width:0;overflow:hidden}
.hero__image img{width:100%;height:100%;object-fit:cover;object-position:center}

.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:auto}
.benefit{text-align:center}
.benefit img{width:66px;height:66px;object-fit:contain;margin:0 auto 3px}
.benefit h3{font-size:10px;line-height:1.1;margin:0 0 8px;font-weight:800}
.benefit p{font-size:9px;line-height:1.25;margin:0}

.projects{padding:29px 42px 42px}
.section-head{text-align:center;margin-bottom:28px}
.section-head h2{font-size:34px;line-height:1.05;letter-spacing:-.7px;font-weight:800;margin-bottom:10px}
.section-head p{font-size:15px;line-height:1.35;margin:0}
.project-grid{max-width:950px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.project-card{min-height:194px;text-align:center;padding:4px 19px 15px;position:relative}
.project-card:nth-child(4n+2),.project-card:nth-child(4n+3),.project-card:nth-child(4n+4){border-left:0px solid #dfe7ea}
.project-card:nth-child(n+5){border-top:0px solid #e5e5e5}
.project-card img{width:74px;height:74px;object-fit:contain;margin:0 auto 5px}
.project-card h3{font-size:12px;line-height:1.08;font-weight:800;margin:0 0 9px}
.project-card p{font-size:10px;line-height:1.45;margin:0;color:#333}

.cta{display:grid;grid-template-columns:34% 66%;min-height:305px;border-top:1px solid #e7e7e7;border-bottom:1px solid #e7e7e7}
.cta__content{padding:33px 20px 27px 42px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.cta h2{font-size:30px;line-height:1.03;letter-spacing:-.8px;font-weight:800;margin-bottom:12px}
.cta p{font-size:15px;line-height:1.45;margin-bottom:18px}
.cta__button{display:flex;align-items:center;justify-content:space-between;width:260px;min-height:56px;border-radius:12px;background:#06b8e8;color:#fff;padding:0 18px 0 28px;font-size:14px;font-weight:700}
.cta__button span{font-size:27px;font-weight:300;line-height:1}
.cta__image{overflow:hidden}
.cta__image img{width:100%;height:100%;object-fit:cover;object-position:center}

.trust{display:grid;grid-template-columns:1fr 1fr 1.5fr 1fr;min-height:95px;align-items:center;padding:9px 38px;gap:18px}
.trust article{display:flex;align-items:center;gap:11px;min-width:0}
.trust img{width:42px;height:42px;object-fit:contain;flex:none}
.trust strong{display:block;font-size:9px;line-height:1.2;font-weight:800}
.trust span{display:block;font-size:8px;line-height:1.25;margin-top:3px}

/* =========================================================
   LARGE DESKTOP — крупные мониторы
   Горизонтальная ориентация
   от 1440 px
   ========================================================= */
@media (min-width:1440px){
  .hero__content{padding-left:5.1vw;padding-right:2.7vw}
  .eyebrow{font-size:clamp(31px,2.15vw,48px)}
  .hero h1{font-size:clamp(37px,2.55vw,56px)}
  .hero__text{font-size:clamp(16px,1.05vw,21px);max-width:620px}
  .benefit img{width:80px;height:80px}
  .benefit h3{font-size:12px}.benefit p{font-size:11px}
  .projects{padding-left:5.1vw;padding-right:5.1vw}
  .section-head h2{font-size:clamp(34px,2.35vw,52px)}
  .section-head p{font-size:clamp(15px,1vw,20px)}
  .project-grid{max-width:1180px}
  .project-card{min-height:235px;padding-left:24px;padding-right:24px}
  .project-card img{width:88px;height:88px}
  .project-card h3{font-size:14px}.project-card p{font-size:12px}
  .cta__content{padding-left:5.1vw}
  .cta h2{font-size:clamp(30px,2.05vw,46px)}
  .cta p{font-size:clamp(15px,1vw,20px)}
}

/* =========================================================
   TABLET — горизонтальная ориентация
   768–1023 px
   ========================================================= */
@media (min-width:768px) and (max-width:1023px) and (orientation:landscape){
  .hero{grid-template-columns:55% 45%;min-height:420px}
  .hero__content{padding:28px 24px 18px 28px}
  .eyebrow{font-size:25px;margin-bottom:18px}
  .hero h1{font-size:31px}
  .hero__text{font-size:13px}
  .benefit img{width:55px;height:55px}
  .benefit h3{font-size:8px}.benefit p{font-size:8px}
  .projects{padding:25px 25px 30px}
  .section-head h2{font-size:28px}
  .section-head p{font-size:13px}
  .project-card{min-height:180px;padding-left:10px;padding-right:10px}
  .project-card img{width:65px;height:65px}
  .project-card h3{font-size:10px}.project-card p{font-size:8px}
  .cta{min-height:250px}
  .cta__content{padding-left:28px}.cta h2{font-size:25px}.cta p{font-size:12px}
  .cta__button{width:220px;min-height:48px;font-size:12px}
  .trust{padding:7px 22px;gap:10px}.trust img{width:34px;height:34px}.trust strong{font-size:7px}.trust span{font-size:6px}
}

/* =========================================================
   TABLET — вертикальная ориентация
   600–1023 px
   Блоки переходят в одну колонку без изменения содержания.
   ========================================================= */
@media (min-width:600px) and (max-width:1023px) and (orientation:portrait){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero__content{padding:36px 7vw 28px}
  .hero__image{height:430px}
  .eyebrow{font-size:31px}
  .hero h1{font-size:42px}
  .hero__text{font-size:16px;max-width:700px}
  .benefits{gap:16px}
  .projects{padding:34px 5vw}
  .section-head h2{font-size:35px}
  .project-grid{grid-template-columns:repeat(2,1fr)}
  .project-card:nth-child(4n+2),.project-card:nth-child(4n+3),.project-card:nth-child(4n+4){border-left:0}
  .project-card:nth-child(odd){border-right:0px solid #dfe7ea}
  .project-card:nth-child(n+3){border-top:0px solid #e5e5e5}
  .cta{grid-template-columns:1fr}
  .cta__content{padding:42px 7vw}.cta__image{height:360px}
  .trust{grid-template-columns:repeat(2,1fr);padding:18px 6vw}
}

/* =========================================================
   MOBILE — вертикальная ориентация
   до 599 px
   ========================================================= */
@media (max-width:599px) and (orientation:portrait){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero__content{padding:27px 20px 24px}
  .eyebrow{font-size:25px;letter-spacing:-.5px;margin-bottom:17px}
  .hero h1{font-size:32px;line-height:1.02;margin-bottom:17px}
  .hero__text{font-size:14px;line-height:1.45;margin-bottom:22px}
  .hero__image{height:300px}
  .benefits{grid-template-columns:repeat(2,1fr);gap:18px 6px}
  .benefit img{width:62px;height:62px}
  .benefit h3{font-size:9px}.benefit p{font-size:8px}
  .projects{padding:28px 16px 32px}
  .section-head{margin-bottom:18px}
  .section-head h2{font-size:27px;line-height:1.05}
  .section-head p{font-size:13px;line-height:1.4}
  .desktop-only{display:none}
  .project-grid{grid-template-columns:1fr}
  .project-card,.project-card:nth-child(n){border:0;border-top:0px solid #e5e5e5;min-height:auto;padding:20px 10px 24px}
  .project-card:first-child{border-top:0}
  .project-card img{width:76px;height:76px}
  .project-card h3{font-size:12px}.project-card p{font-size:10px}
  .cta{grid-template-columns:1fr}
  .cta__content{padding:30px 20px}
  .cta h2{font-size:28px}
  .cta p{font-size:14px}
  .cta__button{width:100%;min-height:54px}
  .cta__image{height:245px}
  .trust{grid-template-columns:1fr 1fr;gap:18px 12px;padding:18px 16px}
  .trust img{width:34px;height:34px}
  .trust strong{font-size:7px}.trust span{font-size:6px}
}

/* =========================================================
   MOBILE — горизонтальная ориентация
   до 767 px
   ========================================================= */
@media (max-width:767px) and (orientation:landscape){
  .hero{grid-template-columns:54% 46%;min-height:320px}
  .hero__content{padding:20px 18px 14px 24px}
  .eyebrow{font-size:20px;margin-bottom:12px}
  .hero h1{font-size:25px;margin-bottom:12px}
  .hero__text{font-size:10px;line-height:1.35;margin-bottom:8px}
  .benefit img{width:42px;height:42px}
  .benefit h3{font-size:7px;margin-bottom:4px}.benefit p{font-size:6px}
  .hero__image{min-height:320px}
  .projects{padding:20px 18px}
  .section-head h2{font-size:24px}.section-head p{font-size:10px}
  .project-grid{grid-template-columns:repeat(2,1fr)}
  .project-card{min-height:150px;padding:8px}
  .project-card:nth-child(4n+2),.project-card:nth-child(4n+3),.project-card:nth-child(4n+4){border-left:0}
  .project-card:nth-child(odd){border-right:0px solid #dfe7ea}
  .project-card:nth-child(n+3){border-top:0px solid #e5e5e5}
  .project-card img{width:54px;height:54px}.project-card h3{font-size:8px}.project-card p{font-size:7px}
  .cta{grid-template-columns:40% 60%;min-height:210px}
  .cta__content{padding:22px 18px 18px 24px}.cta h2{font-size:22px}.cta p{font-size:9px}.cta__button{width:170px;min-height:40px;font-size:9px}
  .trust{min-height:65px;padding:6px 18px;gap:8px}.trust img{width:27px;height:27px}.trust strong{font-size:6px}.trust span{font-size:5px}
}