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

body {
  margin: 0;
}

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

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

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

[hidden], template {
  display: none;
}

a {
  background-color: #0000;
}

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

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

b, strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

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

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

small {
  font-size: 80%;
}

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

sup {
  top: -.5em;
}

sub {
  bottom: -.25em;
}

img {
  border: 0;
}

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

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

pre {
  overflow: auto;
}

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

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

button {
  overflow: visible;
}

button, select {
  text-transform: none;
}

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

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

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

input {
  line-height: normal;
}

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

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

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

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

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

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

td, th {
  padding: 0;
}

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

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

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

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

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

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

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

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

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

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

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

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

.w-block {
  display: block;
}

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

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

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

.w-hidden {
  display: none;
}

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

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

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

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

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

.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;
  overflow: unset !important;
  background-color: #fff !important;
  border-radius: 3px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 6px !important;
  font-size: 12px !important;
  line-height: 14px !important;
  text-decoration: none !important;
  display: inline-block !important;
  position: fixed !important;
  inset: auto 12px 12px auto !important;
  transform: none !important;
}

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

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

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

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

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

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

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

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

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

blockquote {
  /* Base reset rule, fully superseded by the brand blockquote style below --
     no border-left stripe here either, so no banned pattern lingers in the file. */
  margin: 0 0 10px;
  padding: 10px 20px;
  font-size: 18px;
  line-height: 22px;
}

figure {
  margin: 0 0 10px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .w-col {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

.w-widget {
  position: relative;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media screen and (max-width: 767px) {
  .w-nav-brand {
    padding-left: 10px;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.w-tabs {
  position: relative;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Brand typefaces (DESIGN.md section 3) -- local variable-weight TTFs already
   bundled in assets/fonts/. Replaces the Webflow-leftover Google Fonts
   request for "Libre Caslon Display" / "Jost" removed from header.php. */
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/PlayfairDisplay-VariableFont_wght.ttf") format("truetype-variations"), url("../fonts/PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/CormorantGaramond-VariableFont_wght.ttf") format("truetype-variations"), url("../fonts/CormorantGaramond-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color--lightest: #F5F3EE;
  --font--body-font: "Cormorant Garamond", Garamond, serif;
  --color--darkest: #0A0A0A;
  --font--heading-font: "Playfair Display", "Times New Roman", serif;
  --font--ui-font: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --color--accent: #C8A353;
  --color--accent-300\<deleted\|variable-7fa9ad30\>: #7878784d;
  --site-width--site-max-width: 1440px;
  --site-width--global-site-padding: 4rem;
  --site-width--global-site-padding-mobile: 1rem;
  --color--light: #EAE0C7;
  --spacing--xs: .75rem;
  --spacing--s: 1.5rem;
  --spacing--m: 2rem;
  --spacing--m-tablet: 1.5rem;
  --spacing--l-mobile: 1.5rem;
  --color--light-600: #EAE0C7;
  --color--light-900\<deleted\|variable-0653f4dc\>: #e6ba92;
  --color--accent-600: #C8A353;
  --color--accent-900\<deleted\|variable-8901b9d7\>: #787878e6;
  --color--dark-300\<deleted\|variable-26078663\>: #4848484d;
  --color--dark-600: #C8A353;
  --color--dark-900\<deleted\|variable-9c7b1a93\>: #484848e6;
  --color--dark: #C8A353;
  --color--light-300\<deleted\|variable-18fedca3\>: #f6dfc5;
  --spacing--xxs: .25rem;
  --spacing--none: 0px;
  --spacing--s-tablet: 1rem;
  --spacing--m-mobile: 1.25rem;
  --spacing--l: 3rem;
  --spacing--l-tablet: 2.5rem;
  --spacing--xl: 4.5rem;
  --spacing--xl-tablet: 3rem;
  --spacing--xl-mobile: 2rem;
  --spacing--xxl: 6rem;
  --spacing--xxl-tablet: 4rem;
  --spacing--xxl-mobile: 3rem;
  --spacing--xxxl: 8rem;
  --spacing--hero: 12rem;
  --spacing--xxxl-tablet: 6rem;
  --spacing--xxxl-mobile: 4rem;
  --site-width--global-site-padding-tablet: 2rem;
}

/* Small UI chrome (nav, buttons, form controls, labels/badges) stays on the
   UI sans stack — the display/body serifs lose legibility at this size. */
.header-nav-link,
.footer-nav-list,
.link-style-one,
.primary-button-text,
.secondary-button-inner,
.cta-layout-one-service-link,
.newsletter-form-input,
.newsletter-form-submit-button,
.text-size-small,
.w-input,
.w-button,
input,
textarea,
select,
label {
  font-family: var(--font--ui-font);
}

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

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

.w-checkbox:after {
  content: " ";
  clear: both;
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

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

.w-checkbox-input--inputType-custom {
  border: 1px solid #ccc;
  border-radius: 2px;
  width: 12px;
  height: 12px;
}

.w-checkbox-input--inputType-custom.w--redirected-checked {
  background-color: #3898ec;
  background-image: url("../icons/checkbox-checkmark.svg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-color: #3898ec;
}

.w-checkbox-input--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 3px 1px #3898ec;
}

.w-form-formradioinput--inputType-custom {
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 12px;
  height: 12px;
}

.w-form-formradioinput--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 3px 1px #3898ec;
}

.w-form-formradioinput--inputType-custom.w--redirected-checked {
  border-width: 4px;
  border-color: #3898ec;
}

body {
  background-color: var(--color--darkest);
  font-family: var(--font--body-font);
  color: var(--color--lightest);
  font-size: 16px;
  line-height: 1.5em;
}

h1 {
  font-family: var(--font--heading-font);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 4.5rem;
  font-weight: 400;
  line-height: 1.3em;
}

h2 {
  font-family: var(--font--heading-font);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.3em;
}

h3 {
  font-family: var(--font--heading-font);
  letter-spacing: .03em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.4em;
}

h4 {
  font-family: var(--font--ui-font);
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5em;
}

h5 {
  font-family: var(--font--ui-font);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.5em;
}

h6 {
  font-family: var(--font--ui-font);
  letter-spacing: .02em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5em;
}

p {
  letter-spacing: .01em;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5em;
}

a {
  color: var(--color--accent);
  text-decoration: none;
  display: inline-block;
}

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

ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 1rem;
}

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

blockquote {
  /* Full hairline border + surface tint, per DESIGN.md -- never a colored
     border-left accent stripe on a card/callout. */
  border: 1px solid rgba(200, 163, 83, .22);
  border-radius: 4px;
  background-color: #17150F;
  margin-bottom: 0;
  padding: 1rem 1.5rem;
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.5em;
}

figure {
  margin-bottom: 0;
}

figcaption {
  text-align: left;
  margin-top: .5rem;
}

.header {
  z-index: 998;
  position: fixed;
  inset: 1.5rem 1.5rem auto;
}

body.admin-bar .header {
  top: calc(1.5rem + 32px);
}

@media screen and (max-width: 782px) {
  body.admin-bar .header {
    top: calc(1.5rem + 46px);
  }
}

.footer {
  z-index: 0;
  background-color: var(--color--darkest);
  color: var(--color--lightest);
  overflow: hidden;
}

.main-wrapper {
  z-index: 1;
  min-height: 75vh;
  position: relative;
}

.global-padding {
  max-width: var(--site-width--site-max-width);
  padding-right: var(--site-width--global-site-padding);
  padding-left: var(--site-width--global-site-padding);
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.primary-button {
  border-color: var(--color--lightest);
  color: var(--color--lightest);
  letter-spacing: .1em;
  text-transform: uppercase;
  flex: none;
  font-size: .75rem;
  font-weight: 500;
  transition: color .4s cubic-bezier(.645, .045, .355, 1);
  position: relative;
  overflow: hidden;
}

.primary-button.lightest {
  color: var(--color--accent);
}

.primary-button.lightest:hover {
  color: var(--color--darkest);
}

.primary-button.darkest {
  border-color: var(--color--light);
  color: var(--color--darkest);
}

.header-container {
  padding: var(--spacing--xs) var(--site-width--global-site-padding);
  grid-column-gap: var(--spacing--s);
  grid-row-gap: var(--spacing--s);
  border: 1px solid rgba(200, 163, 83, 0.22);
  border-radius: var(--spacing--xs);
  background-color: var(--color--darkest);
  align-items: center;
  display: flex;
  overflow: hidden;
}

.header-logo-link {
  align-items: center;
  max-width: 100px;
  display: flex;
}

.header-nav-list {
  grid-column-gap: var(--spacing--m);
  grid-row-gap: var(--spacing--m);
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
}

.header-nav-link {
  color: var(--color--accent);
  overflow: hidden;
}

.image {
  z-index: 1;
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.image.parallax {
  /* 120% height alone only gives the parallax scroll-JS slack to shift the
     image UP without exposing the container's bottom edge -- shared on 9
     pages. Any downward shift (the common case scrolling past a hero) had
     nothing to cover the top with, exposing a gap. Centering the oversize
     with a matching negative top offset gives slack in both directions. */
  height: 120%;
  top: -10%;
}

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

.style-guide-wrapper {
  grid-column-gap: 6rem;
  grid-row-gap: 0rem;
  grid-template-rows: auto;
  grid-template-columns: .5fr minmax(200px, 2fr);
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
}

.style-guide-menu-wrapper {
  position: sticky;
  top: 12rem;
}

.text-color-lightest {
  color: var(--color--lightest);
}

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

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

.text-color-light-900 {
  color: var(--color--light-900\<deleted\|variable-0653f4dc\>);
}

.text-color-accent-300 {
  color: var(--color--accent-300\<deleted\|variable-7fa9ad30\>);
}

.text-color-accent-600 {
  color: var(--color--accent-600);
}

.text-color-accent-900 {
  color: var(--color--accent-900\<deleted\|variable-8901b9d7\>);
}

.text-color-accent {
  color: var(--color--accent);
}

.text-color-dark-300 {
  color: var(--color--dark-300\<deleted\|variable-26078663\>);
}

.text-color-dark-600 {
  color: var(--color--dark-600);
}

.text-color-dark-900 {
  color: var(--color--dark-900\<deleted\|variable-9c7b1a93\>);
}

.text-color-dark {
  color: var(--color--dark);
}

.text-color-darkest {
  color: var(--color--darkest);
}

.heading-one {
  font-family: var(--font--heading-font);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 4.5rem;
  font-weight: 400;
  line-height: 1.3em;
}

.heading-two {
  font-family: var(--font--heading-font);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.3em;
}

.heading-three {
  font-family: var(--font--heading-font);
  letter-spacing: .03em;
  text-transform: none;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.4em;
}

.heading-four {
  font-family: var(--font--ui-font);
  letter-spacing: 0;
  text-transform: none;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5em;
}

.heading-five {
  font-family: var(--font--ui-font);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.5em;
}

.heading-six {
  font-family: var(--font--ui-font);
  letter-spacing: .02em;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5em;
}

.ordered-list {
  margin-bottom: 0;
  padding-left: 1.5rem;
}

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

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

.text-size-small {
  font-size: .875rem;
}

.text-style-italic {
  font-style: italic;
}

.text-style-bold {
  font-weight: 500;
}

.text-style-uppercase {
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: .875rem;
}

.text-style-underline {
  text-decoration: underline;
}

.rich-text-block a {
  color: var(--color--darkest);
  text-decoration: underline;
}

.unordered-list {
  margin-bottom: 0;
  padding-left: 1.5rem;
}

.list-item {
  margin-bottom: .5rem;
}

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

.text-align-right {
  text-align: right;
}

.background-lightest {
  background-color: var(--color--lightest);
}

.background-light-300 {
  background-color: var(--color--light-300\<deleted\|variable-18fedca3\>);
}

.background-light-900 {
  background-color: var(--color--light-900\<deleted\|variable-0653f4dc\>);
}

.background-light {
  background-color: var(--color--light);
}

.background-accent-300 {
  background-color: var(--color--accent-300\<deleted\|variable-7fa9ad30\>);
}

.background-accent-600 {
  background-color: var(--color--accent-600);
}

.background-accent-900 {
  background-color: var(--color--accent-900\<deleted\|variable-8901b9d7\>);
}

.background-accent {
  background-color: var(--color--accent);
}

.background-dark-300 {
  background-color: var(--color--dark-300\<deleted\|variable-26078663\>);
}

.background-dark-600 {
  background-color: var(--color--dark-600);
}

.background-dark-900 {
  background-color: var(--color--dark-900\<deleted\|variable-9c7b1a93\>);
}

.background-dark {
  background-color: var(--color--dark);
}

.background-darkest {
  background-color: var(--color--darkest);
}

.border-light {
  border: 1px solid var(--color--light);
}

.border-lightest {
  border: 1px solid var(--color--lightest);
}

.border-light-300 {
  border: 1px solid var(--color--light-300\<deleted\|variable-18fedca3\>);
}

.border-light-600 {
  border: 1px solid var(--color--light-600);
}

.border-light-900 {
  border: 1px solid var(--color--light-900\<deleted\|variable-0653f4dc\>);
}

.border-accent-300 {
  border: 1px solid var(--color--accent-300\<deleted\|variable-7fa9ad30\>);
}

.border-accent-600 {
  border: 1px solid var(--color--accent-600);
}

.border-accent-900 {
  border: 1px solid var(--color--accent-900\<deleted\|variable-8901b9d7\>);
}

.border-accent {
  border: 1px solid var(--color--accent);
}

.border-dark-300 {
  border: 1px solid var(--color--dark-300\<deleted\|variable-26078663\>);
}

.border-dark-600 {
  border: 1px solid var(--color--dark-600);
}

.border-dark-900 {
  border: 1px solid var(--color--dark-900\<deleted\|variable-9c7b1a93\>);
}

.border-dark {
  border: 1px solid var(--color--dark);
}

.border-darkest {
  border: 1px solid var(--color--darkest);
}

.corners-s {
  border-radius: .25rem;
}

.corners-none {
  border-radius: 0;
}

.corners-m {
  border-radius: .5rem;
}

.corners-l {
  border-radius: 1rem;
}

.corners-xl {
  border-radius: 2rem;
}

.shadow-none {
  box-shadow: 0 0 #0003;
}

.shadow-s {
  box-shadow: 0 0 5px 1px #0003;
}

.shadow-m {
  box-shadow: 0 0 5px 4px #0003;
}

.shadow-l {
  box-shadow: 0 0 5px 6px #0003;
}

.backdrop-blur {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.backdrop-invert {
  -webkit-backdrop-filter: invert();
  backdrop-filter: invert();
}

.backdrop-greyscale {
  -webkit-backdrop-filter: grayscale();
  backdrop-filter: grayscale();
}

.image-bg {
  z-index: 1;
  position: relative;
}

.background-image {
  z-index: -1;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

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

.image-overlay.darkest-600 {
  background-color: var(--color--darkest);
  opacity: .7;
}

.image-overlay.darkest-300 {
  background-color: var(--color--darkest);
  opacity: .4;
}

.image-overlay.lightest-600 {
  background-color: var(--color--lightest);
  opacity: .6;
}

.image-overlay.lightest-300 {
  background-color: var(--color--lightest);
  opacity: .3;
}

.image-overlay.accent-600 {
  background-color: var(--color--accent);
  opacity: .6;
}

.image-overlay.accent-300 {
  background-color: var(--color--accent);
  opacity: .3;
}

.primary-button-inner {
  grid-column-gap: var(--spacing--xxs);
  grid-row-gap: var(--spacing--xxs);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.secondary-button {
  padding-top: var(--spacing--xxs);
  padding-bottom: var(--spacing--xxs);
  border-color: var(--color--lightest);
  color: var(--color--lightest);
  padding-left: 0;
  font-size: 1rem;
}

.secondary-button.lightest {
  border-color: var(--color--accent);
  color: var(--color--accent);
}

.secondary-button.darkest {
  border-color: var(--color--darkest);
  color: var(--color--darkest);
}

.padding-none {
  padding: var(--spacing--none);
  height: 100%;
}

.padding-xxs {
  padding: var(--spacing--xxs);
  height: 100%;
}

.padding-xs {
  padding: var(--spacing--xs);
  height: 100%;
}

.padding-s {
  padding: var(--spacing--s);
  height: 100%;
}

.padding-m {
  padding: var(--spacing--m);
  height: 100%;
}

.padding-l {
  padding: var(--spacing--l);
  height: 100%;
}

.padding-xl {
  padding: var(--spacing--xl);
  height: 100%;
}

.padding-xxl {
  padding: var(--spacing--xxl);
  height: 100%;
}

.padding-top, .padding-top.padding-xxxl {
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

.padding-bottom, .padding-bottom.padding-xxxl {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

.padding-left, .padding-left.padding-xxxl {
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0;
}

.padding-right, .padding-right.padding-xxxl {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
}

.padding-vertical {
  height: 100%;
  padding-left: 0;
  padding-right: 0;
}

.padding-vertical.padding-xxxl {
  padding-left: 0;
  padding-right: 0;
}

.padding-vertical._404-padding {
  margin-top: 16rem;
  padding-bottom: 8rem;
}

.padding-horizontal, .padding-horizontal.padding-xxxl {
  padding-top: 0;
  padding-bottom: 0;
}

.margin-none {
  margin: var(--spacing--none);
}

.margin-xxs {
  margin: var(--spacing--xxs);
}

.margin-xs {
  margin: var(--spacing--xs);
}

.margin-s {
  margin: var(--spacing--s);
}

.margin-m {
  margin: var(--spacing--m);
}

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

.margin-xl {
  margin: var(--spacing--xl);
}

.margin-xxl {
  margin: var(--spacing--xxl);
}

.margin-top, .margin-top.margin-xxxl {
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
}

.margin-bottom, .margin-bottom.margin-xxxl {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

.margin-left, .margin-left.margin-xxxl {
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 0;
}

.margin-right, .margin-right.margin-xxxl {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
}

.margin-vertical, .margin-vertical.margin-xxxl {
  margin-left: 0;
  margin-right: 0;
}

.margin-horizontal, .margin-horizontal.margin-xxxl {
  margin-top: 0;
  margin-bottom: 0;
}

.link-style-one {
  font-size: 1rem;
  text-decoration: none;
  transition: color .4s cubic-bezier(.645, .045, .355, 1);
}

.link-style-one:hover {
  color: var(--color--accent);
}

.checkbox {
  grid-column-gap: .5rem;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0;
  padding-left: 0;
  font-size: 1rem;
  display: flex;
}

.checkbox-icon {
  cursor: pointer;
  width: 1rem;
  height: 1rem;
  margin-top: 0;
  margin-left: 0;
}

.checkbox-icon.w--redirected-checked {
  border-color: var(--color--accent);
  background-color: var(--color--accent-600);
  color: var(--color--lightest);
  width: 1rem;
  height: 1rem;
  margin-top: 0;
  margin-left: 0;
}

.radio {
  grid-column-gap: .5rem;
  align-items: center;
  margin-bottom: 0;
  padding-left: 0;
  font-size: 1rem;
  display: flex;
}

.radio-button-icon {
  cursor: pointer;
  width: 1rem;
  height: 1rem;
  margin-top: 0;
  margin-left: 0;
}

.radio-button-icon.w--redirected-checked {
  border-width: 5px;
  border-color: var(--color--accent);
  width: 1rem;
  height: 1rem;
}

.submit-button {
  background-color: var(--color--accent);
  color: var(--color--darkest);
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: .25rem;
  padding: .75rem 1.5rem;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.5em;
}

.styles-page-content-link {
  border-style: none none solid;
  border-width: 1px;
  border-color: var(--color--light) var(--color--dark-300\<deleted\|variable-26078663\>);
  color: var(--color--darkest);
  width: 100%;
  transition: border-color .4s ease-in-out, background-color .4s ease-in-out;
}

.styles-page-content-link.w--current {
  border-right: 1px none var(--color--accent);
  border-bottom: 1px solid var(--color--light);
  border-left: 1px none var(--color--accent);
  background-color: var(--color--light-300\<deleted\|variable-18fedca3\>);
}

.color-classes, .typography-classes, .button-link-classes, .container-style-classes, .image-classes, .form-classes, .spacing-classes {
  display: none;
}

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

.utility-classes {
  display: none;
}

.overflow-hidden {
  overflow: hidden;
}

.position-relative {
  position: relative;
}

.header-logo {
  object-fit: contain;
  width: 100%;
  height: 100%;
  display: block;
}

.header-navigation-wrapper {
  flex: 0 auto;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.header-navigation-wrapper.right {
  flex: 0 33%;
  justify-content: flex-end;
}

.header-navigation-wrapper.middle {
  flex: 0 33%;
  justify-content: center;
  align-items: center;
}

.header-nav-list-item {
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.header-nav-list-item.mobile-only {
  display: none;
}

.header-menu-button {
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 3rem;
  height: 3rem;
  padding: 1rem .5rem;
  display: none;
}

.menu-button-line {
  border-radius: var(--spacing--xxxl);
  background-color: var(--color--accent);
  width: 100%;
  height: 2px;
}

.secondary-button-inner {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  justify-content: center;
  align-items: center;
  display: flex;
}

.header-social-link {
  color: var(--color--accent);
  margin-left: .5rem;
  margin-right: .5rem;
  transition: color .4s ease-in-out;
}

.header-social-link:hover {
  color: var(--color--lightest);
}

/* Facebook and LinkedIn hidden site-wide for now (kept in markup, not deleted). */
.header-social-link[href*="facebook.com"],
.header-social-link[href*="linkedin.com"] {
  display: none;
}

.social-icon {
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
}

/* Zlatna nit ispod nav linka. Hover, fokus tastaturom i aktivna strana dele
   jedno stanje i jedan pokret: fade 400ms inOutCubic, isto što je Webflow-ova
   IX2 interakcija (a-12/a-13) radila samo na hover.

   opacity je svuda !important jer ta interakcija i dalje visi na klasi
   .header-nav-link i upisuje inline opacity na load i na svaki
   mouseenter/mouseleave — bez !important inline vrednost uvek pobedi ovaj blok.

   Aktivna strana se hvata preko [aria-current], ne preko .w--current: Webflow-ov
   `links` modul na svakom load-u prolazi kroz document.links i skida .w--current
   svuda gde href nije znak-za-znak jednak location.href, pa je serverski ispisana
   klasa nestajala pre prvog paint-a. Atribut ne dira niko. */
.nav-link-underline {
  background-color: var(--color--accent);
  opacity: 0 !important;
  width: 100%;
  height: 1px;
  transition: opacity .4s cubic-bezier(.645, .045, .355, 1);
}

.header-nav-link:hover .nav-link-underline,
.header-nav-link:focus-visible .nav-link-underline,
.header-nav-link[aria-current="page"] .nav-link-underline {
  opacity: 1 !important;
}

/* Na aktivnoj strani se nit ne zatekne gotova nego se izvuče istim fade-om, pri
   prvom paint-u. Mora preko @starting-style, a ne @keyframes: tranzicije su
   jedini deo cascade-a iznad !important-a, animacije su ispod njega. Gde
   @starting-style nije podržan, nit je prosto odmah tu. */
@starting-style {
  .header-nav-link[aria-current="page"] .nav-link-underline {
    opacity: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-link-underline {
    transition-duration: .01ms;
  }
}

.footer-lower {
  padding-top: var(--spacing--m);
  padding-bottom: var(--spacing--m);
  border-top: 1px solid var(--color--dark);
  justify-content: space-between;
  align-items: center;
  font-family: var(--font--ui-font);
  font-size: 1rem;
  display: flex;
}

.footer-lower-link-container {
  grid-column-gap: var(--spacing--m);
  grid-row-gap: var(--spacing--m);
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.padding-hero {
  padding-top: var(--spacing--hero);
  padding-bottom: var(--spacing--none);
  height: 100%;
}

.padding-xxxl {
  padding: var(--spacing--xxxl);
  height: 100%;
}

.margin-xxxl {
  margin: var(--spacing--xxxl);
}

.faq-question-upper {
  /* Was --spacing--s (24px). Same trim as the mobile pass: the gap around
     one line of text stacked from three sources at once. */
  padding-bottom: var(--spacing--xs);
  grid-column-gap: var(--spacing--l);
  grid-row-gap: var(--spacing--l);
  cursor: pointer;
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}

.form-text-input {
  margin-bottom: var(--spacing--s);
  padding: var(--spacing--xs);
  border-radius: var(--spacing--xxs);
  background-color: var(--color--lightest);
  color: var(--color--darkest);
  font-size: 1rem;
}

.form-text-input:focus {
  border: 1px solid var(--color--accent);
}

.form-text-input::placeholder {
  color: var(--color--darkest);
}

.form-text-input.textarea {
  min-height: 10rem;
}

.form-main-label {
  margin-bottom: var(--spacing--xs);
  font-size: 1rem;
  font-weight: 400;
}

.form-sub-label {
  margin-top: var(--spacing--xxs);
  color: var(--color--dark);
  margin-bottom: 0;
  font-size: .875rem;
  font-weight: 400;
}

.form-select-input {
  margin-bottom: var(--spacing--s);
  border-radius: var(--spacing--xxs);
  background-color: var(--color--lightest);
  color: var(--color--darkest);
  height: auto;
  padding: .5rem;
  font-size: 1rem;
}

.form-select-input:focus {
  border: 1px solid var(--color--accent);
  color: var(--color--darkest);
}

.style-guide-container {
  border: 1px solid var(--color--light);
  background-color: var(--color--light-300\<deleted\|variable-18fedca3\>);
}

.utility-page-wrap {
  background-color: var(--color--dark);
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 260px;
  display: flex;
}

.utility-page-form {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.footer-sub-link {
  color: var(--color--lightest);
  font-size: 1rem;
  text-decoration: none;
  transition: color .4s cubic-bezier(.645, .045, .355, 1);
}

.footer-sub-link:hover {
  color: var(--color--accent);
}

.primary-button-inner-left {
  padding: var(--spacing--xs) var(--spacing--s);
  border: 1px solid var(--color--accent);
  border-radius: var(--spacing--xxs);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.primary-button-inner-right {
  padding: var(--spacing--xs);
  border: 1px solid var(--color--accent);
  border-radius: var(--spacing--xxs);
  position: relative;
  overflow: hidden;
}

.primary-button-arrow-icon {
  z-index: 2;
  padding: var(--spacing--xxs);
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  position: relative;
}

.primary-button-inner-left-background {
  z-index: 1;
  background-color: var(--color--accent);
  width: 0%;
  position: absolute;
  inset: 0%;
}

.primary-button-inner-right-background {
  z-index: 1;
  background-color: var(--color--accent);
  width: 0%;
  position: absolute;
  inset: 0%;
}

.primary-button-arrow-icon-alt {
  z-index: 2;
  padding: var(--spacing--xxs);
  opacity: 0;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: auto;
  display: flex;
  position: absolute;
  inset: 0;
}

.primary-button-text {
  z-index: 2;
  position: relative;
}

.secondary-button-icon-wrapper {
  position: relative;
}

.secondary-button-icon {
  justify-content: center;
  align-items: center;
  width: 1rem;
  height: 1rem;
  display: flex;
  position: relative;
}

.secondary-button-icon-alt {
  opacity: 0;
  justify-content: center;
  align-items: center;
  width: 1rem;
  height: 1rem;
  display: flex;
  position: absolute;
  bottom: 0;
  left: -100%;
}

.hero-layout-one {
  padding: var(--spacing--xs);
  color: var(--color--lightest);
  justify-content: flex-start;
  align-items: stretch;
  min-height: 100svh;
  display: flex;
}

.hero-layout-one-inner {
  border-radius: var(--spacing--xs);
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.hero-layout-one-content-wrapper {
  max-width: var(--site-width--site-max-width);
  padding: var(--spacing--hero) var(--site-width--global-site-padding) var(--spacing--xl);
  grid-column-gap: var(--spacing--xxxl);
  grid-row-gap: var(--spacing--xxxl);
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  display: flex;
}

.header-logo-wrapper {
  flex: 0 33%;
}

.footer-upper {
  grid-column-gap: var(--spacing--xxl);
  grid-row-gap: var(--spacing--xxl);
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}

.footer-upper-left {
  flex-flow: column;
  flex: 1;
  justify-content: space-between;
  max-width: 50%;
  display: flex;
}

.footer-logo-wrapper {
  grid-column-gap: var(--spacing--m);
  grid-row-gap: var(--spacing--m);
  justify-content: flex-start;
  align-items: stretch;
  max-width: 30rem;
  display: flex;
}

.footer-logo-link-wrapper {
  flex: none;
}

.vertical-divider {
  width: 1px;
}

.footer-logo-text-wrapper {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.footer-logo-text-wrapper span {
  display: block;
}

.footer-newsletter-form-wrapper {
  padding: var(--spacing--m);
  border-radius: var(--spacing--xs);
  background-color: var(--color--dark);
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
}

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

.footer-newsletter-form {
  grid-column-gap: var(--spacing--xs);
  grid-row-gap: var(--spacing--xs);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.newsletter-form-input {
  padding: var(--spacing--xs);
  border-radius: var(--spacing--xxs);
  background-color: var(--color--lightest);
  color: var(--color--darkest);
  height: 2.625rem;
  margin-bottom: 0;
  font-size: 1rem;
}

.newsletter-form-input:focus {
  border: 1px solid var(--color--accent);
}

.newsletter-form-input::placeholder {
  color: var(--color--darkest);
  font-size: 1rem;
}

.newsletter-form-submit-button {
  padding: var(--spacing--xs) var(--spacing--s);
  border-radius: var(--spacing--xxs);
  background-color: var(--color--darkest);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.5em;
  transition: color .4s cubic-bezier(.645, .045, .355, 1), background-color .4s cubic-bezier(.645, .045, .355, 1);
}

.newsletter-form-submit-button:hover {
  background-color: var(--color--accent);
  color: var(--color--darkest);
}

.footer-upper-right {
  grid-column-gap: var(--spacing--xl);
  grid-row-gap: var(--spacing--xl);
  flex: 0 auto;
  justify-content: flex-end;
  align-items: stretch;
  display: flex;
}

.footer-nav-wrapper {
  grid-column-gap: var(--spacing--s);
  grid-row-gap: var(--spacing--s);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.footer-nav-list {
  grid-column-gap: var(--spacing--xs);
  grid-row-gap: var(--spacing--xs);
  flex-flow: column;
  flex: 1;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

/* Footer nav links only have a hover state (color shifts to accent gold);
   give the active page's link that same accent color permanently instead
   of just on hover. */
.footer-nav-list a.w--current {
  color: var(--color--accent);
}

.hero-layout-one-text-wrapper {
  flex: 0 75%;
}

.hero-layout-one-link-wrapper {
  grid-column-gap: var(--spacing--l);
  grid-row-gap: var(--spacing--l);
  border-radius: var(--spacing--xs);
  color: var(--color--lightest);
  flex-flow: column;
  justify-content: space-between;
  max-width: 22.5rem;
  display: block;
  position: relative;
  overflow: hidden;
}

.frosted-glass-link-arrow-icon {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.hero-layout-one-link-wrapper-inner {
  z-index: 2;
  padding: var(--spacing--m);
  grid-column-gap: var(--spacing--l);
  grid-row-gap: var(--spacing--l);
  border: 1px solid var(--color--lightest);
  border-radius: var(--spacing--xs);
  flex-flow: column;
  display: flex;
  position: relative;
  overflow: hidden;
}

.frosted-glass-background-effect {
  z-index: 1;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background-image: radial-gradient(circle at 0 0, #F5EFE133, #fff0);
  width: calc(100% + 6rem);
  height: calc(100% + 6rem);
  position: absolute;
  inset: 0 0% 0% 0;
}

.navigation-layout-one-title-wrapper {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.navigation-layout-one-collection-list {
  grid-column-gap: var(--spacing--m);
  grid-row-gap: var(--spacing--m);
  height: 40rem;
  display: flex;
}

.navigation-layout-one-collection-item {
  border-radius: var(--spacing--xs);
  color: var(--color--lightest);
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 20%;
  position: relative;
  overflow: hidden;
}

.navigation-layout-one-column-arrow-icon-wrapper {
  padding: var(--spacing--xs);
  border: 1px solid var(--color--lightest);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  margin-left: auto;
  display: flex;
}

.navigation-layout-one-column-arrow-icon {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.navigation-layout-one-column-text-wrapper {
  width: 100%;
  margin-top: auto;
  overflow: hidden;
}

.navigation-layout-one-column-text-wrapper .heading-four {
  font-size: 1.25rem;
  white-space: nowrap;
}

.text-layout-one-inner {
  justify-content: space-between;
  display: flex;
}

.text-layout-one-main-content-wrapper {
  flex: 1;
  max-width: 70%;
}

.text-layout-one-main-content-upper {
  margin-bottom: var(--spacing--l);
  position: relative;
}

.text-layout-one-main-content-upper-inner {
  max-width: 75%;
}

.text-layout-one-submark-wrapper {
  width: 2.5rem;
  height: 2.5rem;
  position: absolute;
  inset: 0% 0% auto auto;
}

.text-layout-one-submark {
  z-index: 1;
  object-fit: contain;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.text-layout-one-main-content-lower {
  margin-top: var(--spacing--l);
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}

.text-layout-one-paragraph-wrapper {
  max-width: 25rem;
}

.testimonial-layout-one {
  background-color: var(--color--light);
  color: var(--color--darkest);
}

.testimonial-layout-one-title {
  margin-bottom: var(--spacing--xl);
  text-align: center;
}

.testimonial-layout-one-slider {
  background-color: #ddd0;
  height: auto;
}

.slide-nav {
  display: none;
}

.testimonial-layout-one-slide {
  text-align: center;
}

.testimonial-layout-one-slide-inner {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.testimonial-layout-one-button-wrapper {
  margin-top: var(--spacing--xl);
  justify-content: center;
  align-items: center;
  display: flex;
}

.testimonal-layout-one-left-arrow {
  border-radius: var(--spacing--xxs);
  background-color: var(--color--dark);
  color: var(--color--lightest);
  width: 2.5rem;
  height: 2.5rem;
  margin-top: auto;
  margin-bottom: auto;
  padding: .5rem;
  inset: 0% auto 0% 0%;
}

.testimonial-layout-one-right-arrow {
  border-radius: var(--spacing--xxs);
  background-color: var(--color--dark);
  width: 2.5rem;
  height: 2.5rem;
  margin-top: auto;
  margin-bottom: auto;
  padding: .5rem;
  inset: 0 0 0 auto;
}

.testimonial-layout-one-arrow-icon {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.mask {
  max-width: 75%;
  margin-left: auto;
  margin-right: auto;
}

.text-layout-two-title-wrapper {
  margin-bottom: var(--spacing--xl);
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}

.text-layout-two-title {
  max-width: 65%;
}

.text-layout-two-title .text-color-dark {
  display: block;
}

.text-layout-one-main-content-upper-inner .text-color-dark {
  display: block;
}

.text-layout-two-content-wrapper {
  grid-column-gap: var(--spacing--xl);
  grid-row-gap: var(--spacing--xl);
  grid-template-rows: auto;
  grid-template-columns: 1fr 3fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.text-layout-two-image-wrapper {
  border-radius: var(--spacing--xs);
  flex: none;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.text-layout-two-main-content {
  flex: 1;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
}

.text-layout-two-main-content-wrapper {
  padding-top: var(--spacing--xl);
  grid-column-gap: var(--spacing--xxxl);
  grid-row-gap: var(--spacing--l);
  flex: 1;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: end center;
  display: grid;
}

.text-layout-two-icon-wrapper {
  margin-bottom: var(--spacing--s);
  border-radius: var(--spacing--xxs);
  background-color: var(--color--accent);
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  padding: .5rem;
  display: flex;
}

.text-layout-two-icon {
  color: var(--color--darkest);
  width: 100%;
  height: 100%;
}

.portfolio-layout-one-inner {
  grid-column-gap: var(--spacing--xl);
  grid-row-gap: var(--spacing--xl);
  grid-template-rows: auto;
  grid-template-columns: 1fr 3fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.portfolio-layout-one-title-wrapper {
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  display: flex;
}

.cta-layout-one {
  background-color: var(--color--darkest);
  color: var(--color--lightest);
}

.portfolio-layout-one-portfolio-wrapper {
  grid-column-gap: var(--spacing--m);
  grid-row-gap: var(--spacing--m);
  grid-template-rows: auto auto auto auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  min-height: 40rem;
  display: grid;
}

.portfolio-layout-one-collection-list-wrapper, .portfolio-layout-one-collection-list, .portfolio-layout-one-collection-item {
  height: 100%;
}

.portfolio-layout-one-collection-link {
  padding: var(--spacing--m);
  border-radius: var(--spacing--xs);
  color: var(--color--lightest);
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.cta-layout-one-inner {
  z-index: 1;
  /* Small bump over the pure content-driven height (no min-height at
     all previously) -- scales gently with viewport width, capped low so
     it stays a nudge rather than the earlier oversized version. */
  min-height: clamp(24rem, 30vw, 32rem);
  padding: var(--spacing--l);
  grid-column-gap: var(--spacing--xxxl);
  grid-row-gap: var(--spacing--xxxl);
  border-radius: var(--spacing--xs);
  flex-flow: column;
  /* min-height adds room the pills + heading don't need; flex's default
     justify-content (flex-start) let all of that slack collect below the
     heading, so the bottom gap grew while the top stayed at the base
     padding. Centering the content block splits the slack evenly. */
  justify-content: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.cta-layout-one-inner .image.parallax {
  /* Biased down from dead-center so the sofa and coffee table (which sit
     in the lower half of the source photo) actually show, instead of the
     crop favoring the empty upper wall. */
  object-position: center 82%;
}

.cta-layout-one-title-wrapper {
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}

.cta-layout-one-services-links {
  grid-column-gap: var(--spacing--xs);
  grid-row-gap: var(--spacing--xs);
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 30%;
  display: flex;
}

.cta-layout-one-service-link {
  padding: var(--spacing--xxs) var(--spacing--xs);
  border: 1px solid var(--color--lightest);
  border-radius: var(--spacing--xxs);
  color: var(--color--lightest);
  transition: background-color .4s cubic-bezier(.645, .045, .355, 1), color .4s cubic-bezier(.645, .045, .355, 1);
  display: block;
}

.cta-layout-one-service-link:hover {
  background-color: var(--color--lightest);
  color: var(--color--darkest);
}

.cta-layout-one-title {
  max-width: 70%;
}

.portfolio-layout-one-collection-link-title {
  padding: var(--spacing--xxs) var(--spacing--xs);
  border-radius: var(--spacing--xxs);
  background-color: var(--color--dark);
  opacity: 0;
  pointer-events: none;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  margin: auto;
  position: fixed;
  inset: auto 50vw 50vh auto;
}

.navigation-layout-one-mobile-button-wrapper {
  display: none;
}

.hero-layout-two {
  position: relative;
}

.hero-layout-two-inner {
  padding-top: var(--spacing--xs);
  padding-right: var(--spacing--xs);
  border-radius: var(--spacing--xs);
  grid-template-rows: auto;
  grid-template-columns: 1.25fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  overflow: hidden;
}

.hero-layout-two-text-wrapper {
  padding-top: 16rem;
  padding-right: var(--spacing--xxxl);
  padding-bottom: 14rem;
  padding-left: var(--site-width--global-site-padding);
  width: calc(100% + -50vw + 720px);
  margin-left: auto;
  position: relative;
}

.hero-layout-two-image-wrapper {
  z-index: 1;
  border-radius: var(--spacing--xs);
  position: relative;
  overflow: hidden;
}

.hero-layout-two-lower {
  z-index: 2;
  margin-right: var(--site-width--global-site-padding);
  padding-top: var(--spacing--xl);
  padding-right: var(--spacing--xl);
  padding-bottom: var(--spacing--xl);
  padding-left: var(--spacing--xl);
  border-top-right-radius: var(--spacing--xs);
  border-bottom-right-radius: var(--spacing--xs);
  /* Was var(--color--dark), which is the same gold as --color--accent -- a
     large gold fill that both breaks DESIGN.md's "never a large fill" rule
     for the brand gold and swallowed the .text-color-accent span in the
     heading below (gold text on its own gold background = invisible). */
  background-color: #17150F;
  color: var(--color--lightest);
  max-width: calc(50% + 720px - 4rem);
  position: relative;
  top: -6rem;
  overflow: hidden;
}

.hero-layout-two-lower-inner {
  z-index: 1;
  grid-column-gap: var(--spacing--xl);
  grid-row-gap: var(--spacing--xl);
  max-width: calc(1440px - 12.5rem);
  margin-left: auto;
  display: flex;
  position: relative;
}

.hero-layout-two-lower-image-wrapper {
  aspect-ratio: 3 / 2;
  border-radius: var(--spacing--xs);
  flex: 1;
  max-width: 40%;
  position: relative;
  overflow: hidden;
}

/* "Naše mogućnosti" crossfade. Deliberately not a Webflow slider: the
   bundled slider runtime writes its own inline width/height, which fought
   the wrapper's aspect-ratio and border-radius clip box. These are plain
   stacked <img class="image"> elements inside the standard
   .background-image box, so the frame, cover-cropping and rounded corners
   stay identical to every other image on the site. */
.background-image .dm-crossfade-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(.22, 1, .36, 1);
}

.background-image .dm-crossfade-slide.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .background-image .dm-crossfade-slide {
    transition: none;
  }
}

/* At <=991px .text-layout-three-image-wrapper switches to aspect-ratio 3/2,
   which centre-crops this portrait founder photo through the subject's
   torso. Biased toward the top, but not flush against it -- 20% keeps some
   wall above the icons so the crop reads as framed rather than cut off.
   Opt-in class rather than a rule on the shared wrapper: the other 5 pages
   using .text-layout-three carry landscape photos where this would be
   wrong. */
@media screen and (max-width: 991px) {
  .dm-image-top {
    object-position: 50% 20%;
  }
}

.hero-layout-two-lower-text-wrapper {
  padding-top: var(--spacing--m);
  padding-bottom: var(--spacing--m);
  flex: 1;
}

/* "Naše mogućnosti" block on the About page. Left to flex:1 the column runs
   wide enough that the paragraph's last line trails off short and the
   heading's second line stops well before the right edge. 555px is the
   measure where "tehnika i iskustva" fills the line and the paragraph rag
   stays even. Above the 991px breakpoint only -- below it the block goes
   full width in the stacked layout. */
@media screen and (min-width: 992px) {
  .hero-layout-two-lower-text-wrapper {
    max-width: 555px;
  }
}

.hero-layout-two-text-wrapper-inner {
  z-index: 1;
  position: relative;
}

.text-layout-three-title-wrapper {
  margin-bottom: var(--spacing--m);
}

.text-layout-three-inner {
  grid-template-rows: auto;
  grid-template-columns: 3fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.text-layout-three-main-content {
  padding-top: var(--spacing--l);
  padding-right: var(--spacing--xxl);
  padding-bottom: var(--spacing--l);
}

/* "Ko smo mi" block on the About page. As the 3fr side of a 3fr/1fr grid the
   paragraph ran ~140 characters per line, far past a comfortable measure and
   visibly looser than the rest of the page. 640px minus the xxl right padding
   leaves ~545px of text -- the same measure as the "Naše mogućnosti" block
   above it, so both body blocks on this page rag the same way. Above the
   991px breakpoint only; below it the grid collapses to one column. */
@media screen and (min-width: 992px) {
  .text-layout-three-main-content {
    max-width: 640px;
  }
}

.text-layout-three-image-wrapper {
  border-radius: var(--spacing--xs);
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.text-layout-four {
  /* Was the off-brand cream fill (var(--color--light)) -- a large light-band
     section this page uses nowhere else, breaking DESIGN.md's "near-black
     surfaces only, no secondary hue" rule. Now that the sections below it
     (portfolio teaser, team) are hidden, it sat directly against the CTA's
     dark photo card with a hard, unstyled-looking seam. Near-black surface
     matches the rest of the page and removes the seam entirely. */
  background-color: #17150F;
  color: var(--color--lightest);
}

.text-layout-four-title-wrapper {
  margin-bottom: var(--spacing--xxl);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.text-layout-four-title {
  max-width: 50%;
}

.text-layout-four-main-content {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: column;
  grid-template-rows: auto 2px auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: stretch;
  display: grid;
}

.text-layout-four-content-wrapper {
  padding-left: var(--spacing--l);
  border-left: 1px dashed var(--color--dark);
}

.text-layout-four-content-wrapper.upper {
  padding-top: var(--spacing--xxs);
  padding-bottom: var(--spacing--xl);
}

.text-layout-four-content-wrapper.lower {
  padding-top: var(--spacing--xl);
  padding-bottom: var(--spacing--xxs);
}

.text-layout-four-divider-line {
  background-color: var(--color--dark);
  width: 100%;
  height: 2px;
  position: relative;
}

.team-layout-one {
  overflow: hidden;
}

.team-layout-one-slider-info-wrapper {
  z-index: 2;
  padding-top: var(--spacing--xxxl);
  padding-right: var(--site-width--global-site-padding);
  padding-bottom: var(--spacing--xxxl);
  padding-left: var(--site-width--global-site-padding);
  background-color: var(--color--lightest);
  outline-color: var(--color--accent);
  outline-offset: 0px;
  text-align: left;
  outline-width: 1px;
  outline-style: solid;
  width: 50%;
  max-width: calc(720px - 4rem);
  height: auto;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  inset: 0% 0% 0% 0;
}

.team-layout-one-slider {
  background-color: #ddd0;
  height: auto;
  display: flex;
  position: relative;
}

.team-layout-one-slide {
  padding: var(--spacing--xxxl) var(--site-width--global-site-padding);
  /* Hairline Gold Rule (DESIGN.md): structural dividers carry low-opacity
     gold, not a solid accent stripe. */
  border-left: 1px solid rgba(200, 163, 83, .3);
}

.team-layout-one-slider-mask {
  width: 50%;
  max-width: calc(720px - 4rem);
  height: auto;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
}

.team-layout-one-slide-inner {
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  height: 100%;
  display: flex;
}

.team-layout-one-slide-image-wrapper {
  margin-bottom: var(--spacing--xs);
  aspect-ratio: 3 / 2;
  border-radius: var(--spacing--xs);
  flex: 1;
  position: relative;
  overflow: hidden;
}

.team-layout-one-slider-left-arrow {
  grid-column-gap: var(--spacing--xxs);
  grid-row-gap: var(--spacing--xxs);
  color: var(--color--darkest);
  text-align: left;
  justify-content: flex-end;
  align-items: center;
  width: 3.5rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 1rem;
  display: flex;
  inset: auto 0 8rem 9.5rem;
}

.team-layout-one-slider-arrow-icon {
  justify-content: center;
  align-items: center;
  width: 1rem;
  height: 1rem;
  display: flex;
}

.team-layout-one-slider-right-arrow {
  grid-column-gap: var(--spacing--xxs);
  grid-row-gap: var(--spacing--xxs);
  color: var(--color--darkest);
  text-align: left;
  justify-content: flex-start;
  align-items: center;
  width: 3.5rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 1rem;
  display: flex;
  inset: auto 0 8rem 19rem;
}

.team-layout-slider-one-info-wrapper-inner {
  margin-bottom: var(--spacing--xl);
}

.text-layout-five {
  padding-top: var(--spacing--xs);
  padding-right: var(--spacing--xs);
  padding-left: var(--spacing--xs);
  background-image: linear-gradient(180deg, var(--color--light) 50%, var(--color--lightest) 50%);
  color: var(--color--lightest);
}

.text-layout-five-inner {
  z-index: 1;
  aspect-ratio: auto;
  border-radius: var(--spacing--xs);
  flex-flow: row;
  justify-content: flex-start;
  align-items: stretch;
  min-height: 50rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.testimonial-layout-two {
  border-top: 1px solid var(--color--accent);
  border-bottom: 1px solid var(--color--accent);
  background-color: var(--color--lightest);
}

.text-layout-five-content-wrapper {
  max-width: var(--site-width--site-max-width);
  padding: var(--spacing--xxxl) var(--site-width--global-site-padding);
  grid-column-gap: var(--spacing--xxxl);
  grid-row-gap: var(--spacing--xxxl);
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.text-layout-five-link-wrapper {
  grid-column-gap: var(--spacing--l);
  grid-row-gap: var(--spacing--l);
  border-radius: var(--spacing--xs);
  color: var(--color--lightest);
  flex-flow: column;
  justify-content: space-between;
  display: block;
  position: relative;
  overflow: hidden;
}

.text-layout-five-link-wrapper-inner {
  z-index: 2;
  padding: var(--spacing--m);
  grid-column-gap: var(--spacing--l);
  grid-row-gap: var(--spacing--l);
  border: 1px solid var(--color--lightest);
  border-radius: var(--spacing--xs);
  flex-flow: column;
  display: flex;
  position: relative;
  overflow: hidden;
}

.frosted-glass-link-arrow-icon-wrapper {
  padding: var(--spacing--xs);
  border: 1px solid var(--color--lightest);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  margin-left: auto;
  display: flex;
}

.text-layout-five-paragraph-wrapper {
  max-width: 33%;
}

.text-layout-five-lower {
  grid-column-gap: var(--spacing--xxxl);
  grid-row-gap: var(--spacing--xxxl);
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}

.text-layout-five-title-wrapper {
  max-width: 75%;
}

.cta-layout-two-inner {
  padding: var(--spacing--xxxl) var(--site-width--global-site-padding) var(--spacing--xl);
  border-right: 1px solid var(--color--accent);
  border-left: 1px solid var(--color--accent);
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-end;
  min-height: 35rem;
  display: flex;
}

.cta-layout-two-title-wrapper {
  max-width: 75%;
}

.hero-layout-three {
  padding: var(--spacing--xs) var(--spacing--xs) 0rem;
  color: var(--color--lightest);
}

.hero-layout-three-inner {
  border-radius: var(--spacing--xs);
  position: relative;
  overflow: hidden;
}

/* Services page hero only (.dm-video-hero) -- .hero-layout-three-inner is
   shared by 7 pages, so targeting it directly (as an earlier version of
   this rule did) leaked the override onto Buildings/Bathrooms/Kitchens/
   Furniture/Flooring/Portfolio too. Flat black over the hero video, per
   request -- simpler than a gradient since the video's own motion already
   carries visual interest. */
.hero-layout-three.dm-video-hero .image-overlay.darkest-600 {
  background: var(--color--darkest);
  opacity: .8;
}

.hero-layout-three-content-wrapper {
  max-width: var(--site-width--site-max-width);
  padding: 16rem var(--site-width--global-site-padding) var(--spacing--xl);
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.text-layout-six-title {
  margin-bottom: var(--spacing--l);
  max-width: 66%;
}

.text-layout-six-stats-wrapper {
  grid-column-gap: var(--spacing--l);
  grid-row-gap: var(--spacing--l);
  grid-template-rows: auto;
  /* 3 columns, not 4 -- this page dropped its 4th stat card. */
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.text-layout-six-stat {
  flex: 1;
}

.navigation-layout-one-collection-link {
  padding: var(--spacing--m) var(--spacing--xs);
  color: var(--color--lightest);
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.services-layout-one-collection-list {
  grid-column-gap: var(--spacing--xl);
  grid-row-gap: var(--spacing--xl);
  flex-flow: column;
  display: flex;
}

.services-layout-one-link-wrapper {
  padding: var(--spacing--l);
  border-radius: var(--spacing--xs);
  color: var(--color--lightest);
  display: block;
  position: relative;
  overflow: hidden;
}

.services-layout-one-link-content-wrapper {
  grid-column-gap: 16rem;
  grid-row-gap: 16rem;
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}

.services-layout-one-link-text-wrapper {
  max-width: 75%;
}

.faq-layout-one-title-wrapper {
  margin-bottom: var(--spacing--xl);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.faq-layout-one-title {
  max-width: 50%;
}

.faq-layout-one-inner {
  grid-column-gap: var(--spacing--xxl);
  grid-row-gap: var(--spacing--xxl);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.faq-layout-one-image-wrapper {
  border-radius: var(--spacing--xs);
  position: relative;
  overflow: hidden;
  /* Visinu reda diktira kolona sa pitanjima, a stranice tehnika sada nose
     samo svoja pitanja -- neke i jedno jedino. Bez donje granice slika se
     spljošti u traku od par desetina piksela. Ispod 991px je display:none,
     pa ovo važi samo za dvokolonski raspored. */
  min-height: 26rem;
}

.faq-layout-one-questions-wrapper {
  /* Was --spacing--m (32px). */
  grid-column-gap: var(--spacing--s);
  grid-row-gap: var(--spacing--s);
  flex-flow: column;
  display: flex;
}

.faq-question {
  border-bottom: 1px solid var(--color--accent);
}

/* Services FAQ (.dm-faq-item) controls its own open/close state via the
   small script after the question list. Webflow's bundled per-element
   accordion interaction is class-targeted at .faq-question (baked into
   webflow.schunk.9d5708f3c2925fae.js) and has no concept of "open on
   load" -- an earlier version kept .faq-question alongside .dm-faq-item,
   which left Webflow's own click handler bound and fighting this one
   (both toggling independently on the same click). .dm-faq-item no
   longer carries .faq-question at all, so nothing but this script drives
   it; the border-bottom .faq-question provided elsewhere is repeated
   here since that class is gone. The grid-template-rows 0fr/1fr animates
   to the answer's real height without any JS measuring. */
.dm-faq-item {
  border-bottom: 1px solid var(--color--accent);
}

.dm-faq-item .faq-question-lower {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 400ms cubic-bezier(.22, 1, .36, 1);
  overflow: hidden;
}

.dm-faq-item.is-open .faq-question-lower {
  grid-template-rows: 1fr;
}

.dm-faq-item .faq-question-lower-inner {
  min-height: 0;
  overflow: hidden;
}

.dm-faq-item .faq-question-arrow-icon {
  transition: transform 400ms cubic-bezier(.22, 1, .36, 1);
}

.dm-faq-item.is-open .faq-question-arrow-icon {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .dm-faq-item .faq-question-lower,
  .dm-faq-item .faq-question-arrow-icon {
    transition: none;
  }
}

.faq-question-lower {
  overflow: hidden;
}

.faq-question-lower-inner {
  /* Was --spacing--s (24px). */
  margin-bottom: var(--spacing--xs);
}

.faq-question-arrow-icon {
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
}

.text-layout-six-lower {
  margin-top: var(--spacing--l);
  grid-column-gap: var(--spacing--l);
  grid-row-gap: var(--spacing--l);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1.33fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.text-layout-six-lower-text-wrapper {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-layout-six-image-wrapper {
  border-radius: var(--spacing--xs);
  flex: 1;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.cta-layout-three {
  background-image: linear-gradient(180deg, var(--color--light) 50%, var(--color--darkest) 50%);
  color: var(--color--lightest);
}

.text-layout-seven {
  padding-right: var(--spacing--xs);
  padding-left: var(--spacing--xs);
  color: var(--color--lightest);
  position: relative;
}

.text-layout-seven-inner {
  border-radius: var(--spacing--xs);
  position: relative;
  overflow: hidden;
}

.text-layout-seven-title-wrapper {
  margin-bottom: var(--spacing--xl);
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}

.text-layout-seven-content-inner {
  grid-column-gap: var(--spacing--l);
  grid-row-gap: var(--spacing--l);
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

/* Tehnika sa 4 kartice primene: tri kolone bi ostavile red 3+1, pa ide 2x2.
   Samo desktop -- ispod 992px vazi zajednicki raspored (2, pa 1 kolona). */
@media screen and (min-width: 992px) {
  .text-layout-seven-content-inner.is-cards-4 {
    grid-template-columns: 1fr 1fr;
  }
}

.text-layout-seven-text-card {
  padding: var(--spacing--m);
  border: 1px solid var(--color--lightest);
  border-radius: var(--spacing--xs);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background-image: linear-gradient(135deg, #0000, #F5EFE140);
}

.text-layout-seven-title {
  max-width: 66%;
}

.hero-layout-four {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-end;
  margin-bottom: -8rem;
}

.hero-layout-four-upper {
  margin: var(--spacing--xs);
  border-radius: var(--spacing--xs);
  color: var(--color--lightest);
  position: relative;
  overflow: hidden;
}

.hero-layout-four-inner {
  padding-top: 16rem;
  padding-bottom: 16rem;
}

.hero-layout-four-title {
  max-width: 75%;
}

.hero-layout-four-lower-inner {
  grid-template-rows: auto;
  grid-template-columns: 2fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  max-width: calc(1440px - 12.5rem);
  margin-left: auto;
  display: grid;
}

.hero-layout-four-lower-right-content {
  padding-left: var(--spacing--l);
  grid-column-gap: var(--spacing--xl);
  grid-row-gap: var(--spacing--xl);
  /* Hairline Gold Rule (DESIGN.md): structural dividers carry low-opacity
     gold, not a solid accent stripe. */
  border-left: 1px solid rgba(200, 163, 83, .3);
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}

.contact-form-wrapper {
  padding-right: var(--spacing--l);
  margin-bottom: 0;
}

.form-horiz {
  grid-column-gap: var(--spacing--m);
  grid-row-gap: var(--spacing--m);
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.hero-layout-four-lower-left-upper {
  padding-right: var(--spacing--l);
}

.social-list {
  grid-column-gap: var(--spacing--xs);
  grid-row-gap: var(--spacing--xs);
  display: flex;
}

.social-link {
  color: var(--color--lightest);
  transition: opacity .4s ease-in-out;
}

.social-link:hover {
  opacity: .5;
}

/* Facebook and LinkedIn hidden site-wide for now (kept in markup, not deleted). */
.social-link[href*="facebook.com"],
.social-link[href*="linkedin.com"] {
  display: none;
}

.portfolio-layout-two {
  margin-bottom: -1px;
  position: relative;
}

.portfolio-layout-two-inner {
  border-right: 1px solid var(--color--accent);
  border-left: 1px solid var(--color--accent);
}

.portfolio-layout-two-collection-item {
  padding: var(--spacing--xxl) var(--site-width--global-site-padding);
  grid-column-gap: var(--spacing--xl);
  grid-row-gap: var(--spacing--xl);
  border-bottom: 1px solid var(--color--accent);
  grid-template-rows: auto;
  grid-template-columns: 1.5fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.portfolio-layout-two-collection-item-image {
  border-radius: var(--spacing--xs);
  position: relative;
  overflow: hidden;
}

.portfolio-layout-two-collection-item-text-wrapper {
  grid-column-gap: var(--spacing--xl);
  grid-row-gap: var(--spacing--xl);
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.portfolio-layout-two-category-wrapper {
  grid-column-gap: var(--spacing--xs);
  grid-row-gap: var(--spacing--xs);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.text-layout-eight {
  border-bottom: 1px solid var(--color--accent);
}

.text-layout-eight-inner {
  padding-right: var(--spacing--xl);
  padding-left: var(--spacing--xl);
  border-right: 1px solid var(--color--accent);
  border-left: 1px solid var(--color--accent);
}

.text-layout-eight-lower {
  grid-column-gap: var(--spacing--xxl);
  grid-row-gap: var(--spacing--xxl);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.portfolio-page-layout-inner {
  padding-top: 16rem;
  padding-bottom: var(--spacing--xxxl);
  grid-column-gap: var(--spacing--xxl);
  grid-row-gap: var(--spacing--xxl);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1.25fr;
  grid-auto-columns: 1fr;
  align-content: start;
  place-items: start center;
  display: grid;
}

.portfolio-page-text-content {
  position: sticky;
  top: 12rem;
}

.portfolio-page-layout-category-wrapper {
  grid-column-gap: var(--spacing--xs);
  grid-row-gap: var(--spacing--xs);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.portfolo-page-image-content {
  grid-column-gap: var(--spacing--xs);
  grid-row-gap: var(--spacing--xs);
  flex-flow: column;
  width: 100%;
  height: 100%;
  display: flex;
}

.portfolio-page-image-wrapper {
  aspect-ratio: 3 / 2;
  border-radius: var(--spacing--xs);
  position: relative;
  overflow: hidden;
}

.portfolio-page-button-wrapper {
  grid-column-gap: var(--spacing--m);
  grid-row-gap: var(--spacing--m);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.text-layout-four-divider-line-highlight {
  background-color: var(--color--accent);
  width: 0%;
  margin-right: auto;
  position: absolute;
  inset: 0%;
}

.hero-layout-four-lower {
  z-index: 2;
  margin-right: var(--site-width--global-site-padding);
  padding-top: var(--spacing--xl);
  padding-right: var(--spacing--xl);
  padding-bottom: var(--spacing--xl);
  padding-left: var(--spacing--xl);
  border-top-right-radius: var(--spacing--xs);
  border-bottom-right-radius: var(--spacing--xs);
  background-color: var(--color--dark);
  color: var(--color--lightest);
  max-width: calc(50% + 720px - 4rem);
  position: relative;
  top: -8rem;
  overflow: hidden;
}

.password-label {
  display: none;
}

.text-layout-seven-image {
  z-index: 1;
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.text-layout-seven-image.parallax {
  height: 130%;
}

.form-success {
  text-align: left;
  background-color: #ddd0;
  padding: 0;
}

.form-error {
  color: #ff676a;
  background-color: #ffdede00;
  padding: 0;
}

@media screen and (max-width: 991px) {
  body {
    font-size: 14px;
  }

  .page-wrapper {
    position: relative;
  }

  .header {
    z-index: 998;
    position: fixed;
    inset: .75rem .75rem auto;
  }

  .global-padding {
    padding-right: var(--site-width--global-site-padding-mobile);
    padding-left: var(--site-width--global-site-padding-mobile);
  }

  .header-container {
    padding: var(--spacing--xs) var(--site-width--global-site-padding-mobile);
    flex-flow: row;
    justify-content: space-between;
  }

  .header-logo-link {
    max-width: 80px;
  }

  .header-nav-list {
    margin-top: var(--spacing--m);
    margin-bottom: var(--spacing--m);
    grid-column-gap: var(--spacing--m-tablet);
    grid-row-gap: var(--spacing--m-tablet);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }

  .header-nav-link {
    font-size: 1.25rem;
  }

  .style-guide-menu-wrapper {
    display: none;
  }

  .image-overlay.darkest-600 {
    opacity: .7;
  }

  .image-overlay.darkest-300 {
    opacity: .5;
  }

  .primary-button-inner {
    align-items: stretch;
  }

  .padding-s {
    padding: var(--spacing--s-tablet) var(--spacing--s-tablet) var(--spacing--s-tablet) var(--spacing--s);
  }

  .padding-m {
    padding: var(--spacing--m-tablet);
  }

  .padding-l {
    padding: var(--spacing--l-tablet);
  }

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

  .padding-xxl {
    padding: var(--spacing--xxl-tablet);
  }

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

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

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

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

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

  .padding-horizontal {
    padding-top: 0;
    padding-bottom: 0;
  }

  .margin-s {
    margin: var(--spacing--s-tablet);
  }

  .margin-m {
    margin: var(--spacing--m-tablet);
  }

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

  .margin-xl {
    margin: var(--spacing--xl-tablet);
  }

  .margin-xxl {
    margin: var(--spacing--xxl-tablet);
  }

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

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

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

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

  .margin-vertical {
    margin-left: 0;
    margin-right: 0;
  }

  .margin-horizontal {
    margin-top: 0;
    margin-bottom: 0;
  }

  .header-navigation-wrapper {
    background-color: var(--color--dark);
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    display: none;
    position: absolute;
    top: 100%;
    left: 0%;
    right: 0%;
  }

  .header-navigation-wrapper.middle {
    padding-left: var(--site-width--global-site-padding-mobile);
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: rgba(200, 163, 83, 0.22);
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: rgba(200, 163, 83, 0.22);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: rgba(200, 163, 83, 0.22);
    border-left-style: solid;
    border-left-width: 1px;
    border-left-color: rgba(200, 163, 83, 0.22);
    border-top-left-radius: var(--spacing--xs);
    border-top-right-radius: var(--spacing--xs);
    border-bottom-left-radius: var(--spacing--xs);
    border-bottom-right-radius: var(--spacing--xs);
    background-color: var(--color--darkest);
    justify-content: center;
    align-items: flex-start;
    height: auto;
    display: none;
    top: calc(100% + .75rem);
    overflow: hidden;
  }

  .header-nav-list-item {
    justify-content: flex-start;
  }

  .header-nav-list-item.mobile-only {
    display: block;
  }

  .header-menu-button {
    padding: .5rem var(--spacing--xxs);
    width: 2rem;
    height: 2rem;
    display: flex;
  }

  .header-social-link {
    margin-top: var(--spacing--m-tablet);
    color: var(--color--accent);
    margin-left: 0;
    margin-right: 1rem;
  }

  .social-icon {
    width: 1.125rem;
    height: 1.25rem;
  }

  .footer-lower {
    grid-column-gap: var(--spacing--m-tablet);
    grid-row-gap: var(--spacing--m-tablet);
    flex-flow: row;
    align-items: flex-start;
  }

  .footer-lower-link-container {
    grid-column-gap: var(--spacing--m-tablet);
    grid-row-gap: var(--spacing--m-tablet);
  }

  .padding-hero {
    padding-top: 8rem;
    padding-bottom: 0;
  }

  .padding-xxxl {
    padding: var(--spacing--xxxl-tablet);
  }

  .margin-xxxl {
    margin: var(--spacing--xxxl-tablet);
  }

  .primary-button-arrow-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .hero-layout-one-content-wrapper {
    padding-right: var(--site-width--global-site-padding-mobile);
    padding-bottom: var(--spacing--xs);
    padding-left: var(--site-width--global-site-padding-mobile);
    grid-column-gap: var(--spacing--l-tablet);
    grid-row-gap: var(--spacing--l-tablet);
    flex-flow: column;
    justify-content: flex-end;
    align-items: flex-start;
  }

  .footer-upper {
    grid-column-gap: var(--spacing--xxl-tablet);
    grid-row-gap: var(--spacing--xxl-tablet);
    flex-flow: column;
    justify-content: space-between;
    align-items: stretch;
  }

  .footer-upper-left {
    max-width: 50rem;
  }

  .footer-logo-wrapper {
    margin-bottom: var(--spacing--m);
    max-width: 29rem;
  }

  .footer-upper-right {
    justify-content: flex-start;
    align-items: stretch;
  }

  .hero-layout-one-text-wrapper {
    flex: 0 auto;
  }

  .hero-layout-one-link-wrapper {
    /* Desktop-only per request -- stays hidden through the narrower
       767px/479px blocks below since none of them set display back. */
    display: none;
    align-self: flex-end;
  }

  .hero-layout-one-link-wrapper-inner {
    grid-column-gap: var(--spacing--s);
    grid-row-gap: var(--spacing--s);
  }

  .navigation-layout-one-collection-list {
    flex-flow: column;
    height: auto;
  }

  .navigation-layout-one-collection-item {
    aspect-ratio: 3 / 2;
    width: 100%;
  }

  .navigation-layout-one-collection-item .image {
    transform: scale(1.2);
    transform-origin: center;
  }

  .navigation-layout-one-collection-item:nth-child(2) .image,
  .navigation-layout-one-collection-item:nth-child(4) .image,
  .navigation-layout-one-collection-item:nth-child(5) .image {
    transform: scale(1.45);
  }

  .text-layout-one-inner {
    flex-flow: column;
  }

  .text-layout-one-subtitle-wrapper {
    margin-bottom: var(--spacing--l-tablet);
  }

  .text-layout-one-main-content-wrapper {
    max-width: none;
  }

  .text-layout-one-main-content-upper-inner {
    max-width: 90%;
  }

  .text-layout-two-title-wrapper {
    grid-column-gap: var(--spacing--m);
    grid-row-gap: var(--spacing--m);
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .text-layout-two-title {
    max-width: none;
  }

  .text-layout-two-content-wrapper {
    grid-column-gap: var(--spacing--xl);
    grid-row-gap: var(--spacing--xl);
    grid-template-columns: 1fr;
  }

  .text-layout-two-image-wrapper {
    aspect-ratio: 3 / 2;
  }

  .text-layout-two-main-content-wrapper {
    grid-column-gap: var(--spacing--m);
    padding-top: 0;
  }

  .portfolio-layout-one-inner {
    grid-column-gap: var(--spacing--l);
    grid-row-gap: var(--spacing--l);
    grid-template-columns: 1fr;
  }

  .portfolio-layout-one-collection-link {
    padding: var(--spacing--s);
  }

  .cta-layout-one-title-wrapper {
    grid-column-gap: var(--spacing--l);
    grid-row-gap: var(--spacing--l);
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .cta-layout-one-services-links {
    max-width: 50%;
  }

  .cta-layout-one-service-link {
    font-size: 1rem;
  }

  .cta-layout-one-title {
    max-width: none;
  }

  .portfolio-layout-one-collection-link-title {
    opacity: 1;
    pointer-events: auto;
    margin: 0;
    position: relative;
    inset: auto;
  }

  .hero-layout-two-inner {
    grid-template-rows: auto auto;
    grid-template-columns: 1.25fr;
    padding-top: 0;
    padding-right: 0;
  }

  .hero-layout-two-text-wrapper {
    padding: 12rem var(--site-width--global-site-padding-mobile) var(--spacing--xxxl-tablet);
    width: auto;
  }

  .hero-layout-two-image-wrapper {
    aspect-ratio: 3 / 2;
    margin-left: .75rem;
    margin-right: .75rem;
  }

  .hero-layout-two-lower {
    margin-right: var(--site-width--global-site-padding-tablet);
    margin-left: var(--site-width--global-site-padding-tablet);
    /* Down from --spacing--l (3rem): at tablet width the card is already
       narrow, so 3rem of inset ate into the text measure. */
    padding: var(--spacing--m);
    border-radius: var(--spacing--xs);
    max-width: none;
  }

  .hero-layout-two-lower-inner {
    grid-column-gap: var(--spacing--xl-tablet);
    grid-row-gap: var(--spacing--xl-tablet);
    flex-flow: column-reverse;
    max-width: none;
  }

  .hero-layout-two-lower-image-wrapper {
    max-width: none;
  }

  .hero-layout-two-lower-text-wrapper {
    padding-top: 0;
    padding-bottom: 0;
  }

  .text-layout-three-inner {
    grid-column-gap: var(--spacing--l);
    grid-row-gap: var(--spacing--l);
    grid-template-columns: 3fr;
  }

  .text-layout-three-main-content {
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
  }

  .text-layout-three-image-wrapper {
    aspect-ratio: 3 / 2;
  }

  .text-layout-four-title-wrapper {
    margin-bottom: var(--spacing--xxl-tablet);
    grid-column-gap: var(--spacing--xxs);
    grid-row-gap: var(--spacing--xxs);
    flex-flow: column-reverse;
  }

  .text-layout-four-title {
    max-width: none;
  }

  .text-layout-four-main-content {
    flex-flow: column-reverse;
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr;
  }

  .text-layout-four-content-wrapper.upper, .text-layout-four-content-wrapper.lower {
    padding-top: var(--spacing--m);
    padding-bottom: var(--spacing--m);
    padding-left: var(--spacing--m);
  }

  .text-layout-four-divider-line {
    display: none;
  }

  .team-layout-one-slider-info-wrapper {
    outline-color: var(--color--accent);
    outline-offset: 0px;
    outline-width: 1px;
    outline-style: none;
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .team-layout-one-slider {
    margin-top: var(--spacing--xxxl-tablet);
    margin-bottom: var(--spacing--xxxl-tablet);
    grid-column-gap: var(--spacing--l);
    grid-row-gap: var(--spacing--l);
    flex-flow: column-reverse;
  }

  .team-layout-one-slide {
    border-left-style: none;
    padding: 0;
  }

  .team-layout-one-slider-mask {
    width: 100%;
    max-width: none;
    overflow: hidden;
  }

  .team-layout-one-slider-left-arrow {
    inset: auto 5rem 0% auto;
  }

  .team-layout-one-slider-right-arrow {
    inset: auto 0% 0% auto;
  }

  .team-layout-slider-one-info-wrapper-inner {
    margin-bottom: 0;
  }

  .text-layout-five-content-wrapper {
    padding: var(--spacing--l);
  }

  .text-layout-five-link-wrapper {
    align-self: flex-end;
  }

  .text-layout-five-link-wrapper-inner {
    grid-column-gap: var(--spacing--s);
    grid-row-gap: var(--spacing--s);
  }

  .text-layout-five-paragraph-wrapper {
    max-width: none;
  }

  .text-layout-five-lower {
    grid-column-gap: var(--spacing--m);
    grid-row-gap: var(--spacing--m);
    flex-flow: column-reverse;
  }

  .text-layout-five-title-wrapper {
    max-width: none;
  }

  .cta-layout-two-inner {
    padding-right: var(--site-width--global-site-padding-mobile);
    padding-left: var(--site-width--global-site-padding-mobile);
    grid-column-gap: var(--spacing--l);
    grid-row-gap: var(--spacing--l);
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .cta-layout-two-title-wrapper {
    max-width: none;
  }

  .hero-layout-three-content-wrapper {
    padding: 12rem var(--site-width--global-site-padding-mobile) var(--spacing--xxl);
  }

  .text-layout-six-title {
    max-width: none;
  }

  .services-layout-one-collection-list {
    grid-column-gap: var(--spacing--l);
    grid-row-gap: var(--spacing--l);
  }

  .faq-layout-one-title-wrapper {
    grid-column-gap: var(--spacing--xs);
    grid-row-gap: var(--spacing--xs);
    flex-flow: column-reverse;
  }

  .faq-layout-one-title {
    max-width: none;
  }

  .faq-layout-one-inner {
    grid-template-columns: 1fr;
  }

  .faq-layout-one-image-wrapper {
    display: none;
  }

  .text-layout-six-lower {
    margin-top: var(--spacing--xs);
    grid-template-columns: 1fr;
  }

  .text-layout-six-image-wrapper {
    aspect-ratio: 2.39;
    display: none;
  }

  .text-layout-seven-title-wrapper {
    grid-column-gap: var(--spacing--m);
    grid-row-gap: var(--spacing--m);
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .text-layout-seven-content-inner {
    grid-template-columns: 1fr 1fr;
  }

  .text-layout-seven-title {
    max-width: none;
  }

  .hero-layout-four {
    margin-bottom: -6rem;
  }

  .hero-layout-four-inner {
    padding-top: 12rem;
    padding-bottom: 12rem;
  }

  .hero-layout-four-title {
    max-width: none;
  }

  .hero-layout-four-lower-inner {
    grid-column-gap: var(--spacing--l);
    grid-row-gap: var(--spacing--l);
    grid-template-columns: 2fr;
    max-width: none;
  }

  .hero-layout-four-lower-right-content {
    grid-column-gap: var(--spacing--l);
    grid-row-gap: var(--spacing--l);
    border-left-style: none;
    padding-left: 0;
  }

  .contact-form-wrapper {
    padding-right: 0;
  }

  .social-link {
    margin-top: var(--spacing--m-tablet);
    margin-left: 0;
    margin-right: 1rem;
  }

  .portfolio-layout-two-collection-item {
    padding: var(--spacing--xxl-tablet) var(--site-width--global-site-padding-mobile);
    grid-column-gap: var(--spacing--l);
    grid-row-gap: var(--spacing--l);
    grid-template-columns: 1.5fr;
  }

  .portfolio-layout-two-collection-item-image {
    aspect-ratio: 2;
  }

  .portfolio-layout-two-collection-item-text-wrapper {
    grid-column-gap: var(--spacing--l);
    grid-row-gap: var(--spacing--l);
  }

  .text-layout-eight-inner {
    padding-right: var(--site-width--global-site-padding-mobile);
    padding-left: var(--site-width--global-site-padding-mobile);
  }

  .text-layout-eight-lower {
    grid-column-gap: var(--spacing--xs);
    grid-row-gap: var(--spacing--xs);
    grid-template-columns: 1fr;
  }

  .portfolio-page-layout-inner {
    padding-top: 12rem;
    padding-bottom: var(--spacing--xxxl-tablet);
    grid-column-gap: var(--spacing--xxl-tablet);
    grid-row-gap: var(--spacing--xxl-tablet);
    grid-template-columns: 1fr;
  }

  .portfolio-page-text-content {
    position: relative;
    top: 0;
  }

  .hero-layout-four-lower {
    margin-right: var(--site-width--global-site-padding-tablet);
    margin-left: var(--site-width--global-site-padding-tablet);
    padding: var(--spacing--l);
    border-radius: var(--spacing--xs);
    max-width: none;
  }

  .text-layout-seven-image.parallax {
    object-fit: cover;
  }
}

@media screen and (max-width: 767px) {
  body {
    font-size: 12px;
  }

  h1 {
    font-size: 2.25rem;
  }

  h2 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  h4 {
    font-size: 1.25rem;
  }

  .global-padding {
    padding-right: var(--site-width--global-site-padding-mobile);
    padding-left: var(--site-width--global-site-padding-mobile);
  }

  /* Unify the "[ eyebrow ]" label -> heading gap across homepage sections
     on mobile -- hero (12px) and "Ko smo mi" (40px, inherited from the
     tablet breakpoint) both drifted from the 24px "Naše vrednosti" already
     uses; standardize all three on that value. */
  .hero-layout-one-text-wrapper > .margin-bottom.margin-xs {
    margin-bottom: var(--spacing--s);
  }

  .text-layout-one-subtitle-wrapper {
    margin-bottom: var(--spacing--s);
  }

  .header-nav-list {
    grid-column-gap: var(--spacing--l-mobile);
    grid-row-gap: var(--spacing--l-mobile);
  }

  .header-nav-link {
    font-size: 1.125rem;
  }

  .heading-one {
    font-size: 2.25rem;
  }

  .heading-two {
    font-size: 2rem;
  }

  .heading-three {
    font-size: 1.5rem;
  }

  .heading-four {
    font-size: 1.25rem;
  }

  .padding-m {
    padding: var(--spacing--m-mobile);
  }

  .padding-l {
    padding: var(--spacing--l-mobile);
  }

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

  .padding-xxl {
    padding: var(--spacing--xxl-mobile);
  }

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

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

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

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

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

  .padding-vertical.padding-hero {
    padding-top: 6rem;
  }

  .padding-horizontal {
    padding-top: 0;
    padding-bottom: 0;
  }

  .margin-m {
    margin: var(--spacing--m-mobile);
  }

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

  .margin-xl {
    margin: var(--spacing--xl-mobile);
  }

  .margin-xxl {
    margin: var(--spacing--xxl-mobile);
  }

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

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

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

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

  .margin-vertical {
    margin-left: 0;
    margin-right: 0;
  }

  .margin-horizontal {
    margin-top: 0;
    margin-bottom: 0;
  }

  .header-navigation-wrapper.middle {
    overflow: hidden;
  }

  .header-social-link {
    margin-top: var(--spacing--l-mobile);
  }

  .social-icon {
    width: 1rem;
  }

  .footer-lower {
    grid-column-gap: var(--spacing--xs);
    grid-row-gap: var(--spacing--xs);
    flex-flow: column;
    align-items: center;
    text-align: center;
  }

  /* .text-size-medium and .footer-sub-link both set their own font-size,
     so the parent's font-size above never reaches the actual text --
     scoped here instead of touching those classes globally (used all
     over the site, not just this footer line). */
  .footer-lower .text-size-medium,
  .footer-lower .footer-sub-link {
    font-size: 12px;
  }

  .footer-lower-link-container {
    grid-column-gap: var(--spacing--m-mobile);
    grid-row-gap: var(--spacing--m-mobile);
    flex-direction: column;
    align-items: center;
  }

  .padding-xxxl {
    padding: var(--spacing--xxxl-mobile);
  }

  .margin-xxxl {
    margin: var(--spacing--xxxl-mobile);
  }

  .form-select-input {
    width: 100%;
  }

  .hero-layout-one-content-wrapper {
    padding-top: var(--spacing--xxxl);
    padding-bottom: var(--spacing--m);
    grid-column-gap: var(--spacing--xxl-mobile);
    grid-row-gap: var(--spacing--xxl-mobile);
    /* Was flex-start, which overrode the 991px block's flex-end and
       pushed content to the top of the hero on phones specifically. */
    justify-content: flex-end;
    align-items: flex-start;
  }

  /* Footer, mobile: center every block (logo, tagline, both nav columns)
     instead of the desktop's left-aligned rows, and pull in the
     desktop-scale padding-xxl gaps around the nav/copyright rows --
     scoped to .footer since padding-top/padding-xxl are shared utility
     classes used all over the site. */
  .footer .padding-top.padding-xxl {
    padding-top: var(--spacing--xl-mobile);
  }

  .footer-upper {
    grid-column-gap: var(--spacing--xl-mobile);
    grid-row-gap: var(--spacing--xl-mobile);
    align-items: center;
  }

  .footer-upper-left {
    align-items: center;
    text-align: center;
  }

  .footer-logo-wrapper {
    margin-bottom: var(--spacing--m);
    grid-column-gap: var(--spacing--xxs);
    grid-row-gap: var(--spacing--xxs);
    flex-flow: column;
    align-items: center;
    justify-content: center;
  }

  .footer-logo-text-wrapper {
    justify-content: center;
    text-align: center;
  }

  .footer-upper-right {
    /* Navigacija (5 items) + Tehnike (8 items) side by side, flush at
       the top -- a full vertical stack of both lists read as a wall of
       text, and centering them as a row (align-items: center) made the
       shorter list visibly sag below the taller one's heading. */
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    grid-column-gap: var(--spacing--l-mobile);
  }

  /* Flex children default to min-width: auto, refusing to shrink below
     their longest word ("NAVIGACIJA", "Efekat daske") -- with two of
     them side by side that overflowed the phone width and got clipped
     by the page's overflow-x guard instead of wrapping. flex: 1 +
     min-width: 0 makes each column actually take an even, fixed share
     of the row and wrap its own text inside that. */
  .footer-nav-wrapper {
    flex: 1;
    min-width: 0;
  }

  .footer-nav-wrapper {
    align-items: center;
    grid-row-gap: var(--spacing--xxs);
  }

  .footer-nav-list {
    align-items: center;
    grid-row-gap: .5rem;
  }

  /* Lighten the two link columns so the full 13-link list reads as quiet
     fine print, not a competing block of body-weight text -- smaller,
     muted resting color, gold still on hover/tap same as everywhere
     else. Scoped to .footer-upper-right so the shared .link-style-one /
     .heading-five classes stay untouched elsewhere. */
  .footer-upper-right .heading-five {
    font-size: .6875rem;
    opacity: .8;
  }

  .footer-upper-right .footer-nav-list a {
    font-size: .8125rem;
    color: rgba(245, 243, 238, .6);
  }

  .footer-upper-right .footer-nav-list a:hover,
  .footer-upper-right .footer-nav-list a.w--current {
    color: var(--color--accent);
  }

  .vertical-divider {
    display: none;
  }

  .footer-newsletter-form-wrapper {
    padding: var(--site-width--global-site-padding-mobile);
  }

  .hero-layout-one-link-wrapper {
    align-self: flex-start;
  }

  .hero-layout-one-link-wrapper-inner {
    padding: var(--spacing--s);
  }

  .navigation-layout-one-title-wrapper {
    grid-column-gap: var(--spacing--s);
    grid-row-gap: var(--spacing--s);
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .text-layout-one-main-content-upper {
    margin-bottom: var(--spacing--m);
  }

  .text-layout-one-main-content-upper-inner {
    max-width: none;
  }

  .text-layout-one-submark-wrapper {
    top: -3.875rem;
  }

  .text-layout-one-main-content-lower {
    margin-top: var(--spacing--m);
    grid-column-gap: var(--spacing--s);
    grid-row-gap: var(--spacing--s);
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .testimonial-layout-one-title {
    margin-bottom: var(--spacing--l);
  }

  .testimonial-layout-one-slider {
    padding-bottom: var(--spacing--xl);
  }

  .testimonial-layout-one-button-wrapper {
    margin-top: var(--spacing--l);
  }

  .testimonal-layout-one-left-arrow {
    margin-right: auto;
    inset: auto 0% 0%;
    transform: translate(-2rem);
  }

  .testimonial-layout-one-right-arrow {
    inset: auto 0% 0%;
    transform: translate(2rem);
  }

  .mask {
    max-width: none;
  }

  .text-layout-two-title-wrapper {
    margin-bottom: var(--spacing--l);
  }

  .text-layout-two-content-wrapper {
    grid-column-gap: var(--spacing--l);
    grid-row-gap: var(--spacing--l);
  }

  .text-layout-two-main-content-wrapper {
    grid-column-gap: var(--spacing--l);
    grid-row-gap: var(--spacing--l);
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr;
  }

  .portfolio-layout-one-portfolio-wrapper {
    grid-template-rows: auto auto auto auto auto;
    grid-template-columns: 1fr;
  }

  .portfolio-layout-one-collection-list-wrapper {
    aspect-ratio: 16 / 9;
  }

  .cta-layout-one-inner {
    padding: var(--spacing--s);
  }

  .cta-layout-one-title-wrapper {
    grid-column-gap: var(--spacing--m);
    grid-row-gap: var(--spacing--m);
  }

  .cta-layout-one-services-links {
    max-width: 100%;
  }

  .navigation-layout-one-desktop-button {
    display: none;
  }

  .navigation-layout-one-mobile-button-wrapper {
    display: block;
  }

  .hero-layout-two {
    padding-bottom: var(--spacing--xxl-mobile);
  }

  .hero-layout-two-text-wrapper {
    padding: 8rem var(--site-width--global-site-padding-mobile) var(--spacing--xxxl-mobile);
  }

  .hero-layout-two-lower {
    margin-right: var(--spacing--xs);
    margin-left: var(--spacing--xs);
    /* Down from --spacing--m (2rem). */
    padding: var(--spacing--s);
    top: -1rem;
  }

  .hero-layout-two-lower-inner {
    grid-column-gap: var(--spacing--xl-mobile);
    grid-row-gap: var(--spacing--xl-mobile);
  }

  .text-layout-three-inner {
    grid-column-gap: var(--spacing--m);
    grid-row-gap: var(--spacing--m);
  }

  .text-layout-four-title-wrapper {
    margin-bottom: var(--spacing--xxl-mobile);
  }

  .team-layout-one-slider {
    margin-top: var(--spacing--xxxl-mobile);
    margin-bottom: var(--spacing--xxxl-mobile);
  }

  .text-layout-five-inner {
    min-height: 0;
  }

  .text-layout-five-content-wrapper {
    padding: var(--spacing--m);
    grid-column-gap: var(--spacing--xl-mobile);
    grid-row-gap: var(--spacing--xl-mobile);
  }

  .text-layout-five-link-wrapper {
    align-self: flex-start;
  }

  .text-layout-five-link-wrapper-inner {
    padding: var(--spacing--s);
  }

  .cta-layout-two-inner {
    padding-top: var(--spacing--xxxl-tablet);
    padding-bottom: var(--spacing--xxl-mobile);
    grid-column-gap: var(--spacing--xl-mobile);
    grid-row-gap: var(--spacing--xl-mobile);
    min-height: 0;
  }

  .hero-layout-three-content-wrapper {
    padding-top: 8rem;
    padding-bottom: var(--spacing--l);
  }

  .text-layout-six-title {
    margin-bottom: var(--spacing--m);
  }

  .text-layout-six-stats-wrapper {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .services-layout-one-link-wrapper {
    /* Down from --spacing--m (2rem) via --spacing--s (1.5rem): applies to
       all 8 technique cards, which are class-driven from one rule. */
    padding: var(--spacing--xs);
  }

  .services-layout-one-link-text-wrapper {
    max-width: none;
  }

  .faq-layout-one-title-wrapper, .text-layout-seven-title-wrapper {
    margin-bottom: var(--spacing--l);
  }

  .text-layout-seven-content-inner {
    grid-column-gap: var(--spacing--m);
    grid-row-gap: var(--spacing--m);
    grid-template-columns: 1fr;
  }

  .hero-layout-four {
    margin-bottom: -4rem;
  }

  .hero-layout-four-inner {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

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

  .portfolio-layout-two-collection-item {
    padding-top: var(--spacing--xxxl-mobile);
    padding-bottom: var(--spacing--xxxl-mobile);
  }

  .portfolio-layout-two-collection-item-image {
    aspect-ratio: 3 / 2;
  }

  .portfolio-layout-two-collection-item-text-wrapper {
    grid-column-gap: var(--spacing--m);
    grid-row-gap: var(--spacing--m);
  }

  .portfolio-page-layout-inner {
    padding-top: 8rem;
    padding-bottom: var(--spacing--xxxl-mobile);
    grid-column-gap: var(--spacing--xxl-mobile);
    grid-row-gap: var(--spacing--xxl-mobile);
  }

  .portfolio-page-button-wrapper {
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
  }

  .hero-layout-four-lower {
    margin-right: var(--spacing--xs);
    margin-left: var(--spacing--xs);
    padding: var(--spacing--m);
    top: -4rem;
  }
}

@media screen and (max-width: 479px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  .style-guide-wrapper {
    display: block;
  }

  .heading-one {
    font-size: 2rem;
  }

  .heading-two {
    font-size: 1.75rem;
  }

  .heading-five {
    font-size: .75rem;
  }

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

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

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

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

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

  .padding-horizontal {
    padding-top: 0;
    padding-bottom: 0;
  }

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

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

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

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

  .margin-vertical {
    margin-left: 0;
    margin-right: 0;
  }

  .margin-horizontal {
    margin-top: 0;
    margin-bottom: 0;
  }

  .footer-newsletter-form {
    flex-flow: column;
    align-items: stretch;
  }

  .hero-layout-two-inner {
    display: block;
  }
}

#w-node-_28cd6372-0417-fec5-0bc7-8c6cf298e1de-a401e5ac {
  grid-area: 1 / 1 / 7 / 3;
}

#w-node-_5dd40e3a-c3d8-1350-c891-a1e406f24a2e-a401e5ac {
  grid-area: 1 / 3 / 3 / 5;
}

#w-node-ae067af8-1755-8c49-ed17-8a2cb3fa87b5-a401e5ac {
  grid-area: 3 / 3 / 7 / 5;
}

#w-node-_912eccbc-3827-f246-1e43-90341cf9e753-a401e5ac {
  grid-area: 1 / 5 / 4 / 7;
}

#w-node-ebf9b987-ec0f-fe1f-5aa8-9c27f513ebd9-a401e5ac {
  grid-area: 4 / 5 / 7 / 7;
}

#w-node-_9d3157ff-bd50-2cf9-65ca-efe49be4f2fd-a401e5b1, #w-node-_9d3157ff-bd50-2cf9-65ca-efe49be4f323-a401e5b1, #Get-Started-Support.w-node-_9d3157ff-bd50-2cf9-65ca-efe49be4f6c6-a401e5b1 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-a80236b2-6c5b-c3c9-7634-525c9a30452b-40dd9d85 {
  grid-area: 3 / 1 / 4 / 3;
}

/* Korak 04 sakriven (page-about.php): tri preostala koraka se ravnomerno dele na
   sest kolona, po dve svaki, da cik-cak ritam oko linije ostane pravilan i da
   gornji desni ugao ne ostane prazan. Originalne vrednosti: 02 = 1 / 2 / 2 / 4,
   03 = 3 / 4 / 4 / 6. */
#w-node-_6ce5f82e-a3f6-60ba-dbd3-b87b7cf5f57e-40dd9d85 {
  grid-area: 1 / 3 / 2 / 5;
}

#w-node-_0229d354-530d-2714-10f3-ae65037680ee-40dd9d85 {
  grid-area: 2 / 1 / 3 / 7;
}

#w-node-_52ed3db4-e5b1-1cd4-58a1-0f5fbed35b02-40dd9d85 {
  grid-area: 3 / 5 / 4 / 7;
}

#w-node-_9489c3b0-19d6-918b-44d2-b27ef5915ed2-40dd9d85 {
  grid-area: 1 / 5 / 2 / 7;
}

@media screen and (max-width: 991px) {
  #w-node-_9d3157ff-bd50-2cf9-65ca-efe49be4f323-a401e5b1 {
    grid-column: span 2 / span 2;
  }

  #w-node-a80236b2-6c5b-c3c9-7634-525c9a30452b-40dd9d85, #w-node-_6ce5f82e-a3f6-60ba-dbd3-b87b7cf5f57e-40dd9d85, #w-node-_0229d354-530d-2714-10f3-ae65037680ee-40dd9d85, #w-node-_52ed3db4-e5b1-1cd4-58a1-0f5fbed35b02-40dd9d85, #w-node-_9489c3b0-19d6-918b-44d2-b27ef5915ed2-40dd9d85 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-da5a0b48-3736-6d6f-ce79-b3b8cf124a20-1e9c6186 {
    order: 9999;
  }
}

@media screen and (max-width: 767px) {
  #w-node-_28cd6372-0417-fec5-0bc7-8c6cf298e1de-a401e5ac, #w-node-_5dd40e3a-c3d8-1350-c891-a1e406f24a2e-a401e5ac, #w-node-ae067af8-1755-8c49-ed17-8a2cb3fa87b5-a401e5ac, #w-node-_912eccbc-3827-f246-1e43-90341cf9e753-a401e5ac, #w-node-ebf9b987-ec0f-fe1f-5aa8-9c27f513ebd9-a401e5ac {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}

.hero-video-fallback {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }

  .hero-video-fallback {
    display: block;
  }
}

/* ---------------------------------------------------------------------
   Shared mobile padding for card-like containers.

   Single source of truth so these don't drift apart again: previously
   each of these carried its own mobile value (2rem here, 1.5rem there,
   0.75rem on the technique cards). --spacing--m-mobile is the theme's
   existing 1.25rem token, already used by the .padding-m utility at this
   breakpoint, so this matches rather than introduces a new value.

   Placed last in the file deliberately: these selectors already appear
   inside the big Webflow max-width:767px block above, and source order
   settles the tie at equal specificity.
   --------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .services-layout-one-link-wrapper,
  .text-layout-seven-text-card,
  .hero-layout-two-lower {
    padding: var(--spacing--m-mobile);
  }
}

/* =====================================================================
   PHONE ADAPTATION — Tehnike (page-services.php)

   Diagnosis: .services-layout-one-link-content-wrapper ships a flat 16rem
   row gap with no responsive override anywhere in the Webflow export. On
   a desktop card that gap is the composition — arrow pinned top, title
   pinned bottom, photo breathing in between. Ported unchanged to a 440px
   phone it makes every one of the 8 cards a near-full-screen panel, which
   is ~63% of this page's ~7200px scroll.

   The fix is not "same panel, smaller numbers". On a phone the card stops
   being an immersive panel and becomes a wide photo tile you scan: 16:10
   so the surface texture still reads at thumbnail size, name and a
   two-line summary over a bottom scrim, and the full description one tap
   away on the technique's own page (which already carries it verbatim).
   ===================================================================== */
@media screen and (max-width: 767px) {
  .services-layout-one-collection-list {
    grid-column-gap: var(--spacing--s);
    grid-row-gap: var(--spacing--s);
  }

  .services-layout-one-link-wrapper {
    aspect-ratio: 16 / 10;
  }

  .services-layout-one-link-content-wrapper {
    grid-column-gap: var(--spacing--xs);
    grid-row-gap: var(--spacing--xs);
    height: 100%;
  }

  /* Flat 40% black is not enough contrast for text sitting this low over
     an unpredictable photo. Weighted to the bottom where the type is. */
  .services-layout-one-link-wrapper .image-overlay.darkest-300 {
    background: linear-gradient(180deg, rgba(10, 10, 10, .15) 0%, rgba(10, 10, 10, .4) 45%, rgba(10, 10, 10, .88) 100%);
    opacity: 1;
  }

  .services-layout-one-link-text-wrapper h2 {
    font-size: 1.5rem;
  }

  .services-layout-one-link-text-wrapper p {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 1rem;
    display: -webkit-box;
    overflow: hidden;
  }

  /* 3 stats in a 2-column grid orphans the third on its own row. As a
     phone-width list they read better inline: value, then what it counts. */
  .text-layout-six-stats-wrapper {
    grid-row-gap: var(--spacing--s);
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }

  .text-layout-six-stat {
    grid-column-gap: var(--spacing--xs);
    align-items: baseline;
    display: flex;
  }

  .text-layout-six-stat .margin-bottom {
    margin-bottom: 0;
  }
}

/* ---------------------------------------------------------------------
   FAQ vertical rhythm on phones (15 pages use .faq-layout-one).

   Every section that precedes this one already ends with its own
   padding-xxxl, and the FAQ opens with padding-vertical padding-xxxl, so
   at mobile the two stack into a 128px void — while the spacing *inside*
   the block runs 24-48px. That mismatch is what reads as inconsistent,
   not the item spacing itself.

   Dropping the FAQ's own top padding lets the previous section's 64px
   stand alone, giving a legible descending scale:
   64px between sections -> 32px heading to list -> 24px within an item.
   --------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .faq-layout-one .padding-vertical {
    padding-top: 0;
  }

  .faq-layout-one-title-wrapper {
    /* Was raw --spacing--l (48px) while the padding utilities around it
       switch to their -mobile tokens; 32px keeps it inside the scale. */
    margin-bottom: var(--spacing--m);
  }

  /* The question padding and answer margin now carry the trimmed values
     in the base rules, so only the list gap still needs to go tighter
     here than it does on a wide screen. */
  .faq-layout-one-questions-wrapper {
    grid-column-gap: var(--spacing--xs);
    grid-row-gap: var(--spacing--xs);
  }
}

/* ---------------------------------------------------------------------
   Tehnike hero on phones: a little taller, content pinned bottom-left.

   Scoped to .dm-video-hero -- .hero-layout-three-inner is shared by 6
   other pages that keep their current proportions.

   Height is set against the viewport rather than as another fixed rem so
   the hero keeps the same share of the screen across phone sizes. svh
   (small viewport height) is the stable unit: vh on iOS Safari resolves
   to the URL-bar-collapsed height, so a vh-sized hero visibly jumps as
   that bar hides on scroll. The vh line above is the fallback.

   display:flex on the inner box plus flex:1 on the content wrapper is
   what lets the wrapper's own justify-content:flex-end actually reach
   the bottom edge. A percentage height cannot do it: it resolves against
   the parent's height, which is auto here (only min-height is set), so
   the wrapper collapsed to its content and the text sat at the top.
   --------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .hero-layout-three.dm-video-hero .hero-layout-three-inner {
    min-height: 56vh;
    min-height: 56svh;
    display: flex;
  }

  .hero-layout-three.dm-video-hero .hero-layout-three-content-wrapper {
    padding-top: var(--spacing--xxxl);
    padding-bottom: var(--spacing--m);
    flex: 1;
  }
}

/* ---------------------------------------------------------------------
   Ordered reveal for the "Kako radimo" band.

   Webflow drove these three from two different action lists: a-30 (the
   heading and its paragraph) carries a 300ms delay, a-29 (the image +
   stats block below them) carries none. On a screen wide enough to show
   the whole band at once all three scroll into view together, so the
   bottom block finished 300ms before the heading above it had started.

   Taken off IX2 entirely rather than fought: the stagger now runs
   top-to-bottom from the data-dm-reveal value on each element.

   The hidden state is gated behind .dm-reveal-ready, which the script
   adds to <html> only once it is running. Without JS -- or in a headless
   renderer, where transitions never fire -- nothing is ever hidden, so
   the band cannot ship blank.
   --------------------------------------------------------------------- */
.dm-reveal-ready [data-dm-reveal] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 600ms cubic-bezier(.22, 1, .36, 1), transform 600ms cubic-bezier(.22, 1, .36, 1);
}

.dm-reveal-ready [data-dm-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------------
   CTA heading, tightened to the DESIGN.md display spec.

   Scoped to the CTA component (shared by 22 pages) rather than to
   .heading-one, so the hero headings on About / Contact / Portfolio and
   the technique pages keep their current proportions.

   The bulk came from two Webflow-export values compounding on a display
   serif already set in caps: 1.3em leading and +0.05em tracking. The
   brand spec is 1.08 and -0.01em. Caps are kept as-is.
   --------------------------------------------------------------------- */
.cta-layout-one-title .heading-one {
  /* 4.5rem (72px) fixed was still oversized once the leading tightened.
     DESIGN.md's display step is a fluid clamp, so it scales with the
     viewport instead of needing a value per breakpoint -- and its max
     (4.75rem) never applies here because 5vw only reaches that past a
     1520px viewport, where the CTA card is at its widest anyway. */
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  letter-spacing: -.01em;
  line-height: 1.08;
}

/* Front page "Godine zanata..." paragraph only -- .heading-three is
   shared by 13 other headings across 9 pages, so this is scoped to its
   specific wrapper rather than touching the shared class. */
@media screen and (max-width: 767px) {
  .text-layout-one-main-content-upper-inner .heading-three {
    font-size: 18px;
  }
}

/* About hero "...stoji zanat" -- explicit line break on phones, matching
   what natural wrap already produced at this width, but guaranteed
   rather than incidental. New class rather than .text-color-dark itself:
   that color class is shared by emphasis words all over the site. */
@media screen and (max-width: 767px) {
  .dm-block-mobile {
    display: block;
  }
}

/* Homepage section-to-section gap on mobile: the "hero -> Ko smo mi" and
   "Naše tehnike -> Naše vrednosti" boundaries both resolve to the same
   --spacing--xxxl-mobile token (64px) in the cascade, but the second one
   was still rendering visibly larger. Rather than leave that to whatever
   is causing the drift, pin both boundary paddings to the same explicit
   value with a selector specific enough to win outright -- placed last
   in the file so source order can't be the tiebreaker either. */
@media screen and (max-width: 767px) {
  .navigation-layout-one > .global-padding > .padding-bottom.padding-xxxl {
    padding-bottom: 4rem;
  }

  .text-layout-two > .global-padding > .padding-bottom.padding-xxxl {
    padding-top: 0;
  }

  .text-layout-one > .global-padding > .padding-vertical.padding-xxxl {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

/* The global `p { margin-bottom: 0 }` (line ~2261) is right everywhere the
   theme hand-places a single paragraph inside a .margin-bottom wrapper, but
   it also flattens CMS bodies: .w-richtext is the one place a paragraph has
   siblings, and there the rule ran four paragraphs of project copy together
   as an unbroken block. Space the siblings only -- the trailing paragraph
   still defers to the wrapper's own margin, so no boundary spacing shifts. */
.w-richtext p + p,
.w-richtext p + ul,
.w-richtext p + ol,
.w-richtext ul + p,
.w-richtext ol + p,
.w-richtext p + blockquote,
.w-richtext blockquote + p {
  margin-top: var(--spacing--s);
}

/* Headings need both sides: the brand rules at ~2209 zero out margin-top and
   margin-bottom on every h2-h4, which is correct for hand-placed headings in
   .margin-bottom wrappers but leaves a CMS subheading glued to the paragraph
   under it. */
.w-richtext :is(h2, h3, h4):not(:first-child) {
  margin-top: var(--spacing--m);
}

.w-richtext :is(h2, h3, h4) {
  margin-bottom: var(--spacing--xs);
}

/* ---------------------------------------------------------------------
   Procesni video (9:16, story format) na početnoj.

   Vertikalan snimak u horizontalnom layoutu: okvir drži 9/16 i nosi
   poster, a tekst stoji uz njega umesto da video ide preko cele širine,
   gde bi ga cover-crop presekao na traku. Radijus je isti --spacing--xs
   kao na svim ostalim slikama na sajtu, da okvir ne ispadne iz reda.
   --------------------------------------------------------------------- */
.dm-process-video-inner {
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: var(--spacing--xxl);
  align-items: center;
}

.dm-process-video-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--spacing--xs);
  overflow: hidden;
  background-color: #121110;
}

.dm-process-video-el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kolona je 1fr da video ostane levo prikovan, ali sam tekst se seče na meru
   iz DESIGN.md §3 (65-75ch) -- bez ovoga red pasusa ide preko 90 znakova. */
.dm-process-video-text {
  max-width: 36rem;
}

/* WCAG 2.2.2: loop traje duže od 5s, pa mora postojati način da se zaustavi.
   Native `controls` bi ubacio sistemski chrome preko editorijalnog kadra, pa
   kontrola ide kao jedno dugme po specifikaciji dugmadi iz DESIGN.md. */
.dm-process-video-toggle {
  position: absolute;
  right: var(--spacing--xs);
  bottom: var(--spacing--xs);
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(200, 163, 83, .4);
  border-radius: 2px;
  background-color: rgba(10, 10, 10, .72);
  color: var(--color--accent);
  cursor: pointer;
  transition: background-color .4s cubic-bezier(.645, .045, .355, 1),
              border-color .4s cubic-bezier(.645, .045, .355, 1);
}

.dm-process-video-toggle:hover {
  background-color: rgba(10, 10, 10, .9);
  border-color: var(--color--accent);
}

.dm-process-video-toggle:active {
  transform: scale(.98);
}

.dm-process-video-toggle:focus-visible {
  outline: 2px solid var(--color--accent);
  outline-offset: 2px;
}

.dm-process-video-icon {
  display: none;
  width: .625rem;
  height: .75rem;
}

.dm-process-video-frame.is-playing .dm-process-video-icon.is-pause,
.dm-process-video-frame:not(.is-playing) .dm-process-video-icon.is-play {
  display: block;
}

/* Ivory-secondary iz DESIGN.md §2 — nema ga kao token u :root teme. */
.dm-process-video-caption {
  margin: 0;
  font-family: var(--font--ui-font);
  font-size: .75rem;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #D9CBA3;
}

@media screen and (max-width: 991px) {
  /* Bez `justify-items: start`: to stavke sizuje na fit-content, pa dugacak
     naslov razvuce kolonu preko sirine ekrana umesto da se prelomi. Stavke
     se i ovako drze leve ivice, jer max-width na okviru videa i na tekstu
     ostavlja visak prostora desno. */
  .dm-process-video-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing--xl-tablet);
  }

  .dm-process-video-frame,
  .dm-process-video-text {
    min-width: 0;
    max-width: 100%;
  }

  /* width:100% + max-width, ne fiksnih 20rem: na 320px ekranima (iPhone SE)
     bi fiksna sirina bila sira od sadrzaja globalnog paddinga. */
  .dm-process-video-frame {
    width: 100%;
    max-width: 20rem;
  }
}

@media screen and (max-width: 767px) {
  .dm-process-video-inner {
    gap: var(--spacing--l-mobile);
  }

  .dm-process-video-frame {
    max-width: none;
  }
}

/* Bez reduced-motion skripta ni ne pokreće video (poster stoji, dugme radi),
   pa ovde ostaje samo gašenje tranzicija na kontroli. */
@media (prefers-reduced-motion: reduce) {
  .dm-process-video-toggle {
    transition-duration: .01ms;
  }

  .dm-process-video-toggle:active {
    transform: none;
  }
}

/* --- Koraci procesa uz video ---------------------------------------------
   Pravi <ol>: redosled je smisao sadržaja, ne dekoracija, pa numeracija
   mora da preživi i čitač ekrana i iskljucen CSS. Vidljivi broj je
   aria-hidden i dolazi iz markupa, jer se list-style ne može stilizovati
   do ovog izgleda.

   Razdvajanje je hairline gold po pravilu iz DESIGN.md §2, kao border-top
   preko cele širine. Namerno nije border-left: to je izričito zabranjen
   obrazac (DESIGN.md §6).
   ------------------------------------------------------------------------ */
/* Donja margina je na listi, a ne na potpisu ispod: potpis je opcion, pa bi
   margin-top na njemu nestao zajedno sa njim i lista bi visila uz dno. */
.dm-process-steps {
  margin: 0 0 var(--spacing--m);
  padding: 0;
  list-style: none;
}

/* Kolona broja je fiksna, ne `auto`: sa `auto` bi je najsiri numeral rastegao
   i naslovi bi krenuli sa razlicitih iksova ako lista ikad predje 09. */
.dm-process-step {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--spacing--s);
  padding-top: var(--spacing--m);
  margin-top: var(--spacing--m);
  border-top: 1px solid rgba(200, 163, 83, .22);
}

.dm-process-step:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

/* Numeral je display element, ne label: Playfair po pravilu dve serife iz
   DESIGN.md §3, u zlatnom, krupniji od naslova koraka. Radi kao broj poglavlja
   i daje listi editorijalni ritam umesto UI-checklist izgleda.

   line-height: 1 na 1.75rem spusta osnovnu liniju na ~21px od vrha reda, a
   naslov na 1.375rem/1.35 na ~20.35px -- razlika je ispod pola piksela, pa se
   broj i naslov poravnavaju sami, bez rucnog padding nudge-a. */
.dm-process-step-num {
  font-family: var(--font--heading-font);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  color: var(--color--accent);
  /* Tabularne cifre da se 01..10 poklope u koloni. */
  font-variant-numeric: tabular-nums;
}

.dm-process-step-title {
  margin: 0;
  font-family: var(--font--heading-font);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color--lightest);
}

/* Bez svog max-width-a: meru vec drzi .dm-process-video-text (36rem), a jos
   jedno secenje ovde je opise lomilo u tri kratka reda uz praznu desnu
   polovinu kolone. */
.dm-process-step-text {
  margin: .375rem 0 0;
  font-family: var(--font--body-font);
  font-size: 1.125rem;
  line-height: 1.55;
  /* Ivory-secondary iz DESIGN.md §2. */
  color: #D9CBA3;
}

@media screen and (max-width: 767px) {
  .dm-process-step {
    grid-template-columns: 1.875rem minmax(0, 1fr);
    gap: var(--spacing--xs);
    padding-top: var(--spacing--s);
    margin-top: var(--spacing--s);
  }

  /* Numeral pada na velicinu naslova, pa preuzima i njegov line-height: isti
     font-size + isti line-height = ista osnovna linija, bez racunanja. Sa
     line-height: 1 iz desktop pravila broj bi sedeo ~4px iznad naslova. */
  .dm-process-step-num {
    font-size: 1.375rem;
    line-height: 1.35;
  }

}

/* ---------------------------------------------------------------------
   Tehnike single: razmak izmedju "Gde se primenjuje" i FAQ-a na telefonu.

   Pravilo iznad (~6620) gasi FAQ-u gornji padding na telefonu, racunajuci
   da ce donji padding prethodne sekcije sam odraditi razmak. Na ovim
   stranicama ta racunica ne vazi: .text-layout-seven svojih 4rem drzi
   UNUTAR zaobljene kutije sa slikom, pa se cita kao unutrasnjost kartice,
   a ne kao razmak. Rezultat je 0px izmedju ivice kutije i "[ Cesta
   pitanja ]".

   Vracamo standardnih 4rem (--spacing--xxxl-mobile), isti razmak koji svaka
   druga granica sekcija ima na telefonu. Selektor je vezan za susedstvo
   .text-layout-seven + .faq-layout-one -- .text-layout-seven postoji samo u
   single-tehnika.php, pa ovo ne dira FAQ na kontaktu ni na tehnikama.
   Specificnost 0,3,0 nadjacava pravilo koje postavlja padding-top: 0.
   --------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .text-layout-seven + .faq-layout-one .padding-vertical {
    padding-top: var(--spacing--xxxl-mobile);
  }
}

/* ---------------------------------------------------------------------
   Tehnike single: mera teksta u karticama "Gde se primenjuje".

   Dijagnoza: pasus je isao punom sirinom kartice (339px na 1512px), pa je
   svaki opis padao na prvu liniju od ~339px i drugu od 47-78px. Ostajala je
   jedna rec sama u dnu kartice, a peta kartica je stajala u jednom redu.
   Pet kartica se citalo kao pet razlicitih ritmova.

   Dva poteza:
   1. text-wrap: balance izjednacava duzine linija umesto da puni prvu do
      kraja. Radi svuda, i na telefonu, i ne dira pasuse koji ionako stanu
      u jedan red.
   2. max-width: 20rem daje svim karticama istu meru u mrezi. Merenjem:
      linije padaju na 156-217px umesto 47-339px, dakle nema vise patuljaste
      poslednje linije ni u jednoj kartici.

   Kap je vezan za 768px navise jer tu mreza ima 2 ili 3 kolone (kartica je
   344-444px siroka). Ispod 768px kolona je jedna i kartica ume da bude
   711px siroka, gde bi 20rem ostavio ruznu prazninu desno; tamo balance
   sam odradi posao.
   --------------------------------------------------------------------- */
.text-layout-seven-text-card p {
  text-wrap: balance;
}

@media screen and (min-width: 768px) {
  .text-layout-seven-text-card p {
    max-width: 20rem;
  }
}