:root {
   --color-bg: #ffffff;
   --color-text: #0d0d0d;
   --color-muted: #747474;
   --color-card: #eeeeee;
   --color-dark: #626262;
   --color-footer: #eeeeee;
   --color-white: #ffffff;
   --radius-sm: 8px;
   --radius-md: 12px;
   --container: 1180px;
   --section-gap: 92px;
   --font: Arial, Helvetica, sans-serif;
   --transition: 180ms ease;
}
* {
   box-sizing: border-box;
}
html {
   scroll-behavior: smooth;
}
body {
   margin: 0;
   background: var(--color-bg);
   color: var(--color-text);
   font-family: var(--font);
}
a {
   color: inherit;
   text-decoration: none;
}
p {
   margin: 0;
}
.container {
   width: min(calc(100% - 48px), var(--container));
   margin-inline: auto;
}
.header {
   min-height: 116px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 28px;
}
.logo {
   font-size: 34px;
   font-weight: 950;
   letter-spacing: -4px;
   line-height: 1;
   text-transform: uppercase;
}
.nav {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 38px;
   font-size: 14px;
   color: var(--color-muted);
}
.nav a, .footer a, .more-link {
   transition: opacity var(--transition);
}
.nav a:hover, .footer a:hover, .more-link:hover {
   opacity: .55;
}
.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 12px 28px;
   border-radius: 999px;
   background: var(--color-dark);
   color: var(--color-white);
}
.button--small {
   min-width: 112px;
   font-size: 12px;
}
.hero {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 68px;
   padding-top: 70px;
}
.hero h1 {
   flex: 0 1 50%;
   margin: 0;
   font-size: clamp(54px, 6.1vw, 83px);
   line-height: .98;
   letter-spacing: -4px;
   text-transform: uppercase;
}
.hero__content {
   flex: 1 1 50%;
   max-width: 590px;
   padding-top: 9px;
   display: flex;
   flex-direction: column;
   gap: 24px;
   font-size: 16px;
   line-height: 1.12;
}
.tags {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
}
.tags span {
   padding: 12px 21px;
   border-radius: 999px;
   background: #e5e5e5;
   color: var(--color-muted);
   white-space: nowrap;
}
.cycle, .services, .production, .locations, .cases {
   padding-top: var(--section-gap);
}
.section-title {
   margin: 0 0 38px;
   font-size: 29px;
   line-height: 1;
   text-transform: uppercase;
}
.section-title--center {
   text-align: center;
}
.cycle__list, .services__row, .locations__list, .cases__list {
   display: flex;
   gap: 14px;
}
.card {
   background: var(--color-card);
   border-radius: var(--radius-sm);
}
.cycle-card {
   flex: 1 1 0;
   min-height: 178px;
   padding: 16px 12px;
}
.cycle-card b {
   display: block;
   margin-bottom: 18px;
   font-size: 27px;
}
.cycle-card h3, .service-card h3, .location h3, .shop h3, .case-card h3 {
   margin: 0;
   text-transform: uppercase;
}
.cycle-card h3 {
   margin-bottom: 13px;
   font-size: 20px;
}
.cycle-card p, .service-card p, .service-card li {
   color: #b2b2b2;
   font-size: 11px;
   line-height: 1.12;
}
.services__row {
   align-items: stretch;
}
.services__column {
   flex: 1 1 0;
   display: flex;
   flex-direction: column;
   gap: 12px;
}
.service-card {
   flex: 1 1 0;
   min-height: 134px;
   padding: 24px 16px;
}
.service-card--tall {
   flex: 1 1 0;
   min-height: 280px;
}
.service-card h3 {
   margin-bottom: 18px;
   font-size: 20px;
   line-height: 1.02;
}
.service-card ul {
   margin: 0;
   padding-left: 16px;
}
.service-card p, .service-card li {
   margin-bottom: 4px;
}
.more-link {
   align-self: center;
   padding: 0 10px;
   font-size: 13px;
   font-weight: 700;
}
.production {
   display: flex;
   align-items: flex-start;
   gap: 70px;
}
.production__steps {
   flex: 0 1 40%;
}
.production__steps > p {
   max-width: 380px;
   margin-bottom: 28px;
   font-size: 15px;
}
.production ol {
   margin: 0;
   padding: 0;
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 18px;
}
.production li {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   font-size: 15px;
}
.production li b {
   font-size: 26px;
}
.production li span {
   max-width: 335px;
   padding-top: 3px;
}
.shop {
   flex: 1 1 60%;
}
.visual {
   overflow: hidden;
   border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #f6f6f6;
   background-image: linear-gradient(45deg, #e7e7e7 25%, transparent 25%), linear-gradient(-45deg, #e7e7e7 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e7e7e7 75%), linear-gradient(-45deg, transparent 75%, #e7e7e7 75%);
   background-size: 72px 72px;
   background-position: 0 0, 0 36px, 36px -36px, -36px 0;
}
.visual span {
   padding: 10px 15px;
   border-radius: 999px;
   background: rgba(255,255,255,.86);
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: .08em;
   opacity: 0;
   transition: opacity var(--transition);
}
.visual:hover span {
   opacity: 1;
}
.visual--wide {
   height: 258px;
   margin-bottom: 18px;
}
.shop h3 {
   margin-bottom: 4px;
   font-size: 19px;
}
.shop p, .location p {
   color: var(--color-muted);
   font-size: 10px;
}
.locations__list {
   align-items: stretch;
}
.location {
   flex: 1 1 0;
}
.location--wide {
   flex-grow: 1.75;
}
.location .visual {
   height: 292px;
   margin-bottom: 16px;
}
.visual--spb {
   background-color: #d7bf8e;
   background-image: linear-gradient(145deg, rgba(79,43,23,.42), transparent 40%), linear-gradient(20deg, #d0a868, #f0e2bf);
}
.visual--msk {
   background-color: #5b5a54;
   background-image: linear-gradient(130deg, #262626, #9c998e 48%, #e1d9bc);
}
.visual--factory {
   background-color: #b55c2d;
   background-image: linear-gradient(90deg, #d7d7d7 0 18%, transparent 18% 80%, #5b3022 80%), linear-gradient(25deg, #c46c34, #4a4a45);
}
.location h3 {
   margin-bottom: 5px;
   font-size: 19px;
}
.cases__list {
   min-height: 366px;
}
.case-card {
   flex: 1 1 0;
   padding: 20px 10px 13px;
   border-radius: var(--radius-sm);
   display: flex;
   flex-direction: column;
   background-color: #f5f5f5;
   background-image: linear-gradient(45deg, #e8e8e8 25%, transparent 25%), linear-gradient(-45deg, #e8e8e8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e8e8e8 75%), linear-gradient(-45deg, transparent 75%, #e8e8e8 75%);
   background-size: 40px 40px;
   background-position: 0 0, 0 20px, 20px -20px, -20px 0;
}
.case-card h3 {
   font-size: 19px;
}
.case-card__tags {
   display: flex;
   gap: 28px;
   padding-top: 6px;
   color: var(--color-muted);
   font-size: 9px;
}
.case-card p {
   margin-top: auto;
   padding: 10px 4px;
   border-radius: 5px;
   background: rgba(255,255,255,.72);
   color: var(--color-muted);
   font-size: 10px;
}
.case-card--more {
   align-items: center;
   justify-content: center;
   background: var(--color-dark);
   color: var(--color-white);
   text-align: center;
   font-size: 16px;
   line-height: 1.15;
   transition: transform var(--transition);
}
.case-card--more:hover {
   transform: translateY(-4px);
}
.consultation {
   margin-top: 86px;
   margin-bottom: 86px;
   padding: 28px 32px;
   border-radius: var(--radius-sm);
   background: var(--color-dark);
   color: var(--color-white);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 35px;
}
.consultation h2 {
   flex: 0 1 47%;
   margin: 0;
   font-size: 27px;
   line-height: 1.05;
   text-transform: uppercase;
}
.consultation__form {
   flex: 1 1 53%;
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}
.consultation__form label {
   flex: 1 1 calc(50% - 5px);
}
.consultation__form label span {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
}
.consultation__form input, .consultation__form button {
   width: 100%;
   height: 34px;
   border: 0;
   border-radius: 10px;
   padding: 0 14px;
   font: inherit;
   font-size: 10px;
}
.consultation__form button {
   cursor: pointer;
   background: #dedede;
   font-weight: 700;
   transition: background var(--transition);
}
.consultation__form button:hover {
   background: var(--color-white);
}
.footer {
   background: var(--color-footer);
}
.footer__inner {
   min-height: 290px;
   padding-block: 52px;
   display: flex;
   justify-content: space-between;
   gap: 80px;
}
.footer__contacts {
   display: flex;
   flex-direction: column;
   gap: 13px;
   color: #8a8a8a;
   font-size: 10px;
}
.footer__contacts .logo {
   margin-bottom: 20px;
   color: var(--color-text);
}
.footer__nav {
   display: flex;
   gap: 78px;
}
.footer__nav > div {
   min-width: 115px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   color: #9b9b9b;
   font-size: 10px;
}
.footer__nav b {
   margin-bottom: 5px;
   color: var(--color-muted);
   text-transform: uppercase;
   letter-spacing: .08em;
}
@media (max-width: 900px) {
   :root {
      --section-gap: 70px;
   }
   .nav {
      display: none;
   }
   .hero {
      flex-direction: column;
      padding-top: 40px;
   }
   .hero h1 {
      flex-basis: auto;
   }
   .hero__content {
      max-width: 700px;
   }
   .cycle__list, .locations__list, .cases__list {
      flex-wrap: wrap;
   }
   .cycle-card, .location, .case-card {
      flex-basis: calc(50% - 8px);
   }
   .services__row {
      flex-wrap: wrap;
   }
   .services__column, .service-card--tall {
      flex-basis: calc(50% - 8px);
   }
   .production {
      gap: 40px;
   }
   .consultation {
      flex-direction: column;
      align-items: stretch;
   }
   .footer__inner {
      flex-direction: column;
   }
}
@media (max-width: 620px) {
   :root {
      --section-gap: 56px;
   }
   .container {
      width: min(calc(100% - 28px), var(--container));
   }
   .header {
      min-height: 86px;
   }
   .button--small {
      min-width: auto;
      padding-inline: 18px;
   }
   .hero {
      gap: 40px;
   }
   .hero h1 {
      font-size: clamp(43px, 14vw, 67px);
      letter-spacing: -3px;
   }
   .hero__content {
      font-size: 14px;
   }
   .tags span {
      width: 100%;
      text-align: center;
   }
   .section-title {
      font-size: 24px;
      line-height: 1.08;
   }
   .cycle-card, .location, .case-card, .services__column, .service-card--tall {
      flex-basis: 100%;
   }
   .production {
      flex-direction: column;
   }
   .production__steps, .shop {
      width: 100%;
   }
   .location--wide {
      flex-basis: 100%;
   }
   .cases__list {
      min-height: 0;
   }
   .case-card {
      min-height: 300px;
   }
   .case-card--more {
      min-height: 150px;
   }
   .consultation {
      margin-block: 60px;
      padding: 24px 18px;
   }
   .consultation h2 {
      font-size: 22px;
   }
   .consultation__form {
      flex-direction: column;
   }
   .consultation__form label {
      flex-basis: auto;
   }
   .footer__nav {
      flex-wrap: wrap;
      gap: 38px;
   }
}