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,h2.h1-look{
  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:#e6e6e6;
  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;
}

:where(button.w-popover-trigger), :where(button.w-modal-trigger) {
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
  background-color: #0000;
  border: 0;
  margin: 0;
  padding: 0;
}

.w-popover {
  position-anchor: none;
}

:where(.w-popover[data-w-popover-backdrop-animated])::backdrop {
  animation: var(--w-backdrop-animation, none);
}

:where(.w-popover) {
  --w-backdrop-animation: initial;
}

.w-popover-mask {
  opacity: 0 !important;
  clip-path: none !important;
  pointer-events: auto !important;
  border: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: fixed !important;
  inset: 0 !important;
  transform: none !important;
}

.w-popover-mask[popover] {
  translate: none !important;
  rotate: none !important;
  scale: none !important;
}

.w-popover-mask::backdrop {
  display: none !important;
}

.w-popover-mask:not(:popover-open) {
  display: none !important;
}

@supports not selector(:popover-open) {
  .w-popover-mask {
    display: none !important;
  }
}

.w-popover[popover]:not(:popover-open) {
  display: none;
}

.w-modal:not([open]):not([popover]) {
  display: none;
}

.w-modal[popover]:not(:popover-open) {
  display: none;
}

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,h2.h1-look{
  margin-bottom: 10px;
  font-weight: bold;
}

h1,h2.h1-look{
  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:#e6e6e6 #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:#e6e6e6;
  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:#e6e6e6;
}

.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:#e6e6e6;
  -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:#e6e6e6;
  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:#e6e6e6;
  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:#e6e6e6;
  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;
}

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

@font-face {
  font-family: Bdogrotesk;
  src: url("/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6a98e96c08306b0828600fc1_BDOGrotesk-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Bdogrotesk;
  src: url("/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6a98e96c08306b0828600fd4_BDOGrotesk-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Bdogrotesk;
  src: url("/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6a98e96c08306b0828600fd5_BDOGrotesk-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Bdogrotesk;
  src: url("/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6a98e96c08306b0828600fd6_BDOGrotesk-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Bdogrotesk;
  src: url("/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6a98e96c08306b0828600fd7_BDOGrotesk-DemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #030303;
  --_typography---font-family: "neue-haas-grotesk-text", Arial, sans-serif;
  --white: #fff;
  --_typography---font-size--body-s: 1rem;
  --_typography---font-weight--font-weight-light: 300;
  --_typography---font-size--heading-h1: 3.5rem;
  --_typography---line-height--line-height-m: 3.875rem;
  --_typography---font-size--heading-h2: 1.75rem;
  --_typography---line-height--line-height-s: 2.25rem;
  --_typography---font-size--body-xs: .875rem;
  --transparent: #fff0;
  --_typography---font-weight--font-weight-regular: 400;
  --_typography---font-weight--font-weight-medium: 500;
  --black-soft: #1a1a1a;
  --_typography---font-size--display-m: 4.5rem;
  --spacing-xl: 220px;
  --_typography---font-size--display-xl: 11.25rem;
  --_typography---line-height--line-height-xxl: 10.5rem;
  --_typography---font-weight--font-weight-bold: 700;
  --_typography---font-weight--font-weight-semibold: 600;
  --_typography---line-height--line-height-l: 5rem;
  --grey-strong: #777;
  --grey-medium: #9a9a9a;
  --_typography---font-size--display-l: 7.5rem;
  --_typography---line-height--line-height-xl: 7.5rem;
  --color-dark-grey\<deleted\|variable-3019c752-970d-a991-2730-b1be4d26afc0\>: #1a1a1a;
  --spacing-l: 180px;
  --_typography---font-size--body-m: 1.125rem;
  --_typography---font-size--body-l: 1.25rem;
  --_typography---font-size--body-xl: 1.5rem;
}

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

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

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

body {
  background-color: var(--black);
  font-family: var(--_typography---font-family);
  color: var(--white);
  font-size: var(--_typography---font-size--body-s);
  line-height: 1.25rem;
  font-weight: var(--_typography---font-weight--font-weight-light);
  overflow: visible;
}

h1,h2.h1-look{
  font-size: var(--_typography---font-size--heading-h1);
  line-height: var(--_typography---line-height--line-height-m);
  letter-spacing: -1px;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
}

h2 {
  font-size: var(--_typography---font-size--heading-h2);
  line-height: var(--_typography---line-height--line-height-s);
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 500;
}

a {
  color: var(--white);
  text-align: center;
  text-decoration: none;
}

ul {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
}

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

label {
  font-size: var(--_typography---font-size--body-xs);
  margin-bottom: 5px;
  font-weight: 400;
  display: block;
}

.hero-nav-menu {
  background-color: var(--transparent);
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
}

.navbar {
  z-index: 5;
  background-color: var(--transparent);
  width: 100%;
  position: relative;
}

.nav-brand {
  color: var(--white);
  font-size: 32px;
  line-height: 40px;
  font-weight: var(--_typography---font-weight--font-weight-regular);
  align-items: center;
  display: flex;
}

.nav-wrapper {
  z-index: 3;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px 0;
  display: flex;
  position: static;
}

.nav-link {
  border-bottom:1px solid var(--#e6e6e6);
  color: var(--white);
  line-height: 1.1rem;
  font-weight: var(--_typography---font-weight--font-weight-medium);
  text-align: center;
  margin-left: 30px;
  margin-right: 30px;
  padding: 35px 0 0;
}

.nav-link.big-text {
  border-bottom-color: var(--black-soft);
  font-size: var(--_typography---font-size--display-m);
}

.nav-link.big-text.line-height {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: center;
  align-items: center;
  padding-top: 0;
  display: flex;
}

.nav-link.big-text.line-height.cc-1 {
  position: relative;
}

.menu-button {
  padding: 0;
  display: block;
}

.menu-button:active, .menu-button:focus, .menu-button.w--open {
  background-color: var(--transparent);
}

.hamburger-menu {
  width: 2rem;
}

.container {
  width: 100%;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative;
}

.container.hero {
  grid-column-gap: 200px;
  grid-row-gap: 200px;
  letter-spacing: 0;
  text-transform: none;
  flex-flow: column;
  justify-content: flex-end;
  height: 100%;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  position: relative;
  overflow: visible;
}

.container.fluid {
  max-width: 100%;
}

.container.padding-top {
  padding-top: var(--spacing-xl);
  font-family: var(--_typography---font-family);
  text-decoration: underline;
  position: static;
  overflow: visible;
}

.container.padding-top.projects {
  display: block;
  position: static;
}

.container.award {
  flex-flow: column;
  justify-content: space-between;
  height: 100vh;
  padding-top: 40px;
  padding-bottom: 60px;
  display: flex;
}

.container.password {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: block;
  position: relative;
}

.container.password.margin-top {
  position: static;
}

.hero {
  letter-spacing: -2px;
  text-transform: uppercase;
}

.display-01 {
  font-family: var(--_typography---font-family);
  font-size: var(--_typography---font-size--display-xl);
  line-height: var(--_typography---line-height--line-height-xxl);
  font-weight: var(--_typography---font-weight--font-weight-bold);
  letter-spacing: -6px;
  overflow-wrap: anywhere;
  vertical-align: baseline;
  align-self: auto;
  display: block;
}

.display-01.hero-title {
  font-family: var(--_typography---font-family);
  margin-bottom: -25px;
  font-size: 15rem;
  line-height: 13rem;
}

.display-01.footer-title {
  font-size: 15rem;
  line-height: 13rem;
}

.icon_svg {
  color: var(--white);
}

.page-padding {
  flex: 1;
  padding-left: 30px;
  padding-right: 30px;
  position: static;
}

.page-padding._100vh {
  height: 100vh;
}

.page-padding.top {
  z-index: 1;
  padding-top: 30px;
  position: relative;
}

.page-padding.top-inner {
  padding-top: 100px;
}

.top-bar {
  border-top: 1px solid var(--black-soft);
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  margin-bottom: 80px;
  padding-top: 20px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.top-bar:where(.w-variant-77caaeeb-9e74-5c26-31db-190cb153edbe) {
  border: 0 solid #000;
  padding-top: 0;
}

.main-content {
  grid-column-gap: 10%;
  grid-row-gap: 80px;
  grid-template: "."
  / 15% 75%;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  justify-content: center;
  place-items: stretch stretch;
  display: flex;
  position: static;
  overflow: visible;
}

.about-fact {
  justify-content: space-between;
  display: flex;
}

.about-fact.about {
  padding-left: 70px;
  padding-right: 70px;
}

.about-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: relative;
}

.soft-text {
  color: #636363;
}

.soft-text.font-weight-light {
  font-weight: var(--_typography---font-weight--font-weight-light);
}

.display-03 {
  font-size: var(--_typography---font-size--display-m);
  line-height: var(--_typography---line-height--line-height-l);
  font-weight: var(--_typography---font-weight--font-weight-medium);
  letter-spacing: -3px;
  align-self: flex-start;
}

.display-03.padding-top {
  padding-top: 130px;
  display: none;
}

.fact-text {
  line-height: 1.8rem;
}

.fact-wrap {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  flex-flow: column;
  align-items: center;
  display: flex;
}

.fact-wrap.right {
  margin-right: 50px;
}

.fact-wrap.about {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: center;
  align-items: center;
}

.project-content-wrapper {
  grid-column-gap: 2%;
  grid-row-gap: 2%;
  grid-template-rows: auto;
  grid-template-columns: 23% 50% 23%;
  grid-auto-columns: 1fr;
  place-items: start stretch;
  display: grid;
  position: relative;
}

.body-text-4 {
  line-height: 1.5rem;
  font-weight: var(--_typography---font-weight--font-weight-light);
}

.body-text-4.soft-text {
  color: var(--grey-strong);
  letter-spacing: 0;
}

.project-info {
  justify-content: space-between;
  display: flex;
}

.project-wrap {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: column;
  justify-content: flex-start;
  display: flex;
  position: relative;
}

.project-card {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  max-width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.project-card.cc-1 {
  position: static;
}

.project-bg {
  z-index: 1;
  width: 100%;
  height: 100%;
  position: static;
}

.project-button {
  position: sticky;
  top: 100px;
}

.padding-top {
  padding-top: 220px;
}

.button-link {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.button-link.padding-top {
  padding-top: 140px;
}

.circle-link {
  border: 1px solid var(--black-soft);
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: 3.75rem;
  height: 3.75rem;
  display: flex;
}

.left-content {
  position: relative;
}

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

.service-card {
  grid-column-gap: 300px;
  grid-row-gap: 300px;
  border: 1px solid var(--black-soft);
  flex-flow: column;
  justify-content: space-between;
  margin-top: -1px;
  margin-left: -1px;
  padding: 40px;
  display: flex;
}

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

.service-icon.license {
  width: 40px;
}

.service-info {
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}

.body-text-5 {
  font-size: var(--_typography---font-size--body-xs);
  line-height: 1.25rem;
  font-weight: var(--_typography---font-weight--font-weight-light);
}

.service-left {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}

.section-award {
  height: 400vh;
  margin-top: var(--spacing-xl);
  display: none;
  position: relative;
}

.award-image {
  z-index: -1;
  object-fit: cover;
  width: 100%;
  height: 100vh;
  position: absolute;
  overflow: hidden;
}

.dark-bg {
  z-index: 0;
  background-color: var(--black);
  opacity: .2;
  width: 100%;
  height: 100%;
  position: absolute;
}

.award-container {
  z-index: 0;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  height: 100vh;
  display: flex;
  position: sticky;
  top: 0;
}

.award-bottom-wrap {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  text-align: center;
  grid-template-rows: auto;
  grid-template-columns: 25% 50% 25%;
  grid-auto-columns: 1fr;
  align-self: stretch;
  max-width: 100%;
  display: grid;
  overflow: hidden;
}

.award-title-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  display: flex;
}

.blank-space {
  opacity: 0;
}

.quote-top {
  justify-content: space-between;
  display: flex;
}

.quote-info {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}

.feedback-wrapper {
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: block;
}

.client-image-wrap {
  position: relative;
  overflow: hidden;
}

.align-right {
  position: sticky;
  top: 100px;
}

.client-info {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
  overflow: visible;
}

.client-logo-wrap {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 100px;
  margin-bottom: 0;
  display: grid;
}

.client-logo {
  border: 1px solid var(--black-soft);
  justify-content: center;
  align-items: center;
  padding: 60px 50px;
  display: flex;
}

.price-card {
  border: 1px solid #1a1a1a;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: -1px;
  display: grid;
}

.price {
  flex-flow: column;
  justify-content: space-between;
  padding: 30px;
  display: flex;
}

.package-list-group {
  list-style-type: none;
}

.package-list {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  align-items: center;
  margin-bottom: 20px;
  display: flex;
}

.package-feature {
  grid-column-gap: 70px;
  grid-row-gap: 70px;
  border-left: 1px solid #1a1a1a;
  flex-flow: column;
  padding: 30px;
  display: flex;
}

.button-primary {
  border:1px solid var(--#e6e6e6);
  font-weight: var(--_typography---font-weight--font-weight-regular);
  justify-content: center;
  align-items: center;
  padding: 20px 30px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.div-block-4 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  align-items: flex-end;
  display: flex;
}

.project-left {
  align-items: flex-start;
  display: flex;
  position: sticky;
  top: 100px;
}

.code-embed-2, .code-embed-4 {
  display: none;
}

.faq-wrap {
  justify-content: center;
  align-items: center;
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  overflow: hidden;
}

.expand-icon {
  justify-content: center;
  align-items: center;
  width: 16px;
  display: flex;
}

.faq-item {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  border-bottom: 1px solid var(--black-soft);
  background-color: var(--transparent);
  color: var(--white);
  cursor: pointer;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  padding: 25px 0;
  display: flex;
  overflow: hidden;
}

.faq-item.w--current {
  background-color: var(--transparent);
  color: var(--white);
  padding-left: 0;
  padding-right: 0;
}

.faq-question {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  font-weight: var(--_typography---font-weight--font-weight-light);
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  overflow: hidden;
}

.faq-answer {
  color: var(--grey-medium);
  line-height: 1.33333rem;
  font-weight: var(--_typography---font-weight--font-weight-light);
  padding-top: 0;
  display: block;
  overflow: hidden;
}

.button-secondary {
  border:1px solid var(--#e6e6e6);
  color: var(--black);
  font-weight: var(--_typography---font-weight--font-weight-medium);
  padding: 20px 30px;
  position: relative;
  overflow: hidden;
}

.cta-wrap {
  grid-column-gap: 100px;
  grid-row-gap: 100px;
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.display-02 {
  font-size: var(--_typography---font-size--display-l);
  line-height: var(--_typography---line-height--line-height-xl);
  font-weight: var(--_typography---font-weight--font-weight-semibold);
  letter-spacing: -3px;
  align-self: auto;
}

.cta-image-main {
  z-index: 0;
  width: 45%;
  position: relative;
}

.cta-image-wrap {
  z-index: 1;
  width: 60%;
  margin-top: 10rem;
  position: relative;
}

.cta-image-right {
  z-index: -1;
  width: 45%;
  position: absolute;
  inset: auto 0% 0% auto;
}

.cta-image-left {
  z-index: -1;
  width: 45%;
  position: absolute;
  inset: auto auto 0% 0%;
}

.cta-title {
  z-index: 1;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.cta-image {
  align-self: auto;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  position: absolute;
  inset: 0% 0% auto;
}

.cta-bg-image {
  z-index: -1;
  width: 100%;
  max-width: 100%;
  height: 550px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: auto auto -80px;
}

.dark-gradient {
  z-index: 1;
  background-image: linear-gradient(180deg, black, #03030300 50%, var(--black));
  width: 100%;
  height: 100%;
  position: absolute;
}

.footer-top-wrap {
  border-top: 1px solid var(--black-soft);
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  display: flex;
}

.caps {
  text-transform: uppercase;
}

.social-link {
  text-transform: uppercase;
  transition: border .2s;
}

.social-link:hover {
  border-bottom:1px solid var(--#e6e6e6);
}

.social-icon-wrap {
  grid-column-gap: 21px;
  grid-row-gap: 21px;
  display: flex;
}

.bottom-content {
  flex-flow: row;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 300px;
  padding-bottom: 20px;
  display: flex;
  position: relative;
}

.copyright-symb {
  font-size: 8.1rem;
  line-height: 6rem;
  font-weight: var(--_typography---font-weight--font-weight-semibold);
  align-self: flex-start;
  margin-top: 15px;
  display: block;
}

.year {
  margin-top: 41px;
}

.footer-bg-image {
  z-index: -1;
  object-fit: cover;
  width: 100%;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: auto 0% 0%;
  overflow: visible;
}

.section-footer {
  position: relative;
  overflow: hidden;
}

.page-wrapper {
  overflow: visible;
}

.section {
  height: 70svh;
  position: relative;
  overflow: visible;
}

.section.padding-top.morespace {
  margin-top: 20rem;
  overflow: hidden;
}

.section.section-cta {
  margin-top: 30rem;
  overflow: visible;
}

.section.about_section {
  margin-top: 15vh;
  margin-bottom: 5vh;
}

.section.price, .section.feedback {
  display: none;
}

.image-placeholder {
  position: relative;
}

.image-only {
  width: 100%;
}

.faq-icon-2 {
  justify-content: center;
  align-items: center;
  display: flex;
}

.nav-number {
  font-size: var(--_typography---font-size--body-s);
  line-height: 1rem;
  font-weight: var(--_typography---font-weight--font-weight-regular);
  letter-spacing: 0;
  padding-bottom: 20px;
}

.nav-link-wrap {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  flex-flow: column;
  justify-content: center;
  align-self: center;
  align-items: stretch;
  margin-top: 10%;
  margin-bottom: auto;
  display: flex;
}

.nav-underline {
  z-index: 1;
  background-color: #e6e6e6;
  height: 1px;
  position: absolute;
  inset: auto 0% 0%;
}

.project-bg-wrap {
  z-index: -1;
  display: block;
  position: absolute;
}

.award-wrapper {
  width: 100%;
  max-width: 100%;
  height: 100vh;
  position: relative;
}

.award-wrapper.cc-2 {
  z-index: -2;
  display: block;
  position: absolute;
}

.award-wrapper.cc-1 {
  z-index: 1;
  display: block;
}

.award-wrapper.cc-3 {
  z-index: -3;
  display: block;
  position: absolute;
}

.award-wrapper.cc-4 {
  z-index: -4;
  position: absolute;
}

.faq-holder {
  margin-left: auto;
  margin-right: auto;
}

.tabs-content {
  display: none;
}

.client-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

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

.hero-image-shape-2 {
  z-index: 2;
  color: #030303;
  width: 100px;
  position: absolute;
  inset: -1% -1% auto auto;
}

.hero-image-shape-2.small-size {
  width: 40px;
}

.right-arrow {
  inset: auto 0% 0% auto;
}

.slider-button {
  display: none;
}

.feedback-slider {
  overflow: hidden;
}

.feedback-holder {
  grid-column-gap: 100px;
  grid-row-gap: 100px;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: flex;
}

.feeback-slider-wrap {
  background-color: #ddd0;
  height: auto;
  overflow: hidden;
}

.left-arrow {
  width: auto;
  inset: auto 88px 0% auto;
}

.feedback-main {
  grid-column-gap: 70px;
  grid-row-gap: 60px;
  grid-template-rows: auto auto;
  grid-template-columns: .25fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  display: grid;
  position: relative;
}

.feddback-mask {
  overflow: hidden;
}

.project-card-link {
  aspect-ratio: 3 / 2;
  object-fit: fill;
  width: 100%;
  max-width: 100%;
  height: 100%;
  position: static;
  top: 30px;
  overflow: hidden;
}

.project-image {
  box-sizing: border-box;
  aspect-ratio: auto;
  object-fit: cover;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.button-bg {
  z-index: -1;
  background-color: var(--white);
  width: 100%;
  height: 100%;
  position: absolute;
  left: -100%;
}

.circle-link-white {
  border: 1px solid var(--black-soft);
  background-color: var(--white);
  width: 3.75rem;
  height: 3.75rem;
  color: var(--black);
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.long-arrow-black {
  justify-content: center;
  align-items: center;
  display: flex;
}

.button-bg-seondary {
  z-index: -1;
  background-color: var(--white);
  width: 100%;
  position: absolute;
  inset: 0% auto 0% 0%;
}

.pricing-tab-menu {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  border: 1px solid var(--black-soft);
  width: 250px;
  color: var(--white);
  border-radius: 100px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 30px;
  display: flex;
}

.pricing-tab {
  background-color: var(--transparent);
  width: 100%;
  color: var(--white);
  text-align: left;
  border-radius: 100px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.pricing-tab.w--current {
  background-color: var(--white);
  color: var(--black);
  text-align: left;
}

.pricing-tab-text {
  font-weight: var(--_typography---font-weight--font-weight-regular);
  text-align: center;
}

.div-block-12 {
  position: relative;
}

.nav-menu-text {
  line-height: 3.7rem;
}

.discount-offer {
  position: absolute;
  inset: 20px 0% auto auto;
}

.client-rating {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  align-items: center;
  display: flex;
}

.footer-nav-wrap {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  display: flex;
}

.line {
  background-color: var(--white);
  width: 100%;
  height: 1px;
}

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

.about-hero_heading {
  z-index: 1;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: block;
  position: relative;
}

.about_hero-image {
  max-width: 100%;
  height: 100%;
  min-height: 650px;
  position: relative;
  overflow: hidden;
}

.about_hero-image-wrap {
  grid-template-rows: auto;
  grid-template-columns: 25% 40% 25%;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  margin-top: -75px;
  display: grid;
}

.about_hero-location {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  display: flex;
}

.about_hero-intro {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  justify-content: center;
  align-self: center;
  align-items: center;
  max-width: 950px;
  display: flex;
}

.about_stats {
  grid-column-gap: 80px;
  grid-row-gap: 80px;
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  padding-top: 80px;
  display: flex;
}

.align-center {
  align-self: center;
}

.flex-stretch {
  grid-column-gap: 20%;
  grid-row-gap: 20%;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}

.experience-item {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  border: 1px solid var(--color-dark-grey\<deleted\|variable-3019c752-970d-a991-2730-b1be4d26afc0\>);
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  margin-top: -1px;
  padding: 40px;
  display: flex;
}

.experience-position {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  flex-flow: column;
  display: flex;
}

.testimonial-wrap {
  grid-column-gap: 2%;
  grid-row-gap: 2%;
  grid-template-rows: auto;
  grid-template-columns: 26% 44% 26%;
  grid-auto-columns: 1fr;
  place-items: start stretch;
  display: grid;
  position: relative;
}

.testimonials_client-info {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.testimonials_left-content {
  justify-content: flex-start;
  align-items: flex-end;
  display: block;
  position: sticky;
  top: 100px;
}

.testimonial-item {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  border: 1px solid var(--color-dark-grey\<deleted\|variable-3019c752-970d-a991-2730-b1be4d26afc0\>);
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  padding: 30px;
  display: flex;
}

.testimonials_client-image {
  max-width: 50px;
  max-height: 50px;
  overflow: hidden;
}

.unsplash-image {
  object-fit: contain;
  object-position: 50% 50%;
  width: 100%;
  height: auto;
  display: block;
}

.client-name {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.about_testimonial-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}

.testimonials_right-content {
  position: sticky;
  top: 100px;
}

.global-heading {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  text-align: center;
  flex-flow: column;
  margin-bottom: 80px;
  display: flex;
}

.b-project-wrap {
  grid-column-gap: 18px;
  grid-row-gap: 40px;
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  align-items: start;
  display: grid;
}

.b-project-wrap.hide {
  display: none;
}

.margin-top {
  margin-top: var(--spacing-l);
}

.contact-form {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  flex-flow: column;
  display: flex;
}

.contac-form-wrap {
  max-width: 60%;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}

.contact-input {
  border-style: solid;
  border-width: 0 0 1px;
  border-color: black black var(--black-soft);
  background-color: var(--transparent);
  min-height: 45px;
  color: var(--white);
  padding: 0;
  transition: border-color .3s;
}

.contact-input:hover {
  border-bottom-color: var(--white);
}

.contact-input:focus {
  border-left-width: 0;
}

.contact-input::placeholder {
  color: var(--grey-strong);
  font-size: var(--_typography---font-size--body-s);
}

.contact-input.text-filed {
  min-height: 200px;
}

.contact-field {
  margin-bottom: 0;
  font-weight: 400;
}

.contact-button {
  border:1px solid var(--#e6e6e6);
  background-color: var(--white);
  color: var(--black);
  font-weight: var(--_typography---font-weight--font-weight-regular);
  padding: 20px;
  transition: color .3s, background-color .3s;
}

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

.heading-subtitle {
  max-width: 55%;
  font-size: var(--_typography---font-size--heading-h2);
  line-height: var(--_typography---line-height--line-height-s);
  margin-left: auto;
  margin-right: auto;
}

.heading-subtitle.full {
  max-width: 100%;
}

.project-image-wrap {
  max-width: 100%;
  margin-bottom: 80px;
}

.project-details-block {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-end;
  max-width: 50%;
  margin-left: auto;
  padding-bottom: 120px;
  display: flex;
}

.project-item {
  border-bottom: 1px solid var(--black-soft);
  justify-content: space-between;
  padding-top: 30px;
  padding-bottom: 30px;
  display: flex;
}

.project-item-wrap, .project-details-title {
  width: 100%;
}

.body-text-2 {
  max-width: 100%;
  font-size: var(--_typography---font-size--body-l);
  -webkit-text-stroke-color: #fff;
  line-height: 1.75rem;
  overflow: visible;
}

.body-text-2.soft-text.link {
  color: var(--grey-strong);
  transition: all .3s;
}

.body-text-2.soft-text.link:hover {
  color: var(--white);
}

.body-text-2.link-underline {
  border-bottom: 1px #000;
  text-decoration: underline;
  transition: all .3s, border-color .3s;
  overflow: visible;
}

.body-text-2.link-underline:hover {
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

.body-text-2.middle {
  text-align: center;
  max-width: 50%;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

.project-text {
  color: var(--grey-medium);
}

.project-thumb-image {
  object-fit: cover;
  width: 100%;
  height: 600px;
}

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

.projec-image-main {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.about-animation-block {
  background-color: var(--white);
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0% 0 0% -100%;
}

.about_client-info {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.bg-line {
  background-color: #e6e6e6;
  width: 1px;
  max-width: 100%;
  height: 100%;
}

.plus-icon-shape {
  color:#e6e6e6;
  flex: 0 auto;
}

.bg-line-wrap {
  opacity: .1;
  justify-content: space-between;
  height: 100%;
  padding-left: 30px;
  padding-right: 30px;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}

.hero-top {
  flex-flow: row;
  flex: 0 auto;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: -1rem;
  display: flex;
  position: relative;
}

.body-shape {
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
}

.body-shape.left {
  inset: 0% auto auto 0%;
}

.body-shape.middle {
  align-self: center;
  inset: auto 0%;
}

.body-shape.right {
  inset: 0% 0% auto auto;
}

.hero_main {
  background-image: url("/assets/d3e54v103j8qbb.cloudfront.net/img/background-image.svg");
  background-size: auto;
  flex-flow: column;
  justify-content: space-between;
  height: 90svh;
  max-height: 90svh;
  margin: 0 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.hero-bottom {
  flex: 0 auto;
  justify-content: space-between;
  align-self: auto;
  margin-bottom: 50px;
  display: flex;
  position: relative;
}

.icon_svg-2 {
  color: #fdfdfd;
}

.hero-top-right {
  text-align: right;
  letter-spacing: 0;
  text-transform: none;
  line-height: 28px;
}

.hero-heading-small {
  margin-left: 25px;
}

.hero-top-left {
  letter-spacing: 0;
  text-transform: none;
  line-height: 24px;
}

.hero-heading-wrap {
  overflow-wrap: anywhere;
  flex: 0 auto;
  justify-content: center;
  align-items: flex-end;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
  overflow: visible;
}

.menu-bg-overlay {
  z-index: 0;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: #030303e6;
  width: 100%;
  height: 100vh;
  position: absolute;
  inset: -100vh 0% auto;
}

.hide {
  display: none;
}

.darken-layer {
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  overflow: hidden;
}

.hero-bg-image {
  object-fit: cover;
  background-color: #000;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.collection-list-wrap {
  position: sticky;
}

.collection-list-wrap.cc-1 {
  top: 30px;
}

.collection-list-wrap.cc-2 {
  top: 80px;
}

.collection-list-wrap.cc-3 {
  top: 130px;
}

.collection-list-wrap.cc-4 {
  top: 180px;
}

.video-play-btn {
  border:1px solid var(--#e6e6e6);
  background-color: var(--white);
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  display: flex;
  position: relative;
}

.video-text {
  font-size: var(--_typography---font-size--body-m);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.video-link {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.video-link-wrap {
  position: absolute;
  inset: auto 50px 50px auto;
}

.video-text-small {
  font-size: var(--_typography---font-size--body-xs);
  line-height: 1.25rem;
}

.video-play-icon {
  background-color: var(--transparent);
  width: 18px;
  color: var(--black);
  justify-content: center;
  align-items: center;
  display: flex;
}

.quote-main {
  max-width: 85%;
}

.body-text-3 {
  font-size: var(--_typography---font-size--body-m);
  line-height: 1.5rem;
}

.body-text-3.soft-text.ital {
  font-style: italic;
}

.nav-brang-img {
  width: 80px;
  height: 80%;
}

.heading {
  width: 75%;
  font-weight: 500;
}

.body-text-1 {
  font-size: var(--_typography---font-size--body-xl);
  line-height: 2rem;
  font-weight: var(--_typography---font-weight--font-weight-regular);
}

.body-text-1.error {
  text-align: center;
}

.error-main {
  grid-column-gap: 45px;
  grid-row-gap: 45px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.content-wrapper {
  flex-flow: column;
  justify-content: center;
  align-items: flex-end;
  display: flex;
}

.content-wrapper.typography {
  margin-top: 160px;
}

.content-wrapper.icon {
  margin-top: 120px;
}

.main-content-b {
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: 75%;
  display: block;
}

.main-content-b.small {
  max-width: 59%;
}

.color-box {
  background-color: var(--white);
  max-width: 100%;
  height: 100%;
}

.color-box.item-2 {
  background-color: var(--grey-medium);
}

.color-box.item-3 {
  background-color: var(--grey-strong);
}

.color-box.item-4 {
  background-color: var(--black-soft);
}

.color-box.item-5 {
  border: 1px solid var(--black-soft);
  background-color: var(--black);
}

.color-box.item-6 {
  border: 1px solid var(--black-soft);
  background-color: var(--transparent);
}

.main-content-block {
  grid-column-gap: 15px;
  grid-row-gap: 25px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.main-content-block.list {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  flex-flow: column;
  display: flex;
}

.main-content-block.flex-hr {
  display: flex;
}

.color-box-item {
  grid-column-gap: 11px;
  grid-row-gap: 11px;
  flex-flow: column;
  min-height: 250px;
  display: flex;
}

.typo-info {
  grid-column-gap: 61px;
  grid-row-gap: 61px;
  justify-content: flex-start;
  display: flex;
}

.typography-item {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  border-bottom: 1px solid var(--black-soft);
  flex-flow: column;
  padding-bottom: 50px;
  display: flex;
}

.text-color-60 {
  color: var(--grey-strong);
  font-weight: var(--_typography---font-weight--font-weight-regular);
}

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

.license-image {
  object-fit: cover;
  width: 250px;
  max-height: 200px;
  overflow: hidden;
}

.image-license-info {
  border-bottom: 1px solid var(--black-soft);
  justify-content: space-between;
  padding-top: 30px;
  padding-bottom: 30px;
  display: flex;
}

.license-image-wrap {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  display: flex;
}

.div-block-18 {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: row;
  display: flex;
}

.form-content-wrap {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.form-top {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-self: center;
  align-items: center;
  display: block;
}

.form-bottom {
  border: 1px solid var(--black-soft);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  text-align: center;
  background-color: #ffffff05;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 60%;
  margin-top: 60px;
  margin-left: auto;
  margin-right: auto;
  padding: 60px;
  display: block;
}

.lock-icon-wrap {
  border: 1px solid var(--grey-strong);
  border-radius: 200px;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.password-short-text {
  color: var(--grey-medium);
}

.password-text-wrap {
  padding-bottom: 20px;
}

.password-form-wrap {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  display: flex;
}

.passowrd-text-field {
  border:1px solid var(--#e6e6e6);
  background-color: var(--transparent);
  height: 60px;
  margin-bottom: 0;
}

.submit-button {
  background-color: var(--white);
  color: var(--black);
  font-weight: var(--_typography---font-weight--font-weight-regular);
  padding-left: 20px;
  padding-right: 20px;
}

.error-message {
  text-align: center;
  background-color: #da4949;
  max-width: 60%;
  margin-left: auto;
  margin-right: auto;
}

.license-date {
  margin-top: 5px;
}

.footer-nav {
  transition: all .2s;
}

.footer-nav:hover {
  color: var(--grey-strong);
}

.about-img-wrap {
  background-image: url("/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6a99141af7726409a9b7708a_fhmphoto-5-2-2.jpg");
  background-position: 50%;
  background-size: cover;
  width: 25%;
  min-width: 20vh;
  max-width: 25%;
  height: 30vh;
  min-height: 100%;
  position: relative;
  overflow: hidden;
}

.div-block-19 {
  z-index: 0;
  background-color: #0000005c;
  background-image: linear-gradient(#fff0, #0000008f);
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.ig-wrapper, .ig-wrapper-2 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.ig-bio {
  grid-column-gap: 300px;
  grid-row-gap: 300px;
  border: 1px solid var(--black-soft);
  flex-flow: column;
  justify-content: space-between;
  margin-top: -1px;
  margin-left: -1px;
  padding: 40px;
  display: flex;
}

.ig-wrapper-buttons {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.body-text-3-copy {
  font-size: var(--_typography---font-size--body-m);
  line-height: 1.5rem;
}

.body-text-3-copy.soft-text.ital {
  font-style: italic;
}

.div-block-28 {
  transform-style: preserve-3d;
}

@media screen and (min-width: 1280px) {
  .container.padding-top {
    padding-bottom: 0;
  }

  .project-content-wrapper {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 2.25fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: space-between;
    display: grid;
  }

  .body-text-4 {
    font-weight: var(--_typography---font-weight--font-weight-light);
  }

  .project-info {
    justify-content: space-between;
    display: flex;
  }

  .project-wrap {
    flex-flow: column;
    display: flex;
  }

  .blank-space.hide-on-off {
    display: block;
  }

  .display-02 {
    align-self: auto;
  }

  .footer-bg-image {
    width: 100%;
  }

  .about-hero_heading {
    display: block;
  }

  .form-succes-message {
    background-color: var(--white);
    color: var(--black);
    font-weight: var(--_typography---font-weight--font-weight-regular);
  }

  .form-error-message {
    color: var(--black);
    font-weight: var(--_typography---font-weight--font-weight-regular);
  }
}

@media screen and (min-width: 1440px) {
  h1,h2.h1-look{
    line-height: var(--_typography---line-height--line-height-m);
    font-weight: 500;
  }

  label {
    font-family: var(--_typography---font-family);
    font-size: var(--_typography---font-size--body-xs);
    font-weight: 400;
  }

  .container.hero {
    grid-column-gap: 250px;
    grid-row-gap: 250px;
    max-width: 100%;
  }

  .container.padding-top.projects {
    position: static;
  }

  .container.award {
    height: 100vh;
    overflow: visible;
  }

  .display-01.cc-2 {
    line-height: var(--_typography---line-height--line-height-xxl);
  }

  .display-03.padding-top {
    position: static;
    top: 10px;
  }

  .project-content-wrapper {
    grid-column-gap: 2%;
    grid-row-gap: 2%;
    grid-template-columns: 23% 50% 23%;
    position: relative;
  }

  .project-card.cc-1 {
    position: relative;
  }

  .award-image {
    z-index: -2;
    object-fit: cover;
    width: 100%;
    position: absolute;
  }

  .dark-bg {
    z-index: -1;
  }

  .award-bottom-wrap {
    text-align: left;
    order: 9999;
    align-self: auto;
    overflow: visible;
  }

  .award-title-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
    justify-content: space-around;
    display: flex;
  }

  .blank-space.hide-on-off {
    display: block;
  }

  .quote-info {
    justify-content: space-between;
  }

  .client-info {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
  }

  .project-left {
    position: sticky;
    top: 89px;
  }

  .faq-wrap {
    max-width: 60%;
  }

  .cta-image {
    object-fit: cover;
  }

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

  .footer-bg-image {
    object-fit: fill;
    max-height: 600px;
  }

  .section-footer {
    overflow: hidden;
  }

  .image-placeholder {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .image-only {
    width: 100%;
  }

  .feedback-main {
    grid-row-gap: 70px;
  }

  .project-image {
    object-fit: cover;
    height: 100%;
  }

  .pricing-tab-content {
    overflow: visible;
  }

  .about-hero_heading {
    display: block;
  }

  .global-heading {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    display: flex;
  }

  .margin-top {
    margin-top: var(--spacing-l);
  }

  .contact-form {
    grid-column-gap: 25px;
    grid-row-gap: 25px;
    flex-flow: column;
    display: flex;
  }

  .contac-form-wrap {
    max-width: 60%;
  }

  .contact-input {
    border-style: solid;
    border-width: 0 0 1px;
    border-color: black black var(--black-soft);
    background-color: var(--transparent);
    font-size: var(--_typography---font-size--body-m);
    padding: 0;
  }

  .contact-input.text-filed {
    min-height: 200px;
  }

  .heading-subtitle {
    max-width: 51%;
    font-size: var(--_typography---font-size--heading-h2);
    margin-left: auto;
    margin-right: auto;
    line-height: 2.375rem;
  }

  .projec-image-main {
    object-fit: cover;
    width: 100%;
  }

  .hero_main {
    height: 100vh;
  }

  .darken-layer, .hero-bg-image {
    width: 100%;
  }

  .collection-list-wrap.cc-3 {
    top: 130px;
  }

  .collection-list-wrap.cc-4 {
    top: 180px;
  }

  .quote-main {
    max-width: 80%;
  }

  .body-text-3, .body-text-3-copy {
    font-size: var(--_typography---font-size--body-m);
  }
}

@media screen and (max-width: 991px) {
  body {
    --_typography---font-family: "neue-haas-grotesk-text", Arial, sans-serif;
    --_typography---font-size--body-s: 1rem;
    --_typography---font-weight--font-weight-light: 300;
    --_typography---font-size--heading-h1: 3rem;
    --_typography---line-height--line-height-m: 3.2rem;
    --_typography---font-size--heading-h2: 1.75rem;
    --_typography---line-height--line-height-s: 2.25rem;
    --_typography---font-size--body-xs: .875rem;
    --_typography---font-weight--font-weight-regular: 400;
    --_typography---font-weight--font-weight-medium: 500;
    --_typography---font-size--display-m: 3.5rem;
    --_typography---font-size--display-xl: 9rem;
    --_typography---line-height--line-height-xxl: 9rem;
    --_typography---font-weight--font-weight-bold: 700;
    --_typography---font-weight--font-weight-semibold: 600;
    --_typography---line-height--line-height-l: 4rem;
    --_typography---font-size--display-l: 6rem;
    --_typography---line-height--line-height-xl: 6rem;
    --_typography---font-size--body-m: 1.125rem;
    --_typography---font-size--body-l: 1.25rem;
    --_typography---font-size--body-xl: 1.5rem;
    --black: #030303;
    --white: #fff;
    --transparent: #fff0;
    --black-soft: #1a1a1a;
    --spacing-xl: 170px;
    --grey-strong: #777;
    --grey-medium: #9a9a9a;
    --color-dark-grey\<deleted\|variable-3019c752-970d-a991-2730-b1be4d26afc0\>: #1a1a1a;
    --spacing-l: 160px;
  }

  .hero-nav-menu {
    display: block;
  }

  .nav-wrapper {
    padding-left: 0;
    padding-right: 0;
  }

  .menu-button {
    width: 2rem;
  }

  .hamburger-menu {
    background-color: var(--transparent);
  }

  .container.hero {
    grid-column-gap: 150px;
    grid-row-gap: 150px;
    justify-content: flex-end;
    margin-top: 0;
  }

  .container.award {
    grid-row-gap: 70vh;
    justify-content: center;
    height: 100vh;
  }

  .display-01 {
    text-align: center;
    justify-content: center;
    align-self: flex-start;
    align-items: center;
  }

  .display-01.hero-title, .display-01.footer-title {
    font-size: 9.5rem;
    line-height: 9.5rem;
  }

  .display-01.align-center {
    align-self: center;
  }

  .icon_svg {
    display: block;
  }

  .main-content {
    grid-column-gap: 10%;
    grid-row-gap: 70px;
    grid-template-rows: auto;
    grid-template-columns: 100%;
    align-items: start;
  }

  .about-fact.about {
    padding-left: 0;
    padding-right: 0;
  }

  .about-image {
    object-fit: cover;
    width: auto;
    height: 100%;
  }

  .display-03 {
    line-height: var(--_typography---line-height--line-height-l);
  }

  .project-content-wrapper {
    grid-template-columns: 1fr;
  }

  .project-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .project-card.cc-1 {
    position: static;
  }

  .padding-top {
    padding-top: var(--spacing-xl);
  }

  .button-link.padding-top {
    justify-content: center;
    align-items: center;
    padding-top: 41px;
  }

  .left-content {
    display: none;
  }

  .service-wrapper {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr;
  }

  .award-bottom-wrap {
    overflow: visible;
  }

  .award-title-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .blank-space, .blank-space.hide-on-off {
    display: none;
  }

  .quote-info {
    grid-column-gap: 21px;
    grid-row-gap: 21px;
  }

  .feedback-wrapper {
    grid-row-gap: 50px;
    grid-template-rows: auto auto auto auto;
    grid-template-columns: auto;
  }

  .client-image-wrap {
    width: 200px;
  }

  .align-right {
    display: none;
  }

  .client-info {
    grid-column-gap: 5px;
    grid-row-gap: 5px;
  }

  .client-logo {
    padding: 30px;
  }

  .price-card {
    grid-template-columns: 1fr;
  }

  .package-feature {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }

  .project-left {
    display: none;
  }

  .faq-wrap {
    max-width: 70%;
  }

  .button-secondary {
    font-weight: var(--_typography---font-weight--font-weight-regular);
  }

  .bottom-content {
    padding-top: 202px;
    padding-bottom: 0;
  }

  .copyright-symb {
    margin-top: 30px;
    font-size: 4.8rem;
    line-height: 4rem;
  }

  .footer-bg-image {
    object-fit: cover;
    inset: auto 0% 0;
    overflow: visible;
  }

  .bottom-wrap {
    grid-template-columns: .25fr;
    display: block;
  }

  .right-arrow {
    justify-content: flex-end;
    align-items: center;
    width: auto;
    display: flex;
  }

  .left-arrow {
    right: 70px;
  }

  .feedback-main {
    grid-template-columns: 1fr;
  }

  .feddback-mask {
    overflow: visible;
  }

  .nav-menu-text {
    line-height: 3rem;
  }

  .discount-offer {
    top: 10px;
  }

  .footer-nav-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .line {
    display: none;
  }

  .price-info {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: column;
    display: flex;
  }

  .about_hero-image {
    min-height: 450px;
  }

  .about_hero-image-wrap {
    grid-template-columns: 25% 45% 25%;
    margin-top: -60px;
  }

  .about_hero-intro {
    max-width: 100%;
  }

  .testimonial-wrap {
    grid-template-columns: 100%;
  }

  .testimonials_left-content, .testimonials_right-content {
    display: none;
  }

  .global-heading {
    justify-content: center;
    align-items: center;
    display: block;
  }

  .contac-form-wrap {
    max-width: 70%;
  }

  .heading-subtitle {
    max-width: 90%;
  }

  .project-details-block {
    max-width: 70%;
  }

  .body-text-2.middle {
    max-width: 80%;
  }

  .project-thumb-image {
    height: 400px;
  }

  .project-thumb-wrap {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
  }

  .div-block-16, .body-shape.left, .body-shape.middle, .body-shape.right {
    display: none;
  }

  .hero_main {
    height: 100vh;
  }

  .icon_svg-2 {
    display: block;
  }

  .hero-top-right {
    flex-flow: column;
    justify-content: center;
    align-items: flex-end;
    display: flex;
  }

  .quote-main {
    max-width: 100%;
  }

  .error-image {
    width: 300px;
  }

  .main-content-b, .main-content-b.small, .form-bottom {
    max-width: 100%;
  }

  .about-img-wrap {
    height: 300px;
  }

  .ig-wrapper, .ig-wrapper-2, .ig-wrapper-buttons {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 767px) {
  body {
    --_typography---font-family: "neue-haas-grotesk-text", Arial, sans-serif;
    --_typography---font-size--body-s: 1rem;
    --_typography---font-weight--font-weight-light: 300;
    --_typography---font-size--heading-h1: 2.5rem;
    --_typography---line-height--line-height-m: 2.7rem;
    --_typography---font-size--heading-h2: 1.5rem;
    --_typography---line-height--line-height-s: 2rem;
    --_typography---font-size--body-xs: .875rem;
    --_typography---font-weight--font-weight-regular: 400;
    --_typography---font-weight--font-weight-medium: 500;
    --_typography---font-size--display-m: 3.5rem;
    --_typography---font-size--display-xl: 6rem;
    --_typography---line-height--line-height-xxl: 6rem;
    --_typography---font-weight--font-weight-bold: 700;
    --_typography---font-weight--font-weight-semibold: 600;
    --_typography---line-height--line-height-l: 3.5rem;
    --_typography---font-size--display-l: 5rem;
    --_typography---line-height--line-height-xl: 5.2rem;
    --_typography---font-size--body-m: 1.125rem;
    --_typography---font-size--body-l: 1.25rem;
    --_typography---font-size--body-xl: 1.5rem;
    --black: #030303;
    --white: #fff;
    --transparent: #fff0;
    --black-soft: #1a1a1a;
    --spacing-xl: 170px;
    --grey-strong: #777;
    --grey-medium: #9a9a9a;
    --color-dark-grey\<deleted\|variable-3019c752-970d-a991-2730-b1be4d26afc0\>: #1a1a1a;
    --spacing-l: 120px;
  }

  .nav-brand {
    text-align: left;
    align-self: flex-start;
  }

  .container.hero {
    grid-column-gap: 100px;
    grid-row-gap: 100px;
  }

  .container.award {
    grid-row-gap: 68vh;
    height: 100vh;
  }

  .display-01 {
    line-height: var(--_typography---line-height--line-height-xxl);
    letter-spacing: -3px;
    align-self: auto;
  }

  .display-01.cc-1 {
    letter-spacing: -2px;
  }

  .display-01.footer-title {
    font-size: 7rem;
  }

  .page-padding._100vh {
    height: 100vh;
  }

  .main-content {
    grid-column-gap: 80px;
    grid-row-gap: 80px;
    grid-template-rows: auto auto;
    grid-template-columns: 100%;
  }

  .about-fact.about {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
  }

  .about-image {
    width: 100%;
  }

  .project-content-wrapper {
    flex-flow: column;
    justify-content: space-between;
    align-items: stretch;
    display: flex;
    overflow: visible;
  }

  .project-wrap {
    height: auto;
  }

  .project-button {
    position: static;
  }

  .left-content {
    display: none;
  }

  .service-wrapper {
    grid-template-rows: auto auto auto auto;
    grid-auto-flow: column;
  }

  .body-text-5 {
    align-self: flex-start;
  }

  .award-image {
    height: 100vh;
  }

  .award-bottom-wrap {
    grid-column-gap: 0px;
    grid-row-gap: 10px;
    text-align: center;
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
  }

  .blank-space {
    display: none;
  }

  .client-logo {
    padding: 15px;
  }

  .faq-wrap {
    max-width: 100%;
  }

  .display-02 {
    align-self: auto;
  }

  .cta-image-right {
    transform: rotate(15deg);
  }

  .cta-image-left {
    transform: rotate(-15deg);
  }

  .footer-top-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
  }

  .footer-bg-image {
    height: 60%;
  }

  .award-wrapper.cc-2, .award-wrapper.cc-1, .award-wrapper.cc-3 {
    display: block;
  }

  .feedback-main {
    grid-template-columns: 100%;
    grid-auto-columns: 100%;
  }

  .code-embed-5 {
    display: none;
  }

  .discount-offer {
    top: 15px;
  }

  .about_hero-image-wrap {
    grid-template-columns: 100%;
    margin-top: 60px;
  }

  .about_hero-location {
    display: none;
  }

  .about_stats {
    padding-top: 60px;
  }

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

  .b-project-wrap {
    grid-template-columns: 1fr;
  }

  .contac-form-wrap {
    max-width: 100%;
  }

  .heading-subtitle {
    max-width: 100%;
    line-height: 2rem;
  }

  .project-details-block {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    max-width: 100%;
    padding-bottom: 80px;
  }

  .body-text-2.middle {
    max-width: 100%;
  }

  .project-thumb-image {
    height: 300px;
  }

  .project-thumb-wrap {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }

  .bg-line-wrap {
    display: flex;
  }

  .hero-top {
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
  }

  .body-shape.left, .body-shape.middle, .body-shape.right {
    display: none;
  }

  .hero-top-right {
    justify-content: center;
    align-items: center;
  }

  .hero-top-right.text-ms {
    text-align: center;
  }

  .hero-top-left.text-ms {
    display: none;
  }

  .hero-heading-wrap {
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }

  .collection-list-wrap.cc-1, .collection-list-wrap.cc-2, .collection-list-wrap.cc-3, .collection-list-wrap.cc-4 {
    position: static;
  }

  .body-text-1 {
    text-align: left;
    align-self: auto;
  }

  .div-block-17 {
    display: none;
  }

  .error-main {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .error-image {
    width: 250px;
  }

  .color-box-item {
    min-height: 170px;
  }

  .typography-item {
    align-items: flex-start;
  }

  .password-form-wrap {
    flex-flow: column;
  }

  .submit-button {
    height: 60px;
  }

  .ig-wrapper, .ig-wrapper-2, .ig-wrapper-buttons {
    grid-template-rows: auto auto auto auto;
    grid-auto-flow: column;
  }
}

@media screen and (max-width: 479px) {
  body {
    --_typography---font-family: "neue-haas-grotesk-text", Arial, sans-serif;
    --_typography---font-size--body-s: .875rem;
    --_typography---font-weight--font-weight-light: 300;
    --_typography---font-size--heading-h1: 2rem;
    --_typography---line-height--line-height-m: 2.2rem;
    --_typography---font-size--heading-h2: 1.375rem;
    --_typography---line-height--line-height-s: 1.875rem;
    --_typography---font-size--body-xs: .875rem;
    --_typography---font-weight--font-weight-regular: 400;
    --_typography---font-weight--font-weight-medium: 500;
    --_typography---font-size--display-m: 3rem;
    --_typography---font-size--display-xl: 4rem;
    --_typography---line-height--line-height-xxl: 4rem;
    --_typography---font-weight--font-weight-bold: 700;
    --_typography---font-weight--font-weight-semibold: 600;
    --_typography---line-height--line-height-l: 3rem;
    --_typography---font-size--display-l: 3.2rem;
    --_typography---line-height--line-height-xl: 3.6rem;
    --_typography---font-size--body-m: 1.125rem;
    --_typography---font-size--body-l: 1.125rem;
    --_typography---font-size--body-xl: 1.2rem;
    --black: #030303;
    --white: #fff;
    --transparent: #fff0;
    --black-soft: #1a1a1a;
    --spacing-xl: 120px;
    --grey-strong: #777;
    --grey-medium: #9a9a9a;
    --color-dark-grey\<deleted\|variable-3019c752-970d-a991-2730-b1be4d26afc0\>: #1a1a1a;
    --spacing-l: 100px;
  }

  .navbar {
    border-radius: 24px;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    position: fixed;
  }

  .nav-brand {
    font-size: 28px;
  }

  .nav-wrapper {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .container.hero {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    justify-content: flex-start;
    align-items: center;
    margin-top: -5rem;
  }

  .container.padding-top {
    z-index: 1;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: -6vh;
    display: flex;
    position: relative;
    overflow: visible;
  }

  .container.padding-top.projects {
    margin-top: 0;
    padding-top: 80px;
  }

  .container.award {
    grid-row-gap: 70vh;
  }

  .display-01 {
    font-size: var(--_typography---font-size--display-xl);
    text-align: left;
    letter-spacing: -2px;
  }

  .display-01.hero-title {
    font-family: var(--_typography---font-family);
    font-size: 7rem;
    line-height: 7rem;
    font-weight: var(--_typography---font-weight--font-weight-semibold);
    letter-spacing: -5px;
    margin-bottom: -10px;
  }

  .display-01.footer-title {
    margin-bottom: 6rem;
    font-size: 8rem;
    line-height: 5rem;
  }

  .display-01.align-center {
    text-align: center;
  }

  .page-padding {
    padding-left: 1rem;
    padding-right: 1rem;
    overflow: visible;
  }

  .page-padding.top.toppagesection {
    padding-top: 0;
  }

  .top-bar {
    margin-bottom: 40px;
  }

  .main-content {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    flex-flow: column;
  }

  .main-content.about_section {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-flow: row;
  }

  .about-fact {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
  }

  .soft-text.font-weight-light {
    color: #bbb;
  }

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

  .project-info {
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 5px 1rem 1rem;
    position: absolute;
  }

  .project-wrap {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    height: auto;
  }

  .project-card.cc-1 {
    border-radius: 24px;
    justify-content: flex-end;
    align-items: stretch;
  }

  .project-bg {
    opacity: 0;
  }

  .project-button {
    padding-top: 44px;
  }

  .long-arrow-icon.cta_arrow {
    margin-left: 10px;
  }

  .service-wrapper {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .service-card {
    grid-column-gap: 150px;
    grid-row-gap: 150px;
    background-image: url("/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6aab78db7f0ae4d6a1a181b2_Screenshot%202026-09-17%20at%201.21.16%E2%80%AFAM.png");
    background-position: 0 0;
    background-size: cover;
    padding: 20px;
  }

  .service-card.ig-card {
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    width: 25%;
    margin-top: 0;
    margin-left: 0;
    padding: 0;
    display: flex;
  }

  .service-card.ig-card.ig-button {
    border-width: .5px;
    border-color: var(--grey-medium);
    border-radius: 3px;
    justify-content: center;
    align-items: center;
    width: 30%;
    height: 2rem;
    margin-top: 10px;
  }

  .service-card.ig-card.ig-button.message {
    border-width: .5px;
    width: 45%;
    margin-left: 1rem;
  }

  .service-card.ig-card.ig-button.call {
    border-width: .5px;
    width: 30%;
    margin-left: 1rem;
  }

  .service-card.ig-card.ig-button.arrow {
    width: 10%;
    margin-left: 1rem;
  }

  .service-card.ig-card.ig {
    border-style: none;
  }

  .service-card.ig-card-2 {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    width: 25%;
    margin-top: 0;
    margin-left: 0;
    padding: 0 0 0 10px;
  }

  .service-card.ig-card-2.ig {
    border-style: none;
    justify-content: center;
    align-items: center;
    padding-left: 0;
  }

  .service-card.ig-card-copy {
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    width: 25%;
    margin-top: 0;
    margin-left: 0;
    padding: 0;
    display: flex;
  }

  .service-card.service_card1 {
    background-image: linear-gradient(#fff0 47%, #00000038), linear-gradient(#fff0 45%, #000), url("/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6aab78db7f0ae4d6a1a181b2_Screenshot%202026-09-17%20at%201.21.16%E2%80%AFAM.png");
    background-position: 0 0, 0 0, 0 0;
    background-size: auto, auto, cover;
  }

  .service-card.service_card2 {
    background-image: linear-gradient(#fff0 50%, #000), url("/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6aab7bfe3fac9fdbbdef456e_Screenshot%202026-09-17%20at%201.35.00%E2%80%AFAM.png");
    background-position: 0 0, 50%;
    background-size: auto, cover;
  }

  .service-card.service_card3 {
    background-image: linear-gradient(#fff0 65%, #000);
    position: relative;
    overflow: hidden;
  }

  .service-icon {
    padding: 5px;
  }

  .service-info {
    z-index: 1;
    padding-top: 2rem;
    position: relative;
  }

  .body-text-5 {
    align-self: flex-start;
  }

  .service-left {
    grid-column-gap: 2px;
    grid-row-gap: 2px;
  }

  .client-info {
    padding-bottom: 90px;
  }

  .client-logo-wrap {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 80px;
  }

  .price {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    justify-content: flex-start;
    align-items: stretch;
    padding: 20px;
  }

  .button-primary {
    font-weight: var(--_typography---font-weight--font-weight-regular);
  }

  .faq-wrap {
    max-width: 100%;
  }

  .button-secondary {
    font-weight: var(--_typography---font-weight--font-weight-regular);
    display: flex;
  }

  .cta-wrap {
    grid-column-gap: 2.5rem;
    grid-row-gap: 2.5rem;
  }

  .display-02 {
    font-size: var(--_typography---font-size--display-m);
    letter-spacing: -2px;
  }

  .cta-image-main {
    width: 50%;
  }

  .cta-image-right {
    width: 50%;
    right: -3%;
  }

  .cta-image-left {
    width: 50%;
    left: -3%;
  }

  .bottom-content {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    padding-top: 5rem;
  }

  .copyright-symb {
    display: none;
  }

  .footer-bg-image {
    object-fit: cover;
    width: 200%;
    height: 120%;
    margin-bottom: -109px;
    margin-left: -99px;
    inset: -1px 0% 0% 40px;
  }

  .section-footer {
    background-color: #0000;
    margin-top: -2rem;
  }

  .page-wrapper {
    overflow: visible;
  }

  .section {
    height: auto;
    display: block;
  }

  .section.section-cta {
    z-index: 10;
    margin-top: 0;
  }

  .section.about_section {
    height: 50svh;
    margin-top: -5vh;
    display: flex;
  }

  .section.spaced {
    margin-top: 0;
  }

  .section.other {
    display: none;
  }

  .image-only {
    object-fit: cover;
    min-height: 350px;
  }

  .nav-link-wrap {
    --_typography---font-family: "neue-haas-grotesk-text", Arial, sans-serif;
    --_typography---font-size--body-s: .875rem;
    --_typography---font-weight--font-weight-light: 300;
    --_typography---font-size--heading-h1: 2rem;
    --_typography---line-height--line-height-m: 2.2rem;
    --_typography---font-size--heading-h2: 1.375rem;
    --_typography---line-height--line-height-s: 1.875rem;
    --_typography---font-size--body-xs: .875rem;
    --_typography---font-weight--font-weight-regular: 400;
    --_typography---font-weight--font-weight-medium: 500;
    --_typography---font-size--display-m: 3rem;
    --_typography---font-size--display-xl: 4rem;
    --_typography---line-height--line-height-xxl: 4rem;
    --_typography---font-weight--font-weight-bold: 700;
    --_typography---font-weight--font-weight-semibold: 600;
    --_typography---line-height--line-height-l: 3rem;
    --_typography---font-size--display-l: 3.2rem;
    --_typography---line-height--line-height-xl: 3.6rem;
    --_typography---font-size--body-m: 1.125rem;
    --_typography---font-size--body-l: 1.125rem;
    --_typography---font-size--body-xl: 1.2rem;
  }

  .right-arrow {
    left: 70px;
    right: auto;
  }

  .feedback-holder {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }

  .left-arrow {
    left: 0;
    right: auto;
  }

  .feedback-main {
    grid-column-gap: 0px;
    grid-row-gap: 50px;
    grid-template-columns: 100%;
  }

  .project-card-link, .project-image {
    border-radius: 24px;
  }

  .pricing-tab-menu {
    width: 100%;
    margin-bottom: 81px;
  }

  .discount-offer {
    inset: 80px auto 0% 0%;
  }

  .client-rating {
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
  }

  .footer-nav-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .phone-wrap {
    display: none;
  }

  .price-info {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: column;
    display: flex;
  }

  .about_hero-image-wrap {
    margin-top: 40px;
  }

  .about_hero-intro {
    align-items: stretch;
  }

  .about_stats {
    grid-column-gap: 80px;
    grid-row-gap: 80px;
    padding-top: 40px;
  }

  .flex-stretch {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
  }

  .flex-stretch.phone {
    flex-flow: row;
  }

  .experience-item, .testimonial-item {
    padding: 20px;
  }

  .global-heading {
    text-align: center;
  }

  .b-project-wrap {
    grid-row-gap: 20px;
  }

  .heading-subtitle {
    line-height: 1.875rem;
  }

  .project-details-block {
    padding-bottom: 80px;
  }

  .body-text-2 {
    line-height: 1.5rem;
  }

  .body-text-2.middle {
    max-width: 100%;
  }

  .project-text.text-ms {
    line-height: 1.5rem;
  }

  .project-thumb-image {
    height: 200px;
  }

  .bg-line-wrap {
    display: none;
  }

  .hero-top {
    flex-flow: row;
    width: 100%;
    margin-top: 40vh;
    margin-bottom: 0;
    display: none;
  }

  .body-shape.left, .body-shape.right {
    display: flex;
  }

  .hero_main {
    background-image: none;
    height: 200vh;
    max-height: 200vh;
    margin: 0;
    position: sticky;
    overflow: visible;
  }

  .hero-bottom {
    margin-bottom: 0;
  }

  .icon_svg-2 {
    display: none;
  }

  .hero-top-right {
    justify-content: center;
    align-items: flex-end;
    display: none;
  }

  .hero-top-right.text-ms {
    font-size: var(--_typography---font-size--body-m);
    font-weight: var(--_typography---font-weight--font-weight-regular);
    text-align: right;
  }

  .hero-top-right.text-ms.custom_basedinca {
    line-height: 24px;
  }

  .hero-top-left.text-ms {
    display: flex;
  }

  .hero-heading-wrap {
    display: none;
  }

  .darken-layer {
    border-bottom-right-radius: 24px;
    border-bottom-left-radius: 24px;
    height: 100vh;
    max-height: 100vh;
    padding-bottom: 1rem;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .hero-bg-image {
    object-fit: cover;
    display: none;
  }

  .collection-list-wrap.cc-1 {
    margin-bottom: 0;
  }

  .video-text {
    justify-content: center;
    align-items: center;
  }

  .video-link {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  .video-link-wrap {
    inset: 0%;
  }

  .body-text-3 {
    z-index: 2;
    font-size: var(--_typography---font-size--body-xl);
    font-weight: var(--_typography---font-weight--font-weight-semibold);
    text-transform: uppercase;
    margin-bottom: 0;
    position: relative;
  }

  .body-text-3.soft-text.ital {
    z-index: 2;
    color: #b6b6b6;
    font-family: "neue-haas-grotesk-text", Arial, sans-serif;
    font-size: var(--_typography---font-size--body-m);
    font-style: italic;
    line-height: 1rem;
    font-weight: var(--_typography---font-weight--font-weight-medium);
    text-transform: lowercase;
    margin-top: 3px;
    position: relative;
  }

  .body-text-3.soft-text.sub_head {
    color: #c7c7c7;
    font-size: var(--_typography---font-size--body-s);
    line-height: 1.1rem;
    font-weight: var(--_typography---font-weight--font-weight-medium);
    text-align: right;
    text-transform: lowercase;
    margin-top: 0;
    margin-left: auto;
  }

  .body-text-3.soft-text.sub_head.under_services {
    text-align: left;
    text-transform: none;
    margin-top: -10px;
    margin-left: 0;
    line-height: 1.3rem;
  }

  .body-text-3.bt3_alt {
    color: #c4c4c4;
    font-family: "neue-haas-grotesk-text", Arial, sans-serif;
    font-size: 1.125rem;
    font-style: italic;
    font-weight: var(--_typography---font-weight--font-weight-regular);
    text-transform: capitalize;
  }

  .nav-brang-img {
    width: 72px;
  }

  .body-text-1 {
    text-align: left;
    line-height: 1.75rem;
  }

  .body-text-1.error {
    text-align: center;
  }

  .div-block-17 {
    display: none;
  }

  .error-main {
    grid-column-gap: 25px;
    grid-row-gap: 25px;
  }

  .error-image {
    width: 170px;
  }

  .main-content-block {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }

  .main-content-block.flex-hr {
    flex-flow: column;
  }

  .color-box-item {
    min-height: 200px;
  }

  .typo-info {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    flex-flow: column;
  }

  .form-bottom {
    padding: 20px;
  }

  .div-block-19 {
    opacity: .21;
    display: none;
  }

  .ig-wrapper {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    display: flex;
  }

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

  .image.ig {
    border-style: none;
  }

  .top-ig {
    font-size: var(--_typography---font-size--body-m);
    font-weight: var(--_typography---font-weight--font-weight-semibold);
  }

  .ig-wrapper-2 {
    flex-flow: column;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 10px;
    display: flex;
  }

  .ig-bio {
    grid-column-gap: 150px;
    grid-row-gap: 150px;
    border-style: none;
    margin-top: 0;
    margin-left: 0;
    padding: 0 20px 1px 10px;
  }

  .ig-bio.ig-card {
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    width: 25%;
    margin-top: 0;
    margin-left: 0;
    padding: 0;
    display: flex;
  }

  .ig-bio.ig-card-2 {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    width: 25%;
    margin-top: 0;
    margin-left: 0;
    padding: 0 0 0 10px;
  }

  .ig-bio.ig-card-copy {
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    width: 25%;
    margin-top: 0;
    margin-left: 0;
    padding: 0;
    display: flex;
  }

  .bio-text {
    color: var(--white);
    line-height: 1.1rem;
  }

  .bio-text2 {
    color: var(--grey-medium);
  }

  .bio-text3 {
    color: var(--white);
    line-height: 1.1rem;
  }

  .ig-wrapper-buttons {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: space-between;
    align-items: center;
    padding-top: 5px;
    padding-bottom: 10px;
    display: flex;
  }

  .grid {
    grid-template: "Area"
                   "."
                   "."
                   / 1fr 1fr 1fr;
  }

  .div-block-20 {
    width: 33.33%;
  }

  .ig_row1 {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    justify-content: center;
    align-items: center;
    height: 170px;
    margin-top: 10px;
    display: flex;
  }

  .div-block-22 {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .div-block-22.m1 {
    background-image: url("/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6a9e37f8efa8187e5d0e9711_mare_carousel_26_38.jpg");
  }

  .div-block-22.m2 {
    background-image: url("/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6a9e37f77b5c9e1e1eabba85_mare_carousel_26_34.jpg");
  }

  .ig_row2, .ig_row3 {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    justify-content: center;
    align-items: center;
    height: 170px;
    margin-top: 4px;
    display: flex;
  }

  .text-block {
    font-size: var(--_typography---font-size--body-m);
    font-weight: var(--_typography---font-weight--font-weight-medium);
    margin-bottom: 4rem;
    margin-left: 0;
  }

  .text-block.liviu {
    text-transform: uppercase;
    order: 9999;
    margin-top: .5rem;
    margin-bottom: 0;
    margin-left: 0;
  }

  .ig_wrapper {
    -webkit-text-stroke-color: var(--grey-medium);
    background-color: #161616;
    border: .5px solid #929292;
    border-radius: 10px;
    flex-flow: column;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    display: flex;
  }

  .div-block-22-bottom-left {
    border-bottom-left-radius: 10px;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .div-block-22-bottom-left.m1 {
    background-image: url("/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6a9e37f8efa8187e5d0e9711_mare_carousel_26_38.jpg");
  }

  .div-block-22-bottom-left.m2 {
    background-image: url("/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6a9e37f77b5c9e1e1eabba85_mare_carousel_26_34.jpg");
  }

  .div-block-22-bottom-right {
    border-bottom-right-radius: 10px;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .div-block-22-bottom-right.m1 {
    background-image: url("/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6a9e37f8efa8187e5d0e9711_mare_carousel_26_38.jpg");
  }

  .div-block-22-bottom-right.m2 {
    background-image: url("/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6a9e37f77b5c9e1e1eabba85_mare_carousel_26_34.jpg");
  }

  .image-2 {
    filter: saturate(0%);
    width: 25px;
  }

  .blur {
    opacity: .55;
    width: 100%;
    height: 4rem;
    position: absolute;
  }

  .text-block-2 {
    font-size: var(--_typography---font-size--body-l);
    font-weight: var(--_typography---font-weight--font-weight-medium);
  }

  .div-block-23 {
    background-image: url("/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6a9e37f8efa8187e5d0e9711_mare_carousel_26_38.jpg");
    background-position: 50% 0;
    background-repeat: repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
    display: none;
    position: absolute;
  }

  .div-block-24 {
    z-index: 4;
    background-color: #000;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 50vh;
    display: flex;
    position: relative;
  }

  .clip-text {
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 5rem;
    margin-bottom: 3px;
    padding-left: 0;
    padding-right: 0;
    display: flex;
  }

  .text-block-3 {
    font-family: Great Vibes, cursive;
    font-size: var(--_typography---line-height--line-height-xl);
    line-height: 3rem;
    font-weight: var(--_typography---font-weight--font-weight-regular);
    margin-bottom: 7px;
    margin-right: 10px;
  }

  .text-block-4 {
    height: 3rem;
    font-size: var(--_typography---font-size--display-l);
    line-height: 3rem;
    font-weight: var(--_typography---font-weight--font-weight-bold);
    text-transform: uppercase;
    margin-bottom: 6px;
  }

  .code-embed-7 {
    width: 100%;
    height: 100%;
    position: sticky;
  }

  .knockout-section {
    mix-blend-mode: multiply;
    background-color: #000;
    width: 100%;
    height: 100vh;
    display: none;
    position: absolute;
  }

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

  .text-block-5 {
    font-size: var(--_typography---font-size--display-m);
    line-height: 3rem;
    font-weight: var(--_typography---font-weight--font-weight-bold);
    text-transform: uppercase;
    margin-bottom: -18px;
    padding-left: 34px;
  }

  .text-block-5.knockout-word {
    opacity: 1;
    color: var(--white);
    mix-blend-mode: lighten;
  }

  .linear_gradient {
    z-index: 1;
    opacity: .66;
    background-image: linear-gradient(#fff0, #000000e3);
    width: 100%;
    height: 10rem;
    display: flex;
    position: absolute;
    inset: auto 0% 0%;
  }

  .div-block-26 {
    flex-flow: row;
    flex: 0 auto;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 5px 1rem 1rem;
    display: flex;
    position: absolute;
    inset: auto 0% 0%;
  }

  .body-text-3-copy {
    z-index: 2;
    font-size: var(--_typography---font-size--body-xl);
    font-weight: var(--_typography---font-weight--font-weight-bold);
    text-transform: uppercase;
    position: relative;
  }

  .body-text-3-copy.soft-text.ital {
    z-index: 2;
    color:#e6e6e6;
    font-size: var(--_typography---font-size--body-s);
    font-style: normal;
    line-height: 1rem;
    font-weight: var(--_typography---font-weight--font-weight-medium);
    margin-top: 3px;
    position: relative;
  }

  .body-text-3-copy.bt3_alt {
    color: #c4c4c4;
    font-family: "neue-haas-grotesk-text", Arial, sans-serif;
    font-size: 1.125rem;
    font-style: italic;
    font-weight: var(--_typography---font-weight--font-weight-regular);
    text-transform: capitalize;
  }

  .text_alt {
    font-size: var(--_typography---font-size--body-xl);
  }

  .collection-item {
    border-radius: 24px;
  }

  .div-block-27, .projects_homepage {
    width: 100%;
    max-width: 100%;
    height: 100%;
  }

  .projects_homepage.collection-item {
    flex: 0 auto;
    display: flex;
  }

  .projects_homepage.collection-item.project_1,.projects_homepage.collection-item.project_audi{
    aspect-ratio: 3 / 2;
    background-image: url("/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6a999226a04617ef476c1717_DSC08647.jpg");
    background-position: 50%;
    background-size: cover;
    justify-content: center;
    align-items: flex-end;
    height: 20rem;
    margin-top: .125rem;
    overflow: clip;
  }

  .projects_homepage.collection-item.project_2 {
    aspect-ratio: 3 / 2;
    background-image: url("/assets/projects/fiorellino/fiorellino-card.jpg");
    background-position: 50%;
    background-size: cover;
    justify-content: center;
    align-items: flex-end;
    height: 20rem;
    margin-top: .5rem;
    overflow: clip;
  }

  .projects_homepage.collection-item.project_2.reveal-on-scroll {
    margin-top: .125rem;
  }

  .projects_homepage.collection-item.project_2-copy {
    aspect-ratio: 3 / 2;
    background-image: url("/assets/projects/fiorellino/fiorellino-card.jpg");
    background-position: 50%;
    background-size: cover;
    justify-content: center;
    align-items: flex-end;
    height: 20rem;
    overflow: clip;
  }

  .projects_homepage.collection-item.project_3 {
    aspect-ratio: 3 / 2;
    background-image: url("/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6a9e37f6fc84bdabd1d19ce9_mare_carousel_26_28.jpg");
    background-position: 50% 85%;
    background-size: cover;
    justify-content: center;
    align-items: flex-end;
    height: 20rem;
    margin-top: .5rem;
    overflow: clip;
  }

  .projects_homepage.collection-item.project_3.reveal-on-scroll {
    margin-top: .125rem;
  }

  .projects_homepage.collection-item.project_4 {
    aspect-ratio: 3 / 2;
    background-image: none;
    background-size: auto;
    justify-content: center;
    align-items: flex-end;
    height: 20rem;
    margin-top: .5rem;
    overflow: clip;
  }

  .projects_homepage.collection-item.project_4.reveal-on-scroll {
    background-image: url("/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6aac13208b4babdc667a5f75_DSC08922.jpg");
    background-position: 50%;
    background-size: cover;
    margin-top: .125rem;
  }

  .projects_homepage.collection-item.project_5 {
    aspect-ratio: 3 / 2;
    background-image: none;
    background-size: auto;
    justify-content: center;
    align-items: flex-end;
    height: 20rem;
    margin-top: .5rem;
    overflow: clip;
  }

  .projects_homepage.collection-item.project_5.reveal-on-scroll {
    margin-top: .125rem;
  }

  .projects_homepage.collection-item.project_7,.projects_homepage.collection-item.project_dada{
    aspect-ratio: 3 / 2;
    background-image: url("/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6aaa2112cb3de6427e2f161f_DSC03411.jpg");
    background-position: 50%;
    background-size: cover;
    justify-content: center;
    align-items: flex-end;
    height: 20rem;
    margin-top: .5rem;
    overflow: clip;
  }

  .projects_homepage.collection-item.project_7.reveal-on-scroll,.projects_homepage.collection-item.project_dada.reveal-on-scroll{
    margin-top: .125rem;
  }

  .projects_homepage.collection-item.project_6 {
    aspect-ratio: 3 / 2;
    background-image: url("/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6a99970ae2cd9c9adf6109ef_Screenshot%202026-09-03%20at%2011.48.51%E2%80%AFAM.png");
    background-position: 50% 35%;
    background-size: cover;
    justify-content: center;
    align-items: flex-end;
    height: 20rem;
    margin-top: .5rem;
    overflow: clip;
  }

  .projects_homepage.collection-item.project_6.reveal-on-scroll {
    margin-top: .125rem;
  }

  .projects_homepage.collection-item.project_8 {
    aspect-ratio: 3 / 2;
    background-image: url("/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6aaabf09f1d827a4e3633fd9_DSC05287.jpg");
    background-position: 50% 0;
    background-size: cover;
    justify-content: center;
    align-items: flex-end;
    height: 20rem;
    margin-top: .5rem;
    overflow: clip;
  }

  .projects_homepage.collection-item.project_8.reveal-on-scroll {
    margin-top: .125rem;
  }

  .projects_homepage.collection-item.project_10 {
    aspect-ratio: 3 / 2;
    background-image: url("/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6aaa2112cb3de6427e2f161f_DSC03411.jpg");
    background-position: 50%;
    background-size: cover;
    justify-content: center;
    align-items: flex-end;
    height: 20rem;
    margin-top: .5rem;
    overflow: clip;
  }

  .projects_homepage.collection-item.project_10.reveal-on-scroll {
    margin-top: .125rem;
  }

  .code-embed-8 {
    filter: saturate(116%);
    flex: 0 auto;
    justify-content: center;
    align-items: center;
    height: 120%;
    padding-top: 0;
    display: flex;
    position: relative;
    inset: 0%;
    overflow: visible;
    transform: translate(0, 29px)scale(1.2)rotate(0);
  }

  .code-embed-8.masque_vid {
    display: none;
  }

  .code-embed-9 {
    filter: saturate(135%);
    position: absolute;
  }

  .code-embed-9.diff_codemebed {
    position: relative;
  }

  .background-video {
    width: 5rem;
    position: absolute;
    inset: 0%;
  }

  .background-video-2 {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0%;
  }

  .text-span {
    color: #6bbe17;
  }

  .italic-text {
    color:#e6e6e6;
  }

  .text-span-2 {
    color:#e6e6e6;
    font-style: italic;
  }

  .div-block-28 {
    filter: blur(1px);
    background-image: url("/assets/footer/footer-home.webp");
    background-position: 50% 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-attachment: scroll;
    width: 150vw;
    height: 100vh;
    margin-top: -229px;
    display: none;
    position: absolute;
    inset: 0% 0% 280%;
    transform: rotateX(12deg)rotateY(0)rotateZ(-39deg);
  }

  .code-embed-og {
    width: 100%;
    height: 100%;
    position: absolute;
  }
}

#w-node-bca9d76a-b68f-9af1-3f41-9601dc65e999-28600f60 {
  align-self: end;
}

#w-node-_1c9c85a5-fe3f-c52e-7079-9270c6ebeda6-28600f60 {
  place-self: end start;
}

#w-node-b5ac2123-d4ec-1694-d0d5-b8f9917351bf-28600f60 {
  place-self: end;
}

#w-node-ccde3c1c-bf73-fdf4-b513-867ac6076c58-28600f60 {
  place-self: end start;
}

#w-node-ccde3c1c-bf73-fdf4-b513-867ac6076c5f-28600f60 {
  place-self: end;
}

#w-node-_62e1d340-5936-ef15-207d-d9e54056123e-28600f60 {
  place-self: end start;
}

#w-node-_62e1d340-5936-ef15-207d-d9e540561245-28600f60 {
  place-self: end;
}

#w-node-d2049f65-828e-e6c8-f8c2-c3a416139d68-28600f60 {
  place-self: end start;
}

#w-node-d2049f65-828e-e6c8-f8c2-c3a416139d6f-28600f60 {
  place-self: end;
}

#w-node-_6a926bec-b6ac-9de0-dcbb-023b0f733395-28600f60, #w-node-_22593073-2e25-3918-d212-90d5b42a66e4-28600f60 {
  align-self: end;
}

#w-node-af9d4c93-4fa9-5b6b-7d9d-0b4b258698e7-28600f61 {
  justify-self: end;
}

#w-node-d3518861-49be-523d-ec7a-1a717f0a62b1-28600f61 {
  align-self: end;
}

#w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45ae60-28600f61 {
  place-self: end start;
}

#w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45ae67-28600f61 {
  place-self: end;
}

#w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45ae73-28600f61 {
  place-self: end start;
}

#w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45ae7a-28600f61 {
  place-self: end;
}

#w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45ae86-28600f61 {
  place-self: end start;
}

#w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45ae8d-28600f61 {
  place-self: end;
}

#w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45ae99-28600f61 {
  place-self: end start;
}

#w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45aea0-28600f61 {
  place-self: end;
}

#w-node-a0a8a61e-bbc3-007d-a643-16fef079c787-28600f61 {
  justify-self: end;
}

#w-node-e0d720d0-b1ec-caa3-18ea-4038463d87b8-28600f66 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

@media screen and (min-width: 1440px) {
  #w-node-_5d14cdec-ed98-3ba4-8b65-1afa183926f0-28600f60 {
    align-self: auto;
  }

  #w-node-_1c9c85a5-fe3f-c52e-7079-9270c6ebeda6-28600f60 {
    align-self: end;
  }

  #w-node-b5ac2123-d4ec-1694-d0d5-b8f9917351bf-28600f60 {
    place-self: end;
  }

  #w-node-ccde3c1c-bf73-fdf4-b513-867ac6076c58-28600f60 {
    align-self: end;
  }

  #w-node-ccde3c1c-bf73-fdf4-b513-867ac6076c5f-28600f60 {
    place-self: end;
  }

  #w-node-_62e1d340-5936-ef15-207d-d9e54056123e-28600f60 {
    align-self: end;
  }

  #w-node-_62e1d340-5936-ef15-207d-d9e540561245-28600f60 {
    place-self: end;
  }

  #w-node-d2049f65-828e-e6c8-f8c2-c3a416139d68-28600f60 {
    align-self: end;
  }

  #w-node-d2049f65-828e-e6c8-f8c2-c3a416139d6f-28600f60 {
    place-self: end;
  }

  #w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45ae60-28600f61 {
    align-self: end;
  }

  #w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45ae67-28600f61 {
    place-self: end;
  }

  #w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45ae73-28600f61 {
    align-self: end;
  }

  #w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45ae7a-28600f61 {
    place-self: end;
  }

  #w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45ae86-28600f61 {
    align-self: end;
  }

  #w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45ae8d-28600f61 {
    place-self: end;
  }

  #w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45ae99-28600f61 {
    align-self: end;
  }

  #w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45aea0-28600f61 {
    place-self: end;
  }

  #w-node-a0a8a61e-bbc3-007d-a643-16fef079c763-28600f61 {
    align-self: auto;
  }
}

@media screen and (min-width: 1280px) {
  #w-node-_5d14cdec-ed98-3ba4-8b65-1afa183926f0-28600f60, #w-node-a0a8a61e-bbc3-007d-a643-16fef079c763-28600f61 {
    align-self: auto;
  }
}

@media screen and (max-width: 991px) {
  #w-node-e0d720d0-b1ec-caa3-18ea-4038463d87b8-28600f66 {
    grid-column: span 2 / span 2;
  }
}

@media screen and (max-width: 767px) {
  #w-node-_1c9c85a5-fe3f-c52e-7079-9270c6ebeda6-28600f60 {
    justify-self: auto;
  }

  #w-node-b5ac2123-d4ec-1694-d0d5-b8f9917351bf-28600f60, #w-node-ccde3c1c-bf73-fdf4-b513-867ac6076c58-28600f60, #w-node-ccde3c1c-bf73-fdf4-b513-867ac6076c5f-28600f60, #w-node-_62e1d340-5936-ef15-207d-d9e54056123e-28600f60, #w-node-_62e1d340-5936-ef15-207d-d9e540561245-28600f60, #w-node-d2049f65-828e-e6c8-f8c2-c3a416139d68-28600f60, #w-node-d2049f65-828e-e6c8-f8c2-c3a416139d6f-28600f60, #w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45ae60-28600f61, #w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45ae67-28600f61, #w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45ae73-28600f61, #w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45ae7a-28600f61, #w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45ae86-28600f61, #w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45ae8d-28600f61, #w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45ae99-28600f61, #w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45aea0-28600f61 {
    justify-self: center;
  }

  #w-node-e0d720d0-b1ec-caa3-18ea-4038463d87b8-28600f66 {
    grid-column: span 1 / span 1;
  }
}

@media screen and (max-width: 479px) {
  #w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45ae60-28600f61, #w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45ae73-28600f61, #w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45ae86-28600f61, #w-node-f4890c4a-9fd9-d1ce-f1e2-d8a65f45ae99-28600f61 {
    justify-self: center;
  }
}

/* No underline on section headlines + paragraphs. The template underlines .container.padding-top, which
   draws through every child (and through the gaps between split headline words), so it's removed at the
   container and put back only on the small top-bar labels and the footer links / year (not the big footer "gab"). */
.container.padding-top{text-decoration:none}
.container.padding-top .top-bar,.section-footer .container.padding-top :is(a,.year){text-decoration:underline}

/* Logo: at rest a white 15px-rounded square with the "g" cut out (page/video shows through).
   Scrolling up inverts it: the square fades away, the g turns solid white and "ab" fades in beside
   it: "a" in IvyPresto Display Italic, "b" in Neue Haas Grotesk Display 75 Bold (Adobe kit ngy5hls). assets/logo/logo.js toggles html.logo-full,
   lines the square up with the cards' left edge, and sizes/places each letter on the g's bowl + baseline. */
.logo-swap{position:relative;display:block;width:1em;height:1em;line-height:1;user-select:none}
.nav-brand .logo-swap{font-size:48px}
@media screen and (max-width:479px){.nav-brand .logo-swap{font-size:44px}}
.logo-swap .logo-g,.logo-swap .logo-g-solid{position:absolute;inset:0;background:#e6e6e6;
  -webkit-mask-position:center;-webkit-mask-repeat:no-repeat;mask-position:center;mask-repeat:no-repeat;
  transition:opacity .45s ease}
.logo-swap .logo-g{border-radius:15px;
  -webkit-mask-image:url(/assets/logo/g-mark-white.svg?v=3),linear-gradient(#000 0 0);-webkit-mask-size:auto 76%,100% 100%;-webkit-mask-composite:xor;
  mask-image:url(/assets/logo/g-mark-white.svg?v=3),linear-gradient(#000 0 0);mask-size:auto 76%,100% 100%;mask-composite:exclude}
.logo-swap .logo-g-solid{opacity:0;
  -webkit-mask-image:url(/assets/logo/g-mark-white.svg?v=3);-webkit-mask-size:auto 76%;
  mask-image:url(/assets/logo/g-mark-white.svg?v=3);mask-size:auto 76%}
.logo-swap .logo-word{position:absolute;left:0;top:0;line-height:1;color:#e6e6e6;white-space:nowrap;
  opacity:0;transform:translateX(-4px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.logo-swap .logo-a,.logo-swap .logo-b{position:absolute;line-height:1}
.logo-swap .logo-a{font-family:"ivypresto-display",serif;font-style:italic;font-weight:400}
.logo-swap .logo-b{font-family:"neue-haas-grotesk-display",sans-serif;font-weight:600}   /* Display 65 Medium (kit maps it to 600); user: Bold b too thick */
html.logo-full .logo-swap .logo-g{opacity:0}
html.logo-full .logo-swap .logo-g-solid{opacity:1}
html.logo-full .logo-swap .logo-word{opacity:1;transform:none;transition-delay:.08s}
@media (prefers-reduced-motion:reduce){.logo-swap .logo-word{transform:none}}
/* Big footer "gab" in The Seasons, matching the nav logo (the template's tight display tracking is dropped for the serif). */
.display-01.footer-title{font-family:"the-seasons",serif;font-weight:400;letter-spacing:-0.01em}


/* ---- Type system (2026-10-19): Neue Haas Grotesk + IvyPresto, interlaced like "socialhaus" ----
   Body: Neue Haas Grotesk Text. Headlines / display: Neue Haas Grotesk Display 75 Bold (was 95 Black; user asked for thinner).
   Accent words (<em>, .italic-text, .text-span-2, .accent): IvyPresto Display Italic.
   All from Adobe Fonts kit ngy5hls (loaded in each page's <head>). Footer "gab" keeps The Seasons. */
:root{--font-display:"neue-haas-grotesk-display","neue-haas-grotesk-text",Arial,sans-serif;--font-accent:"ivypresto-display",Georgia,serif}
h1,h2,h3,.heading,.display-01,.display-02,.display-03,.heading-subtitle,.nav-link.big-text,h2.h1-look{font-family:var(--font-display);font-weight:700}
/* Headlines a step lighter: Haas Display 65 Medium (user, 2026-10-20). Hero, menu and the hidden labels stay Bold. */
h1,h2,h3,.heading,.display-02,.heading-subtitle,h2.h1-look{font-weight:600}
/* Haas Black has a narrow space: open word gaps a little and ease the template's tight tracking */
h1,h2,h3,.heading,.heading-subtitle,h2.h1-look{letter-spacing:-.02em;word-spacing:.08em}
em,i,.italic-text,.text-span-2,.accent{font-family:var(--font-accent);font-style:italic;font-weight:400;letter-spacing:0}
/* IvyPresto italic x-height (.536em) vs Haas Display Bold (.512em): scale accents to .95 inside headlines so x-heights match */
:is(h1,h2,h3,.heading,[class*="display-"]) :is(em,i,.accent){font-size:var(--accent-scale,.95em);line-height:0}

/* Whole home-page project card clickable (an empty link stretched over the card) */
.projects_homepage{position:relative}
.projects_homepage .card-link{position:absolute;inset:0;z-index:5;border-radius:inherit}

/* ---- Page transitions (assets/site/transitions.js): a "push" — both pages sit edge to edge like one strip;
   the old page slides fully out to the left while the new one slides in from the right, same timing and curve,
   no fade, no overlap. Mirrored on Back. ---- */
@view-transition{navigation:auto}
html{background:#000}
:root{--pt-dur:.9s;--pt-ease:cubic-bezier(.65,0,.35,1)}   /* symmetric ease-in-out: gentle start, gentle settle */
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal;animation-duration:var(--pt-dur);
  animation-timing-function:var(--pt-ease);animation-fill-mode:both}
::view-transition-old(root){animation-name:pt-out}
::view-transition-new(root){animation-name:pt-in}
html:active-view-transition-type(back)::view-transition-old(root){animation-name:pt-out-back}
html:active-view-transition-type(back)::view-transition-new(root){animation-name:pt-in-back}
@keyframes pt-out{to{transform:translateX(-100%);filter:brightness(0)}}
@keyframes pt-in{from{transform:translateX(100%)}}
@keyframes pt-out-back{to{transform:translateX(100%);filter:brightness(0)}}
@keyframes pt-in-back{from{transform:translateX(-100%)}}
/* Logo + menu stay put: the navbar is its own layer, left out of the sliding page, and swaps in place. */
.navbar{view-transition-name:site-nav}
/* ...and never disappear on load. .navbar was removed from Webflow's hide-until-webflow.js rule in each page's
   head <style>; this overrides the IX2 / home-script fade-in (inline opacity 0 + translate) so the logo and menu
   are on screen from the first frame, on every load and inside transitions. */
:root:root .navbar.navbar.navbar{visibility:visible!important;opacity:1!important;transform:none!important;transition:none!important}
::view-transition-group(site-nav){animation:none;z-index:10}
::view-transition-old(site-nav){animation:none;display:none}
::view-transition-new(site-nav){animation:none}
/* fallback for browsers without cross-document view transitions: slide out, then slide in */
html.pt-leaving body{animation:pt-out .45s cubic-bezier(.5,0,.9,.4) both;pointer-events:none}
html.pt-entering body{animation:pt-in .55s cubic-bezier(.15,.6,.3,1) both}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  html.pt-leaving body,html.pt-entering body{animation:none}
}

/* Home project cards: 2.5px between cards, 4px corners, and the same side margin as all other content */
.project-wrap{gap:var(--card-gap,20px);width:100%;margin-left:0;margin-right:0}   /* page side margin like everything else (2026-10-20) */
.project-wrap .projects_homepage{border-radius:4px!important;overflow:hidden}
.project-wrap .projects_homepage *:not(.card-link){border-radius:0!important}   /* inner videos/images had 15–24px corners */
.project-wrap>.projects_homepage{margin-top:0!important;margin-bottom:0!important}  /* template adds a 2px top margin */

/* Frosted strip behind the logo + hamburger: a PROGRESSIVE blur + darkening that tapers smoothly to nothing.
   .nav-frost (first thing in <body>, fixed, z 499 just under the navbar) holds 5 backdrop-blur layers, strongest
   at the top, each masked to fade out a little lower, plus an eased dark gradient on top.
   Not inside .navbar: its view-transition-name makes it a "backdrop root", so backdrop-filter in it blurs nothing.
   The wrapper itself carries no filter/mask/view-transition-name for the same reason.
   No view-transition-name on it (named layers were captured as a hard-edged block). transitions.js fades it out
   quickly on tap (html.pt-frost-out), keeps it off while pages slide (html.pt-nofrost) and fades it back in after. */
.nav-frost{position:fixed;top:0;left:0;right:0;height:140px;z-index:499;pointer-events:none}
/* Fades run on each LAYER, never on the wrapper: a wrapper with opacity < 1 becomes a backdrop root, which kills
   the blur for the whole fade (only the darkening faded — "brightness first, then blur pops in"). */
.nav-frost>i{transition:opacity .45s cubic-bezier(.2,.8,.2,1)}                      /* fade back in after a page change */
html.pt-frost-out .nav-frost>i{opacity:0;transition:opacity .18s ease-out}         /* quick fade out on tap */
html.pt-nofrost .nav-frost>i{opacity:0;transition:none}                            /* held off while pages slide */
.nav-frost>i{position:absolute;inset:0}
.nav-frost>i:nth-child(1){-webkit-backdrop-filter:blur(.5px);backdrop-filter:blur(.5px);
  -webkit-mask-image:linear-gradient(#000 0 72%,transparent 100%);mask-image:linear-gradient(#000 0 72%,transparent 100%)}
.nav-frost>i:nth-child(2){-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);
  -webkit-mask-image:linear-gradient(#000 0 56%,transparent 86%);mask-image:linear-gradient(#000 0 56%,transparent 86%)}
.nav-frost>i:nth-child(3){-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  -webkit-mask-image:linear-gradient(#000 0 42%,transparent 72%);mask-image:linear-gradient(#000 0 42%,transparent 72%)}
.nav-frost>i:nth-child(4){-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  -webkit-mask-image:linear-gradient(#000 0 30%,transparent 60%);mask-image:linear-gradient(#000 0 30%,transparent 60%)}
.nav-frost>i:nth-child(5){-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  -webkit-mask-image:linear-gradient(#000 0 18%,transparent 48%);mask-image:linear-gradient(#000 0 18%,transparent 48%)}
.nav-frost>i:nth-child(6){/* darkening, eased so there's no visible band */
  background:linear-gradient(rgba(0,0,0,.42) 0%,rgba(0,0,0,.36) 20%,rgba(0,0,0,.26) 40%,rgba(0,0,0,.15) 58%,
    rgba(0,0,0,.07) 74%,rgba(0,0,0,.02) 88%,transparent 100%)}
html.in-phone .nav-frost{display:none}   /* inside the desktop phone mockup the logo/menu sit outside */
.navbar{z-index:500!important}   /* logo + menu always above the frost (template pages had no z-index) */

/* Home hero (black title card + video card) sits at the page side margin, same as everything else */
.page-padding.top.toppagesection{padding-left:var(--side)!important;padding-right:var(--side)!important}
.hero_main{--pl:0px!important}   /* title text lines up at the same side margin */

/* Work page (/project): reset to a title + three random home page cards (same card styles, 2.5px between, 16px sides) */
.work-reset{padding:104px 0 56px}
.work-reset .project-wrap{width:auto;margin-left:var(--side);margin-right:var(--side)}   /* same side margin as the rest of the site */
.work-head{padding:0 var(--side) 20px}
.work-title{margin:0;font-size:56px;line-height:.95;color:#e6e6e6}

/* Footer: full-width background (no side/bottom margin, square corners); its content sits at the page side margin */
.section-footer .page-padding{padding-left:0!important;padding-right:0!important;padding-bottom:0}
.section-footer .container.padding-top{max-width:none;width:100%;border-radius:0;overflow:hidden;
  padding-left:var(--side)!important;padding-right:var(--side)!important}   /* background full width (user, 2026-10-21); content keeps the side margin */

/* Footer logo: the solid logo (g mark + IvyPresto "a" + Haas "b"), replacing the old Seasons "gab".
   logo.js lays out the letters; the wrapper is sized to the ink (1.175em wide; the g sits .288em into its square). */
.logo-swap--solid .logo-g{display:none}
.logo-swap--solid .logo-g-solid,.logo-swap--solid .logo-word{opacity:1!important;transform:none!important}
.footer-logo{font-size:170px;width:1.175em;height:1em;position:relative;margin:0 auto 20px}
.footer-logo .logo-swap{position:absolute;left:-.288em;top:0;color:#e6e6e6}

/* Home hero: the black title card loads short, so "Your Creative Partner / from Montréal" sits high (card ends
   at nav 84px + 201px = 285px from the top) with the video card right below — the user's chosen position.
   Fixed px (was 56svh) so it never loads lower on taller phones. */
.hero_main{--black:201px!important}
/* Home hero matches the cards (2026-10-20): 4px bottom corners (the concave corners under the black card keep
   their bigger 34px curve, which the user prefers) and the same 2.5px gap above the first project card. The pinned video lets go as soon as the black title card
   has scrolled away (hero = one screen + the black card), so there's no dead scroll after the reveal. */
.hero_main:not(.hero-static){height:calc(100svh + var(--black))!important}
.hero-pin .darken-layer{height:calc(100% - 2.5px)!important;border-bottom-left-radius:4px!important;border-bottom-right-radius:4px!important}
.hero-pin .darken-layer .code-embed-og{top:0!important;bottom:0!important;height:auto!important}


/* Hamburger mirrors the logo: its visible lines sit 16px from the right edge, like the logo square from the left
   (template padding put them 33.7px in; the lottie icon's lines have ~1.7px of built-in inset) */
.navbar .menu-button{margin-right:-17.7px}

/* Inside the desktop phone mockup (html.in-frame, set by transitions.js) the logo + menu button are drawn OUTSIDE
   the phone, so hide the page's own ones and the frost behind them (its blur masks also fail in that iframe).
   The outside toggle still clicks the hidden .w-nav-button, so the menu itself must stay clickable. */
html.in-frame .nav-frost{display:none}
html.in-frame .navbar .nav-brand,html.in-frame .navbar .menu-button{visibility:hidden!important}
html.in-frame .navbar{pointer-events:none}
html.in-frame .navbar .w-nav-overlay,html.in-frame .navbar .w-nav-menu{pointer-events:auto}

/* Section headers, site-wide (user's reference "MAINS WATER CO.", 2026-10-20): uppercase Haas Text Medium title (the reference's weight), the section
   number at the far end of the same line, and a thin full-width rule underneath (replaces the old "/ About … N. 01" bar). */
.top-bar{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:12px;
  text-decoration:none!important;border:0!important}
.top-bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(230,230,230,.32)}
.top-bar>.body-text-5{font-family:"neue-haas-grotesk-text",sans-serif!important;font-weight:500!important;font-size:16px!important;line-height:1!important;
  letter-spacing:.01em!important;text-transform:uppercase!important;color:#e6e6e6;text-decoration:none!important}
.top-bar>.body-text-5:last-child{font-variant-numeric:tabular-nums}
/* Home: "Most recent projects" header above the cards */
.home-head{padding:30px 0 0}
.home-head .top-bar{margin-bottom:20px}
@media (min-width:768px){.home-head{display:none}}

/* Brand names on the project cards: Haas Text Medium, a lighter weight than the old 600 (the kit has no Text 600, so it
   rendered as Bold) (user, 2026-10-20) */
.project-info .body-text-3:not(.soft-text){font-family:"neue-haas-grotesk-text",sans-serif!important;font-weight:500!important;
  font-size:16px!important;line-height:1.15!important;letter-spacing:.01em!important}   /* same size as the section headers (user) */


/* No word-by-word scroll reveal on headlines (user, 2026-10-20): Webflow's interaction splits [Text_Scrolling_Effect]
   headings into words and fades them grey→white while scrolling; pin every piece at full white instead. */
[Text_Scrolling_Effect="Stagger"]{opacity:1!important;visibility:visible!important}
[Text_Scrolling_Effect="Stagger"] *{opacity:1!important;visibility:visible!important;color:inherit!important;transform:none!important;filter:none!important}

/* Phones: the three-step services row (Ideation / Production / Deliverables) — the first tile no longer
   sits 1px left of the page margin (tiles overlap borders with -1px) (user, 2026-10-20) */
@media (max-width:479px){
  .service-wrapper>.service-card:first-child{margin-left:0!important}
  .service-wrapper{width:100%!important}   /* the row sized itself to its labels; always fill the page width */
}

/* One side margin for everything on phones (user, 2026-10-21: half of the former 16px). Every page-padding — text,
   photos, headers, cards, hero, footer — uses it; project pages read it through mare.css. */
:root{--side:16px}
@media (max-width:767px){
  :root{--side:8px}
  .page-padding{padding-left:var(--side)!important;padding-right:var(--side)!important}
}

/* Menu, after the user's reference (Mains Water Co., 2026-10-21), keeping the site's colours: full-screen panel,
   links styled like the section headers (uppercase Haas Text Medium, 28px here) on thin full-width rules with the number
   at the end of the line, and at the bottom the email over a rule plus a full-width "gab" wordmark (added by logo.js). */
.navbar .w-nav-overlay{position:fixed!important;top:0!important;left:0!important;right:0!important;height:100svh!important;z-index:-1}   /* full screen, behind the logo + menu button */
.hero-nav-menu.w-nav-menu{height:100svh;box-sizing:border-box;padding:0 var(--side)!important;background:rgba(3,3,3,.97)}   /* the menu's near-black */
.navbar .menu-bg-overlay{display:none!important}   /* replaced by the panel's own background */
.hero-nav-menu.w-nav-menu[data-nav-menu-open]{display:flex!important;flex-direction:column}
.hero-nav-menu .nav-link-wrap{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;
  gap:0!important;margin:auto 0!important;padding:0!important;width:100%!important;flex-shrink:0;border-top:1px solid rgba(230,230,230,.32)}   /* centred on the screen (user) */
.hero-nav-menu .nav-link.big-text{display:flex!important;justify-content:space-between!important;align-items:baseline!important;width:100%!important;
  margin:0!important;padding:16px 0 13px!important;border-bottom:1px solid rgba(230,230,230,.32);
  font-family:"neue-haas-grotesk-text",sans-serif!important;font-weight:500!important;font-size:28px!important;line-height:1!important;
  letter-spacing:.01em!important;text-transform:uppercase!important;text-decoration:none!important}   /* section-header style, menu size (user) */
.hero-nav-menu .nav-menu-text{font:inherit!important;letter-spacing:inherit!important;margin:0!important}
.hero-nav-menu .nav-number{font:inherit!important;letter-spacing:inherit!important;color:#e6e6e6!important;opacity:1!important;
  padding:0!important;margin:0!important;align-self:baseline}   /* number like the headers: same type, white, end of line */
.hero-nav-menu .nav-underline{display:none!important}
.menu-foot{margin-top:auto;padding-top:24px;align-self:stretch;width:100%;text-align:left}
.menu-foot{display:none!important}   /* email + wordmark hidden for now (user, 2026-10-21) — delete this line to bring them back */
.menu-email{display:block;text-align:left!important;padding-bottom:10px;border-bottom:1px solid rgba(230,230,230,.32);margin-bottom:12px;
  font-family:"neue-haas-grotesk-text",sans-serif;font-weight:500;font-size:16px;letter-spacing:.01em;color:#e6e6e6;text-decoration:none}
.menu-mark{position:relative;line-height:0}
.menu-mark .logo-swap{position:relative;display:block}

/* SEO (2026-10-21): one H1 per page. Extra visual headlines are H2s with .h1-look (every H1 rule above also targets
   h2.h1-look, so they look identical); .sr-only holds a visually hidden H1 where the design has none. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Desktop scrollbar: a thin white line on a transparent track (user, 2026-10-21). The page inside the phone mockup
   keeps its scrollbar hidden (html.in-phone / in-frame). */
@media (min-width:768px){
  html:not(.in-phone):not(.in-frame){scrollbar-width:thin;scrollbar-color:rgba(230,230,230,.85) transparent}
  html:not(.in-phone):not(.in-frame)::-webkit-scrollbar{width:3px;height:3px;background:transparent}
  html:not(.in-phone):not(.in-frame)::-webkit-scrollbar-track{background:transparent}
  html:not(.in-phone):not(.in-frame)::-webkit-scrollbar-thumb{background:rgba(230,230,230,.85);border-radius:3px}
}

/* DADA card (2026-10-22): same frame as the other video cards; poster photo behind the reel while clips load */
.projects_homepage.collection-item.project_dada{background-image:url("/assets/projects/dada/dada-card-1200.jpg");background-position:50% 50%;background-size:cover}   /* photo card (DSC06305) */
.project_dada .code-embed-8,.card-reel{width:100%;flex:1 0 100%}   /* its videos are absolutely positioned, so give the embed + reel the card's width */   /* its videos are absolutely positioned, so give the reel the card's width */

/* Nama card: the vertical hero video (406x720) sits centred in the card, cropped top and bottom (2026-10-22) */
.projects_homepage.collection-item.project_5{align-items:center;overflow:hidden}
.projects_homepage.collection-item.project_5 .project-info{top:auto!important;bottom:0!important;z-index:2}   /* title stays at the bottom, over the video */

/* Audi card (project_1) is no longer first: the template hid it until Webflow's IX3 loaded and slid it in from 100%,
   which sometimes left it invisible. Treat it like every other card (our scroll reveal handles the entrance). */
html.w-mod-js .project-wrap .projects_homepage.collection-item.project_1.project_1,over the video */

/* Audi card (project_audi) is no longer first: the template hid it until Webflow's IX3 loaded and slid it in from 100%,which sometimes left it invisible. Treat it like every other card (our scroll reveal handles the entrance). */
html.w-mod-js .project-wrap .projects_homepage.collection-item.project_audi.project_audi{visibility:visible!important}   /* outranks the template's head rule */

/* Site-wide card interaction and compact contact actions (2026-10-23). */
.about_hero-intro .site-outline-button,.contac-form-wrap .contact-button{display:inline-flex!important;align-items:center;justify-content:center;gap:20px;width:auto!important;min-height:50px;padding:13px 16px!important;border:1px solid rgba(230,230,230,.65)!important;border-radius:4px!important;background:#0b0b0b!important;color:#e6e6e6!important;text-decoration:none!important;font:500 16px/1.1 "neue-haas-grotesk-text",Arial,sans-serif!important;letter-spacing:.01em;text-transform:uppercase;cursor:pointer}
.about_hero-intro .site-outline-button{margin-top:30px}
.about_hero-intro .site-outline-button:hover,.contac-form-wrap .contact-button:hover{background:#242424!important}
.about_hero-intro .site-outline-button:focus-visible,.contac-form-wrap .contact-button:focus-visible{outline:2px solid #e6e6e6;outline-offset:3px}
/* Project links reveal a small arrow over a soft shadow from the upper-right. Card media stays still. */
.project-wrap .projects_homepage .card-link::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 78% 88% at 100% 0%,rgba(0,0,0,.44),transparent 74%);
  opacity:0;transition:opacity .65s ease
}
.project-wrap .projects_homepage .card-link::after{
  content:"";position:absolute;top:50%;right:20px;width:29px;height:18px;
  background:url('/assets/site/arrow-right.svg?v=1') center/29px 12px no-repeat;
  opacity:0;transform:translate(8px,-50%);pointer-events:none;
  transition:opacity .55s ease,transform .7s cubic-bezier(.22,1,.36,1)
}
@media(hover:hover) and (pointer:fine){
  .project-wrap .projects_homepage:hover .card-link::before,
  .project-wrap .projects_homepage:hover .card-link::after{opacity:.95}
  .project-wrap .projects_homepage:hover .card-link::after{transform:translateY(-50%)}
}
.project-wrap .projects_homepage .card-link:focus-visible::before,
.project-wrap .projects_homepage .card-link:focus-visible::after{opacity:.95}
.project-wrap .projects_homepage .card-link:focus-visible::after{transform:translateY(-50%)}
.project-wrap .projects_homepage:not(:has(video)) .project-info{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){.project-wrap .projects_homepage .card-link::before,.project-wrap .projects_homepage .card-link::after{transition:none}}

/* Finish the About and Contact layouts with the same body type and button rhythm as Home. */
.about_hero-intro .site-outline-button{align-self:center!important}
.contac-form-wrap .contact-button{align-self:flex-start!important}
.contact-page .global-heading .heading-subtitle{max-width:38ch;margin-left:auto;margin-right:auto;font:400 18px/1.4 "neue-haas-grotesk-text",Arial,sans-serif!important;color:#aaa}
.about-services,.contact-page section.margin-top{padding-bottom:88px}
@media(max-width:767px){.about-services,.contact-page section.margin-top{padding-bottom:72px}}

/* Keep the Contact section’s top margin from collapsing through the page wrapper and moving the fixed nav. */
.contact-page .page-wrapper{display:flow-root}

.contact-page section.margin-top{margin-top:0!important}

/* TYPE SCALE (2026-10-27, Gabriel: "tidy up the fonts"). Home page had 20 sizes / 7 weights; now 7 sizes and
   4 weights: Haas Display 600 (700 only for the hero lock-up), Haas Text 400 + 500; IvyPresto italic accent
   words stay at .95em of their line. Change sizes here, not per element. */
:root{--t-xl:40px;--t-l:32px;--t-m:28px;--t-body:18px;--t-label:16px;--t-small:14px;--t-micro:12px;--ls-head:-.02em;--ls-caps:.01em}
/* Display XL — hero lock-up (Display 700) and footer invitation */
html body .hero-content .text-block-4,html body .hero-content .text-block-5.knockout-word{font-size:var(--t-xl)!important}
html body .home-footer-content h2{font-size:var(--t-xl)!important;line-height:1.02!important;letter-spacing:var(--ls-head)!important}
/* Display L — section headlines */
html body .story-intro .story-intro-title,html body #services .h1-look,html body #about .h1-look{font-size:var(--t-l)!important;line-height:1.08!important;letter-spacing:var(--ls-head)!important}
/* the About headline sits in a half-width column beside the portrait: one step down */
html body #about .h1-look{font-size:var(--t-m)!important}
/* Display M — hero captions (menu links are 28 too) */
html body .hero-mix .hero-cap{font-size:var(--t-m)!important}
/* Body — paragraphs and FAQ questions */
/* Lead paragraph — one class for every intro-style paragraph (home intro, Services); grey, measured line length */
html body .lead-copy{max-width:37ch;margin-left:0;margin-right:0;font-family:"neue-haas-grotesk-text",Arial,sans-serif!important;font-size:var(--t-body)!important;font-weight:400!important;line-height:1.5!important;letter-spacing:-.015em!important;text-transform:none!important;color:#aaa!important}
html body .faq-question .body-text-3,html body .faq-question .body-text-3 strong{font-size:var(--t-body)!important;font-weight:500!important;line-height:1.3!important;letter-spacing:var(--ls-caps)!important}
/* Label — footer nav, service steps, FAQ answers */
html body .home-footer-nav .home-row-link{font-size:var(--t-label)!important;letter-spacing:var(--ls-caps)!important}
html body .service-left .body-text-2{font-size:var(--t-label)!important;font-weight:400!important}
html body .faq-answer .body-text-5{font-size:var(--t-label)!important;font-weight:400!important;line-height:1.5!important}
/* Small — card categories (uppercase like the card titles), service numbers */
html body .project-info .sub_head{font-size:var(--t-small)!important;font-weight:500!important;text-transform:uppercase!important;letter-spacing:var(--ls-caps)!important}
html body .service-left .font-weight-light{font-size:var(--t-small)!important;font-weight:400!important}

/* Card gap: was the rule-to-first-card space (20px), halved to 10px (Gabriel 2026-10-27) */
:root{--card-gap:10px}

/* HEADLINE FONT (2026-10-27, Gabriel: headlines "more like the ABOUT one"): every headline is Haas Text Medium,
   the same face as the section labels, instead of Haas Display. Only the logo's "b" keeps Display. */
:root{--font-display:"neue-haas-grotesk-text",Arial,sans-serif;--ls-head:-.01em}
html body :is(h1,h2,h3,.heading,.display-01,.display-02,.display-03,.heading-subtitle,h2.h1-look,.story-intro-title,.about-name,.hero-cap,.mare-title,.mare-card__title){font-family:var(--font-display)!important;font-weight:500!important;letter-spacing:var(--ls-head)!important}
/* Text is wider than Display: let the footer invitation keep its two lines */
html body .home-footer-content h2,html body .home-footer h2{max-width:none!important}
/* Hero lock-up keeps Haas Display Bold (Gabriel 10/27), tracked 0.5px looser than before (-1.2px -> -0.7px at 40px) */
html body .hero-content .text-block-4,html body .hero-content .text-block-5.knockout-word{font-family:"neue-haas-grotesk-display",sans-serif!important;font-weight:700!important;letter-spacing:-.7px!important}
/* Hero lock-up: "from MONTRÉAL" left-aligned with VISUAL STORYTELLER (Gabriel 10/27); "from" back in the line instead of hanging off the left */
html body .hero-content .clip-text{text-align:left!important}html body .hero-content .text-block-3{position:static!important;display:inline-block!important;margin-right:.12em!important}
/* "from" nudged right (.5em): its italic f tail must stay inside the black panel (white sliver otherwise) and sits over the video card's rounded corner (Gabriel 10/27) */
html body .hero-content .text-block-3{margin-left:.5em!important}

/* Page load: the logo opens as "gab" and retracts to the g after 3 s (Gabriel 2026-10-27).
   logo.js adds .logo-placed once a + b are laid out (so they never flash unpositioned) and .logo-settled after 3 s. */
html:not(.logo-settled) .logo-swap .logo-g{opacity:0}
html:not(.logo-settled) .logo-swap .logo-g-solid{opacity:1}
html.logo-placed:not(.logo-settled) .logo-swap .logo-word{opacity:1;transform:none}
/* Hero captions start appearing 3.5 s after the page loads (Gabriel 10/27) */
@keyframes hero-cap-in{from{opacity:0}to{opacity:1}}
html body .hero-mix .hero-cap{animation:hero-cap-in .8s ease 2.5s both}
/* Haas Text has normal-width spaces: drop the extra word-spacing (.08em) that was added for Haas Display, it made lines look spread out (Gabriel 10/27) */
html body :is(h1,h2,h3,.heading,.display-01,.display-02,.display-03,.heading-subtitle,h2.h1-look,.story-intro-title,.about-name,.hero-cap,.mare-title,.mare-card__title),html body :is(h1,h2,h3,.h1-look,.heading) *{word-spacing:normal!important}
/* Motto lines start in line with "from" (Gabriel 10/27): from's box sits .5em (of its .57 size) = .285em of the motto in */
html body .hero-content .text-block-5.knockout-word{margin-left:.285em!important}
/* French "VOTRE PARTENAIRE" is wider: 4% smaller so it stays on one line after the shift */
html[lang^="fr"] body .hero-content .text-block-5.knockout-word{font-size:calc(var(--t-xl) * .96)!important}
/* English motto 5px lower (Gabriel 10/27) */
html[lang^="en"] body .hero-content .text-block-5.knockout-word{position:relative!important;top:5px!important}
/* Motto accent word ("creative" / "créatif") in IvyPresto italic, lowercase, sized up to sit with the caps (Gabriel 10/27) */
html body .hero-content .text-block-5 em{font-family:var(--font-accent)!important;font-style:italic!important;font-weight:400!important;text-transform:none!important;letter-spacing:0!important;font-size:1.12em}
/* PARAGRAPHS (Gabriel 2026-11-02): one size site-wide = the About intro ("I'm Gabriel…", 20px), lines a bit tighter (1.3).
   Colours stay per element. --t-body is the paragraph size. */
:root{--t-body:18px;--lh-body:1.36}   /* 11/05: now the homepage lead size, 18px / 1.36 (was 20 / 1.3) */
html body :is(.lead-copy,.about-lead,.about-story-content p,.heading-subtitle,.mare-body,.mare-body p,.personal-deck,.faq-answer .body-text-5){font-family:"neue-haas-grotesk-text",Arial,sans-serif!important;font-size:var(--t-body)!important;font-weight:400!important;line-height:var(--lh-body)!important;letter-spacing:-.015em!important;word-spacing:normal!important}
html .contact-page .global-heading .heading-subtitle{font-size:var(--t-body)!important;line-height:var(--lh-body)!important;letter-spacing:-.015em!important}
/* Paragraphs not grey (Gabriel 11/02): same off-white as the About intro on dark; near-black on the light project intro cards */
html body :is(.lead-copy,.about-lead,.about-story-content p,.personal-deck,.faq-answer .body-text-5),html .contact-page .global-heading .heading-subtitle{color:#e6e6e6!important}
html body :is(.mare-body,.mare-body p){color:#141414!important}
/* Paragraphs use ONE font (Gabriel 11/02): accent words inside paragraphs read as plain paragraph text; the italic accent stays in headlines only */
html body :is(.lead-copy,.about-lead,.about-story-content p,.personal-deck,.faq-answer .body-text-5,.mare-body,.mare-body p) :is(em,i,b,strong,.italic-text,.text-span-2,.accent),html .contact-page .global-heading .heading-subtitle :is(em,i,b,strong,.italic-text,.text-span-2,.accent){font-family:inherit!important;font-style:normal!important;font-weight:inherit!important;font-size:inherit!important;letter-spacing:inherit!important;color:inherit!important}

/* CTA buttons, every page (Gabriel 11/04): solid black, no gradient / grain / drift; a touch lighter on hover */
html body :is(.home-about-cta,.button-link,.site-outline-button,.contac-form-wrap .contact-button,.home-footer .home-footer-action){
  border-color:rgba(230,230,230,.4)!important;background:#000!important;animation:none!important;transition:background-color .2s ease,border-color .2s ease}
html body :is(.home-about-cta,.button-link,.site-outline-button,.contac-form-wrap .contact-button,.home-footer .home-footer-action):hover{background:#1a1a1a!important;border-color:rgba(230,230,230,.65)!important}

/* Home About: Webflow fixes the section at 50svh (phones) / 70svh, so the photo + headline + button spilled into the
   footer once the FAQ that followed it moved to Services (2026-11-04). Let it be as tall as its content. */
html body .section.about_section{height:auto!important}

/* Tighter headline -> paragraph gap, sitewide (Gabriel 2026-11-04): one rhythm of ~18-20px everywhere */
html body .main-content > .h1-look + .lead-copy{margin-top:-30px}
html body .story-intro .story-intro-title{margin-bottom:18px!important}
html body .about-story-content h2 + p{margin-top:0!important}
html body .about-story-content h2{margin-bottom:18px!important}
html body .svc-block > .h1-look{margin-bottom:18px!important}
html body .svc-page .global-heading .heading-subtitle{margin-top:16px!important}
html body .croyds-hero-copy .croyds-deck{margin-top:20px!important}

/* Menu reveal (Gabriel 11/04): one even stagger for all five links, top to bottom. Replaces Webflow's cc-1..cc-4 groups,
   which animated Work + Services together (Services was cloned from Work) and out of order. Animations beat IX2's inline styles. */
@keyframes nav-link-in{from{opacity:0;transform:translate3d(0,50px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.w-nav-menu[data-nav-menu-open] .nav-link-wrap>.nav-link{animation:nav-link-in .6s cubic-bezier(.22,1,.36,1) both}
.w-nav-menu[data-nav-menu-open] .nav-link-wrap>.nav-link:nth-child(1){animation-delay:.3s}
.w-nav-menu[data-nav-menu-open] .nav-link-wrap>.nav-link:nth-child(2){animation-delay:.37s}
.w-nav-menu[data-nav-menu-open] .nav-link-wrap>.nav-link:nth-child(3){animation-delay:.44s}
.w-nav-menu[data-nav-menu-open] .nav-link-wrap>.nav-link:nth-child(4){animation-delay:.51s}
.w-nav-menu[data-nav-menu-open] .nav-link-wrap>.nav-link:nth-child(5){animation-delay:.58s}
@media (prefers-reduced-motion:reduce){.w-nav-menu[data-nav-menu-open] .nav-link-wrap>.nav-link{animation-duration:.01s;animation-delay:0s!important}}

/* Desktop phone mockup (Gabriel 11/04): logo + hamburger live INSIDE the phone, like on a real phone; the copies outside are hidden. */
html.in-phone body .navbar .nav-brand,html.in-phone body .navbar .menu-button,
html.in-frame body .navbar .nav-brand,html.in-frame body .navbar .menu-button{visibility:visible!important;pointer-events:auto!important}
.phone-mockup-bar .phone-mockup-logo,.phone-mockup-bar .phone-mockup-toggle{display:none!important}
/* ...and the bar behind them is the same frosted, see-through strip as on a real phone */
html.in-phone body .nav-frost,html.in-frame body .nav-frost{display:none!important}   /* the desktop page draws it (.phone-frost) */
/* EN/FR toggle hidden for now (Gabriel 11/04): only the switch; the FR pages stay online at /fr/. Delete this line to bring it back. */
html body .site-language-toggle{display:none!important}

/* Desktop phone frost (Gabriel 11/04): the exact mobile .nav-frost, drawn on the desktop page over the top of the phone
   screen (desktop Chrome renders masked backdrop blur cleanly here, not inside the iframe). Blur radii x the phone scale
   (--s). Sharp copies of the logo + hamburger sit on top (placeFrost in index.html); the phone's own ones go invisible. */
.phone-frost{position:absolute;left:0;right:0;top:0;height:0;z-index:1;pointer-events:none}
.phone-frost>i{position:absolute;inset:0;transition:opacity .45s cubic-bezier(.2,.8,.2,1)}
.phone-frost.is-off>i{opacity:0;transition:opacity .18s ease-out}
.phone-frost>i:nth-child(1){-webkit-backdrop-filter:blur(calc(.5px * var(--s,1)));backdrop-filter:blur(calc(.5px * var(--s,1)));-webkit-mask-image:linear-gradient(#000 0 72%,transparent 100%);mask-image:linear-gradient(#000 0 72%,transparent 100%)}
.phone-frost>i:nth-child(2){-webkit-backdrop-filter:blur(calc(1px * var(--s,1)));backdrop-filter:blur(calc(1px * var(--s,1)));-webkit-mask-image:linear-gradient(#000 0 56%,transparent 86%);mask-image:linear-gradient(#000 0 56%,transparent 86%)}
.phone-frost>i:nth-child(3){-webkit-backdrop-filter:blur(calc(2px * var(--s,1)));backdrop-filter:blur(calc(2px * var(--s,1)));-webkit-mask-image:linear-gradient(#000 0 42%,transparent 72%);mask-image:linear-gradient(#000 0 42%,transparent 72%)}
.phone-frost>i:nth-child(4){-webkit-backdrop-filter:blur(calc(4px * var(--s,1)));backdrop-filter:blur(calc(4px * var(--s,1)));-webkit-mask-image:linear-gradient(#000 0 30%,transparent 60%);mask-image:linear-gradient(#000 0 30%,transparent 60%)}
.phone-frost>i:nth-child(5){-webkit-backdrop-filter:blur(calc(8px * var(--s,1)));backdrop-filter:blur(calc(8px * var(--s,1)));-webkit-mask-image:linear-gradient(#000 0 18%,transparent 48%);mask-image:linear-gradient(#000 0 18%,transparent 48%)}
.phone-frost>i:nth-child(6){background:linear-gradient(rgba(0,0,0,.42) 0%,rgba(0,0,0,.36) 20%,rgba(0,0,0,.26) 40%,rgba(0,0,0,.15) 58%,rgba(0,0,0,.07) 74%,rgba(0,0,0,.02) 88%,transparent 100%)}
/* logo copy = a live clone of the phone's .logo-swap (styles copied from the phone each frame, see syncLogo) */
.phone-frost-logo{position:absolute;z-index:1;pointer-events:none;transform-origin:0 0}
.phone-frost-menu{position:absolute;z-index:1;pointer-events:none;overflow:visible}
.phone-frost-logo.is-off,.phone-frost-menu.is-off{visibility:hidden}
/* ROOT CAUSE (found in his Chrome 156, 11/04): the phone screen's rounded overflow clip makes Chrome drop mask-image on
   backdrop-filter, so the frost ended in a hard line. Screen no longer clips; the iframe rounds its own corners and the frost
   layers round their top corners (--rx/--ry from placeFrost). */
html body .phone-mockup-screen{overflow:visible;border-radius:0;background:transparent}
html body .phone-mockup-screen iframe{border-radius:14.55% / 6.71%;background:#000}
html body .phone-mockup-screen .work-gallery{border-radius:14.55% / 6.71%;overflow:hidden}
.phone-frost>i{border-radius:var(--rx,0) var(--rx,0) 0 0 / var(--ry,0) var(--ry,0) 0 0}

/* Text colour (Gabriel 11/04): soft white #e6e6e6 instead of pure white, easier on the eyes on black. Literal whites were
   replaced in every stylesheet; this catches the ones Webflow sets through variables. Grey .soft-text keeps its own tone. */
html body,html body :is(h1,h2,h3,h4,h5,h6,.h1-look,.display-01,.display-02,.about-name,.body-text-1,.body-text-2,.body-text-3,.body-text-4,.body-text-5,.nav-menu-text,.nav-number,.caps,.lead-copy):not(.soft-text){color:#e6e6e6}
html body .about-services .experience-item .soft-text{color:rgba(230,230,230,.62)!important}

/* Sans headings (Neue Haas), every page (Gabriel 11/04): letter-spacing -2px. The italic serif words inside them keep their own spacing. */
html:root body :is(.display-01,.display-02,.croyds-title,.work-title,.about-name,.h1-look,.story-intro-title,.about-story-content h2,.home-footer h2,footer h2):is(*,*){letter-spacing:-2px!important}
html body :is(.display-01,.display-02,.croyds-title,.work-title,.about-name,.h1-look,.story-intro-title,.about-story-content h2,.home-footer h2,footer h2) :is(em,i,.italic-text){letter-spacing:-.01em!important}
html body .story-intro .story-intro-title,html body #services .h1-look,html body #about .h1-look{letter-spacing:-2px!important}

/* Footer "Let's talk" sits on the photo (Gabriel 11/04): frosted glass instead of solid black, lighter than the top bar frost */
html body .home-footer .home-footer-action{background:rgba(0,0,0,.22)!important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
html body .home-footer .home-footer-action:hover{background:rgba(0,0,0,.36)!important}

/* SPACING SCALE (audit 2026-11-05, measured at 393px): section break 72 · label/heading -> content 24 · heading -> paragraph 18 ·
   paragraph -> next block 40 · media -> button 24 · card gaps 10. Each rule below sets one measured gap to the scale. */
/* home */
html body .home-head{padding-top:32px!important}   /* intro paragraph -> Selected work: visible space = video -> heading (~55px, Gabriel 11/05) */
html body .home-head + * .project-wrap,html body .project-content-wrapper .project-wrap{margin-top:4px}   /* label -> cards: 20 -> 24 */
html body #services > .page-padding > .container{padding-top:86px!important}   /* View all work -> SERVICES label: same visible space as intro -> SELECTED WORK (~56px, Gabriel 11/05) */
html body #services .top-bar{margin-bottom:24px!important}                          /* label -> heading: 40 -> 24 */
html body #services .main-content > .h1-look + .lead-copy{margin-top:-32px!important}   /* heading -> paragraph: 20 -> 18 */
html body #services .service-wrapper{margin-top:-10px}                              /* paragraph -> photos: 50 -> 40 */
html body #services .home-services-cta{margin-top:24px!important}                   /* photos -> button: 22 -> 24 */
/* about */
html body .about_hero-image-wrap{margin-top:24px!important}                         /* name -> photo: 32 -> 24 */
html body .about_hero-intro .site-outline-button{margin-top:40px!important}         /* paragraph -> button: 36 -> 40 */
html body .about-story{padding-top:47px!important}                                  /* Get in touch -> How it began: 105 -> 72 */
html body .about-photo-grid{margin-top:40px!important}                              /* paragraph -> photos: 44 -> 40 */
html body .about-work-link{margin-top:24px!important}                               /* photos -> button: 28 -> 24 */
html body .about-services .top-bar{margin-top:3px;margin-bottom:24px!important}     /* section break 69 -> 72 · label -> heading 40 -> 24 */
html body .about-services .experience-wrap{margin-top:-26px}                        /* heading -> cards: 50 -> 24 */
/* contact */
html body.contact-page .global-heading .heading-subtitle{margin-top:18px!important}  /* title -> paragraph: 0 -> 18 */
html body.contact-page .global-heading{margin-bottom:40px!important}               /* paragraph -> form: 60 -> 40 */
/* services page */
html body .svc-page .global-heading .heading-subtitle{margin-top:18px!important}    /* title -> paragraph: 16 -> 18 */
html body .svc-block > .h1-look{margin-bottom:24px!important}                       /* heading -> cards / form: 18 -> 24 */

/* PROJECT CARD "Have a project in mind?" (tools/project_cta.py, Gabriel 11/05): light #e6e6e6 card, black text. Collapsed:
   title + arrow pointing down (176px tall on a phone, 30% shorter than a project card); tap -> it expands and reveals the
   contact form, arrow points up. Home: 48px under Explore services. Services page: the Contact section, open. */
html body .home-project-cta{width:100%;border-radius:4px;background:#e6e6e6;color:#000;overflow:hidden}
html body #services .home-project-cta{margin-top:48px}
html body .home-project-cta .hpc-head{all:unset;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;width:100%;
  min-height:calc(100vw * 7 / 15 - 7px);max-height:none;padding:18px;cursor:pointer;color:#000;-webkit-tap-highlight-color:transparent}
@media (min-width:768px){html body .home-project-cta .hpc-head{min-height:176px}}
html body .home-project-cta .hpc-head:focus-visible{outline:2px solid #000;outline-offset:-4px}
html body .home-project-cta .hpc-title{align-self:flex-start;text-align:left;color:#000!important;font:500 32px/1.08 var(--font-display,"neue-haas-grotesk-display"),sans-serif;letter-spacing:-2px}
html body .home-project-cta .hpc-title em{font-family:"ivypresto-display",serif;font-style:italic;font-weight:400;letter-spacing:-.01em;color:#000!important}
html body .home-project-cta .hpc-arrow{align-self:flex-end;display:flex;color:#000;transform:rotate(90deg);transition:transform .45s cubic-bezier(.22,1,.36,1)}
html body .home-project-cta .hpc-arrow svg{width:36px;height:auto}
html body .home-project-cta.is-open .hpc-arrow{transform:rotate(-90deg)}
html body .home-project-cta.is-open .hpc-head{min-height:0;gap:20px}
html body .home-project-cta .hpc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1)}
html body .home-project-cta.is-open .hpc-body{grid-template-rows:1fr}
html body .home-project-cta .hpc-body-inner{overflow:hidden;min-height:0}
html body .home-project-cta .hpc-body-inner > .contac-form-wrap{margin:0!important;padding:0 18px 18px;opacity:1!important;transform:none!important}
/* the form on the light card: dark text, dark hairlines, outlined black button */
html body .home-project-cta .contact-form{gap:14px}
html body .home-project-cta .contact-field{color:#000!important}
html body .home-project-cta .contact-input{background:transparent!important;color:#000!important;border-color:rgba(0,0,0,.35)!important}
html body .home-project-cta .contact-input::placeholder{color:rgba(0,0,0,.45)!important}
html body .home-project-cta .contact-input:focus{border-color:#000!important}
html body .home-project-cta .contac-form-wrap .contact-button{background:transparent!important;color:#000!important;border:1px solid #000!important;width:100%}
html body .home-project-cta .contac-form-wrap .contact-button:hover{background:rgba(0,0,0,.06)!important}
html body .home-project-cta .w-form-done,html body .home-project-cta .w-form-fail{background:transparent;color:#000;border:1px solid rgba(0,0,0,.35);border-radius:4px}

/* Contact form extras (tools/build_contact_form.py, 11/05): "(optional)" tags + tap-to-select service chips.
   Dark pages: light outline chips, selected = filled #e6e6e6. Inside the light project card: black outline, selected = filled black. */
html body .contact-form .contact-optional{opacity:.55;font-weight:400;text-transform:none;letter-spacing:0}
html body .contact-form .contact-chips{border:0;margin:0;padding:0;min-width:0;--chip:#e6e6e6;--chip-on-fg:#000}
html body .contact-form .contact-chips legend{padding:0;margin:0 0 10px}
html body .contact-form .contact-chip-list{display:flex;flex-wrap:wrap;gap:8px}
html body .contact-form .contact-chip{position:relative;display:inline-flex;cursor:pointer;margin:0}
html body .contact-form .contact-chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
html body .contact-form .contact-chip span{display:inline-block;padding:9px 13px;border:1px solid var(--chip);border-radius:999px;color:var(--chip);
  font:500 14px/1.1 "neue-haas-grotesk-text",Arial,sans-serif;transition:background-color .2s ease,color .2s ease;opacity:.85}
html body .contact-form .contact-chip input:checked + span{background:var(--chip);color:var(--chip-on-fg);opacity:1}
html body .contact-form .contact-chip input:focus-visible + span{outline:2px solid var(--chip);outline-offset:2px}
html body .home-project-cta .contact-form .contact-chips{--chip:#000;--chip-on-fg:#e6e6e6}
html body .contact-form .contact-input{color:#e6e6e6!important}
html body .home-project-cta .contact-form .contact-input{color:#000!important}
/* card head (11/05): only as tall as the title; arrow on the right, level with the last line of the title */
html body .home-project-cta .hpc-head{flex-direction:row!important;align-items:flex-end!important;justify-content:space-between;min-height:0!important;padding:20px 18px}
html body .home-project-cta .hpc-arrow{align-self:center;margin-bottom:0}
html body .home-project-cta.is-open .hpc-head{gap:12px}
/* form tidy (11/05): options in an even 2-column grid of square-cornered boxes (like the site's buttons); shorter message box */
html body .contact-form .contact-chip-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
html body .contact-form .contact-chip{display:flex}
html body .contact-form .contact-chip span{display:flex;align-items:center;width:100%;min-height:54px;padding:10px 12px;border-radius:4px;font-size:14px;line-height:1.15}
html body .contact-form textarea.contact-input{min-height:112px!important;height:112px!important}

/* PARAGRAPH STANDARD (Gabriel 11/05): every intro/body paragraph matches the homepage lead copy, Haas Text 400 18px / 1.36.
   Project intros (.mare-body) and the Services/Personal decks were 20px/26px; Croyds/Sukim decks 18px/1.28. Testimonial quotes keep their own size. */
html body .mare .mare-body p,html body p.personal-deck,html body .svc-way p.lead-copy,html body .svc-block p.lead-copy,html body p.croyds-deck{
  font-family:"neue-haas-grotesk-text",sans-serif!important;font-weight:400!important;font-size:18px!important;line-height:1.36!important}

/* Footer project card: even space above (last More-projects card -> card, ~85px) and below (card -> top of ABOUT/SERVICES/WORK letters, was ~79px) (Gabriel 11/05) */
html body .home-footer-content .home-project-cta{margin-bottom:6px}
/* Open project cards (all pages but home) can't be closed: no arrow, no pointer (Gabriel 11/05) */
html body .home-project-cta.is-static .hpc-arrow{display:none}
html body .home-project-cta.is-static .hpc-head{cursor:default;pointer-events:none}
/* Services: form card -> footer links was 161px (section padding 72 + footer padding); now 76px like every other page (Gabriel 11/05) */
html body .margin-top:has(.svc-block .home-project-cta){padding-bottom:0}
/* was margin-bottom:-13px on the card: the footer then overlapped the card and covered its bottom edge in the phone frame (Gabriel 11/06). Same 76px card -> footer links, taken from the footer's top padding instead */html:has(.svc-block .home-project-cta) body .home-footer .container.padding-top{padding-top:51px!important}

/* SECTION LABEL STANDARD (Gabriel 11/05: "spacing consistency site wide"). Every section label bar matches the homepage's
   SERVICES bar: Haas Text 500 16px caps, line 12px under the label (1px, #e6e6e6 at 32%), 24px from the line to the content,
   55px from the content above to the label; no numbers. Covers .top-bar, More projects, and the Croyds/Sofia/Personal gallery heads. */
html body :is(.top-bar,.more-projects-head,.croyds-gallery-heading,.sophia-gallery-head,.personal-gallery-head):not(.home-head>.top-bar):not(#services .top-bar){
  position:relative!important;display:flex!important;align-items:flex-end!important;justify-content:space-between!important;
  padding:20px 0 12px!important;margin:35px 0 24px!important;border:0!important;min-height:0!important}
html body :is(.top-bar,.more-projects-head,.croyds-gallery-heading,.sophia-gallery-head,.personal-gallery-head)::after{
  content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;height:1px!important;width:auto!important;background:rgba(230,230,230,.32)!important;opacity:1!important}
html body :is(.top-bar,.more-projects-head,.croyds-gallery-heading,.sophia-gallery-head,.personal-gallery-head)>:first-child{
  font-family:"neue-haas-grotesk-text",sans-serif!important;font-weight:500!important;font-size:16px!important;line-height:16px!important;
  text-transform:uppercase!important;letter-spacing:.16px!important;color:#e6e6e6!important;margin:0!important;padding:0!important}
html body :is(.top-bar,.more-projects-head,.croyds-gallery-heading,.sophia-gallery-head,.personal-gallery-head)>:not(:first-child){display:none!important}
/* ...and the space above each label comes only from that rule (35px + the label's 20px top padding = 55px): section wrappers above a label add none */
html body .svc-page .svc-block{margin-top:0!important;padding-top:0!important}
html body .svc-page .global-heading{margin-bottom:0!important}
html body .about-services>.page-padding>.container.padding-top{padding-top:0!important;margin-top:0!important}
html body .more-projects{padding-top:0!important;margin-top:0!important}
html body .sophia-project{padding-bottom:0!important}
html body .mare.mare-intro{padding-bottom:0!important}
html body :is(.croyds-gallery,.sophia-gallery,.personal-gallery){padding-top:0!important;margin-top:0!important}
/* Home: SELECTED WORK label 55px under the intro like SERVICES (was 52) */
html body .section-project .home-head{padding-top:35px!important}

/* contact form: an odd last category chip spans the row; space between the two choice questions (11/06) */html body .contact-form .contact-chip-list .contact-chip:last-child:nth-child(odd){grid-column:1/-1}
/* Send button: same space below as above it (24px) in every form card (Gabriel 11/06) */html body .home-project-cta .contac-form-wrap{padding-bottom:24px!important}
/* Contact page form (not in a card): 24px above Send like every form card (Gabriel 11/06) */html body .container > .contac-form-wrap .contact-form textarea{margin-bottom:0!important}html body .container > .contac-form-wrap .contact-form > .contact-button{margin-top:-1px}
/* Services: no Contact label over the form card any more (Gabriel 11/06); card sits 48px under the text above, like on home */html body .svc-page .svc-block#form{margin-top:48px!important}