html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: sans-serif;
}

body {
  margin: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

audio, canvas, progress, video {
  vertical-align: baseline;
  display: inline-block;
}

audio:not([controls]) {
  height: 0;
  display: none;
}

[hidden], template {
  display: none;
}

a {
  background-color: #0000;
}

a:active, a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b, strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  margin: .67em 0;
  font-size: 2em;
}

mark {
  color: #000;
  background: #ff0;
}

small {
  font-size: 80%;
}

sub, sup {
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sup {
  top: -.5em;
}

sub {
  bottom: -.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code, kbd, pre, samp {
  font-family: monospace;
  font-size: 1em;
}

button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, html input[type="button"], input[type="reset"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled], html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: none;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th {
  padding: 0;
}

@font-face {
  font-family: webflow-icons;
  src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format("truetype");
  font-weight: normal;
  font-style: normal;
}

[class^="w-icon-"], [class*=" w-icon-"] {
  speak: none;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  font-family: webflow-icons !important;
}

.w-icon-slider-right:before {
  content: "";
}

.w-icon-slider-left:before {
  content: "";
}

.w-icon-nav-menu:before {
  content: "";
}

.w-icon-arrow-down:before, .w-icon-dropdown-toggle:before {
  content: "";
}

.w-icon-file-upload-remove:before {
  content: "";
}

.w-icon-file-upload-icon:before {
  content: "";
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  color: #333;
  background-color: #fff;
  min-height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

img {
  vertical-align: middle;
  max-width: 100%;
  display: inline-block;
}

html.w-mod-touch * {
  background-attachment: scroll !important;
}

.w-block {
  display: block;
}

.w-inline-block {
  max-width: 100%;
  display: inline-block;
}

.w-clearfix:before, .w-clearfix:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-clearfix:after {
  clear: both;
}

.w-hidden {
  display: none;
}

.w-button {
  color: #fff;
  line-height: inherit;
  cursor: pointer;
  background-color: #3898ec;
  border: 0;
  border-radius: 0;
  padding: 9px 15px;
  text-decoration: none;
  display: inline-block;
}

input.w-button {
  -webkit-appearance: button;
}

html[data-w-dynpage] [data-w-cloak] {
  color: #0000 !important;
}

.w-code-block {
  margin: unset;
}

pre.w-code-block code {
  all: inherit;
}

pre.w-code-block code > span {
  display: block !important;
}

.w-optimization {
  display: contents;
}

.w-webflow-badge, .w-webflow-badge > img {
  box-sizing: unset;
  width: unset;
  height: unset;
  max-height: unset;
  max-width: unset;
  min-height: unset;
  min-width: unset;
  margin: unset;
  padding: unset;
  float: unset;
  clear: unset;
  border: unset;
  border-radius: unset;
  background: unset;
  background-image: unset;
  background-position: unset;
  background-size: unset;
  background-repeat: unset;
  background-origin: unset;
  background-clip: unset;
  background-attachment: unset;
  background-color: unset;
  box-shadow: unset;
  transform: unset;
  direction: unset;
  font-family: unset;
  font-weight: unset;
  color: unset;
  font-size: unset;
  line-height: unset;
  font-style: unset;
  font-variant: unset;
  text-align: unset;
  letter-spacing: unset;
  -webkit-text-decoration: unset;
  text-decoration: unset;
  text-indent: unset;
  text-transform: unset;
  list-style-type: unset;
  text-shadow: unset;
  vertical-align: unset;
  cursor: unset;
  white-space: unset;
  word-break: unset;
  word-spacing: unset;
  word-wrap: unset;
  transition: unset;
}

.w-webflow-badge {
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 0 1px #0000001a, 0 1px 3px #0000001a;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2147483647 !important;
  color: #aaadb0 !important;
  width: auto !important;
  height: auto !important;
  overflow: unset !important;
  background-color: #fff !important;
  border-radius: 3px !important;
  margin: 0 !important;
  padding: 6px !important;
  font-size: 12px !important;
  line-height: 14px !important;
  text-decoration: none !important;
  display: inline-block !important;
  position: fixed !important;
  inset: auto 12px 12px auto !important;
  transform: none !important;
}

.w-webflow-badge > img {
  position: unset;
  visibility: unset !important;
  opacity: 1 !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 10px;
  font-weight: bold;
}

h1 {
  margin-top: 20px;
  font-size: 38px;
  line-height: 44px;
}

h2 {
  margin-top: 20px;
  font-size: 32px;
  line-height: 36px;
}

h3 {
  margin-top: 20px;
  font-size: 24px;
  line-height: 30px;
}

h4 {
  margin-top: 10px;
  font-size: 18px;
  line-height: 24px;
}

h5 {
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
}

h6 {
  margin-top: 10px;
  font-size: 12px;
  line-height: 18px;
}

p {
  margin-top: 0;
  margin-bottom: 10px;
}

blockquote {
  border-left: 5px solid #e2e2e2;
  margin: 0 0 10px;
  padding: 10px 20px;
  font-size: 18px;
  line-height: 22px;
}

figure {
  margin: 0 0 10px;
}

figcaption {
  text-align: center;
  margin-top: 5px;
}

ul, ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}

.w-list-unstyled {
  padding-left: 0;
  list-style: none;
}

.w-embed:before, .w-embed:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-embed:after {
  clear: both;
}

.w-video {
  width: 100%;
  padding: 0;
  position: relative;
}

.w-video iframe, .w-video object, .w-video embed {
  border: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

button, [type="button"], [type="reset"] {
  cursor: pointer;
  -webkit-appearance: button;
  border: 0;
}

.w-form {
  margin: 0 0 15px;
}

.w-form-done {
  text-align: center;
  background-color: #ddd;
  padding: 20px;
  display: none;
}

.w-form-fail {
  background-color: #ffdede;
  margin-top: 10px;
  padding: 10px;
  display: none;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
  display: block;
}

.w-input, .w-select {
  color: #333;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #ccc;
  width: 100%;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.42857;
  display: block;
}

.w-input::placeholder, .w-select::placeholder {
  color: #999;
}

.w-input:focus, .w-select:focus {
  border-color: #3898ec;
  outline: 0;
}

.w-input[disabled], .w-select[disabled], .w-input[readonly], .w-select[readonly], fieldset[disabled] .w-input, fieldset[disabled] .w-select {
  cursor: not-allowed;
}

.w-input[disabled]:not(.w-input-disabled), .w-select[disabled]:not(.w-input-disabled), .w-input[readonly], .w-select[readonly], fieldset[disabled]:not(.w-input-disabled) .w-input, fieldset[disabled]:not(.w-input-disabled) .w-select {
  background-color: #eee;
}

textarea.w-input, textarea.w-select {
  height: auto;
}

.w-select {
  background-color: #f3f3f3;
}

.w-select[multiple] {
  height: auto;
}

.w-form-label {
  cursor: pointer;
  margin-bottom: 0;
  font-weight: normal;
  display: inline-block;
}

.w-radio {
  margin-bottom: 5px;
  padding-left: 20px;
  display: block;
}

.w-radio:before, .w-radio:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-radio:after {
  clear: both;
}

.w-radio-input {
  float: left;
  margin: 3px 0 0 -20px;
  line-height: normal;
}

.w-file-upload {
  margin-bottom: 10px;
  display: block;
}

.w-file-upload-input {
  opacity: 0;
  z-index: -100;
  width: .1px;
  height: .1px;
  position: absolute;
  overflow: hidden;
}

.w-file-upload-default, .w-file-upload-uploading, .w-file-upload-success {
  color: #333;
  display: inline-block;
}

.w-file-upload-error {
  margin-top: 10px;
  display: block;
}

.w-file-upload-default.w-hidden, .w-file-upload-uploading.w-hidden, .w-file-upload-error.w-hidden, .w-file-upload-success.w-hidden {
  display: none;
}

.w-file-upload-uploading-btn {
  cursor: pointer;
  background-color: #fafafa;
  border: 1px solid #ccc;
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: normal;
  display: flex;
}

.w-file-upload-file {
  background-color: #fafafa;
  border: 1px solid #ccc;
  flex-grow: 1;
  justify-content: space-between;
  margin: 0;
  padding: 8px 9px 8px 11px;
  display: flex;
}

.w-file-upload-file-name {
  font-size: 14px;
  font-weight: normal;
  display: block;
}

.w-file-remove-link {
  cursor: pointer;
  width: auto;
  height: auto;
  margin-top: 3px;
  margin-left: 10px;
  padding: 3px;
  display: block;
}

.w-icon-file-upload-remove {
  margin: auto;
  font-size: 10px;
}

.w-file-upload-error-msg {
  color: #ea384c;
  padding: 2px 0;
  display: inline-block;
}

.w-file-upload-info {
  padding: 0 12px;
  line-height: 38px;
  display: inline-block;
}

.w-file-upload-label {
  cursor: pointer;
  background-color: #fafafa;
  border: 1px solid #ccc;
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: normal;
  display: inline-block;
}

.w-icon-file-upload-icon, .w-icon-file-upload-uploading {
  width: 20px;
  margin-right: 8px;
  display: inline-block;
}

.w-icon-file-upload-uploading {
  height: 20px;
}

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

.w-container:before, .w-container:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-container:after {
  clear: both;
}

.w-container .w-row {
  margin-left: -10px;
  margin-right: -10px;
}

.w-row:before, .w-row:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-row:after {
  clear: both;
}

.w-row .w-row {
  margin-left: 0;
  margin-right: 0;
}

.w-col {
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
}

.w-col .w-col {
  padding-left: 0;
  padding-right: 0;
}

.w-col-1 {
  width: 8.33333%;
}

.w-col-2 {
  width: 16.6667%;
}

.w-col-3 {
  width: 25%;
}

.w-col-4 {
  width: 33.3333%;
}

.w-col-5 {
  width: 41.6667%;
}

.w-col-6 {
  width: 50%;
}

.w-col-7 {
  width: 58.3333%;
}

.w-col-8 {
  width: 66.6667%;
}

.w-col-9 {
  width: 75%;
}

.w-col-10 {
  width: 83.3333%;
}

.w-col-11 {
  width: 91.6667%;
}

.w-col-12 {
  width: 100%;
}

.w-hidden-main {
  display: none !important;
}

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

  .w-hidden-main {
    display: inherit !important;
  }

  .w-hidden-medium {
    display: none !important;
  }

  .w-col-medium-1 {
    width: 8.33333%;
  }

  .w-col-medium-2 {
    width: 16.6667%;
  }

  .w-col-medium-3 {
    width: 25%;
  }

  .w-col-medium-4 {
    width: 33.3333%;
  }

  .w-col-medium-5 {
    width: 41.6667%;
  }

  .w-col-medium-6 {
    width: 50%;
  }

  .w-col-medium-7 {
    width: 58.3333%;
  }

  .w-col-medium-8 {
    width: 66.6667%;
  }

  .w-col-medium-9 {
    width: 75%;
  }

  .w-col-medium-10 {
    width: 83.3333%;
  }

  .w-col-medium-11 {
    width: 91.6667%;
  }

  .w-col-medium-12 {
    width: 100%;
  }

  .w-col-stack {
    width: 100%;
    left: auto;
    right: auto;
  }
}

@media screen and (max-width: 767px) {
  .w-hidden-main, .w-hidden-medium {
    display: inherit !important;
  }

  .w-hidden-small {
    display: none !important;
  }

  .w-row, .w-container .w-row {
    margin-left: 0;
    margin-right: 0;
  }

  .w-col {
    width: 100%;
    left: auto;
    right: auto;
  }

  .w-col-small-1 {
    width: 8.33333%;
  }

  .w-col-small-2 {
    width: 16.6667%;
  }

  .w-col-small-3 {
    width: 25%;
  }

  .w-col-small-4 {
    width: 33.3333%;
  }

  .w-col-small-5 {
    width: 41.6667%;
  }

  .w-col-small-6 {
    width: 50%;
  }

  .w-col-small-7 {
    width: 58.3333%;
  }

  .w-col-small-8 {
    width: 66.6667%;
  }

  .w-col-small-9 {
    width: 75%;
  }

  .w-col-small-10 {
    width: 83.3333%;
  }

  .w-col-small-11 {
    width: 91.6667%;
  }

  .w-col-small-12 {
    width: 100%;
  }
}

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

  .w-hidden-main, .w-hidden-medium, .w-hidden-small {
    display: inherit !important;
  }

  .w-hidden-tiny {
    display: none !important;
  }

  .w-col {
    width: 100%;
  }

  .w-col-tiny-1 {
    width: 8.33333%;
  }

  .w-col-tiny-2 {
    width: 16.6667%;
  }

  .w-col-tiny-3 {
    width: 25%;
  }

  .w-col-tiny-4 {
    width: 33.3333%;
  }

  .w-col-tiny-5 {
    width: 41.6667%;
  }

  .w-col-tiny-6 {
    width: 50%;
  }

  .w-col-tiny-7 {
    width: 58.3333%;
  }

  .w-col-tiny-8 {
    width: 66.6667%;
  }

  .w-col-tiny-9 {
    width: 75%;
  }

  .w-col-tiny-10 {
    width: 83.3333%;
  }

  .w-col-tiny-11 {
    width: 91.6667%;
  }

  .w-col-tiny-12 {
    width: 100%;
  }
}

.w-widget {
  position: relative;
}

.w-widget-map {
  width: 100%;
  height: 400px;
}

.w-widget-map label {
  width: auto;
  display: inline;
}

.w-widget-map img {
  max-width: inherit;
}

.w-widget-map .gm-style-iw {
  text-align: center;
}

.w-widget-map .gm-style-iw > button {
  display: none !important;
}

.w-widget-twitter {
  overflow: hidden;
}

.w-widget-twitter-count-shim {
  vertical-align: top;
  text-align: center;
  background: #fff;
  border: 1px solid #758696;
  border-radius: 3px;
  width: 28px;
  height: 20px;
  display: inline-block;
  position: relative;
}

.w-widget-twitter-count-shim * {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.w-widget-twitter-count-shim .w-widget-twitter-count-inner {
  text-align: center;
  color: #999;
  font-family: serif;
  font-size: 15px;
  line-height: 12px;
  position: relative;
}

.w-widget-twitter-count-shim .w-widget-twitter-count-clear {
  display: block;
  position: relative;
}

.w-widget-twitter-count-shim.w--large {
  width: 36px;
  height: 28px;
}

.w-widget-twitter-count-shim.w--large .w-widget-twitter-count-inner {
  font-size: 18px;
  line-height: 18px;
}

.w-widget-twitter-count-shim:not(.w--vertical) {
  margin-left: 5px;
  margin-right: 8px;
}

.w-widget-twitter-count-shim:not(.w--vertical).w--large {
  margin-left: 6px;
}

.w-widget-twitter-count-shim:not(.w--vertical):before, .w-widget-twitter-count-shim:not(.w--vertical):after {
  content: " ";
  pointer-events: none;
  border: solid #0000;
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  left: 0;
}

.w-widget-twitter-count-shim:not(.w--vertical):before {
  border-width: 4px;
  border-color: #75869600 #5d6c7b #75869600 #75869600;
  margin-top: -4px;
  margin-left: -9px;
}

.w-widget-twitter-count-shim:not(.w--vertical).w--large:before {
  border-width: 5px;
  margin-top: -5px;
  margin-left: -10px;
}

.w-widget-twitter-count-shim:not(.w--vertical):after {
  border-width: 4px;
  border-color: #fff0 #fff #fff0 #fff0;
  margin-top: -4px;
  margin-left: -8px;
}

.w-widget-twitter-count-shim:not(.w--vertical).w--large:after {
  border-width: 5px;
  margin-top: -5px;
  margin-left: -9px;
}

.w-widget-twitter-count-shim.w--vertical {
  width: 61px;
  height: 33px;
  margin-bottom: 8px;
}

.w-widget-twitter-count-shim.w--vertical:before, .w-widget-twitter-count-shim.w--vertical:after {
  content: " ";
  pointer-events: none;
  border: solid #0000;
  width: 0;
  height: 0;
  position: absolute;
  top: 100%;
  left: 50%;
}

.w-widget-twitter-count-shim.w--vertical:before {
  border-width: 5px;
  border-color: #5d6c7b #75869600 #75869600;
  margin-left: -5px;
}

.w-widget-twitter-count-shim.w--vertical:after {
  border-width: 4px;
  border-color: #fff #fff0 #fff0;
  margin-left: -4px;
}

.w-widget-twitter-count-shim.w--vertical .w-widget-twitter-count-inner {
  font-size: 18px;
  line-height: 22px;
}

.w-widget-twitter-count-shim.w--vertical.w--large {
  width: 76px;
}

.w-background-video {
  color: #fff;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.w-background-video > video {
  object-fit: cover;
  z-index: -100;
  background-position: 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  inset: -100%;
}

.w-background-video > video::-webkit-media-controls-start-playback-button {
  -webkit-appearance: none;
  display: none !important;
}

.w-background-video--control {
  background-color: #0000;
  padding: 0;
  position: absolute;
  bottom: 1em;
  right: 1em;
}

.w-background-video--control > [hidden] {
  display: none !important;
}

.w-slider {
  text-align: center;
  clear: both;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  background: #ddd;
  height: 300px;
  position: relative;
}

.w-slider-mask {
  z-index: 1;
  white-space: nowrap;
  height: 100%;
  display: block;
  position: relative;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-slide {
  vertical-align: top;
  white-space: normal;
  text-align: left;
  width: 100%;
  height: 100%;
  display: inline-block;
  position: relative;
}

.w-slider-nav {
  z-index: 2;
  text-align: center;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  height: 40px;
  margin: auto;
  padding-top: 10px;
  position: absolute;
  inset: auto 0 0;
}

.w-slider-nav.w-round > div {
  border-radius: 100%;
}

.w-slider-nav.w-num > div {
  width: auto;
  height: auto;
  font-size: inherit;
  line-height: inherit;
  padding: .2em .5em;
}

.w-slider-nav.w-shadow > div {
  box-shadow: 0 0 3px #3336;
}

.w-slider-nav-invert {
  color: #fff;
}

.w-slider-nav-invert > div {
  background-color: #2226;
}

.w-slider-nav-invert > div.w-active {
  background-color: #222;
}

.w-slider-dot {
  cursor: pointer;
  background-color: #fff6;
  width: 1em;
  height: 1em;
  margin: 0 3px .5em;
  transition: background-color .1s, color .1s;
  display: inline-block;
  position: relative;
}

.w-slider-dot.w-active {
  background-color: #fff;
}

.w-slider-dot:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff;
}

.w-slider-dot:focus.w-active {
  box-shadow: none;
}

.w-slider-arrow-left, .w-slider-arrow-right {
  cursor: pointer;
  color: #fff;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  -webkit-user-select: none;
  user-select: none;
  width: 80px;
  margin: auto;
  font-size: 40px;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.w-slider-arrow-left [class^="w-icon-"], .w-slider-arrow-right [class^="w-icon-"], .w-slider-arrow-left [class*=" w-icon-"], .w-slider-arrow-right [class*=" w-icon-"] {
  position: absolute;
}

.w-slider-arrow-left:focus, .w-slider-arrow-right:focus {
  outline: 0;
}

.w-slider-arrow-left {
  z-index: 3;
  right: auto;
}

.w-slider-arrow-right {
  z-index: 4;
  left: auto;
}

.w-icon-slider-left, .w-icon-slider-right {
  width: 1em;
  height: 1em;
  margin: auto;
  inset: 0;
}

.w-slider-aria-label {
  clip: rect(0 0 0 0);
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.w-slider-force-show {
  display: block !important;
}

.w-dropdown {
  text-align: left;
  z-index: 900;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  position: relative;
}

.w-dropdown-btn, .w-dropdown-toggle, .w-dropdown-link {
  vertical-align: top;
  color: #222;
  text-align: left;
  white-space: nowrap;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-decoration: none;
  position: relative;
}

.w-dropdown-toggle {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  padding-right: 40px;
  display: inline-block;
}

.w-dropdown-toggle:focus {
  outline: 0;
}

.w-icon-dropdown-toggle {
  width: 1em;
  height: 1em;
  margin: auto 20px auto auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

.w-dropdown-list {
  background: #ddd;
  min-width: 100%;
  display: none;
  position: absolute;
}

.w-dropdown-list.w--open {
  display: block;
}

.w-dropdown-link {
  color: #222;
  padding: 10px 20px;
  display: block;
}

.w-dropdown-link.w--current {
  color: #0082f3;
}

.w-dropdown-link:focus {
  outline: 0;
}

.w-lightbox-backdrop {
  cursor: auto;
  letter-spacing: normal;
  text-indent: 0;
  text-shadow: none;
  text-transform: none;
  visibility: visible;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  color: #fff;
  text-align: center;
  z-index: 2000;
  opacity: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: #000000e6;
  outline: 0;
  font-family: Helvetica Neue, Helvetica, Ubuntu, Segoe UI, Verdana, sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 300;
  line-height: 1.2;
  list-style: disc;
  position: fixed;
  inset: 0;
  -webkit-transform: translate(0);
}

.w-lightbox-backdrop, .w-lightbox-container {
  -webkit-overflow-scrolling: touch;
  height: 100%;
  overflow: auto;
}

.w-lightbox-content {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.w-lightbox-view {
  opacity: 0;
  width: 100vw;
  height: 100vh;
  position: absolute;
}

.w-lightbox-view:before {
  content: "";
  height: 100vh;
}

.w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before {
  height: 86vh;
}

.w-lightbox-frame, .w-lightbox-view:before {
  vertical-align: middle;
  display: inline-block;
}

.w-lightbox-figure {
  margin: 0;
  position: relative;
}

.w-lightbox-group .w-lightbox-figure {
  cursor: pointer;
}

.w-lightbox-img {
  width: auto;
  max-width: none;
  height: auto;
}

.w-lightbox-image {
  float: none;
  max-width: 100vw;
  max-height: 100vh;
  display: block;
}

.w-lightbox-group .w-lightbox-image {
  max-height: 86vh;
}

.w-lightbox-caption {
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #0006;
  padding: .5em 1em;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-lightbox-embed {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.w-lightbox-control {
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
  width: 4em;
  transition: all .3s;
  position: absolute;
  top: 0;
}

.w-lightbox-left {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yMCAwIDI0IDQwIiB3aWR0aD0iMjQiIGhlaWdodD0iNDAiPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHBhdGggZD0ibTAgMGg1djIzaDIzdjVoLTI4eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDN2MjNoMjN2M2gtMjZ6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==");
  display: none;
  bottom: 0;
  left: 0;
}

.w-lightbox-right {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMjQgNDAiIHdpZHRoPSIyNCIgaGVpZ2h0PSI0MCI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMC0waDI4djI4aC01di0yM2gtMjN6IiBvcGFjaXR5PSIuNCIvPjxwYXRoIGQ9Im0xIDFoMjZ2MjZoLTN2LTIzaC0yM3oiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+");
  display: none;
  bottom: 0;
  right: 0;
}

.w-lightbox-close {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMTggMTciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxNyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMCAwaDd2LTdoNXY3aDd2NWgtN3Y3aC01di03aC03eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDd2LTdoM3Y3aDd2M2gtN3Y3aC0zdi03aC03eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=");
  background-size: 18px;
  height: 2.6em;
  right: 0;
}

.w-lightbox-strip {
  white-space: nowrap;
  padding: 0 1vh;
  line-height: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto hidden;
}

.w-lightbox-item {
  box-sizing: content-box;
  cursor: pointer;
  width: 10vh;
  padding: 2vh 1vh;
  display: inline-block;
  -webkit-transform: translate3d(0, 0, 0);
}

.w-lightbox-active {
  opacity: .3;
}

.w-lightbox-thumbnail {
  background: #222;
  height: 10vh;
  position: relative;
  overflow: hidden;
}

.w-lightbox-thumbnail-image {
  position: absolute;
  top: 0;
  left: 0;
}

.w-lightbox-thumbnail .w-lightbox-tall {
  width: 100%;
  top: 50%;
  transform: translate(0, -50%);
}

.w-lightbox-thumbnail .w-lightbox-wide {
  height: 100%;
  left: 50%;
  transform: translate(-50%);
}

.w-lightbox-spinner {
  box-sizing: border-box;
  border: 5px solid #0006;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  animation: .8s linear infinite spin;
  position: absolute;
  top: 50%;
  left: 50%;
}

.w-lightbox-spinner:after {
  content: "";
  border: 3px solid #0000;
  border-bottom-color: #fff;
  border-radius: 50%;
  position: absolute;
  inset: -4px;
}

.w-lightbox-hide {
  display: none;
}

.w-lightbox-noscroll {
  overflow: hidden;
}

@media (min-width: 768px) {
  .w-lightbox-content {
    height: 96vh;
    margin-top: 2vh;
  }

  .w-lightbox-view, .w-lightbox-view:before {
    height: 96vh;
  }

  .w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before {
    height: 84vh;
  }

  .w-lightbox-image {
    max-width: 96vw;
    max-height: 96vh;
  }

  .w-lightbox-group .w-lightbox-image {
    max-width: 82.3vw;
    max-height: 84vh;
  }

  .w-lightbox-left, .w-lightbox-right {
    opacity: .5;
    display: block;
  }

  .w-lightbox-close {
    opacity: .8;
  }

  .w-lightbox-control:hover {
    opacity: 1;
  }
}

.w-lightbox-inactive, .w-lightbox-inactive:hover {
  opacity: 0;
}

.w-richtext:before, .w-richtext:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-richtext:after {
  clear: both;
}

.w-richtext[contenteditable="true"]:before, .w-richtext[contenteditable="true"]:after {
  white-space: initial;
}

.w-richtext ol, .w-richtext ul {
  overflow: hidden;
}

.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:after, .w-richtext .w-richtext-figure-selected[data-rt-type="video"] div:after, .w-richtext .w-richtext-figure-selected.w-richtext-figure-type-image div, .w-richtext .w-richtext-figure-selected[data-rt-type="image"] div {
  outline: 2px solid #2895f7;
}

.w-richtext figure.w-richtext-figure-type-video > div:after, .w-richtext figure[data-rt-type="video"] > div:after {
  content: "";
  display: none;
  position: absolute;
  inset: 0;
}

.w-richtext figure {
  max-width: 60%;
  position: relative;
}

.w-richtext figure > div:before {
  cursor: default !important;
}

.w-richtext figure img {
  width: 100%;
}

.w-richtext figure figcaption.w-richtext-figcaption-placeholder {
  opacity: .6;
}

.w-richtext figure div {
  color: #0000;
  font-size: 0;
}

.w-richtext figure.w-richtext-figure-type-image, .w-richtext figure[data-rt-type="image"] {
  display: table;
}

.w-richtext figure.w-richtext-figure-type-image > div, .w-richtext figure[data-rt-type="image"] > div {
  display: inline-block;
}

.w-richtext figure.w-richtext-figure-type-image > figcaption, .w-richtext figure[data-rt-type="image"] > figcaption {
  caption-side: bottom;
  display: table-caption;
}

.w-richtext figure.w-richtext-figure-type-video, .w-richtext figure[data-rt-type="video"] {
  width: 60%;
  height: 0;
}

.w-richtext figure.w-richtext-figure-type-video iframe, .w-richtext figure[data-rt-type="video"] iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.w-richtext figure.w-richtext-figure-type-video > div, .w-richtext figure[data-rt-type="video"] > div {
  width: 100%;
}

.w-richtext figure.w-richtext-align-center {
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

.w-richtext figure.w-richtext-align-center.w-richtext-figure-type-image > div, .w-richtext figure.w-richtext-align-center[data-rt-type="image"] > div {
  max-width: 100%;
}

.w-richtext figure.w-richtext-align-normal {
  clear: both;
}

.w-richtext figure.w-richtext-align-fullwidth {
  text-align: center;
  clear: both;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-richtext figure.w-richtext-align-fullwidth > div {
  padding-bottom: inherit;
  display: inline-block;
}

.w-richtext figure.w-richtext-align-fullwidth > figcaption {
  display: block;
}

.w-richtext figure.w-richtext-align-floatleft {
  float: left;
  clear: none;
  margin-right: 15px;
}

.w-richtext figure.w-richtext-align-floatright {
  float: right;
  clear: none;
  margin-left: 15px;
}

.w-nav {
  z-index: 1000;
  background: #ddd;
  position: relative;
}

.w-nav:before, .w-nav:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-nav:after {
  clear: both;
}

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

.w-nav-link {
  vertical-align: top;
  color: #222;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.w-nav-link.w--current {
  color: #0082f3;
}

.w-nav-menu {
  float: right;
  position: relative;
}

[data-nav-menu-open] {
  text-align: center;
  background: #c8c8c8;
  min-width: 200px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: visible;
  display: block !important;
}

.w--nav-link-open {
  display: block;
  position: relative;
}

.w-nav-overlay {
  width: 100%;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-nav-overlay [data-nav-menu-open] {
  top: 0;
}

.w-nav[data-animation="over-left"] .w-nav-overlay {
  width: auto;
}

.w-nav[data-animation="over-left"] .w-nav-overlay, .w-nav[data-animation="over-left"] [data-nav-menu-open] {
  z-index: 1;
  top: 0;
  right: auto;
}

.w-nav[data-animation="over-right"] .w-nav-overlay {
  width: auto;
}

.w-nav[data-animation="over-right"] .w-nav-overlay, .w-nav[data-animation="over-right"] [data-nav-menu-open] {
  z-index: 1;
  top: 0;
  left: auto;
}

.w-nav-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;
}

.w-nav-button:focus {
  outline: 0;
}

.w-nav-button.w--open {
  color: #fff;
  background-color: #c8c8c8;
}

.w-nav[data-collapse="all"] .w-nav-menu {
  display: none;
}

.w-nav[data-collapse="all"] .w-nav-button, .w--nav-dropdown-open, .w--nav-dropdown-toggle-open {
  display: block;
}

.w--nav-dropdown-list-open {
  position: static;
}

@media screen and (max-width: 991px) {
  .w-nav[data-collapse="medium"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="medium"] .w-nav-button {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .w-nav[data-collapse="small"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="small"] .w-nav-button {
    display: block;
  }

  .w-nav-brand {
    padding-left: 10px;
  }
}

@media screen and (max-width: 479px) {
  .w-nav[data-collapse="tiny"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="tiny"] .w-nav-button {
    display: block;
  }
}

.w-tabs {
  position: relative;
}

.w-tabs:before, .w-tabs:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-tabs:after {
  clear: both;
}

.w-tab-menu {
  position: relative;
}

.w-tab-link {
  vertical-align: top;
  text-align: left;
  cursor: pointer;
  color: #222;
  background-color: #ddd;
  padding: 9px 30px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.w-tab-link.w--current {
  background-color: #c8c8c8;
}

.w-tab-link:focus {
  outline: 0;
}

.w-tab-content {
  display: block;
  position: relative;
  overflow: hidden;
}

.w-tab-pane {
  display: none;
  position: relative;
}

.w--tab-active {
  display: block;
}

@media screen and (max-width: 479px) {
  .w-tab-link {
    display: block;
  }
}

.w-ix-emptyfix:after {
  content: "";
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.w-dyn-empty {
  background-color: #ddd;
  padding: 10px;
}

.w-dyn-hide, .w-dyn-bind-empty, .w-condition-invisible {
  display: none !important;
}

.wf-layout-layout {
  display: grid;
}

@font-face {
  font-family: Inter;
  src: url("../fonts/69c4f2e5d88f672fd885654b_inter-v13-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url("../fonts/69c4f2e5d88f672fd8856549_inter-v13-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url("../fonts/69c4f2e5d88f672fd885654a_inter-v13-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: InterTight;
  src: url("../fonts/69e2230e0044f23d1e007d7a_InterTight-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: InterTight;
  src: url("../fonts/69e2230e0044f23d1e007d7b_InterTight-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: InterTight;
  src: url("../fonts/69e2230e0044f23d1e007d7c_InterTight-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: InterTight;
  src: url("../fonts/69e2230e0044f23d1e007d7d_InterTight-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: InterTight;
  src: url("../fonts/69e2230e0044f23d1e007d7e_InterTight-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: InterTight;
  src: url("../fonts/69e2230e0044f23d1e007d7f_InterTight-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: InterTight;
  src: url("../fonts/69e2230e0044f23d1e007d80_InterTight-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: InterTight;
  src: url("../fonts/69e2230e0044f23d1e007d85_InterTight-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: InterTight;
  src: url("../fonts/69e2230e0044f23d1e007d86_InterTight-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: InterTight;
  src: url("../fonts/69e2230e0044f23d1e007d87_InterTight-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: InterTight;
  src: url("../fonts/69e2230e0044f23d1e007d81_InterTight-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: InterTight;
  src: url("../fonts/69e2230e0044f23d1e007d82_InterTight-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: InterTight;
  src: url("../fonts/69e2230e0044f23d1e007d83_InterTight-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: InterTight;
  src: url("../fonts/69e2230e0044f23d1e007d84_InterTight-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --stellar-site---padding--pd-06: 1.5rem;
  --stellar-site---padding--pd-04: 1rem;
  --stellar-site---color--c1-10: #0000001a;
  --stellar-site---padding--pd-09: 3rem;
  --stellar-site---color--c1-04: #0000000a;
  --stellar-site---padding--pd-07: 2rem;
  --f5f5f7: ;
  --color--heading-color: #000;
  --1: 2rem;
  --size--heading-2-2: 1.7rem;
  --000: #000;
  --size--text-size-standard: 1rem;
  --white: #fff;
  --size--font-size-standard: 1rem;
  --stellar-site---padding--pd-10: 4rem;
  --size--font-size-title: 1.2rem;
  --size--project-title-mobile\<deleted\|variable-5ad10562-318d-8018-674a-30c847be783e\>: 1.2rem;
  --black: var(--f5f5f7);
  --size--text-button\<deleted\|variable-761afdc2-a0ae-b12e-e87a-d27483ad4112\>: .8rem;
  --size--font-size-medium: 1.4rem;
  --color--text-color-light-gray: #acacac;
  --size--font-size-button: .8rem;
  --color--bg-cards-section: #9f9f9f;
  --color--bg-color-footer: #fff;
  --stellar-site---padding--pd-05: 1.25rem;
  --about-125: 1.125rem;
  --stellar-site---color--c1: #000;
  --stellar-site---padding--pd-03: .75rem;
  --stellar-site---color--c1-75: #000000bf;
  --stellar-site---color--c1-40: #0006;
  --чому-нас: var(--white);
  --stellar-site---color--c2: white;
  --stellar-site---color--c2-80: #fffc;
  --stellar-site---color--c2-60: #fff9;
  --stellar-site---color--c2-20: #fff3;
  --size--heading-1: 3.5rem;
  --stellar-site---color--c3: #f24913;
  --size--heading-1-tablet: 2.7rem;
  --stellar-site---padding--pd-15: 15rem;
  --stellar-site---padding--pd-14: 12rem;
  --size--heading-1-mobile: 1.9rem;
  --stellar-site---padding--pd-13: 10rem;
  --size--heading-2: 2.7rem;
  --size--heading-2-tablet: 1.9rem;
  --stellar-site---padding--pd-12: 8rem;
  --stellar-site---padding--pd-11: 6rem;
  --size--heading-2-mobile: 1.5rem;
  --stellar-site---padding--pd-08: 2.5rem;
  --stellar-site---padding--pd-02: .5rem;
  --stellar-site---padding--pd-01: .25rem;
}

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

.w-layout-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;
}

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

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

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

.stellar-site--container {
  width: 100%;
  max-width: 90rem;
  padding-right: var(--stellar-site---padding--pd-06);
  padding-left: var(--stellar-site---padding--pd-06);
  margin-left: auto;
  margin-right: auto;
}

.stellar-site--text-xlarge {
  font-size: 1.5rem;
  line-height: 135%;
}

.stellar-site--text-regular {
  font-size: 1rem;
  line-height: 150%;
}

.stellar-site--footer__content {
  padding-top: var(--stellar-site---padding--pd-06);
  padding-bottom: var(--stellar-site---padding--pd-06);
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-flow: column;
  display: flex;
}

.stellar-site--footer__main {
  flex-flow: column;
  display: flex;
}

.stellar-site--footer__img {
  object-fit: cover;
  width: 100%;
}

.stellar-site--footer__legal {
  padding-top: var(--stellar-site---padding--pd-06);
  padding-bottom: var(--stellar-site---padding--pd-06);
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  border-bottom: 1px solid var(--stellar-site---color--c1-10);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.stellar-site--footer__contact {
  padding-top: var(--stellar-site---padding--pd-06);
  padding-bottom: var(--stellar-site---padding--pd-06);
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  border-top: 1px solid var(--stellar-site---color--c1-10);
  border-bottom: 1px solid var(--stellar-site---color--c1-10);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.stellar-site--footer__cta {
  padding-top: var(--stellar-site---padding--pd-06);
  padding-bottom: var(--stellar-site---padding--pd-06);
  border-top: 1px solid var(--stellar-site---color--c1-10);
  font-weight: 500;
}

.stellar-site--footer__nav {
  padding-top: var(--stellar-site---padding--pd-06);
  padding-bottom: var(--stellar-site---padding--pd-06);
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.stellar-site--footer__link:hover {
  text-decoration: underline;
}

.stellar-site--footer__contact-item {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.stellar-site--footer__contact-item.stellar-site--align-right {
  justify-content: flex-start;
  align-items: flex-end;
}

.stellar-site--footer__nav-link {
  height: 6rem;
  padding-right: var(--stellar-site---padding--pd-09);
  padding-left: var(--stellar-site---padding--pd-09);
  border: 1px solid var(--stellar-site---color--c1-10);
  border-radius: 6rem;
  justify-content: center;
  align-items: center;
  transition: background-color .2s cubic-bezier(.39, .575, .565, 1);
  display: inline-flex;
}

.stellar-site--footer__nav-link:hover {
  background-color: var(--stellar-site---color--c1-04);
}

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;
}

.body {
  background-color: var(--white);
  background-image: linear-gradient(#fffc, #fffc), url("../images/6a60c33d417e0abd48a7b1db_ChatGPT%20Image%2022%20июл.%202026%20г.,%2016_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;
}

.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.w--current {
  height: 40px;
  padding-top: 5px;
  padding-left: 0;
}

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

.brand.w--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;
}

.nav-menu {
  float: none;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: space-between;
  align-items: center;
  width: 400px;
  height: 40px;
  margin-left: auto;
  margin-right: auto;
  font-family: Open Sans, sans-serif;
  display: flex;
}

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

.hero-heading-text-wrapper {
  justify-content: space-between;
  height: 141px;
  margin-top: -98px;
  padding-top: 41px;
  display: flex;
}

.hero-text-wrapper {
  max-width: none;
  margin-top: auto;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  display: flex;
}

.paragraph {
  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%;
}

.paragraph.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._1-1 {
  z-index: -1;
  border-radius: 0;
  height: auto;
  margin-top: auto;
  position: relative;
  inset: 0% 0% auto;
}

.hero-text-bottom-wrapper {
  text-wrap: balance;
  max-width: 50%;
  margin-top: clamp(3rem, 5vw, 6rem);
}

.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-change-copy {
  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;
}

.bold.font-size-medium-copy {
  font-family: Open Sans, sans-serif;
  font-size: var(--stellar-site---padding--pd-10);
  text-align: center;
  margin-bottom: 32px;
  font-weight: 600;
}

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

.parallax:hover {
  filter: none;
}

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

.parallax.about-photo-copy._1-2 {
  filter: none;
  width: 100%;
  height: 100vh;
  position: static;
  overflow: hidden;
}

.cards-columns-wrapper {
  background-image: none;
  justify-content: space-between;
  width: 100%;
  height: 62svh;
  display: flex;
  position: static;
}

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

.cards-column-right {
  flex-flow: column;
  width: 40%;
  height: 50svh;
  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;
}

.card-left-heading-wrapper {
  position: static;
}

.cards-wrapper {
  flex-flow: row;
  justify-content: space-between;
  align-items: stretch;
  padding-bottom: 7rem;
  display: flex;
}

.background-color-wrapper {
  background-image: linear-gradient(94deg, var(--f5f5f7), #c5c5c5);
}

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

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

.scroll-wrapper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
}

.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-image {
  opacity: 0;
  pointer-events: none;
  width: 33.3333%;
  min-height: 30rem;
  transition: opacity .2s;
  display: block;
  position: absolute;
  overflow: clip;
  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;
}

.project-number {
  color: var(--000);
  font-size: var(--size--text-size-standard);
  line-height: 91px;
  text-decoration: none;
}

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

.gallery-grid {
  grid-column-gap: 20px;
  grid-template: ". Area-2 Area"
                 ". Area-3 Area-4"
                 ". . ."
                 ". Area-5 ."
                 ". . ."
                 ". . ."
                 ". . ."
                 ". . ."
                 ". . ."
                 ". . ."
                 ". . ."
                 ". . ."
                 ". . ."
                 ". . ."
                 ". . ."
                 ". . ."
                 / .5fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr .25fr;
  grid-auto-rows: minmax(0, .5fr);
  margin-top: 0;
}

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

.gallery-image {
  filter: grayscale(77%);
  max-height: 100%;
  transition: transform .5s, filter 1.5s;
}

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

.overlay {
  background-color: #e7e3e3;
  position: absolute;
  inset: 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;
}

.gallery-image-heading-wrapper {
  padding-top: 8rem;
  padding-bottom: 8rem;
  padding-left: 2rem;
}

.gallery-text-wrapper {
  max-width: 50%;
}

.process-wrapper {
  margin-bottom: 8rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10rem;
}

.process-content {
  margin-top: 0;
}

.process-intro-text {
  max-width: 50%;
  margin-top: clamp(2rem, 6vw, 7rem);
}

.process-steps {
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  margin-top: 4rem;
  display: flex;
}

.description {
  text-align: center;
  max-width: 50%;
}

.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-left {
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 50%;
  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;
}

.text-size-medium {
  font-size: var(--size--font-size-medium);
  letter-spacing: -.04em;
  font-weight: 400;
  line-height: 115%;
}

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

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

.text-block {
  color: var(--000);
}

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

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

.heading-2.marrgin-bottom-0-5rem {
  margin-bottom: .5rem;
}

.heading-1 {
  width: 600px;
  max-width: 600vh;
  height: 100px;
  font-family: Oswald, sans-serif;
  font-size: 3.5rem;
}

.heading-1.margin-bottom-1rem {
  margin-bottom: 1rem;
}

.gallery-heading-wrapper {
  margin-top: 10rem;
  margin-bottom: 4rem;
}

.projects-content {
  padding-top: clamp(2rem, 2vw, 3.5rem);
}

.projects-heading-wrapper {
  max-width: 53ch;
}

.projects-heading-text-wrapper {
  justify-content: space-between;
  height: 20svh;
  margin-bottom: 6.25rem;
  display: flex;
}

.projects-text-wrapper {
  align-self: flex-end;
  max-width: 54ch;
}

.project-title-wrapper {
  justify-content: flex-end;
  padding: 1rem 0 1rem 1rem;
  display: flex;
}

.project-wrapper {
  margin-bottom: 8rem;
}

.project-70-width {
  max-width: 70%;
  height: 36rem;
  max-height: 36rem;
}

.project-collection-item, .project-collection-list, .project-list-wrapper {
  height: 100%;
}

.project-30-width {
  max-width: 30%;
  height: 36rem;
  margin-right: 0;
}

.project-30-width.margin-right-14-rem {
  margin-right: 1.4rem;
}

.project-50-width {
  width: 100%;
  max-width: 40%;
  height: 36rem;
}

.projects-wrapper {
  justify-content: flex-start;
  margin-bottom: 8rem;
  display: flex;
}

.projects-wrapper.space-between {
  justify-content: space-between;
}

.project-link {
  height: 100%;
  text-decoration: none;
  display: block;
}

.project-page {
  padding-top: clamp(2rem, 2vw, 3.5rem);
}

.project-page-image-wrapper {
  height: 45vmin;
}

.project-info {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
  display: flex;
}

.info-column-left {
  display: flex;
}

.info-column-right {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: row;
  flex: 0 auto;
  justify-content: space-between;
  align-items: stretch;
  width: 45%;
  display: flex;
}

.text-light-gray {
  color: var(--color--text-color-light-gray);
}

.text-light-gray.margin-right {
  margin-right: 1rem;
}

.project-description {
  justify-content: space-between;
  align-items: stretch;
  min-height: 45vmin;
  margin-top: 0;
  margin-bottom: 8rem;
  display: flex;
}

.project-description-column-left {
  align-self: flex-end;
  margin-top: 0;
}

.project-description-column-right {
  align-self: flex-end;
  max-width: 48%;
}

.paragraph-one {
  margin-bottom: .5rem;
}

.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;
}

.about-text-wraper {
  align-self: flex-end;
  max-width: 57ch;
}

.about-gallery {
  justify-content: space-between;
  margin-top: 2rem;
  margin-bottom: 4rem;
  display: flex;
}

.about-image-wrapper {
  max-height: 50vmax;
}

.team-text-wrapper {
  flex: 0 auto;
  justify-content: center;
  align-items: flex-end;
  max-width: 58ch;
  margin-top: 0;
  display: flex;
}

.team-text-wrapper.margin {
  margin-top: 1.5rem;
  margin-bottom: .5rem;
}

.our-team {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  min-height: 30vmin;
  margin: 12rem auto 8rem;
  padding: 0;
}

.team-item {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  border-radius: 0;
  flex-flow: column;
}

.team-item-title {
  flex-flow: column;
  justify-content: flex-end;
  height: 100%;
  margin-top: .1rem;
  padding: 0 1rem 0 0;
  display: flex;
}

.team-item-image {
  width: 16vmin;
  height: 21vmin;
}

.small-gallery {
  justify-content: space-between;
  max-width: 50%;
  display: flex;
}

.small-gallery-text {
  max-width: 25%;
  margin-top: 0;
}

.small-gallery-bottom-wrapper {
  justify-content: space-between;
  margin-top: 60px;
  margin-bottom: 60px;
  display: flex;
}

.small-gallery-image-wrapper {
  width: 48%;
  height: 36vmin;
}

.explore-more-link-wrapper {
  margin-top: 4rem;
  margin-bottom: 8rem;
}

.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;
}

.button-title {
  z-index: 3;
  color: var(--000);
  font-family: Open Sans, sans-serif;
  font-size: var(--size--font-size-button);
  padding: .5rem 1rem;
  line-height: 150%;
  text-decoration: none;
  position: relative;
}

.button-mask {
  z-index: 2;
  color: var(--white);
  background-color: #161616;
  position: absolute;
  inset: 0%;
  transform: translate(0, 100%);
}

.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;
}

.contact-heading-wrapper {
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  height: 15rem;
  margin-top: 0;
  margin-bottom: 8rem;
  padding-top: clamp(2rem, 2vw, 3.5rem);
  padding-bottom: 0;
  display: flex;
}

.submit-button {
  color: var(--000);
  font-size: var(--size--font-size-button);
  letter-spacing: .05em;
  background-color: #3898ec00;
  border: 1px solid #000;
  border-radius: 4px;
  padding: .5rem 1.5rem;
  line-height: 140%;
}

.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;
}

.text-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;
}

.link-button-wrapper {
  text-decoration: none;
}

.style-guide-header-wrapper {
  max-width: 50%;
  padding-top: clamp(2rem, 2vw, 3.5rem);
  padding-bottom: 6rem;
}

.divider {
  background-color: var(--color--bg-cards-section);
  width: 100%;
  height: 1px;
}

.style-guide {
  margin-bottom: 8rem;
}

.color-item {
  border: 1px solid #e6e7e8;
  border-radius: 4px;
  box-shadow: 1px 1px 3px #0000000a;
}

.color-item-fill {
  border: 1px solid #0000;
  border-radius: 4px;
  height: 128px;
}

.color-item-fill.bg-color-body {
  border: 1px solid #000;
  border-radius: 4px;
}

.color-item-fill.bg-color-cards {
  background-color: var(--color--bg-cards-section);
}

.color-item-fill.bg-color-footer {
  background-color: var(--color--bg-color-footer);
}

.color-item-fill.heading-text-color {
  background-color: var(--color--heading-color);
}

.color-item-fill.text-color-light-gray {
  background-color: var(--color--text-color-light-gray);
}

.style-guide-color-wrapper {
  margin-top: 4rem;
}

.overline {
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}

.color-item-info {
  padding: .8rem .8rem .8rem 0;
}

.style-guide-block-content {
  margin-top: 4rem;
}

.colors-grid {
  grid-column-gap: 4rem;
  grid-row-gap: 32px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.style-guide-typography-wrapper {
  margin-top: 4rem;
}

.font-size-standard {
  font-size: 1rem;
}

.button-grid {
  grid-template-rows: auto;
}

.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;
}

.footer-bottom-links-wrapper {
  margin-bottom: 6rem;
}

.link-k-web-studio, .link-webflow {
  color: var(--000);
}

.link-block-wrapper {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.link-image-wrapper {
  width: 20px;
  height: 20px;
  margin-left: 5px;
}

.fonts-wrapper {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.licenses-heading-wrapper {
  margin-top: 0;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.images-wrapper {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.licensing-container {
  min-height: 60vmin;
  margin-top: clamp(2rem, 2vw, 3.5rem);
  padding-bottom: 4rem;
}

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

.changelog-wrapper {
  flex-flow: column;
  min-height: 60vmin;
  margin-top: clamp(2rem, 2vw, 3.5rem);
  padding-top: 2rem;
  display: flex;
}

.changelog-text-wrapper {
  margin-top: 2rem;
}

.changelog-bottom-text {
  justify-content: space-between;
  align-items: stretch;
  margin-top: 1rem;
  display: flex;
}

.bold-text {
  box-sizing: border-box;
  letter-spacing: -.02em;
  max-width: none;
  font-weight: 700;
  display: block;
}

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

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

.paragraph-2 {
  margin-right: 0;
  padding-right: 0;
  font-family: Open Sans, sans-serif;
  font-weight: 400;
}

.bold-text-2 {
  color: var(--000);
  cursor: auto;
  font-family: Open Sans, sans-serif;
  font-size: 1.1rem;
}

.paragraph-3 {
  font-family: Open Sans, sans-serif;
}

.paragraph-4 {
  margin-bottom: 0;
  font-family: Open Sans, sans-serif;
}

.paragraph-5 {
  font-family: Open Sans, sans-serif;
}

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

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

.image-3 {
  filter: grayscale(77%);
  transition: transform 1.5s, filter 1.5s;
}

.image-3:hover {
  filter: grayscale(0%);
  transform: scale(1.2);
}

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

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

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

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

.section {
  margin-top: 223px;
}

.section-2 {
  max-width: 1404px;
}

.section-3 {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.section-4, .section-5 {
  margin-left: auto;
  margin-right: auto;
}

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

.section-7 {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

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

.container-2.process-size-cont {
  max-width: 1440px;
}

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

.heading-3.sizehead3 {
  font-size: 4rem;
}

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

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

.gallery-grid-2 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  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;
}

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

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

.paragraph-6 {
  color: #121212;
  letter-spacing: 0;
  align-self: auto;
  margin-left: auto;
  padding-top: 0;
  font-family: Open Sans, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 140%;
  display: block;
  position: relative;
  overflow: visible;
}

.bold-text-3 {
  box-sizing: border-box;
  letter-spacing: -.02em;
  text-indent: 0;
  max-width: none;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-weight: 700;
  display: block;
}

.heading-4 {
  width: 600px;
  max-width: 600vh;
  height: 100px;
  font-family: Oswald, sans-serif;
  font-size: 3.5rem;
}

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

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

.paragraph-7 {
  font-family: Open Sans, sans-serif;
  font-size: var(--size--text-size-standard);
  font-weight: 400;
}

.background-color-wrapper-2 {
  background-color: #f5f5f7;
  background-image: linear-gradient(94deg, #f5f5f5, #f1f0f0);
}

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

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

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

.process-wrapper-2 {
  max-width: 1440px;
  margin-bottom: 8rem;
  padding-top: 0;
}

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

.paragraph-8 {
  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%;
}

.paragraph-8.bold {
  font-weight: 600;
}

.the-sticky-div-title {
  z-index: 300;
  color: #ecf0f1c4;
  text-align: center;
  letter-spacing: 0;
  text-transform: none;
  background-color: #3498db00;
  width: 100%;
  margin-top: 10vh;
  margin-bottom: 0;
  font-family: Montserrat, sans-serif;
  font-size: 60px;
  font-weight: 300;
  line-height: 45px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: perspective(2000px);
}

.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;
}

.a-block.new {
  width: 150px;
  padding-top: 110px;
}

.a-block.newosela {
  justify-content: center;
  align-items: center;
  padding-bottom: 34px;
  padding-left: 94px;
  padding-right: 17px;
  display: block;
}

.a-block.archo {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: row;
  flex: none;
  justify-content: space-around;
  align-items: center;
  padding-top: 125px;
  padding-bottom: 0;
  display: block;
}

.a-block.tebin {
  width: 150px;
  height: auto;
  padding-top: 75px;
}

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

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

.text-span-2 {
  font-size: 31px;
  line-height: 34px;
  display: inline;
}

.gradient {
  text-align: center;
  border-radius: 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-left: 40px;
  padding-right: 40px;
  display: flex;
}

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

.night-sky-fixed-background {
  z-index: 100;
  background-color: var(--f5f5f7);
  opacity: 1;
  width: 800vh;
  height: 100%;
  position: absolute;
}

.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;
}

.heading-5 {
  clear: none;
  text-align: left;
  align-self: auto;
  margin-top: 8rem;
  margin-left: auto;
  font-family: Open Sans, sans-serif;
  font-size: 2rem;
  font-weight: 600;
  position: sticky;
  inset: 0% 100% 0% 0%;
}

.heading-5.size-partners-head {
  margin-left: 1%;
}

.image-6 {
  width: 40%;
  max-width: 200%;
  height: 20%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 6px;
}

.image-7 {
  width: 300px;
  height: 40vh;
}

.image-8 {
  opacity: 1;
  outline-offset: 0px;
  mix-blend-mode: normal;
  background-color: #0000;
  outline: 3px #333;
  width: 100%;
  max-width: none;
  height: auto;
  margin-bottom: 15%;
}

.image-8.osela {
  width: 50%;
  padding-bottom: 0;
}

.image-8.size-osela {
  width: 25%;
}

.image-8.size-asgard {
  width: 100%;
  margin-bottom: 20%;
}

.image-8.size-sensar {
  width: 90%;
  margin-bottom: 20%;
}

.div-block {
  z-index: 999;
  background-color: #e9dede;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

.div-block-2 {
  background-color: #fff;
  width: 400px;
  margin: auto;
  padding: 30px;
}

.text-block-2 {
  position: absolute;
  inset: 0% 0% auto auto;
}

.div-block-3 {
  cursor: auto;
}

.text-block-3 {
  position: absolute;
  inset: 0% 0% auto auto;
}

.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.flex-4 {
  -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/69d4c7ef9f3bc15bae6fd3a4_360_F_261917142_AthgSu36emNXAfSgc8bgfYhAsQi1LLnL.jpg");
  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;
}

.heading-6 {
  font-family: Open Sans, sans-serif;
}

.text-block-4 {
  font-family: Open Sans, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  position: fixed;
}

.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;
}

.bold-text-4, .bold-text-5, .bold-text-6, .bold-text-7, .bold-text-8 {
  color: #090611;
  font-size: 1.2rem;
  font-weight: 700;
}

.heading-7 {
  font-family: Oswald, sans-serif;
  font-weight: 700;
}

.div-block-7 {
  margin-left: 130px;
  position: static;
}

.hero-text-wrapper-2 {
  max-width: 55ch;
  margin-top: auto;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  display: block;
}

.paragraph-9 {
  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%;
}

.paragraph-9.size-parag-9 {
  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;
}

.paragraph-9.size-parag-9.size-10 {
  padding-top: 140px;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2rem;
  display: none;
}

.paragraph-9.size-aboutustext {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 400;
}

.paragraph-9.size-aboutustext-copy {
  color: #090611;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 0;
  font-size: 1.1rem;
  font-weight: 400;
}

.paragraph-9.size-aboutustext-copy-copy {
  color: #090611;
  font-size: var(--stellar-site---padding--pd-05);
  text-align: center;
  margin-top: 0;
  margin-bottom: 16px;
  font-weight: 400;
}

.paragraph-9.size-aboutustext-copy-copy._100, .paragraph-9.size-aboutustext-copy-copy._3 {
  font-size: var(--about-125);
  margin-top: 0;
  margin-bottom: 20px;
}

.paragraph-9.size-aboutustext-copy-copy-copy {
  color: #090611;
  font-size: var(--stellar-site---padding--pd-05);
  text-align: center;
  margin-top: 0;
  font-weight: 700;
}

.bold-text-9 {
  box-sizing: border-box;
  letter-spacing: -.02em;
  -webkit-text-stroke-width: 0px;
  text-indent: 0;
  text-overflow: clip;
  white-space: normal;
  width: 800px;
  max-width: none;
  height: 55px;
  min-height: auto;
  transform-style: preserve-3d;
  font-family: Open Sans, sans-serif;
  font-weight: 800;
  line-height: 90%;
  display: block;
  transform: scale3d(1, 1.13, 1);
}

.heading-8 {
  width: auto;
  max-width: none;
  height: auto;
  padding-top: 45px;
  font-family: Open Sans, sans-serif;
  font-size: 3.5rem;
}

.body-2 {
  margin-left: auto;
  margin-right: auto;
}

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

.paragraph-10 {
  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%;
}

.heading-9 {
  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);
}

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

.font-size-medium-2 {
  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;
}

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

.font-size-medium-2.link:hover {
  color: #000;
}

.font-size-medium-2.size-text-about {
  font-size: 1.5rem;
  font-weight: 400;
}

.font-size-medium-2.size-text-about-copy {
  color: #090611;
  font-size: 1.4rem;
  font-weight: 600;
}

.image-9 {
  max-width: 100%;
  height: 100%;
  overflow: auto;
}

.button-2 {
  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;
}

.button-2:hover {
  transform: scale(1.05);
}

.button-2.bnt-opt1 {
  margin-top: 15px;
}

.button-2.btn-contact-copy {
  margin-top: auto;
  margin-left: 70px;
}

.form-2 {
  padding-bottom: 0;
}

.text-field-2, .text-field-3, .text-field-4 {
  border-radius: 5px;
}

.div-block-8 {
  padding-top: 296px;
  position: absolute;
  inset: 0% 0% 0% auto;
}

.div-block-8.left {
  inset: auto auto 0% 0%;
}

.text-block-7 {
  cursor: pointer;
  font-size: 20px;
  font-weight: 600;
  position: absolute;
  top: 42%;
  right: 20px;
}

.highlight-items {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  border-bottom: 1px solid #f2f2f21a;
  flex-flow: column;
  width: 100%;
  padding-bottom: 24px;
  display: flex;
}

.left-heading-block {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  color: #f2f2f2;
  text-align: left;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 440px;
  display: flex;
}

.primary-button {
  color: #f2f2f2;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
  background-color: #122c5f;
  border: 1px solid #122c5f;
  border-radius: 100px;
  padding: 12px 18px;
  transition-property: background-color, color;
  transition-duration: .25s, .25s;
  transition-timing-function: cubic-bezier(.39, .575, .565, 1), cubic-bezier(.39, .575, .565, 1);
}

.primary-button:hover {
  color: #122c5f;
  background-color: #122c5f00;
}

.primary-button.primary-white {
  color: #122c5f;
  background-color: #f2f2f2;
  border-color: #f2f2f2;
}

.primary-button.primary-white:hover {
  color: #f2f2f2;
  background-color: #f2f2f200;
}

.regular-s.color-white-opacity-70 {
  font-family: Open Sans, sans-serif;
}

.medium-uppercase-xs {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 500;
  line-height: 120%;
}

.medium-uppercase-xs.second-button-text {
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  position: absolute;
  bottom: 0;
  transform: perspective(250px)rotateX(90deg)rotateY(0)rotateZ(0)perspective(50px);
}

.medium-uppercase-xs.first-button-text {
  transform-origin: 50% 0;
  transform: perspective(250px);
}

.default-container {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
}

.highlight-item {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  color: #f2f2f2;
  -webkit-user-select: none;
  user-select: none;
  border-top: 1px solid #f2f2f21a;
  grid-template-rows: auto;
  grid-template-columns: 5fr 3fr;
  grid-auto-columns: 1fr;
  padding-top: 24px;
  display: grid;
}

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

.highlight-info {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  justify-content: space-between;
  max-width: 360px;
  padding-top: 8px;
  padding-bottom: 8px;
  display: flex;
}

.medium-uppercase-m {
  color: #000;
  text-transform: uppercase;
  font-family: Open Sans, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 120%;
}

.left-heading-block-wrapper {
  z-index: 1;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  display: flex;
  position: relative;
}

.container-content {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
}

.highlight-value-wrapper {
  overflow: hidden;
}

.button-text-wrapper {
  perspective: 250px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
  transform: perspective(250px);
}

.section-8.section-top-padding.section-bottom-padding {
  margin-top: 60px;
  margin-bottom: 60px;
}

.large-value {
  letter-spacing: -6.72px;
  font-size: 168px;
  line-height: 88%;
}

.large-value.max-width-480.color-white-opacity-20 {
  color: #2f7cf6e3;
  font-size: 130px;
}

.chips-shape {
  border-radius: 50%;
  width: 3px;
  height: 3px;
}

.chips-shape.white-chips-shape {
  background-color: #f2f2f2;
}

.chips {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 100px;
  justify-content: flex-start;
  align-items: center;
  padding: 6px 10px;
  display: flex;
}

.chips.white-chips {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #f2f2f2;
  background-color: #f2f2f208;
  border: 1px solid #f2f2f21a;
}

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

.stats {
  margin-top: 100px;
  margin-bottom: 100px;
  padding-left: 30px;
  padding-right: 30px;
}

.container-3 {
  width: 100%;
  max-width: 1290px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.stats-wrapper {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  background-color: #5a5a4e;
  border-radius: 24px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: stretch;
  padding: 60px 85px;
  display: flex;
}

.stats-item {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 185px;
  display: flex;
}

.large-stats-number {
  color: #fff;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 48px;
  font-weight: 400;
  line-height: 125%;
}

.large-stats-text {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 156%;
}

.large-stats-text.opacity-76 {
  font-family: Open Sans, sans-serif;
  font-weight: 600;
}

.text-block-8 {
  color: #fff;
  font-family: Open Sans, sans-serif;
  font-size: 1rem;
  font-weight: 600;
}

.eye-brow-text-wrap {
  grid-column-gap: .333333em;
  grid-row-gap: .333333em;
  justify-content: flex-start;
  align-items: center;
  display: inline-flex;
}

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

.eye-brow {
  grid-column-gap: .6em;
  grid-row-gap: .6em;
  text-transform: uppercase;
  background-color: #00000008;
  border-radius: 100vw;
  justify-content: center;
  align-items: center;
  padding: .6em 1em;
  font-size: .75rem;
  font-weight: 500;
  display: inline-flex;
}

.process-line {
  -webkit-text-fill-color: inherit;
  background-color: #a00303;
  background-clip: border-box;
  width: 4px;
  height: 0%;
}

.eye-brow-dot {
  aspect-ratio: 1;
  object-fit: cover;
  background-color: #1a1a1a;
  border-radius: 100vw;
  width: .6em;
  height: .6em;
}

.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.size, .process-item-desc.size-copy, .process-item-desc.size-copy {
  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);
}

.eye-brow-number {
  color: #0006;
  -webkit-text-stroke-color: #0009;
}

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

.process-item-icon {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
}

.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-main {
  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-line-ray {
  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;
}

.heading-layout.size-process {
  margin-top: 0;
  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;
}

.button-text-wrap {
  justify-content: center;
  align-items: center;
  display: flex;
}

.button-text {
  text-shadow: 0 -2em #fff;
  overflow: hidden;
}

.button-contact-avt-img {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 100vw;
  width: 1.75rem;
  height: 1.75rem;
  margin-left: -.5rem;
  box-shadow: 0 0 0 1px #8b8a8acc;
}

.button-inner {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  box-shadow: none;
  background-color: #000;
  border-radius: 100vw;
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: 1rem 1.5rem;
  display: flex;
}

.icon-button {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1rem;
  height: 1rem;
  display: flex;
}

.button-innershadow {
  z-index: 2;
  opacity: .5;
  pointer-events: none;
  background-image: none;
  border-radius: 100vw;
  position: absolute;
  inset: 0%;
  box-shadow: inset 0 0 32px #fffc;
}

.button-icon {
  background-color: #fff3;
  border-radius: 100vw;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  overflow: hidden;
}

.button-3 {
  z-index: 1;
  color: #fff;
  background-image: linear-gradient(270deg, #c9aaff, #feffbc 25%, #ffcdfd 50%, #b3e2ff 75%, #839aff);
  border: 2px solid #0000;
  border-radius: 100vw;
  min-height: 3.75rem;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
}

.button-contact-avt {
  padding-left: .5rem;
  display: none;
}

.process-line-2 {
  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%;
}

.bold-text-10 {
  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.size-kan {
  width: 70%;
}

.partner-logo.size-damac, .partner-logo.size-barrat, .partner-logo.size-dlf {
  filter: invert();
}

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

.div-block-9 {
  justify-content: center;
  align-items: flex-end;
  display: block;
  position: absolute;
  inset: auto 0% 0%;
}

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

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

.text-field-5 {
  background-color: #fff0;
  border-radius: 10px;
}

.text-field-6 {
  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;
}

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

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

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

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

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

.submit-button-2.btm4-copy {
  mix-blend-mode: normal;
  background-color: #3b82f6cc;
}

.submit-button-2.btm4-copy: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;
}

.link-block-2 {
  max-width: 42%;
}

.button-4 {
  color: #000;
  text-align: center;
  cursor: pointer;
  background-color: #f0f0f000;
  border-radius: .5rem;
  width: 420px;
  height: auto;
  padding: 20px 0;
  font-family: Open Sans, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 40px;
  position: relative;
  left: 313px;
}

.button-4:hover {
  background-color: #f0f0f0;
}

.process-size {
  margin-top: 4rem;
}

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

.image-16 {
  opacity: .4;
  width: 70px;
  height: 100%;
}

.div-block-10 {
  z-index: 999;
  opacity: 0;
  cursor: pointer;
  margin-bottom: 0;
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: auto;
}

.link-block-3 {
  z-index: 999;
  display: block;
  position: fixed;
  bottom: 20px;
  left: 20px;
}

.link-block-3.w--current {
  z-index: 999;
  bottom: 20px;
  left: 20px;
}

.div-block-11 {
  z-index: 999;
  opacity: 1;
  cursor: pointer;
  margin-bottom: 0;
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: auto;
}

.image-17 {
  opacity: .45;
  width: 70px;
  height: 100%;
}

.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.w--current {
  position: absolute;
}

.section-12 {
  background-color: #f5f5f7;
  height: 775px;
  margin-top: 4rem;
}

.button-5 {
  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;
}

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

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

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

.div-block-13 {
  opacity: 1;
  filter: grayscale(62%);
  background-color: #0000;
  width: 100%;
  max-width: 100%;
  height: 75rem;
}

.button-6 {
  position: fixed;
  inset: 0% auto auto 0%;
}

.image-19 {
  opacity: 1;
}

.div-block-14 {
  opacity: 1;
  background-color: #0000;
  background-image: linear-gradient(#0000 81%, #fff);
  border-radius: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: fixed;
  inset: auto 0% 0%;
}

.div-block-15 {
  filter: blur(1px);
  background-color: #0009;
  border: 1px #000;
  border-radius: 10px;
  width: 600px;
  height: 400px;
  margin-top: 220px;
  display: block;
  position: absolute;
  box-shadow: 6px 4px 15px 5px #0003;
}

.div-block-16 {
  position: fixed;
  bottom: 25%;
  left: 25%;
}

.heading-10 {
  position: relative;
  bottom: 25%;
  left: 25%;
}

.text-block-10 {
  color: #ff9100;
  font-family: Open Sans, sans-serif;
  font-size: 4rem;
  font-weight: 600;
  line-height: 4rem;
  position: static;
  bottom: 25%;
  left: 25%;
}

.container-4 {
  width: 100%;
  max-width: none;
}

.div-block-17 {
  background-image: linear-gradient(#000, #fff);
  width: 100%;
}

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

.div-block-19 {
  width: 100%;
  height: 100%;
  position: fixed;
}

.div-block-20 {
  background-color: #8a2828;
  width: 100%;
  height: 100%;
  position: relative;
}

.div-block-21 {
  background-color: red;
  width: 100%;
  height: 100%;
}

.div-block-22 {
  background-color: #eb0f0f;
  width: 100%;
  height: 100%;
  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%);
}

.text-block-11 {
  position: fixed;
  bottom: 50%;
  left: 25%;
}

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

.button-7 {
  background-color: #3898ec00;
  border: 1px solid #000;
  width: 300px;
  height: 50px;
  margin-top: 25%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
}

.background-video {
  filter: brightness(200%);
  border-radius: 20px;
  width: 30%;
  height: 250px;
  margin-right: 0;
  padding-right: 0%;
  display: none;
  position: absolute;
  top: 25px;
  left: 60%;
  right: 0;
}

.background-video-2 {
  filter: brightness(200%);
  width: 100%;
  height: 100rem;
}

.columns {
  height: 75px;
}

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

.div-block-25 {
  max-width: 1440px;
  margin-bottom: 100px;
  margin-left: auto;
  margin-right: auto;
}

.div-block-26 {
  grid-column-gap: 212px;
  grid-row-gap: 212px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
}

.button-9 {
  background-color: var(--white);
  color: #000;
  width: 150px;
  padding-left: 0;
  padding-right: 0;
  font-family: Open Sans, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
}

.button-10 {
  width: 150px;
}

.heading-style-h2-copy {
  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;
}

.heading-layout-copy {
  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: 0;
  display: flex;
}

.heading-layout-copy.size-perevaga {
  margin-bottom: 40px;
}

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

.grid-2 {
  grid-template-rows: auto auto auto auto auto auto auto auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  max-width: 1440px;
  margin-top: 140px;
  margin-left: auto;
  margin-right: auto;
}

.text-block-13 {
  text-align: center;
  font-family: Open Sans, sans-serif;
  font-size: 24px;
  font-weight: 600;
  text-decoration: none;
}

.text-block-14 {
  text-align: center;
  font-family: Open Sans, sans-serif;
  font-size: 24px;
  font-weight: 600;
}

.text-light-gray-2 {
  color: #acacac;
}

.text-light-gray-2.margin-right {
  margin-right: 1rem;
}

.container-5 {
  max-width: 1440px;
  padding-left: 2rem;
  padding-right: 2rem;
}

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

.heading-11 {
  width: 600px;
  max-width: 600vh;
  height: 100px;
  font-family: Oswald, sans-serif;
  font-size: 3.5rem;
}

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

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

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

.section-14.accent {
  background-color: #fff;
  margin-top: 0;
  padding-top: 0;
}

.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-headline.contact-headline {
  max-width: 24rem;
}

.heading-12 {
  color: #081010;
  font-size: 56px;
  font-weight: 400;
  line-height: 1.1;
}

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

.text.properties-text {
  max-width: 600px;
}

.property-label {
  z-index: 1;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: #00000029;
  border-radius: .5rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1rem;
  display: flex;
  position: relative;
  overflow: clip;
}

.property-label:hover {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: #0006;
}

.properties-list {
  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;
}

.properties-list.two {
  grid-template-columns: 1fr .8fr .75fr;
}

.heading-13 {
  color: #081010;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
}

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

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

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

.property-wrapper {
  background-color: #081010;
  border-radius: .5rem;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-end;
  min-height: 32rem;
  padding: 1rem;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: clip;
}

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

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

.project__info-text {
  grid-column-gap: 1.25rem;
  grid-row-gap: 1.25rem;
  color: #000000bf;
  flex-flow: column;
  width: 100%;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  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;
}

.heading-huge {
  letter-spacing: -1px;
  font-size: 4rem;
  font-weight: 700;
  line-height: 100%;
}

.container-7 {
  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;
}

.project__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;
}

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

.project-image-2 {
  cursor: auto;
  object-fit: cover;
  border-radius: 1.2rem;
  width: 100%;
  height: 100%;
}

.project__overview-copy {
  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;
}

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

.sectors {
  grid-column-gap: .25rem;
  grid-row-gap: .25rem;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 2rem;
  display: flex;
}

.projects__list {
  grid-column-gap: 1rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.sections-2 {
  flex: 1;
}

.sections-2.top-padding {
  padding-top: 6rem;
}

.text-regular {
  font-size: 1rem;
  line-height: 150%;
}

.text-regular.c2-60 {
  color: #fff9;
}

.projects__item {
  width: 100%;
}

.spacer-small {
  width: 100%;
  height: 3rem;
}

.sectors__list {
  grid-column-gap: .25rem;
  grid-row-gap: .25rem;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.empty-state {
  background-color: #0000000a;
  border-radius: .5rem;
  padding: 1.5rem;
}

.projects__content {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.projects__cms {
  width: 100%;
}

.sectors__link {
  border: 1px solid #0000001a;
  border-radius: 4rem;
  justify-content: center;
  align-items: center;
  height: 4rem;
  padding-left: 2rem;
  padding-right: 2rem;
  transition: background-color .2s cubic-bezier(.39, .575, .565, 1);
  display: inline-flex;
}

.sectors__link:hover {
  background-color: #0000000a;
}

.sectors__link.w--current {
  color: #fff;
  background-color: #f24913;
  border-style: none;
}

.footer__content {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-flow: column;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  display: flex;
}

.social-icon {
  object-fit: contain;
  width: 1.25rem;
}

.open-nav {
  z-index: 10;
  justify-content: flex-start;
  align-items: center;
  max-width: 90rem;
  height: 6rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  display: flex;
  position: fixed;
  inset: 0% 0% auto;
}

.footer__img {
  object-fit: cover;
  width: 100%;
}

.footer__nav {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  display: flex;
}

.text-xlarge {
  font-size: 1.5rem;
  line-height: 135%;
}

.nav__main {
  border-top: 1px solid #fff3;
}

.nav__button {
  background-color: #000;
  border-radius: 4rem;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  transition: background-color .2s cubic-bezier(.39, .575, .565, 1);
  display: flex;
}

.nav__button:hover {
  background-color: #000000bf;
}

.top-bar {
  z-index: 20;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  justify-content: space-between;
  align-items: center;
  height: 6rem;
  margin-left: 5rem;
  padding-left: 1.5rem;
  display: flex;
  position: relative;
}

.brand__asset {
  object-fit: contain;
  height: 2rem;
}

.nav {
  z-index: 200;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 90rem;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 1.5rem 1.5rem;
  display: none;
  position: fixed;
  inset: 0%;
  overflow: auto;
}

.footer__cta {
  border-top: 1px solid #0000001a;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  font-weight: 500;
}

.page-wrapper {
  flex-flow: column;
  min-height: 100vh;
  display: flex;
}

.footer__legal {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  border-bottom: 1px solid #0000001a;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  display: flex;
}

.footer__contact {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  border-top: 1px solid #0000001a;
  border-bottom: 1px solid #0000001a;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  display: flex;
}

.footer__contact-item {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.footer__contact-item.align-right {
  justify-content: flex-start;
  align-items: flex-end;
}

.burger__icon {
  object-fit: contain;
  width: 1.5rem;
}

.footer__main {
  flex-flow: column;
  display: flex;
}

.icon-small {
  object-fit: contain;
  width: 1rem;
}

.header {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.nav__content {
  background-color: #f24913;
  border-radius: 2rem;
  flex-flow: column;
  width: auto;
  min-width: 25rem;
  display: flex;
  overflow: auto;
}

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

.nav-head__button {
  color: #fff;
  background-color: #000;
  border-radius: 4rem;
  justify-content: center;
  align-items: center;
  height: 2.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  transition: color .2s cubic-bezier(.39, .575, .565, 1), background-color .2s cubic-bezier(.39, .575, .565, 1);
  display: flex;
}

.nav-head__button:hover {
  color: #000;
  background-color: #fff;
}

.close-nav {
  background-color: #fff;
  border-radius: 4rem;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  transition: opacity .2s cubic-bezier(.39, .575, .565, 1);
  display: flex;
}

.close-nav:hover {
  opacity: .8;
}

.text-large-2 {
  font-size: 1.25rem;
  line-height: 150%;
}

.text-large-2.c2 {
  color: #fff;
}

.nav__link {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  border-bottom: 1px solid #fff3;
  justify-content: flex-start;
  align-items: center;
  height: 4rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  transition: padding .2s cubic-bezier(.39, .575, .565, 1);
  display: flex;
}

.nav__link:hover {
  padding-left: 2rem;
}

.nav__head {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  display: flex;
}

.nav__social-link {
  border-right: 1px solid #fff3;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 6rem;
  display: flex;
}

.nav__social-link.no-border {
  border-right-style: none;
}

.footer__nav-link {
  border: 1px solid #0000001a;
  border-radius: 6rem;
  justify-content: center;
  align-items: center;
  height: 6rem;
  padding-left: 3rem;
  padding-right: 3rem;
  transition: background-color .2s cubic-bezier(.39, .575, .565, 1);
  display: inline-flex;
}

.footer__nav-link:hover {
  background-color: #0000000a;
}

.footer__link:hover {
  text-decoration: underline;
}

.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.size-damac, .partner-logo-fomich.size-barrat, .partner-logo-fomich.size-dlf {
  filter: invert();
}

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

.image-21 {
  width: 2%;
  height: auto;
  margin-left: 150px;
}

.button-5-copy-copy {
  color: #000;
  cursor: pointer;
  background-color: #3898ec00;
  border: 1px solid #00000036;
  border-radius: .5rem;
  width: 245px;
  height: 50px;
  padding: 13px 0 0 40px;
  font-family: Open Sans, sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.button-5-copy-copy:hover {
  color: #fff;
  background-color: #000;
  background-image: linear-gradient(#000, gray);
}

.div-block-27 {
  width: 1440px;
}

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

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

.heading-14 {
  color: #081010;
  font-size: 56px;
  font-weight: 400;
  line-height: 1.1;
}

.property-label-2 {
  z-index: 1;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  opacity: 0;
  background-color: #0000;
  border-radius: 1.2rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1rem;
  display: block;
  position: relative;
  overflow: clip;
}

.property-label-2:hover {
  opacity: 0;
  color: #000;
  background-color: #0000;
}

.heading-15 {
  color: #081010;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
}

.heading-15.white {
  opacity: 0;
  color: #000;
  font-size: 1.2rem;
}

.property-wrapper-2 {
  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;
}

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

.properties-list-copy {
  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;
}

.properties-list-copy.two {
  grid-template-columns: 1fr .8fr .75fr;
}

.properties-list-copy._11 {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  grid-template-rows: .25fr .25fr .25fr .25fr .25fr .25fr .25fr .25fr .25fr .25fr .25fr .25fr .25fr .25fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-flow: row;
  height: 1500px;
}

.lightbox-link {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.property-label-3 {
  z-index: 1;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  background-color: #0009;
  border-radius: 1.2rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1rem;
  font-family: Open Sans, sans-serif;
  display: flex;
  position: relative;
  overflow: clip;
}

.properties-list-2 {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr .8fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.properties-list-2.two {
  grid-template-columns: .8fr 1fr;
}

.heading-16 {
  color: #081010;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
}

.heading-16.white {
  color: #fefcf8;
  font-size: 1.5rem;
}

.property-wrapper-3 {
  background-color: #081010;
  border: 1px #000;
  border-radius: 1.2rem;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-end;
  min-height: 32rem;
  padding: 1rem;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: clip;
}

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

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

.link-block-5 {
  width: 100%;
  position: absolute;
}

.div-block-28 {
  max-width: 1440px;
}

.project-change {
  height: 60px;
  padding-top: 20px;
  padding-bottom: 20px;
  font-family: Open Sans, sans-serif;
  font-size: 1rem;
  font-weight: 400;
}

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

.paragraph-10-copy {
  color: #090611;
  letter-spacing: 0;
  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-image-wrapper-copy {
  border-radius: .5rem;
  height: 80svh;
  margin-top: 2rem;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

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

.parallax-copy:hover {
  filter: none;
}

.lightbox-link-2 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: auto;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.image-22 {
  height: auto;
}

.div-block-29 {
  justify-content: center;
  align-items: center;
  width: auto;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.image-23 {
  width: 40%;
  max-width: none;
}

.lightbox-link-3, .image-24, .image-25, .image-26, .image-27 {
  border-radius: 1.2rem;
}

.footer-text {
  margin-top: 2rem;
  font-family: Open Sans, sans-serif;
  font-weight: 600;
}

.footer-column-left-copy {
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 50%;
  padding-bottom: 4rem;
  display: flex;
}

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

.text-block-15 {
  margin-top: 0;
  font-family: Open Sans, sans-serif;
  font-size: 1rem;
}

.image-29 {
  width: 10%;
  height: auto;
  margin-top: 7px;
}

.text-block-16 {
  font-family: Open Sans, sans-serif;
  font-size: 1rem;
}

.text-block-17, .text-block-18, .text-block-19, .text-block-20 {
  font-family: Open Sans, sans-serif;
}

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

.text-block-15-copy {
  margin-top: 0;
  font-family: Open Sans, sans-serif;
  font-size: 1rem;
}

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

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

.text-block-15-copy-copy {
  margin-top: 0;
  font-family: Open Sans, sans-serif;
  font-size: 1rem;
}

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

.text-block-15-copy-copy-copy {
  margin-top: 0;
  font-family: Open Sans, sans-serif;
  font-size: 1rem;
}

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

.text-block-15-copy-copy-copy-copy {
  margin-top: 0;
  font-family: Open Sans, sans-serif;
  font-size: 1rem;
}

.div-block-30-copy {
  z-index: 0;
  background-color: var(--white);
  background-image: linear-gradient(271deg, var(--color--bg-color-footer) 72%, #ffffffa6), url("../images/69e8afe413c037b6a04212d8_backgr%20(1).png");
  opacity: 1;
  background-position: 0 0, 50%;
  background-repeat: repeat, repeat;
  background-size: auto, cover;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.footer-links-copy {
  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;
  padding-left: 100px;
  display: flex;
}

.start-your-project-link-wrapper-copy {
  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;
}

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

.submit-button-3:hover {
  transform: scale(1.05);
}

.text-block-22, .text-block-23 {
  font-family: Open Sans, sans-serif;
}

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

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

.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;
}

.tab-footer-copy, .tab-footer-copy-copy {
  padding-left: 140px;
}

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

.link-block-6, .link-block-7, .link-block-8, .link-block-9, .link-block-10, .link-block-11 {
  text-decoration: none;
}

.the-content-copy {
  background-color: var(--white);
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  padding-bottom: 40px;
  display: flex;
  position: relative;
}

.footer-text-copy {
  margin-top: 2rem;
  font-family: Open Sans, sans-serif;
  font-weight: 600;
}

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

.the-content-copy-copy {
  background-color: var(--white);
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  padding-bottom: 40px;
  display: flex;
  position: relative;
}

.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;
}

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

.container-8-copy-copy {
  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;
}

.button-11 {
  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;
}

.button-11:hover {
  transform: scale(1.05);
}

.link-block-12 {
  width: 150px;
  height: 150px;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 260px;
  display: flex;
}

.text-block-24 {
  margin-top: 1rem;
  font-family: Open Sans, sans-serif;
}

.heading-17 {
  font-family: Open Sans, sans-serif;
  font-weight: 600;
}

.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.image-30 {
  filter: sepia(30%);
  border-radius: 1.2rem;
}

.image-31 {
  filter: sepia(10%);
  border-radius: 1.2rem;
}

.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);
}

.image-32, .image-33, .image-34 {
  filter: sepia(30%);
  border-radius: 1.2rem;
}

.image-35 {
  border-radius: 1.2rem;
  margin-top: 20px;
}

.section-16 {
  margin-top: 0;
}

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

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

.bold-text-12 {
  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;
}

.cards-columns-wrapper-3 {
  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);
}

.background-color-wrapper-3 {
  background-color: #f5f5f7;
}

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

.bold-text-13 {
  color: #090611;
  font-size: 1.2rem;
  font-weight: 700;
}

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

.bold-text-14 {
  color: #090611;
  font-size: 1.2rem;
  font-weight: 700;
}

.bold-text-15 {
  color: #09061180;
  font-weight: 400;
}

.bold-text-16 {
  color: #090611;
  font-size: 1.2rem;
  font-weight: 700;
}

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

.process-container.process-size-cont {
  max-width: 1440px;
}

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

.paragraph-13 {
  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%;
}

.paragraph-13.bold {
  font-weight: 600;
}

.process-wrapper-3 {
  max-width: 1440px;
  margin-bottom: 4rem;
  padding-top: 0;
}

.link-block-13 {
  display: none;
}

.process-step-icon {
  width: 5%;
  margin-bottom: .5rem;
}

.bold-text-17 {
  font-size: 2rem;
}

.bold-text-18 {
  font-weight: 600;
}

.container-11 {
  max-width: none;
}

.section-11-copy {
  background-image: linear-gradient(#fff0 92%, #fff);
  max-width: none;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.section-18 {
  height: 68rem;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.div-block-35 {
  width: 100%;
  height: auto;
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
}

.image-38 {
  filter: saturate(105%);
  height: 68rem;
}

.link-block-15 {
  position: absolute;
}

.heading-18 {
  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;
}

.text-block-25 {
  color: #fff;
  text-align: center;
  -webkit-text-stroke-width: 0px;
  height: 45px;
  margin-top: 57rem;
  font-family: Open Sans, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  text-decoration: none;
  position: absolute;
  inset: 0 0% auto;
  overflow: visible;
}

.cta-card {
  z-index: 1;
  text-align: center;
  background-image: url("../images/6a0b1bb74fcc17c219d0759b_Hero.webp");
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 48px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-width: 62.2vw;
  max-width: 62.2vw;
  min-height: 38.9vw;
  max-height: 38.9vw;
  margin-left: auto;
  margin-right: auto;
  padding: 4.44vw 2.22vw;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1.11vw 2.22vw #0000001a;
}

.cta-card.slide-down-animation {
  height: 650px;
  min-height: auto;
  max-height: none;
  box-shadow: none;
  background-color: #358ee066;
  background-image: none;
  border-radius: 1.2rem;
}

.cta-wrapper {
  z-index: 999;
  flex-direction: column;
  grid-template-rows: auto;
  grid-template-columns: 1.75fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
  top: -19.55vw;
}

.sign-up-form {
  width: 32vw;
  margin-top: 2rem;
  margin-bottom: 0;
  box-shadow: 0 10px 20px -10px #0003;
}

.button-subscribe {
  color: #050505;
  text-align: center;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  background-color: #b3ceff;
  border-radius: 1.2rem;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: .9vw 2.2vw;
  transition: transform .4s, border-color .4s, background-color .4s;
  display: flex;
  box-shadow: 0 10px 20px -10px #0003;
}

.button-subscribe:hover {
  color: #050505;
  background-color: #e7e7e9;
}

.italics {
  font-style: italic;
  font-weight: 100;
}

.error-message {
  background-color: #050505;
  border-radius: 24px;
}

.section-19 {
  width: 100%;
  margin-top: 24rem;
  margin-bottom: 4rem;
  display: none;
}

.max-width-30rem {
  max-width: 33.33vw;
  color: var(--white);
  font-family: Open Sans, sans-serif;
}

.success-message-sign-up-form {
  color: #f5f5f5;
  background-color: #050505;
  border-radius: 10px;
}

.red-font {
  color: #f77;
}

.sign-up-form-container {
  background-color: #050505;
  border-radius: 1.2rem;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: .6vw 1.1vw .6vw 2.2vw;
  display: flex;
}

.space-7rem {
  min-height: 7.8vw;
}

.sign-up-text-field {
  color: #fff;
  background-color: #0000;
  border: 0 solid #000;
  border-radius: 1.2rem;
  align-self: center;
  margin-bottom: 0;
  font-family: Open Sans, sans-serif;
  line-height: 36px;
}

.sign-up-text-field:hover {
  border-bottom-color: #ffd81c80;
}

.sign-up-text-field:focus {
  border-bottom-color: #ffd81c;
}

.sign-up-text-field::placeholder {
  color: #c7c7c7;
}

.space-2rem {
  min-height: 2.2vw;
}

.cta-title {
  color: #fff;
  text-align: center;
  white-space: normal;
  margin-top: 7rem;
  font-family: Open Sans, sans-serif;
}

.space-1rem {
  min-height: 1.1vw;
}

.cta-container {
  background-color: #c1e4c400;
  width: 100%;
  max-width: 100vw;
  max-height: 15vw;
  padding-left: 10vw;
  padding-right: 10vw;
}

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

.heading-18-copy {
  z-index: 2;
  color: var(--white);
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: var(--stellar-site---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;
}

.section-20 {
  margin-left: auto;
  margin-right: auto;
}

.div-block-36 {
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
}

.image-39 {
  height: 100vh;
}

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

.heading-18-copy-copy {
  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;
}

.nav-menu-copy {
  float: none;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: space-between;
  align-items: center;
  width: 400px;
  height: 40px;
  margin-left: auto;
  margin-right: auto;
  font-family: Open Sans, sans-serif;
  display: flex;
}

.link-block-16 {
  cursor: pointer;
}

.cell {
  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;
}

.container-12 {
  background-image: url("../images/6a0c5f93ad028a5bcc4d6e5f_UP-8-8.png");
  background-position: 50%;
  background-size: cover;
  border-bottom: 1px solid #fff;
  max-width: none;
  height: 67rem;
}

.section-21 {
  height: auto;
  display: block;
}

.div-block-37 {
  z-index: 5;
  background-image: linear-gradient(#0000 77%, #d8d8d8d1);
  width: 100%;
  height: 33rem;
  position: absolute;
}

.div-block-38 {
  color: #fff;
  width: 800px;
  max-width: none;
}

.paragraph-14 {
  color: var(--white);
  font-family: Open Sans, sans-serif;
  font-size: var(--1);
  text-shadow: 2px 2px 3px #00000080;
}

.div-block-39 {
  border: 1px solid #0000;
  max-width: 1440px;
  margin-top: 4rem;
  margin-left: auto;
  margin-right: auto;
}

.button-13 {
  -webkit-backdrop-filter: saturate(130%) blur(4px);
  backdrop-filter: saturate(130%) blur(4px);
  color: #fff;
  text-align: center;
  cursor: pointer;
  background-color: #3898ec00;
  border: 1px solid #fff6;
  border-radius: 1.2rem;
  width: 400px;
  margin-top: 2rem;
  padding-top: 7px;
  font-family: Open Sans, sans-serif;
  font-size: 28px;
  font-weight: 300;
  display: none;
}

.button-13:hover {
  transform: scale(1.05);
}

.image-40 {
  filter: brightness(200%);
  width: 25%;
  height: auto;
}

.div-block-40 {
  margin-top: 2rem;
}

.marquee {
  z-index: 2;
  width: auto;
  margin-top: 4rem;
  display: block;
  position: relative;
  overflow: hidden;
}

.marquee-text {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  color: #f6f3f07a;
  display: flex;
}

.single-marquee-text {
  grid-column-gap: 52px;
  grid-row-gap: 52px;
  flex: none;
  display: flex;
}

.text-h0 {
  letter-spacing: -4px;
  font-family: Open Sans, sans-serif;
  font-size: 124px;
  font-weight: 500;
  line-height: 124px;
}

.shadow-marquee {
  background-image: linear-gradient(90deg, #0b0c0e, #0000);
  width: 100px;
  height: 100%;
  position: absolute;
  inset: 0% auto 0% 0%;
}

.shadow-marquee.right {
  background-image: linear-gradient(90deg, #0000, #0b0c0e);
  inset: 0% 0% 0% auto;
}

.form-block-2 {
  width: 400px;
}

.text-field-7 {
  background-color: #fff3;
  border-radius: 1.2rem;
}

.text-field-8 {
  color: #fff;
  background-color: #fff0;
  border: 1px #000;
  border-bottom: 1px solid #fff;
  border-radius: 0;
  font-family: Open Sans, sans-serif;
}

.submit-button-4 {
  background-color: #5582a800;
  border: 1px solid #fff;
  border-radius: 1.2rem;
  font-family: Open Sans, sans-serif;
}

.form-4 {
  margin-top: 2rem;
}

.marquee-img {
  background-color: #000;
  margin-top: -117px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.marquee-slider {
  z-index: 9;
  position: relative;
}

.service-card {
  background-color: #fff;
  border-radius: 32px;
  max-width: 384px;
  padding: 32px;
  position: relative;
  top: 9px;
}

.service-area {
  height: 300vh;
  padding-bottom: 120px;
  display: none;
  position: relative;
}

.service-inner {
  grid-column-gap: 150px;
  grid-row-gap: 150px;
  flex-flow: column;
  display: flex;
}

.service-inner.last {
  padding-top: 252px;
}

.marquee-title {
  color: #fff;
  flex: none;
  font-size: 130px;
  font-weight: 600;
  line-height: 120%;
}

.marquee-inner {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  letter-spacing: -3.84px;
  display: flex;
  position: relative;
}

.heading-six {
  color: #010101;
  letter-spacing: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 120%;
}

.section-content-sm {
  font-size: 16px;
  line-height: 150%;
}

.service-wrap {
  grid-column-gap: 300px;
  grid-row-gap: 150px;
  flex-flow: row;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  justify-items: center;
  padding-top: 68vh;
  display: flex;
}

.service-icon-wrap {
  background-color: #f6f6f6;
  border-radius: 99999px;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 50px;
  display: flex;
}

.service-marquee {
  background-color: #010101;
  border-radius: 50%;
  flex: 1;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: absolute;
  overflow: hidden;
}

.container-13 {
  max-width: 1312px;
  padding-left: 16px;
  padding-right: 16px;
  font-family: Inter, sans-serif;
}

.service-sticky-main {
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.marquee-overlay {
  opacity: 0;
  background-image: linear-gradient(90deg, #000, #0000 50%, #000);
  width: 100%;
  position: absolute;
  inset: 0%;
}

.heading-20 {
  color: #081010;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.1;
}

.form-wrapper {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}

.button-14 {
  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;
}

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

.contact-info {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  border: 1px solid #bbb9b5;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  padding: 2rem;
  display: grid;
}

.contact-wrapper {
  grid-column-gap: 6rem;
  grid-row-gap: 6rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: auto;
  display: grid;
  position: absolute;
}

.contact-inner {
  grid-column-gap: 6rem;
  grid-row-gap: 6rem;
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}

.text-field-9 {
  color: #3a4140;
  background-color: #f5f3f0;
  border: 1px solid #bbb9b5;
  height: 100%;
  margin-bottom: 0;
  padding: 1.5rem 2rem;
  transition: all .3s;
}

.text-field-9:hover {
  background-color: #fefcf8;
}

.text-field-9:active, .text-field-9:focus {
  color: #3a4140;
}

.text-field-9::placeholder {
  color: #bbb9b5;
}

.text-field-9.text-area {
  min-height: 15rem;
}

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

.form-5.align-left {
  justify-content: flex-start;
  align-items: flex-start;
}

.contact-form-wrapper-2 {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  background-color: #fefcf8;
  flex-flow: column;
  width: 510px;
  padding: 2rem;
  display: flex;
}

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

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

.cta-item {
  position: relative;
}

.heading-three {
  color: #010101;
  letter-spacing: -1.28px;
  font-size: 64px;
  font-weight: 600;
  line-height: 106%;
}

.heading-three.text-white {
  color: #fff;
}

.cta-content {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  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.white-2 {
  color: #010101;
  background-color: #fff0;
  border: 1px solid #00000080;
  border-radius: 1.2rem;
  padding-top: 14px;
}

.cta-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 2.5fr 1fr;
  grid-auto-columns: 1fr;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}

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

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

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

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

.container-14 {
  max-width: 1312px;
  padding-left: 16px;
  padding-right: 16px;
  font-family: Inter, sans-serif;
}

.cta-img {
  border-radius: 24px;
}

.cta-img._2nd {
  position: absolute;
  inset: auto auto 29% 29%;
}

.cta-img._4rd {
  position: absolute;
  inset: -59% 0% auto auto;
}

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

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

.cta-area {
  background-color: #000;
  background-image: url("../images/6a2950486fe1e1e2e26930be_linebar.avif");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
  padding-top: 120px;
  padding-bottom: 120px;
  display: none;
}

.cta-wrap-2 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 2.5fr 1fr;
  grid-auto-columns: 1fr;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}

.container-15 {
  max-width: 1312px;
  padding-left: 16px;
  padding-right: 16px;
  font-family: Inter, sans-serif;
}

.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/6a0dc5384ac11ca44111e6ec_AV-pr-3-3webp.png");
  background-position: 0 0, 50%;
  background-size: auto, cover;
  height: 100vh;
}

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

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

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

.subtitle-2.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.white-2 {
  color: #081010;
  background-color: #fefcf8;
}

.cta-button.white-2: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;
}

.button-text-2.secondary-white-5 {
  font-family: Open Sans, sans-serif;
}

.button-text-wrapper-2 {
  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;
}

.cta-banner-container.cta-section {
  justify-content: center;
  align-items: center;
  display: flex;
}

.heading-23 {
  color: #081010;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.1;
}

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

.section-23.accent {
  background-color: #f5f3f0;
  display: none;
}

.button-16 {
  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;
}

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

.location-wrapper {
  aspect-ratio: 3;
  object-fit: fill;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 2rem;
  display: flex;
  position: relative;
  overflow: clip;
}

.contact-info-2 {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  border: 1px solid #bbb9b5;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  padding: 2rem;
  display: grid;
}

.contact-info-2.two {
  z-index: 1;
  background-color: #fefcf8;
  border-style: none;
  display: block;
  position: relative;
}

.contact-wrapper-2 {
  grid-column-gap: 6rem;
  grid-row-gap: 6rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.contact-inner-2 {
  grid-column-gap: 6rem;
  grid-row-gap: 6rem;
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}

.text-field-10 {
  color: #3a4140;
  background-color: #f5f3f0;
  border: 1px solid #bbb9b5;
  height: 100%;
  margin-bottom: 0;
  padding: 1.5rem 2rem;
  transition: all .3s;
}

.text-field-10:hover {
  background-color: #fefcf8;
}

.text-field-10:active, .text-field-10:focus {
  color: #3a4140;
}

.text-field-10::placeholder {
  color: #bbb9b5;
}

.text-field-10.text-area {
  min-height: 15rem;
}

.contact-form-wrapper-3 {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  background-color: #fefcf8;
  flex-flow: column;
  padding: 2rem;
  display: flex;
}

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

.vertical-wrapper-2 {
  grid-column-gap: 6rem;
  grid-row-gap: 6rem;
  flex-flow: column;
  display: flex;
}

.padding-global-2 {
  padding-left: 5%;
  padding-right: 5%;
}

.header-image {
  object-fit: cover;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.button-17 {
  grid-column-gap: .5rem;
  color: #fff;
  text-align: center;
  text-transform: none;
  background-color: #131313;
  border: 1px solid #131313;
  border-radius: 100rem;
  align-items: center;
  padding: .25rem .25rem .25rem 1.25rem;
  font-size: 1rem;
  transition: transform .3s;
  display: flex;
}

.button-17:active {
  transform: scale(.95);
}

.button-17.w--current {
  border-radius: 100rem;
}

.button-17.is-alternate {
  color: #000;
  background-color: #fff;
  border-style: solid;
  border-color: #fff;
}

.heading-style-h1 {
  letter-spacing: 2px;
  font-size: 7rem;
  font-weight: 600;
  line-height: 1;
}

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

.button-group {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-end;
  display: flex;
}

.button-group.is-center {
  justify-content: center;
}

.text-size-large {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3;
}

.text-size-large.weight-normal {
  font-weight: 400;
}

.text-size-large.weight-normal.z-index-2 {
  z-index: 2;
  position: relative;
}

.mid-grey-span {
  color: #818181;
}

.header-image-wrapper {
  border-radius: 6px;
  width: 100%;
  padding-top: 120%;
  position: relative;
  overflow: hidden;
}

.header-image-wrapper.is-image-1 {
  width: 22vw;
}

.header-image-wrapper.is-image-3 {
  width: 20vw;
  margin-top: -5vw;
  left: 4vw;
}

.header-image-wrapper.is-image-6 {
  opacity: .75;
  width: 18vw;
  margin-top: -44vw;
  right: 54vw;
}

.header-image-wrapper.is-image-4 {
  width: 18vw;
  margin-top: -45vw;
  left: 64vw;
}

.header-image-wrapper.is-image-5 {
  opacity: .75;
  width: 20vw;
}

.header-image-wrapper.is-image-2 {
  width: 22vw;
  margin-top: -46vw;
  left: 58vw;
}

.section-header.background-black {
  display: none;
}

.header-content {
  align-items: center;
  max-width: 65rem;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 7rem;
  padding-bottom: 7rem;
  display: flex;
  position: relative;
}

.text-align-center {
  text-align: center;
  width: 100%;
}

.button-secondary {
  grid-column-gap: .5rem;
  color: #131313;
  text-align: center;
  background-color: #0000;
  border: 1px solid #131313;
  border-radius: 100rem;
  align-items: center;
  padding: .25rem .25rem .25rem 1.25rem;
  font-size: 1rem;
  transition: transform .3s;
  display: flex;
}

.button-secondary:active {
  transform: scale(.95);
}

.button-secondary.is-alternate {
  color: #fff;
  border-color: #fff;
}

.button-arrow {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2rem;
  display: flex;
}

.header-component {
  height: 300vh;
  position: relative;
}

.header-content-wrapper {
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.header-images-wrapper {
  z-index: 1;
  position: absolute;
  inset: 0% auto 0% 0%;
}

.header-images-wrapper.images-wrapper-right {
  z-index: 0;
  inset: 0% 0% 0% auto;
}

.header-image-list {
  z-index: 1;
  grid-row-gap: 26vw;
  flex-direction: column;
  padding-top: 70vh;
  display: flex;
}

.header-ix-trigger {
  z-index: -1;
  margin-top: 100vh;
  position: absolute;
  inset: 0%;
}

.margin-bottom, .margin-bottom.margin-small {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

.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;
}

.div-block-41, .div-block-42, .div-block-43, .div-block-44, .div-block-45 {
  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(--stellar-site---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;
}

.heading-26, .photo-phone {
  display: none;
}

.link-block-17 {
  width: 100%;
  height: auto;
}

.link-block-18 {
  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-fomich.size-kan {
  width: 70%;
}

.partner-logo-fomich.size-damac, .partner-logo-fomich.size-barrat, .partner-logo-fomich.size-dlf {
  filter: invert();
}

.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-lvivbud.size-kan {
  width: 70%;
}

.partner-logo-lvivbud.size-damac, .partner-logo-lvivbud.size-barrat, .partner-logo-lvivbud.size-dlf {
  filter: invert();
}

.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;
}

.partner-logo-block.new {
  width: 150px;
  padding-top: 110px;
}

.partner-logo-block.newosela {
  justify-content: center;
  align-items: center;
  padding-bottom: 34px;
  padding-left: 94px;
  padding-right: 17px;
  display: block;
}

.partner-logo-block.archo {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: row;
  flex: none;
  justify-content: space-around;
  align-items: center;
  padding-top: 125px;
  padding-bottom: 0;
  display: block;
}

.partner-logo-block.tebin {
  width: 150px;
  height: auto;
  padding-top: 75px;
}

.section-24._24 {
  background-image: linear-gradient(#00000099, #00000099), url("../images/7470a74c6e49dcc1c4743e2b_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;
}

.success-message-2 {
  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;
}

.contact-container {
  max-width: 1319px;
}

.submit-button-5 {
  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;
}

.submit-button-5: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%;
}

.error-message-2 {
  color: #fff;
  background-color: #df720c;
  border-radius: 5px;
}

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

.text-input-03 {
  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;
}

.text-input-03:hover {
  border-bottom-color: #eee;
}

.text-input-02 {
  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;
}

.text-input-02:hover {
  border-bottom-color: #eee;
}

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

.text-input-04 {
  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;
}

.text-input-04:hover {
  border-bottom-color: #eee;
}

.text-input-01 {
  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;
}

.text-input-01: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(--stellar-site---padding--pd-07);
  letter-spacing: 0%;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 118%;
}

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

.div-block-47 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

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

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

.contact-right-from-wrap-2 {
  padding-top: 30px;
  padding-left: 50px;
  padding-right: 50px;
}

.success-message-3 {
  color: #111;
  background-color: #fff;
  border-radius: 5px;
}

.contact-left-content-wrap-2 {
  grid-column-gap: 58px;
  grid-row-gap: 58px;
  flex-flow: column;
  width: 100%;
  display: flex;
}

.contact-2 {
  border-top: 1px solid #292929;
  padding: 120px 20px;
  overflow: hidden;
}

.submit-button-6 {
  color: #111;
  letter-spacing: 0%;
  text-transform: uppercase;
  background-color: #e9e9e9;
  border-radius: 56px;
  margin-top: 25px;
  padding: 18px 40px;
  font-size: 16px;
  font-weight: 400;
  line-height: 110%;
  transition: background-color .45s;
}

.submit-button-6:hover {
  color: #fff;
  background-color: #636363;
}

.contact-right-content-wrap-2 {
  background-color: #ffffff0f;
  width: 100%;
  padding-bottom: 40px;
}

.contact-h2-2 {
  color: #fff;
  max-width: 312px;
}

.contact-row-2 {
  z-index: 2;
  grid-column-gap: 29px;
  grid-row-gap: 29px;
  display: flex;
  position: relative;
}

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

.text-input-03-2 {
  color: #fff;
  background-color: #0000;
  border: 1px #000;
  border-bottom: 1px solid #ffffff14;
  margin-bottom: 0;
  padding: 40px 0 25px;
  transition: border-color .4s;
}

.text-input-03-2:hover {
  border-bottom-color: #eee;
}

.text-input-02-2 {
  color: #fff;
  background-color: #0000;
  border: 1px #000;
  border-bottom: 1px solid #ffffff14;
  margin-bottom: 0;
  padding: 40px 0 25px;
  transition: border-color .4s;
}

.text-input-02-2:hover {
  border-bottom-color: #eee;
}

.text-input-04-2 {
  color: #fff;
  background-color: #0000;
  border: 1px #000;
  border-bottom: 1px solid #ffffff14;
  margin-bottom: 20px;
  padding: 50px 0 60px;
  transition: border-color .4s;
}

.text-input-04-2:hover {
  border-bottom-color: #eee;
}

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

.text-input-01-2 {
  color: #fff;
  background-color: #0000;
  border: 1px #000;
  border-bottom: 1px solid #ffffff14;
  margin-bottom: 0;
  padding: 30px 0 25px;
  line-height: 40px;
  transition: border-color .4s;
}

.text-input-01-2:hover {
  border-bottom-color: #eee;
}

.contact-t-2 {
  color: #df720c;
  letter-spacing: 0%;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 400;
  line-height: 118%;
}

.contact-link-img-copy {
  filter: invert();
}

.section-banner-cta {
  background-color: #131313;
  overflow: hidden;
}

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

.banner-cta-component {
  white-space: nowrap;
  flex-direction: column;
  display: flex;
}

.cta-heading-top {
  color: #fff;
  text-transform: uppercase;
  font-size: 8rem;
  font-weight: 600;
  line-height: 1.2;
}

.cta-heading-bottom {
  color: #777;
  text-transform: uppercase;
  align-self: flex-end;
  font-size: 8rem;
  font-weight: 600;
}

.marquee-2 {
  z-index: 2;
  width: 100%;
  margin-top: 4rem;
  position: relative;
  overflow: hidden;
}

.single-marquee-text-2 {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex: none;
  display: flex;
}

.text-h0-2 {
  font-family: Open Sans, sans-serif;
  font-size: var(--stellar-site---padding--pd-10);
  letter-spacing: -4px;
  font-weight: 700;
  line-height: 124px;
}

.image-42 {
  width: 50%;
  max-width: none;
  height: auto;
  margin-top: 1rem;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.image-43 {
  width: 420px;
  height: auto;
  margin-top: 1rem;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.bold-text-21 {
  font-size: var(--stellar-site---padding--pd-06);
}

.bold-text-22 {
  font-size: var(--stellar-site---padding--pd-05);
}

.bold-text-22._3-, ._3 {
  color: #1274cf;
  font-size: var(--stellar-site---padding--pd-06);
}

.process-item-desc-2 {
  color: #000c;
}

.process-main-2 {
  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-2 {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  background-color: #fff;
  border-radius: 3rem;
  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-2.active {
  background-color: #f2f2f2;
  grid-template-columns: 1fr minmax(10rem, .4fr) 1fr;
}

.process-item-2.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-2.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-item-block-2 {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  display: flex;
}

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

.process-line-ray-2 {
  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-item-title-2 {
  font-size: 1.25rem;
  font-weight: 500;
}

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

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

.process-item-number-2.active {
  background-color: #fff;
}

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

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

.process-line-3 {
  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.about-photo-copy._1-2 {
    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-2.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;
  }

  .image-30 {
    filter: sepia(30%);
    object-fit: cover;
  }

  .image-31 {
    filter: sepia(10%);
  }

  .image-32, .image-33, .image-34 {
    filter: sepia(30%);
  }

  .title-5, .bold-text-12 {
    font-size: 1rem;
  }

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

  .section-18 {
    background-color: #0000;
    height: 68rem;
  }

  .div-block-35 {
    background-color: #0000;
  }

  .image-38 {
    background-color: #0000;
    height: 68rem;
  }

  .heading-18-copy {
    z-index: 2;
    font-size: var(--stellar-site---padding--pd-10);
  }

  .image-39 {
    height: 68rem;
  }

  .marquee-slider {
    overflow: hidden;
  }

  .service-area {
    display: none;
  }

  .marquee-title {
    color: #fff;
    letter-spacing: -3.84px;
    flex: none;
    font-size: 130px;
    line-height: 120%;
  }

  .marquee-inner {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    display: flex;
  }

  .service-wrap {
    grid-column-gap: 500px;
  }

  .contact-wrapper {
    position: absolute;
  }

  .contact-form-wrapper-2 {
    width: 510px;
  }

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

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

  .cta-wrap {
    grid-template-columns: 1fr 2.5fr 1fr;
  }

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

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

  .cta-area {
    display: none;
  }

  .cta-wrap-2 {
    grid-template-columns: 1fr 2.5fr 1fr;
  }

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

  .text-2.white, .subtitle-2.white {
    font-family: Open Sans, sans-serif;
  }

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

  .cta-banner-title.cta-heading, .button-text-2.secondary-white-5 {
    font-family: Open Sans, sans-serif;
  }

  .section-23.accent, .services-cards-mobile {
    display: none;
  }

  .div-block-41, .div-block-42, .div-block-43, .div-block-44, .div-block-45 {
    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(--stellar-site---padding--pd-10);
    font-weight: 600;
  }

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

  .heading-26, .photo-phone {
    display: none;
  }

  .section-24._24 {
    background-image: linear-gradient(#00000099, #00000099), url("../images/7470a74c6e49dcc1c4743e2b_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._1-1 {
    height: auto;
  }

  .parallax.about-photo-copy._1-2 {
    object-fit: cover;
    height: 100vh;
  }

  .process-steps {
    margin-bottom: 4rem;
  }

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

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

  .our-team {
    margin-top: 8rem;
  }

  .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;
  }

  .gallery-image-2 {
    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;
  }

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

  .font-size-medium-2.link {
    border-radius: 1.2rem;
  }

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

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

  .bold-text-10 {
    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;
  }

  .vertical-headline.contact-headline {
    width: 520px;
    max-width: none;
  }

  .text {
    color: #fff;
  }

  .subtitle {
    color: #fff;
    font-family: Open Sans, sans-serif;
  }

  .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;
  }

  .properties-list-copy._11 {
    grid-template-rows: .25fr .25fr .25fr .25fr .25fr .25fr .25fr .25fr .25fr .25fr .25fr .25fr .25fr .25fr;
  }

  .div-block-30-copy {
    border: 1px #000;
    display: none;
  }

  .contact {
    background-image: linear-gradient(#fffc, #fffc), url("../images/6a05e233bf2d57314e361bd9_йцу1.png");
    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;
  }

  .button-11 {
    border-width: .5px;
    margin-top: 40px;
  }

  .image-30 {
    filter: sepia(30%);
    object-fit: cover;
    width: 110%;
  }

  .image-31 {
    filter: sepia(10%);
    object-fit: cover;
    width: 110%;
  }

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

  .image-32, .image-33, .image-34 {
    filter: sepia(30%);
    object-fit: cover;
    width: 110%;
  }

  .image-35 {
    cursor: pointer;
    object-fit: cover;
    width: 100%;
    height: 100%;
    margin-top: 10px;
  }

  .title-5, .bold-text-12 {
    font-size: 1.1rem;
  }

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

  .section-18 {
    height: auto;
  }

  .image-38 {
    height: 100vh;
  }

  .heading-18-copy {
    z-index: 2;
    font-size: var(--stellar-site---padding--pd-10);
  }

  .section-20 {
    height: auto;
  }

  .image-39 {
    height: 100vh;
  }

  .heading-18-copy-copy {
    z-index: 2;
    font-size: var(--stellar-site---padding--pd-10);
  }

  .nav-menu-copy {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
    justify-content: space-between;
  }

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

  .section-21 {
    display: none;
  }

  .service-area {
    height: 150vh;
    padding-bottom: 0;
    display: none;
  }

  .service-marquee {
    z-index: -1;
    height: auto;
  }

  .heading-20 {
    color: #fff;
    font-family: Open Sans, sans-serif;
  }

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

  .contact-info {
    border-color: #fff;
    border-radius: 1.2rem;
  }

  .contact-wrapper {
    max-width: none;
    position: static;
  }

  .text-field-9 {
    color: #000;
    -webkit-text-stroke-color: #000;
    background-color: #f5f3f000;
    border-radius: 1.2rem;
    font-family: Open Sans, sans-serif;
  }

  .contact-form-wrapper-2 {
    background-color: var(--white);
    border-radius: 1.2rem;
    width: auto;
    font-family: Open Sans, sans-serif;
  }

  .heading-21 {
    color: var(--white);
    font-family: Open Sans, sans-serif;
    font-weight: 400;
  }

  .paragraph-15, .paragraph-16, .paragraph-16-copy {
    font-family: Open Sans, sans-serif;
  }

  .paragraph-17 {
    color: var(--white);
    font-family: Open Sans, sans-serif;
  }

  .paragraph-17-copy {
    color: var(--white);
    text-shadow: .5px .5px 3px #000;
    font-family: Open Sans, sans-serif;
  }

  .paragraph-18-copy {
    color: #fffc;
    font-family: Open Sans, sans-serif;
  }

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

  .cta-item {
    height: 300px;
    max-height: 300px;
  }

  .heading-three.text-white {
    font-family: Open Sans, sans-serif;
    font-size: 3rem;
  }

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

  .cta-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

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

  .container-14 {
    max-width: none;
  }

  .cta-img._2nd {
    left: -50%;
  }

  .cta-img._4rd {
    top: -29%;
    right: -50%;
  }

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

  .cta-area {
    display: none;
  }

  .cta-wrap-2 {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    max-width: 1440px;
  }

  .container-15 {
    max-width: none;
  }

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

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

  .subtitle-2.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;
  }

  .button-text-2.secondary-white-5 {
    font-family: Open Sans, sans-serif;
  }

  .section-23.accent {
    background-image: linear-gradient(#0003, #0003), url("../images/6a0c61e62c2e5c7f473db47e_sim-1.webp");
    background-position: 0 0, 0 0;
    background-size: auto, cover;
    height: 57rem;
    display: none;
  }

  .container-17 {
    max-width: none;
  }

  .vertical-wrapper-2 {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }

  .heading-style-h1.text-allcaps {
    font-family: Open Sans, sans-serif;
  }

  .section-header.background-black {
    margin-top: -200px;
    display: block;
  }

  .header-content {
    height: 100%;
  }

  .header-content-wrapper {
    height: 150vh;
  }

  .header-image-list {
    grid-row-gap: 5vw;
  }

  .header-ix-trigger {
    margin-top: 50vh;
  }

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

  .div-block-41, .div-block-42, .div-block-43, .div-block-44, .div-block-45 {
    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(--stellar-site---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;
  }

  .button-18 {
    font-family: Open Sans, sans-serif;
    display: none;
  }

  .heading-26, .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%);
  }

  .section-24 {
    background-color: #5e5e5e;
    background-image: linear-gradient(#00000099, #00000099), url("../images/7470a74c6e49dcc1c4743e2b_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;
  }

  .section-24._24 {
    background-image: linear-gradient(#00000099, #00000099), url("../images/7470a74c6e49dcc1c4743e2b_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;
  }

  .submit-button-5 {
    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;
  }

  .text-input-03, .text-input-02, .text-input-04 {
    border-bottom-width: 2px;
    border-bottom-color: #ffffff4d;
    font-family: Open Sans, sans-serif;
  }

  .text-input-01 {
    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(--stellar-site---padding--pd-07);
    font-weight: 600;
  }

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

  .div-block-47 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .contact-2 {
    background-image: url("../images/6a35090eb5a665555213f1f6_ChatGPT%20Image%2019%20черв.%202026%20р.,%2012_13_50%20(4).webp");
    background-position: 0 0;
    background-size: auto;
  }

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

@media screen and (max-width: 991px) {
  .stellar-site--footer__contact {
    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;
  }

  .stellar-site--footer__contact-item.stellar-site--align-right {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .stellar-site--footer__nav-link {
    height: 5rem;
    transition-property: none;
  }

  .stellar-site--footer__nav-link:hover {
    background-color: #0000;
  }

  .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.w--current {
    height: auto;
    padding-top: 16px;
    padding-left: 9px;
    position: relative;
  }

  .brand {
    width: 90px;
  }

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

  .navbar-underline {
    height: 1px;
  }

  .lottie-animation-2 {
    box-sizing: border-box;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    aspect-ratio: auto;
    justify-content: space-between;
    align-items: flex-end;
    width: 40px;
    height: 100%;
    min-height: 64px;
    margin-top: 0;
    margin-left: auto;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
  }

  .menu-button {
    background-color: #a38c8c00;
    justify-content: flex-end;
    align-items: center;
    width: 80px;
    min-width: 64px;
    height: 64px;
    min-height: 64px;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    display: block;
  }

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

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

  .nav-menu {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    background-color: var(--white);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    text-align: left;
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    display: block;
  }

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

  .hero-heading-text-wrapper {
    padding-top: 50px;
  }

  .paragraph {
    line-height: 120%;
  }

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

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

  .hero-text-bottom-wrapper {
    z-index: 999;
    background-color: var(--f5f5f7);
    max-width: 100%;
    position: relative;
  }

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

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

  .cards-columns-wrapper {
    height: 36svh;
  }

  .cards-column-right {
    width: 50%;
    height: 36svh;
  }

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

  .card-left-heading-wrapper {
    z-index: 99;
    width: 100%;
    margin-left: 2rem;
    position: absolute;
    inset: auto 0% 0%;
  }

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

  .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-image {
    opacity: 1;
    object-fit: cover;
    flex: none;
    width: 100%;
    min-height: 32rem;
    max-height: 30rem;
    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-grid {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: .75fr .75fr;
    margin-top: 0;
  }

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

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

  .gallery-image-heading-wrapper {
    max-width: 60ch;
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: 0;
  }

  .gallery-text-wrapper {
    max-width: 99%;
    margin-top: 0;
    padding: 4rem 0;
  }

  .process-wrapper {
    padding-top: 0;
  }

  .process-content {
    text-align: center;
  }

  .process-intro-text {
    max-width: 100%;
  }

  .process-steps {
    flex-flow: column;
    align-items: stretch;
  }

  .description {
    max-width: 100%;
  }

  .footer {
    overflow: hidden;
  }

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

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

  .heading-2 {
    font-size: 1.9rem;
  }

  .heading-1 {
    font-size: 2.7rem;
  }

  .project-70-width {
    max-width: 75%;
  }

  .project-30-width {
    max-width: 35%;
  }

  .project-50-width {
    max-width: 50%;
  }

  .project-info {
    flex-flow: column;
    align-items: flex-start;
  }

  .info-column-left {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    margin-bottom: 1rem;
  }

  .info-column-right {
    flex-flow: column;
    flex: 0 auto;
    align-self: auto;
  }

  .project-description {
    flex-flow: column;
    height: 100%;
    min-height: 20vmin;
    margin-top: 3rem;
    margin-bottom: 2rem;
  }

  .project-description-column-left {
    align-self: flex-start;
    margin-bottom: 2rem;
  }

  .project-description-column-right {
    align-self: flex-start;
    max-width: 100%;
  }

  .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;
  }

  .about-text-wraper {
    align-self: flex-start;
  }

  .team-text-wrapper {
    max-width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .our-team {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    min-height: 30vmin;
    margin-top: 4rem;
    margin-bottom: 4rem;
  }

  .team-item {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    text-align: center;
    flex-flow: column;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }

  .team-item-title {
    flex-flow: column;
    flex: 0 auto;
    justify-content: flex-start;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    padding-right: 0;
    display: flex;
  }

  .team-item-image {
    width: 20vmin;
    height: 25vmin;
  }

  .small-gallery {
    max-width: 100%;
  }

  .small-gallery-text {
    max-width: 48%;
  }

  .small-gallery-bottom-wrapper {
    margin-top: 2.25rem;
    margin-bottom: 3.75rem;
  }

  .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;
  }

  .contact-heading-wrapper {
    height: 8rem;
  }

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

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

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

  .style-guide-header-wrapper {
    max-width: 100%;
    padding-bottom: 4rem;
  }

  .colors-grid {
    grid-row-gap: 24px;
    grid-template-columns: 1fr 1fr;
  }

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

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

  .licenses-heading-wrapper {
    margin-top: 0;
    padding-top: 0;
  }

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

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

  .heading-3 {
    font-size: 1.9rem;
  }

  .heading-3.services-heading-size {
    position: relative;
  }

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

  .paragraph-6 {
    line-height: 120%;
  }

  .heading-4 {
    font-size: 2.7rem;
  }

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

  .cards-columns-wrapper-2 {
    flex-flow: row;
    height: 36svh;
  }

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

  .process-wrapper-2 {
    padding-top: 0;
  }

  .paragraph-8 {
    line-height: 120%;
  }

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

  .paragraph-9 {
    line-height: 120%;
  }

  .heading-8 {
    font-size: 2.7rem;
  }

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

  .heading-9 {
    font-size: 2.7rem;
  }

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

  .font-size-medium-2.link {
    width: 320px;
  }

  .font-size-medium-2.size-text-about-copy {
    width: 360px;
  }

  .left-heading-block {
    max-width: 400px;
  }

  .highlight-item {
    grid-template-columns: 1fr 1fr;
  }

  .large-value {
    letter-spacing: -4.8px;
    font-size: 120px;
  }

  .stats-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    padding-left: 80px;
    padding-right: 80px;
    display: grid;
  }

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

  .process-item-desc, .process-item-desc.size-copy {
    width: 250px;
  }

  .process-item-desc.size-copy.tab-sizeprogress, .process-item-desc.size-copy.tab-sizeprogress-copy {
    text-align: right;
  }

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

  .process-main {
    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;
  }

  .process-size {
    margin-top: 4rem;
  }

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

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

  .button-5.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;
  }

  .paragraph-11 {
    line-height: 120%;
  }

  .heading-11 {
    font-size: 2.7rem;
  }

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

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

  .vertical-headline.contact-headline {
    max-width: none;
  }

  .properties-list {
    flex-flow: column;
    display: flex;
  }

  .properties-list.two {
    margin-top: 22rem;
    display: block;
  }

  .properties-list.two._44 {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    margin-top: 49.8rem;
    display: flex;
  }

  .properties-list.two._22, .properties-list.two._22-copy {
    margin-top: 49.8rem;
    display: flex;
  }

  .properties-list.two._44-copy {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    margin-top: 49.8rem;
    display: flex;
  }

  .property-wrapper {
    aspect-ratio: 16 / 9;
    min-height: auto;
  }

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

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

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

  .heading-huge {
    font-size: 3.5rem;
  }

  .container-7 {
    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;
  }

  .project__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;
  }

  .project__overview-copy {
    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;
  }

  .sectors__link {
    transition-property: none;
  }

  .sectors__link:hover {
    background-color: #0000;
  }

  .nav__button {
    transition-property: none;
  }

  .nav__button:hover {
    background-color: #000;
  }

  .top-bar {
    padding-left: .5rem;
  }

  .footer__contact {
    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;
  }

  .footer__contact-item.align-right {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .nav-head__button {
    transition-property: none;
  }

  .nav-head__button:hover {
    color: #fff;
    background-color: #000;
  }

  .close-nav {
    transition-property: none;
  }

  .close-nav:hover {
    opacity: 1;
  }

  .footer__nav-link {
    height: 5rem;
    transition-property: none;
  }

  .footer__nav-link:hover {
    background-color: #0000;
  }

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

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

  .property-wrapper-2 {
    aspect-ratio: 1;
    flex-flow: row;
    min-height: auto;
  }

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

  .properties-list-copy {
    flex-flow: column;
    margin-top: 22rem;
    display: flex;
  }

  .properties-list-copy._11 {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    flex: 0 auto;
    order: 0;
    grid-template-rows: minmax(180px, 180px) minmax(180px, 180px) minmax(180px, 180px) minmax(180px, 180px) minmax(180px, 180px) minmax(180px, 180px) 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;
  }

  .properties-list-copy._33, .properties-list-copy._33-copy {
    margin-top: 49.8rem;
  }

  .properties-list-2 {
    flex-flow: column;
    display: flex;
  }

  .property-wrapper-3 {
    aspect-ratio: 16 / 9;
    min-height: auto;
  }

  .paragraph-10-copy {
    line-height: 120%;
  }

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

  .image-28 {
    width: 10%;
    margin-top: 7px;
  }

  .div-block-30-copy {
    background-image: linear-gradient(271deg, var(--color--bg-color-footer) 72%, #ffffffa6);
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto;
  }

  .link-copy, .link-copy-copy, .link-copy-copy-copy {
    justify-content: center;
    align-items: center;
    padding-top: 0;
    display: flex;
  }

  .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;
  }

  .tab-footer-copy-copy {
    padding-left: 0;
  }

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

  .div-block-31 {
    position: absolute;
  }

  .div-block-32 {
    padding-left: 79px;
    position: absolute;
  }

  .div-block-33 {
    padding-left: 160px;
    position: absolute;
  }

  .div-block-34 {
    padding-left: 240px;
    position: absolute;
  }

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

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

  .link-block-10.w--current {
    padding-left: 10px;
  }

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

  .footer-text-copy, .footer-text-copy-copy {
    font-size: 14px;
    font-weight: 400;
  }

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

  .container-8-copy {
    max-width: none;
    height: 260rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

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

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

  .cards-columns-wrapper-3 {
    flex-flow: row;
    height: 36svh;
  }

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

  .paragraph-13 {
    line-height: 120%;
  }

  .process-wrapper-3 {
    padding-top: 0;
  }

  .link-block-13 {
    display: none;
  }

  .process-step-icon {
    margin-left: auto;
    margin-right: auto;
  }

  .cta-card {
    background-position: 40% 0;
    min-width: 100%;
    max-width: 100%;
    min-height: 44rem;
    max-height: 44rem;
    padding: 4rem;
    box-shadow: 0 1rem 2rem #0003;
  }

  .cta-wrapper {
    grid-template-columns: 1fr;
    top: -22rem;
  }

  .sign-up-form {
    width: 28.8rem;
  }

  .button-subscribe {
    padding: .8rem 2rem;
  }

  .max-width-30rem {
    max-width: 30rem;
  }

  .sign-up-form-container {
    padding: .5rem 1rem .5rem 2rem;
  }

  .space-7rem {
    min-height: 7rem;
  }

  .space-2rem {
    min-height: 2rem;
  }

  .space-1rem {
    min-height: 1rem;
  }

  .cta-container {
    max-width: 100%;
    max-height: 22rem;
    padding-left: 10%;
    padding-right: 10%;
  }

  .heading-18-copy {
    -webkit-text-stroke-color: #fff;
  }

  .nav-menu-copy {
    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;
  }

  .cell {
    display: none;
  }

  .marquee-img {
    margin-top: 0;
  }

  .service-area {
    background-color: #010101;
    height: auto;
  }

  .service-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-rows: auto;
    margin-top: -59px;
    padding-top: 0;
  }

  .service-marquee {
    border-radius: 0;
  }

  .service-sticky-main {
    height: 30vh;
  }

  .marquee-overlay {
    opacity: 1;
  }

  .contact-wrapper {
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
    flex-flow: column;
    display: flex;
  }

  .contact-inner {
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
  }

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

  .cta-banner-section.cta {
    background-image: linear-gradient(#0f1b22b2, #0f1b22b2), url("../images/6a0dc5384ac11ca44111e6ec_AV-pr-3-3webp.png");
    background-position: 0 0, 50%;
    background-size: auto, cover;
    display: block;
  }

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

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

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

  .section-23.accent {
    display: none;
  }

  .location-wrapper {
    aspect-ratio: 16 / 9;
  }

  .contact-wrapper-2 {
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
    flex-flow: column;
    display: flex;
  }

  .contact-inner-2 {
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
  }

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

  .heading-style-h1 {
    font-size: 4rem;
  }

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

  .header-image-wrapper.is-image-1 {
    width: 28vw;
  }

  .header-image-wrapper.is-image-3 {
    width: 26vw;
  }

  .header-image-wrapper.is-image-6, .header-image-wrapper.is-image-4 {
    width: 24vw;
  }

  .header-image-wrapper.is-image-5 {
    width: 26vw;
  }

  .header-image-wrapper.is-image-2 {
    width: 28vw;
  }

  .header-content {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

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

  .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;
  }

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

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

  .contact-2 {
    padding-top: 120px;
    padding-bottom: 120px;
  }

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

  .banner-cta-component {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .cta-heading-top, .cta-heading-bottom {
    font-size: 6rem;
  }
}

@media screen and (max-width: 767px) {
  .stellar-site--container {
    padding-right: var(--stellar-site---padding--pd-04);
    padding-left: var(--stellar-site---padding--pd-04);
  }

  .stellar-site--text-xlarge {
    font-size: 1.25rem;
  }

  .stellar-site--footer__legal {
    padding-top: var(--stellar-site---padding--pd-04);
    padding-bottom: var(--stellar-site---padding--pd-04);
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .stellar-site--footer__contact {
    grid-row-gap: 1.5rem;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
  }

  .stellar-site--footer__nav {
    grid-column-gap: .25rem;
    grid-row-gap: .25rem;
  }

  .stellar-site--footer__nav-link {
    height: 4rem;
    padding-right: var(--stellar-site---padding--pd-07);
    padding-left: var(--stellar-site---padding--pd-07);
  }

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

  .link {
    padding-left: 16px;
  }

  .nav-menu {
    margin-left: auto;
    margin-right: auto;
  }

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

  .hero-heading-text-wrapper {
    flex-flow: column;
  }

  .hero-text-wrapper {
    max-width: 100%;
    margin-top: 1rem;
  }

  .paragraph {
    margin-top: 0;
  }

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

  .parallax {
    display: inline-block;
  }

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

  .card-left-heading-wrapper {
    width: 120%;
    display: block;
    inset: auto 0% 42%;
  }

  .title {
    margin-bottom: .8rem;
  }

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

  .project-image {
    width: 100%;
    height: auto;
    min-height: auto;
  }

  .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-50 {
    max-height: 100%;
  }

  .overlay {
    display: none;
  }

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

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

  .gallery-image-heading-wrapper {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .gallery-text-wrapper {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .process-wrapper {
    margin-bottom: 0;
    padding-top: 2rem;
  }

  .process-content {
    margin-top: 4rem;
  }

  .process-intro-text {
    margin-bottom: 2rem;
  }

  .process-steps {
    margin-top: 0;
    margin-bottom: 2rem;
  }

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

  .footer-column-left {
    max-width: 100%;
  }

  .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;
  }

  .heading-2 {
    font-size: 1.5rem;
  }

  .heading-1 {
    font-size: 1.9rem;
  }

  .projects-heading-wrapper {
    margin-bottom: 1rem;
  }

  .projects-heading-text-wrapper {
    flex-flow: column;
    height: 100%;
    margin-bottom: 4rem;
    padding-bottom: 0;
  }

  .projects-text-wrapper {
    max-width: 100%;
  }

  .project-wrapper {
    margin-top: 0;
    margin-bottom: 6rem;
  }

  .project-70-width, .project-30-width {
    max-width: 100%;
  }

  .project-30-width.margin-right-14-rem {
    margin-bottom: 6rem;
    margin-right: 0;
  }

  .project-50-width {
    max-width: 100%;
    margin-bottom: 6rem;
  }

  .projects-wrapper, .projects-wrapper.space-between {
    flex-flow: column;
    margin-bottom: 6rem;
  }

  .project-description {
    height: 24%;
    min-height: auto;
    max-height: none;
  }

  .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;
  }

  .our-team {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .team-item {
    text-align: center;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: block;
  }

  .team-item-title {
    justify-content: flex-start;
    align-items: flex-start;
    margin-right: 0;
    padding-left: 0;
  }

  .team-item-image {
    order: 2;
  }

  .small-gallery {
    flex-flow: column;
    max-width: 100%;
  }

  .small-gallery-text {
    max-width: 100%;
  }

  .small-gallery-bottom-wrapper {
    flex-flow: column;
    margin-top: 0;
    margin-bottom: 2rem;
  }

  .small-gallery-image-wrapper {
    width: 100%;
    height: 36vmin;
    margin-top: 2rem;
  }

  .contact-heading-wrapper {
    height: 6rem;
  }

  .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;
  }

  .heading-3 {
    font-size: 1.5rem;
  }

  .gallery-grid-2 {
    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;
  }

  .paragraph-6 {
    margin-top: 0;
  }

  .heading-4 {
    font-size: 1.9rem;
  }

  .hero-text-bottom-wrapper-2 {
    background-color: #fff;
  }

  .title-2 {
    margin-bottom: .8rem;
  }

  .process-wrapper-2 {
    margin-bottom: 0;
    padding-top: 2rem;
  }

  .title-3 {
    margin-bottom: .8rem;
  }

  .paragraph-8 {
    margin-top: 0;
  }

  .the-sticky-div-title {
    text-align: center;
    font-size: 52px;
  }

  .hero-text-wrapper-2 {
    max-width: 100%;
    margin-top: 1rem;
  }

  .paragraph-9 {
    margin-top: 0;
  }

  .heading-8 {
    font-size: 1.9rem;
  }

  .title-4 {
    margin-bottom: .8rem;
  }

  .paragraph-10 {
    margin-top: 0;
  }

  .heading-9 {
    font-size: 1.9rem;
  }

  .heading-9.about-change {
    height: auto;
  }

  .left-heading-block {
    max-width: 280px;
  }

  .highlight-item {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: column;
    display: flex;
  }

  .highlight-info {
    justify-content: flex-start;
    max-width: 480px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .left-heading-block-wrapper {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .large-value {
    letter-spacing: -3.2px;
    font-size: 80px;
  }

  .stats-wrapper {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    padding-left: 85px;
    padding-right: 85px;
    display: grid;
  }

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

  .process-item-desc.size-copy.tab-sizeprogress-copy, .process-item-desc.size-copy {
    text-align: left;
  }

  .process-item-icon {
    width: 2rem;
    height: 2rem;
  }

  .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-line-ray {
    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;
  }

  .button-5.size-phone {
    display: none;
  }

  .paragraph-11 {
    margin-top: 0;
  }

  .heading-11 {
    font-size: 1.9rem;
  }

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

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

  .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;
  }

  .heading-huge {
    letter-spacing: 0;
    font-size: 2.5rem;
  }

  .container-7 {
    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;
  }

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

  .sectors {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .projects__list {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    flex-flow: column;
    display: flex;
  }

  .sections-2.top-padding {
    padding-top: 4rem;
  }

  .text-regular.hidden-phone {
    display: none;
  }

  .spacer-small {
    height: 2rem;
  }

  .sectors__link {
    height: 3rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .open-nav {
    height: 5rem;
    padding-left: 1rem;
  }

  .footer__nav {
    grid-column-gap: .25rem;
    grid-row-gap: .25rem;
  }

  .text-xlarge {
    font-size: 1.25rem;
  }

  .nav__button {
    width: 3rem;
    height: 3rem;
  }

  .top-bar {
    justify-content: flex-end;
    align-items: center;
    height: 5rem;
    margin-left: 4rem;
  }

  .brand__asset {
    height: 1.75rem;
  }

  .nav {
    padding: .5rem 1rem 1rem;
  }

  .footer__legal {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .footer__contact {
    grid-row-gap: 1.5rem;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
  }

  .nav__content {
    width: 100%;
    min-width: 0;
  }

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

  .footer__nav-link {
    height: 4rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

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

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

  .properties-list-copy._11 {
    grid-template-rows: minmax(140px, 140px) minmax(140px, 140px) minmax(140px, 140px) minmax(140px, 140px) minmax(140px, 140px) minmax(140px, 140px) minmax(140px, 140px);
    grid-template-columns: minmax(140px, 140px) minmax(140px, 140px) minmax(140px, 140px) minmax(140px, 140px);
    place-items: stretch center;
  }

  .paragraph-10-copy {
    margin-top: 0;
  }

  .parallax-copy {
    display: inline-block;
  }

  .footer-column-left-copy, .footer-column-left-copy-copy {
    max-width: 100%;
  }

  .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;
  }

  .link-block-9, .link-block-10, .link-block-11 {
    padding-left: 16px;
  }

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

  .container-8-copy {
    height: 215rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .container-8-copy-copy {
    height: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .image-30 {
    margin-left: auto;
    margin-right: auto;
  }

  .title-5, .title-6 {
    margin-bottom: .8rem;
  }

  .process-container.process-size-cont {
    margin-bottom: 0;
  }

  .paragraph-13 {
    margin-top: 0;
  }

  .process-wrapper-3 {
    margin-bottom: 0;
    padding-top: 2rem;
  }

  .cta-card {
    background-position: 37% 0;
    min-height: 47rem;
    max-height: 47rem;
  }

  .cta-wrapper {
    top: -23.5rem;
  }

  .sign-up-form {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 360px;
  }

  .max-width-30rem {
    max-width: 21rem;
  }

  .sign-up-text-field {
    text-align: left;
  }

  .cta-container {
    max-height: 23.5rem;
  }

  .heading-19 {
    font-size: var(--stellar-site---padding--pd-04);
  }

  .nav-menu-copy {
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
  }

  .service-inner {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    display: flex;
  }

  .service-inner.last {
    padding-top: 0;
  }

  .service-wrap {
    flex-flow: column;
    grid-template-columns: 1fr;
    align-items: center;
  }

  .contact-inner {
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
  }

  .contact-form-wrapper-2 {
    padding: 1.5rem;
  }

  .cta-img._4rd {
    top: -102%;
    right: 22%;
  }

  .btn-icon-wrap.white-5 {
    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(--stellar-site---padding--pd-09);
  }

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

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

  .contact-inner-2 {
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
  }

  .contact-form-wrapper-3 {
    padding: 1.5rem;
  }

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

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

  .button-17 {
    padding: .25rem 1rem;
  }

  .heading-style-h1 {
    font-size: 6.5vw;
  }

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

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

  .header-image-wrapper.is-image-1 {
    width: 30vw;
  }

  .header-image-wrapper.is-image-3 {
    width: 28vw;
  }

  .header-image-wrapper.is-image-6 {
    width: 26vw;
    right: 50vw;
  }

  .header-image-wrapper.is-image-4 {
    width: 26vw;
  }

  .header-image-wrapper.is-image-5 {
    width: 28vw;
  }

  .header-image-wrapper.is-image-2 {
    width: 30vw;
    left: 52vw;
  }

  .header-content {
    padding-top: 4rem;
  }

  .header-component {
    height: 150vh;
  }

  .header-content-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-ix-trigger {
    margin-top: 35rem;
  }

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

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

  .hero-subtitle.hero-subtitle-text {
    font-size: var(--stellar-site---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;
  }

  .button-19 {
    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;
  }

  .submit-button-5 {
    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;
  }

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

  .contact-2 {
    padding-top: 120px;
    padding-bottom: 40px;
  }

  .contact-right-content-wrap-2 {
    padding-bottom: 30px;
  }

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

  .section-padding-large {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .banner-cta-component {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }

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

  .process-item-2 {
    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-block-2 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

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

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

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

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

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

@media screen and (max-width: 479px) {
  .stellar-site--footer__legal {
    grid-row-gap: .5rem;
    flex-flow: wrap;
  }

  .body {
    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.w--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.w--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;
  }

  .lottie-animation-2 {
    z-index: 999;
    justify-content: space-between;
    align-items: flex-end;
    width: 64px;
    position: static;
  }

  .menu-button {
    width: auto;
  }

  .menu-button.w--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;
  }

  .nav-menu {
    z-index: auto;
    background-color: var(--white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: auto;
    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;
    display: block;
    position: absolute;
    overflow: visible;
  }

  .nav-menu.bg-colornavbar {
    background-image: linear-gradient(#fff9, #fff9);
  }

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

  .hero-heading-text-wrapper {
    margin-top: -100px;
    padding-top: 43px;
  }

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

  .paragraph.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._1-1 {
    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-change-copy {
    text-align: center;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
  }

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

  .bold.font-size-medium-copy {
    margin-bottom: 0;
    font-size: 2.2rem;
    text-decoration: none;
  }

  .parallax.about-photo-copy {
    width: auto;
  }

  .parallax.about-photo-copy._1-2 {
    max-width: none;
    height: 50rem;
  }

  .cards-columns-wrapper {
    flex-flow: column;
    height: 100%;
  }

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

  .cards-column-right {
    flex: 0 auto;
    justify-content: center;
    align-items: center;
    height: 24svh;
  }

  .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;
  }

  .card-left-heading-wrapper {
    width: 100%;
    margin-left: 0;
    position: static;
    inset: auto auto 0% 0%;
  }

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

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

  .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-image {
    width: 100%;
    min-height: 20rem;
    max-height: 19rem;
  }

  .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%;
  }

  .project-number {
    font-size: 1rem;
    line-height: 29px;
  }

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

  .gallery-grid {
    grid-column-gap: 14px;
    grid-row-gap: 2rem;
  }

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

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

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

  .gallery-image-heading-wrapper {
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 0;
  }

  .gallery-text-wrapper {
    margin-top: 0;
    padding-bottom: 0;
  }

  .process-content {
    margin-top: 2rem;
  }

  .process-steps {
    text-align: center;
  }

  .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;
  }

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

  .gallery-heading-wrapper {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }

  .projects-heading-wrapper {
    margin-bottom: .8rem;
  }

  .projects-heading-text-wrapper {
    height: 100%;
    min-height: 0;
    padding-bottom: 0;
  }

  .projects-text-wrapper {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .project-70-width {
    height: 24rem;
    max-height: 24rem;
  }

  .project-30-width {
    height: 24rem;
  }

  .project-30-width.margin-right-14-rem {
    margin-bottom: 6rem;
  }

  .project-50-width {
    height: 24rem;
    margin-bottom: 6rem;
  }

  .projects-wrapper.space-between {
    margin-top: 0;
  }

  .project-page {
    min-height: 80vmax;
  }

  .info-column-left {
    flex-flow: column;
  }

  .project-description {
    flex-flow: column;
    height: 100%;
    min-height: auto;
    margin-top: 3rem;
    margin-bottom: 2rem;
    display: block;
  }

  .paragraph-two {
    display: none;
  }

  .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;
  }

  .about-text-wraper {
    width: 300px;
    margin-top: 20px;
  }

  .our-team {
    grid-column-gap: 21px;
    grid-row-gap: 21px;
  }

  .team-item {
    display: block;
  }

  .team-item.hide-row {
    display: none;
  }

  .team-item-title {
    text-align: center;
    flex-flow: column;
    flex: 0 auto;
    order: 0;
    justify-content: center;
    align-items: center;
    height: 20%;
    margin-left: auto;
    margin-right: auto;
    padding-right: 0;
    display: flex;
  }

  .team-item-image {
    flex-flow: row;
    justify-content: center;
    align-items: center;
    width: 40vmin;
    height: 60vmin;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .small-gallery {
    margin-top: 0;
  }

  .small-gallery-image-wrapper {
    height: 50vmin;
  }

  .explore-more-link-wrapper {
    margin-bottom: 4rem;
  }

  .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-heading-wrapper {
    margin-bottom: 3rem;
  }

  .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;
  }

  .text-field, .contact-form-column-left {
    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;
  }

  .colors-grid {
    grid-template-columns: 1fr;
  }

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

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

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

  .heading-3 {
    margin-bottom: 40px;
  }

  .heading-3.about-change {
    font-size: 2rem;
  }

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

  .gallery-grid-2 {
    grid-column-gap: 14px;
    grid-row-gap: 2rem;
  }

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

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

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

  .cards-columns-wrapper-2 {
    flex-flow: column;
    height: 100%;
  }

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

  .paragraph-8 {
    margin-top: 0;
    padding-top: 0;
  }

  .the-sticky-div-title {
    margin-top: 76px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 11vw;
    line-height: 9vw;
  }

  .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-content {
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 0;
  }

  .text-span-2 {
    font-size: 6vw;
  }

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

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

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

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

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

  .paragraph-9.size-parag-9 {
    display: none;
  }

  .paragraph-9.size-aboutustext-copy {
    width: 329px;
    margin-top: 2rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 1rem;
  }

  .paragraph-9.size-aboutustext-copy-copy, .paragraph-9.size-aboutustext-copy-copy-copy {
    width: 300px;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    font-size: 1rem;
  }

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

  .title-4 {
    margin-bottom: 0;
  }

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

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

  .heading-9.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;
  }

  .font-size-medium-2.link {
    width: auto;
  }

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

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

  .stats-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    display: flex;
  }

  .stats-item {
    max-width: none;
  }

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

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

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

  .process-item-desc.size-copy {
    text-align: left;
    width: 200px;
  }

  .process-item-desc.size-copy.tab-sizeprogress-copy {
    text-align: left;
  }

  .process-item-desc.size-copy {
    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-line-ray {
    margin-left: calc(2rem + 2px);
  }

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

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

  .heading-layout.size-process {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    margin-bottom: 0;
  }

  .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;
  }

  .bold-text-10 {
    font-size: 1rem;
  }

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

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

  .text-field-6 {
    width: 310px;
  }

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

  .text-field-5-copy {
    width: 310px;
  }

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

  .submit-button-2.btm4-copy {
    margin-top: 10px;
  }

  .process-size {
    margin-top: 4rem;
    margin-bottom: 0;
  }

  .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.w--current {
    display: none;
  }

  .section-12 {
    margin-top: 20rem;
  }

  .button-5.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%;
  }

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

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

  .section-14 {
    padding-top: 6rem;
  }

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

  .properties-list.two, .properties-list.two._44, .properties-list.two._22 {
    margin-top: 20rem;
  }

  .properties-list.two._22-copy, .properties-list.two._44-copy {
    margin-top: 43rem;
  }

  .property-wrapper {
    min-height: 24rem;
  }

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

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

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

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

  .container-7 {
    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;
  }

  .project__overview {
    grid-row-gap: 1.5rem;
    display: flex;
  }

  .absolute-img {
    height: 50rem;
  }

  .project-image-2 {
    height: 100vw;
  }

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

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

  .social-icon {
    width: 1.25rem;
  }

  .footer__legal {
    grid-row-gap: .5rem;
    flex-flow: wrap;
  }

  .nav__social {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
  }

  .nav__link {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

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

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

  .section-15 {
    padding-top: 6rem;
  }

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

  .property-label-2 {
    display: none;
  }

  .heading-15.white {
    font-family: Open Sans, sans-serif;
  }

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

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

  .properties-list-copy {
    margin-top: 20rem;
  }

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

  .properties-list-copy._33 {
    margin-top: 20rem;
  }

  .properties-list-copy._33-copy {
    margin-top: 43rem;
  }

  .property-wrapper-3 {
    min-height: 24rem;
  }

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

  .properties-wrapper-copyhotelsall._11 {
    grid-column-gap: 0vw;
    grid-row-gap: 0vw;
    flex-flow: column;
    margin-top: 0;
  }

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

  .paragraph-10-copy {
    text-align: center;
    margin-top: -1.8rem;
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 0;
  }

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

  .lightbox-link-3 {
    display: block;
    overflow: visible;
  }

  .image-27 {
    height: 100%;
  }

  .text-block-15-copy {
    width: 250px;
  }

  .footer-links-copy {
    grid-column-gap: .25rem;
    grid-row-gap: .25rem;
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: 0;
  }

  .start-your-project-link-wrapper-copy {
    justify-content: center;
    align-items: center;
    width: 99.9999%;
    padding-top: 0;
  }

  .link-copy {
    width: auto;
    height: auto;
    padding-top: 16px;
    padding-left: 16px;
    position: sticky;
  }

  .link-copy.w--current {
    z-index: auto;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 30px;
    padding-top: 113px;
    padding-left: 0;
    padding-right: 2px;
    position: relative;
  }

  .link-copy-copy {
    width: 80px;
    height: 30px;
    padding-left: 0;
    position: absolute;
    bottom: 96px;
    left: 202px;
  }

  .link-copy-copy.w--current {
    z-index: auto;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 30px;
    margin-top: 96px;
    padding-left: 0;
    position: relative;
  }

  .link-copy {
    width: 80px;
    height: 30px;
    padding-left: 0;
    position: absolute;
  }

  .link-copy.w--current {
    z-index: auto;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 30px;
    padding-left: 0;
    position: relative;
  }

  .link-copy-copy {
    width: 80px;
    height: 30px;
    padding-left: 0;
    position: absolute;
  }

  .link-copy-copy.w--current {
    z-index: auto;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 30px;
    padding-left: 0;
    position: relative;
  }

  .link-copy-copy-copy {
    width: 80px;
    height: 30px;
    padding-left: 0;
    position: absolute;
    bottom: 96px;
    left: 301px;
  }

  .link-copy-copy-copy.w--current {
    z-index: auto;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 30px;
    margin-top: 96px;
    padding-left: 0;
    position: relative;
  }

  .bold-text-11 {
    font-family: Open Sans, sans-serif;
    font-weight: 400;
  }

  .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;
  }

  .link-block-6, .link-block-7, .link-block-8 {
    justify-content: center;
    align-items: center;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 16px;
    text-decoration: none;
    display: flex;
  }

  .link-block-9, .link-block-10, .link-block-10.w--current, .link-block-11 {
    padding-left: 16px;
  }

  .the-content-copy, .the-content-copy-copy {
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 0;
  }

  .partners-marquee-track {
    justify-content: flex-start;
    align-items: flex-start;
    padding-bottom: 0;
  }

  .container-8-copy {
    height: 310rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .container-8-copy-copy {
    height: auto;
    margin-bottom: 0;
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .link-block-12 {
    width: auto;
    height: auto;
  }

  .services-section {
    background-color: #fff;
    margin-top: 4rem;
  }

  .title-5 {
    margin-bottom: .5rem;
  }

  .bold-text-12 {
    font-size: 1.1rem;
  }

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

  .cards-columns-wrapper-3 {
    flex-flow: column;
    height: 100%;
  }

  .background-color-wrapper-3 {
    background-color: #f5f5f7;
  }

  .service-card-text {
    margin-left: auto;
    margin-right: auto;
  }

  .bold-text-13 {
    font-size: 1.1rem;
  }

  .title-6 {
    margin-bottom: .5rem;
  }

  .bold-text-14 {
    font-size: 1.1rem;
  }

  .bold-text-15 {
    font-size: 1rem;
  }

  .bold-text-16 {
    font-size: 1.1rem;
  }

  .process-container {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
  }

  .process-container.process-size-cont {
    margin-bottom: 2rem;
  }

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

  .paragraph-13 {
    margin-top: 0;
    padding-top: 0;
    font-size: 1rem;
  }

  .process-wrapper-3 {
    padding-top: 0;
  }

  .link-block-13 {
    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;
  }

  .link-block-14 {
    flex-flow: row;
    justify-content: center;
    align-items: center;
    display: block;
  }

  .process-step-icon {
    opacity: 1;
    width: 10%;
    margin-bottom: .5rem;
    margin-left: auto;
    margin-right: auto;
  }

  .bold-text-19 {
    width: 322.516px;
  }

  .bold-text-20 {
    width: 102.172px;
  }

  .section-18 {
    height: 47rem;
  }

  .image-38 {
    filter: none;
    height: 47rem;
  }

  .heading-18 {
    width: auto;
    color: var(--white);
    letter-spacing: -.02em;
    -webkit-text-stroke-color: var(--stellar-site---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%;
  }

  .text-block-25 {
    text-shadow: 20px -1px 20px #000;
    margin-top: 42.5rem;
    font-size: 1rem;
    font-weight: 400;
    bottom: auto;
  }

  .cta-card {
    text-align: center;
    background-position: 80% 0;
    min-width: 100%;
    max-width: 100%;
    min-height: 38rem;
    max-height: 38rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .cta-card.slide-down-animation {
    height: 450px;
  }

  .cta-wrapper {
    grid-template-columns: 1fr;
    top: -19rem;
  }

  .sign-up-form {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 85px;
    margin-top: 3.5rem;
    display: flex;
  }

  .button-subscribe {
    height: 35px;
    padding-top: .3rem;
    padding-bottom: .3rem;
  }

  .section-19 {
    margin-top: 22rem;
    margin-bottom: 0;
  }

  .max-width-30rem {
    max-width: 12rem;
  }

  .sign-up-form-container {
    grid-row-gap: 16px;
    text-align: center;
    border-radius: 20px;
    flex-direction: column;
    align-items: center;
    padding-left: 16px;
  }

  .sign-up-text-field {
    text-align: center;
  }

  .cta-title {
    margin-top: 0;
  }

  .cta-container {
    max-height: 14rem;
  }

  .heading-18-copy {
    width: auto;
    color: var(--white);
    letter-spacing: -.02em;
    -webkit-text-stroke-color: var(--stellar-site---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%;
  }

  .section-20, .image-39 {
    height: 47rem;
  }

  .heading-18-copy-copy {
    z-index: 1;
    width: auto;
    color: var(--white);
    letter-spacing: -.02em;
    -webkit-text-stroke-color: var(--stellar-site---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%;
  }

  .nav-menu-copy {
    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;
  }

  .nav-menu-copy.bg-colornavbar {
    background-image: linear-gradient(#fff9, #fff9);
  }

  .cell {
    justify-content: flex-start;
    align-items: center;
    display: none;
  }

  .service-area {
    height: auto;
    padding-bottom: 0;
  }

  .section-content-sm {
    text-indent: 0;
  }

  .service-wrap {
    margin-top: -86px;
  }

  .service-marquee, .service-sticky-main {
    height: 47rem;
  }

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

  .button-14 {
    width: 100%;
  }

  .contact-info {
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
    flex-flow: column;
    display: none;
  }

  .contact-wrapper {
    width: auto;
    position: absolute;
  }

  .contact-inner {
    width: 310px;
  }

  .text-field-9 {
    height: auto;
  }

  .text-field-9.text-area {
    min-height: auto;
  }

  .contact-form-wrapper-2 {
    width: 310px;
    margin-left: auto;
    margin-right: auto;
  }

  .heading-21 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-family: Open Sans, sans-serif;
  }

  .paragraph-17-copy {
    text-align: center;
    font-family: Open Sans, sans-serif;
  }

  .paragraph-18, .paragraph-18-copy {
    font-family: Open Sans, sans-serif;
    display: none;
  }

  .btn-primary.white {
    text-align: left;
    justify-content: center;
    align-items: center;
  }

  .cta-item {
    display: none;
  }

  .cta-wrap {
    grid-template-columns: 1fr;
  }

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

  .cta-wrap-2 {
    grid-template-columns: 1fr;
  }

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

  .cta-banner-section.cta {
    height: 50rem;
    display: block;
  }

  .text-2.white {
    color: #fefcf8cc;
    font-size: 12px;
  }

  .subtitle-2.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;
  }

  .section-23 {
    padding-top: 6rem;
  }

  .button-16 {
    width: 100%;
  }

  .location-wrapper {
    aspect-ratio: 2 / 3;
  }

  .contact-info-2 {
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
    flex-flow: column;
    display: flex;
  }

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

  .padding-global-2 {
    padding-left: 5%;
    padding-right: 5%;
  }

  .button-17 {
    padding-top: .25rem;
    padding-bottom: .25rem;
    padding-right: .25rem;
  }

  .heading-style-h1 {
    font-size: 3rem;
  }

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

  .button-group {
    grid-column-gap: .75rem;
    grid-row-gap: .75rem;
  }

  .header-image-wrapper {
    width: 30vw;
    height: 35vw;
  }

  .section-header.background-black {
    display: none;
  }

  .header-content {
    z-index: 3;
  }

  .button-secondary {
    padding: .25rem .25rem .25rem 1rem;
  }

  .button-arrow {
    width: 1.5rem;
  }

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

  .services-cards-mobile {
    padding-left: 0;
    padding-right: 0;
    display: flex;
  }

  .div-block-41 {
    height: 47rem;
    display: block;
  }

  .div-block-42, .div-block-43, .div-block-44, .div-block-45 {
    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(--stellar-site---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(--stellar-site---padding--pd-03);
  }

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

  .contact-center-text {
    font-size: var(--stellar-site---padding--pd-04);
  }

  .contact-right-from-wrap-2 {
    padding-top: 10px;
    padding-left: 18px;
    padding-right: 18px;
  }

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

  .contact-2 {
    padding: 120px 10px 18px 20px;
  }

  .contact-right-content-wrap-2 {
    justify-content: center;
    align-items: center;
    padding-bottom: 18px;
    display: flex;
  }

  .contact-row-2 {
    grid-column-gap: 35px;
    grid-row-gap: 35px;
    justify-content: center;
    align-items: flex-start;
  }

  .banner-cta-component {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .cta-heading-top, .cta-heading-bottom {
    font-size: 3rem;
  }

  .image-42 {
    margin-top: 1rem;
  }

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

  .process-item-2.active {
    padding-right: 1rem;
  }

  .process-line-ray-2 {
    margin-left: calc(2rem + 2px);
  }

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

#w-node-_4611b6b5-f949-ee65-8dad-251c0fa4fe91-d8856538, #w-node-_7664c48d-64d1-4830-6a7e-f18caae056cc-d8856538 {
  grid-area: span 3 / span 2 / span 3 / span 2;
}

#w-node-_404c4ec5-ee2e-5cb5-a99d-6b13bce65b74-d8856538 {
  grid-area: span 3 / span 3 / span 3 / span 3;
}

#w-node-_87404962-5dce-81b4-0ff7-ec86b0a0f1f5-d8856538 {
  grid-area: span 5 / span 3 / span 5 / span 3;
}

#w-node-_4d454d59-e7f8-34ac-b4c4-8bd231204647-d8856538 {
  grid-area: span 4 / span 4 / span 4 / span 4;
}

#w-node-_5d30f591-a75e-9b37-966e-e847c8001b9e-d8856538, #w-node-_1badf69e-a6e3-4ea6-bbfe-f52941be343e-d8856538 {
  grid-area: span 3 / span 2 / span 3 / span 2;
}

#w-node-e87ce519-84d0-8935-2e99-75341fc4aed2-d8856538 {
  grid-area: span 2 / span 3 / span 2 / span 3;
}

#w-node-ca6438d5-7a65-df10-c6b6-b63cf825e69a-d8856538 {
  grid-area: span 1 / span 7 / span 1 / span 7;
}

#w-node-c435f948-932f-992d-647a-94c472a7a9c8-d8856538 {
  justify-self: end;
}

#w-node-c435f948-932f-992d-647a-94c472a7a9e4-d8856538 {
  justify-self: start;
}

#w-node-c435f948-932f-992d-647a-94c472a7a9eb-d8856538 {
  justify-self: end;
}

#w-node-c435f948-932f-992d-647a-94c472a7aa06-d8856538 {
  justify-self: start;
}

#w-node-c435f948-932f-992d-647a-94c472a7aa0d-d8856538 {
  justify-self: end;
}

#w-node-_6c89b63f-25ab-6533-87ec-2eb27fcd14c3-7fcd14b9 {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr .8fr;
}

#w-node-_3e21a912-366b-e534-a407-6b0d38f8bfb6-d885653b {
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
}

#w-node-_3e21a912-366b-e534-a407-6b0d38f8bfdb-d885653b {
  grid-template-rows: auto auto;
  grid-template-columns: .75fr .25fr .25fr .25fr;
}

#w-node-_9a03eb9f-a7bb-c796-9726-85e3c6e191b1-be82609b, #w-node-f0f2885c-50dc-8b29-a091-c5a07b9f74e3-be82609b, #w-node-_54857f59-ba7e-9a6d-418f-d2dc19b1dbee-be82609b, #w-node-bf977949-d112-1e1d-93e5-298beb7534d0-be82609b, #w-node-_45d4e431-c866-b000-c358-10ac5b6ea998-be82609b, #w-node-_20e30225-c101-c38f-7ae2-682a4a079573-be82609b, #w-node-b15c315a-091e-6934-9b5f-745335ae1e61-be82609b, #w-node-_15b2b400-3d95-7065-6388-40bc1e65f962-be82609b, #w-node-_3ef0292a-238b-301e-dfd4-d7ddc8a164cd-be82609b, #w-node-b3700ac3-aca3-21f8-f1c7-39531e9a6a49-be82609b, #w-node-e6eb6ce1-8006-c1a7-3a1b-e12b2de96d03-be82609b, #w-node-c20f4bfd-071d-fac8-319a-0542bcc4e5e2-be82609b, #w-node-_976be67f-1c32-90b7-c724-f40b4bb9900b-be82609b, #w-node-_9a03eb9f-a7bb-c796-9726-85e3c6e191a7-be82609b, #w-node-_9a03eb9f-a7bb-c796-9726-85e3c6e191ac-be82609b, #w-node-f6d038ad-e5cb-0e11-ee90-79f70b74eed5-be82609b, #w-node-_18e43155-5d03-f349-7dfc-4d5b073def66-be82609b, #w-node-_4006271d-d8bd-d9bb-b812-0263b874558e-be82609b, #w-node-_714d8750-c4f9-7830-7517-873e370ff202-be82609b, #w-node-_9b550e7c-7ddb-ca90-f7b4-809c2517997f-be82609b, #w-node-_4e1ccc42-ca5b-37d1-038b-e3c57e5b2fd5-be82609b, #w-node-_38d4fcfa-eb70-fbe2-8202-28220c1de4bf-be82609b, #w-node-_08963fd5-b5a6-6447-0e0b-00e7962aaf2d-be82609b, #w-node-d3f24a93-be5c-20c8-2fc8-a9464004eed3-be82609b, #w-node-cef699ba-675e-653b-e972-22f243456c26-be82609b, #w-node-_261a04d6-4534-3a25-90c7-95839e583139-be82609b, #w-node-df01d182-185f-71b5-5a81-8ce0b38348d5-be82609b, #w-node-c18ea743-d677-b4ed-e2d9-df4a366506c4-be82609b {
  grid-area: span 2 / span 1 / span 2 / span 1;
}

@media screen and (min-width: 1440px) {
  #w-node-_3e21a912-366b-e534-a407-6b0d38f8bfb6-d885653b {
    grid-template-rows: auto auto;
    grid-template-columns: .7fr .7fr .7fr;
  }

  #w-node-_3e21a912-366b-e534-a407-6b0d38f8bfdb-d885653b {
    grid-template-rows: auto auto;
    grid-template-columns: .75fr .25fr .25fr .25fr;
  }
}

@media screen and (max-width: 991px) {
  #w-node-_87404962-5dce-81b4-0ff7-ec86b0a0f1f5-d8856538, #w-node-_4d454d59-e7f8-34ac-b4c4-8bd231204647-d8856538 {
    grid-row: span 2 / span 2;
  }

  #w-node-_5d30f591-a75e-9b37-966e-e847c8001b9e-d8856538, #w-node-_1badf69e-a6e3-4ea6-bbfe-f52941be343e-d8856538, #w-node-e87ce519-84d0-8935-2e99-75341fc4aed2-d8856538 {
    grid-row: span 1 / span 1;
  }

  #w-node-ca6438d5-7a65-df10-c6b6-b63cf825e69a-d8856538 {
    grid-row: span 2 / span 2;
  }

  #w-node-_6c89b63f-25ab-6533-87ec-2eb27fcd14c3-7fcd14b9 {
    grid-template-rows: auto;
    grid-template-columns: 1.75fr 1.25fr;
  }

  #w-node-_6c89b63f-25ab-6533-87ec-2eb27fcd14c4-7fcd14b9 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_3e21a912-366b-e534-a407-6b0d38f8bfdb-d885653b {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr 1fr;
  }

  #w-node-_3e21a912-366b-e534-a407-6b0d38f8bfdc-d885653b {
    grid-column: span 3 / span 3;
  }

  #w-node-_3e21a912-366b-e534-a407-6b0d38f8bffd-d885653b {
    grid-area: span 2 / span 3 / span 2 / span 3;
  }

  #w-node-_3e21a912-366b-e534-a407-6b0d38f8bffe-d885653b {
    grid-column: span 1 / span 1;
  }

  #w-node-_9a03eb9f-a7bb-c796-9726-85e3c6e191b1-be82609b, #w-node-f0f2885c-50dc-8b29-a091-c5a07b9f74e3-be82609b, #w-node-_54857f59-ba7e-9a6d-418f-d2dc19b1dbee-be82609b, #w-node-bf977949-d112-1e1d-93e5-298beb7534d0-be82609b, #w-node-_45d4e431-c866-b000-c358-10ac5b6ea998-be82609b, #w-node-_20e30225-c101-c38f-7ae2-682a4a079573-be82609b, #w-node-b15c315a-091e-6934-9b5f-745335ae1e61-be82609b, #w-node-_15b2b400-3d95-7065-6388-40bc1e65f962-be82609b, #w-node-_3ef0292a-238b-301e-dfd4-d7ddc8a164cd-be82609b, #w-node-b3700ac3-aca3-21f8-f1c7-39531e9a6a49-be82609b, #w-node-e6eb6ce1-8006-c1a7-3a1b-e12b2de96d03-be82609b, #w-node-c20f4bfd-071d-fac8-319a-0542bcc4e5e2-be82609b, #w-node-_976be67f-1c32-90b7-c724-f40b4bb9900b-be82609b, #w-node-_9a03eb9f-a7bb-c796-9726-85e3c6e191a7-be82609b, #w-node-_9a03eb9f-a7bb-c796-9726-85e3c6e191ac-be82609b, #w-node-f6d038ad-e5cb-0e11-ee90-79f70b74eed5-be82609b, #w-node-_18e43155-5d03-f349-7dfc-4d5b073def66-be82609b, #w-node-_4006271d-d8bd-d9bb-b812-0263b874558e-be82609b, #w-node-_714d8750-c4f9-7830-7517-873e370ff202-be82609b, #w-node-_9b550e7c-7ddb-ca90-f7b4-809c2517997f-be82609b, #w-node-_4e1ccc42-ca5b-37d1-038b-e3c57e5b2fd5-be82609b, #w-node-_38d4fcfa-eb70-fbe2-8202-28220c1de4bf-be82609b, #w-node-_08963fd5-b5a6-6447-0e0b-00e7962aaf2d-be82609b, #w-node-d3f24a93-be5c-20c8-2fc8-a9464004eed3-be82609b, #w-node-cef699ba-675e-653b-e972-22f243456c26-be82609b, #w-node-_261a04d6-4534-3a25-90c7-95839e583139-be82609b, #w-node-df01d182-185f-71b5-5a81-8ce0b38348d5-be82609b, #w-node-c18ea743-d677-b4ed-e2d9-df4a366506c4-be82609b {
    grid-row: span 1 / span 1;
  }
}

@media screen and (max-width: 767px) {
  #w-node-c435f948-932f-992d-647a-94c472a7a9c8-d8856538 {
    justify-self: start;
  }

  #w-node-c435f948-932f-992d-647a-94c472a7a9e4-d8856538 {
    order: -9999;
  }

  #w-node-_6c89b63f-25ab-6533-87ec-2eb27fcd14c3-7fcd14b9 {
    grid-template-rows: auto;
    grid-template-columns: 1.5fr 1fr;
  }

  #w-node-_6c89b63f-25ab-6533-87ec-2eb27fcd14c4-7fcd14b9 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_3e21a912-366b-e534-a407-6b0d38f8bfb6-d885653b {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
  }

  #w-node-_3e21a912-366b-e534-a407-6b0d38f8bfdb-d885653b {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
  }

  #w-node-_9a03eb9f-a7bb-c796-9726-85e3c6e191b1-be82609b, #w-node-f0f2885c-50dc-8b29-a091-c5a07b9f74e3-be82609b, #w-node-_54857f59-ba7e-9a6d-418f-d2dc19b1dbee-be82609b, #w-node-bf977949-d112-1e1d-93e5-298beb7534d0-be82609b, #w-node-_45d4e431-c866-b000-c358-10ac5b6ea998-be82609b, #w-node-_20e30225-c101-c38f-7ae2-682a4a079573-be82609b, #w-node-b15c315a-091e-6934-9b5f-745335ae1e61-be82609b, #w-node-_15b2b400-3d95-7065-6388-40bc1e65f962-be82609b, #w-node-_3ef0292a-238b-301e-dfd4-d7ddc8a164cd-be82609b, #w-node-b3700ac3-aca3-21f8-f1c7-39531e9a6a49-be82609b, #w-node-e6eb6ce1-8006-c1a7-3a1b-e12b2de96d03-be82609b, #w-node-c20f4bfd-071d-fac8-319a-0542bcc4e5e2-be82609b, #w-node-_976be67f-1c32-90b7-c724-f40b4bb9900b-be82609b, #w-node-_9a03eb9f-a7bb-c796-9726-85e3c6e191a7-be82609b, #w-node-_9a03eb9f-a7bb-c796-9726-85e3c6e191ac-be82609b, #w-node-f6d038ad-e5cb-0e11-ee90-79f70b74eed5-be82609b, #w-node-_18e43155-5d03-f349-7dfc-4d5b073def66-be82609b, #w-node-_4006271d-d8bd-d9bb-b812-0263b874558e-be82609b, #w-node-_714d8750-c4f9-7830-7517-873e370ff202-be82609b, #w-node-_9b550e7c-7ddb-ca90-f7b4-809c2517997f-be82609b, #w-node-_4e1ccc42-ca5b-37d1-038b-e3c57e5b2fd5-be82609b, #w-node-_38d4fcfa-eb70-fbe2-8202-28220c1de4bf-be82609b, #w-node-_08963fd5-b5a6-6447-0e0b-00e7962aaf2d-be82609b, #w-node-d3f24a93-be5c-20c8-2fc8-a9464004eed3-be82609b, #w-node-cef699ba-675e-653b-e972-22f243456c26-be82609b, #w-node-_261a04d6-4534-3a25-90c7-95839e583139-be82609b, #w-node-df01d182-185f-71b5-5a81-8ce0b38348d5-be82609b, #w-node-c18ea743-d677-b4ed-e2d9-df4a366506c4-be82609b {
    grid-row: span 1 / span 1;
  }
}

@media screen and (max-width: 479px) {
  #w-node-_6c89b63f-25ab-6533-87ec-2eb27fcd14c3-7fcd14b9 {
    grid-template-rows: auto;
    grid-template-columns: .25fr;
  }

  #w-node-_6c89b63f-25ab-6533-87ec-2eb27fcd14c4-7fcd14b9 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_3e21a912-366b-e534-a407-6b0d38f8bfb6-d885653b, #w-node-_3e21a912-366b-e534-a407-6b0d38f8bfdb-d885653b {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
  }

  #w-node-_3e21a912-366b-e534-a407-6b0d38f8bfdc-d885653b, #w-node-_3e21a912-366b-e534-a407-6b0d38f8bfe5-d885653b, #w-node-_3e21a912-366b-e534-a407-6b0d38f8bfed-d885653b, #w-node-_3e21a912-366b-e534-a407-6b0d38f8bff5-d885653b {
    grid-column: span 3 / span 3;
  }

  #w-node-_3e21a912-366b-e534-a407-6b0d38f8bffd-d885653b {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }

  #w-node-_3e21a912-366b-e534-a407-6b0d38f8bffe-d885653b, #w-node-_3e21a912-366b-e534-a407-6b0d38f8c006-d885653b, #w-node-_3e21a912-366b-e534-a407-6b0d38f8c00e-d885653b {
    grid-column: span 3 / span 3;
  }

  #w-node-_9a03eb9f-a7bb-c796-9726-85e3c6e191b1-be82609b, #w-node-f0f2885c-50dc-8b29-a091-c5a07b9f74e3-be82609b, #w-node-_54857f59-ba7e-9a6d-418f-d2dc19b1dbee-be82609b, #w-node-bf977949-d112-1e1d-93e5-298beb7534d0-be82609b, #w-node-_45d4e431-c866-b000-c358-10ac5b6ea998-be82609b, #w-node-_20e30225-c101-c38f-7ae2-682a4a079573-be82609b, #w-node-b15c315a-091e-6934-9b5f-745335ae1e61-be82609b, #w-node-_15b2b400-3d95-7065-6388-40bc1e65f962-be82609b, #w-node-_3ef0292a-238b-301e-dfd4-d7ddc8a164cd-be82609b, #w-node-b3700ac3-aca3-21f8-f1c7-39531e9a6a49-be82609b, #w-node-e6eb6ce1-8006-c1a7-3a1b-e12b2de96d03-be82609b, #w-node-c20f4bfd-071d-fac8-319a-0542bcc4e5e2-be82609b, #w-node-_976be67f-1c32-90b7-c724-f40b4bb9900b-be82609b, #w-node-_9a03eb9f-a7bb-c796-9726-85e3c6e191a7-be82609b, #w-node-_9a03eb9f-a7bb-c796-9726-85e3c6e191ac-be82609b, #w-node-f6d038ad-e5cb-0e11-ee90-79f70b74eed5-be82609b, #w-node-_18e43155-5d03-f349-7dfc-4d5b073def66-be82609b, #w-node-_4006271d-d8bd-d9bb-b812-0263b874558e-be82609b, #w-node-_714d8750-c4f9-7830-7517-873e370ff202-be82609b, #w-node-_9b550e7c-7ddb-ca90-f7b4-809c2517997f-be82609b, #w-node-_4e1ccc42-ca5b-37d1-038b-e3c57e5b2fd5-be82609b, #w-node-_38d4fcfa-eb70-fbe2-8202-28220c1de4bf-be82609b, #w-node-_08963fd5-b5a6-6447-0e0b-00e7962aaf2d-be82609b, #w-node-d3f24a93-be5c-20c8-2fc8-a9464004eed3-be82609b, #w-node-cef699ba-675e-653b-e972-22f243456c26-be82609b, #w-node-_261a04d6-4534-3a25-90c7-95839e583139-be82609b, #w-node-df01d182-185f-71b5-5a81-8ce0b38348d5-be82609b, #w-node-c18ea743-d677-b4ed-e2d9-df4a366506c4-be82609b {
    grid-row: span 1 / span 1;
  }
}

/* Local additions below — not part of the original Webflow export */

.the-width-400vh-scrollable-div {
  will-change: transform;
  transition: transform 0.2s linear;
}

.w-webflow-badge {
  display: none !important;
}

/* Native :hover is superseded by .js-hover below (JS is the single source
   of truth so scroll- and mouse-triggered zoom can never disagree). These
   two rule sets have equal specificity (two classes each), so .js-hover
   MUST come after in source order to win whenever both are simultaneously
   true — which happens on every normal real-mouse hover, since native
   :hover fires a frame before our rAF-driven .js-hover catches up. */
.gallery-image-2:hover {
  filter: grayscale(30%);
  transform: none;
}

.gallery-image-wide:hover {
  filter: grayscale(30%);
  transform: none;
}

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

.gallery-image-2.js-hover {
  filter: grayscale(0%);
  transform: scale(1.02);
}

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

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

/* Webflow's .active states for the "Чому ми?" timeline dots layer a
   colorful gradient background-image on top of the black background-color,
   so the dot renders as a rainbow, not solid black. Same rule, positioned
   after Webflow's own so it wins the cascade tie — just strips the image,
   the black background-color underneath already does the rest. */
.process-dot.active {
  background-image: none;
}

.process-dot-inner.active {
  background-image: none;
}

.process-dot-dot.active {
  background-image: none;
}

/* Mobile hamburger icon: replaced Webflow's Lottie-rendered icon (loaded
   async from a JSON file, data-autoplay:0 relying on IX2 to set its
   initial frame) with a plain CSS icon. On some real devices the Lottie
   SVG never visibly renders even though the button itself is present and
   still opens the menu correctly (couldn't reproduce the exact failure
   locally, but a dependency-free icon can't have this failure mode at
   all). Toggled via the same .w--open class Webflow's own nav JS already
   adds/removes on open/close — no interaction logic touched. */
.lottie-animation-2 {
  display: none !important;
}

.css-hamburger-icon {
  width: 26px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  flex: none;
}

.css-hamburger-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
  border-radius: 2px;
  transition: top 0.25s ease, transform 0.25s ease, opacity 0.2s ease;
}

.css-hamburger-icon span:nth-child(1) {
  top: 0;
}

.css-hamburger-icon span:nth-child(2) {
  top: 9px;
}

.css-hamburger-icon span:nth-child(3) {
  top: 18px;
}

.w-nav-button.w--open .css-hamburger-icon span:nth-child(1) {
  top: 9px;
  transform: rotate(45deg);
}

.w-nav-button.w--open .css-hamburger-icon span:nth-child(2) {
  opacity: 0;
}

.w-nav-button.w--open .css-hamburger-icon span:nth-child(3) {
  top: 9px;
  transform: rotate(-45deg);
}

/* At the ≤479px breakpoint, Webflow set .gallery-grid to
   align-items:center in flex-direction:column mode instead of the default
   stretch. Its <a> children have no width of their own (no text content,
   only class="w-inline-block" — the id-based link-block-16 class exists on
   just the first one, not a reliable selector), so with stretch disabled
   they collapse to 0 width and every gallery photo disappears. Restoring
   full width on the flex children is the minimal fix — doesn't touch
   Webflow's align-items declaration in case it's relied on elsewhere. */
@media screen and (max-width: 479px) {
  .gallery-showcase-grid > a {
    width: 100%;
  }
}

/* At ≤479px, .hero-copy-column (hero heading/subtitle/button wrapper) is
   position:absolute with a fixed width narrower than the viewport and no
   centering of its own — it sits flush against the left edge, so its
   text-align:center children end up centered within an off-center box
   instead of the actual screen. Re-centers the box itself; every child
   already uses position:static so none of them depend on this box's own
   left offset. Also widens it — at its original ~230px width "DAV
   CONSTRUCTIVE" (shortened from the original two-line Webflow heading,
   which this width was sized for) wraps to two lines; 90% comfortably
   fits it on one. */
@media screen and (max-width: 479px) {
  .hero-copy-column {
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
  }
}

/* about.html hero: .image-39 is a deliberately oversized/scaled photo (the
   same kind of intentional parallax bleed used elsewhere on the site), but
   unlike those, none of its ancestors clip the overflow — it was pushing
   the whole page's scrollWidth past the viewport, causing real horizontal
   scroll on every phone. Contains it at the source instead of guessing
   which breakpoint needs it; clipping a deliberately-oversized decorative
   image can't make it look wrong. */
.div-block-36 {
  overflow: hidden;
}

/* .navbar is position:fixed with width:100% — for fixed elements, % width
   resolves against the viewport (window.innerWidth), not against <body>.
   On real phones (and this dev tool) those two differ by the scrollbar
   gutter / viewport calculation, so the navbar rendered ~18px wider than
   the actual visible page — pushing the hamburger button that same 18px
   past the right edge while the phone icon on the left stayed flush,
   breaking their matching margins. Pinning both edges instead of relying
   on a percentage width is the standard, robust fix — resolves correctly
   regardless of any viewport/body width discrepancy. */
.navbar {
  left: 0;
  right: 0;
  width: auto;
}

/* .process-item-desc's hardcoded 200px width at ≤479px runs ~7px past the
   card's own overflow:hidden boundary, clipping the last sliver of the
   longest description lines. A fixed px width only accounted for one
   test width (375px) and still clipped on narrower phones like the
   360px Galaxy S8+ — using calc(100vw - Npx) instead scales with the
   actual viewport so it stays safely inside the card at any width,
   rather than needing a fresh guess per device. */
@media screen and (max-width: 479px) {
  .process-item-desc,
  .process-item-desc.size-copy,
  .process-item-desc.size-copy.tab-sizeprogress-copy {
    width: calc(100vw - 195px);
  }
}

/* about.html contact CTA: at ≤479px .contact-right-content-wrap switches
   to width:auto (shrink-to-fit its content) instead of a definite width.
   margin:auto (inherited from the 767px rule) doesn't reliably center a
   shrink-to-fit flex item, so it renders wider than its own parent
   (.contact-row) and overflows to the right — 32px gap on the left, only
   ~5px on the right, plus the contact form itself runs noticeably
   off-center. Giving it a definite 100% width makes it fill its parent
   properly, so the existing centering behaves as intended. */
@media screen and (max-width: 479px) {
  .contact-right-content-wrap {
    width: 100%;
  }
}

/* Same shrink-to-fit-vs-centered problem one level deeper: fixing the wrap
   above still left its own child, .contact-right-from-wrap (the actual
   form), auto-sized and centered by the same flex row — it rendered 338px
   inside its now-296px parent, 21px overflow on both sides. Chasing the
   bug down to its own child rather than assuming one fix covers the whole
   card. Same fix, same reason: a definite width instead of shrink-to-fit. */
@media screen and (max-width: 479px) {
  .contact-right-from-wrap {
    width: 100%;
  }
}

/* One more level down still: the submit button's value text ("ДОЛУЧИТИСЬ
   ДО КОМАНДИ") can't wrap — form controls render their value as a single
   unbreakable line — so with the base rule's 40px side padding it forces
   a ~302px box regardless of the button's container, 42px wider than the
   260px the card actually has at ≤479px, sticking out past the card's
   right edge. A definite 100% width plus smaller side padding gives the
   text enough room inside the card instead of pushing past it. */
@media screen and (max-width: 479px) {
  .submit-button-5 {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* index.html final CTA ("zakluk") background block: hardcoded to
   width:393px at ≤479px — the exact width of the device the designer was
   previewing on (iPhone 14/15 Pro) instead of a relative unit. Harmless at
   393px and wider, but on any narrower phone (e.g. the 360px Galaxy S8+)
   it pushes 33px past the section's edge and creates real page-level
   horizontal scroll. width:100% fills the section at any width instead. */
@media screen and (max-width: 479px) {
  .process-visual-wrap {
    width: 100%;
  }
}

/* Same "hardcoded to the designer's own preview width" bug, one breakpoint
   up: at the 767px (tablet) breakpoint, .contact-row itself is pinned to
   width:603px — presumably exactly what it measured on whatever tablet
   canvas it was styled on. Fine at 603px+ but on a narrower tablet/
   foldable (tested at 550px) it overflows its own parent (.div-block-47,
   486px there) by 117px, dragging both stacked children (the info column
   and the form column, both width:100% of this row) out along with it.
   Scoped to exactly the 480–767px gap so it can't touch the ≤479px rule
   above (which already correctly resets this to width:auto). */
@media screen and (min-width: 480px) and (max-width: 767px) {
  .contact-row {
    width: 100%;
  }
}

/* .contact-row's own sibling child carries the identical bug independently
   at this same breakpoint: width:603px with margin:auto — the auto margin
   can't center a fixed-width box that's wider than its parent, so it
   overflows to the right (0 left / 117px right at 550px), same shape as
   the ≤479px .contact-right-content-wrap bug fixed above, just one
   breakpoint over. Its sibling .contact-left-content-wrap already uses
   width:100% here — bringing this one in line with it. */
@media screen and (min-width: 480px) and (max-width: 767px) {
  .contact-right-content-wrap {
    width: 100%;
  }
}

/* index.html hero: .hero-title.hero-title-text ("DAV CONSTRUCTIVE") is
   hardcoded to width:700px from the base (desktop) rule. Nothing between
   the base rule and ≤479px ever narrows it — the ≤991px and ≤767px rules
   only adjust margins — so across the whole 480–767px tablet gap it holds
   at a fixed 700px and (with this section's 8px left margin at ≤767px)
   overflows any viewport under 708px, e.g. 158px past the edge at 550px.
   ≤479px already sidesteps this by swapping in a different, narrower
   heading entirely; this range needs its own fix. A calc() width scales
   with the viewport instead of assuming one fixed tablet size, and the
   text wraps cleanly to "DAV" / "CONSTRUCTIVE" on two lines — matching
   the two-line logo in the navbar — rather than clipping or scrolling. */
@media screen and (min-width: 480px) and (max-width: 767px) {
  .hero-title.hero-title-text {
    width: calc(100vw - 48px);
  }
}

/* contact.html hero paragraph: same story again, third time this exact
   shape of bug turns up. Base rule hardcodes width:539.297px; the only
   override is at ≤479px (width:auto), so 480–767px is left holding the
   fixed value — 21px overflow at 550px (32px left margin + 539px width vs
   a 550px viewport). Ordinary wrapping text, so width:100% is enough on
   its own here (no calc() needed like the unbreakable heading/button
   cases above) — confirmed the paragraph still reads as a normal
   3-line block, not unnaturally narrow. */
@media screen and (min-width: 480px) and (max-width: 767px) {
  .paragraph.contact-change {
    width: 100%;
  }
}

/* index.html service-card contact modals (all 4 — .modal-wrapper.opt/gen/
   efect/flex-4 share this same class, see HANDOFF.md §7 for how they're
   opened/matched): the popup's own backdrop box is hardcoded to
   width:350px at ≤479px. Invisible down to 350px, but the narrowest real
   phones (320px, e.g. Galaxy Fold/older iPhone SE) are narrower than
   that — the box (and, since it's positioned via right:0 off this same
   box, the × close button with it) sits 30px past the right edge,
   putting the close button off-screen. width:100% keeps it filling
   exactly whatever the modal's own space is, close button included, at
   any width from 320px up — confirmed no overflow and the close button
   back in the visible top-right corner at 320px.

   Follow-up (§101): user asked for a 10px margin from the screen edges
   instead of flush-edge-to-edge. The base rule already sets both
   `left:0` and `right:0` (confirmed via getComputedStyle, not just the
   `inset` shorthand) — with left, right, AND a definite width all
   specified on an absolutely positioned box, the spec has `right` win
   out and get silently ignored/recomputed from the other three, so
   simply changing `width` to `calc(100% - 20px)` here would have kept
   `left:0` and shifted the whole 20px gap onto the right side only, not
   split evenly. Setting `left:10px; right:10px` and letting `width` go
   back to `auto` sidesteps that entirely — with both offsets pinned and
   width auto, the browser computes the box's width as whatever's left
   between them, which is symmetric by construction. */
@media screen and (max-width: 479px) {
  .service-modal-panel.back-blur.model-size1 {
    width: auto;
    left: 10px;
    right: 10px;
  }
}

/* index.html "Чому ми?" process timeline (.process-main-2): each
   .process-item is its own independent CSS Grid (grid-template-columns:
   1fr minmax(10rem,.35fr) 1fr), and the two 1fr side columns size off
   that row's own content — different description-text lengths per row,
   plus which side (icon vs. text) lands in column 1 flipping by row via
   .process-item-block.align-right{order:9999}. Result: the "1fr" columns
   compute to different actual pixel widths row-to-row, so the center
   column (and the .process-dot inside it) lands at a different absolute
   X per row instead of sitting on one straight line — confirmed via
   getComputedStyle: grid-template-columns alternated between
   "250px 160px 201.203px" and "201.203px 160px 250px" row-to-row at
   768px. Webflow's own fix for this — abandon grid-based centering for
   .process-item-center, switch to position:absolute pinned to a fixed
   inset from the row's own left edge — already exists, but only at
   ≤767px (same tablet-gap shape as the fixes above: the real target
   device, iPad Mini, is exactly 768px and falls just outside it). Copied
   verbatim rather than reduced to the minimum diff — tried a smaller
   version (just .process-item-center's own position:absolute, leaving
   .process-item as display:grid) first, but removing the center dot
   from grid flow without also removing the *row* from grid collapses
   the two remaining grid children together, losing the gap the center
   column used to reserve. The ≤767px flex-based layout doesn't have
   that problem, so this is that same block, unmodified, widened to
   768–991px.

   Separately, .process-line-ray-2 (the thin decorative vertical line
   that visually threads through all 5 dots, one per .process-main-2,
   not per-row) is its OWN element, absolutely positioned via
   inset:0%+margin:auto — i.e. centered at 50% of .process-main-2's
   width, not tied to the grid/flex dot column at all. First pass at
   this fix only copied the .process-item* rules above and missed it,
   so the line stayed pinned at dead-center (x=384 at 768px) while the
   now-correctly-aligned dots sat in their flex position near the left
   (~x=160) — a straight line cutting through the middle of the text
   content instead of running through the dots. Webflow's own ≤767px
   block repositions this line too (margin-left: calc(2.5rem + 2px),
   overriding the auto-centering with a fixed left offset matching
   .process-item's own padding-left:5rem) — copied that rule in as
   well. .process-line-3 (the colored progress-fill line drawn on top)
   needs no rule of its own: it's a plain flex child of
   .process-line-ray-2 with no position of its own, so it follows
   automatically wherever its parent moves. Verified live at 768px:
   line and all 5 dots now sit on the same X.

   Third pass, same day: user reported description text and icon/number
   placement still inconsistent row-to-row. Root cause was the same
   "missed a sibling selector" shape as the .process-line-ray-2 miss
   above, just with more siblings at once — cross-checked this time by
   reading the *entire* ≤767px block for every .process-item* selector
   (not just the ones already known to be broken) and diffing against
   the live DOM's actual class list (via
   [...document.querySelectorAll('.process-main-2 *')] and collecting
   .classList), rather than fixing one reported symptom at a time.
   Found and copied in the remaining gaps: .process-item-desc's
   .size-copy/.tab-sizeprogress-copy variants (used on alternating rows
   whose content is the .align-right/order:9999 side) are right-aligned
   in the base desktop rule — makes sense there, text hugging the
   center dot column in a two-column layout — but Webflow's own ≤767px
   block flips it to text-align:left, since in a single-column stacked
   layout right-aligned text reads as randomly-indented rather than
   deliberate. Also copied ≤767px's .process-item-icon-frame sizing,
   .process-item-title font-size, .process-item-desc's own font-size,
   and — the fix for "numbers in different places" — .process-item-number
   {display:none}: Webflow's mobile answer to the number label's position
   flipping between before/after the icon per row (same .align-right
   swap that affects the dot) isn't to make the order consistent, it's
   to hide the number at this width entirely. Confirmed via the DOM
   diff that nothing else in .process-main-2's live class list
   (.process-dot/-dot/-inner, .process-item-number-wrap,
   .process-line-hide-top/bottom) has any ≤767px override left
   unapplied. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .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;
    display: flex;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .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-content {
    grid-column-gap: .25rem;
    grid-row-gap: .25rem;
    text-align: left;
    justify-content: center;
  }

  .process-line-ray-2 {
    margin-left: calc(2.5rem + 3.5px);
  }

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

  .process-item-desc.size-copy.tab-sizeprogress-copy, .process-item-desc.size-copy {
    text-align: left;
  }

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

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

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

/* about.html "career" section (id="career"): the "Круті проекти не
   робляться на одинці" heading (.contact-t) was a fairly bright, saturated
   yellow (#f4c542). First attempt swapped it for #d4af37 ("metallic gold")
   — too muted/dull once seen live, user asked for brighter; landed on
   #ffc72c (amber-gold). User later gave an exact hex directly: #FFD600
   (a pure, saturated yellow) — current value, no more iterating on this
   unless asked again. Only property touched. */
.contact-t {
  color: #FFD600;
}

/* Navbar + footer nav links ("Головна"/"Проекти"/"Про Нас"/"Контакти"):
   underline on hover, requested directly. Navbar's 4 links each have their
   own Webflow-generated class (.link, .link-block-9/10/11 — same 4 classes
   on every page, confirmed via grep) wrapping .link-box > .link-text, with
   no underline element built in, so this adds a plain text-decoration on
   the inner .link-text on hover of the parent link.
   Footer's 4 links share one class (.link-block) and already carry a
   built-in .link-underline bar div per link — but its own :hover rule
   targets the 1.5px bar itself (near-impossible to actually hover) and its
   transform stays translate(-100%) in both states, so it's permanently
   off-screen regardless — a pre-existing broken/incomplete Webflow
   interaction export, left as-is per project convention (never edit
   Webflow's original rules). Simplest correct fix: same text-decoration
   approach as the navbar, targeting the 4 footer text-block classes
   (text-block-17/18/19/20, confirmed identical across pages) under
   .link-block:hover — matches the navbar treatment instead of trying to
   repair the dormant bar animation. */
.link:hover .link-text,
.link-block-9:hover .link-text,
.link-block-10:hover .link-text,
.link-block-11:hover .link-text,
.link-block:hover .text-block-17,
.link-block:hover .text-block-18,
.link-block:hover .text-block-19,
.link-block:hover .text-block-20 {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* contact.html: user asked to remove the background photo entirely and
   keep the section plain white at every width, not just below 1440px
   where it already rendered white by default (transparent, falling
   through to the page's own white canvas). .contact's only background
   rule in the whole stylesheet is scoped to min-width:1440px
   (background-image: linear-gradient(#fffc,#fffc), url(...blueprint
   watermark...)) — overridden here unconditionally so it's gone at every
   width (confirmed .contact is used only on this one page, via grep, so
   no page-scoping needed).
   Follow-up: background-color was originally an explicit #fff (not left
   transparent) so this didn't depend on the browser's blank-canvas
   default — but that made it opaque, which turned out to fully cover
   body's own background (this element spans the entire page height, so
   nothing of body's background was ever visible on this page). Once the
   later sitewide body-texture rule was added, .contact silently blocked
   it here specifically. Switched to transparent now that there's
   something on body worth showing through — background-image:none above
   still unconditionally keeps the watermark gone regardless of color,
   so this doesn't reopen that original fix. */
.contact {
  background-image: none;
  background-color: transparent;
}

/* Mobile hamburger dropdown (.nav-menu-copy — same class also serves as the
   plain horizontal desktop nav, display:flex with no background there, so
   this fix is scoped to ≤991px where it becomes the full-width dropdown
   panel): three separate breakpoint rules (≤991px, ≤767px, ≤479px) each
   painted it solid opaque white — two via background-color:#fff, the
   ≤479px one via background-color:#fff0 (transparent) layered under an
   opaque background-image:linear-gradient(#fff,#fff), same net solid-white
   result. User wants it to match the real navbar's (.navbar) own look
   exactly: background-color:#fff9 (~60%-opacity white) + backdrop-filter,
   matching .navbar's own blur value at each breakpoint —
   blur(5px) here, dropping to blur(4px) alongside .navbar's own ≤479px
   rule (see that rule elsewhere in this file).

   Getting blur to render here at all (as opposed to matching a specific
   value) took multiple rounds of misdiagnosis — worth knowing before
   touching this again. Every hero photo on this site is put through a
   GSAP/ScrollTrigger scroll-linked zoom, and TWO separate things about
   that zoom each independently break backdrop-filter's ability to sample
   through the photo in this environment: (1) `will-change: transform`,
   which GSAP sets only while the photo is actively mid-tween, and (2) the
   scale `transform` itself (e.g. `matrix(1.07,0,0,1.07,0,0)`), which
   stays applied at whatever value the tween last reached even after
   GSAP clears will-change once it settles. Both were independently
   confirmed sufficient on their own to fully break the blur — an earlier
   round tested with will-change removed at a moment the transform hadn't
   reached a large value yet and wrongly concluded transform didn't
   matter; it does. Neither is fixable from CSS alone (every page uses a
   different, uniquely Webflow-generated class for its own hero photo) —
   js/menu-blur-fix.js scans for both while the dropdown is open, on
   whatever currently overlaps it on screen, and restores everything the
   instant the dropdown closes, so normal scroll performance and the zoom
   effect itself are unaffected the rest of the time. See that file's own
   comment for the full detail. With that in place, one value per
   breakpoint (matching .navbar's own) is safe across the entire ≤991px
   range — no width tiering needed. */
@media screen and (max-width: 991px) {
  .nav-menu-copy {
    background-color: #fff9;
    background-image: none;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }
}

@media screen and (max-width: 479px) {
  .nav-menu-copy {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
}

/* Home page "Про DAV" heading above this text was removed entirely (user
   request), making .bold-text-21 ("Одна команда. Один проект. Жодного «це
   не наш розділ»") the top element of this block instead of a secondary
   line under a 64px heading. Sized it up from the original 24px
   (--stellar-site---padding--pd-06) to 32px
   (--stellar-site---padding--pd-07) so it reads as its own lead-in
   statement rather than looking small relative to the 18px body copy
   below it. pd-07 isn't a new value invented for this — it's the same
   token already used for .contact-t's accent heading elsewhere on the
   site. .bold-text-21 is only ever used in this one place (confirmed via
   grep across all pages), so this can't affect anything else. */
.bold-text-21 {
  font-size: var(--stellar-site---padding--pd-07);
}

/* This same hero-text block: user wants the gap above the text (image
   bottom -> "Одна команда...") to visually match the gap below it (last
   line -> next section), instead of the bottom reading as noticeably
   bigger. The bottom gap is .hero-wrapper's own padding-bottom (a *fluid*
   clamp(2rem,5vw,5rem) at base/tablet, flat 0 at <=479px in Webflow's
   original). The top gap looks like it's simply .hero-text-bottom-wrapper-2's
   margin-top (4rem stepping down to 3rem at <=479px) but it isn't only
   that: .hero-wrapper has no padding-top/border-top, so that child margin
   COLLAPSES with .hero-wrapper's own margin-top — which Webflow sets to
   0 at base, -2rem at <=991px, and +3rem at <=479px. Collapsing two
   margins together takes the largest positive minus the largest negative,
   not a simple sum, so the *effective* top gap per tier is: base
   max(0,64)=64px; <=991px down to 480px, 64+(-32)=32px (confirmed live —
   this is not the same as the child's own raw 64px margin-top, which is
   what a first pass at this fix wrongly assumed); <=479px
   max(48,48)=48px. Matched .hero-wrapper's padding-bottom to those three
   effective values so top and bottom stay equal at every width, not just
   the one (~1280px) where the original fluid clamp() happened to
   coincide with the unadjusted child margin. (The last paragraph's own
   trailing margin-bottom is zeroed separately, inline on that specific
   element — see index.html — so it doesn't add on top of this.) */
.hero-wrapper {
  padding-bottom: 6rem;
}

@media screen and (max-width: 991px) {
  .hero-wrapper {
    padding-bottom: 2rem;
  }
}

/* Desktop-only bump to 6rem (user request) — top gap needs the matching
   change on .hero-text-bottom-wrapper-2's own margin-top (Webflow's
   original base value, 4rem, untouched until now), scoped to
   min-width:992px specifically so tablet (480-991px, which inherits this
   same base value unless overridden — its own effective gap is handled
   separately via .hero-wrapper's ≤991px padding-bottom above) and mobile
   (≤479px, which already has its own Webflow-authored 3rem override)
   aren't affected by a desktop-only change. */
@media screen and (min-width: 992px) {
  .hero-text-bottom-wrapper-2 {
    margin-top: 6rem;
  }
}

@media screen and (max-width: 479px) {
  .hero-wrapper {
    padding-bottom: 3rem;
  }
}

/* Same fix as above, missing piece: matching .hero-wrapper's own
   padding-bottom to the top gap wasn't the whole story — the *next*
   section, .services-section ("Послуги"), has its own separate
   margin-top:4rem (64px, flat at every breakpoint, confirmed no
   ≤991/≤767 variant exists for it) stacking on top of that padding, with
   nothing equivalent added to the top side. That's the extra 64px that
   was still making the bottom read as bigger even after the previous
   fix. .services-section is used exactly once, only on this page (confirmed
   via grep), so zeroing its margin-top entirely and letting
   .hero-wrapper's own (already-correct, per-breakpoint) padding-bottom
   be the sole source of bottom spacing is safe and exact — no separate
   breakpoint handling needed here since the 4rem being removed was flat
   across all of them to begin with. */
.services-section {
  margin-top: 0;
}

/* Same fix, one more layer down: even with .services-section's own margin-top
   zeroed above, 480-991px width still showed an extra, unaccounted
   32px gap that didn't correspond to any margin/padding on .services-section
   or .background-color-wrapper-3 (the gray "Послуги" band) themselves —
   both genuinely compute to 0 there. Root cause: two levels deeper,
   .services-container.w-container (centers this section's actual content) has
   its own margin-top:2rem at exactly this breakpoint range only (margin-
   top is 0/auto at every other breakpoint, which is why 1280px and
   390px both tested clean and only the 480-991px range didn't). Neither
   .services-section nor .background-color-wrapper-3 has any padding-top or
   border-top to contain that margin, so it collapses all the way out
   past both of their own top edges — invisible extra whitespace that
   doesn't belong to anything one would think to check first.
   display:flow-root on the gray band establishes a new block formatting
   context, which contains the collapse completely (the 2rem becomes
   real internal spacing between the band's own top edge and its
   content, where it visually belongs) without adding any extra height
   of its own — cleaner than a padding-top hack for this exact problem. */
.background-color-wrapper-3 {
  display: flow-root;
}

/* Full-page audit (user request, then narrowed): the gap between each of
   the five main content sections on index.html — .projects-section ("Проекти"),
   .gallery-section ("Галерея"), .the-height-400vh-section ("Партнери"),
   .why-us-section ("Чому ми?"), .process-size ("Як це працює?"), in that DOM
   order, with .zakluk as an unlabeled connector div directly between the
   last two — should read as 6rem, matching what §28 established for the
   hero-text block. Deliberately scoped to *only* these five sections'
   own boundaries, not anything before .projects-section or after .process-size,
   and not anything inside any of them — an earlier pass here also
   touched .services-section/.scroll-wrapper-2 (the "Послуги" section, before
   "Проекти") on the assumption that "every section gap" meant the whole
   page; corrected after the user clarified the request was specifically
   about the five sections shown, nothing else. Every fix scoped to
   min-width:992px (desktop) only — mobile/tablet have their own,
   untouched responsive spacing, and a flat 6rem gap would look
   disproportionate on a narrow screen anyway, same reasoning as the
   hero-text block's own smaller values below 992px.
   .projects-section/.gallery-section/.process-size each just had a single plain
   margin-top (8rem, 8rem, 4rem respectively) with no desktop-tier
   override to conflict with; .zakluk had no rule at all at this
   breakpoint. .the-height-400vh-section (a scroll-pin container — fixed
   150vh height, position:relative, holds a position:sticky child) also
   just needed a plain margin-top added.

   The .the-height-400vh-section -> .why-us-section boundary needed a
   different approach: that container's *own* trailing margin-bottom is
   a separate, pre-existing negative value (-4rem) that does not behave
   like an ordinary collapsed margin against .why-us-section's margin-top —
   empirically (binary-searched live, since the numbers didn't match
   standard collapse math and weren't worth fully reverse-engineering):
   raising .why-us-section's margin-top from 0 up to 128px changes the
   rendered gap *not at all* (stays 64px flat), then from ~130px upward
   it responds 1:1. 160px (10rem) is the value that lands the actual
   gap at exactly 96px — not a "6rem+dead-zone" derivation, just the
   verified number. If this section's internal structure changes later
   and this stops producing 96px, re-verify empirically the same way
   rather than assuming the dead-zone size is still 128px. */
@media screen and (min-width: 992px) {
  .projects-section {
    margin-top: 6rem;
  }

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

  .process-size {
    margin-top: 6rem;
  }

  .zakluk {
    margin-top: 6rem;
  }

  .the-height-400vh-section {
    margin-top: 6rem;
  }

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

/* "Партнери" logo marquee (inside .the-height-400vh-section's sticky
   pin): the gap between the "Партнери" subtitle and the visible logo
   row, and the gap on the *other* side of the row before the sticky
   content ends, are two ends of one fixed budget — .the-overflow-
   hidden-mask has height:100% (auto-fills whatever's left of
   .the-sticky-div's 100vh after .heading-wrap.partner-head's own
   height), so mask_height - block_height (~492px at typical heights)
   has to be split between "before" and "after" the row somehow.

   Two earlier attempts pushed the row up toward the heading
   (align-items:flex-end + a large margin-bottom, first a flat px value
   — wrong, since the mask's leftover space scales with *viewport
   height* via the 100vh chain, not just width like everything else on
   this page — then a calc(100vh - 472px) formula that correctly held
   ~64px at every height tested). Both were reasonable answers to "logos
   closer to the heading" taken literally, but pushing nearly all the
   dead space to the *lower* side of the row had a side effect neither
   attempt accounted for: during a real (not JS-jumped) scroll past the
   point where .the-sticky-div releases, that large lower dead zone
   momentarily coexists on screen with .why-us-section ("Чому ми?") already
   scrolling into view, reproducible via genuine scroll input — looks
   exactly like a broken, oversized gap even though every static
   measurement of the settled layout was correct.

   Fixed properly this time by asking what "closer to the heading"
   should have meant in the first place: the row centered in its
   available band, not shoved against one edge. Switched
   .partners-marquee-track's align-items from flex-end to center —
   splits the ~492px budget evenly (~246px each side) instead of
   assigning nearly all of it to one side. Still needed one more piece:
   align-items centers an item's *margin box*, not its content box, and
   .a-block/.partner-logo-block's original margin-bottom:15% (the same rule
   from the very first version of this fix, ~270px in this layout) was
   still there, so centering the margin box just re-skewed the split
   almost exactly like the old flex-end result (measured 91px/381px,
   not the expected ~246px/246px). Zeroed margin-bottom alongside the
   align-items change — margin-left/margin-right (the horizontal
   spacing between logos in the marquee) are untouched. This also
   shrinks the lower dead zone from ~430-530px down to ~246px, which
   directly narrows the window where the release-transition overlap
   from above can happen. */
@media screen and (min-width: 992px) {
  .partners-marquee-track {
    align-items: center;
  }

  .a-block,
  .partner-logo-block {
    margin-bottom: 0;
  }
}

/* "Чому ми?" (.why-us-section) subtitle -> first stats card: user wanted
   ~4rem, was ~160px (10rem). .process-layout (the flex column holding
   the heading, an empty spacer div, and the stats cards) has
   row-gap:5rem applied uniformly between its 3 children. The middle
   child, .process-main, is a 0-height positioning anchor for an
   absolutely-positioned decorative line (.process-line-ray) — it
   contributes no visible content, so the perceived gap is exactly
   2x the row-gap (160px), not something separately settable. Halving
   row-gap to 2rem lands the perceived total at exactly 64px (2x2rem)
   without touching .process-main itself (which would risk breaking
   the decorative line's positioning anchor). .process-layout is used
   exactly once on this page. */
@media screen and (min-width: 992px) {
  .process-layout {
    row-gap: 2rem;
  }
}

/* Gap above "Партнери" itself, distinct from the gallery-section -> .the-
   height-400vh-section gap fixed earlier (§29): that external gap only
   exists *before* .the-sticky-div engages — once scrolled far enough
   that it pins to the viewport top, the space between the top of the
   screen and the "Партнери" heading is governed entirely by
   .heading-wrap.partner-head's own margin-top (8rem, unrelated to the
   external gap), which is what a screenshot taken once the pin has
   engaged actually shows. Reduced to 6rem to match the same convention
   used everywhere else on this page. .heading-wrap.partner-head is
   used exactly once on this page. */
@media screen and (min-width: 992px) {
  .heading-wrap.partner-head {
    margin-top: 6rem;
  }
}

/* "Zakluk" hero building photo (.cta-building-image.color): object-fit:cover (set
   elsewhere in this file) crops this image to fill .process-visual-wrap's box.
   Default object-position (50% 50%, centered) crops evenly off both
   sides — with this specific source photo, since the building's own
   content already runs close to both edges of the file, an even crop
   still left a thin sliver of empty margin before the building reached
   the container's right edge. Anchored object-position to the right
   instead, so cover crops only from the left (into the trees, which
   have more forgiving empty space around them) and the building's own
   right edge lines up exactly with the container's right edge, per
   request. .cta-building-image is used exactly once on this page. */
.cta-building-image.color {
  object-position: 100% 50%;
}

/* Sitewide (user request): plain white body areas felt flat, wanted a
   subtle texture that "adds volume" without being noticeable. The actual
   <body> tag carries Webflow's own `.body` class (not a bare `body`
   element), which already declares its own background-image (a
   translucent white wash over a repeating banner photo, original rule
   ~line 2434) — a class selector beats a plain `body` element selector
   on specificity, so a bare `body{background-image:...}` rule here is
   silently ignored no matter where it sits in source order. Re-declaring
   `.body` here (same specificity, later in source order -> wins)
   layers a fine straight-line grid ON TOP of the existing background
   instead of fighting it: two repeating-linear-gradients, one per axis,
   each a 1px near-invisible line every 80px, listed first (background
   layers paint first-on-top) so the grid sits above the original wash+
   photo. Kept deliberately faint (~5% black) and generously spaced (80px,
   not a dense graph-paper grid) so it reads as quiet structure/depth at
   a glance rather than a visible pattern — matches the architectural/
   blueprint language already established for the preloader (HANDOFF.md
   §18) without competing with it. background-position/-repeat/-size
   restate the original two layers' values unchanged (position/repeat/
   size are independent properties from background-image and don't
   cascade together — without restating them, CSS would cycle the
   original 2-value lists across the new 4 layers, silently forcing the
   image layer's repeat-x/contain onto one of the new grid layers). */
.body {
  background-image:
    repeating-linear-gradient(0deg, #0000 0px, #0000 79px, #0000000d 80px),
    repeating-linear-gradient(90deg, #0000 0px, #0000 79px, #0000000d 80px),
    linear-gradient(#fffc, #fffc),
    url("../images/6a60c33d417e0abd48a7b1db_ChatGPT%20Image%2022%20июл.%202026%20г.,%2016_16_07.webp");
  background-position: 0 0, 0 0, 0 0, 50% 0;
  background-repeat: repeat, repeat, repeat, repeat-x;
  background-size: auto, auto, auto, contain;
}

/* Follow-up (user request): "make the body background on every page" —
   turns out the rule above ONLY ever reached index.html. Checked all 31
   pages' actual <body class="..."> and found SEVEN different values, not
   one shared "body" class as assumed: `body` (index.html only), `body-2`
   (about.html), `five-hotel`, `fomich-town`, `hotels-change` (25 pages —
   the large majority), `le-meandre`, and contact.html's <body> has no
   class at all. None of those six other class names have any rule of
   their own anywhere in this stylesheet (confirmed by grep — zero hits
   each, except .body-2's own unrelated margin/mobile-blur rules, neither
   of which touches background-image) — so nothing there competes for
   specificity the way index.html's own `.body` rule does.
   Deliberately a SEPARATE rule from `.body` above, not a broadened
   selector on it (e.g. `body, .body {...}`) — that rule's declaration
   also carries index.html's own pre-existing wash+banner-photo
   background (kept from before this texture existed), which is specific
   to that page's own Webflow page-background setting and was never meant
   to spread to the other 30 pages. This rule repeats ONLY the two grid
   gradients, via a plain `body` element selector, which reaches every
   page's real <body> tag regardless of its class. On index.html both
   this rule and `.body` above match; `.body` wins on specificity so
   index.html's own combined result (grid+wash+photo) is unchanged. On
   every other page, this is the only rule targeting background-image on
   body, so they get the grid texture alone — which is exactly the
   original intent, since none of them had a wash/photo to begin with.

   Also adding background-color:#fff here, found while chasing a
   follow-up bug report ("контакти" page rendered solid black once
   .contact below stopped covering the whole page). Root cause is a
   second, later Webflow `body{}` rule (~line 2390) that sets
   `background-color: var(--f5f5f7)` — and `--f5f5f7` is declared with
   no value at all (`--f5f5f7: ;`, see the §40 HANDOFF note on the same
   variable elsewhere), so that var() is invalid and the property falls
   back to its initial value, transparent — NOT the pale gray the
   variable name implies. That rule beats line 222's `body{background-
   color:#fff}` on source order (same specificity, comes later), so
   body's real background-color has apparently been transparent on
   every page all along, sitewide, independent of anything this session
   touched — just never visible before because page content or a
   wrapper like .contact happened to be opaque everywhere real users
   would look. This environment's browser also happens to render
   `prefers-color-scheme:dark`, which is what turned "transparent" into
   visible black instead of a real browser's usual white canvas. Fixing
   here (same selector as the texture rule above, later than the buggy
   line-2390 one) rather than editing the Webflow original in place. */
body {
  background-color: #fff;
  background-image:
    repeating-linear-gradient(0deg, #0000 0px, #0000 79px, #0000000d 80px),
    repeating-linear-gradient(90deg, #0000 0px, #0000 79px, #0000000d 80px);
}

/* Follow-up (user request): the "Чому ми?" section and the partner-logos
   marquee both sat on their own opaque white background-color, fully
   hiding the .body texture above instead of letting it show through like
   the rest of the page. Three selectors were the actual opaque layers
   (checked live via getComputedStyle, not guessed from source — Webflow's
   own .the-height-400vh-section/.the-sticky-div/.the-overflow-hidden-mask
   and .a-block/.partner-logo-block were already transparent, so left alone):
   .why-us-section is process-section's own wrapper ("Чому ми?"); the marquee
   needed two separate layers cleared (.the-width-400vh-scrollable-div,
   the horizontally-scrolling strip itself, and .partners-marquee-track,
   each row's own content wrapper). One unconditional rule here beats every
   viewport, including Webflow's own narrower breakpoint variants of the
   same selectors, since media-scoped rules get no cascade priority over
   an unconditional one at equal specificity — only source order decides,
   and this file loads last. */
.why-us-section,
.the-width-400vh-scrollable-div,
.partners-marquee-track {
  background-color: transparent;
}

/* Mobile top-hero photo, full history (index.html, "фото поганої якості
   на моб версії" → then "розмір фото має бути на весь розмір телефона").
   Three rounds:
   1) Shrunk the photo's box (via its real selector,
      `.parallax.about-photo-copy._1-2` — all three classes together,
      not any one alone, which is what Webflow actually used everywhere
      for this element; a bare `._1-2` silently loses to that 0-3-0
      combo, caught by re-measuring after the first attempt did nothing)
      to cut down a ~2.4x object-fit:cover upscale of the loaded 800x359
      srcset candidate. Fixed the blur, but shrank the hero well below
      "full phone screen" — explicitly rejected, would've looked like
      "half photo half white".
   2) Kept the box small but fixed a knock-on bug that surfaced along
      the way (button pushed out from over the photo, viewport-height-
      fragile svh sizing) — not relevant anymore now that round 3
      reverts the box size, but see HANDOFF.md §45 if this specific
      failure shape (svh box vs. fixed-height overlay content) comes up
      elsewhere.
   3) Real fix: the actual problem was never the box being tall, it was
      that a 359px-tall SOURCE image was being asked to cover a much
      taller box — any photo this size will look soft stretched that
      far, regardless of box height. Traced to the <img>'s own `sizes`
      attribute (`sizes="(max-width:1873px) 100vw, 1873px"`, in
      index.html itself, not this stylesheet) — declares width-only
      need, so the browser's srcset picked a small candidate sized for
      the narrow mobile viewport WIDTH, with no way to know
      object-fit:cover would need much more resolution than that once
      cropped into a tall box. Changed `sizes` to a flat `"1873px"` —
      always loads the full source (1873x840, ~190KB) regardless of
      viewport, which is what actually fixes sharpness. With that in
      place, the box can go back to full height without the blur
      returning: covering even a ~900px-tall box from an 840px-tall
      source is close to 1:1, no meaningful upscale. Height itself
      changed again one round later — see the next comment block below,
      this paragraph only concerns the sizes-attribute/sharpness fix,
      which is still current. */

/* Mobile top-hero text treatment (index.html, user request: try white
   text, arrange it more clearly centered). Scoped to <=479px only —
   desktop wasn't reported as an issue and already reads fine as dark
   text on the lighter part of the photo.
   White needs a legibility aid here: this text sits over the photo's
   lighter sky-gradient area (not the darker building portion further
   down), so plain white-on-light would be low-contrast. Used a soft
   dark text-shadow rather than a background scrim behind the text —
   keeps the photo itself untouched, reads as a natural hero-text
   treatment rather than adding a new visual layer.
   .hero-copy-column's width was computed at 337.5px out of a 375px
   viewport (99% of the space after this element's own margins) —
   already text-align:center underneath, but with so little slack on
   either side, centered and left-aligned were nearly indistinguishable.
   Capping max-width + auto margins gives the centering real, visible
   breathing room instead of just being technically true. */
@media screen and (max-width: 479px) {
  .hero-copy-column {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* The white-text + dark-scrim treatment that briefly lived here (a
   follow-up to the paragraph above, once text-shadow alone stopped being
   enough) was fully reverted at explicit user request — back to the
   original dark heading/button color at every width, and the
   `hero-photo-scrim` div removed from index.html along with it (a scrim
   whose only purpose was propping up white text is just a pointless
   darkening of the photo once the text goes back to dark). Height stays
   `47rem` below — that part was about the photo's own display size, not
   the text-color question, and wasn't part of what got reverted. Full
   history of the white-text attempt, if it's ever wanted again, is in
   HANDOFF.md rather than kept live here. */
@media screen and (max-width: 991px) {
  .parallax.about-photo-copy._1-2 {
    height: 47rem;
  }
}

/* .navbar is fixed at a constant 65px on every breakpoint (checked via
   getComputedStyle at 375/840/1440px) and sits on top of the page, so
   jumping to any same-page anchor (e.g. #career) lands with that much of
   the target's top hidden behind it. scroll-padding-top reserves the gap
   sitewide, for this link and any future anchor link alike. */
html {
  scroll-padding-top: 65px;
}

/* Original Webflow rule (line ~10408) puts backdrop-filter:blur(2px) on
   .body-2 (about.html only) at >=1440px. backdrop-filter creates a new
   containing block for any fixed-position descendant, same as transform
   does — so at that width the whole page's .navbar stopped being fixed
   to the viewport and scrolled away with the body instead, which is why
   it read as "missing" while scrolling on a wide screen. The blur itself
   is a barely-visible 2px effect on the body background; dropping it is
   the fix, not a visible loss. */
@media screen and (min-width: 1440px) {
  .body-2 {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* "Партнери" logo strip (index.html) is a Webflow scroll-pin: vertical
   scroll through #sec01 (.the-height-400vh-section) drives an IX2
   transform:translateX on .the-width-400vh-scrollable-div while
   .the-sticky-div holds it pinned to the viewport — see js/partners-
   scroll-buttons.js for how these buttons drive that. .the-sticky-div
   itself (not the mask) is the buttons' parent, so they sit beside the
   logo row instead of on top of it: .the-overflow-hidden-mask is
   narrowed below (992px+) to less than the sticky div's own width,
   which — because .the-sticky-div is display:flex; align-items:center —
   centers the now-narrower mask automatically and opens up genuine empty
   side margins within the same 1404px max-width box for the buttons to
   sit in, at any desktop width, not just very wide ones.
   Vertical centering can't be a flat top:50% here, since .the-sticky-div
   also contains the "Партнери" heading above the row — centering against
   its full height would land the buttons too high (this was tried once
   already, see the removed comment this replaced). js/partners-scroll-
   buttons.js sets --partner-btn-top from the mask's actual measured
   position instead, so it stays correct regardless of viewport height or
   how tall the heading happens to wrap to.
   Desktop only (>=992px, this page's own breakpoint for "desktop"
   elsewhere): below that, scrolling the page *is* the interaction
   (a vertical swipe through the pinned section already drives the same
   horizontal transform), so a button would be redundant there.
   No button chrome (circle/background/border/shadow) by request — just
   the bare arrow, sized up and given more room to breathe instead. The
   reserved side margin grew to match (132px -> 224px total) so the
   bigger, further-out icon still clears the (now-wider) mask edge by a
   real gap, not just a few px. */
@media screen and (min-width: 992px) {
  .the-overflow-hidden-mask {
    width: calc(100% - 224px);
  }
}

.partner-scroll-btn {
  position: absolute;
  top: var(--partner-btn-top, 50%);
  z-index: 250;
  transform: translateY(-50%);
  color: #000000a6;
  background: none;
  border: none;
  padding: 8px;
  justify-content: center;
  align-items: center;
  display: flex;
  cursor: pointer;
  transition: transform 0.2s, color 0.2s;
}

.partner-scroll-btn:hover {
  color: #000;
  transform: translateY(-50%) scale(1.12);
}

.partner-scroll-prev {
  left: 28px;
}

.partner-scroll-next {
  right: 28px;
}

@media screen and (max-width: 991px) {
  .partner-scroll-btn {
    display: none;
  }
}

/* index.html, 320px (iPhone SE) only: the "Одна команда..." paragraph
   (.paragraph-9.size-aboutustext-copy-copy._3, text starting "Найдорожчі
   помилки...") read visibly heavier/bigger than the reference paragraph
   in "Послуги" (.service-card-text-alt) right below it on the same page —
   not actually a font-weight difference (both compute to 400), it's
   font-size: 18px here (from .size-aboutustext-copy-copy._3's own
   font-size:var(--about-125), i.e. 1.125rem) against the reference's
   16px, with a proportionally looser line-height masking some of the
   size gap at normal reading distance but not in a close-up screenshot.
   Matched to the reference's 16px, scoped to this one breakpoint only
   per explicit request — not touched at 480px+, where this wasn't
   reported as an issue. */
@media screen and (max-width: 479px) {
  .paragraph-9.size-aboutustext-copy-copy._3 {
    font-size: 16px;
  }
}

/* index.html: the "Одна команда..." strong text (.bold-text-21) read
   too heavy next to "Послуги" (.heading-3.services-heading-size) — real,
   measurable difference: .bold-text-21 is font-weight:700 (a plain
   <strong>'s browser-default bold, never overridden by either of its
   two font-size rules above) against "Послуги"'s 600, which stays 600
   at every one of its own breakpoints (checked — none of its media-
   query overrides touch font-weight, only font-size/position/margin).
   First matched to 600 scoped to <=479px only, per how the issue was
   first reported; a follow-up asked for it "всюди" (everywhere) — moved
   out of that media query to apply unconditionally, since "Послуги"
   itself is never anything but 600 regardless of width. */
.bold-text-21 {
  font-weight: 600;
}

/* index.html, 320px only, same element again: lines read as stuck
   together ("наліплено одне на одне"). Real cause: .bold-text-21 sets no
   line-height of its own, so it inherits its parent .paragraph-9.size-
   aboutustext-copy-copy's line-height — which resolves to a fixed
   19.2px, sized for *the paragraph's own* 16px font-size (140% of 16px
   rounds close to that once this breakpoint's own 1rem font-size
   override applies to the parent). A computed px line-height doesn't
   rescale for a child with a bigger font-size when inherited, so
   .bold-text-21's actual 32px text was rendering inside a 19.2px line
   box — less than the font-size itself, guaranteed to look like
   overlapping lines. Given its own explicit, unitless line-height
   instead of a px value specifically so it scales off *its own*
   font-size rather than being vulnerable to the same inherited-px trap
   again if the font-size here ever changes.
   1.25 (40px) was the first value tried and read as too loose once seen
   live ("занадто сильно") — brought down to 1.1 (35.2px), still enough
   room that ascenders/descenders on adjacent lines don't touch. */
@media screen and (max-width: 479px) {
  .bold-text-21 {
    line-height: 1.1;
  }
}

/* index.html, 320px only: manual break, moved once already (originally
   right after "Жодного" — moved to right after "Один проект." instead,
   per a follow-up request, so the two sentences "Одна команда. Один
   проект." share the first line and "Жодного «це не наш розділ»" is
   the whole second line, rather than splitting mid-phrase). A plain <br>
   can't be conditional by itself, so it's tagged with a class and
   suppressed above this breakpoint instead — at 480px+ this line wraps
   differently anyway (and at 32px, its own unmodified size there, a
   break forced at either position would leave the far side of the line
   nearly empty). */
@media screen and (min-width: 480px) {
  .mobile-line-break {
    display: none;
  }
}

/* This 20px <=479px override existed only to make "Одна команда. Один
   проект." and "Жодного «це не наш розділ»" each fit their own line
   inside a 300px-wide container without wrapping mid-phrase (see the
   git history for the original measurement). Once "Жодного «це не наш
   розділ»" was removed from the heading entirely, the constraint this
   size was solving for no longer exists — a follow-up request to size
   the remaining text back up "proportionally to the site's fonts"
   confirmed live that its own unconditional 32px (pd-07, the same value
   already used at every other breakpoint) fits this container cleanly:
   getClientRects() on the text showed it wrapping naturally at the
   sentence boundary — "Одна команда." / "Один проект." — with no manual
   <br> needed at all. Removed this override rather than picking a new
   fixed value, so the heading is genuinely one size everywhere again. */

/* index.html, 320px only: "Ми рахуємо навантаження. Ви рахуєте
   прибуток." (.paragraph-9.size-aboutustext-copy-copy._3, the second of
   two sentences sharing that class — the first, "Найдорожчі помилки...",
   is untouched here) went through an earlier fix (shrunk to 12px so it
   fit on one line — see HANDOFF.md if that specific measurement work is
   ever relevant again) before the user decided, after seeing it live,
   that the sentence just doesn't belong at this width at all ("замалий
   екран") — replaced with display:none rather than layered on top of
   the size fix, since a hidden element's font-size is moot.
   The data-w-id attribute selector alone has the same specificity as a
   single class (0,0,1,0) — loses outright to the element's own 3-class
   .paragraph-9.size-aboutustext-copy-copy._3 combo (0,0,3,0) regardless
   of source order, so it's combined with that same combo here (0,0,4,0)
   rather than relied on by itself. */
@media screen and (max-width: 479px) {
  .paragraph-9.size-aboutustext-copy-copy._3[data-w-id="ecc4730d-afd8-efc8-2338-90f3e50318a3"] {
    display: none;
  }
}

/* The scroll-rotated crane section (index.html, between hero and
   "Послуги") was removed entirely at explicit request — full detail on
   what it was is in HANDOFF.md §59-60 if it's ever wanted back, not kept
   live here. */

/* index.html, 320px only: the "Партнери" logo row read as sitting too
   close to "Чому ми?" below it — same root cause as the desktop version
   of this exact gap (HANDOFF.md §29), just never carried over to this
   breakpoint: .the-height-400vh-section (the whole "Партнери" scroll-pin
   wrapper) has an unconditional margin-bottom:-4rem, and at this width
   .why-us-section's own original margin-top (6rem, line ~14303) wasn't
   enough to counteract it and still leave real clearance before "Чому
   ми?"'s own text (which sits well inside its box, not flush with the
   box's own top edge). Unlike the desktop case, this margin pair *does*
   respond 1:1 to changes here (checked live: +104px on margin-top moved
   the rendered gap by +104px, no dead zone) — so this was tuned by
   watching the actual screenshot rather than fighting non-standard
   collapse math a second time. 160px (10rem) is the value that reads as
   evenly balanced against the ~96px gap already above the logo row
   (between the "Партнери" subtitle and the row itself), not a formula. */
@media screen and (max-width: 479px) {
  .why-us-section {
    margin-top: 160px;
  }
}

/* index.html, 320px only: "Зв'язатись" (.font-size-medium-2.link, the
   underlined link right before the zakluk/hero-photo section) rendered
   at a flat 32px on every screen size — its own font-size is
   clamp(2rem, 2vw, 1.4rem), where the min (2rem) is already bigger than
   the max (1.4rem). A clamp with min > max always resolves to the min,
   per spec, so the 2vw preferred value and 1.4rem max never actually do
   anything here — this was effectively a fixed 32px the whole time, not
   a real responsive clamp, at every width including this one. Confirmed
   this exact 2-class combo is used exactly once on this page. Sized
   down to 20px, checked live against the surrounding stat-card text
   before picking that number. */
@media screen and (max-width: 479px) {
  .font-size-medium-2.link {
    font-size: 20px;
  }
}

/* Footer, 320px only: the gap above "Ми в соцмережах" (and above
   "Контакти" too — same grid, same gap) made the footer read as too
   long. .footer-links-wrapper.tab-footer (the real combo Webflow uses
   for this grid — the bare .footer-links-wrapper's own 767px-and-below
   override to 1.6rem never actually applies, it loses on specificity to
   this 2-class combo's unconditional 8rem, same shape of trap as
   elsewhere in this file) has grid-row-gap:8rem (128px) with no
   breakpoint override anywhere that touches row-gap specifically — the
   479px block for this combo only ever touched text-align/width. Footer
   markup is identical on every page (shared component), so this fixes
   the same visual gap everywhere the footer appears at this width, not
   just index.html — confirmed live that the grid is a single column at
   this breakpoint, so it's only row-gap that's visually doing anything
   here. */
@media screen and (max-width: 479px) {
  .footer-links-wrapper.tab-footer {
    grid-row-gap: 48px;
  }
}

/* about.html, 320px only: .image-39 ("Чому обирають нас?" hero photo) is
   a wide office-interior shot (1280x721 source) with object-fit:cover
   inside a narrow, tall mobile box — at this width the rendered box is
   only ~347px wide against an effective scaled image width over 1400px,
   so the default centered object-position:50% 50% only ever shows a
   ~24%-wide sliver of the photo's horizontal center (the walkway/table),
   missing the actual desks with people at them, which sit in the left
   and right thirds of the source image (confirmed by opening the full
   source directly). Shifted to object-position:20% 50% to bring the
   left-side workstations into that crop instead — checked both
   directions live (80% for the right-side desks looked comparably good)
   before picking this one; either was a reasonable answer, this wasn't
   the only "correct" choice. .image-39 confirmed used only on this
   page. */
@media screen and (max-width: 479px) {
  .image-39 {
    object-position: 20% 50%;
  }
}

/* about.html, 320px only: "Долучитись до команди" (.submit-button-5, the
   career-form submit button) was clipping — measured live (canvas text
   metrics against the button's own real padding) at the original 16px
   the label needs ~222px but the button's available inner width is only
   190px at this breakpoint (button is width:100%, padding already
   reduced to 15px/side by the existing ≤479px rule, but font-size was
   never touched there). 13px was the first size with real margin below
   that 190px ceiling (14px still didn't fit; 13.5px barely did).
   .submit-button-5 confirmed used only on this page. */
@media screen and (max-width: 479px) {
  .submit-button-5 {
    font-size: 13px;
  }
}

/* Every project/object page (26 pages sharing .div-block-35, the hero
   wrapper), 320px only: .heading-18-copy is position:absolute with
   inset:0% 0% auto (left:0, right:0 from the base rule) — zero
   horizontal padding, so long single-word titles overflow both edges
   with no way to wrap around them. Confirmed live: "ВАРШАВСЬКА" (the
   widest single word across every page's heading, checked via canvas
   measureText against all of them, "CONFERENCE" from grand-spa-resort-
   conference.html a close second) renders ~338px wide at the existing
   3rem, wider than the 320px viewport itself, so padding alone can't
   fix it — the word has no break opportunity to wrap on. Scoped to
   .div-block-35 (not the bare .heading-18-copy) so about.html's
   "ЧОМУ ОБИРАЮТЬ НАС?", which reuses the same class in a different
   section (.div-block-36), is untouched, since that wasn't reported.
   left/right:10px gives the requested edge clearance; font-size dropped
   to 2.5rem so "ВАРШАВСЬКА" (~282px measured at this size) still clears
   the resulting 300px available width with margin to spare. */
@media screen and (max-width: 479px) {
  .div-block-35 .heading-18-copy {
    left: 10px;
    right: 10px;
    font-size: 2.5rem;
  }
}

/* index.html only, 320-479px: Webflow auto-bakes w--current onto the navbar
   brand link on whichever exported page IS its own link target — since the
   brand always links to index.html, only index.html's own file has
   class="brand w-nav-brand w--current" (confirmed via grep: 0 other pages).
   .brand.w--current has its own real Webflow rule at this breakpoint
   (width:auto; padding-left:0), different from plain .brand's (width:90px,
   padding-left:10px inherited from the base .w-nav-brand framework class) —
   letting the child .logo <img> (unconditionally width:90px in its own
   rule at every breakpoint) render at its full 90px instead of being
   boxed into an 80px content area, ~12.5% bigger in both dimensions
   (measured live: 90x45.66 vs 80x40.59 everywhere else). This is original,
   untouched Webflow behavior, not introduced by any fix this session —
   it just never showed up in this session's own testing because every
   test navigation used a ?nocache= query param, which made Webflow's own
   "is this link the current page" JS check stop matching and silently
   drop w--current, masking the real behavior every time until a genuinely
   clean load (no query string) exposed it. Restoring plain .brand's own
   width/padding-left values on the .w--current variant, scoped to this
   breakpoint only, makes the homepage's logo match every other page's
   (confirmed via live inline-style test before writing this rule, then
   re-verified against the real served page afterward: 152.5/80/40.59,
   pixel-identical to a non-current page). .brand.w--current has its own
   separate rules at other breakpoints too (base, >=992px) — deliberately
   left untouched here, since only this breakpoint was reported. */
@media screen and (max-width: 479px) {
  .brand.w--current {
    width: 90px;
    padding-left: 10px;
  }
}

/* index.html "Послуги" cards, landscape phones: .card has an unconditional
   width:22.5rem (base) or width:300px (<=991px) — always a fixed px value,
   never proportional, same "Webflow hardcoded one preview width" shape
   documented repeatedly elsewhere in this file (see §17 in HANDOFF.md).
   .services-cards-desktop does get flex-flow:wrap at <=991px, so the fixed
   300px card CAN wrap instead of overflowing — but 2x300px+16px gap
   (616px) is wider than the actual available content width at a short
   landscape phone (measured 603px at 667px viewport), so it wraps to a
   single column, leaving ~45% of the row empty next to every card and
   roughly doubling the section's scroll length for no reason (confirmed
   live: 4 cards stacked, identical x, ~336px apart vertically).

   Scoped to (max-width:991px) and (orientation:landscape) specifically —
   NOT a plain max-width range — because landscape phones and portrait
   tablets overlap heavily in raw width (a landscape phone can be 900px+
   wide) but never overlap in orientation (a portrait device is never
   orientation:landscape by definition), so this reaches exactly "phone
   turned sideways" widths without touching the already-working portrait
   tablet layout that shares the same <=991px width range. Real device
   landscape widths run roughly 568px (iPhone SE) to 932px (iPhone 14 Pro
   Max) — checked both ends live before shipping this, not just the one
   width the report screenshot happened to show: at 568px (narrowest)
   each card is ~244px wide and its content still doesn't overflow the
   existing fixed 320px card height (confirmed via scrollHeight <=
   clientHeight on all 4 cards' real copy, worst case ~72px of margin
   to spare); at 932px (widest) cards are ~426px, still a reasonable,
   non-stretched card width. calc(50% - 8px) (half the container minus
   half the 1rem/16px gap) was used instead of a second fixed px guess
   specifically so it scales correctly across that whole width range
   instead of only being right at one specific device's width. */
@media screen and (max-width: 991px) and (orientation: landscape) {
  .services-cards-desktop {
    flex-flow: wrap;
  }

  .card {
    width: calc(50% - 8px);
  }
}

/* "Партнери" logo row, landscape phones: user reported "half the logos
   not visible" — real clipping, not an exaggeration. Root cause has two
   independent parts, both only matter when the viewport is SHORT (this
   whole component is a chain of vh-based sizing — see the extensive
   history above this comment — so it was only ever tuned against tall
   portrait viewports and normal desktop heights, never a short landscape
   phone):

   1. .heading-wrap.partner-head's margin-top is 8rem (128px) at this
      width (neither the <=479px nor >=992px override reaches 480-991px
      landscape) — on a ~320-430px-tall viewport that alone eats a
      third-plus of the whole .the-sticky-div (100vh). .the-overflow-
      hidden-mask's own height is genuinely "100% of whatever's left"
      (confirmed live, matches the existing comment above about this
      same mechanic), so a huge heading margin-top directly starves the
      mask down to less than the logo's own height.

   2. Even with more room, .a-block/.partner-logo-block's margin-bottom:15%
      (measured live: 112.5px-137.5px across the widths checked) still
      breaks it — percentage margins resolve against the CONTAINING
      BLOCK'S WIDTH per spec, not height, so this stayed large regardless
      of how little vertical room there was. .partners-marquee-track
      is align-items:center (confirmed live at this width, not just the
      >=992px case already documented above), which centers the item's
      full MARGIN BOX — with margin-bottom this much bigger than the
      margin-box's own content, centering pulls the actual visible logo
      upward, out through the TOP of the mask's box, where the mask's
      own overflow:hidden (that's its whole purpose) clips it. This is
      the exact same shape of bug the existing >=992px-only rule below
      already fixes on desktop (align-items:center + margin-bottom:0) —
      just never extended to this width/orientation combination.

   Fixed by applying that same, already-proven combination here: zero
   .a-block/.partner-logo-block's margin-bottom (align-items:center itself
   doesn't need restating, already active at this width), and cut
   .heading-wrap.partner-head's margin-top down from 128px to 12px —
   picked by testing the actual narrowest real landscape phone (568x320,
   iPhone SE) live, not guessed: 32px left only ~7.6px of clearance
   between the logo and the mask's own edge at that height, uncomfortably
   tight for a value that has to hold across real font-rendering
   variance; 12px gives ~27.6px of real breathing room there instead,
   confirmed still comfortable at 932x430 (iPhone 14 Pro Max landscape,
   the widest real case) too, where slack is ~137px. Screenshot-verified
   at both ends: heading/subtitle sit with a normal, uncramped gap before
   the logo row, every visible logo in the strip renders complete with no
   top or bottom clipping — this component's own horizontal marquee
   strip still shows a partial next-logo poking in at the mask's right
   edge, same as every other breakpoint; that's normal marquee behavior,
   not part of this bug. */
@media screen and (max-width: 991px) and (orientation: landscape) {
  .heading-wrap.partner-head {
    margin-top: 12px;
  }

  .a-block,
  .partner-logo-block {
    margin-bottom: 0;
  }
}

/* Gallery (.gallery-section), landscape phones: user reported big gaps between
   photos and asked specifically for 2-per-row with 10px side margins —
   a concrete direction, not just "fix the spacing."

   Root cause: at <=767px, Webflow's own original rule abandons the grid
   entirely (display:flex; flex-flow:column) and stacks all 9 photos in
   one column with grid-row-gap:4rem (64px, still applies as a flex
   row-gap alias) between each — a deliberate, reasonable choice for
   narrow PORTRAIT phones, just never intended for a wide-but-short
   landscape one, same "tuned for portrait only" shape as the two fixes
   above. The <=991px rule directly above it in the cascade (2 columns,
   .75fr 1fr) never gets a chance to apply at landscape-phone widths,
   since <=767px is more specific and wins first.

   Rebuilding this as a clean, uniform 2-column grid (not reusing the
   <=991px rule's own 2-column attempt, since .75fr 1fr is an uneven
   masonry-style split, not the plain "two even photos per row" that was
   asked for) needed one non-obvious step: the base rule's `grid-template`
   shorthand bakes in `grid-template-areas` (an 11-row x 7-column ASCII
   layout, one named area per photo, each photo's own grid-column/-row
   individually spans anywhere from 1 to 7 of those columns) — setting
   `grid-template-columns` alone, live-tested first, was silently ignored
   and still computed 3 uneven columns, because an active
   grid-template-areas keeps asserting its own column count independent
   of a longhand grid-template-columns override sitting next to it.
   `grid-template: none` clears the areas (and rows) in one shot, and
   only after that does a plain `grid-template-columns: 1fr 1fr` behave
   as expected. Each photo's own individual grid-column/grid-row span
   (inherited from the base rule, e.g. `span 4 / span 4`) also needed
   resetting to `span 1 / span 1` via `.gallery-grid > a` (the
   same safe, already-used-elsewhere child selector as the existing
   <=479px Local Addition above) — left as-is, several would still try
   to span more columns than now exist and distort the row count.

   10px side margins: the grid's own parent (.container-2, confirmed via
   grep used exactly once on this page) has 32px of padding on each side
   that's shared with this section's own heading above the grid — rather
   than shrinking that container's padding (would also pull the heading
   in, not asked for), pulled just the grid 22px past it on each side
   (margin-left/-right: -22px), landing the grid's own edge at exactly
   10px from the viewport regardless of screen width. Inter-photo gap
   left at 8px (this rule's own pre-existing grid-column-gap/grid-row-gap
   value from the base rule, not changed) — the user's "10px" was about
   the outer edges specifically ("від боків"), not the gap between
   photos.

   Follow-up round found this rule was silently NOT working, on a fresh
   re-check with a working screenshot: `display` computed to `flex`
   (the first pass never actually wrote `display:grid` into this rule
   despite testing it inline before shipping — a real gap between what
   was tested and what was written, caught on re-verification, not
   assumed fixed) and even after adding that, the container still
   auto-generated 9 implicit columns (one per photo, single row) instead
   of the intended 2. Two more real, independent bugs, found by testing
   each property change live one at a time rather than guessing:
   (1) `.gallery-grid > a`'s `grid-column`/`grid-row` reset was
   losing to Webflow's own per-photo placement, which turned out to be
   set via `#w-node-<uuid> { grid-area: span N / span N / ... }` ID
   selectors (confirmed via grep — a real rule at the <=479px block, and
   an unconditional/base one for every photo) — an ID selector's
   specificity always beats a class selector regardless of media-query
   nesting or source order, so this needed `!important` to actually win,
   not a class-selector rewrite (there's no selector shape short of
   matching each ID individually that beats an ID on specificity alone).
   (2) Even with items correctly forced to `span 1/span 1`, the grid
   still rendered 9 columns — `grid-auto-flow` computed to `column`
   (inherited from the <=767px rule, line ~13121, never reset by this
   rule) combined with no explicit row count meant every item needed
   its own new implicit column to be placed at all. Added an explicit
   `grid-auto-flow: row` reset.

   Same round, user also asked for the photos themselves to be square
   — added `aspect-ratio: 1` on `.gallery-grid > a` (also needs
   `!important` for the same ID-selector-specificity reason as the
   grid-column/-row reset above), which now correctly derives the
   square's height from whatever the column's own resolved width is at
   any real landscape width, rather than hardcoding one number that
   would only be right at one screen size. Verified live end to end
   after all of the above: exactly 2 explicit columns of 319.5px each
   at 667px width, every photo's own rect 319.5x319.5 (true square, not
   just visually close), grid still spans edge-to-edge at 10px from the
   viewport as before. */
@media screen and (max-width: 991px) and (orientation: landscape) {
  .gallery-showcase-grid {
    display: grid;
    grid-template: none;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    row-gap: 8px !important;
    margin-left: -22px;
    margin-right: -22px;
  }

  .gallery-showcase-grid > a {
    grid-column: span 1 / span 1 !important;
    grid-row: span 1 / span 1 !important;
    aspect-ratio: 1 !important;
  }

  .gallery-showcase-grid > a:last-child {
    grid-column: span 2 / span 2 !important;
    aspect-ratio: auto !important;
    height: 320px !important;
  }
}

/* "Проекти" category list (.projects-section), landscape phones: the last row
   ("Торгово-розважальні центри") was entirely invisible — user said "a
   line disappeared," and that's literally accurate, not an exaggeration.
   Confirmed via document.elementFromPoint at the text's own live
   coordinates: it hit BODY, not the title div — genuinely clipped, not
   a color/opacity/animation problem (checked and ruled out both: the
   GSAP scroll-reveal on this row fires and settles at opacity:1 well
   before the row scrolls into view, same as the other three rows).

   Each `.project-item` row (.project-content inside it) is sized
   `height:8vh` — on a normal-height phone or desktop this is generous
   (8vh is 70-90px+ on most real viewports), but on a short landscape
   phone (320-430px tall) it shrinks to just 26-34px. Every row's actual
   title text renders measurably below its own 8vh row box regardless of
   viewport (confirmed identical on all 4 rows, so this vertical offset
   itself isn't the landscape-specific bug — tried and ruled out both
   `.project-content`'s line-height:74px and `.project-item`'s
   padding-top/-bottom:2.4rem directly as the cause, live, before finding
   the real one) — normally harmless, since each row's overflow just
   bleeds into the next row's own space, which is empty there anyway.
   The outer list wrapper (`.projects-section .container`, confirmed via grep
   to structurally differ from the footer's own identically-classed
   `.container` only by being scoped under `.projects-section` here) has
   `overflow:hidden` with `height:auto` at this width — auto-sizing
   itself to the rows' own LAYOUT height (8vh x 4), which doesn't account
   for that per-row visual overflow. Every row but the last can overflow
   into next-row space and stay inside that auto height; the *last* row
   has no next row to bleed into, so on a short viewport its overflow is
   the first (and only) one to actually exceed the container's own
   bottom edge and get clipped.

   Fixed with the direct, minimal counter to the actual failure mode —
   `overflow: visible` on `.projects-section .container` only, not a deeper fix
   for why titles render below their own row box in the first place
   (real, but harmless everywhere except this one edge case, and not
   worth risking a wider change to something already working correctly
   for 3 of 4 rows and at every non-landscape breakpoint). Scoped to
   `.projects-section .container` rather than the bare `.container` class,
   since that exact class combo is also reused by this page's footer
   (confirmed via grep, 2 hits total on index.html) — this reaches only
   the Проекти list, not the footer. Verified via elementFromPoint at
   both 667x375 and 932x430 (the same width range checked for the other
   two fixes above): hit-tests the title div correctly post-fix at both,
   and a full screenshot at 667px confirms all 4 rows now render with
   identical divider-line styling and no visible gap or shift where the
   previously-clipped row appears. */
@media screen and (max-width: 991px) and (orientation: landscape) {
  .projects-section .container {
    overflow: visible;
  }
}

/* "Проекти" list, follow-up to the fix above: once the last row stopped
   being clipped, the user immediately flagged the divider lines
   themselves as wrong ("не рівно", lines above the text instead of
   below it) — a real, separate bug this same overflow discovery
   exposed rather than fixed. Root cause: `.project-item`'s own
   `border-bottom` sits at ITS OWN box edge (`height:8vh`), but — same
   mechanic established while diagnosing the clipped row above — every
   row's actual text renders about 26px below that box's own bottom
   edge, identically on all 4 rows. A border tied to the box therefore
   lands 26px *before* that same row's own text ends, which reads as
   "the line for row N sits above row N's text" — technically it's
   between row N's box and row N's overflowing text, but visually it's
   indistinguishable from "the previous row's line, sitting oddly high
   above the next line of text." Fixed by giving `.project-item`
   `padding-bottom:26px` (measured live to close the gap exactly:
   confirmed the box's own bottom edge now lands at the *same* pixel
   as its own title's bottom on all 4 rows, 0px gap, not just closer) —
   the border now renders exactly where a divider between two rows
   visually belongs, right after each row's own text. Not re-scoped
   from the fix above since it's the same root mechanic on the same
   element family; kept as a separate rule for a clean diff/revert unit
   if only one of the two ever needs undoing. */
@media screen and (max-width: 991px) and (orientation: landscape) {
  .project-item {
    padding-bottom: 26px;
  }
}

/* "Послуги" cards, landscape phones (follow-up to the 2-column fix
   above): user pointed specifically at "Оптимізація проектів" — its
   text wasn't laid out like the other cards. First hypothesis was
   wrong and worth recording so it isn't retried: this card's paragraph
   had three plain, unconditional `<br>` tags (index.html only, no
   `.mobile-line-break` class, unlike every other manual break added
   this session) — looked like the obvious cause, but adding the class
   (still kept, a harmless independent improvement — the text now
   wraps on natural word boundaries, "на будівництво." no longer
   orphaned on its own short line) barely changed the paragraph's
   rendered height, since this copy is simply longer than "Генеральне
   проектування"'s and needs about the same number of wrapped lines
   with or without the manual breaks.

   Real cause: measured all 4 cards' own paragraph heights live —
   3 of 4 (sharing class `.service-card-text`) already land at an identical
   157px; only "Генеральне проектування" (the one card using the
   distinct `.service-card-text-alt` class, shorter copy) comes in at
   134px, 23px short, which is exactly why its button alone sat higher
   than the rest.

   First fix attempt here was `.card{display:flex;flex-direction:
   column;justify-content:space-between}`, pinning every button to the
   card's own bottom edge — worked, but the user explicitly rejected
   the mechanism on review: buttons should stay exactly where they
   were (immediately below their own paragraph, original small gap),
   only the TEXT should be adjusted so the buttons end up level as a
   side effect. Replaced with the more targeted fix: `min-height:157px`
   on `.service-card-text-alt` alone (scoped further to `.services-cards-desktop
   .service-card-text-alt`, since that exact class also exists — unrelated,
   confirmed via grep — on a second, `display:none`-at-this-breakpoint
   duplicate block elsewhere on the page, same "-copy" duplicate-section
   pattern seen earlier with `.services-cards-mobile`). This reserves
   the extra 23px the short paragraph doesn't visually need without
   touching the button at all — verified live: both first-row buttons
   land at an identical top (1334px) with the paragraph-to-button gap
   itself unchanged from its original value, not stretched. */
@media screen and (max-width: 991px) and (orientation: landscape) {
  .services-cards-desktop .service-card-text-alt {
    min-height: 157px;
  }
}

/* Same "Послуги" card button-alignment bug, found again during a full
   iPad audit — this time in PORTRAIT at 810×1080 (iPad 9.7"), not
   landscape. Root cause is identical to the landscape fix just above
   (`.service-card-text-alt`, the "Генеральне проектування" card's shorter
   copy, renders shorter than its `.service-card-text` row-mates, pushing its
   button up out of line) — confirmed live: `.service-card-text-alt` measured
   134px vs `.service-card-text`'s 156.79px at this width, a 22.4px gap
   matching the exact button misalignment seen. The underlying cause
   (short vs. long copy in a 2-column grid) is driven by card WIDTH, not
   orientation, so it can occur in portrait too wherever the grid is still
   2 columns — confirmed this is genuinely portrait-range-specific and not
   already covered: at 375×812 (phone portrait) `.services-cards-desktop`
   itself is `display:none` in favor of the single-column `.cards-wrapper-
   copy-copy` duplicate (no row-mate exists to misalign with, so no bug
   possible there); at 768×1024 (already audited earlier this session,
   confirmed clean via screenshot) the narrower column width happens to
   wrap the short copy enough lines to naturally reach the same height —
   no gap, nothing to fix. 810px is 42px wider, just enough for the short
   copy to drop a wrapped line and fall short. Reused the exact same
   157px value as the landscape rule (not a coincidence — it's the same
   component, same target: match `.service-card-text`'s own real height,
   measured at 156.79px here, effectively identical to the landscape
   measurement). Kept as a separate rule (not merged into the landscape
   one by dropping its orientation qualifier) to match this file's own
   established convention for this exact pair of fixes — a clean
   diff/revert unit if only one orientation ever needs undoing. */
@media screen and (max-width: 991px) and (orientation: portrait) {
  .services-cards-desktop .service-card-text-alt {
    min-height: 157px;
  }
}

/* "Чому ми?" stats timeline (.process-item, the same component with an
   extensive history documented earlier in this file — dot alignment,
   line positioning, specificity traps): user wanted the description
   text closer to its own number/heading, and wrapped in 2 lines
   instead of 3, using "$22,4 млн+" as the example but confirmed this
   affects all 5 stat rows equally.

   Gap: `.process-item-desc`'s own `margin-top:10px` (base rule) was the
   full gap; cut to 4px.

   Line count took real digging — three independent things had to be
   fixed together, found by testing one change at a time rather than
   guessing all three up front:
   (1) At this width (<991px but >=768px is a separate, unrelated fix —
   see the 768-991px block earlier in this file), `.process-item-desc`
   has a hardcoded `width:250px` from a `<=991px` Local Addition made
   in an earlier round (line ~11650) — too narrow for most of these
   5 descriptions to fit in 2 lines regardless of anything else. Tried
   switching `.process-item` to the existing 768-991px flex-based
   layout first (this project's own established "check if Webflow
   already solved this elsewhere first" pattern) — display mode changed
   correctly but the width problem persisted, because…
   (2) …`.process-item-content`'s parent uses `align-items:flex-start`
   (not the flex default of stretch), so children size to their own
   intrinsic width regardless of how much room the parent actually has —
   confirmed live that giving the row's flex children `flex-grow` moved
   pixels between the icon and text columns, but `.process-item-desc`'s
   own rendered width never budged, because the width was coming from
   (1) above the whole time, several DOM levels down, not from the row's
   own flex distribution at all. Fixed by setting `.process-item-desc`'s
   width directly, 320px — matches this element's own pre-existing
   base-rule `max-width:20rem`, so it's a ceiling that already existed
   in principle, just never reached at this width; confirmed via canvas
   text measurement across all 5 real description strings (not just the
   reported one) that 320px fits every one of them in exactly 2 lines.
   (3) One specific row ("Успішно реалізованих концепцій...") kept
   measuring as 3 lines at any width tried, including well past what
   the text should need — turned out to have the exact same unconditional
   `<br>` oversight already found and fixed once this session on the
   "Оптимізація проектів" card: a plain `<br>`, no `.mobile-line-break`
   class, forcing an early break regardless of container width. Fixed
   the same way. (The "3 lines" reading for this one row was itself
   briefly a false alarm even after the fix — a hidden `<br>` still
   splits its surrounding text into separate DOM text nodes, and
   `Range.getClientRects()` returns one rect per text node even when
   two adjacent rects are visually on the same line; had to cross-check
   by grouping rects by their own `top` value; still confirms out.)

   Verified with the grouped-by-top-position method above across all
   5 real description strings, not just the one shown: every one
   confirmed at exactly 2 real visual lines. */
@media screen and (max-width: 991px) and (orientation: landscape) {
  .process-item-desc,
  .process-item-desc.size-copy,
  .process-item-desc.size-copy.tab-sizeprogress-copy {
    width: 320px;
    margin-top: 4px;
  }
}

/* "Зв'язатись" CTA link (.font-size-medium-2.link — the same element
   with the broken clamp() landmine documented earlier in this file)
   directly followed by the "zakluk" hero photo section, with the photo
   sitting right under the link's own underline — measured live at 1px
   of actual gap. `.zakluk` gets `margin-top:6rem` at >=992px (a Local
   Addition further up this file) but nothing at all below that, and
   neither the link's own wrapper nor `.zakluk` itself has any other
   margin/padding contributing space at this width — confirmed both
   compute to 0px. Added a landscape-scoped `margin-top`, not reusing
   the desktop's 6rem (96px) — proportionate for a full-width desktop
   flow but excessive relative to the modest gaps used elsewhere this
   round on a short viewport; 32px verified live to produce a real,
   visible 33px separation between the link and the photo. */
@media screen and (max-width: 991px) and (orientation: landscape) {
  .zakluk {
    margin-top: 32px;
  }
}

/* Gallery follow-up (round 4 of this landscape series): user flagged two
   more real things once the 2-column square grid was actually working —
   large gaps between rows, and the odd 9th photo left alone and small.

   Row gap: `row-gap` computed to 64px, not the 8px this rule already
   uses for `column-gap` — the earlier fix never touched `row-gap`
   specifically, so the `<=767px` block's own `grid-row-gap:4rem` (still
   valid, since that's a real property this rule never overrode) kept
   winning. Set explicitly to 8px (0.5rem, matching the user's own
   number and this rule's existing column gap).

   Last photo: with 9 photos in 2 columns, the last one lands alone in
   its own row. `:last-child` spans both columns to fill that row
   instead of leaving it half-empty — but naively doing that also
   inherits this rule's `aspect-ratio:1 !important` from the shared
   `> a` selector, and a square that's 2 columns wide comes out ~647px
   tall, wildly taller than every other row (confirmed live before
   catching this). Overrode `aspect-ratio:auto` and a fixed
   `height:320px` on just the last photo specifically, matching every
   other row's own height — reads as a wide closing banner photo rather
   than an oversized outlier. */
@media screen and (max-width: 991px) and (orientation: landscape) {
  .gallery-showcase-grid {
    row-gap: 8px !important;
  }

  .gallery-showcase-grid > a:last-child {
    grid-column: span 2 / span 2 !important;
    aspect-ratio: auto !important;
    height: 320px !important;
  }
}

/* "Zakluk" hero building photo (.process-visual-wrap/.cta-building-image.color — the
   same element §33, way earlier in this file, tuned object-position
   for on desktop), landscape phones: user asked directly why the photo
   looked cropped when the real photo isn't. Real, measurable cause:
   `.process-visual-wrap` and `.cta-building-image.color` both get `height:70vh` at
   `<=991px` — only 262.5px on a 375px-tall landscape viewport, well
   short of the ~360px this specific box would need at its own 667px
   rendered width to show the 1536x828 source at native proportions.

   First attempt raised the box to a fixed 320px, cutting the crop from
   ~27% down to ~11% — a real improvement, shipped, but the very next
   round's screenshot showed the rooftop terrace (the most detail-dense
   part of this specific photo) still visibly cut at the top, and the
   user was explicit that they wanted the whole photo, not just less
   heavily cropped. A fixed height can only ever approximate the source's
   own proportions at exactly the one viewport width it was measured
   against — switched to `aspect-ratio: 1536 / 828` (the source's own
   real pixel dimensions) instead of any height value at all, which
   makes the box's height *exactly* match what `object-fit:cover` needs
   to render the full image with zero cropping, at any landscape width
   this rule covers, not just 667px. Confirmed live: at 667px wide the
   box computes to exactly 360px tall (667 * 828/1536 = 359.6, matching
   to the pixel) and a screenshot shows the entire building, roofline
   and all, with clean margin above and below — not just "less cropped."
   Both the wrapper and the image need the same override, same reason
   as before: `.cta-building-image.color` carries its own independent `height:70vh`
   at this breakpoint, not merely inheriting the wrapper's. */
@media screen and (max-width: 991px) and (orientation: landscape) {
  .process-visual-wrap,
  .cta-building-image.color {
    height: auto !important;
    aspect-ratio: 1536 / 828 !important;
  }
}

/* "Одна команда. Один проект." heading (.bold-text-21), landscape
   phones: user wanted the line break back after "Один проект." — this
   exact `<br class="mobile-line-break">` already exists in the HTML
   (added earlier this session for the 320px-portrait pass), but
   `.mobile-line-break`'s own sitewide rule hides it at any width
   >=480px, which covers every real landscape phone width. Scoped to
   `.bold-text-21 .mobile-line-break` specifically (confirmed via grep
   that `.bold-text-21` is used exactly once on this page) rather than
   touching the shared `.mobile-line-break` rule itself, which would
   have also re-shown every OTHER conditional break on the page added
   for the 320px pass (the Послуги card copy, the process-item-desc fix
   earlier this round) — those are correctly meant to stay hidden once
   there's enough width, which landscape phones have; this one heading
   is the only one where the user explicitly asked for the break back
   at this width. Verified live: 2 real visual lines ("Одна команда.
   Один проект." / "Жодного «це не наш розділ»"), confirmed via
   screenshot the break lands exactly where asked. */
@media screen and (max-width: 991px) and (orientation: landscape) {
  .bold-text-21 .mobile-line-break {
    display: inline !important;
  }
}

/* Same heading, immediate follow-up: restoring the break above made the
   line-overlap bug from earlier in this file (the <=479px "наліплено
   одне на одне" entry, same element) recur at this width too — the
   exact same root cause, just never triggered before because there was
   only ever one line to show here until the break above brought back a
   second one. `.bold-text-21` sets no line-height of its own at this
   breakpoint, so it inherits a fixed, non-rescaling px value sized for
   a different, smaller font-size context — measured live: line-height
   computed to 24px against this element's own 32px font-size, guaranteed
   overlap. Reused the exact same fix already proven at <=479px:
   `line-height:1.1` (unitless, scales off its own font-size rather than
   inheriting a fixed px value) — 1.1 was the value that already survived
   a "занадто сильно"/too-loose rejection at 1.25 in that earlier round,
   so reused directly here rather than re-deriving it. Verified live:
   35px of real spacing between the two lines at this element's 32px
   landscape font-size, no overlap. */
@media screen and (max-width: 991px) and (orientation: landscape) {
  .bold-text-21 {
    line-height: 1.1;
  }
}

/* contact.html, landscape phones — first page in this landscape series
   that isn't index.html: the "У вас ідея. У нас — команда." heading sat
   partly under the fixed navbar. `.navbar` is fixed and 65px tall at
   every breakpoint (confirmed live, same value used sitewide — see
   §50's `scroll-padding-top:65px` fix for the same number used
   elsewhere); `.container.contact.w-container`'s own `margin-top` is
   only 2rem (32px) at `<=991px`, so the heading's own top landed 33px
   *into* the navbar's own box, not just close to it. Raised to 80px —
   clears the navbar with a real ~15px of breathing room, not just
   flush against it. Scoped to this page's own `.container.contact`
   combo (not the bare `.container`, which is also the footer's class
   on this and every other page, confirmed earlier this series) so nothing
   outside this specific heading's own wrapper is touched. */
@media screen and (max-width: 991px) and (orientation: landscape) {
  .container.contact {
    margin-top: 80px;
  }
}

/* Same bug, found again during the iPad audit — this time in PORTRAIT
   (768×1024 and presumably the whole portrait tablet range), which the
   landscape-only rule just above never reached: the plain `<=991px` rule
   (no orientation) only gives `.container.contact` `margin-top:2rem`
   (32px), same insufficient value, same 65px fixed navbar, same
   overlap — confirmed live, heading's own rect landed at `top:32px`,
   squarely inside the navbar's box, reading as faint "ghosted" text in a
   screenshot (the navbar's own translucent background showing through
   over the heading, not an opacity bug on the heading itself — confirmed
   `opacity:1` via `getComputedStyle`). Reused the exact same `80px`
   value as the landscape fix (same component, same 65px navbar, same
   target clearance) rather than re-deriving it.

   Deliberately floored at `min-width:480px`, NOT the same bare `<=991px`
   as the landscape rule above — this Local Additions section is appended
   after the original `<=479px` block earlier in this file, so a bare
   `<=991px` rule here would beat that earlier, narrower, already-tested
   phone-portrait rule on source order alone and push phone portrait
   (confirmed live at 375×812, part of this same session's earlier
   320-479px audit) down by 80px it was never missing — caught via a
   regression check at 375px after shipping the first version of this
   rule (heading moved from a previously-fine position to `top:176`),
   not caught before shipping. Floor matches this file's existing
   `480-767px` tablet-gap convention (§17-shape) exactly. */
@media screen and (min-width: 480px) and (max-width: 991px) and (orientation: portrait) {
  .container.contact {
    margin-top: 80px;
  }
}

/* Same page, immediate follow-up: "У вас ідея. У нас — команда." was
   wrapping across 3 lines with awkward mid-phrase breaks. Cause: a
   `<=991px` Local Addition from an earlier round set `.font-size-
   medium{width:245px}` — a single-class rule, tuned for a narrower
   portrait context, that happens to also match this exact heading
   (full class list `font-size-medium margin-bottom-1rem contact-
   change-copy`). At this landscape width the heading's real available
   space is 603px (confirmed live: its own column is full-width, not
   narrowed by any sibling), so a 245px cap was forcing 3 lines out of
   text that fits on one at 472px measured width.

   `.font-size-medium` alone is reused twice more on this same page for
   unrelated text ("Контакти", "Довірте свою ідею тим, хто вміє її
   реалізувати.") — confirmed via grep neither was reported as broken,
   so widened only the full 3-class combo specifically rather than the
   bare single class, leaving those other two untouched. Verified live:
   full heading renders as one real visual line at 603px width. */
@media screen and (max-width: 991px) and (orientation: landscape) {
  .font-size-medium.margin-bottom-1rem.contact-change-copy {
    width: 100%;
  }
}

/* Same page, one more follow-up: the "Ім'я" field sat 83px below the
   subtitle text, well past a normal paragraph-to-form gap. Not a
   margin/padding issue — `.contact-form-wrapper` has a fixed
   `height:448px` (unrelated to this landscape series, an existing
   value from an earlier round) and `justify-content:space-between`,
   which spreads whatever leftover space exists between its two
   children (`.contact-form-column-left`, the heading+subtitle;
   `.contact-form-column-right`, the form) along the vertical axis.
   With both columns' own natural content well under 448px combined at
   this breakpoint's smaller heading/font sizes, `space-between`
   manufactured an 83px gap out of that leftover space rather than
   packing the two columns together. Overrode to `justify-content:
   flex-start`, which stacks both columns tight against each other —
   confirmed live: gap drops to 16px, a normal paragraph-to-field
   spacing, not the wrapper's own fixed height being fought over.
   `.contact-form-wrapper` confirmed via grep used exactly once on this
   page, so no risk of touching an unrelated layout by scoping to it
   directly rather than a more specific combinator. */
@media screen and (max-width: 991px) and (orientation: landscape) {
  .contact-form-wrapper {
    justify-content: flex-start;
  }
}

/* Every project/object page (the same 26-page `.div-block-35` hero
   already touched earlier in this landscape series for the heading
   overflow fix), landscape phones: user reported the hero photo "very
   big vertically, need smaller" — measured live before touching
   anything: `.section-18`/`.image-38` compute to `height:68rem`
   (1088px) at this width — the base/unconditional value, with no
   override between the base rule and the existing `<=479px` block
   (which itself only drops to `47rem`/752px, still taller than this
   entire landscape viewport on its own). On a 375px-tall viewport,
   1088px is roughly 3x the visible screen.

   First attempt used a fixed 320px, matching this round's height
   convention from the zakluk-photo/gallery fixes — shipped, but the
   very next report was the opposite complaint: "не перегібай" (don't
   overcorrect), the photo should be genuinely full-screen for this
   orientation, not just smaller. Fixed-320px was a step in the right
   direction but landed short of what was actually asked. Switched to
   `100svh` instead — a real full-screen hero that's always exactly the
   current viewport's height, at any real landscape height (tested
   320px, 375px, 430px), rather than one fixed number that happens to
   be close at only one of them. (`svh` over `vh` specifically to avoid
   mobile browser chrome resize jumps — same reasoning as this
   project's other viewport-height decisions.)

   Full-height also meant the heading's positioning couldn't stay a
   fixed px value either — `margin-top:120px` (right for a 320px
   section) would sit too high relative to a 430px one. Used
   `margin-top:37.5vh` instead (vh, not a %, deliberately — percentage
   margins on this project have repeatedly turned out to resolve
   against the containing block's WIDTH per spec, not height, so a %
   value here would not scale with the section's own height at all;
   `vh` is viewport-height-relative and unaffected by that). 37.5vh was
   picked by testing the original fixed-px pairing's own ratio
   (120px / 320px section = 0.375) and reapplying it as a viewport
   fraction, then verified live at all three tested heights that the
   heading stays comfortably inside the photo with real margin above
   and below at each: 320px section -> heading 120-293; 375px section
   -> heading 141-256; 430px section -> heading 161-276. */
@media screen and (max-width: 991px) and (orientation: landscape) {
  .section-18,
  .image-38 {
    height: 100svh !important;
  }

  .div-block-35 .heading-18-copy {
    margin-top: 37.5vh;
  }
}

/* Same hero, immediate follow-up: user reported "gray smear" over the
   content section right below the hero photo — a real bug, not a
   description of the intended dark scrim. `.div-block-41` (this specific
   page's own instance of a 5-way-shared selector, `.div-block-41`
   through `.div-block-45` — Webflow's own auto-numbering for the same
   component reused across different page exports, confirmed via grep
   all five share one rule) is the hero's own darkening overlay
   (`background-image: linear-gradient(#0000004d, #0000004d)`, a flat
   30% black tint over the photo for text legibility) — `position:
   absolute`, and its own `height:68rem` (1088px) was never touched by
   the two fixes above, which only resized the photo and repositioned
   the heading. With the photo now `100svh` (375-430px depending on
   device) but the overlay still 1088px tall, the overlay extended
   hundreds of pixels past the photo's own new bottom edge, tinting the
   real content section underneath — exactly the "gray smear on the
   content" report. Added all five shared class names (matching the
   original rule's own selector list, so this reaches whichever variant
   any given object page actually uses, not just this one page's
   `-41`) to the same `100svh` height as the photo itself. Verified
   live: overlay height now matches the photo's exactly (375px at this
   viewport), content section below renders at full brightness, no
   tint bleeding past the hero. */
@media screen and (max-width: 991px) and (orientation: landscape) {
  .div-block-41,
  .div-block-42,
  .div-block-43,
  .div-block-44,
  .div-block-45 {
    height: 100svh !important;
  }
}

/* Homepage top hero photo (.hero-image-wrapper.about-photo._1-1 wrapping
   .parallax.about-photo-copy._1-2) — same root shape as the object-page
   hero above and the "zakluk" photo earlier in this file, a different
   component entirely (this is the very first section on index.html, full
   width, text overlaid on top rather than a two-column layout — confirmed
   live via getBoundingClientRect, wrapper and image both span the full
   736px width at this breakpoint, not a side-by-side split). The un-scoped
   `@media (max-width:991px)` rule further up this file (no orientation
   qualifier, tuned for narrow portrait phones) sets `.parallax.about-
   photo-copy._1-2{height:47rem}` (752px) — reasonable for a tall narrow
   portrait screen, but at a landscape phone width this same fixed 752px
   applies regardless of the actual (much shorter) viewport height:
   confirmed live at 736×414 (iPhone 8 Plus landscape) the section rendered
   at a full 752px against a 414px viewport, nearly double, forcing a big
   scroll past the fold before any other content became visible — exactly
   the "задовге по вертикалі" report. `.hero-image-wrapper.about-photo._1-1`
   itself has no explicit height at this breakpoint (`auto`, inherited from
   the base rule), so it simply follows the image's own height — no wrapper
   override needed, only the image. Fixed the same way as the object-page
   hero: `height:100svh`, so the section now matches the real viewport
   height at any landscape phone size instead of one fixed number tuned for
   a taller, narrower screen. The `.parallax` class's own scroll-linked
   transform (Webflow IX2, confirmed via its `data-w-id` attribute and the
   image's live rect being ~9.5% larger than its box with a matching
   negative offset — deliberate parallax headroom) reads this base height
   at runtime, so it isn't touched or broken by this change. */
@media screen and (max-width: 991px) and (orientation: landscape) {
  .parallax.about-photo-copy._1-2 {
    height: 100svh;
  }
}

/* Same homepage hero, immediate follow-up: with the photo now a real
   100svh (previous fix), the heading/subtext/button block (.hero-copy-column,
   position:absolute, offset purely via margin-top since it has no
   top/left of its own) still used the un-scoped `@media (max-width:991px)`
   rule's `margin-top:12rem` (192px) — sized for a tall narrow portrait
   phone, where that much of the sky is available above the building. At
   736×414 landscape the building's own roofline sits much higher in the
   now-short frame; measured precisely by drawing the rendered photo to an
   off-screen canvas and scanning several columns for the sky-to-silhouette
   brightness drop (not eyeballed) — the tower's peak lands at
   `imgRect.top + 0.358 * imgRect.height` ≈ 144px into the section. At the
   inherited 192px margin, the heading's own box (57.6px tall) landed
   fully below that line, crossing through the building's upper floors —
   exactly the reported overlap. Tested candidate margin-top values live
   (83px landed the heading 3px above the roofline, too tight; 65px
   touched the navbar's own bottom edge with zero gap) before settling on
   `72px`: heading top sits 7px below the navbar, its bottom lands ~14px
   above the measured roofline, confirmed via a matching screenshot —
   "DAV CONSTRUCTIVE" reads cleanly against open sky, no longer crossing
   the building. Scoped to landscape only, same reasoning as the photo fix
   above: the un-scoped 991px rule still governs portrait phones, where
   12rem has never been reported as a problem. */
@media screen and (max-width: 991px) and (orientation: landscape) {
  .hero-copy-column {
    margin-top: 72px;
  }
}

/* Same hero, smallest landscape phone tested this round: iPhone SE
   landscape (568×320). "DAV CONSTRUCTIVE" (.hero-title.hero-title-text) wraps
   to two lines here — not itself a bug in isolation (a separate, existing
   `@media (min-width:480px) and (max-width:767px)` rule, no orientation
   qualifier, deliberately narrows this heading to `calc(100vw - 48px)` and
   *wants* a two-line "DAV" / "CONSTRUCTIVE" wrap in that width range, to
   match the navbar's own two-line logo — see the comment just above that
   rule). The problem is specific to this width combined with a landscape
   phone's short height: two lines of a 64px heading (115px tall) plus the
   subtext and button left almost no room in a 320px-tall viewport — button
   bottom measured at 317px, 3px from the edge, with the subtext visually
   crowding the button above it. Confirmed via canvas `measureText` (same
   font/weight/letter-spacing as rendered) that "DAV CONSTRUCTIVE" needs
   ≈604px at the base 64px size but only 619px is available at 667px width
   (iPhone 8 landscape) — fits fine there, no wrap, so this is genuinely
   specific to narrower landscape phones, not the whole 480–767px landscape
   range. Reduced `.hero-title.hero-title-text` to `54px` (measured to fit
   "DAV CONSTRUCTIVE" in ≈510px against the 520px available at 568px width,
   confirmed live: single line, height drops from 115px to 48.6px) — kept
   `max-width:600px` as the cutoff specifically so this doesn't reach 667px
   (iPhone 8 landscape), which already renders correctly under the existing
   64px rule and wasn't reported as broken. Verified live: heading single
   line, button bottom now at 250.6px (69px of clear space below it, was
   3px), screenshot-confirmed no more overlap. */
@media screen and (max-width: 600px) and (orientation: landscape) {
  .hero-title.hero-title-text {
    font-size: 54px;
  }
}

/* New device bucket, first round: iPad mini landscape (1024×768). This
   width sits in a genuine gap between this file's other breakpoints —
   above the ≤991px rules (both the plain one and this session's own
   landscape-scoped ones) but below the existing `min-width:1280px` rule —
   so `.hero-copy-column` was still falling through to the bare, unscoped
   base rule (`margin-top:14rem`, 224px), tuned for desktop and never
   revisited for this tablet-landscape gap. User asked specifically to
   raise the heading/subtext/button block by 4rem here, and to touch only
   this resolution. Scoped to `min-width:992px and max-width:1279px and
   orientation:landscape` — deliberately a width band, not an exact
   1024px match, since standard iPad and iPad mini landscape share the
   identical 1024×768 CSS pixel size and are indistinguishable to a media
   query; the band's own edges (992px, 1280px) line up with this file's
   existing breakpoints on both sides, so it can't bleed into the ≤991px
   phone rules or the ≥1280px desktop rule. `224px - 4rem(64px) = 160px`.
   Verified live via a temporary inline override before committing
   (screenshot-confirmed the block now sits higher, comfortably clear of
   the photo's own upper third) — not yet re-checked at other widths
   inside this same band (e.g. iPad Pro's own landscape sizes are wider
   and fall outside 992–1279px, so shouldn't be reachable, but this is
   this session's first fix at this bucket and hasn't had a dedicated
   leak-check pass the way the phone breakpoints have). */
@media screen and (min-width: 992px) and (max-width: 1279px) and (orientation: landscape) {
  .hero-copy-column {
    margin-top: 160px;
  }
}

/* "Послуги" cards, same 992–1279px gap bucket, found during the same
   iPad audit: at 1080×810 one card ("Генеральне проектування") rendered
   at 172px wide with its paragraph wrapped to 336px tall, while the other
   three sat at a uniform 273px/157px — a ~200px button misalignment, far
   bigger than the paragraph-height-only bug fixed twice above.

   Root cause is a different mechanism entirely: `.services-cards-desktop` is
   `display:flex` with no `flex-wrap` in this width range (the only two
   rules that ever add `flex-wrap:wrap` are scoped to `<=991px`, one
   plain and one landscape-specific — both stop at 991px) and `.card`'s
   only width in this range is the base, unscoped `width:22.5rem` (360px).
   Four 360px cards plus 3×1rem gaps need 1488px; this bucket's own
   container measured only 1016px wide at 1080×810 — far short, forcing
   flex-shrink. Because flex-shrink's "resolve flexible lengths" algorithm
   freezes any item that hits its own min-content floor and dumps the
   *remaining* negative space onto whichever items can still shrink, and
   each card's min-content floor depends on its own copy's longest
   unbreakable run, the four (differently-worded) cards don't shrink
   equally — three froze at a shared min-content floor (273px) and the
   fourth absorbed all the leftover shrinkage alone, collapsing to 172px
   and wrapping its paragraph 2 extra lines. This is inherently
   copy-content-dependent and not a stable layout regardless of the exact
   numbers measured here.

   Fixed the same way already proven twice in this file for the exact
   same underlying shape (`<=991px` plain, and `<=991px` landscape,
   both above): give the wrapper `flex-wrap` and the cards an explicit,
   *equal*, container-relative width, which sidesteps the min-content
   freeze cascade entirely (two per row, each card's own share is fixed
   by the formula, never negotiated against its neighbors' copy).
   `calc(50% - 8px)` matches the landscape-phone rule's own approach
   (half the container minus half the 1rem/16px gap) rather than the
   `<=991px` plain rule's fixed `300px`, since this bucket spans a wide
   992–1279px range (unlike a single fixed px, this scales correctly at
   both ends). Not scoped to `orientation:landscape` — unlike the hero
   margin fix just above, this bug is pure flexbox-width math with no
   dependency on orientation, so both landscape and portrait devices
   landing in this width band need the same fix. Verified live at
   1080×810: all 4 cards equal width, buttons aligned; at 1280×900
   (just outside this bucket, on the existing `min-width:1280px` desktop
   side) cards were already equal at 304px each without this rule,
   confirming the fix is scoped to exactly the gap that needed it. */
@media screen and (min-width: 992px) and (max-width: 1279px) {
  .services-cards-desktop {
    flex-flow: wrap;
  }

  .card {
    width: calc(50% - 8px);
  }
}

/* Immediate follow-up to the fix just above: once the cards were forced
   to equal widths (2 per row) in this 992–1279px bucket, the *other*
   card-alignment bug (`.service-card-text-alt` rendering shorter than its
   `.service-card-text` row-mates — the same root cause fixed twice already,
   for `<=991px landscape` and `<=991px portrait`) surfaced here too, for
   the same reason it didn't matter before this rule existed: with cards
   now genuinely 2-per-row same-width, "Генеральне проектування"'s
   shorter copy is short enough to leave its button 45px above its row
   partner's. Measured live at 1080×810: `.service-card-text-alt` 112px vs.
   `.service-card-text` 157px — same 157px target as the other two instances
   of this fix, not a coincidence, same component. Not orientation-scoped,
   matching the flex-wrap fix just above it (both address the same
   992–1279px width bucket, and neither mechanism depends on aspect
   ratio). */
@media screen and (min-width: 992px) and (max-width: 1279px) {
  .services-cards-desktop .service-card-text-alt {
    min-height: 157px;
  }
}

/* User-directed fine-tuning, index.html hero, explicitly scoped to
   exactly 768×1024 (iPad mini / iPad 9.7" portrait, the two devices that
   share this CSS width) and nowhere else, per an explicit request not to
   touch any other resolution. `.hero-copy-column` (heading/subtext/button
   block) raised 2rem and nudged 1rem left from the plain `<=991px`
   values (`margin-top:12rem`→`10rem`, `margin-left:2rem`→`1rem`) — a
   pure positioning preference, not a bug fix. Used an exact
   `min-width:768px and max-width:768px` band rather than the broader
   `480–991px` portrait bucket used elsewhere in this file, since this is
   a specific aesthetic adjustment only verified to look right at this
   one width, not a general fix known to hold across the whole bucket. */
@media screen and (min-width: 768px) and (max-width: 768px) and (orientation: portrait) {
  .hero-copy-column {
    margin-top: 160px;
    margin-left: 16px;
  }
}

/* Same page, same exact-768×1024 scope: "Одна команда. Один проект.
   Жодного «це не наш розділ»" (.bold-text-21) was wrapping mid-phrase
   ("Жодного «це не" / "наш розділ»") — user wants a clean break after
   "Один проект." instead. Same fix shape already proven twice in this
   file for this exact element (the `<=479px` original and the
   landscape-phone round just above): show the existing
   `<br class="mobile-line-break">` (hidden by the sitewide rule at
   `>=480px`) via `.bold-text-21 .mobile-line-break{display:inline}`,
   plus `line-height:1.1` on `.bold-text-21` itself, since — confirmed
   live, identical to the landscape case — this element inherits a fixed
   24px line-height against its own 32px font-size at this breakpoint,
   which overlaps the two lines without the unitless override. */
@media screen and (min-width: 768px) and (max-width: 768px) and (orientation: portrait) {
  .bold-text-21 .mobile-line-break {
    display: inline !important;
  }

  .bold-text-21 {
    line-height: 1.1;
  }
}

/* "Партнери" -> "Чому ми?", exactly 768×1024: user wanted "Чому ми?"
   higher up / the gap after the visible logo row tighter. This section
   (.the-height-400vh-section) is a Webflow scroll-pin — .the-sticky-div
   stays fixed to the viewport while the user scrolls through this
   element's own height, and an IX2 interaction reads that scroll
   distance to drive `translateX` on the 7090px-wide logo track
   (.the-width-400vh-scrollable-div, confirmed via `scrollWidth`, same
   full 31-logo strip as the desktop version measured in HANDOFF §53).
   Two other approaches were tried first and reverted as unsafe:
   (1) shrinking `.the-overflow-hidden-mask`'s own height directly —
   confirmed live the logo's position inside the mask does not move in
   response (GSAP/IX2-driven, independent of the mask's CSS height), so
   this only clipped the logo instead of recentering it; (2) an
   aggressive height cut to 120vh — confirmed live this measurably
   truncates how much of the logo strip passive scroll can ever reach
   before the pin releases.

   Important context before touching this again: even the ORIGINAL,
   unmodified 150vh only ever reaches about 46% of the strip via passive
   scroll at this width (`translateX` maxed at -2933px of the -6322px
   needed for the last logo, measured live) — this is not a regression,
   it's how this component already behaves at this breakpoint. The
   prev/next buttons that let desktop users reach the rest of the strip
   (js/partners-scroll-buttons.js, see HANDOFF §51-56) are explicitly
   `>=992px`-only, so below that width scroll has always been a partial,
   not complete, way to see this row — full traversal was never available
   here to begin with.

   Given that, a moderate height reduction (150vh -> 130vh, about 13%)
   was chosen as a real compromise, not a full fix: it measurably brings
   "Чому ми?" closer/higher as asked, while keeping the passive-scroll
   coverage close to its own already-partial baseline rather than cutting
   it sharply. Not a mask/logo re-centering fix (ruled out above as
   unsafe) — purely shortens the pin's own footprint. */
@media screen and (min-width: 768px) and (max-width: 768px) and (orientation: portrait) {
  .the-height-400vh-section {
    height: 130vh;
  }
}

/* Same "Партнери" pin, direct follow-up — this replaces an earlier
   attempt at this same request that turned out to be wrong. The first
   attempt shrank `.the-sticky-div` itself (`height:580px` +
   `overflow:hidden`) to crop the mask's empty lower portion from the
   outside; it looked correct in this environment's own testing tool
   (verified live via `elementFromPoint`, screenshots at two scroll
   depths) but the user's own real-device screenshot (Safari/iPadOS)
   afterward showed the identical, unfixed dead zone — so whatever this
   environment's tool was reporting as "fixed" did not reflect the real
   page. Reverted that rule entirely rather than dig further into why the
   two disagreed, since a completely different, already-*proven* fix for
   this exact bug turned up in this same file while investigating (see
   the `<=991px and orientation:landscape` rule below, `.a-block,
   .partner-logo-block{margin-bottom:0}`) — this is that exact bug, just at a
   width/orientation combination that rule never reached.

   Root cause, already fully diagnosed once for landscape (see that
   comment for the full derivation) and just as true in portrait, since
   nothing about it is orientation-specific: `.a-block`/`.partner-logo-block`
   carry `margin-bottom:15%` from the original Webflow export — percentage
   margins resolve against the containing block's WIDTH per spec, not
   height, so this stays large (~115px at 768px width) regardless of the
   mask's own height. `.partners-marquee-track` is `align-items:
   center` at this width (from the plain, original `<=991px` Webflow
   rule — confirmed active, no override needed for that part), which
   centers each logo's full MARGIN BOX. With margin-bottom this much
   bigger than the margin box's own visible content, centering pulls the
   actual logo upward inside the mask, leaving a large empty band below
   it before the mask's own bottom edge — exactly the dead zone in every
   screenshot this round, on both testing tools.

   Fixed by reusing the exact same, already-shipped combination as the
   landscape rule: zero `.a-block`/`.partner-logo-block`'s `margin-bottom`.
   Nothing else needed touching — `align-items:center` was already
   correct, `.the-overflow-hidden-mask`'s own height was never actually
   the problem in the first place. */
@media screen and (min-width: 768px) and (max-width: 768px) and (orientation: portrait) {
  .a-block,
  .partner-logo-block {
    margin-bottom: 0;
  }
}

/* contact.html, exactly 768×1024: user wants the heading/subtitle broken
   into 5 specific lines: "У вас ідея." / "У нас — команда." / "Залиште
   заявку." / "Зателефонуємо, розберемо задачу," / "запропонуємо
   рішення." Both paragraphs already carry exactly the right `<br>` tags
   in the HTML for this split (`.font-size-medium.margin-bottom-1rem
   .contact-change-copy`: one `.mobile-line-break` after "ідея.";
   `.paragraph.contact-change`: one `.mobile-line-break` after "заявку.",
   plus one *unconditional* `<br>` — always visible at every width —
   after "задачу," which already produces that specific split's last
   break for free) — they just needed showing at this width, same
   sitewide `.mobile-line-break{display:none}` at `>=480px` pattern
   already worked around elsewhere in this file. Verified live via
   screenshot: exactly the 5 lines asked for, in order. */
@media screen and (min-width: 768px) and (max-width: 768px) and (orientation: portrait) {
  .font-size-medium.margin-bottom-1rem.contact-change-copy .mobile-line-break,
  .paragraph.contact-change .mobile-line-break {
    display: inline !important;
  }
}

/* Object/project pages (.container-7 — the shared text-content wrapper
   around "FOMICH GROUP" / "Проектувальник:" / "Сектор:" /
   "Характеристики:" / the body paragraphs, confirmed via grep used on
   27 pages, the whole object-page family), exactly 768×1024: text sat
   completely flush against both screen edges (0px), user wants a real
   10px side margin. `.container-7` and its whole ancestor chain up to
   the page's own outer container had zero padding/margin at this width
   (confirmed live, every level in the chain computed `left:0`) — added
   directly on `.container-7` itself, the innermost wrapper common to
   all of this content, rather than a page-specific element, so the fix
   reaches every object page through the shared class, not just this one
   page's own markup. */
@media screen and (min-width: 768px) and (max-width: 768px) and (orientation: portrait) {
  .container-7 {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* about.html "чому обирають нас" 6-item grid (.choose-us-content, 3
   columns), exactly 768×1024: "Досвід масштабних проектів" was the only
   one of the 6 titles wrapping to 3 lines (measured height 81px vs 54px
   for the other 2-line titles), reading as uneven against its row-mates.
   Its own wrapper's side padding (`.section-16 .container-2` — scoped to
   `.section-16` specifically, not the bare `.container-2`, since that
   exact class is also reused on index.html for an unrelated section,
   confirmed via grep — 32px/2rem) was the only lever available (the grid
   itself and its cells have no padding of their own). Reduced to 12px:
   confirmed live this is enough for the one 3-line title to drop to 2,
   matching its row-mates, without needing to touch font-size or the
   grid's own column count/gap. */
@media screen and (min-width: 768px) and (max-width: 768px) and (orientation: portrait) {
  .section-16 .container-2 {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* New round, new exact-width target: iPad Pro 10.5" landscape (1112×834)
   specifically — user moved to this resolution and asked for 4 more
   user-directed adjustments, all explicitly "only at this resolution."
   Same convention as the 768×1024 round above: every rule here uses
   `min-width:1112px and max-width:1112px and orientation:landscape`, an
   exact-width band, not a general bucket. */

/* index.html "Послуги" cards: "Генеральне проектування"'s description
   (.service-card-text-alt, the short-copy card already touched by earlier
   rounds for a different reason) rendered in 4 lines at this width; user
   wants 7. Measured via `Range.getClientRects()` grouped by `top` (this
   file's own established way to count real visual lines, not just
   height/line-height division) across a range of candidate widths —
   260px lands exactly on 7 lines, stable across a 250-270px window
   (not a hair-trigger boundary value). */
@media screen and (min-width: 1112px) and (max-width: 1112px) and (orientation: landscape) {
  .services-cards-desktop .service-card-text-alt {
    width: 260px;
  }
}

/* contact.html heading: "У вас ідея. У нас — команда." was wrapping at
   whatever point the text naturally overflowed ("У вас ідея. У нас —" /
   "команда."), not the clean "У вас ідея." / "У нас — команда." split
   the existing `.mobile-line-break` in the HTML already provides —
   same fix shape as several rounds above, just a new width. */
@media screen and (min-width: 1112px) and (max-width: 1112px) and (orientation: landscape) {
  .font-size-medium.margin-bottom-1rem.contact-change-copy .mobile-line-break {
    display: inline !important;
  }
}

/* about.html "чому обирають нас" grid: at this wider width, the
   *opposite* problem from the 768px round — several titles now fit on
   one line instead of two, and user wants all 6 uniformly at 2 lines.
   Tested a single shared width first (temporarily, live) and confirmed
   no value works: "Увага до деталей" (short, 3 words) refuses to wrap to
   2 lines until the column is narrow enough that "Ефективні інженерні
   рішення" and "Досвід масштабних проектів" (longer titles) overflow to
   3 — there's no single width where all 6 land on exactly 2 at once, a
   genuine conflict from the varying copy lengths, not a value that was
   just hard to find. Only 2 of the 6 needed fixing to begin with
   ("Оптимізація бюджету", "Увага до деталей" — the other 4 were already
   2 lines at this width's natural column size), so fixed with a manual
   break in each (`<br class="ipadpro-break">` in about.html, matching
   this file's established `.mobile-line-break` pattern — hidden by
   default everywhere, shown only in this exact band), rather than
   fighting the whole grid's width for a fix only 2 cards actually need. */
.ipadpro-break {
  display: none;
}

@media screen and (min-width: 1112px) and (max-width: 1112px) and (orientation: landscape) {
  .ipadpro-break {
    display: inline;
  }
}

/* Object/project pages (.container-7, same shared 27-page class fixed
   for 768×1024 earlier): text sat flush against both edges again at
   this width (that earlier fix doesn't reach 1112px) — same 10px side
   margin, same reasoning, new exact-width band. */
@media screen and (min-width: 1112px) and (max-width: 1112px) and (orientation: landscape) {
  .container-7 {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* index.html top hero, phone only (≤479px — the same breakpoint every
   existing custom fix for this exact block already uses, e.g. the
   .hero-copy-column re-centering above). Three user-directed changes:

   1. Remove the "DAV CONSTRUCTIVE" heading entirely on phone. The native
      Webflow ≤479px rule already swaps .hero-title.hero-title-text out for
      .heading-26 (display:block) as the phone-sized heading — this just
      turns that swapped-in heading off too, leaving only the paragraph
      and button. Desktop/tablet untouched: .hero-title.hero-title-text is
      what's shown everywhere above 479px, and this rule doesn't touch it.

   2. Bold the paragraph ("Генпроектування повного циклу...") — was
      inheriting font-weight:400 from the base (desktop) rule at every
      breakpoint; only overriding it here keeps desktop/tablet at 400.

   3. Button moved down, given a blurred/translucent background, and
      sized up slightly:
      - margin-top adds real space below the paragraph (beyond the
        paragraph's own existing 1rem margin-bottom).
      - .btn-primary-inner.white-2 already has a transparent background
        (#fff0) with just a border — adding backdrop-filter blurs
        whatever's behind it (hero gradient/photo) and a light white
        tint makes the blur visibly read as "glass", not just invisible.
      - height/padding/font-size bumped modestly (~15%) for "трохи
        збільши"; height must be overridden alongside padding since the
        base rule hardcodes height:50px (a fixed height, not min-height),
        so padding alone would just overflow/clip instead of growing the
        box. */
@media screen and (max-width: 479px) {

  .hero-subtitle.hero-subtitle-text {
    font-weight: 700;
  }

  /* §94's margin-top nudge wasn't enough — user wants the button pinned
     at the bottom of the screen, not just further from the paragraph.
     .hero-copy-column is position:absolute with no explicit height (it
     auto-shrinks to wrap its in-flow children), so there's nothing for
     a "bottom:0" child to anchor against. Giving it an explicit height
     equal to #about-top's own height at this breakpoint (47rem) minus
     its own top offset (margin-top:6rem) makes its box reach exactly
     to the hero section's bottom edge — anchored to the hero's own
     fixed-rem dimensions, not 100vh, so it stays correct regardless of
     viewport height (mobile browser chrome, taller/shorter phones)
     instead of drifting past the hero into the next section. The
     paragraph above stays position:static and renders exactly as
     before — height only extends the box's bottom, it doesn't move
     its top. */
  .hero-copy-column {
    height: calc(47rem - 6rem);
  }

  .btn-primary.white {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    margin-top: 0;
    width: 270px;
  }

  /* Widened further at user request, and this also fixes a real layout
     bug caught while doing it: the button's text ("Дивитися проекти")
     was wrapping to 2 lines, not because 34px padding was too tight,
     but because shrink-to-fit width for an absolutely-positioned box
     with left:50%/width:auto is computed from `left`, before the
     transform that re-centers it ever runs (transform is a paint-time
     effect, invisible to layout) — so the available width the browser
     wrapped text against was ~half of .hero-copy-column's own width
     (~150px), not the real ~300px box. An explicit width sidesteps
     shrink-to-fit entirely instead of fighting it with more padding. */
  .btn-primary-inner.white-2 {
    height: 58px;
    width: 100%;
    padding-left: 34px;
    padding-right: 34px;
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 17px;
    background-color: #ffffff26;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

/* index.html top hero, phone only (≤479px), third follow-up in this same
   round: remove all hero text, replace the pill button with a bare white
   down-chevron, and swap the background photo — all phone-only, per the
   same "нічого не змінювалось" requirement as every earlier round on this
   block. */
@media screen and (max-width: 479px) {
  /* 1. Remove the remaining hero text entirely — .heading-26 ("DAV
     CONSTRUCTIVE") was already hidden in the previous round; this hides
     the paragraph too, leaving just the photo and the arrow. */
  .hero-subtitle.hero-subtitle-text {
    display: none;
  }

  /* 2. Photo swap. The <img> (.parallax.about-photo-copy._1-2) is the
     SAME element used at every breakpoint via srcset — there's no
     separate mobile <picture>/<source>, so its `src` can't be swapped
     for phone only without touching desktop/tablet too. Instead: hide
     the shared <img> here and paint the new photo as a background-image
     on its wrapper (.hero-image-wrapper.about-photo._1-1) instead —
     desktop/tablet still render the original <img> untouched. The
     wrapper's own height is normally `auto`, derived from the now-hidden
     image (which was `height:47rem` at this breakpoint) — with the
     image gone that would collapse to 0, so the wrapper needs the same
     47rem given back explicitly, matching what #about-top (.hero-section)
     itself is already fixed to at this breakpoint (native Webflow rule),
     so the section's overall height is unaffected either way. New photo
     optimized to WebP (2.28MB PNG → 225KB) via the same cwebp pipeline
     used for the rest of this project's images, at quality 82. */
  .parallax.about-photo-copy._1-2 {
    display: none;
  }

  .hero-image-wrapper.about-photo._1-1 {
    height: 47rem;
    background-image: url("../images/6b1a9f2e_mobile-hero-laptop-concrete.webp");
    background-size: cover;
    background-position: center;
  }

  /* 3. Button → bare white arrow. Hides the pill/text/blur box from the
     previous round entirely (its sizing/padding rules above are now
     moot, left in place rather than deleted for the round-by-round
     history) and renders a single down-chevron instead, matching the
     shape the user referenced — inline SVG data-URI (no new asset file
     needed), same lucide-style stroke convention already used elsewhere
     on this site (e.g. the navbar phone icon: round caps/joins,
     stroke-based, no fill). .btn-primary.white keeps its existing
     bottom-pinned position from the previous round (position:absolute;
     left:50%; bottom:2.5rem; transform:translateX(-50%)) — only its size
     shrinks to fit the arrow instead of the old pill. */
  .btn-primary-inner.white-2 {
    display: none;
  }

  .btn-primary.white {
    width: 144px;
    height: 90px;
    opacity: 0.55;
  }

  .btn-primary.white::after {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: phone-arrow-bounce 6s ease-in-out infinite;
  }
}

/* Shared by both phone hero arrows below (portrait just above, landscape
   further down): a PERIODIC double-bounce — two hops (a bigger one, then
   a smaller settling one), then a long pause before repeating — per
   "стрибки подвійні має робити, періодичність 6 секунд" (double jumps,
   6-second period). Amplitude (28px/14px) scaled up along with the 3x
   arrow size increase (144×90, was 48×30) so the bounce still reads as
   proportionate, not tiny relative to the new glyph. Animates the
   pseudo-element's own transform, not .btn-primary.white's (which
   already uses transform:translateX(-50%) for centering — piling a
   second, unrelated transform meaning onto the same property on the
   same element would require re-deriving the centering offset in every
   keyframe; animating the child instead sidesteps that entirely, since
   its centering comes from the parent's flexbox alignment, not its own
   transform). Defined once, unscoped, since a @keyframes block with no
   selector referencing it has no effect by itself — safe outside any
   media query. */
@keyframes phone-arrow-bounce {
  0%, 8%, 100% {
    transform: translateY(0);
  }
  4% {
    transform: translateY(28px);
  }
  12% {
    transform: translateY(14px);
  }
  16% {
    transform: translateY(0);
  }
}

/* Same three changes as the portrait round above (no text, photo swap,
   pill → bare white arrow), now extended to landscape phones at the
   user's explicit request ("розширення коли телефон повертають
   горизонтально, зроби так само"). Reuses `max-width:991px and
   orientation:landscape` — the established landscape-phone bucket this
   whole file already uses for every other §71-§90 landscape fix, not a
   new convention — rather than portrait's `max-width:479px`, since
   landscape phone widths (568-926px) all exceed 479px. */
@media screen and (max-width: 991px) and (orientation: landscape) {
  /* At this width .heading-26 is already `display:none` (its swap-in
     only ever triggers at <=479px, which no real landscape phone
     reaches) — .hero-title.hero-title-text is the heading actually showing
     here (confirmed live), so that's the one to hide. */
  .hero-title.hero-title-text {
    display: none;
  }

  .hero-subtitle.hero-subtitle-text {
    display: none;
  }

  /* Photo swap, same technique and same reasoning as the portrait block:
     hide the shared <img>, paint the new photo as this wrapper's own
     background instead. Height matches what the image was already
     rendering at here (100svh, from §86's landscape-hero-height fix) —
     without restating it explicitly the wrapper's auto height would
     collapse to 0 once its only child is hidden, same collapse risk as
     the portrait version. */
  .parallax.about-photo-copy._1-2 {
    display: none;
  }

  .hero-image-wrapper.about-photo._1-1 {
    height: 100svh;
    background-image: url("../images/6b1a9f2e_mobile-hero-laptop-concrete.webp");
    background-size: cover;
    background-position: center;
  }

  /* .hero-copy-column's text-era layout used a plain margin-left offset
     (no horizontal centering), which was fine while it held visible
     text spanning almost the full width — but with all its children
     now hidden except a small arrow, centering it via left:50%/
     transform (same mechanism the portrait rule already uses) is needed
     so the arrow itself lands centered rather than off to one side.
     margin-left:0 avoids that inherited offset stacking on top of the
     transform-based centering. Height reaches from this breakpoint's
     own existing top offset (margin-top:72px, §87 — left unchanged, not
     restated) down to the bottom of the 100svh hero, giving the
     bottom-pinned arrow a real box to anchor against, same reasoning as
     the portrait rule's `calc(47rem - 6rem)`. Also needs an explicit
     `width` now, for a reason specific to this round: with every child
     hidden except the (now also position:absolute) button, .head-slog-
     div has no in-flow content left to shrink-wrap around, so `width:
     auto` shrink-to-fit resolves to a hard 0 regardless of available
     space — confirmed live (rect width:0, collapsing the button inside
     it to 0 too). `90%` matches the exact value the portrait rule
     already uses for the same "just needs to be nonzero" reason — the
     precise number doesn't matter for how the button lands, since both
     this box and the button inside it center via left:50%/transform
     independently; any nonzero width keeps that math working. */
  .hero-copy-column {
    left: 50%;
    margin-left: 0;
    transform: translateX(-50%);
    width: 90%;
    height: calc(100svh - 72px);
  }

  .btn-primary-inner.white-2 {
    display: none;
  }

  .btn-primary.white {
    position: absolute;
    left: 50%;
    bottom: 0.5rem;
    transform: translateX(-50%);
    width: 144px;
    height: 90px;
    margin-top: 0;
    opacity: 0.55;
  }

  .btn-primary.white::after {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: phone-arrow-bounce 6s ease-in-out infinite;
  }
}

/* index.html "Послуги" service-card contact modals (all 4 — opt/gen/
   efect/flex-4, see HANDOFF.md §7 for how they're opened/matched),
   reported as "все не рівно" (everything is uneven) at phone width.
   Root cause: a stale leftover from an earlier session's fix, not a new
   bug. Webflow's own native ≤479px rule sets `.service-modal-panel.back-blur.
   model-size1` (the modal card) to `width:350px` and its child `.div-
   block-6` (wraps the modal's own heading/subtitle — confirmed via grep
   this class is used nowhere else on the page) to `width:310px` — 310 is
   exactly 350 minus the card's 40px total horizontal padding, so at the
   time this shipped from Webflow, the heading and the card's content box
   lined up exactly. A prior session's fix (search this file for
   "close button being off-screen" if that comment ever gets pruned)
   widened the CARD itself to `width:100%` so its close button wouldn't
   go off-screen on very narrow phones, but never updated this one child
   to match — .w-form (the form below it) has no hardcoded width of its
   own, so it naturally stretches to 100% of the new, wider card, while
   .service-modal-row stayed frozen at the old 310px, leaving a ~40px gap on
   the right of the heading/subtitle only. Confirmed live (390px viewport):
   .w-form spans the full 350px content box (20px padding each side,
   symmetric), .service-modal-row spans only 310px (still 20px on the left,
   60px on the right) — exactly the lopsided look in the report.
   `width:100%` brings it in line with its sibling, the same fix shape
   already used on the card itself. */
@media screen and (max-width: 479px) {
  .service-modal-row {
    width: 100%;
  }
}

/* Same modals, same round, exact same bug shape one level deeper: the
   single-line inputs (Ім'я → .text-field-5-copy, Телефон → also .text-
   field-5-copy, Email → .text-field-6) are hardcoded to width:310px in
   Webflow's own native ≤479px rule, the same stale "sized for the old
   350px card" leftover as .service-modal-row above — while .textarea
   (Повідомлення) and .submit-button-2.btm4 (the submit button) have no
   hardcoded width in that same rule, so they already stretch to 100% of
   the current (wider) card and were the correct reference all along.
   Confirmed via grep both classes are used nowhere else on the site
   (only inside these 4 modals' forms), so fixing them broadly is safe.
   width:100% brings the three narrow fields in line with the textarea
   and submit button below them, matching this file's now three-times-
   repeated fix for this exact shape of bug (card, heading, now inputs). */
@media screen and (max-width: 479px) {
  .text-field-6,
  .text-field-5-copy {
    width: 100%;
  }
}

/* projects.html: new category filter bar, left-aligned directly above the
   project grid (per request — "фільтр (зліва) одразу над фото першого
   об'єкту"). UI only for now, no actual filtering yet — the user will
   supply which project belongs to which category in a later round;
   js/project-filter.js just toggles which button looks active so it
   already behaves like a real filter control. Styled to match the
   site's existing pill-button language (.btn-primary-inner /
   .btn-primary-inner.white-2 on index.html's hero: rounded-full,
   Open Sans, #010101 as both the filled and the outlined-state color) —
   inactive buttons echo the "white-2" outlined variant, the active one
   echoes the plain filled variant, so switching state reads as the same
   kind of "selected vs. not" toggle already used elsewhere on the site. */
.project-filter-bar {
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: .75rem;
  width: 100%;
  display: flex;
}

.project-filter-btn {
  color: #010101;
  cursor: pointer;
  background-color: #fff0;
  border: 1px solid #00000033;
  border-radius: 99999px;
  padding: .75rem 1.5rem;
  font-family: Open Sans, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.project-filter-btn:hover {
  border-color: #00000080;
}

.project-filter-btn.is-active {
  color: #fff;
  background-color: #010101;
  border-color: #010101;
}

/* Cards hidden by js/project-filter.js when their data-category doesn't
   match the selected filter. .property-wrapper-2 is a CSS Grid item
   (.properties-list-copy._11) — display:none removes it from the grid
   flow entirely so the remaining visible cards reflow to fill the gap,
   rather than leaving a blank slot. */
.property-hidden {
  display: none;
}

/* projects.html: user reported the sitewide body texture (grid pattern,
   see the `body{background-image:...}` rule and its own HANDOFF §39/§40
   history) wasn't visible anywhere on this page. Root cause: `.section-
   15.accent` — the section wrapping the entire filter+grid content,
   confirmed via a full-page opaque-background scan (every element over
   200×100px checked programmatically, not eyeballed) — carries its own
   solid `background-color:#fff` from Webflow's original export, sized to
   the full page height (measured live at 1920px tall, i.e. the whole
   visible page), painting over the texture completely. `.section-15`
   (without `.accent`) is reused elsewhere without this problem — only
   this modifier, and only on this page (confirmed via grep: `.section-
   15.accent` appears in no other page's HTML), so scoping the override
   to the compound selector can't affect anything else.

   Also clearing `.property-wrapper-2`'s own `background-color:#fff` —
   each project thumbnail has `padding:1rem` around its image (not
   `object-fit:cover` filling the whole card), so that white was showing
   as a solid matte border around every photo instead of the texture. */
.section-15.accent,
.property-wrapper-2 {
  background-color: transparent;
}

/* about.html "чому обирають нас" 6-card grid: reported as not vertically
   centered within its section (flanked by a photo above and another
   below). Measured live at 4 widths spanning every breakpoint bucket,
   not guessed: the gap BELOW the grid (to the next section's photo) is
   a rock-steady 96px at every width tested (375/700/1200/1600px) — that
   side has no responsive overrides anywhere in this component. The gap
   ABOVE varies by bucket because `.why-choose-us-wrapper`/`.choose-us-
   content`'s margin-top (they collapse together, larger one wins) AND,
   at 480–991px specifically, `.container-2`'s own separate margin-top
   (32px, easy to miss — confirmed via getComputedStyle on all three
   elements together, not assumed from the class names alone) all
   contribute: ≤479px measured 64px, 480–991px measured 112px, 992–
   1439px already measured exactly 96px (left untouched, nothing to
   fix), ≥1440px measured 128px. Overriding whichever of margin-top
   values is the larger one (the one actually winning the collapse) at
   each mismatched bucket brings the top gap to the same fixed 96px the
   bottom already has — a real 96/96 match confirmed live via
   getBoundingClientRect at all 4 widths after this change, not just
   computed style. */
@media screen and (max-width: 479px) {
  .why-choose-us-wrapper {
    margin-top: 6rem;
  }
}
@media screen and (min-width: 480px) and (max-width: 991px) {
  .choose-us-content {
    margin-top: 4rem;
  }
}
@media screen and (min-width: 1440px) {
  .choose-us-content {
    margin-top: 6rem;
  }
}

/* projects.html: shown by js/project-filter.js only when the selected
   category has zero tagged cards (currently "Торгово-розважальні
   центри"/"Комерційні приміщення" — no objects assigned to those
   categories yet, see HANDOFF.md §104-105). Deliberately keyed off
   "zero results", not the specific category names, so this message
   automatically stops appearing on its own once real objects get
   tagged into these categories later — no code change needed then.

   Rebuilt to a full spec (§116) replacing the original plain "Скоро
   тут з'являться проекти" placeholder — that copy was explicitly
   rejected ("не писати 'Скоро'/'Незабаром'") in favor of a real
   conversion path: eyebrow + headline + copy (category name filled in
   by JS) + two mandatory CTAs + a full-width dashed placeholder card
   that's itself a link, all sized to land at ~480-560px total height
   right under the filter row with no gap before the text. */
.project-empty-state {
  width: 100%;
  padding-top: 1rem;
  display: none;
  animation: project-empty-fade-in .6s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .project-empty-state {
    animation: none;
  }
}

@keyframes project-empty-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.project-empty-eyebrow {
  color: #a2a8ad;
  text-transform: uppercase;
  margin-bottom: .75rem;
  font-family: Open Sans, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
}

.project-empty-title {
  color: #010101;
  margin-bottom: 1rem;
  font-family: Open Sans, sans-serif;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.025em;
}

.project-empty-desc {
  color: #6b7075;
  max-width: 62ch;
  margin-bottom: 2rem;
  font-family: Open Sans, sans-serif;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.6;
}

.project-empty-actions {
  flex-flow: row wrap;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 3.5rem;
  display: flex;
}

.project-empty-btn-primary {
  color: #fff;
  background-color: #010101;
  border-radius: 999px;
  padding: 16px 32px;
  font-family: Open Sans, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: transform .2s ease, background-color .2s ease;
}

.project-empty-btn-primary:hover {
  transform: translateY(-2px);
}

.project-empty-btn-secondary {
  color: #010101;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: Open Sans, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
}

.project-empty-card {
  text-align: center;
  border: 1.5px dashed #0a0a0a;
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 220px;
  text-decoration: none;
  display: flex;
  transition: background-color .25s ease, transform .25s ease;
}

.project-empty-card span {
  color: #0a0a0a;
  font-family: Open Sans, sans-serif;
  font-size: 21px;
  font-weight: 600;
  transition: color .25s ease;
}

.project-empty-card:hover {
  background-color: #010101;
  transform: translateY(-3px);
}

.project-empty-card:hover span {
  color: #fff;
}

.project-empty-btn-primary:focus-visible,
.project-empty-btn-secondary:focus-visible,
.project-empty-card:focus-visible,
.project-filter-btn:focus-visible {
  outline: 2px solid #010101;
  outline-offset: 4px;
}

/* Second row of the SAME single global filter as the category row above
   (see js/project-filter.js — one activeFilter value shared across both
   rows, not two AND-combined dimensions; a card can carry several
   work-type tags and surface under any one of them individually).
   Reuses .project-filter-bar's own flex/gap rule so both rows read as
   one cohesive filter UI — same gap value as the buttons within a row,
   so the row-to-row spacing doesn't stand out from the button-to-button
   spacing. */
.project-worktype-wrap {
  margin-top: calc(.75rem - 4rem);
  width: 100%;
}

.project-worktype-bar {
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: .75rem;
  width: 100%;
  display: flex;
}

/* Mobile-only (<900px) filter UI: the two wrapped button rows (still
   used at >=900px, unchanged) are replaced below 900px by a single
   toggle button — reads "Усі об'єкти" by default, or the active
   filter's own name once one is picked — that opens a bottom-sheet
   modal listing all 9 filter values (5 category + 4 work type) as one
   flat, single-select list. §137 tried keeping the two rows and just
   wrapping them so nothing needed a swipe — rejected once seen live,
   too much button clutter competing for space above the fold on an
   actual phone screen. Hidden entirely at >=900px via the media query
   below; the toggle/modal markup exists in the DOM at every width but
   only becomes visible under it. */
.project-mobile-filter-toggle {
  display: none;
  color: #010101;
  cursor: pointer;
  background-color: #fff0;
  border: 1px solid #00000033;
  border-radius: 99999px;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .875rem 1.5rem;
  font-family: Open Sans, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.project-mobile-filter-toggle.is-filtered {
  color: #fff;
  background-color: #010101;
  border-color: #010101;
}

.project-mobile-filter-chevron {
  flex: none;
  transition: transform .2s ease;
}

.project-mobile-filter-toggle[aria-expanded="true"] .project-mobile-filter-chevron {
  transform: rotate(180deg);
}

.project-mobile-filter-backdrop {
  z-index: 5000;
  background-color: #00000066;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  position: fixed;
  inset: 0;
}

.project-mobile-filter-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.project-mobile-filter-modal {
  z-index: 5001;
  background-color: #fff;
  border-radius: 1.25rem 1.25rem 0 0;
  max-height: 80vh;
  padding: .5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
  box-shadow: 0 -16px 40px #00000024;
  transform: translateY(100%);
  transition: transform .3s ease;
  overflow-y: auto;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}

.project-mobile-filter-modal.is-open {
  transform: translateY(0);
}

.project-mobile-filter-modal-header {
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0 .5rem;
  display: flex;
}

.project-mobile-filter-modal-title {
  color: #010101;
  font-family: Open Sans, sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
}

.project-mobile-filter-close {
  color: #010101;
  cursor: pointer;
  background: none;
  border: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: flex;
}

.project-mobile-filter-option {
  color: #010101;
  cursor: pointer;
  text-align: left;
  background-color: #fff0;
  border: none;
  border-radius: .75rem;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: .875rem .75rem;
  font-family: Open Sans, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  transition: background-color .15s ease;
}

.project-mobile-filter-option:active {
  background-color: #0000000d;
}

.project-mobile-filter-option.is-active {
  font-weight: 700;
}

.project-mobile-filter-option.is-active:after {
  content: "✓";
  margin-left: .75rem;
}

.project-mobile-filter-divider {
  background-color: #0000001a;
  height: 1px;
  margin: .5rem 0;
}

@media screen and (max-width: 899px) {
  .project-empty-card {
    height: 140px;
  }

  .project-empty-card span {
    font-size: 17px;
  }

  .project-empty-actions {
    flex-flow: column;
    align-items: stretch;
    gap: 1rem;
  }

  .project-empty-btn-primary,
  .project-empty-btn-secondary {
    text-align: center;
    width: 100%;
  }

  /* Two-row layout hidden below 900px, single toggle shown instead. */
  .project-filter-bar,
  .project-worktype-wrap {
    display: none;
  }

  .project-mobile-filter-toggle {
    display: flex;
    /* .vertical-wrapper's own row-gap (4rem, see §135) is what pushes the
       card grid this far below the toggle — on mobile the toggle is the
       only visible sibling above the grid, so this margin only affects
       that one gap, matching it to the ~31px already sitting above the
       toggle (navbar height vs. the wrapper's own margin-top, unrelated
       to row-gap and left untouched). */
    margin-bottom: calc(31px - 4rem);
  }
}

/* Project pages' photo gallery lightbox (js/photo-lightbox.js) — a full
   replacement for Webflow's own built-in .w-lightbox, which renders
   visibly broken (ghosted, overlapping images, no real full-screen view)
   at every width, and whose mobile pinch-to-zoom used to corrupt the
   page's own layout. touch-action:none lives on .custom-photo-lightbox-
   image specifically (not this whole full-viewport overlay) — that's
   the only element pinch/pan/double-tap handlers are attached to, so
   it's the only one that needs to opt out of the browser's own native
   touch gesture handling. Scoping it that tightly, rather than to the
   whole overlay, also turned out to matter for tap-to-close on the
   backdrop area actually working reliably. */
.photo-phone img {
  cursor: pointer;
}

.custom-photo-lightbox-backdrop {
  z-index: 999997;
  background-color: #000000e6;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease;
  position: fixed;
  inset: 0;
}

.custom-photo-lightbox-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.custom-photo-lightbox {
  z-index: 999998;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  transition: opacity .25s ease;
  display: flex;
  position: fixed;
  inset: 0;
}

.custom-photo-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.custom-photo-lightbox-image {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
  /* The zoomToward() math in photo-lightbox.js assumes the transform
     scales from the image's own top-left corner, not the CSS default
     (50% 50%) — keeps the translate/scale relationship simple enough to
     solve directly for "keep this point under the finger" on every
     pinch/double-tap, instead of needing a center-relative correction
     term as well. */
  transform-origin: 0 0;
}

.custom-photo-lightbox-close,
.custom-photo-lightbox-prev,
.custom-photo-lightbox-next {
  z-index: 999999;
  color: #fff;
  cursor: pointer;
  background-color: #ffffff1a;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, background-color .2s ease;
  display: flex;
  position: fixed;
}

.custom-photo-lightbox-close:hover,
.custom-photo-lightbox-prev:hover,
.custom-photo-lightbox-next:hover {
  background-color: #ffffff33;
}

.custom-photo-lightbox-close.is-open,
.custom-photo-lightbox-prev.is-open,
.custom-photo-lightbox-next.is-open {
  opacity: 1;
  visibility: visible;
}

.custom-photo-lightbox-close {
  top: 1.5rem;
  right: 1.5rem;
}

.custom-photo-lightbox-prev {
  top: 50%;
  left: 1.5rem;
  transform: translateY(-50%);
}

.custom-photo-lightbox-next {
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
}

.custom-photo-lightbox-counter {
  z-index: 999999;
  color: #fff;
  text-align: center;
  background-color: #00000080;
  border-radius: 999px;
  padding: .375rem .875rem;
  font-family: Open Sans, sans-serif;
  font-size: .875rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
}

.custom-photo-lightbox-counter.is-open {
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 479px) {
  .custom-photo-lightbox-prev,
  .custom-photo-lightbox-next {
    width: 38px;
    height: 38px;
  }

  .custom-photo-lightbox-close {
    top: 1rem;
    right: 1rem;
  }

  .custom-photo-lightbox-prev {
    left: .5rem;
  }

  .custom-photo-lightbox-next {
    right: .5rem;
  }
}


/* ============================================================
   Breadcrumbs + page header
   Added for SEO (schema.org BreadcrumbList has a visible
   counterpart) and accessibility. Typography deliberately
   mirrors the existing site scale: Open Sans, .heading-3 sizes
   for the title, --color--text-color-light-gray for inactive
   crumbs, so the block reads as native to the design.
   ============================================================ */

.breadcrumbs {
  font-family: Open Sans, sans-serif;
  font-size: .875rem;
  line-height: 1.4;
}

.breadcrumbs__list {
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.breadcrumbs__item {
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: 0;
  display: flex;
}

.breadcrumbs__item + .breadcrumbs__item:before {
  content: "/";
  color: var(--color--text-color-light-gray);
}

.breadcrumbs__link {
  color: var(--color--text-color-light-gray);
  text-decoration: none;
  transition: color .2s ease;
}

.breadcrumbs__link:hover,
.breadcrumbs__link:focus-visible {
  color: var(--000);
  text-decoration: underline;
}

.breadcrumbs__current {
  color: var(--000);
  font-weight: 600;
}

/* Light variant, for placement over dark imagery */
.breadcrumbs.is-on-dark .breadcrumbs__link {
  color: var(--stellar-site---color--c2-60);
}

.breadcrumbs.is-on-dark .breadcrumbs__link:hover,
.breadcrumbs.is-on-dark .breadcrumbs__link:focus-visible {
  color: var(--white);
}

.breadcrumbs.is-on-dark .breadcrumbs__current {
  color: var(--white);
}

.breadcrumbs.is-on-dark .breadcrumbs__item + .breadcrumbs__item:before {
  color: var(--stellar-site---color--c2-60);
}

.page-header {
  flex-direction: column;
  gap: 1rem;
  display: flex;
}

.page-header__title {
  color: var(--000);
  margin-top: 0;
  margin-bottom: 0;
  font-family: Open Sans, sans-serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 120%;
}

/* Pages whose first content block sits directly under the fixed navbar
   need the same 6rem clearance the existing first blocks already use. */
.page-header.has-navbar-offset {
  margin-top: 6rem;
}

.page-header__subtitle {
  color: var(--stellar-site---color--c1-75);
  max-width: 46rem;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Open Sans, sans-serif;
  font-size: 1rem;
  line-height: 160%;
}

/* Standalone breadcrumbs (object pages) sit inside the regular content
   column, so they carry their own bottom rhythm. */
.breadcrumbs-row,
/* Same column, but on the service pages it now wraps only the page header --
   breadcrumbs were removed from everything except the object pages. */
.page-header-row {
  width: 100%;
  max-width: 74rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2rem;
}

@media screen and (max-width: 991px) {
  .page-header__title {
    font-size: 1.9rem;
  }
}

@media screen and (max-width: 767px) {
  .page-header__title {
    font-size: 1.5rem;
  }

  .breadcrumbs {
    font-size: .8125rem;
  }
}

/* ============================================================
   Service pages (/services/<slug>/)
   Built from the same tokens as the rest of the site: Open Sans,
   --000 for headings, --stellar-site---color--c1-75 for body copy,
   the 74rem content column and the 6rem vertical rhythm.
   ============================================================ */

.service-section {
  width: 100%;
  padding-top: 3rem;
}

.service-section__title {
  margin-top: 0;
  margin-bottom: 2rem;
}

.service-grid {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.service-item__title {
  color: var(--000);
  margin-top: 0;
  margin-bottom: .5rem;
  font-family: Open Sans, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 130%;
}

.service-item__text,
.service-step__text {
  color: var(--stellar-site---color--c1-75);
  margin-top: 0;
  margin-bottom: 0;
  font-family: Open Sans, sans-serif;
  font-size: 1rem;
  line-height: 160%;
}

.service-steps {
  counter-reset: service-step;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.service-step {
  counter-increment: service-step;
  border-top: 1px solid var(--stellar-site---color--c1-10);
  padding-top: 1rem;
}

.service-step__title {
  color: var(--000);
  margin-top: 0;
  margin-bottom: .5rem;
  font-family: Open Sans, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 130%;
}

.service-step__title:before {
  content: "0" counter(service-step);
  color: var(--color--text-color-light-gray);
  margin-right: .625rem;
  font-weight: 700;
}

.service-projects {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  grid-template-columns: 1fr 1fr 1fr;
  display: grid;
}

.service-project {
  color: var(--000);
  text-decoration: none;
  display: block;
}

.service-project__img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 4px;
  width: 100%;
  height: auto;
  display: block;
}

.service-project__name {
  margin-top: .75rem;
  font-family: Open Sans, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  display: block;
}

.service-project:hover .service-project__name {
  text-decoration: underline;
}

.service-cta {
  border: 1px solid var(--stellar-site---color--c1-10);
  border-radius: 1.2rem;
  flex-flow: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
  display: flex;
}

.service-cta__text {
  color: var(--000);
  max-width: 34rem;
  margin: 0;
  font-family: Open Sans, sans-serif;
  font-size: 1.25rem;
  line-height: 140%;
}

.service-cta__btn {
  float: none;
  margin-left: 0;
  margin-right: 0;
}

@media screen and (max-width: 767px) {
  .service-grid,
  .service-steps {
    grid-template-columns: 1fr;
  }

  .service-projects {
    grid-template-columns: 1fr;
  }

  .service-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
  }

  .service-cta__text {
    font-size: 1.1rem;
  }
}

/* Cards on the /services/ hub: same block as .service-item, but the whole
   card is the link. */
.service-item--link {
  color: var(--000);
  border: 1px solid var(--stellar-site---color--c1-10);
  border-radius: 1.2rem;
  padding: 1.5rem;
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease;
  display: block;
}

.service-item--link:hover,
.service-item--link:focus-visible {
  border-color: var(--stellar-site---color--c1-40);
  background-color: var(--stellar-site---color--c1-04);
}

.service-item__more {
  color: var(--000);
  margin-top: 1rem;
  font-family: Open Sans, sans-serif;
  font-size: .875rem;
  font-weight: 600;
  display: inline-block;
}

.service-item--link:hover .service-item__more {
  text-decoration: underline;
}





/* ============================================================
   Hero showcase (home page)
   Five real project renders cross-fading behind the headline, each
   clickable through to its own page, with a drafting overlay in the
   same line language the preloader already uses. Built by
   js/hero-showcase.js; everything here is additive and the old hero
   photo is simply hidden on this page.
   ============================================================ */

/* The section used to take its height from the hero photo; that element is
   hidden now, so the height moves onto the section itself. */
.body .hero-section {
  /* single source of truth for the left edge: the copy is padded by it and the
     drafting rules are positioned on it, so they always line up */
  --hero-gutter: 2rem;
  /* the rule reads as a dimension line, so the copy sits inside it rather
     than butting against it -- shapes (buttons) especially looked glued on */
  --hero-indent: 1.25rem;
  background-color: #0b0b0d;
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* the original static photo is replaced by the showcase stage */
.body .hero-image-wrapper.about-photo._1-1 {
  display: none;
}

.hero-stage {
  z-index: 0;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-slide {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  position: absolute;
  inset: 0;
  transform: scale(1.06);
  transition: opacity 1.5s ease, transform 7s linear;
}

.hero-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Renders are bright at the top and dark at the bottom, so the scrim is
   weighted to the left and bottom where the copy sits, rather than flattening
   the whole image. */
.hero-scrim {
  background-image: linear-gradient(75deg, #0b0b0dfa 0%, #0b0b0dcc 32%, #0b0b0d4d 58%, #0b0b0d1a 100%),
                    linear-gradient(to top, #0b0b0de6 0%, #0b0b0d00 42%);
  position: absolute;
  inset: 0;
}

.hero-draft {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.hero-draft__v,
.hero-draft__h {
  background-color: #ffffff2b;
  position: absolute;
}

.hero-draft__v {
  top: 0;
  bottom: 0;
  width: 1px;
  transform: scaleY(0);
  transform-origin: top;
  animation: 1.5s cubic-bezier(.22, 1, .36, 1) .35s forwards hero-rule-v;
}

.hero-draft__v--l { left: var(--hero-gutter); }
.hero-draft__v--r { right: var(--hero-gutter); }

.hero-draft__h {
  left: 0;
  right: 0;
  bottom: 22%;
  height: 1px;
  transform: scaleX(0);
  transform-origin: 0;
  animation: 1.7s cubic-bezier(.22, 1, .36, 1) .55s forwards hero-rule-h;
}

.hero-draft__node {
  background-color: #0000;
  border: 1px solid #ffffff5c;
  border-radius: 50%;
  width: 9px;
  height: 9px;
  position: absolute;
  bottom: 22%;
  opacity: 0;
  animation: .5s ease 1.5s forwards hero-node-in;
  transform: translate(-50%, 50%);
}

.hero-draft__node--l { left: var(--hero-gutter); }
.hero-draft__node--r { left: auto; right: var(--hero-gutter); transform: translate(50%, 50%); }

.hero-draft__tick {
  background-color: #ffffff4d;
  width: 15px;
  height: 1px;
  position: absolute;
  opacity: 0;
  animation: .5s ease 1.35s forwards hero-node-in;
}

.hero-draft__tick--l { top: 28%; left: var(--hero-gutter); transform: translateX(-50%); }
.hero-draft__tick--r { top: 46%; right: var(--hero-gutter); transform: translateX(50%); }

@keyframes hero-rule-v { to { transform: scaleY(1); } }
@keyframes hero-rule-h { to { transform: scaleX(1); } }
@keyframes hero-node-in { to { opacity: 1; } }

/* ---- copy sits above the stage ----
   It was absolutely positioned with a 15rem top margin so it could be placed
   on the old photo. The block is taller now (two CTAs + the slide HUD), so it
   goes back into normal flow and the section's own flex centring places it. */
.body .hero-slogan-block.hero-slogan-wrap {
  z-index: 2;
  width: 100%;
  position: relative;
}

.body .hero-copy-column {
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: 46rem;
  height: auto;
  min-height: 0;
  margin: 0;
  padding-left: calc(var(--hero-gutter) + var(--hero-indent));
  padding-right: var(--hero-gutter);
  position: static;
  transform: none;
}

@media screen and (min-width: 1280px) {
  .body .hero-section { --hero-gutter: 5rem; }
}

@media screen and (min-width: 1440px) {
  .body .hero-section { --hero-gutter: 8rem; }
  .body .hero-copy-column { max-width: 52rem; }
}

.body .hero-title.hero-title-text,
.body .hero-subtitle.hero-subtitle-text {
  color: var(--white);
}

/* Optical alignment: at 64px the "D" carries ~5.75px of left side bearing, so
   its box sitting on the same x as the subtitle and the buttons still reads as
   indented. Measured 5.75/64 = .09em, expressed in em so it holds at every
   breakpoint instead of only the one it was measured at. */
.body .hero-title.hero-title-text {
  margin-left: -.09em;
}

.body .hero-subtitle.hero-subtitle-text {
  /* was an inline style="max-width:min(500px,85vw)" straight from the export,
     which beat every stylesheet rule -- 85vw is 331px on a 390px phone, so the
     line ran to the edge no matter what the media query asked for */
  color: var(--stellar-site---color--c2-80);
  max-width: 500px;
}

/* ---- the two calls to action ----
   The export's own hero button is superseded by this pair, so it is hidden at
   every width rather than only on phones -- it was still ghosting through
   above the new buttons on desktop. */
.body .hero-section .btn-primary.white {
  display: none;
}

.hero-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-top: 2rem;
  display: flex;
}

.hero-btn {
  color: #0b0b0d;
  cursor: pointer;
  background-color: var(--white);
  border: 1px solid #fff;
  border-radius: 999px;
  align-items: center;
  gap: .625rem;
  height: 52px;
  padding: 0 1.5rem;
  font-family: Open Sans, sans-serif;
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .25s cubic-bezier(.22,1,.36,1), background-color .25s ease, color .25s ease;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.hero-btn--ghost {
  color: var(--white);
  background-color: #0000;
  border-color: #ffffff5c;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hero-btn:hover,
.hero-btn:focus-visible {
  transform: translateY(-2px);
}

.hero-btn--ghost:hover,
.hero-btn--ghost:focus-visible {
  color: #0b0b0d;
  background-color: var(--white);
  border-color: #fff;
}

.hero-btn__arrow {
  transition: transform .3s cubic-bezier(.22,1,.36,1);
  display: inline-flex;
}

.hero-btn:hover .hero-btn__arrow {
  transform: translate(3px, -3px);
}

/* ---- caption chip + slide ticks ---- */
/* The ticks tell you which project the caption is naming, so they belong next
   to it. space-between across a full-width row put them at the far edge of a
   1512px screen, a whole viewport away from the name they refer to -- the eye
   had to travel to connect the two. Stacked directly under the caption now. */
.hero-hud {
  flex-direction: column;
  align-items: flex-start;
  gap: 1.125rem;
  margin-top: 3rem;
  display: flex;
}

.hero-chip {
  color: var(--white);
  border-left: 1px solid #ffffff40;
  flex-direction: column;
  gap: .125rem;
  margin-left: calc(-1 * var(--hero-indent));
  padding-left: var(--hero-indent);
  text-decoration: none;
  transition: border-color .25s ease, transform .25s ease;
  display: flex;
}

.hero-chip:hover {
  border-left-color: #fff;
  transform: translateX(3px);
}

.hero-chip__eyebrow {
  color: var(--stellar-site---color--c2-60);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-family: Open Sans, sans-serif;
  font-size: .625rem;
}

.hero-chip__name {
  font-family: Open Sans, sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
}

.hero-chip__kind {
  color: var(--stellar-site---color--c2-60);
  font-family: Open Sans, sans-serif;
  font-size: .8125rem;
}

.hero-chip.is-in .hero-chip__name,
.hero-chip.is-in .hero-chip__kind {
  animation: .5s ease both hero-chip-in;
}

@keyframes hero-chip-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.hero-ticks {
  gap: .5rem;
  display: flex;
}

/* Sitting on the render rather than at the screen edge, they need a touch
   more presence to stay readable, and a bigger hit area than 3px. */
.hero-ticks {
  margin-left: calc(-1 * var(--hero-indent));
  padding-left: var(--hero-indent);
}

.hero-tick {
  cursor: pointer;
  background-color: #0000;
  border: none;
  border-radius: 0;
  width: 38px;
  height: 14px;
  padding: 0;
  position: relative;
  overflow: visible;
}

.hero-tick:before {
  content: "";
  background-color: #ffffff47;
  border-radius: 999px;
  height: 2px;
  position: absolute;
  inset: 6px 0 auto;
}

.hero-tick:hover:before {
  background-color: #ffffff8f;
}

.hero-tick__fill {
  background-color: var(--white);
  border-radius: 999px;
  height: 2px;
  display: block;
  position: absolute;
  inset: 6px 0 auto;
  transform: scaleX(0);
  transform-origin: 0;
}

.hero-tick.is-active .hero-tick__fill {
  animation: 5.2s linear forwards hero-tick-fill;
}

@keyframes hero-tick-fill {
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: opacity .3s linear; transform: none; }
  .hero-draft__v { animation: none; transform: scaleY(1); }
  .hero-draft__h { animation: none; transform: scaleX(1); }
  .hero-draft__node, .hero-draft__tick { animation: none; opacity: 1; }
  .hero-tick.is-active .hero-tick__fill { animation: none; transform: scaleX(1); }
  .hero-chip.is-in .hero-chip__name,
  .hero-chip.is-in .hero-chip__kind { animation: none; }
}

@media screen and (max-width: 991px) {
  .hero-hud { margin-top: 2.25rem; }
}

@media screen and (max-width: 767px) {
  .body .hero-section {
    --hero-gutter: 1.25rem;
    --hero-indent: 1rem;
    /* 100vh on a phone is measured with the address bar HIDDEN, so the section
       overshoots and the next one peeks in by however tall that bar is -- which
       differs between iOS and Android, hence "fine on my iPhone, short on his
       Samsung". svh is the small viewport height, i.e. address bar VISIBLE, so
       the section fits on every handset. vh first as the fallback. */
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
  }

  /* A vertical wash: the copy runs the height of the screen here, unlike
     desktop where it sits in the lower left, so the corner-weighted scrim left
     the headline and subtitle over bright sky. */
  .body .hero-section .hero-scrim {
    background-image: linear-gradient(#0b0b0de0 0%, #0b0b0d94 34%, #0b0b0d99 52%, #0b0b0de6 82%, #0b0b0df2 100%);
  }

  .body .hero-copy-column {
    box-sizing: border-box;
    flex-direction: column;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    padding-top: 5.5rem;
    padding-right: var(--hero-gutter);
    padding-bottom: 2rem;
    padding-left: calc(var(--hero-gutter) + var(--hero-indent));
    display: flex;
    position: static;
    transform: none;
  }

  .body .hero-title.hero-title-text {
    text-align: left;
    width: auto;
    max-width: 13rem;
    margin: auto 0 .625rem;
    font-size: 1.875rem;
    line-height: 105%;
    display: block;
  }

  .body .hero-subtitle.hero-subtitle-text {
    color: #fffffff2;
    text-align: left;
    width: auto;
    max-width: 17rem;
    margin: 0;
    font-size: .9375rem;
    line-height: 148%;
    display: block;
  }

  .hero-actions { gap: .5rem; margin-top: 1.5rem; margin-bottom: auto; }
  .hero-btn { height: 46px; padding: 0 1.125rem; font-size: .875rem; }

  /* pinned to the bottom, so the space between the pitch and the caption is
     whatever this particular phone has spare rather than a fixed gap */
  .hero-hud {
    gap: .875rem;
    padding-top: 2rem;
  }

  .hero-tick { width: 30px; }
}

@media screen and (max-width: 379px) {
  .body .hero-title.hero-title-text { font-size: 1.75rem; }
  .body .hero-subtitle.hero-subtitle-text { font-size: .875rem; }
  .hero-btn { height: 44px; padding: 0 1rem; font-size: .8125rem; }
}


/* ============================================================
   Navbar + burger menu: more see-through
   The blur is deliberately left exactly as it was (5px desktop /
   4px phone, plus the fixed-ancestor workaround in menu-blur-fix.js).
   Only the white behind it changes: 45%, down from the export's 60%.

   45% is the floor, not a taste call. The nav text is black and the
   hero slides run dark right under the bar; blended over the darkest
   frame the contrast works out at 5.15:1, while 40% drops to 4.37:1
   and fails WCAG AA. Going more transparent than this needs the nav
   text to change colour too.
   ============================================================ */
.navbar,
.navbar.w-nav {
  background-color: #ffffff73;
}

/* Only below 992px, where .nav-menu-copy is the drop-down panel. On desktop it
   is an inline container sitting INSIDE the bar, so giving it a background of
   its own stacked a second 45% layer over the navbar's and showed up as a
   brighter rectangle behind the links. The export left it transparent there
   for exactly this reason. */
@media screen and (max-width: 991px) {
  .nav-menu-copy,
  .nav-menu-copy.w-nav-menu,
  .nav-menu-copy.bg-colornavbar {
    background-color: #ffffff73;
    background-image: none;
  }
}

/* ============================================================
   "Зв'язатись" — one visual language for one action
   The service cards, the "Чому ми?" section and the burger menu
   all offer the same action and looked like three unrelated
   controls. They now share the site's own pill vocabulary:
   outlined pill for the in-page CTAs, solid pill for the menu,
   which mirrors .btn-primary-inner's existing secondary/primary
   split rather than inventing a new one.
   ============================================================ */

/* --- shared: outlined pill --------------------------------- */
/* Border was #00000080 — a 50% hairline that read as a dotted
   suggestion rather than an edge. 70% puts the boundary at 9:1
   against white while staying lighter than the text itself. */
.service-card-cta,
.page-link-block {
  border: 1px solid #090611b3;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}

.service-card-cta:hover,
.service-card-cta:focus-visible {
  color: var(--white);
  background-color: #090611;
  border-color: #090611;
}

/* --- "Чому ми?": was a 32px underlined text link ------------ */
.page-link-block {
  box-sizing: border-box;
  color: #090611;
  background-color: #0000;
  border-radius: 1.2rem;
  align-items: center;
  gap: .5rem;
  height: 52px;
  padding: 0 1.625rem;
  text-decoration: none;
  display: inline-flex;
}

/* its underline is IX2-animated on hover; the pill has its own
   hover now, so the line is hidden rather than left half-driving
   a control it no longer belongs to */
.page-link-block .page-link-underline {
  display: none;
}

.page-link-block .font-size-medium-2 {
  color: inherit;
  padding: 0;
  font-family: Open Sans, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}

.page-link-block:hover,
.page-link-block:focus-visible {
  color: var(--white);
  background-color: #090611;
  border-color: #090611;
}

/* --- burger menu: solid pill, the primary weight ------------ */
.nav-cta {
  display: none;
}

@media screen and (max-width: 991px) {
  .nav-cta {
    box-sizing: border-box;
    color: var(--white);
    background-color: #090611;
    border: 1px solid #090611;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    width: calc(100% - 3rem);
    height: 52px;
    margin: .25rem auto 1.25rem;
    font-family: Open Sans, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .22s ease, color .22s ease;
    display: flex;
  }

  .nav-cta:hover,
  .nav-cta:focus-visible {
    color: #090611;
    background-color: #0000;
  }

  .nav-cta__arrow {
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
  }

  .nav-cta:hover .nav-cta__arrow {
    transform: translate(2px, -2px);
  }
}


/* The CTA banner's content sat 99px high: the container is a fixed 798px and
   its content stacked from the top, leaving 232px above and 430px below.
   Centring inside the container centres it in the section too, since the
   section's own 96px padding is already symmetric. */
.cta-banner-container {
  flex-direction: column;
  justify-content: center;
  display: flex;
}

/* ============================================================
   .visually-hidden
   Standard sr-only: the element stays in the DOM with its text, is
   read by screen readers and counted by search engines, but takes up
   no space and cannot be seen.

   Deliberately NOT display:none or visibility:hidden -- both remove
   the element from the accessibility tree, which would undo the whole
   point of keeping the h1. clip-path does the hiding in modern
   browsers; the legacy clip is kept for older ones. white-space:nowrap
   stops the 1px box from forcing odd line breaks.
   ============================================================ */
.visually-hidden {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

/* A .page-header whose only child is the hidden title still occupied space:
   .visually-hidden is position:absolute, so the wrapper collapses to 0px --
   but a 0px flex item in .vertical-wrapper (gap: 64px) still takes a 64px
   gap, leaving a band of empty page where the heading used to be.

   display:contents makes the wrapper generate no box at all, so it stops
   being a flex item and the gap goes with it. The h1 itself stays in the
   DOM and in the accessibility tree -- which display:none on the wrapper
   would have destroyed, taking the h1 down with it.

   Scoped by :has so it only fires when nothing visible is left inside: the
   service pages keep a visible subtitle in the same wrapper and are
   untouched. */
.page-header:not(:has(> :not(.visually-hidden))) {
  display: contents;
}