/* Основний масив стилів сайту, у тому порядку, у якому він був.
   Правила навмисно не перекладені по категоріях: 407 селекторів
   повторюються, і в 144 випадках повтори стикаються в одній
   медіа-умові — там переможця визначає лише порядок. */


.block-container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.grid-layout {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  grid-auto-columns: 1fr;
  justify-content: center;
  padding: 20px;
}

.grid-cell {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

@media screen and (max-width: 991px) {
  .block-container {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .block-container {
    max-width: none;
  }
}

body {
  background-color: var(--f5f5f7);
  color: #333;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

h1 {
  color: var(--color--heading-color);
  font-size: var(--1);
  letter-spacing: -.03em;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
  line-height: 90%;
}

h2 {
  color: var(--color--heading-color);
  font-size: var(--size--heading-2-2);
  letter-spacing: -.03em;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
  line-height: 100%;
}

p {
  color: var(--000);
  font-size: var(--size--text-size-standard);
  margin-bottom: 0;
  line-height: 140%;
}

img {
  object-fit: cover;
  border-radius: 4px;
  width: 100%;
  max-width: 100%;
  height: 100%;
  display: inline-block;
}

.page {
  background-color: var(--white);
  background-image: linear-gradient(#fffc, #fffc), url("../images/chatgpt-image-22-yyul-2026-h-16-16-07.webp");
  background-position: 0 0, 50% 0;
  background-repeat: repeat, repeat-x;
  background-size: auto, contain;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  font-family: Inter, sans-serif;
  font-weight: 400;
  overflow: visible;
}

.container {
  z-index: 2;
  max-width: 1328px;
  padding-left: 2rem;
  padding-right: 2rem;
  display: block;
  position: relative;
  overflow: hidden;
}

.container.contact {
  max-width: 1440px;
  margin-top: 0;
}

/* ── Шапка: базовий шар ───────────────────────────────────────────────
   Оголошення, які раніше давали класи .w-nav-* платформи. Перенесені без
   змін і саме сюди — у шар ДО власних правил сайту. Якщо покласти їх у
   кінець файлу, вони перебивають власні правила, і кнопка меню з'їжджає
   на середину екрана: перша спроба зробила саме це. */

.brand { float: left; position: relative; color: #333; text-decoration: none; }

.header__menu { float: right; position: relative; }

.menu-button {
  float: right;
  cursor: pointer;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  -webkit-user-select: none;
  user-select: none;
  padding: 18px;
  font-size: 24px;
  display: none;
  position: relative;
}

.menu-button:focus { outline: 0; }

/* Цей відступ давало .w-nav-brand. Він не декоративний: логотип усередині
   має max-width:100%, тож 10px падінгу стискали його з 90 до 80px.
   Поріг саме 767, а не 991: на планшеті відступу немає. */
@media screen and (max-width: 767px) {
  .brand { padding-left: 10px; }
}

.navbar {
  z-index: 9999;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: #fff9;
  border-radius: 0;
  width: 100%;
  max-width: none;
  height: 65px;
  margin-left: auto;
  margin-right: auto;
  position: fixed;
  top: 0;
  left: auto;
}

.navbar-wrapper {
  justify-content: space-between;
  align-items: center;
  width: auto;
  max-width: none;
  height: 65px;
  min-height: 6vmin;
  margin-left: 0;
  margin-right: 0;
  padding: 0 10px;
  display: flex;
}

.link-text {
  color: #090611;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 0;
  font-family: Open Sans, sans-serif;
  font-size: 14px;
  line-height: 32px;
  text-decoration: none;
  display: flex;
}

.link {
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 0;
  text-decoration: none;
}

.link.is-current {
  height: 40px;
  padding-top: 5px;
  padding-left: 0;
}

.brand {
  float: none;
  width: 130px;
  display: block;
}

.brand.is-current {
  width: 130px;
  height: 45.6563px;
}

.navbar-underline {
  color: #000;
  background-color: #0003;
  flex-wrap: nowrap;
  justify-content: space-between;
  max-width: none;
  height: .5px;
  display: block;
}

.menu-button {
  float: none;
}

.link-underline {
  opacity: 1;
  background-color: #2d2d2d;
  height: 1.5px;
  position: absolute;
  transform: translate(-100%);
}

.link-underline:hover {
  opacity: 100;
  transform: translate(-100%);
}

.logo {
  border: 4px #725b5b;
  border-radius: 0;
  width: 90px;
  height: 100%;
  display: block;
}

.link-box {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: column;
  display: flex;
  position: static;
  overflow: hidden;
}

.navbar-container {
  max-width: none;
  height: 65px;
  margin-left: 0;
  margin-right: 0;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

.hero-wrapper {
  border-radius: .5rem;
  margin-top: 0;
  padding-bottom: clamp(2rem, 5vw, 5rem);
  display: block;
}

.contact__lead {
  color: var(--000);
  font-family: Open Sans, sans-serif;
  font-size: var(--size--font-size-standard);
  letter-spacing: 0;
  align-self: auto;
  padding-top: 0;
  font-weight: 400;
  line-height: 140%;
}

.contact__lead.contact-change {
  width: 539.297px;
}

.hero-image-wrapper {
  height: 80svh;
  margin-top: 2rem;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.hero-image-wrapper.about-photo {
  border-radius: .7rem;
  width: 100%;
  height: auto;
  margin-top: 1rem;
  display: block;
  position: relative;
  overflow: hidden;
}

.hero-image-wrapper.about-photo.hero__photo-box {
  z-index: -1;
  border-radius: 0;
  height: auto;
  margin-top: auto;
  position: relative;
  inset: 0% 0% auto;
}

.font-size-medium {
  color: var(--000);
  text-align: center;
  padding: 0;
  font-family: Open Sans, sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 115%;
  display: block;
}

.font-size-medium.link {
  z-index: 3;
  padding: .5rem 0;
  text-decoration: none;
  display: inline-flex;
  position: relative;
}

.font-size-medium.margin-bottom-1rem {
  margin-bottom: 1rem;
  font-size: 2rem;
  font-weight: 700;
}

.font-size-medium.margin-bottom-1rem.contact-change {
  font-size: 2rem;
  font-weight: 700;
}

.font-size-medium.margin-bottom-1rem.contact__intro {
  text-align: left;
  font-size: 2rem;
  font-weight: 700;
}

.bold {
  font-weight: 500;
}

.bold.font-size-medium {
  text-align: center;
  margin-bottom: 1rem;
  font-family: Open Sans, sans-serif;
  font-size: 4rem;
  font-weight: 600;
}

.parallax {
  filter: grayscale(20%);
  object-fit: cover;
  border-radius: .5rem;
  height: 100%;
  padding-top: 0;
}

.parallax:hover {
  filter: none;
}

.parallax.hero-photo {
  filter: none;
  border-radius: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  display: block;
  overflow: clip;
}

.parallax.hero-photo.hero__photo--full {
  filter: none;
  width: 100%;
  height: 100vh;
  position: static;
  overflow: hidden;
}

.cards-column-left {
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 90%;
  display: flex;
  position: static;
}

.card {
  cursor: auto;
  background-color: #fff0;
  border: 1px #000;
  border-right-color: #00000052;
  width: 22.5rem;
  height: 20rem;
  margin-bottom: 0;
  padding: 1rem;
}

.scroll-image-wrapper {
  width: auto;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

.scroll-triger {
  pointer-events: none;
  border: 0 #000;
  height: 100%;
  min-height: 100vh;
  position: absolute;
  inset: auto 0% 0%;
}

.projects {
  max-width: 1404px;
  margin-left: auto;
  margin-right: auto;
}

.project-list {
  width: 100%;
}

.project-item {
  z-index: 99;
  color: #020202;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 8vh;
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
  text-decoration: none;
  display: flex;
  position: relative;
}

.project-link-wrapper {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
  text-decoration: none;
  transition: opacity .2s;
  display: flex;
  position: relative;
  transform: translate(0);
}

.project-content {
  color: #020202;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 8vh;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-right: 3vw;
  line-height: 74px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.project-title {
  color: var(--000);
  font-family: Open Sans, sans-serif;
  font-size: var(--size--text-size-standard);
  letter-spacing: -.02em;
  line-height: 140%;
  text-decoration: none;
}

.feature-work-heading-wrapper {
  margin-top: 0;
  margin-bottom: 0;
}

.gallery-image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.gallery-image-wrapper.mobile {
  z-index: 1;
  box-sizing: border-box;
  border-radius: 0%;
}

.gallery-image-wrapper.mobile:hover {
  z-index: 999;
}

.footer {
  z-index: 3;
  background-color: var(--f5f5f7);
  opacity: 1;
  background-image: linear-gradient(#f5f5f5, #f5f5f5);
  position: relative;
}

.footer-wrapper {
  grid-column-gap: 8rem;
  grid-row-gap: 8rem;
  flex-flow: row;
  justify-content: center;
  align-items: flex-start;
  width: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  display: flex;
}

.footer-column-right {
  flex-flow: column;
  min-width: auto;
  margin-left: 0;
  display: flex;
}

.button {
  z-index: 1;
  border: 1px solid var(--black);
  color: var(--000);
  font-size: var(--size--text-button\<deleted\|variable-761afdc2-a0ae-b12e-e87a-d27483ad4112\>);
  letter-spacing: .05em;
  background-color: #efefef00;
  border-radius: .5rem;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  padding: .5rem 1.5rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.button:hover {
  color: var(--white);
}

.footer-links-wrapper {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  padding: 0;
}

.footer-links-wrapper.tab-footer {
  grid-column-gap: 8rem;
  grid-row-gap: 8rem;
  order: 0;
  align-self: auto;
  max-width: 1440px;
}

.footer-link-wrapper {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  overflow: hidden;
}

.footer__link {
  color: var(--000);
  font-size: var(--size--text-size-standard);
  margin-bottom: .4rem;
  text-decoration: none;
}

.footer__col-title {
  color: var(--000);
}

.footer__col-title.bold {
  font-family: Open Sans, sans-serif;
  font-size: var(--size--text-size-standard);
  margin-bottom: .5rem;
  font-weight: 700;
}

.about-wrapper {
  justify-content: space-between;
  align-items: center;
  max-width: none;
  min-height: auto;
  margin-top: 0;
  margin-right: 0;
  display: none;
}

.about-heading-wrapper {
  flex: 0 auto;
  align-self: flex-end;
  max-width: 60%;
}

.about-header-wraper {
  margin-top: 8rem;
  margin-bottom: 0;
  display: none;
}

.footer-links {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  text-align: left;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.why-choose-us-wrapper {
  margin-top: 6rem;
  margin-bottom: 0;
}

.choose-us-content {
  grid-column-gap: 8rem;
  grid-row-gap: 8rem;
  margin-top: 5rem;
  padding: 0;
}

.choose-us-text {
  max-width: 40ch;
}

.choose-us-item {
  text-align: center;
  justify-content: flex-start;
  align-items: center;
}

.call-to-action-wrapper {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: column;
  justify-content: space-between;
  max-width: 39%;
  height: 15rem;
  margin-bottom: 8rem;
  display: none;
}

.start-your-project-link-wrapper {
  z-index: 1;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: row;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  margin-left: 0;
  padding-top: 1rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.form-block {
  margin-bottom: 0;
}

.contact-form-wrapper {
  justify-content: space-between;
  width: 100%;
  display: flex;
}

.contact-form-wrapper.contact-padding {
  margin-top: 8rem;
}

.submit-button-wrapper {
  justify-content: flex-end;
  display: flex;
}

.field-label {
  color: #090611;
  font-family: Open Sans, sans-serif;
  font-size: var(--size--text-size-standard);
  margin-bottom: 10px;
}

.contact-form-column-right {
  width: 50%;
  margin-left: 1rem;
}

.contact-form__field {
  color: #090611;
  background-color: #fff0;
  border-top: 0 #000;
  border-bottom: 1px solid #c2c2c2;
  border-left: 0 #000;
  border-right: 1px #000;
  padding-left: 0;
  font-family: Open Sans, sans-serif;
}

.contact-form-column-left {
  max-width: 45%;
  margin-bottom: 1rem;
  padding-right: 1rem;
}

.contact-info-wrapper {
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
  margin-top: 12rem;
  margin-bottom: 4rem;
  display: flex;
}

.contact-info-column-right {
  width: 49%;
  margin-left: 1rem;
  display: block;
}

.address-wrapper, .email-wrapper, .phone-wrapper, .office-hours-wrapper {
  margin-bottom: 1rem;
}

.page-link-underline {
  background-color: #121212;
  border: 1px solid #000;
  border-radius: 4px;
  width: 90%;
  height: 1px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: auto 0% 0%;
}

.page-link-block {
  z-index: 3;
  border: 1px solid #0000;
  border-radius: .5rem;
  padding-left: 11px;
  padding-right: 11px;
  text-decoration: none;
  position: relative;
  overflow: visible;
}

.image {
  filter: grayscale(77%);
  transition: filter 1.5s;
}

.image:hover {
  filter: grayscale(0%);
}

.scroll-showcase-image {
  filter: grayscale(20%);
  border-radius: 1.2rem;
  transition: filter .5s;
}

.scroll-showcase-image:hover {
  filter: grayscale(0%);
}

.projects-section {
  margin: 8rem auto 0;
  display: block;
}

.about__container {
  background-color: #0000;
  max-width: 1440px;
  margin-top: 0;
  margin-bottom: auto;
  padding-left: 2rem;
  padding-right: 2rem;
  display: block;
}

.section-title {
  font-family: Open Sans, sans-serif;
  font-size: 2rem;
  font-weight: 600;
}

.section-title.about-change {
  color: var(--000);
  text-align: center;
  font-size: 4rem;
  display: none;
}

.section-title.services-heading-size {
  color: #090611;
  font-size: 4rem;
}

.showcase__image {
  filter: grayscale(30%);
  border-radius: 1.2rem;
  max-height: 100%;
  transition: transform .2s cubic-bezier(.47, 0, .745, .715);
}

.showcase__image:hover {
  filter: grayscale(0%);
  transform: scale(1.02);
}

.hero__note-wrapper {
  text-wrap: balance;
  max-width: none;
  margin-top: 4rem;
  margin-left: auto;
  margin-right: auto;
}

.scroll-wrapper {
  max-width: 1440px;
  margin-top: -60px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
}

.scroll-wrapper.tab-size-wrapper2photo {
  z-index: -1;
  margin-top: 0;
}

.a-block {
  background-color: #92777700;
  border-radius: 4px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
  margin-bottom: 15%;
  margin-left: 40px;
  margin-right: 40px;
  padding: 0%;
  display: flex;
  overflow: hidden;
}

.the-width-400vh-scrollable-div {
  background-color: #fff;
  flex-wrap: wrap;
  align-items: center;
  width: 200vh;
  height: 100%;
  display: flex;
}

.the-overflow-hidden-mask {
  z-index: 200;
  background-color: #0000;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.the-height-400vh-section {
  background-color: var(--f5f5f7);
  border-top: 60px #24242417;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 150vh;
  margin-bottom: -4rem;
  margin-left: 0;
  display: block;
  position: relative;
}

.the-height-400vh-section:focus {
  box-shadow: inset 0 0 0 85px #ff00004a;
}

.the-sticky-div {
  background-color: #f5f5f700;
  border-radius: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1404px;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  position: sticky;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

.modal-wrapper {
  z-index: 999;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-color: #d52e2e00;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: none;
  position: fixed;
  inset: 0%;
}

.modal-wrapper.zone {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  display: none;
}

.modal-wrapper.opt {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  display: none;
  overflow: visible;
}

.modal-wrapper.gen, .modal-wrapper.efect {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  display: none;
}

.service-modal-backdrop {
  cursor: pointer;
  background-color: #00000059;
  display: block;
  position: absolute;
  inset: 0%;
}

.service-modal-backdrop.back4-blur {
  opacity: .7;
  filter: grayscale();
  background-color: #0000007a;
  background-image: url("../images/img-360-f-261917142-athgsu36emnxafsgc8bgfyhasqi1llnl.webp");
  background-position: 50%;
  background-repeat: repeat;
  background-size: cover;
  position: absolute;
}

.service-modal-panel {
  box-sizing: border-box;
  width: 460px;
  height: 400px;
  box-shadow: none;
  outline-offset: 0px;
  text-align: left;
  background-color: #0f111540;
  border: 1px #000;
  border-radius: 12px;
  outline: 3px #333;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  text-decoration: none;
  position: absolute;
  top: 20%;
}

.service-modal-panel.back-blur {
  background-color: #0f1115d9;
  height: 250px;
  padding: 20px;
  box-shadow: 6px 8px 20px 2px #00000080;
}

.service-modal-panel.back-blur.model-size1 {
  z-index: auto;
  background-color: #0f111580;
  border-radius: 1.2rem;
  height: 520px;
  margin-top: 0;
  margin-bottom: 0;
  display: block;
  position: absolute;
  inset: 20% auto auto;
  overflow: visible;
  box-shadow: 6px 8px 5px -5px #0006;
}

.service-modal-text {
  color: #fff;
  text-align: center;
  margin-top: 10px;
  font-family: Open Sans, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}

.service-modal-text.size-text-card4 {
  margin-top: 5px;
  font-size: 13px;
  line-height: 20px;
}

.service-modal-text.headtext-card4 {
  margin-top: 0;
  font-size: 26px;
  font-weight: 400;
}

.service-modal-row {
  height: auto;
  padding-top: 0;
}

.service-modal-close {
  filter: invert();
  color: #fff;
  cursor: pointer;
  max-width: 6%;
  margin-top: 5px;
  margin-right: 5px;
  position: absolute;
  inset: 0% 0% auto auto;
}

.hero__note {
  color: #121212;
  letter-spacing: 0;
  align-self: auto;
  padding-top: 0;
  font-family: Open Sans, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 140%;
}

.hero__note.hero__note--about {
  z-index: 100;
  color: #fff;
  text-align: left;
  text-shadow: 3px 6px 5px #0003;
  margin-bottom: -20px;
  padding-top: 50px;
  padding-bottom: 0;
  padding-left: 50px;
  font-size: 2rem;
  font-weight: 600;
  line-height: 2.5rem;
  display: none;
  position: absolute;
}

.hero__note.hero__note--about.hero__note--lead {
  padding-top: 140px;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2rem;
  display: none;
}

.hero__note.hero__note--compact {
  color: #090611;
  font-size: var(--padding-pd-05);
  text-align: center;
  margin-top: 0;
  margin-bottom: 16px;
  font-weight: 400;
}

.hero__note.hero__note--compact.hero__note--third {
  font-size: var(--about-125);
  margin-top: 0;
  margin-bottom: 20px;
}

.page-about {
  margin-left: auto;
  margin-right: auto;
}

.choose-us__title {
  margin-bottom: .5rem;
  font-family: Open Sans, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
}

.about__lead {
  color: #090611;
  letter-spacing: 0;
  align-self: auto;
  padding-top: 0;
  font-family: Open Sans, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 140%;
}

.about__title {
  text-overflow: clip;
  width: 600px;
  max-width: 600vh;
  height: 100px;
  transform-style: preserve-3d;
  padding-top: 45px;
  font-family: Open Sans, sans-serif;
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 100%;
  transform: scale3d(1, 1.13, 1);
}

.about__title.about-change {
  height: auto;
  color: var(--000);
  padding-top: 0;
}

.text-medium-alt {
  color: #121212;
  padding: 0;
  font-family: Open Sans, sans-serif;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 600;
  line-height: 115%;
  display: block;
}

.text-medium-alt.link {
  z-index: 3;
  padding: .5rem 0;
  font-size: clamp(2rem, 2vw, 1.4rem);
  text-decoration: none;
  display: inline-flex;
  position: relative;
}

.text-medium-alt.link:hover {
  color: #000;
}

.text-medium-alt.about__cta-text {
  color: #090611;
  font-size: 1.4rem;
  font-weight: 600;
}

.gallery-section {
  max-width: none;
  margin-top: 8rem;
}

.why-us-section {
  z-index: 1;
  background-color: var(--white);
  background-image: none;
  background-size: auto;
  margin-top: 0;
  position: relative;
}

.container-medium {
  width: 100%;
  max-width: 65rem;
  margin-left: auto;
  margin-right: auto;
}

.process-item-desc {
  color: #000c;
  text-align: left;
  width: 400px;
  margin-top: 10px;
  font-family: Open Sans, sans-serif;
  font-size: 1rem;
}

.process-item-desc.process__desc--alt {
  text-align: right;
  width: 320px;
}

.process-dot {
  background-color: #0003;
  border-radius: .5rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 2px;
  transition: all .2s;
  display: flex;
  overflow: hidden;
}

.process-dot.active {
  background-color: #525252;
  background-image: linear-gradient(270deg, #c9aaff, #feffbc 25%, #ffcdfd 50%, #b3e2ff 75%, #839aff);
  transform: scale(1.5);
}

.padding-global {
  flex: 1;
  margin-top: 0;
  padding-left: 5%;
  padding-right: 5%;
}

.process-item-icon-frame {
  aspect-ratio: 1;
  object-fit: cover;
  background-color: #f2f2f2;
  border: 1px solid #e6e6e6;
  border-radius: 1.75rem;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 5rem;
  transition: all .35s;
  display: flex;
  overflow: hidden;
  box-shadow: inset 0 -2px 1px #0000001f, inset 0 0 1px 2px #fff;
}

.process-item-icon-frame.active {
  color: #fff;
  background-color: #525252;
  border-style: none;
  box-shadow: inset 0 -2px 2px #000, inset 0 0 12px #fff;
}

.process-item-number {
  text-align: center;
  background-color: #f2f2f2;
  border-radius: .75rem;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  font-family: Open Sans, sans-serif;
  font-weight: 600;
  transition: all .35s;
  display: flex;
  overflow: hidden;
}

.process-item-number.active {
  background-color: #f2f2f2;
  font-family: Open Sans, sans-serif;
  font-weight: 600;
}

.heading-style-h2 {
  color: var(--000);
  letter-spacing: -.05em;
  margin-bottom: 0;
  font-family: Open Sans, sans-serif;
  font-size: 4rem;
  font-weight: 600;
  line-height: 1em;
  overflow: hidden;
}

.process-dot-inner {
  background-color: #fff;
  border-radius: calc(.5rem - 2px);
  flex: 1;
  justify-content: center;
  align-items: center;
  height: 100%;
  transition-property: all;
  transition-duration: .2s;
  transition-timing-function: ease;
  display: flex;
}

.process-dot-inner.active {
  border-radius: inherit;
  border-radius: inherit;
  border-radius: inherit;
  border-radius: inherit;
  border-radius: inherit;
  border-radius: inherit;
  border-radius: inherit;
  border-radius: inherit;
  border-radius: inherit;
  background-image: radial-gradient(circle, #839aff, #b3e2ff 25%, #ffcdfd 50%, #feffbc 75%, #c9aaff);
}

.process-item-number-wrap {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: center;
  align-items: center;
  display: flex;
}

.process-item-content {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-flow: column;
  flex: 1;
  max-width: 20rem;
  display: flex;
}

.process-timeline-alt {
  z-index: 1;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
  position: relative;
}

.process-item-title {
  color: #b7a27a;
  -webkit-text-stroke-color: #2f3437;
  font-family: Open Sans, sans-serif;
  font-size: 2rem;
  font-weight: 700;
}

.heading-wrap {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  display: flex;
}

.heading-wrap.partner-head {
  justify-content: center;
  align-items: center;
  margin-top: 8rem;
  position: static;
}

.process-timeline-alt-track {
  z-index: 1;
  background-color: #81767629;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 1px;
  height: 100%;
  margin: auto;
  display: flex;
  position: absolute;
  inset: 0%;
}

.heading-layout {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0;
  margin-bottom: 4rem;
  display: flex;
}

.heading-layout.size-perevaga {
  margin-top: -4rem;
  margin-bottom: 0;
}

.process-layout {
  grid-column-gap: 5rem;
  grid-row-gap: 5rem;
  background-color: #fff0;
  flex-flow: column;
  margin-top: 8rem;
  padding-top: 0;
  padding-bottom: .5rem;
  display: flex;
}

.process-item-center {
  z-index: 2;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.process-item-block {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  display: flex;
}

.process-item-block.align-right {
  text-align: right;
  justify-content: center;
  align-items: flex-end;
}

.process-dot-dot {
  aspect-ratio: 1;
  object-fit: cover;
  background-color: #525252;
  border-radius: 100vw;
  width: 0;
  transition: all .2s;
}

.process-dot-dot.active {
  background-image: radial-gradient(circle, #525252, #757575 56%, #fff);
  border-radius: 100vw;
  width: .5rem;
  transition: all .2s;
}

.subheading-text {
  color: #0009;
  text-align: center;
  width: 100%;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  font-family: Open Sans, sans-serif;
  font-size: 1.125rem;
}

.process-item {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  background-color: #f0f0f0;
  border-radius: 1.2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr minmax(10rem, .35fr) 1fr;
  grid-auto-columns: 1fr;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  transition: all .2s;
  display: grid;
}

.process-item.active {
  background-color: #f0f0f0;
  border-radius: 1.2rem;
  grid-template-columns: 1fr minmax(10rem, .4fr) 1fr;
}

.process-item.process-line-hide-bottom {
  z-index: -1;
  border-radius: 0;
  width: 40px;
  height: 50%;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  display: block;
  position: absolute;
  inset: auto 0% 0%;
}

.process-item.process-line-hide-top {
  z-index: -1;
  border-radius: 0;
  width: 40px;
  height: 50%;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  display: block;
  position: absolute;
  inset: 0% 0% auto;
}

.process-timeline-alt-fill {
  background-color: var(--black);
  opacity: 1;
  outline-offset: 0px;
  mix-blend-mode: normal;
  outline: 3px #333;
  width: 2px;
  height: 0%;
}

.stat-icon-savings {
  width: 50%;
  height: 50%;
}

.stat-icon-projects {
  background-color: #0000;
  width: 50%;
  height: 50%;
}

.stat-icon-area, .stat-icon-partners, .stat-icon-time {
  width: 50%;
  height: 50%;
}

.hero__subtitle-strong {
  color: #09061180;
  font-weight: 400;
}

.partner-logo {
  width: 100%;
  height: auto;
}

.partner-logo.size-olesa {
  width: 40%;
  margin-left: 45px;
}

.partner-logo.size-arcko {
  filter: invert();
  background-color: #0000;
  width: 100%;
  max-width: none;
  height: auto;
  overflow: clip;
}

.partner-logo.size-sensar {
  filter: invert();
  color: #000;
  background-color: #0000;
}

.partner-logo.mono {
  width: 80%;
  margin-left: 30px;
}

.form-label {
  color: #fff;
  font-family: Open Sans, sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.form-label-alt {
  color: #fff;
  font-family: Open Sans, sans-serif;
  font-weight: 600;
}

.home-form__phone {
  color: #fff;
  background-color: #fff0;
  border-radius: 1.2rem;
  width: 420px;
  margin-bottom: 20px;
}

.service-modal-form {
  column-count: 1;
  margin-top: 1px;
  padding-left: 0;
}

.home-form__name {
  color: #fff;
  background-color: #fff0;
  border-radius: 1.2rem;
  margin-bottom: 20px;
  font-family: Open Sans, sans-serif;
}

.submit-btn {
  cursor: pointer;
  background-color: #3b82f6bf;
  border-radius: 10px;
  margin-top: 20px;
  font-family: Open Sans, sans-serif;
  position: absolute;
  inset: auto 20px;
}

.submit-btn.btm4 {
  mix-blend-mode: normal;
  background-color: #3b82f6cc;
  border-radius: 1.2rem;
}

.submit-btn.btm4:hover {
  mix-blend-mode: color-dodge;
  font-weight: 600;
  transform: scale(1.01);
}

.submit-btn.submit-accent {
  mix-blend-mode: normal;
  background-color: #3b82f6cc;
  border-radius: 1.2rem;
}

.submit-btn.submit-accent {
  mix-blend-mode: normal;
  background-color: #3b82f6cc;
}

.submit-btn.submit-accent:hover {
  mix-blend-mode: color-dodge;
  font-weight: 600;
  transform: scale(1.01);
}

.textarea {
  color: #fff;
  background-color: #0000;
  border-radius: 1.2rem;
  font-family: Open Sans, sans-serif;
}

.form-success-text {
  color: #fff;
  text-align: center;
  font-family: Open Sans, sans-serif;
}

.success-message {
  background-color: #ddd0;
  border: 1px solid #ffffffbf;
  border-radius: 10px;
  margin-top: 25px;
  position: relative;
  top: auto;
  bottom: auto;
}

.hero-section {
  background-image: none;
  max-width: none;
  height: auto;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.back-to-top-inner {
  z-index: 990;
  cursor: pointer;
  width: 75px;
  position: absolute;
  bottom: 1px;
  left: 1px;
}

.back-to-top-icon {
  opacity: .22;
}

.back-to-top-link {
  z-index: 999;
  position: fixed;
  bottom: 10px;
  left: 10px;
}

.back-to-top-link.is-current {
  position: absolute;
}

.header__phone {
  color: #000;
  cursor: pointer;
  background-color: #3898ec00;
  border: 1px solid #000;
  border-radius: .5rem;
  width: 160px;
  font-family: Open Sans, sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.header__phone:hover {
  color: #fff;
  background-color: #000;
  background-image: linear-gradient(#000, #525252);
}

.header__phone.size-phone {
  color: #090611;
  border-radius: 1.2rem;
  width: 130px;
  padding: 7px 0 7px 7px;
  font-size: 12px;
}

.header__phone.size-phone:hover {
  color: #fff;
}

.process-visual-wrap {
  height: max(891.328px, 53.90625vw);
  position: relative;
}

.process-visual-inner {
  background-color: #c7161600;
  background-image: linear-gradient(#0000 86%, #fff);
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.cta-building-image.color {
  filter: sepia(36%);
}

.process-visual-section {
  position: relative;
}

.absolute-image {
  z-index: 0;
  position: absolute;
  inset: 0%;
}

.absolute-image.parallax {
  object-fit: cover;
  object-fit: cover;
  inset: auto 0% 0%;
  border: 1px #000;
  align-self: auto;
  width: 100%;
  max-width: none;
  height: auto;
  position: absolute;
  inset: auto 0% 0%;
}

.absolute-image.parallax:hover {
  opacity: 0;
}

.absolute-image.parallax {
  object-fit: cover;
  object-fit: cover;
  inset: auto 0% 0%;
  border-radius: 1.2rem;
  height: 120%;
  inset: auto 0% 0%;
}

.vertical-headline {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.vertical-headline.center {
  text-align: center;
  justify-content: flex-start;
  align-items: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.vertical-wrapper {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  flex-flow: column;
  margin-top: 8rem;
  display: flex;
}

.project__overview-item {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.heading-small {
  letter-spacing: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 120%;
}

.heading-small.c3 {
  color: #1274cf;
}

.project__intro-content {
  grid-column-gap: 1.5rem;
  grid-row-gap: 5rem;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr minmax(auto, 45rem);
  grid-auto-columns: 1fr;
  display: grid;
}

.hero__content {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  background-color: #0000;
  border-radius: 0;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  height: auto;
  max-height: none;
  padding: 0;
  display: none;
  position: relative;
  overflow: hidden;
}

.project__intro-text {
  grid-column-gap: 1.25rem;
  grid-row-gap: 1.25rem;
  color: #000000bf;
  flex-flow: column;
  display: flex;
}

.section__container {
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

.hero {
  margin-top: 0;
}

.sections {
  flex: 1;
  margin-top: 0;
}

.project__info-grid {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  grid-template-rows: 340px 340px;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.spacer-regular {
  width: 100%;
  height: 6rem;
}

.spacer-large {
  width: auto;
  max-width: 1184px;
  height: 8rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 60px;
}

.spacer-large.bot-large {
  height: 6rem;
  padding-top: 30px;
}

.text-large {
  color: #090611;
  font-family: Open Sans, sans-serif;
  font-size: 1.25rem;
  line-height: 150%;
}

.max-width-regular {
  width: 100%;
  max-width: 74rem;
  margin-left: auto;
  margin-right: auto;
}

.absolute-img {
  object-fit: cover;
  border-radius: 0;
  width: 100%;
  height: auto;
  position: static;
  inset: 0%;
}

.object__overview {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-family: Open Sans, sans-serif;
  display: flex;
}

.object__text {
  color: #090611;
  font-family: Open Sans, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 150%;
}

.partner-logo-fomich {
  filter: invert();
  width: 90%;
  height: auto;
  margin-left: 7px;
}

.partner-logo-fomich.size-olesa {
  width: 40%;
}

.partner-logo-fomich.size-arcko {
  filter: invert();
  background-color: #0000;
  width: 100%;
  max-width: none;
  height: auto;
}

.partner-logo-fomich.fomich {
  margin-left: 0;
}

.projects__accent {
  padding-top: 6rem;
  padding-bottom: 6rem;
  overflow: clip;
}

.projects__accent.accent {
  background-color: #fff;
  width: auto;
  max-width: 1440px;
  height: auto;
  max-height: none;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  overflow: hidden;
}

.project-card {
  background-color: #fff;
  border-radius: 1.2rem;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  min-height: auto;
  padding: 1rem;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: clip;
}

.projects-grid {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: .75fr .8fr 1fr;
  grid-auto-columns: 1fr;
  height: 512px;
  display: grid;
}

/* Ряди задаються grid-auto-rows, а не переліком grid-template-rows:   */
/* карток на цій сітці стільки, скільки об'єктів, і перелік застаріває */
/* щоразу, коли new-object.py додає ще один. Раніше тут стояв перелік  */
/* на 14 рядів під 28 карток та height: 1500px — 29-та картка падала в */
/* неявний ряд і виходила 59px замість 198px. 95px — це заміряна на    */
/* попередній збірці висота ряду: картка займає два ряди плюс проміжок */
/* (95 * 2 + 8 = 198). Висота секції теж auto, інакше сітка вилазить   */
/* на футер. grid-template-rows: none тут обов'язковий — інакше з      */
/* .projects-grid лишається один явний ряд auto, і перший ряд карток   */
/* виходить нульовим.                                                  */
.projects-grid.is-all {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  grid-template-rows: none;
  grid-auto-rows: minmax(95px, 95px);
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-flow: row;
  height: auto;
}

.projects-grid-wrapper {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  display: flex;
}

.about-change {
  color: var(--000);
}

.object__gallery-image, .object__gallery-image-main, .object__gallery-link-main {
  border-radius: 1.2rem;
}

.footer__contact-icon {
  pointer-events: none;
  width: 10%;
  height: auto;
  margin-top: 7px;
}



.footer__link-text {
  font-family: Open Sans, sans-serif;
}

.footer__contact-item {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  overflow: hidden;
}

.footer__contact-email {
  margin-top: 0;
  font-family: Open Sans, sans-serif;
  font-size: 1rem;
}


.footer__contact-item {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  overflow: hidden;
}

.footer__contact-phone {
  margin-top: 0;
  font-family: Open Sans, sans-serif;
  font-size: 1rem;
}

.footer__contact-item {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  overflow: hidden;
}

.footer__contact-address {
  margin-top: 0;
  font-family: Open Sans, sans-serif;
  font-size: 1rem;
}

.footer__contact-item {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  overflow: hidden;
}

.footer__contact-hours {
  margin-top: 0;
  font-family: Open Sans, sans-serif;
  font-size: 1rem;
}

.start-project-link-wrapper {
  z-index: 1;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: row;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  margin-left: 0;
  padding-top: 1rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.contact-form__submit {
  color: #090611;
  background-color: #fff;
  border: 1px solid #00000080;
  border-radius: 1.2rem;
  font-family: Open Sans, sans-serif;
}

.contact-form__submit:hover {
  transform: scale(1.05);
}

.contact-form__done-text, .contact-form__fail-text {
  font-family: Open Sans, sans-serif;
}

.contact {
  margin-top: 0;
  overflow: visible;
}

.services-cards-desktop {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: row;
  justify-content: space-between;
  align-items: stretch;
  padding-bottom: 0;
  display: flex;
}

.gallery-showcase-grid {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  grid-template: ". Area-2 Area"
                 ". Area-3 Area-4"
                 ". . ."
                 ". Area-5 ."
                 ". . ."
                 ". . ."
                 ". . ."
                 ". . ."
                 ". . ."
                 ". . ."
                 ". . ."
                 / .5fr .5fr .5fr .5fr .5fr .5fr .5fr;
  grid-auto-rows: minmax(0, .5fr);
  margin-top: 0;
  overflow: visible;
}

.services-header-media {
  flex-flow: column;
  width: 40%;
  height: 50svh;
  display: flex;
  position: static;
}

.header__link-projects, .header__link-about, .header__link-career,
.header__link-services {
  text-decoration: none;
}

.footer__note {
  margin-top: 54px;
  font-family: Open Sans, sans-serif;
  font-weight: 600;
}

.partners-marquee-track {
  background-color: var(--white);
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  padding-bottom: 0;
  display: flex;
  position: relative;
}

.projects__accent-container {
  width: 100%;
  max-width: none;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding-left: 4rem;
  padding-right: 4rem;
}

.btn-backtoproject {
  background-color: #fff;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  max-width: none;
  margin: auto;
  display: flex;
}

.back-link {
  float: right;
  color: #090611;
  background-color: #fff;
  border: 1px solid #0006;
  border-radius: 1.2rem;
  margin-left: auto;
  margin-right: auto;
  font-family: Open Sans, sans-serif;
  display: block;
  position: static;
}

.back-link:hover {
  transform: scale(1.05);
}

.partners__link-nova {
  width: 150px;
  height: 150px;
}

.gallery-image-wide {
  filter: grayscale(30%);
  border-radius: 1rem;
  max-height: 100%;
  transition: transform .5s, filter 1.5s;
}

.gallery-image-wide:hover {
  filter: grayscale(0%);
  transform: scale(1.01);
}

.about__intro {
  margin-top: 0;
}

.services-section {
  background-color: #f5f5f7;
  height: auto;
  margin-top: 4rem;
}

.card__title {
  cursor: auto;
  margin-bottom: .5rem;
  font-family: Open Sans, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 115%;
}

.card__title-strong {
  color: #090611;
  cursor: auto;
  font-family: Open Sans, sans-serif;
  font-size: 1.1rem;
}

.services-container {
  background-color: #0000;
  max-width: 1440px;
  margin-top: auto;
  margin-bottom: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

.services__columns {
  background-image: none;
  justify-content: space-between;
  width: 100%;
  height: 50svh;
  display: flex;
  position: static;
}

.services-header-image {
  filter: grayscale(20%);
  border-radius: 1.2rem;
  transition: filter .5s;
}

.services-header-image:hover {
  filter: grayscale(0%);
}

.service-card-cta {
  color: #090611;
  -webkit-text-stroke-color: #000;
  cursor: pointer;
  background-color: #3898ec00;
  border: 1px solid #00000080;
  border-radius: 1.2rem;
  margin-top: 15px;
  margin-right: 0;
  font-family: Open Sans, sans-serif;
}

.service-card-cta:hover {
  transform: scale(1.05);
}

.services__background {
  background-color: #f5f5f7;
}

.service-card-text {
  width: 240.75px;
  margin-bottom: 0;
  font-family: Open Sans, sans-serif;
}

.header__phone-icon {
  display: none;
}

.page-hero {
  height: 68rem;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.page-hero__inner {
  width: 100%;
  height: auto;
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
}

.page-hero__image {
  filter: saturate(105%);
  height: 68rem;
}

.page-hero__title {
  z-index: 2;
  color: var(--white);
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: var(--padding-pd-10);
  text-align: center;
  text-shadow: 7px 7px 20px #000;
  margin-top: 26rem;
  margin-left: 0;
  font-weight: 700;
  position: absolute;
  inset: 0% 0% auto;
}

.about-hero {
  margin-left: auto;
  margin-right: auto;
}

.about-hero__inner {
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
}

.about-hero__image {
  height: 100vh;
}

.project-card__title {
  text-align: center;
  font-family: Open Sans, sans-serif;
  font-weight: 600;
}

.page-hero__title-low {
  color: var(--white);
  text-align: center;
  text-shadow: 7px 7px 20px #000;
  margin-top: 26rem;
  margin-left: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-weight: 700;
  position: absolute;
  inset: 0% 0% auto;
}

/* Проміжок задає gap, а не залишок фіксованої коробки. Було: ширина
   400px і justify-content: space-between, тобто відстань між пунктами =
   (400 - сума слів) / кількість щілин. Поки пунктів було п'ять, лишалось
   116px і виходило по 23px. Шостий пункт («Послуги») з'їв половину:
   лишилось 60px, тобто по 12px, і слова майже злиплись. Тепер відстань
   стала власним значенням зі шкали (1.5rem = --padding-pd-06 ≈ ті самі
   24px), а коробка звузилась до вмісту й далі центрується автомаржами.
   Сьомий пункт колись нічого не зіпсує — він просто зробить меню
   ширшим, а місця обабіч є з запасом (на 1000px по 160px з боку). */
.header__menu {
  float: none;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 40px;
  margin-left: auto;
  margin-right: auto;
  font-family: Open Sans, sans-serif;
  /* 600 тут не нове значення: рівно ним набране це саме меню на телефоні
     (правила .header__menu нижче 992px). На десктопі воно лишалось 400 —
     успадкованим від body, — і шість слів по 14px читались як дрібний
     сірий рядок. Контраст при цьому нормальний (заміряно поверх фото
     героя: 9.35 у середньому, 5.77 у найтемнішій точці, при порозі AA
     4.5), тобто бракувало не контрасту, а ваги. */
  font-weight: 600;
  display: flex;
}

.showcase__link {
  cursor: pointer;
}

.footer__col {
  text-align: left;
  justify-content: flex-start;
  align-items: center;
  padding-left: 0;
}

.service-card-text-alt {
  margin-bottom: 0;
  font-family: Open Sans, sans-serif;
}

.btn-primary {
  text-decoration: none;
  display: flex;
}

.btn-primary-inner {
  color: #fff;
  background-color: #010101;
  border-radius: 99999px;
  height: 50px;
  padding: 12px 28px 14px;
  font-size: 16px;
  overflow: hidden;
}

.btn-primary-inner.btn-primary-inner--white {
  color: #010101;
  background-color: #fff0;
  border: 1px solid #00000080;
  border-radius: 1.2rem;
  padding-top: 14px;
}

.btn-icon {
  width: 20px;
  height: 20px;
}

.btn-icon.btn-icon--white {
  filter: invert();
}

.btn-primary-text {
  margin-bottom: 17px;
  padding-top: 0;
}

.btn-primary-text.btn-primary-text--white {
  margin-bottom: 19px;
  font-family: Open Sans, sans-serif;
}

.btn-icon-wrap {
  background-color: #010101;
  border-radius: 99999px;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  display: flex;
}

.btn-icon-wrap.btn-icon-wrap--white {
  background-color: #fff0;
  border: 1px solid #00000080;
  border-radius: 1.2rem;
}

.button-wrapper {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.cta-banner-section {
  padding-top: 6rem;
  padding-bottom: 6rem;
  overflow: clip;
}

.cta-banner-section.cta {
  background-color: #081010;
  background-image: linear-gradient(#0f1b229a, #0f1b229a), url("../images/av-pr-3-3webp.webp");
  background-position: 0 0, 50%;
  background-size: auto, cover;
  height: 100vh;
}

.cta-banner__text {
  color: #3a4140;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
}

.cta-banner__text.white {
  color: #fefcf8;
  font-family: Open Sans, sans-serif;
}

.cta-banner__subtitle {
  color: #081010;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
}

.cta-banner__subtitle.white {
  color: #fefcf8;
  font-family: Open Sans, sans-serif;
}

.cta-button {
  color: #fefcf8;
  text-align: center;
  background-color: #081010;
  justify-content: flex-start;
  align-items: flex-end;
  padding: .75rem 2rem;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: all .3s;
}

.cta-button:hover {
  background-color: #3a4140;
}

.cta-button.secondary-white {
  color: #fefcf8;
  background-color: #0000;
  border: 1px solid #fefcf8;
  border-radius: 1.2rem;
}

.cta-button.secondary-white:hover, .cta-button.btn-primary-inner--white {
  color: #081010;
  background-color: #fefcf8;
}

.cta-button.btn-primary-inner--white:hover {
  color: #fefcf8;
  background-color: #3a4140;
}

.cta-banner-title {
  color: #081010;
  font-size: 64px;
  font-weight: 400;
  line-height: 1.1;
}

.cta-banner-title.cta-heading {
  color: #fefcf8;
  max-width: 44rem;
  font-family: Open Sans, sans-serif;
}

.cta-button__text.cta-button__text--white {
  font-family: Open Sans, sans-serif;
}

.cta-button__text-wrapper {
  flex-flow: column;
  height: 1.5rem;
  overflow: hidden;
}

.cta-banner-container {
  width: 100%;
  max-width: 1800px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 4rem;
  padding-right: 4rem;
}

.services-cards-mobile {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: row;
  justify-content: space-between;
  align-items: stretch;
  padding-bottom: 2rem;
  display: none;
}

.page-hero__scrim {
  z-index: 1;
  background-image: linear-gradient(#0000004d, #0000004d);
  width: 100%;
  height: 68rem;
  position: absolute;
}

.hero-copy-column {
  margin-top: 14rem;
  margin-left: 2rem;
  padding-left: 0;
  position: absolute;
}

.hero-title.hero-title-text {
  width: 700px;
  font-family: Open Sans, sans-serif;
  font-size: var(--padding-pd-10);
  font-weight: 600;
}

.hero-subtitle.hero-subtitle-text {
  margin-top: 2rem;
  margin-bottom: 2rem;
  font-family: Open Sans, sans-serif;
  font-weight: 400;
}

.photo-phone {
  display: none;
}

.partners__link-avalon {
  width: 100%;
}

.partner-logo-fomich {
  width: 100%;
  height: auto;
}

.partner-logo-fomich.size-olesa {
  width: 40%;
  margin-left: 45px;
}

.partner-logo-fomich.size-arcko {
  filter: invert();
  background-color: #0000;
  width: 100%;
  max-width: none;
  height: auto;
  overflow: clip;
}

.partner-logo-fomich.size-sensar {
  filter: invert();
  color: #000;
  background-color: #0000;
}

.partner-logo-lvivbud {
  width: 100%;
  height: auto;
}

.partner-logo-lvivbud.size-olesa {
  width: 40%;
  margin-left: 45px;
}

.partner-logo-lvivbud.size-arcko {
  filter: invert();
  background-color: #0000;
  width: 100%;
  max-width: none;
  height: auto;
  overflow: clip;
}

.partner-logo-lvivbud.size-sensar {
  filter: invert();
  color: #000;
  background-color: #0000;
}

.partner-logo-block {
  background-color: #92777700;
  border-radius: 4px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
  margin-bottom: 15%;
  margin-left: 40px;
  margin-right: 40px;
  padding: 0%;
  display: flex;
  overflow: hidden;
}

.about__contact.about__contact--photo {
  background-image: linear-gradient(#00000099, #00000099), url("../images/career-bg.webp");
  background-position: 0 0, 30% 50%;
  background-size: auto, cover;
  max-width: 1440px;
  margin-top: 6rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.contact-from {
  z-index: 2;
  position: relative;
}

.contact-header-number-t {
  text-decoration: none;
}

.contact-left-center-wrap {
  grid-column-gap: 34px;
  grid-row-gap: 34px;
  flex-flow: column;
  display: flex;
}

.contact-right-from-wrap {
  border-radius: 1.2rem;
  padding-top: 30px;
  padding-left: 50px;
  padding-right: 50px;
}

.contact-center-box {
  grid-column-gap: 7px;
  grid-row-gap: 7px;
  flex-flow: column;
  display: flex;
}

.about-form__done {
  color: #111;
  background-color: #fff;
  border-radius: 5px;
}

.contact-left-content-wrap {
  grid-column-gap: 58px;
  grid-row-gap: 58px;
  flex-flow: column;
  justify-content: center;
  width: 625px;
  display: flex;
}

.about-form__submit {
  color: #111;
  letter-spacing: 0%;
  text-transform: uppercase;
  background-color: #e9e9e9;
  border-radius: 1.2rem;
  margin-top: 25px;
  padding: 18px 40px;
  font-family: Open Sans, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 110%;
  transition: background-color .45s;
}

.about-form__submit:hover {
  color: #fff;
  background-color: #636363;
}

.contact-left-top-content-wrap {
  grid-column-gap: 18px;
  grid-row-gap: 18px;
  flex-flow: column;
  display: flex;
}

.contact-right-content-wrap {
  background-color: #000000b3;
  border-radius: 1.2rem;
  width: 625px;
  padding-bottom: 40px;
}

.contact-h2 {
  color: #fff;
  max-width: 350px;
  font-family: Open Sans, sans-serif;
  font-weight: 400;
}

.contact-row {
  z-index: 2;
  grid-column-gap: 29px;
  grid-row-gap: 29px;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.contact-center-t {
  color: #c2c2c2;
  letter-spacing: 0%;
  text-transform: uppercase;
  font-family: Open Sans, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 118%;
}

.about-form__fail {
  color: #fff;
  background-color: #df720c;
  border-radius: 5px;
}

.contact-left-bottom-icon-link {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  display: flex;
}

.about-form__phone {
  color: #fff;
  background-color: #0000;
  border: 1px #000;
  border-bottom: 2px solid #ffffff4d;
  margin-bottom: 0;
  padding: 40px 0 25px;
  font-family: Open Sans, sans-serif;
  transition: border-color .4s;
}

.about-form__phone:hover {
  border-bottom-color: #eee;
}

.about-form__email {
  color: #fff;
  background-color: #0000;
  border: 1px #000;
  border-bottom: 2px solid #ffffff4d;
  margin-bottom: 0;
  padding: 40px 0 25px;
  font-family: Open Sans, sans-serif;
  transition: border-color .4s;
}

.about-form__email:hover {
  border-bottom-color: #eee;
}

.contact-header-email-t {
  text-decoration: none;
}

.about-form__comment {
  color: #fff;
  background-color: #0000;
  border: 1px #000;
  border-bottom: 2px solid #ffffff4d;
  margin-bottom: 20px;
  padding: 50px 0 60px;
  font-family: Open Sans, sans-serif;
  transition: border-color .4s;
}

.about-form__comment:hover {
  border-bottom-color: #eee;
}

.about-form__name {
  color: #fff;
  background-color: #0000;
  border: 1px #000;
  border-bottom: 2px solid #ffffff4d;
  margin-bottom: 0;
  padding: 30px 0 25px;
  font-family: Open Sans, sans-serif;
  transition: border-color .4s;
}

.about-form__name:hover {
  border-bottom-color: #eee;
}

.contact-left-bottom-content-wrap {
  grid-column-gap: 49px;
  grid-row-gap: 49px;
  flex-flow: column;
  display: flex;
}

.contact-center-text {
  color: #fff;
  letter-spacing: -.48px;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Open Sans, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 90%;
}

.contact-link {
  border: 1px solid #ffffff26;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
}

.contact-t {
  color: #f4c542;
  font-family: Open Sans, sans-serif;
  font-size: var(--padding-pd-07);
  letter-spacing: 0%;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 118%;
}

.about__social-link {
  border: 1px solid #ffffff26;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
}

.about__contact-inner {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.about__social-icon {
  filter: invert();
}

.hero__note-strong {
  font-size: var(--padding-pd-06);
}

.hero__note--third {
  color: #1274cf;
  font-size: var(--padding-pd-06);
}

.process-timeline {
  z-index: 1;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
  position: relative;
}

.process-timeline-track {
  z-index: 1;
  background-color: #e6e6e6;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 1px;
  height: 100%;
  margin: auto;
  display: flex;
  position: absolute;
  inset: 0%;
}

.process-timeline-fill {
  background-image: linear-gradient(#00000080, #010035b3 25%, #16001580 50%, #000f18b3 75%, #00051d80);
  width: 3px;
  height: 0%;
  font-size: 7px;
}

@media screen and (min-width: 1280px) {
  .brand {
    width: 130px;
  }

  .parallax.hero-photo.hero__photo--full {
    height: 100vh;
  }

  .card {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .scroll-image-wrapper {
    width: auto;
  }

  .scroll-target.tab-size-wrapper2photo, .scroll-triger {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-wrapper {
    padding-bottom: 2rem;
  }

  .choose-us-item {
    text-align: center;
    justify-content: flex-start;
    align-items: center;
  }

  .call-to-action-wrapper {
    display: none;
  }

  .scroll-wrapper.tab-size-wrapper2photo {
    margin-right: auto;
  }

  .heading-layout.size-perevaga {
    margin-top: -4rem;
  }

  .partner-logo.mono {
    width: 80%;
    margin-left: 30px;
  }

  .hero-section {
    background-image: none;
    height: auto;
  }

  .partner-logo-fomich.fomich {
    margin-left: 0;
  }

  .services-cards-desktop {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
    max-width: 1440px;
    padding-bottom: 0;
  }

  .card__title-strong, .card__title {
    font-size: 1rem;
  }

  .service-card-text {
    width: auto;
  }

  .page-hero {
    background-color: #0000;
    height: 68rem;
  }

  .page-hero__inner {
    background-color: #0000;
  }

  .page-hero__image {
    background-color: #0000;
    height: 68rem;
  }

  .page-hero__title {
    z-index: 2;
    font-size: var(--padding-pd-10);
  }

  .about-hero__image {
    height: 68rem;
  }

  .btn-primary.white {
    margin-top: 2rem;
  }

  .btn-primary-inner.btn-primary-inner--white {
    background-color: #fff0;
    border: 1px solid #00000080;
    border-radius: 1.2rem;
    padding-top: 14px;
    font-family: Open Sans, sans-serif;
  }

  .btn-primary-text.btn-primary-text--white {
    margin-bottom: 19px;
  }

  .btn-icon-wrap.btn-icon-wrap--white {
    background-color: #fff0;
    border: 1px solid #00000080;
    border-radius: 1.2rem;
  }

  .cta-banner-section.cta {
    background-image: linear-gradient(#0000009a, #0000009a), url("../images/av-pr-3-3webp.webp");
    height: 110vh;
  }

  .cta-banner__text.white, .cta-banner__subtitle.white {
    font-family: Open Sans, sans-serif;
  }

  .cta-button.secondary-white {
    border-radius: 1.2rem;
  }

  .cta-banner-title.cta-heading, .cta-button__text.cta-button__text--white {
    font-family: Open Sans, sans-serif;
  }

  .services-cards-mobile {
    display: none;
  }

  .page-hero__scrim {
    z-index: 1;
    background-image: linear-gradient(#0000004d, #0000004d);
    width: 100%;
    height: 68rem;
    position: absolute;
  }

  .hero-copy-column {
    margin-top: 14rem;
    margin-left: 2rem;
    position: absolute;
  }

  .hero-title.hero-title-text {
    width: 650px;
    font-family: Open Sans, sans-serif;
    font-size: var(--padding-pd-10);
    font-weight: 600;
  }

  .hero-subtitle.hero-subtitle-text {
    margin-top: 2rem;
    font-family: Open Sans, sans-serif;
    font-weight: 400;
  }

  .photo-phone {
    display: none;
  }

  .about__contact.about__contact--photo {
    background-image: linear-gradient(#00000099, #00000099), url("../images/career-bg.webp");
    background-position: 0 0, 50% calc(100% + 6rem);
    background-size: auto, cover;
  }
}

@media screen and (min-width: 1440px) {
  img {
    max-width: none;
  }

  .navbar {
    background-color: #ffffff80;
  }

  .link-text {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  .brand {
    width: 130px;
  }

  .link-box {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  .hero-image-wrapper.about-photo.hero__photo-box {
    height: auto;
  }

  .parallax.hero-photo.hero__photo--full {
    object-fit: cover;
    height: 100vh;
  }

  .footer {
    border: 1px #000;
    border-radius: 0;
  }

  .footer-wrapper {
    padding-bottom: 2rem;
  }

  .choose-us-content {
    grid-column-gap: 10rem;
    grid-row-gap: 4.88rem;
    text-align: left;
    margin-top: 8rem;
    margin-left: 0;
    padding-left: 0;
    padding-right: 30px;
  }

  .choose-us-text {
    text-align: center;
  }

  .choose-us-item {
    text-align: left;
    justify-content: flex-start;
    align-items: center;
  }

  .call-to-action-wrapper {
    display: none;
  }

  .contact-form-wrapper.contact-padding {
    margin-top: 10rem;
  }

  .contact-info-wrapper {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    justify-content: space-between;
    align-items: flex-start;
    height: auto;
    margin-top: 6rem;
    margin-bottom: 10rem;
  }

  .contact-info-column-right {
    width: 50%;
    margin-left: 0;
  }

  .showcase__image {
    filter: grayscale(15%);
    transition-duration: .4s;
  }

  .the-width-400vh-scrollable-div {
    background-color: #fff0;
  }

  .the-overflow-hidden-mask {
    margin-bottom: 0;
  }

  .the-height-400vh-section {
    display: block;
  }

  .page-about {
    background-color: var(--black);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  .text-medium-alt.link {
    border-radius: 1.2rem;
  }

  .why-us-section {
    margin-top: 0;
  }

  .heading-layout.size-perevaga {
    margin-top: -4rem;
  }

  .hero__subtitle-strong {
    font-family: Open Sans, sans-serif;
  }

  .partner-logo.size-sensar {
    filter: invert(200%);
  }

  .partner-logo.mono {
    width: 80%;
    margin-left: 0;
    padding-left: 30px;
  }

  .hero-section {
    background-image: none;
    height: auto;
  }

  .heading-small.c3 {
    color: #3b82f6;
  }

  .project__intro-content {
    grid-template-rows: auto;
  }

  .spacer-regular {
    height: 8rem;
  }

  .spacer-large.bot-large {
    height: 8rem;
    padding-top: 0;
  }

  .partner-logo-fomich.fomich {
    margin-left: 0;
  }

  .projects-grid.is-all {
    grid-auto-rows: minmax(95px, 95px);
  }

  .contact {
    background-image: linear-gradient(#fffc, #fffc), url("../images/ytsu1.webp");
    background-position: 0 0, 50% 0;
    background-size: auto, cover;
    height: auto;
  }

  .services-cards-desktop {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    padding-bottom: 0;
    display: flex;
  }

  .partners-marquee-track {
    background-color: var(--white);
  }

  .btn-backtoproject {
    flex-flow: row;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
  }

  .back-link {
    border-width: .5px;
    margin-top: 40px;
  }

  .gallery-image-wide {
    filter: grayscale(15%);
  }

  .card__title-strong, .card__title {
    font-size: 1.1rem;
  }

  .service-card-text {
    width: auto;
  }

  .page-hero {
    height: auto;
  }

  .page-hero__image {
    height: 100vh;
  }

  .page-hero__title {
    z-index: 2;
    font-size: var(--padding-pd-10);
  }

  .about-hero {
    height: auto;
  }

  .about-hero__image {
    height: 100vh;
  }

  .page-hero__title-low {
    z-index: 2;
    font-size: var(--padding-pd-10);
  }

  .footer__col {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .btn-primary.white {
    margin-top: 2rem;
  }

  .btn-primary-inner.btn-primary-inner--white {
    background-color: #fff0;
    border: 1px solid #00000080;
    border-radius: 1.2rem;
    padding-top: 14px;
  }

  .btn-primary-text.btn-primary-text--white {
    margin-bottom: 19px;
    padding-top: 0;
    font-family: Open Sans, sans-serif;
  }

  .btn-icon-wrap.btn-icon-wrap--white {
    background-color: #fff0;
    border: 1px solid #00000080;
  }

  .cta-banner-section.cta {
    background-image: linear-gradient(#0000009a, #0000009a), url("../images/av-pr-3-3webp.webp");
    background-position: 0 0, 50%;
    background-size: auto, cover;
    height: 110vh;
    display: block;
  }

  .cta-banner__text.white {
    color: #fefcf8cc;
    font-family: Open Sans, sans-serif;
  }

  .cta-banner__subtitle.white {
    font-family: Open Sans, sans-serif;
  }

  .cta-button.secondary-white {
    border-radius: 1.2rem;
  }

  .cta-banner-title.cta-heading {
    text-shadow: 1px 1px 1px #000;
    font-family: Open Sans, sans-serif;
  }

  .cta-button__text.cta-button__text--white {
    font-family: Open Sans, sans-serif;
  }

  .services-cards-mobile {
    display: none;
  }

  .page-hero__scrim {
    z-index: 1;
    background-image: linear-gradient(#0000004d, #0000004d);
    height: 100vh;
  }

  .hero-slogan-block {
    background-color: #000000bd;
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .hero-slogan-block.hero-slogan-wrap {
    background-color: #0000;
  }

  .hero-copy-column {
    max-width: none;
    margin-top: 15rem;
    margin-left: 0;
    padding-left: 8rem;
  }

  .hero-title {
    width: 600px;
    margin-top: 20rem;
    font-family: Open Sans, sans-serif;
    font-weight: 600;
  }

  .hero-title.hero-title-text {
    font-size: var(--padding-pd-10);
    margin-top: 0;
    font-weight: 600;
  }

  .hero-subtitle {
    width: 380px;
  }

  .hero-subtitle.hero-subtitle-text {
    color: #000;
    background-color: #0000;
    margin-top: 2rem;
    font-family: Open Sans, sans-serif;
    font-weight: 400;
  }

  .photo-phone {
    display: none;
  }

  .partner-logo-fomich.size-sensar {
    filter: invert(200%);
  }

  .partner-logo-lvivbud {
    width: 165%;
    margin-right: 0;
    padding-right: 100px;
  }

  .partner-logo-lvivbud.size-sensar {
    filter: invert(200%);
  }

  .about__contact {
    background-color: #5e5e5e;
    background-image: linear-gradient(#00000099, #00000099), url("../images/career-bg.webp");
    background-position: 0 0, 50% calc(100% + 6rem);
    background-size: auto, cover;
    height: auto;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: visible;
  }

  .about__contact.about__contact--photo {
    background-image: linear-gradient(#00000099, #00000099), url("../images/career-bg.webp");
    background-position: 0 0, 50% calc(100% + 6rem);
    background-size: auto, cover;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .contact-from {
    flex-flow: row;
    display: block;
  }

  .contact-left-center-wrap {
    font-family: Open Sans, sans-serif;
  }

  .contact-right-from-wrap {
    background-color: #0000;
    border: 1px #000;
    border-radius: 1.2rem;
  }

  .contact-left-content-wrap {
    text-align: left;
  }

  .contact-link-img {
    border-radius: 0;
  }

  .about-form__submit {
    border-radius: 1.2rem;
    font-family: Open Sans, sans-serif;
  }

  .contact-right-content-wrap {
    background-color: #000000b3;
    border-radius: 1.2rem;
  }

  .contact-h2 {
    max-width: 350px;
    font-family: Open Sans, sans-serif;
    font-weight: 400;
  }

  .contact-row {
    flex-flow: row;
    justify-content: center;
    align-items: center;
    max-width: 1320px;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
  }

  .contact-center-t {
    font-family: Open Sans, sans-serif;
  }

  .about-form__phone, .about-form__email, .about-form__comment {
    border-bottom-width: 2px;
    border-bottom-color: #ffffff4d;
    font-family: Open Sans, sans-serif;
  }

  .about-form__name {
    background-color: #0000;
    border-bottom: 2px solid #ffffff4d;
    border-radius: 0;
    font-family: Open Sans, sans-serif;
  }

  .contact-link {
    border-style: none;
    border-radius: 0%;
  }

  .contact-t {
    color: #f4c542;
    font-family: Open Sans, sans-serif;
    font-size: var(--padding-pd-07);
    font-weight: 600;
  }

  .about__social-link {
    filter: invert();
    border-style: none;
    border-radius: 0%;
  }

  .about__contact-inner {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .about__social-icon {
    filter: none;
    border-radius: 0;
  }
}

@media screen and (max-width: 991px) {

  .container {
    max-width: none;
    height: auto;
  }

  .container.contact {
    margin-top: 2rem;
  }

  .navbar {
    z-index: 999;
  }

  .navbar-wrapper {
    grid-column-gap: 20%;
    grid-row-gap: 20%;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: center;
    min-height: auto;
    padding-right: 10px;
  }

  .link {
    justify-content: center;
    align-items: center;
    padding-left: 10px;
    display: flex;
    position: relative;
  }

  .link.is-current {
    height: auto;
    padding-top: 16px;
    padding-left: 9px;
    position: relative;
  }

  .brand {
    width: 90px;
  }

  .brand.is-current {
    width: auto;
  }

  .navbar-underline {
    height: 1px;
  }

  /* Тут стояло правило .menu-button (ширина/висота 64-80px), яке ніколи
     не діяло: у вихідному експорті перед ним лишилась одинока крапка,
     а це неправильний селектор — браузер відкидає весь блок разом із
     нею. Прибрано разом із крапкою, бо мертвий код тут не просто зайвий:
     він описує розміри бургера, яких у бургера немає, і збиває з пантелику
     кожного, хто прийде правити навбар. Справжні розміри — у pages.css. */

  .menu-button.is-open {
    background-color: #c8c8c800;
    width: 2rem;
    min-width: auto;
    height: 2rem;
    margin-left: auto;
    margin-right: 0;
  }

  .logo {
    width: 90px;
    height: auto;
  }

  .hero-wrapper {
    margin-top: -2rem;
  }

  .contact__lead {
    line-height: 120%;
  }

  .hero-image-wrapper {
    height: 40svh;
  }

  .hero-image-wrapper.about-photo {
    height: auto;
    margin-top: 1rem;
  }

  .font-size-medium {
    width: 245px;
  }

  .font-size-medium.margin-bottom-1rem {
    text-align: left;
  }

  .card {
    width: 300px;
    height: 20rem;
    padding-left: 0;
  }

  .scroll-image-wrapper {
    width: auto;
    height: auto;
  }

  .scroll-target.tab-size-wrapper2photo {
    max-width: 820px;
  }

  .projects {
    margin-bottom: 0;
  }

  .project-list {
    width: 100%;
  }

  .project-item {
    grid-column-gap: 1rem;
    grid-row-gap: 1.5rem;
    height: 100%;
    padding: 0 3vw;
    display: block;
    position: static;
    overflow: visible;
  }

  .project-link-wrapper {
    flex-flow: column;
    height: 100%;
    display: flex;
    position: relative;
  }

  .project-content {
    flex-wrap: wrap;
    justify-content: space-between;
    padding-left: 0;
    padding-right: 0;
  }

  .feature-work-heading-wrapper {
    margin-top: 3rem;
    margin-bottom: 2rem;
  }

  .gallery-image-wrapper {
    max-height: 45rem;
  }

  .footer {
    overflow: hidden;
  }

  .footer-wrapper {
    flex-flow: column;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
  }

  .footer-column-right {
    margin-top: 2rem;
  }

  .about-wrapper {
    flex-flow: column;
    padding-top: 0;
    padding-bottom: 15px;
  }

  .about-heading-wrapper {
    max-width: 100%;
    margin-bottom: 1rem;
  }

  .about-header-wraper {
    margin-top: 2.5rem;
  }

  .why-choose-us-wrapper {
    margin-top: 4rem;
  }

  .choose-us-content {
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
  }

  .call-to-action-wrapper {
    width: auto;
    max-width: none;
    margin-bottom: 0;
    display: none;
  }

  .start-your-project-link-wrapper {
    width: 320px;
    padding-top: 1rem;
  }

  .form-block {
    max-width: 100%;
  }

  .contact-form-wrapper.contact-padding {
    margin-top: 0;
  }

  .contact-info-wrapper {
    height: 100%;
  }

  .page-link-underline {
    width: auto;
  }

  .page-link-block {
    padding-left: 0;
    padding-right: 0;
  }

  .projects-section {
    margin-bottom: 8rem;
  }

  .about__container {
    margin-top: 2rem;
  }

  .section-title {
    font-size: 1.9rem;
  }

  .section-title.services-heading-size {
    position: relative;
  }

  .hero__note-wrapper {
    z-index: 999;
    background-color: #fff;
    max-width: 100%;
    position: relative;
  }

  .scroll-wrapper.tab-size-wrapper2photo {
    max-width: 820px;
  }

  .the-width-400vh-scrollable-div {
    background-color: #fff;
    justify-content: flex-start;
    align-items: center;
  }

  .hero__note {
    line-height: 120%;
  }

  .about__lead {
    margin-left: auto;
    margin-right: auto;
    line-height: 120%;
  }

  .about__title {
    font-size: 2.7rem;
  }

  .about__title.about-change {
    height: auto;
    padding-top: 0;
  }

  .text-medium-alt.link {
    width: 320px;
  }

  .text-medium-alt.about__cta-text {
    width: 360px;
  }

  .why-us-section {
    margin-top: 0;
  }

  .process-item-desc, .process-item-desc.process__desc--alt {
    width: 250px;
  }

  .process-item-desc.process__desc--alt.process__desc--tablet {
    text-align: right;
  }

  .padding-global {
    margin-top: -10rem;
  }

  .process-timeline-alt {
    width: auto;
  }

  .heading-layout {
    margin-bottom: 60px;
  }

  .heading-layout.size-perevaga {
    margin-top: 0;
  }

  .process-layout {
    padding-top: 4rem;
  }

  .process-item.active {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr minmax(10rem, .4fr) 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .back-to-top-inner {
    inset: auto 5px 5px auto;
  }

  .back-to-top-link {
    inset: auto 0% 0% auto;
  }

  .header__phone.size-phone {
    align-self: auto;
    width: auto;
    padding-left: 7px;
    padding-right: 7px;
    font-size: 12px;
    display: none;
  }

  .process-visual-wrap {
    height: 70vh;
  }

  .process-visual-inner {
    height: 100vh;
  }

  .cta-building-image.color {
    height: 70vh;
  }

  .absolute-image.parallax {
    height: 120%;
    overflow: clip;
  }

  .project__intro-content {
    grid-row-gap: 3rem;
    flex-flow: column;
    display: flex;
  }

  .hero__content {
    height: 50vw;
    max-height: none;
  }

  .section__container {
    height: auto;
  }

  .project__info-grid {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    margin-left: 10px;
    margin-right: 10px;
  }

  .spacer-regular {
    height: 3rem;
  }

  .spacer-large {
    height: 5rem;
    padding-top: 25px;
    padding-right: 20px;
  }

  .spacer-large.bot-large {
    padding-right: 0;
  }

  .object__overview {
    grid-column-gap: 1.5rem;
    grid-row-gap: 3rem;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .projects__accent {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .projects__accent.accent {
    height: auto;
    padding-bottom: 0;
    overflow: hidden;
  }

  .project-card {
    aspect-ratio: 1;
    flex-flow: row;
    min-height: auto;
  }

  .projects-grid {
    flex-flow: column;
    margin-top: 22rem;
    display: flex;
  }

  .projects-grid.is-all {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    flex: 0 auto;
    order: 0;
    grid-auto-rows: minmax(180px, 180px);
    grid-template-columns: minmax(180px, 180px) minmax(180px, 180px) minmax(180px, 180px) minmax(180px, 180px);
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
    align-self: center;
    height: auto;
    margin-top: 0;
    margin-bottom: 4rem;
    display: grid;
  }

  .footer__contact-icon {
    width: 10%;
    margin-top: 7px;
  }

  .services-cards-desktop {
    text-align: left;
    flex-flow: wrap;
  }

  .gallery-showcase-grid {
    grid-template-rows: auto;
    grid-template-columns: .75fr 1fr;
    grid-auto-rows: auto;
    margin-top: 0;
  }

  .services-header-media {
    width: 50%;
    height: 36svh;
  }

  .header__link-projects {
    justify-content: center;
    align-items: center;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 10px;
    text-decoration: none;
    display: flex;
  }

  .header__link-about {
    justify-content: center;
    align-items: center;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 9px;
    text-decoration: none;
    display: flex;
  }

  .header__link-about.is-current {
    padding-left: 10px;
  }

  .header__link-career, .header__link-services {
    justify-content: center;
    align-items: center;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 10px;
    text-decoration: none;
    display: flex;
  }

  .footer__note {
    font-size: 14px;
    font-weight: 400;
  }

  .partners-marquee-track {
    justify-content: flex-start;
    align-items: center;
  }

  .projects__accent-container {
    max-width: none;
    height: auto;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .services-container {
    margin-top: 2rem;
  }

  .services__columns {
    flex-flow: row;
    height: 36svh;
  }

  .header__phone-icon {
    display: none;
  }

  .page-hero__title {
    -webkit-text-stroke-color: #fff;
  }

  .header__menu {
    z-index: 9999;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    text-align: left;
    background-color: #fff;
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    font-weight: 600;
    display: block;
  }

  .footer__col {
    display: none;
  }

  .cta-banner-section {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  /* Затемнення фото під текстом. Було b2 (70%): на телефоні абзац
     «Залиште заявку…» — 12px і 80% білого — падав на підсвічені дерева,
     і в найсвітлішій точці під текстом контраст був 4.7:1, тобто нижче
     навіть за AA для дрібного тексту. d9 (85%) піднімає найсвітлішу
     точку до 7.6:1, а 98-й перцентиль — до 8.4:1, і будівля на фото
     лишається читною. Значення підібране заміром по знятому кадру з
     прихованим текстом, а не на око. */
  .cta-banner-section.cta {
    background-image: linear-gradient(#0f1b22d9, #0f1b22d9), url("../images/av-pr-3-3webp.webp");
    background-position: 0 0, 50%;
    background-size: auto, cover;
    display: block;
  }

  .cta-banner-title.cta-heading {
    font-size: var(--padding-pd-09);
  }

  .cta-banner-container {
    max-width: none;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .services-cards-mobile {
    flex-flow: wrap;
  }

  .hero-copy-column {
    margin-top: 12rem;
  }

  .contact-left-center-wrap {
    grid-column-gap: 25px;
    grid-row-gap: 25px;
  }

  .contact-left-content-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    width: 65%;
  }

  .contact-left-bottom-content-wrap {
    grid-column-gap: 35px;
    grid-row-gap: 35px;
  }
}

@media screen and (max-width: 767px) {

  .navbar-wrapper {
    grid-column-gap: 25.5%;
    grid-row-gap: 25.5%;
  }

  .link {
    padding-left: 16px;
  }

  .hero-wrapper {
    background-color: #0000;
  }

  .contact__lead {
    margin-top: 0;
  }

  .hero-image-wrapper.about-photo {
    margin-top: 1rem;
  }

  .parallax {
    display: inline-block;
  }

  .cards-column-left {
    position: relative;
  }

  .project-link-wrapper {
    height: 100%;
    display: block;
  }

  .gallery-showcase-grid {
    grid-row-gap: 4rem;
    flex-flow: column;
    grid-template-rows: auto auto auto;
    grid-template-columns: .5fr;
    grid-auto-flow: column;
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }

  .gallery-image-wrapper {
    height: 100%;
    max-height: 56rem;
    margin-bottom: 0;
  }

  .gallery-image-wrapper.mobile {
    height: 70vmin;
  }

  .footer-wrapper {
    flex-flow: column;
  }

  .footer-column-right {
    flex-flow: column;
    display: flex;
  }

  .footer-column-right.tab-footer {
    margin-top: 0;
  }

  .footer-links-wrapper {
    grid-column-gap: 1.6rem;
    grid-row-gap: 1.6rem;
  }

  .footer-links-wrapper.tab-footer {
    grid-column-gap: 8rem;
  }

  .about-wrapper {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: column;
    margin-top: -55px;
    padding-top: 10px;
  }

  .about-heading-wrapper {
    max-width: 100%;
    margin-bottom: 0;
  }

  .contact-form-wrapper {
    flex-direction: column;
    height: 28rem;
    display: flex;
  }

  .contact-form-column-right {
    width: 100%;
    margin-left: 0;
  }

  .contact-form-column-left {
    max-width: 100%;
    padding-right: 0;
  }

  .contact-info-wrapper {
    flex-direction: column;
    height: 100%;
    margin-top: 5rem;
    margin-bottom: 5rem;
  }

  .contact-info-column-right {
    margin-left: 0;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .hero__note-wrapper {
    background-color: #fff;
  }

  .hero__note {
    margin-top: 0;
  }

  .choose-us__title {
    margin-bottom: .8rem;
  }

  .about__lead {
    margin-top: 0;
  }

  .about__title {
    font-size: 1.9rem;
  }

  .about__title.about-change {
    height: auto;
  }

  .process-item-desc {
    font-size: .875rem;
  }

  .process-item-desc.process__desc--alt, .process-item-desc.process__desc--alt.process__desc--tablet {
    text-align: left;
  }

  .process-item-icon-frame {
    border-radius: 2rem;
    width: 4rem;
    height: 4rem;
  }

  .process-item-number {
    display: none;
  }

  .process-item-content {
    grid-column-gap: .25rem;
    grid-row-gap: .25rem;
    text-align: left;
    justify-content: center;
  }

  .process-item-title {
    font-size: 1rem;
  }

  .process-timeline-alt-track {
    margin-left: calc(2.5rem + 2px);
  }

  .process-item-center {
    width: 3.5rem;
    position: absolute;
    inset: 0% auto 0% 1rem;
    overflow: hidden;
  }

  .process-item-block {
    justify-content: center;
    align-items: flex-start;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .process-item-block.align-right {
    text-align: left;
    order: 9999;
  }

  .process-item {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-columns: 1fr minmax(10rem, .35fr);
    padding-left: 5rem;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .process-item.active {
    grid-template-columns: .5fr minmax(10rem, .4fr) 1.5fr;
    grid-auto-flow: row;
  }

  .hero-section {
    background-image: none;
  }

  .header__phone.size-phone {
    display: none;
  }

  .vertical-wrapper {
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
  }

  .heading-small {
    font-size: 1.125rem;
  }

  .project__intro-content {
    grid-row-gap: 2rem;
  }

  .hero__content {
    padding: 1rem;
  }

  .section__container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .project__info-grid {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    margin-left: 0;
    margin-right: 0;
    display: none;
  }

  .spacer-regular {
    height: 4rem;
  }

  .spacer-large {
    height: 5rem;
  }

  .spacer-large.bot-large {
    padding-right: 0;
  }

  .text-large {
    font-size: 1.125rem;
  }

  .object__text {
    font-size: 1.125rem;
  }

  .projects__accent {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .projects-grid.is-all {
    grid-auto-rows: minmax(140px, 140px);
    grid-template-columns: minmax(140px, 140px) minmax(140px, 140px) minmax(140px, 140px) minmax(140px, 140px);
    place-items: stretch center;
  }

  .gallery-showcase-grid {
    grid-row-gap: 4rem;
    flex-flow: column;
    grid-template-rows: auto auto auto;
    grid-template-columns: .5fr;
    grid-auto-flow: column;
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }

  .header__link-projects, .header__link-about, .header__link-career,
  .header__link-services {
    padding-left: 16px;
  }

  .partners-marquee-track {
    justify-content: flex-start;
    align-items: center;
  }

  .projects__accent-container {
    height: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }.card__title {
    margin-bottom: .8rem;
  }

  .project-card__title {
    font-size: var(--padding-pd-04);
  }

  .header__menu {
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
  }

  .btn-icon-wrap.btn-icon-wrap--white {
    display: none;
  }

  .cta-banner-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .cta-banner-section.cta {
    margin-top: 2rem;
  }

  .cta-banner-title.cta-heading {
    font-size: var(--padding-pd-09);
  }

  .cta-banner-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .hero-copy-column {
    margin-top: 11rem;
    margin-left: .5rem;
  }

  .hero-subtitle.hero-subtitle-text {
    font-size: var(--padding-pd-04);
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .photo-phone {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .u-hidden {
    display: none;
  }

  .contact-right-from-wrap {
    padding-top: 20px;
    padding-left: 40px;
    padding-right: 40px;
  }

  .contact-left-content-wrap {
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .about-form__submit {
    margin-left: 0;
  }

  .contact-right-content-wrap {
    width: 603px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 30px;
  }

  .contact-h2 {
    margin-left: auto;
    margin-right: auto;
  }

  .contact-row {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    flex-flow: column;
    width: 603px;
  }

  .contact-left-bottom-icon-link {
    margin-left: auto;
    margin-right: auto;
  }

  .process-timeline-track {
    margin-left: calc(2.5rem + 2px);
  }
}

@media screen and (max-width: 479px) {

  .page {
    background-color: var(--white);
  }

  .container {
    height: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .container.contact {
    margin-top: 0;
  }

  .navbar {
    z-index: 998;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }

  .navbar-wrapper {
    grid-column-gap: 0%;
    grid-row-gap: 0%;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: center;
    padding-left: 0;
    padding-right: 0;
    overflow: visible;
  }

  .link {
    background-color: #0000;
    width: auto;
    height: auto;
    padding-left: 16px;
    position: relative;
  }

  .link.is-current {
    z-index: 9999;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    padding-top: 16px;
    padding-left: 16px;
    position: relative;
    left: auto;
  }

  .brand.is-current {
    flex-flow: row;
    justify-content: center;
    align-items: center;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    display: block;
    position: relative;
  }


  .menu-button.is-open {
    width: 64px;
    margin-left: 0;
    margin-right: 0;
  }

  .logo {
    width: 90px;
    height: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .link-box {
    margin-right: 10px;
  }

  .navbar-container {
    padding-left: 0;
    padding-right: 0;
  }

  .hero-wrapper {
    z-index: 1;
    margin-top: 3rem;
    padding-bottom: 0;
    position: relative;
  }

  .contact__lead {
    margin-top: .125rem;
    padding-top: 0;
    font-weight: 400;
  }

  .contact__lead.contact-change {
    text-align: center;
    width: auto;
    margin-top: 0;
  }

  .hero-image-wrapper {
    height: 24svh;
  }

  .hero-image-wrapper.about-photo {
    width: 100%;
    max-width: none;
    height: 40vh;
    margin-top: 0;
    overflow: hidden;
  }

  .hero-image-wrapper.about-photo.hero__photo-box {
    margin-top: 0;
  }

  .font-size-medium {
    text-align: left;
    width: 240px;
  }

  .font-size-medium.margin-bottom-1rem {
    text-align: center;
  }

  .font-size-medium.margin-bottom-1rem.contact__intro {
    text-align: center;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
  }

  .bold.font-size-medium {
    margin-bottom: 2rem;
  }

  .parallax.hero-photo {
    width: auto;
  }

  .parallax.hero-photo.hero__photo--full {
    max-width: none;
    height: 50rem;
  }

  .cards-column-left {
    flex: 1;
    order: 1;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 2rem;
    position: static;
  }

  .card {
    text-align: center;
    height: 100%;
    margin-bottom: 1.8rem;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
  }

  .scroll-image-wrapper {
    height: 24svh;
    display: none;
  }

  .scroll-triger {
    border-style: none;
    border-width: 0;
    border-radius: 0;
  }

  .project-list {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex-flow: column;
    display: flex;
  }

  .project-item {
    flex-direction: column;
    height: 100%;
    margin-bottom: 3rem;
    padding-top: 0;
    padding-bottom: 0;
  }

  .project-link-wrapper {
    height: 100%;
  }

  .project-content {
    height: auto;
    padding-top: 0;
    padding-left: 0;
    line-height: 51px;
    display: flex;
    position: relative;
  }

  .project-title {
    font-size: var(--size--project-title-mobile\<deleted\|variable-5ad10562-318d-8018-674a-30c847be783e\>);
    line-height: 100%;
  }

  .feature-work-heading-wrapper {
    margin-top: 0;
    margin-bottom: 1rem;
  }

  .gallery-image-wrapper {
    height: 100%;
    max-height: 56rem;
  }

  .gallery-image-wrapper.mobile {
    height: 100vmin;
    max-height: 56rem;
  }

  .footer {
    overflow: hidden;
  }

  .footer-wrapper {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
    margin-top: 2rem;
    padding-top: 2rem;
  }

  .footer-links-wrapper.tab-footer {
    text-align: left;
    align-self: auto;
    width: auto;
  }

  .about-wrapper {
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 0;
    padding-top: 0;
    display: flex;
  }

  .about-heading-wrapper {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .about-header-wraper {
    margin-top: 6rem;
  }

  .footer-links {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .choose-us-content {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    text-align: center;
    margin-top: 2rem;
  }

  .choose-us-text {
    max-width: 40ch;
  }

  .choose-us-item {
    justify-content: flex-start;
    align-items: center;
  }

  .call-to-action-wrapper {
    max-width: 100%;
    height: 13rem;
    margin-bottom: 4rem;
  }

  .start-your-project-link-wrapper {
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0;
  }

  .contact-form-wrapper {
    height: 100%;
  }

  .contact-form-wrapper.contact-padding {
    flex-flow: column;
    justify-content: flex-start;
    height: auto;
    margin-top: 6rem;
  }

  .submit-button-wrapper {
    justify-content: center;
    align-items: center;
  }

  .contact-form-column-right {
    margin-top: 2rem;
  }

  .contact-form-column-left, .contact-form__field {
    margin-bottom: 2rem;
  }

  .contact-info-wrapper {
    text-align: center;
    justify-content: flex-start;
    height: auto;
    margin-top: 10rem;
    margin-bottom: 10rem;
  }

  .contact-info-column-right {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    flex-flow: column;
    width: auto;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    display: flex;
  }

  .contact-info-column-left {
    margin-left: auto;
    margin-right: auto;
  }

  .address-wrapper {
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    flex-flow: column;
    display: flex;
  }

  .phone-wrapper {
    width: 200px;
  }

  .page-link-underline, .page-link-block {
    width: auto;
  }

  .projects-section {
    margin-top: 4rem;
    margin-bottom: 0;
  }

  .about__container {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .section-title {
    margin-bottom: 40px;
  }

  .section-title.about-change {
    font-size: 2rem;
  }

  .section-title.services-heading-size {
    margin-bottom: 0;
    font-size: 2.2rem;
  }

  .hero__note-wrapper {
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    background-color: #fff0;
    border-radius: 1.2rem;
    margin-top: 3rem;
    margin-bottom: 0;
  }

  .scroll-wrapper {
    border: 0 #000;
  }

  .a-block {
    flex-flow: row;
    justify-content: center;
    align-items: center;
    width: 25vw;
    height: 25vw;
    margin-bottom: 0%;
    margin-left: 20px;
    margin-right: 20px;
  }

  .the-width-400vh-scrollable-div {
    background-color: #fff;
  }

  .the-height-400vh-section {
    height: 80vh;
    margin-top: 4rem;
    margin-left: 0;
    display: block;
  }

  /* Липкий блок успадковував height: 100vh з ширшого брейкпоінта, а
     секція тут лише 80vh — тобто сцена на 169px вища за власне місце і
     звисає на наступну секцію. Поки ряд логотипів висів угорі маски,
     цього не було видно; варто його відцентрувати — і він опиняється
     просто на заголовку «Чому ми?». Прив'язуємо висоту до секції, і
     «центр» стає центром секції, а не екрана. */
  .the-sticky-div {
    height: 100%;
  }

  /* Ряд логотипів має стояти посередині проміжку, який видно оком:
     від підзаголовка «Партнери» до заголовка «Чому ми?». Коробка маски
     цьому проміжку не дорівнює — зверху її відсуває власний відступ
     блоку заголовка (6rem), а знизу заголовок наступної секції заходить
     на цю секцію. Тому маску вкорочуємо знизу: 12rem = ті самі 6rem
     дзеркально плюс 6rem на захід сусідньої секції. Після цього
     «центр маски» і «центр видимого проміжку» — те саме місце. */
  .the-overflow-hidden-mask {
    margin-bottom: 12rem;
  }

  .modal-wrapper.opt, .modal-wrapper.gen, .modal-wrapper.efect, .modal-wrapper.zone {
    display: none;
  }

  .service-modal-panel.back-blur.model-size1 {
    width: 350px;
  }

  .service-modal-row {
    width: 310px;
  }

  .hero__note {
    margin-top: -1.8rem;
    padding-top: 0;
  }

  .hero__note.hero__note--about {
    display: none;
  }

  .hero__note.hero__note--compact {
    width: 300px;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    font-size: 1rem;
  }

  .choose-us__title {
    margin-bottom: 0;
  }

  .about__lead {
    width: 300px;
    margin-top: .5rem;
    padding-top: 0;
  }

  .about__title {
    margin-top: 6px;
    font-weight: 500;
  }

  .about__title.about-change {
    flex-flow: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: auto;
    max-width: none;
    height: auto;
    margin-top: 0;
    padding-top: 0;
    font-weight: 800;
    display: block;
  }

  .text-medium-alt.link {
    width: auto;
  }

  .text-medium-alt.about__cta-text {
    text-align: center;
    width: 350px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.2rem;
  }

  .gallery-section {
    margin-top: 2rem;
  }

  .why-us-section {
    margin-top: 6rem;
  }

  .process-item-desc {
    width: 200px;
    margin-top: 0;
  }

  .process-item-desc.process__desc--alt {
    text-align: left;
    width: 200px;
  }

  .process-item-desc.process__desc--alt.process__desc--tablet {
    text-align: left;
  }

  .process-item-desc.process__desc--alt {
    width: 200px;
  }

  .process-dot {
    margin-right: 3px;
  }

  .process-dot.active {
    width: 1.25rem;
    height: 1.25rem;
  }

  .padding-global {
    margin-top: 0;
  }

  .heading-style-h2 {
    font-size: 2.2rem;
  }

  .process-item-content {
    flex-flow: column;
    width: 320px;
  }

  .heading-wrap {
    margin-top: 0;
  }

  .heading-wrap.partner-head {
    margin-top: 0;
    margin-bottom: 6rem;
  }

  .process-timeline-alt-track {
    margin-left: calc(2rem + 2px);
  }

  .heading-layout {
    margin-bottom: 2rem;
  }

  .heading-layout.size-perevaga {
    margin-top: -12rem;
  }

  .process-layout {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    margin-top: 0;
    padding-top: 0;
  }

  .process-item-center {
    left: .5rem;
  }

  .subheading-text {
    font-size: 1rem;
  }

  .process-item {
    padding-left: 4rem;
    padding-right: 1rem;
  }

  .process-item.active {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    padding-right: 1rem;
  }

  .hero__subtitle-strong {
    font-size: 1rem;
  }

  .partner-logo.size-olesa {
    width: 150%;
    max-width: none;
    margin-left: 0;
  }

  .partner-logo.mono {
    margin-left: 0;
  }

  .home-form__phone {
    width: 310px;
  }

  .service-modal-form {
    margin-top: 0;
  }

  .home-form__name {
    width: 310px;
  }

  .submit-btn.btm4 {
    margin-top: 5px;
  }

  .submit-btn.submit-accent {
    margin-top: 10px;
  }

  .hero-section {
    height: 47rem;
  }

  .back-to-top-inner {
    width: 30px;
    inset: auto 0 5px auto;
  }

  .back-to-top-link {
    display: none;
    inset: auto 0% 0% auto;
  }

  .back-to-top-link.is-current {
    display: none;
  }

  .header__phone.size-phone {
    width: 100px;
    padding-left: 22px;
    font-size: 12px;
    display: none;
  }

  .zakluk {
    margin-top: 4rem;
    display: block;
  }

  .process-visual-wrap {
    width: 393px;
    height: 20rem;
  }

  .process-visual-inner {
    height: 100vh;
  }

  .cta-building-image.color {
    height: 100%;
  }

  .absolute-image.parallax {
    border-radius: .6rem;
    position: absolute;
  }

  .vertical-wrapper {
    margin-top: 6rem;
  }

  .project__overview-item, .heading-small.c3 {
    margin-left: auto;
    margin-right: auto;
  }

  .hero__content {
    height: auto;
    padding: 0;
  }

  .section__container {
    padding-left: 0;
    padding-right: 0;
  }

  .sections {
    height: auto;
    margin-top: 0;
    margin-left: 10px;
    margin-right: 10px;
    overflow: hidden;
  }

  .project__info-grid {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    flex-flow: column;
    grid-template-rows: 340px 340px;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    margin-left: 5px;
    margin-right: 5px;
    display: none;
  }

  .spacer-regular {
    height: 2rem;
  }

  .spacer-large {
    height: 2rem;
    padding-top: 20px;
    padding-right: 15px;
  }

  .spacer-large.bot-large {
    height: 5rem;
    padding-top: 20px;
    padding-right: 0;
  }

  .text-large {
    text-align: center;
    display: block;
  }

  .absolute-img {
    height: 50rem;
  }

  .object__overview {
    grid-row-gap: 1.5rem;
    text-align: left;
    display: flex;
  }

  .object__text {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .partner-logo-block {
    width: 25vw;
    height: auto;
    margin-left: 20px;
    margin-right: 20px;
  }

  .projects__accent {
    padding-top: 6rem;
  }

  .projects__accent.accent {
    height: auto;
    padding-bottom: 0;
    overflow: hidden;
  }

  .project-card {
    border-radius: .6rem;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    width: 361px;
    height: 100%;
    min-height: auto;
  }

  .projects-grid {
    margin-top: 20rem;
  }

  .projects-grid.is-all {
    grid-column-gap: .2rem;
    grid-row-gap: .2rem;
    flex-flow: column;
    grid-auto-rows: minmax(150px, .25fr);
    grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr);
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
    height: auto;
    display: grid;
  }

  .projects-grid-wrapper {
    grid-column-gap: 94vw;
    grid-row-gap: 94vw;
    flex-flow: column;
    justify-content: space-between;
    margin-top: 0;
  }

  .projects-grid-wrapper.is-all {
    grid-column-gap: 0vw;
    grid-row-gap: 0vw;
    flex-flow: column;
    margin-top: 0;
  }

  .about-change {
    text-align: center;
    display: block;
  }

  .object__gallery-link-main {
    display: block;
    overflow: visible;
  }

  .object__gallery-image-main {
    height: 100%;
  }

  .footer__contact-email {
    width: 250px;
  }

  .start-project-link-wrapper {
    justify-content: center;
    align-items: center;
    width: 99.9999%;
    padding-top: 0;
  }

  .services-cards-desktop {
    padding-left: 0;
    padding-right: 0;
    display: none;
  }

  .gallery-showcase-grid {
    grid-column-gap: 14px;
    grid-row-gap: .5rem;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    margin-left: 10px;
    margin-right: 10px;
  }

  .services-header-media {
    flex: 0 auto;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40svh;
  }

  .header__link-projects, .header__link-about, .header__link-career,
  .header__link-services, .header__link-about.is-current {
    padding-left: 16px;
  }

  /* align-items було flex-start — і ряд логотипів висів угорі маски
     заввишки 630px, лишаючи під собою 532px порожнечі. Ширші
     брейкпоінти вже центрують ряд (991 і 767), цей лишався винятком без
     причини: компенсувати тут нема чого, бо margin-bottom у самих
     блоків на цій ширині вже 0. */
  .partners-marquee-track {
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 0;
  }

  .projects__accent-container {
    height: auto;
    margin-bottom: 0;
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .partners__link-nova {
    width: auto;
    height: auto;
  }

  .services-section {
    background-color: #fff;
    margin-top: 4rem;
  }

  .card__title {
    margin-bottom: .5rem;
  }

  .card__title-strong {
    font-size: 1.1rem;
  }

  .services-container {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .services__columns {
    flex-flow: column;
    height: 100%;
  }

  .services__background {
    background-color: #f5f5f7;
  }

  .service-card-text {
    margin-left: auto;
    margin-right: auto;
  }

  .header__phone-icon {
    width: 64px;
    height: 64px;
    padding-top: 20px;
    display: block;
  }

  .code-embed {
    filter: grayscale();
    flex-flow: row;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: flex;
  }

  .partners__link-asgard {
    flex-flow: row;
    justify-content: center;
    align-items: center;
    display: block;
  }

  .about__lead-strong {
    width: 322.516px;
  }

  .contact__lead-strong {
    width: 102.172px;
  }

  .page-hero {
    height: 47rem;
  }

  .page-hero__image {
    filter: none;
    height: 47rem;
  }

  .page-hero__title {
    width: auto;
    color: var(--white);
    letter-spacing: -.02em;
    -webkit-text-stroke-color: var(--color-c1);
    text-transform: none;
    text-shadow: 12px 12px 20px #000;
    margin-top: 16rem;
    margin-left: auto;
    margin-right: auto;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 3rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
  }

  .about-hero, .about-hero__image {
    height: 47rem;
  }

  .page-hero__title-low {
    z-index: 1;
    width: auto;
    color: var(--white);
    letter-spacing: -.02em;
    -webkit-text-stroke-color: var(--color-c1);
    text-transform: none;
    text-shadow: 12px 12px 20px #000;
    margin-top: 16rem;
    margin-left: auto;
    margin-right: auto;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 3rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
  }

  .header__menu {
    z-index: 99999;
    pointer-events: auto;
    background-color: #fff0;
    background-image: linear-gradient(#fff, #fff);
    flex-flow: row;
    flex: 0 auto;
    order: 0;
    justify-content: space-between;
    align-self: auto;
    align-items: center;
    width: 100%;
    height: auto;
    padding-left: 0;
    font-weight: 600;
    display: block;
    position: absolute;
    overflow: visible;
  }

  .footer__col {
    justify-content: flex-start;
    align-items: center;
    display: none;
  }

  .btn-primary.white {
    text-align: left;
    justify-content: center;
    align-items: center;
  }

  .btn-icon-wrap.btn-icon-wrap--white {
    display: none;
  }

  .cta-banner-section {
    padding-top: 6rem;
  }

  .cta-banner-section.cta {
    height: 50rem;
    display: block;
  }

  .cta-banner__text.white {
    color: #fefcf8cc;
    font-size: 12px;
  }

  .cta-banner__subtitle.white {
    font-size: 12px;
  }

  .cta-button {
    width: 100%;
  }

  .cta-banner-title.cta-heading {
    font-size: 2rem;
  }

  .cta-banner-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .services-cards-mobile {
    padding-left: 0;
    padding-right: 0;
    display: flex;
  }

  .page-hero__scrim {
    height: 47rem;
    display: block;
  }

  .page-hero__scrim {
    height: 47rem;
  }

  .hero-copy-column {
    margin-top: 6rem;
    margin-left: auto;
  }

  .hero-title.hero-title-text {
    text-align: center;
    width: 330px;
    display: none;
  }

  .hero-subtitle.hero-subtitle-text {
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 16px;
  }

  .photo-phone {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    grid-template-rows: 200px 200px 200px 200px;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    margin-left: 0;
    margin-right: 0;
    display: grid;
  }

  .partner-logo-fomich.size-olesa, .partner-logo-lvivbud.size-olesa {
    width: 150%;
    max-width: none;
    margin-left: 0;
  }

  .partner-logo-block {
    flex-flow: row;
    justify-content: center;
    align-items: center;
    width: 25vw;
    height: 25vw;
    margin-bottom: 0%;
    margin-left: 20px;
    margin-right: 20px;
  }

  .contact-right-from-wrap {
    padding-top: 10px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .contact-left-content-wrap {
    grid-column-gap: 25px;
    grid-row-gap: 25px;
  }

  .contact-right-content-wrap {
    justify-content: center;
    align-items: center;
    width: auto;
    padding-bottom: 18px;
    display: flex;
  }

  .contact-h2 {
    font-size: var(--padding-pd-06);
  }

  .contact-row {
    grid-column-gap: 35px;
    grid-row-gap: 35px;
    justify-content: center;
    align-items: flex-start;
    width: auto;
  }

  .contact-center-t {
    font-size: var(--padding-pd-03);
  }

  .contact-left-bottom-content-wrap {
    grid-column-gap: 25px;
    grid-row-gap: 25px;
  }

  .contact-center-text {
    font-size: var(--padding-pd-04);
  }

  .process-timeline-track {
    margin-left: calc(2rem + 2px);
  }
}

#index-cell-01, #index-cell-02 {
  grid-area: span 3 / span 2 / span 3 / span 2;
}

#index-cell-03 {
  grid-area: span 3 / span 3 / span 3 / span 3;
}

#index-cell-04 {
  grid-area: span 5 / span 3 / span 5 / span 3;
}

#index-cell-05 {
  grid-area: span 4 / span 4 / span 4 / span 4;
}

#index-cell-06, #index-cell-07 {
  grid-area: span 3 / span 2 / span 3 / span 2;
}

#index-cell-08 {
  grid-area: span 2 / span 3 / span 2 / span 3;
}

#index-cell-09 {
  grid-area: span 1 / span 7 / span 1 / span 7;
}

#index-cell-10 {
  justify-self: end;
}

#index-cell-11 {
  justify-self: start;
}

#index-cell-12 {
  justify-self: end;
}

#index-cell-13 {
  justify-self: start;
}

#index-cell-14 {
  justify-self: end;
}

#footer-cell-1 {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr .8fr;
}

#about-cell-01 {
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
}

#projects-cell-01, #projects-cell-02, #projects-cell-03, #projects-cell-04, #projects-cell-05, #projects-cell-06, #projects-cell-07, #projects-cell-08, #projects-cell-09, #projects-cell-10, #projects-cell-11, #projects-cell-12, #projects-cell-13, #projects-cell-14, #projects-cell-15, #projects-cell-16, #projects-cell-17, #projects-cell-18, #projects-cell-19, #projects-cell-20, #projects-cell-21, #projects-cell-22, #projects-cell-23, #projects-cell-24, #projects-cell-25, #projects-cell-26, #projects-cell-27, #projects-cell-28 {
  grid-area: span 2 / span 1 / span 2 / span 1;
}

@media screen and (min-width: 1440px) {
  #about-cell-01 {
    grid-template-rows: auto auto;
    grid-template-columns: .7fr .7fr .7fr;
  }
}

@media screen and (max-width: 991px) {
  #index-cell-04, #index-cell-05 {
    grid-row: span 2 / span 2;
  }

  #index-cell-06, #index-cell-07, #index-cell-08 {
    grid-row: span 1 / span 1;
  }

  #index-cell-09 {
    grid-row: span 2 / span 2;
  }

  #footer-cell-1 {
    grid-template-rows: auto;
    grid-template-columns: 1.75fr 1.25fr;
  }

  #footer-cell-2 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #projects-cell-01, #projects-cell-02, #projects-cell-03, #projects-cell-04, #projects-cell-05, #projects-cell-06, #projects-cell-07, #projects-cell-08, #projects-cell-09, #projects-cell-10, #projects-cell-11, #projects-cell-12, #projects-cell-13, #projects-cell-14, #projects-cell-15, #projects-cell-16, #projects-cell-17, #projects-cell-18, #projects-cell-19, #projects-cell-20, #projects-cell-21, #projects-cell-22, #projects-cell-23, #projects-cell-24, #projects-cell-25, #projects-cell-26, #projects-cell-27, #projects-cell-28 {
    grid-row: span 1 / span 1;
  }
}

@media screen and (max-width: 767px) {
  #index-cell-10 {
    justify-self: start;
  }

  #index-cell-11 {
    order: -9999;
  }

  #footer-cell-1 {
    grid-template-rows: auto;
    grid-template-columns: 1.5fr 1fr;
  }

  #footer-cell-2 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #about-cell-01 {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
  }

  #projects-cell-01, #projects-cell-02, #projects-cell-03, #projects-cell-04, #projects-cell-05, #projects-cell-06, #projects-cell-07, #projects-cell-08, #projects-cell-09, #projects-cell-10, #projects-cell-11, #projects-cell-12, #projects-cell-13, #projects-cell-14, #projects-cell-15, #projects-cell-16, #projects-cell-17, #projects-cell-18, #projects-cell-19, #projects-cell-20, #projects-cell-21, #projects-cell-22, #projects-cell-23, #projects-cell-24, #projects-cell-25, #projects-cell-26, #projects-cell-27, #projects-cell-28 {
    grid-row: span 1 / span 1;
  }
}

@media screen and (max-width: 479px) {
  #footer-cell-1 {
    grid-template-rows: auto;
    grid-template-columns: .25fr;
  }

  #footer-cell-2 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #about-cell-01 {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
  }

  #projects-cell-01, #projects-cell-02, #projects-cell-03, #projects-cell-04, #projects-cell-05, #projects-cell-06, #projects-cell-07, #projects-cell-08, #projects-cell-09, #projects-cell-10, #projects-cell-11, #projects-cell-12, #projects-cell-13, #projects-cell-14, #projects-cell-15, #projects-cell-16, #projects-cell-17, #projects-cell-18, #projects-cell-19, #projects-cell-20, #projects-cell-21, #projects-cell-22, #projects-cell-23, #projects-cell-24, #projects-cell-25, #projects-cell-26, #projects-cell-27, #projects-cell-28 {
    grid-row: span 1 / span 1;
  }
}