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

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

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

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

.w-optimization {
  display: contents;
}

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

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

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

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

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

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

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

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

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

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

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

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

figure {
  margin: 0 0 10px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .w-col {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

.w-widget {
  position: relative;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@font-face {
  font-family: Orbitron;
  src: url("/assets/fonts/Orbitron-Medium.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  size-adjust: 80.1%;
  ascent-override: 118.7%;
  descent-override: 30.0%;
}

@font-face {
  font-family: Quicksand;
  src: url("/assets/fonts/Quicksand-Light.woff2") format("woff2");
  font-weight: 200 300;
  font-style: normal;
  font-display: swap;
  size-adjust: 95.6%;
  ascent-override: 99.4%;
  descent-override: 25.1%;
}

@font-face {
  font-family: Quicksand;
  src: url("/assets/fonts/Quicksand-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  size-adjust: 94.2%;
  ascent-override: 100.8%;
  descent-override: 25.5%;
}

@font-face {
  font-family: Quicksand;
  src: url("/assets/fonts/Quicksand-Medium.woff2") format("woff2");
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
  size-adjust: 93.0%;
  ascent-override: 102.1%;
  descent-override: 25.8%;
}

@font-face {
  font-family: Quicksand Label;
  src: url("/assets/fonts/Quicksand-Light.woff2") format("woff2");
  font-weight: 200 300;
  font-style: normal;
  font-display: swap;
  size-adjust: 109.3%;
  ascent-override: 85.7%;
  descent-override: 21.0%;
}

@font-face {
  font-family: Quicksand Label;
  src: url("/assets/fonts/Quicksand-Regular.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  size-adjust: 109.3%;
  ascent-override: 85.7%;
  descent-override: 21.0%;
}

:root {
  --color--dark-green: #040504;
  --color--white: #edf5f3;
  --padding--container: 1.25rem;
  --gap: 1.25rem;
  --on-t-nav-spacer: 5.375rem;
  --color--black: #040504;
  --text--h1: 4rem;
  --padding--xlarge: 5rem;
  --padding--med: 3rem;
  --gap--med\<deleted\|variable-196f1660-85b7-2eda-5ec8-e43ca0f5032d\>: 2rem;
  --color--lime-off: #21f1a8; /* ONE SITE GREEN: was #4cc299, now = --color--lime */
  --color--lime: #21f1a8;
  --color--green-off-white-1: #dde1d2;
  --color--lime-zero: #21f1a800;
  --text--btn-primary: 1rem;
  --text--btn-nav: 1.25rem;
  --text--btn-footer: 1.875rem;
  --color--green-off-white-2: #b4b8a5;
  --color--dark-green-tint-2: #535450;
  --color--grey-on-track: #b9bbad;
  --text--impact: 7.9375rem;
  --grid-spacer: 31.51vh;
  --color--dark-green-tint-1: #3b3c38;
  /* AB: the deep card surface. tint-1 was the only dark fill in the palette and
     it is a mid grey, which is what made the services deck read as murk rather
     than as cards. This is half its luminance (.023 against .047) so it lands
     as a deep surface, while still sitting ~1.37:1 above the dot-field behind
     the deck — measured across that whole scroll span at L .0014-.0059, i.e.
     effectively black. Going darker still was tried and is worse: at .005 the
     card falls level with the field and survives only on its rim. */
  --color--surface-deep: #2a2c28;
  --padding--small: 2rem;
  --color--grey-1: #ebeee0;
  --color--green-light: #ebeee0;
  --radius--small: 1rem;
  --vh: 1vh;
  --color--grey-2: #c8cbbd;
}

body {
  background-color: var(--color--dark-green);
  color: var(--color--white);
  font-family: Quicksand, Arial, sans-serif;
}

h1 {
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
}

h2 {
  font-variation-settings: "wght" 750, "wdth" 93;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
}

h3, h4, h5, h6 {
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
}

p {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.25;
}

a {
  text-decoration: none;
}

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

li {
  font-size: 1em;
  list-style-type: disc;
}

label {
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: .4rem;
  display: block;
}

blockquote {
  border-left: .3em solid #e2e2e2;
  margin-bottom: 1em;
  padding: 1em 2em 1em 1.7em;
  font-size: 1.2em;
  line-height: 1.6;
}

.c {
  width: 100%;
  padding-right: var(--padding--container);
  padding-left: var(--padding--container);
  max-width: var(--fluid-container);
  margin-left: auto;
  margin-right: auto;
}

.c.home-hero {
  justify-content: center;
  align-items: center;
  max-width: none;
  min-height: 100vh;
  display: flex;
  position: relative;
}

.c.is-marquee {
  min-height: calc(var(--vh, 1vh) * 100);
  justify-content: center;
  align-items: center;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  display: flex;
}

.c.is-horiz-scroll {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  position: sticky;
  top: 0;
}

.c.is-otot-home {
  max-width: none;
  position: relative;
}

.c.home-helmets {
  padding-bottom: var(--gap);
  padding-top: calc(var(--gap) * 2);
  position: relative;
}

.c.is-callout {
  justify-content: center;
  align-items: center;
  padding-top: 12rem;
  padding-bottom: 8.75rem;
  display: flex;
}

.c.is-footer {
  z-index: 5;
  padding-top: var(--gap);
  padding-bottom: var(--gap);
  position: relative;
}

.c.is-home-collabs {
  z-index: 5;
  position: relative;
}

.c.is-off-t-hero-scroll-media {
  padding-top: var(--gap);
  padding-bottom: var(--gap);
}

.rich-text p {
  margin-top: 0;
  margin-bottom: 1.4rem;
}

.rich-text h1 {
  margin-top: 0;
  margin-bottom: .4rem;
  font-family: Orbitron, Arial, sans-serif;
}

.rich-text h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-family: Orbitron, Arial, sans-serif;
}

.rich-text h3, .rich-text h4, .rich-text h5, .rich-text h6 {
  margin-top: 2em;
  margin-bottom: 1rem;
  font-family: Quicksand, Arial, sans-serif;
}

.rich-text a {
  font-weight: 600;
  text-decoration: underline;
}

.rich-text blockquote {
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 1rem 1.5rem;
}

.rich-text ul {
  padding-left: 2em;
}

.s.home-marquee {
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  position: absolute;
  inset: 0%;
}

.s.home-hero {
  z-index: 10;
  position: relative;
}

.s.is-horizontal-track {
  position: relative;
}

.s.is-otot-home {
  color: var(--color--dark-green);
}

.s.is-otot-end {
  z-index: 10;
  position: relative;
}

.s.home-helmets {
  z-index: 6;
  position: relative;
}

.s.is-callout-socials {
  z-index: 5;
  color: var(--color--black);
  position: relative;
}

.s.is-callout-socials:where(.w-variant-e346e922-20ab-515b-71b3-89708ab15e58) {
  color: var(--color--white);
  background-color: var(--color--black) !important;
}

.s.is-footer {
  z-index: 0;
  color: var(--color--dark-green);
  position: relative;
}

.s.is-home-collabs, .s.is-part-i-next {
  color: var(--color--dark-green);
  position: relative;
}

.page-w {
  width: 100%;
  position: relative;
  overflow: clip;
}

.h1 {
  font-size: var(--text--h1);
  line-height: 1.2;
}

.text-title-lg-mona {
  font-variation-settings: "wght" 750, "wdth" 93;
  letter-spacing: -.125rem;
  text-transform: uppercase;
  font-size: 4.5rem;
  line-height: .886;
}

.text-title-lg-mona.split-flex {
  justify-content: flex-start;
  align-items: flex-start;
}

.text-title-lg-mona.split-flex.is-center {
  justify-content: flex-start;
  align-items: center;
}

.text-cta-short-intro {
  letter-spacing: .040625rem;
  font-size: 2rem;
  line-height: 1.04;
}

.text-cta-short-intro.font-brier {
  letter-spacing: .05rem;
}

.grid-main {
  grid-column-gap: var(--gap);
  grid-template-rows: auto;
  grid-template-columns: 23.55% 23.55% 23.55% 23.55%;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}

.grid-main.is-overlay {
  height: 100%;
}

.css-breakpoints {
  width: 0;
  height: 0;
  display: none;
  position: fixed;
  inset: 0% 0% auto;
  overflow: hidden;
}

.text-eyebrow {
  font-variation-settings: "wght" 700, "wdth" 100;
  letter-spacing: 0;
  text-transform: uppercase;
  font-family: Quicksand Label, Arial, sans-serif;
  font-size: .625rem;
  font-weight: 400;
  line-height: 1;
}

.text-eyebrow.large {
  font-variation-settings: "wght" 812, "wdth" 81.3;
  letter-spacing: -.01rem;
  font-size: 1.125rem;
}

.text-eyebrow.auto-left {
  margin-left: auto;
}

.text-eyebrow.flex {
  grid-column-gap: calc(var(--gap) * .1);
  grid-row-gap: calc(var(--gap) * .1);
  flex: none;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-eyebrow.mob-only {
  display: none;
}

.text-eyebrow.dt-only {
  display: block;
}

.taxi-w.style-guide {
  background-color: var(--color--white);
  color: var(--color--black);
}

.taxi-w.on-track {
  background-color: var(--color--black);
  color: var(--color--white);
}

.taxi-w.off-track {
  background-color: var(--color--white);
  color: var(--color--dark-green);
}

.taxi-w.legal {
  background-color: var(--color--dark-green);
  color: var(--color--white);
}

.taxi-w.calendar {
  background-color: var(--color--black);
  color: var(--color--white);
}

.taxi-w.not-found {
  flex-flow: column;
  display: flex;
}

.css-editmode, .css-utils {
  width: 0;
  height: 0;
  display: none;
  position: fixed;
  inset: 0% 0% auto;
  overflow: hidden;
}

.utility__page--w {
  width: 100vw;
  max-height: 100%;
  max-width: var(--fluid-container);
  justify-content: center;
  align-items: center;
  height: 100svh;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.utility__content--w {
  width: 62.5rem;
  color: var(--color--lime);
  text-align: center;
  text-transform: uppercase;
  flex-flow: row;
  justify-content: space-between;
  display: flex;
  position: relative;
}

.utility__content--w.pass {
  width: auto;
}

.nav {
  z-index: 120;
  pointer-events: none;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0% 0% auto;
}

.scroll-indicator {
  z-index: 10;
  mix-blend-mode: difference;
  visibility: hidden;
  background-color: #fff0;
  border-radius: 1em;
  width: .4em;
  height: 80vh;
  position: fixed;
  inset: 10vh 0 0% auto;
}

.scroll-indicator-bar {
  border-radius: inherit;
  background-color: #ffffffbf;
  width: 100%;
  height: 30%;
  transition-property: height;
  transition-duration: .2s;
  transition-timing-function: ease;
  position: absolute;
  inset: 0% 0% auto;
}

.css-root, .css-lenis {
  width: 0;
  height: 0;
  display: none;
  position: fixed;
  inset: 0% 0% auto;
  overflow: hidden;
}

.css-split-type {
  width: 0;
  height: 0;
  display: none;
  position: fixed;
  inset: 0% 0% auto;
  overflow: hidden;
}

.font-brier {
  font-family: Orbitron, Arial, sans-serif;
}

.btn-layout {
  grid-column-gap: var(--gap);
  grid-row-gap: var(--gap);
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.btn-layout.is-nav {
  pointer-events: auto;
  perspective-origin: 100% 0;
  transform-origin: 100% 0;
  grid-column-gap: calc(var(--gap) * .5);
  grid-row-gap: calc(var(--gap) * .5);
}

.btn-w {
  border: 1px solid var(--color--lime);
  background-color: var(--color--lime);
  height: 3rem;
  color: var(--color--dark-green);
  border-radius: .54rem;
  flex: none;
  justify-content: center;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1rem;
  display: flex;
}

.btn-w.icon-only {
  aspect-ratio: 1;
  width: 3.75rem;
  height: 3.75rem;
}

.btn-w.is-nav {
  height: 3.75rem;
}

.btn-w.tertiary {
  background-color: var(--color--lime-zero);
  color: currentColor;
  border-color: currentColor;
  border-radius: .411875rem;
  height: 2.5rem;
}

.btn-w.is-touch-swipe {
  aspect-ratio: 1;
  width: 3.75rem;
  height: 3.75rem;
}

.btn-inner {
  grid-column-gap: calc(var(--gap) * .5);
  grid-row-gap: calc(var(--gap) * .5);
  justify-content: center;
  align-items: center;
  display: flex;
}

.btn-inner:where(.w-variant-3506eb9e-fb47-e850-4366-d611cf6abb90) {
  flex-flow: row-reverse;
}

.btn-text {
  font-family: Quicksand Label, Arial, sans-serif;
  font-size: var(--text--btn-primary);
  font-variation-settings: "wdth" 86;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1;
}

.btn-text.is-nav {
  font-size: var(--text--btn-nav);
}

.btn-text.is-footer {
  font-size: var(--text--btn-footer);
}

.btn-icon-w {
  aspect-ratio: 1;
  justify-content: center;
  align-items: center;
  width: 1.2rem;
  display: flex;
  position: relative;
}

.btn-icon-svg {
  height: .78125rem;
  display: flex;
}

.btn-icon-svg.is-large {
  height: 1.2rem;
}

.nav-ham {
  aspect-ratio: 1;
  width: 3.75rem;
  height: 3.75rem;
  color: var(--color--black);
  border-radius: .74rem;
  justify-content: center;
  align-items: center;
  display: flex;
}

.nav-brand {
  width: 8.05rem;
  height: 3.75rem;
}

.nav-middle {
  pointer-events: auto;
  grid-column-gap: var(--gap);
  grid-row-gap: var(--gap);
  justify-content: center;
  align-items: center;
  display: flex;
}

.nav-inner {
  z-index: 50;
  width: 100%;
  padding-left: var(--gap);
  padding-right: var(--gap);
  padding-top: var(--gap);
  padding-bottom: var(--gap);
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: relative;
  inset: 0% 0% auto;
}

.nav-brand-link {
  pointer-events: auto;
  transform-origin: 0 0;
  mix-blend-mode: normal;
}

.nav-brand-link.w--current {
  perspective-origin: 0 0;
  transform-origin: 0 0;
}

.eyebrow-w {
  grid-column-gap: calc(var(--gap) * .5);
  grid-row-gap: calc(var(--gap) * .5);
  display: flex;
  overflow: clip;
}

.eyebrow-w.c-green-off-white-2 {
  color: var(--color--green-off-white-2);
}

.eyebrow-w.hero-next-race {
  text-align: center;
  justify-content: center;
  align-items: flex-start;
  max-width: 80%;
}

.eyebrow-w.c-grey-on-track {
  color: var(--color--grey-on-track);
}

.eyebrow-w.c-grey-on-track.calendar-track-eb {
  grid-column-gap: calc(var(--gap) * .25);
  grid-row-gap: calc(var(--gap) * .25);
}

.text-body-reg-mona {
  font-variation-settings: "wght" 500, "wdth" 100;
  letter-spacing: -.0125rem;
  text-transform: none;
  font-size: 1.25rem;
  line-height: 1.25;
}

.text-body-reg-mona.c-grey-on-track {
  color: var(--color--grey-on-track);
}

.text-impact-lg-mona {
  font-size: var(--text--impact);
  font-variation-settings: "wght" 660, "wdth" 93;
  letter-spacing: -.0625rem;
  text-transform: uppercase;
  line-height: 90.6%;
}

.text-impact-lg-mona.reduce {
  font-variation-settings: "wght" 750, "wdth" 93;
  letter-spacing: -.25rem;
  font-size: 7rem;
  line-height: .816;
}

.text-impact-lg-brier.c-grey-on-track {
  color: var(--color--grey-on-track);
}

.base-helmet-rive {
  aspect-ratio: 6.0625 / 3.1875;
  width: 6.0625rem;
  height: 3.1875rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.impact-icon-w.is-off-t {
  z-index: 30;
  justify-content: center;
  align-items: center;
  margin-top: 3rem;
}

.impact-content-w {
  max-width: 80rem;
  color: var(--color--green-off-white-1);
  text-align: center;
  grid-column-gap: calc(3 * var(--gap));
  grid-row-gap: calc(3 * var(--gap));
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding-top: 6rem;
  padding-bottom: 12rem;
  display: flex;
}

.impact-content-w.on-track {
  max-width: 78rem;
  padding-top: 18rem;
  padding-bottom: 0;
}

.impact-content-w.off-track {
  max-width: 78rem;
  padding-top: 17rem;
}

.impact-content-w.is-home {
  max-width: 80.1rem;
}

.marquee-adv-scroll {
  will-change: transform;
  width: 100%;
  display: flex;
  position: relative;
}

.marquee-adv-item {
  flex: none;
  justify-content: flex-start;
  align-items: center;
  font-size: max(4em, 8vw);
  display: flex;
}

.marquee-adv-collection {
  will-change: transform;
  flex: none;
  display: flex;
  position: relative;
}

.marquee-adv-row {
  z-index: 5;
  width: 100vw;
  position: relative;
}

.marqee-adv-layout {
  width: 100%;
  height: 15rem;
  position: relative;
}

.page-ln4-pos {
  z-index: 1;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}

.marquee-gl-target-w {
  z-index: 10;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  width: 100vw;
  display: flex;
  position: absolute;
  inset: 0%;
}

.marquee-gl-target {
  outline-color: var(--color--lime);
  outline-offset: -2px;
  outline-width: 1px;
  outline-style: none;
  justify-content: center;
  align-items: center;
  width: 35.375rem;
  height: 22.875rem;
  display: flex;
}

.sticky-track.home-hero {
  height: 200vh;
  position: relative;
}

.sticky-track.is-home-otot {
  position: relative;
}

.sticky-item {
  position: sticky;
  top: 0;
}

.sticky-item.home-hero {
  position: sticky;
}

.gl-canvas {
  z-index: 10;
  transform-origin: 50%;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  position: absolute;
  inset: 0%;
}

.css-nav {
  width: 0;
  height: 0;
  display: none;
  position: fixed;
  inset: 0% 0% auto;
  overflow: hidden;
}

.hero-nav-theme {
  position: absolute;
  inset: 0% auto auto 0%;
}

.hero-nav-theme.is-1 {
  height: 10vh;
}

.hero-nav-theme.is-2 {
  height: 90vh;
  top: 10vh;
}

.marquee-adv-top-w {
  justify-content: center;
  align-items: flex-start;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: absolute;
  inset: -15rem 0% auto;
}

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

.image.is-horizontal-scroll {
  pointer-events: none;
  transform-origin: 0%;
  object-fit: cover;
  flex: none;
  width: calc(100% + 4rem);
  max-width: none;
  height: calc(100% + 4rem);
  max-height: none;
}

.image.is-otot-home-end {
  height: calc(var(--vh, 1vh) * 120);
  position: absolute;
}

.image.is-collab-placeholder {
  object-fit: contain;
}

.image.is-home-marquee-sig-img:where(.w-variant-88b83061-c887-c094-eb94-cbb8cabca5e0) {
  display: none;
}

.image.is-visor-scroll {
  clip-path: ellipse(120% 120% at 50% 0);
}

.image.is-camp {
  width: 120%;
  max-width: none;
  height: 120%;
}

.image.is-part-i-video {
  position: absolute;
  inset: 0%;
}

.image.is-trophy {
  object-fit: contain;
  height: 90%;
}

.image.is-social-card {
  z-index: 10;
  position: absolute;
  inset: 0%;
}

.image.is-ln4-logo {
  width: 2.125rem;
  height: 2.125rem;
  display: none;
}

.image.is-ln4-logo:where(.w-variant-88b83061-c887-c094-eb94-cbb8cabca5e0) {
  display: inline-block;
}

.image.is-collab-force {
  aspect-ratio: 407 / 411;
}

.image.is-clip-fix {
  width: 102%;
  max-width: 102%;
  height: 102%;
  margin-top: -1%;
  margin-left: -1%;
}

.marquee-signature-w {
  outline-color: var(--color--lime);
  outline-offset: -2px;
  outline-width: 1px;
  outline-style: none;
  width: 4.95rem;
  height: 2.28438rem;
}

.marquee-adv-top-layout {
  grid-column-gap: var(--gap);
  grid-row-gap: var(--gap);
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.top-marker {
  pointer-events: none;
  height: 10vh;
  position: absolute;
  inset: 0% auto auto 0%;
}

.css-main {
  display: none;
  position: fixed;
  inset: 0% 0% auto;
}

.horizontal-track {
  padding-right: var(--gap);
  height: calc(var(--vh, 1vh) * 100);
  padding-left: 75vw;
  padding-top: calc(var(--vh, 1vh) * 7);
  padding-bottom: calc(var(--gap) * 2);
  flex: none;
  display: flex;
}

.horizontal-grid-col.center {
  justify-content: center;
  align-items: flex-start;
}

.horizontal-item-w {
  position: relative;
}

.horizontal-item-w.is-2 {
  margin-top: auto;
  margin-bottom: calc(var(--vh, 1vh) * 8.42);
  left: calc(var(--vh, 1vh) * 14.42);
}

.horizontal-item-w.is--3 {
  margin-top: auto;
}

.horizontal-item-w.is-text-callout {
  max-width: 17.375rem;
}

.horizontal-item-w.is-text-callout.callout-2 {
  max-width: 30rem;
  margin-top: auto;
  margin-bottom: calc(var(--vh, 1vh) * 2.67);
}

.horizontal-item-w.is-text-callout.callout-1 {
  margin-top: calc(var(--vh, 1vh) * 1.67);
}

.horizontal-item-w.is-text-callout.is-home-callout-2 {
  max-width: 30rem;
  margin-top: auto;
  margin-bottom: calc(var(--vh, 1vh) * 2.67);
}

.horizontal-item-w.is-4 {
  left: calc(var(--grid-spacer) * -.5);
}

.horizontal-item-w.is-5 {
  margin-top: auto;
  margin-left: 0;
  margin-bottom: calc(var(--vh, 1vh) * 8.17);
}

.horizontal-item-w.is-6 {
  margin-top: auto;
  margin-bottom: calc(var(--vh, 1vh) * 1.17);
}

.horizontal-item-w.is-7 {
  margin-bottom: auto;
  margin-top: calc(var(--vh, 1vh) * 8);
}

.horizontal-item-w.is-8 {
  margin-top: calc(var(--vh, 1vh) * 2);
}

.horizontal-item-w.is-9 {
  left: calc(var(--grid-spacer) * -.5);
  margin-top: auto;
  margin-bottom: calc(var(--gap) * 2);
}

.horizontal-item-w.is-10 {
  margin-left: 0;
  margin-top: calc(var(--vh, 1vh) * 14.92);
}

.horizontal-item-w.is-title-mid {
  margin-top: auto;
  margin-bottom: calc(var(--vh, 1vh) * 50.5);
}

.horizontal-item-w.is-title-top {
  margin-top: calc(var(--vh, 1vh) * 1.67);
}

.horizontal-item-w.is-h-large {
  margin-top: auto;
}

.horizontal-item-w.is-h-large.top {
  margin-top: 0;
  margin-bottom: auto;
}

.horizontal-item-w.is-h8 {
  margin-top: auto;
  margin-bottom: calc(var(--vh, 1vh) * 8.42);
  left: calc(var(--vh, 1vh) * 14.42);
}

.horizontal-item-w.is-home9 {
  left: calc(var(--grid-spacer) * -.5);
  margin-top: auto;
  margin-bottom: calc(var(--gap) * 2);
}

.horizontal-item-w.is-home3 {
  margin-top: auto;
}

.horizontal-item-w.is-home4 {
  left: calc(var(--grid-spacer) * -.5);
}

.horizontal-item-w.is-home6 {
  margin-top: auto;
  margin-bottom: calc(var(--vh, 1vh) * 1.17);
}

.horizontal-item-w.is-home8 {
  margin-top: calc(var(--vh, 1vh) * 2);
}

.horizontal-item-w.is-home10 {
  margin-left: 0;
  margin-top: calc(var(--vh, 1vh) * 14.92);
}

.horizontal-item-w.is-on-t-5 {
  margin-top: auto;
  margin-left: 0;
  margin-bottom: calc(var(--vh, 1vh) * 8.17);
}

.horizontal-item-w.is-on-t-4 {
  left: calc(var(--grid-spacer) * -.5);
}

.horizontal-item-w.is-offt3, .horizontal-item-w.is-offt4 {
  margin-top: auto;
  margin-bottom: calc(var(--vh, 1vh) * 8.42);
  left: calc(var(--vh, 1vh) * 14.42);
}

.horizontal-item-w.is-offt7 {
  left: calc(var(--grid-spacer) * -.5);
  margin-top: auto;
  margin-bottom: calc(var(--gap) * 2);
}

.horizontal-item-w.is-offt8, .horizontal-item-w.is-part-i-2 {
  margin-top: auto;
  margin-bottom: calc(var(--vh, 1vh) * 8.42);
  left: calc(var(--vh, 1vh) * 14.42);
}

.horizontal-item-w.is-part-i-3 {
  margin-top: calc(var(--vh, 1vh) * 2);
}

.horizontal-item-w.is-part-i-4 {
  left: calc(var(--grid-spacer) * -.5);
}

.horizontal-item-w.is-part-i-5, .horizontal-item-w.is-part-i-6 {
  margin-top: auto;
  margin-bottom: calc(var(--vh, 1vh) * 1.17);
}

.horizontal-item-w.is-part-i-7 {
  margin-bottom: auto;
  margin-top: calc(var(--vh, 1vh) * 8);
}

.horizontal-item-w.is-part-i-8 {
  margin-top: auto;
}

.horizontal-item-w.is-part-i-9 {
  left: calc(var(--grid-spacer) * -.5);
  margin-top: auto;
  margin-bottom: calc(var(--gap) * 2);
}

.horizontal-item-w.is-part-i-10 {
  margin-left: 0;
  margin-top: calc(var(--vh, 1vh) * 14.92);
}

.horizontal-item-w.is-home-2 {
  margin-top: auto;
  margin-bottom: calc(var(--vh, 1vh) * 8.42);
  left: calc(var(--vh, 1vh) * 14.42);
}

.horizontal-item-w.is-home-4 {
  left: calc(var(--grid-spacer) * -.5);
}

.horizontal-item-w.is-home-6 {
  margin-top: auto;
  margin-bottom: calc(var(--vh, 1vh) * 1.17);
}

.horizontal-item-w.is-home-7 {
  margin-bottom: auto;
  margin-top: calc(var(--vh, 1vh) * 8);
}

.horizontal-item-w.is-home-8 {
  margin-top: calc(var(--vh, 1vh) * 2);
}

.horizontal-item-w.is-on-t-2 {
  margin-top: auto;
  margin-bottom: calc(var(--vh, 1vh) * 8.42);
  left: calc(var(--vh, 1vh) * 14.42);
}

.horizontal-item-layout {
  grid-column-gap: var(--gap);
  grid-row-gap: var(--gap);
  flex-flow: column;
  display: flex;
}

.horizontal-item-img-w {
  justify-content: flex-end;
  align-items: center;
  display: flex;
  overflow: clip;
}

.horizontal-item-img-w.is-1 {
  width: calc(var(--vh, 1vh) * 27);
  height: calc(var(--vh, 1vh) * 33.46);
}

.horizontal-item-img-w.is-2 {
  width: calc(var(--vh, 1vh) * 29.3);
  height: calc(var(--vh, 1vh) * 29.3);
}

.horizontal-grid-spacer.half {
  width: calc(var(--grid-spacer) * .5);
}

.horizontal-item-text {
  color: var(--color--green-off-white-2);
  letter-spacing: .05rem;
  font-family: Quicksand, Arial, sans-serif;
  font-size: 1.5rem;
  line-height: 94.6%;
}

.horizontal-item-text.c-dark-green-tint-1, .horizontal-item-text.c-dark-green-tint-2 {
  color: var(--color--dark-green-tint-2);
}

.horizontal-item-pill-w.c-grey-on-track {
  color: var(--color--grey-on-track);
}

.horizontal-item-pill.on-track {
  border-top-color: inherit;
  border-right-color: inherit;
  border-bottom-color: inherit;
  border-left-color: inherit;
}

.horizontal-pill-text.on-track {
  color: var(--color--grey-on-track);
}

.horizontal-pin-sticky {
  display: flex;
  position: sticky;
  top: 0;
}

.horizontal-pin-spacer {
  position: relative;
}

.otot-home-inner {
  z-index: 10;
  min-height: calc(var(--vh, 1vh) * 100);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.otot-home-bg {
  z-index: 0;
  position: absolute;
  inset: 0%;
}

.otot-home-img-w {
  max-width: 27.625rem;
  height: calc(var(--vh, 1vh) * 82.67);
  width: calc(var(--vh, 1vh) * 34.75);
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: absolute;
  inset: auto auto 0% 0%;
}

.otot-home-img-w.is-1 {
  aspect-ratio: 834 / 1984;
  width: auto;
  max-width: none;
  height: calc(var(--vh, 1vh) * 90.67);
  justify-content: flex-end;
  align-items: flex-start;
}

.otot-home-img-w.is-2 {
  aspect-ratio: 898 / 1984;
  width: auto;
  max-width: none;
  height: calc(var(--vh, 1vh) * 90.67);
  inset: auto 0% 0% auto;
}

.otot-home-img {
  object-fit: cover;
  width: 100%;
  max-width: none;
  height: 100%;
}

.otot-home-layout {
  grid-column-gap: calc(var(--gap) * 3);
  grid-row-gap: calc(var(--gap) * 3);
  display: flex;
}

.otot-home-text-col {
  grid-column-gap: calc(var(--gap) * 1);
  grid-row-gap: calc(var(--gap) * 1);
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
}

.otot-home-text-col.is-1 {
  text-align: right;
  justify-content: flex-start;
  align-items: flex-end;
}

.otot-home-text-col.is-2 {
  text-align: left;
  justify-content: flex-start;
  align-items: flex-start;
}

.otot-home-p-w {
  width: 21rem;
  margin-top: var(--gap);
  flex-flow: column;
  display: flex;
}

.otot-home-p-w.is-2 {
  justify-content: flex-start;
  align-items: flex-start;
}

.otot-home-p-w.is-1 {
  justify-content: flex-start;
  align-items: flex-end;
}

.span-font-brier {
  font-family: Orbitron, Arial, sans-serif;
}

.span-font-brier.otot {
  line-height: 81%;
}

.otot-home-end-img-w {
  min-height: calc(var(--vh, 1vh) * 100);
  justify-content: center;
  align-items: flex-start;
  display: flex;
  position: relative;
  overflow: clip;
}

.helmet-grid-frame {
  aspect-ratio: 406.89 / 411;
  width: 100%;
  display: flex;
}

.helmet-grid-frame.is-overlay {
  z-index: 10;
  opacity: 0;
  position: absolute;
  inset: 0%;
}

.helmet-grid-frame.is-base {
  color: var(--color--dark-green-tint-2);
}

.helmet-grid-item {
  aspect-ratio: 406.89 / 411;
  width: 100%;
  display: flex;
  position: relative;
}

.helmet-grid {
  grid-column-gap: var(--gap);
  grid-row-gap: var(--gap);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.helmet-grid-frame-w {
  z-index: 10;
  pointer-events: none;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.helmet-grid-frame-w.mobile {
  display: none;
}

.helmet-grid-item-img-w {
  z-index: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}

.helmet-grid-item-img-helmet {
  width: 100%;
  height: 100%;
  position: relative;
  inset: 0% auto auto 0%;
}

.helmet-grid-item-reveal-img {
  clip-path: ellipse(100% 0% at 50% 0);
  background-image: url("/assets/img/site/transp.webp");
  background-position: 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
  transform: scale(1.05);
}

.title-headline-w {
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.title-headline-w.flex {
  flex-flow: column;
}

.title-para-w.c-grey-on-track {
  color: var(--color--grey-on-track);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.title-para-w.mw {
  max-width: 25rem;
  display: flex;
}

.title-para-w.mw.flex-1 {
  grid-column-gap: calc(var(--gap) * 1);
  grid-row-gap: calc(var(--gap) * 1);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.spacer._8-75rem {
  height: 8.75rem;
}

.spacer._8rem {
  height: 8rem;
}

.spacer._14rem {
  height: 14rem;
}

.spacer._20rem {
  height: 20rem;
}

.spacer._2rem {
  height: 2rem;
}

.spacer.on-t-hero {
  flex: 1 1 0;
  min-height: 4rem;
  max-height: 8rem;
}

.spacer._10rem {
  height: 10rem;
}

.spacer._5rem {
  height: 5rem;
}

.spacer.calendar-item {
  width: 9rem;
}

.spacer.is-partnerships-hero {
  height: 12rem;
  min-height: 8rem;
}

.spacer._12rem {
  height: 12rem;
}

.spacer._4rem {
  height: 4rem;
}

.spacer._6rem {
  height: 6rem;
}

.spacer.is-calendar-hero {
  height: 12rem;
  min-height: 8rem;
}

.spacer.off-t-hero {
  flex: 1 1 0;
  min-height: 4rem;
  max-height: 8rem;
}

.spacer.is-subpage-hero {
  height: 12rem;
  min-height: 8rem;
}

.helmet-grid-item-text-w {
  z-index: 5;
  justify-content: flex-end;
  align-items: center;
  width: auto;
  max-width: none;
  height: 2rem;
  display: flex;
  position: absolute;
  inset: auto 0% 0% auto;
}

.helmet-grid-item-w {
  position: relative;
}

.text-title-small-label {
  text-transform: none;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.25;
}

.text-title-small-label.text {
  font-size: .9rem;
}

.text-title-small-label.date {
  color: var(--color--lime);
  font-size: .9rem;
  font-weight: 700;
}

.text-title-small-label.date.c-lime-off {
  color: var(--color--lime-off);
}

.text-title-small-label.bold {
  font-weight: 800;
}

.helmet-grid-item-date-w {
  justify-content: flex-end;
  align-items: center;
  margin-left: .8rem;
  display: flex;
}

.s-group.bg-black {
  background-color: var(--color--black);
}

.callout-icon {
  width: 5.625rem;
  color: var(--color--lime);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.callout-icon.icon-ball {
  width: 3.5rem;
  height: 3.5rem;
}

/* == AB: logo construction diagram (logo-build.js) == */
/* Bigger than the icon it replaced — a 3.5rem box cannot carry a scaffold, and
   at 7rem every guide still reads at a glance. The lime leads the eye through
   the construction and then retires; the mark it resolves into is ink, so the
   accent is the transient and the brand is what stays. Both are drawn in user
   units rather than with non-scaling-stroke, which would fight the
   pathLength="1" dash normalisation the whole timeline is built on. */
.callout-icon.is-logo-build {
  width: 7rem;
  height: 7rem;
}

.callout-icon.is-logo-build svg {
  width: 100%;
  height: 100%;
  display: block;
}

.callout-icon.is-logo-build [data-lb-grid] path {
  fill: none;
  stroke: var(--color--lime);
  stroke-width: 1.6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.callout-icon.is-logo-build [data-lb-mark] {
  fill: var(--color--dark-green);
  fill-opacity: 0;
  stroke: var(--color--dark-green);
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

@media screen and (max-width: 767px) {
  .callout-icon.is-logo-build {
    width: 5.5rem;
    height: 5.5rem;
  }
}

.callout-icon.off-t-hero {
  width: 2.3125rem;
  height: 2.3125rem;
}

.callout-layout {
  grid-column-gap: calc(var(--gap) * 2);
  grid-row-gap: calc(var(--gap) * 2);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.callout-text-w {
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 32.5rem;
}

.btn-inner-text-w {
  overflow: clip;
}

.callout-socials-inner {
  justify-content: center;
  align-items: center;
  display: flex;
}

.callout-socials-layout {
  text-align: center;
  grid-column-gap: calc(var(--gap) * 2);
  grid-row-gap: calc(var(--gap) * 2);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
}

.callout-socials-card-layout {
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 80rem;
  height: 36rem;
  display: flex;
  position: relative;
}

.callout-socials-card-w {
  z-index: 0;
  backface-visibility: hidden;
  will-change: transform;
  border-radius: 3.31625rem;
  flex: none;
  width: 20rem;
  height: 35rem;
  position: absolute;
  overflow: clip;
}

.callout-socials-links-layout {
  grid-column-gap: calc(var(--gap) * 1.5);
  grid-row-gap: calc(var(--gap) * 1.5);
  display: flex;
}

.text-link-w.c-lime {
  color: var(--color--lime);
}

.text-link-w.c-lime.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.footer-bg-gradient {
  background-image: radial-gradient(circle farthest-corner at 50% -190%, var(--color--lime-zero) 68%, var(--color--lime) 83%);
  pointer-events: none;
  transform-origin: 50% 100%;
  height: 100%;
  position: absolute;
  inset: auto 0% 0%;
  overflow: clip;
}

.footer-layout-w {
  position: relative;
}

.footer-layout-clip {
  aspect-ratio: 1688 / 896;
  background-color: var(--color--dark-green);
  width: 100%;
  color: var(--color--white);
  position: relative;
}

.text-impact-reg-mona {
  font-variation-settings: "wght" 750, "wdth" 93;
  letter-spacing: -.25rem;
  text-transform: uppercase;
  font-size: 7rem;
  line-height: .816;
}

.text-impact-reg-mona.line-increase {
  line-height: .85;
}

.text-impact-reg-brier {
  letter-spacing: -.21875rem;
  text-transform: uppercase;
  font-family: Orbitron, Arial, sans-serif;
  font-size: 7.3125rem;
  font-weight: 700;
  line-height: .81;
}

.text-impact-reg-brier.c-lime-off {
  color: var(--color--lime-off);
}

.text-title-lg-brier {
  font-family: Orbitron, Arial, sans-serif;
  font-size: 4.6875rem;
  font-weight: 700;
  line-height: .886;
}

.text-title-lg-brier.c-lime-off {
  color: var(--color--lime-off);
}

.text-title-lg-brier.c-grey-on-track {
  color: var(--color--grey-on-track);
}

.text-title-reg-mona {
  letter-spacing: -.125rem;
  font-size: 2.625rem;
  line-height: .886;
}

.text-title-reg-brier {
  letter-spacing: -.125rem;
  font-family: Orbitron, Arial, sans-serif;
  font-size: 2.75rem;
  font-weight: 700;
  line-height: .886;
}

.text-title-reg-brier.c-lime-off {
  color: var(--color--lime-off);
}

.text-impact-sm-mona {
  font-variation-settings: "wght" 660, "wdth" 93;
  letter-spacing: -.0625px;
  text-transform: uppercase;
  font-size: 5.25rem;
  line-height: .856;
}

.text-impact-sm-brier {
  letter-spacing: -.125rem;
  text-transform: uppercase;
  font-family: Orbitron, Arial, sans-serif;
  font-size: 5.4375rem;
  font-weight: 700;
  line-height: .856;
}

.text-impact-sm-brier.c-lime-off {
  color: var(--color--lime-off);
}

.text-body-lg-brier.c-lime {
  color: var(--color--lime);
}

.footer-marquee-logo-w {
  color: var(--color--lime);
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.footer-marquee-svg {
  width: auto;
  height: 4.5rem;
  object-fit: contain;
  display: flex;
}

.footer-marquee {
  z-index: -1;
  grid-column-gap: calc(var(--gap) * 1.2);
  grid-row-gap: calc(var(--gap) * 1.2);
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  height: 4.5rem;
  display: flex;
  position: absolute;
  inset: auto 0% 3.75rem;
  overflow: clip;
}

.footer-marquee-item {
  grid-column-gap: calc(var(--gap) * 1.2);
  grid-row-gap: calc(var(--gap) * 1.2);
  flex-flow: row;
  flex: none;
  display: flex;
  position: relative;
}

.gl-wrap {
  z-index: -1;
  position: fixed;
  inset: 0%;
}

.gl-wrap.on-track {
  z-index: 5;
  pointer-events: none;
}

.gl-wrap.not-found {
  z-index: 20;
}

.gl-background {
  z-index: -1;
  width: 100vw;
  height: 100vh;
  position: fixed;
  inset: 0%;
}

.callout-socials-intro-w {
  margin-top: calc(var(--gap) * 3);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
}

.home-collab-marquee-svg {
  width: 100%;
  height: 5.125rem;
  display: flex;
}

.home-collab-marquee-svg.edit {
  flex: none;
  height: 3.4375rem;
}

.footer-bg-helmet-w {
  z-index: 5;
  pointer-events: none;
  justify-content: center;
  align-items: flex-end;
  display: flex;
  position: absolute;
  inset: auto 0% 0%;
}

.footer-bg-img {
  flex: none;
  width: 48.75rem;
  height: 39.875rem;
  position: relative;
  bottom: -3rem;
}

.footer-bg-helmet-layout {
  justify-content: center;
  align-items: flex-end;
  display: flex;
  position: relative;
}

.footer-bg-bottom-btn-w {
  pointer-events: auto;
  position: absolute;
  bottom: 1.75rem;
}

.footer-links-w {
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  margin-bottom: 14rem;
  padding-left: 12.8rem;
  padding-right: 12.8rem;
  display: flex;
  position: relative;
}

.footer-inner-layout {
  flex-flow: column;
  height: 100%;
  display: flex;
}

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

.footer-links-layout {
  grid-column-gap: calc(var(--gap) * .2);
  grid-row-gap: calc(var(--gap) * .2);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 1rem;
  margin-bottom: 2rem;
  display: flex;
}

/* The statement is a full-bleed absolute overlay — inset pins it to both edges,
   so its box spans the whole footer width even though the words are centred in
   48rem. Without pointer-events it swallows every hover in the band it covers,
   and the footer link columns sit right under that band: measured at 1440px,
   Home, Projects, Services, LinkedIn, Instagram and Dribbble all hit-tested to
   .footer-statement-w instead of their own anchor. Nothing inside here is
   interactive — the heading and the signature Rive are both scroll-driven — so
   it opts out of the pointer entirely, exactly as .footer-bg-helmet-w above
   already does for the same reason. */
.footer-statement-w {
  text-align: center;
  justify-content: center;
  align-items: flex-start;
  pointer-events: none;
  display: flex;
  position: absolute;
  inset: 12rem 0% auto;
}

.footer-statement-layout {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 48rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.footer-rive-w {
  z-index: 5;
  width: 13.0625rem;
  height: 8.5rem;
  position: absolute;
  top: -6.8rem;
}

.footer-bg-pattern-w {
  z-index: -1;
  opacity: .12;
  position: absolute;
  inset: 0%;
}

.hero-eyebrow-tracker {
  pointer-events: none;
  width: 1px;
  height: 30vh;
  position: absolute;
  inset: auto auto 0 0%;
}

.hero-rive-tracker {
  pointer-events: none;
  width: 10px;
  height: 100vh;
  position: absolute;
  inset: auto auto 0 0%;
}

.marquee-gl-rive-target {
  z-index: 5;
  aspect-ratio: 70 / 50;
  pointer-events: auto;
  flex: none;
  width: 70rem;
  max-width: 800px;
  position: relative;
}

.marquee-gl-rive-w {
  width: 100%;
  height: 100%;
}

.base-helmet-rive-w, .callout-rive-w, .callout-socials-rive-w {
  position: relative;
}

.home-hero-next-race-w {
  left: var(--gap);
  top: auto;
  right: auto;
  bottom: var(--gap);
  z-index: 10;
  width: 7.4375rem;
  height: 15.25rem;
  color: var(--color--dark-green-tint-2);
  clip-path: ellipse(100% 120% at 50% 0);
  position: absolute;
}

.home-hero-next-race-w.hidden {
  clip-path: ellipse(100% 0% at 50% 0);
}

.home-hero-next-race-row.is-1 {
  grid-column-gap: calc(var(--gap) * .5);
  grid-row-gap: calc(var(--gap) * .5);
  justify-content: flex-start;
  align-items: center;
}

.footer-legal-links-w {
  justify-content: space-between;
  display: flex;
  position: absolute;
  inset: auto 0% 0%;
}

.footer-legal-links-col {
  grid-column-gap: var(--gap);
  grid-row-gap: var(--gap);
  display: flex;
}

/* ── Footer link interaction ──────────────────────────────────────────────
   One system for every footer link, declared once at the component root
   rather than per link.

   engine.js already supplies the MOTION: data-anim="text-hover" splits the
   label and rolls the characters inside .text-clip-w. What it never supplied
   was a COLOUR — measured on hover, every descendant stayed rgb(237,245,243).
   So a hovered footer link moved but never confirmed itself, while the header
   answers a hover with the site green (.nav-menu-link-w:hover). The footer now
   answers the same way: same token, same intent, its own timing, because
   footer type is 12-14px and the header's 600ms fade reads as lag at that size.

   The engine clones the label into a sibling <div> to roll it, so the colour
   is set on the anchor and inherited — a selector list naming today's children
   would miss tomorrow's clone. Descendants opt into the transition via `*`;
   nothing inside a footer link declares a transition of its own, and GSAP
   drives the roll with inline transforms, which CSS transitions never touch.

   #21f1a8 on the footer's #040504 panel measures 13.8:1. The colour is a
   confirmation, never the only signal — motion, :focus-visible and
   aria-current all still work with colour removed. */
.s.is-footer .text-link-w,
.s.is-footer .text-link-w *,
.s.is-footer .ftr-legal-link,
.s.is-footer .ftr-legal-link::after {
  transition-property: color, opacity, transform;
  transition-duration: .35s;
  transition-timing-function: cubic-bezier(.215, .61, .355, 1);
}

.s.is-footer .text-link-w:hover,
.s.is-footer .text-link-w:focus-visible {
  color: var(--color--lime);
}

/* "Email me" is already painted the accent, so green-on-green would be no
   feedback at all. It inverts to the page's own off-white instead — the same
   two colours, swapped, which reads as the same system rather than an
   exception to it. */
.s.is-footer .text-link-w.c-lime:hover,
.s.is-footer .text-link-w.c-lime:focus-visible {
  color: var(--color--white);
}

/* ── Legal row ────────────────────────────────────────────────────────────
   Impressum and Datenschutz are statutory links, not navigation, so they sit
   in the bottom utility row opposite the copyright rather than among the
   primary links, and they rank below those links by type size, by ink weight
   and by a simpler hover — a hairline that draws in from the left instead of
   the character roll.

   THE INK IS NOT THE ONE YOU WOULD EXPECT, and the reason is measured. This
   row does not sit on the black panel; .footer-bg-gradient paints the site
   green underneath it, and sampling the rendered pixels behind the row returns
   rgb(33,241,168) at 1440, 991 and 390 alike. That is why the copyright beside
   them is near-black and not white. Two consequences:

     - the secondary label grey first used here measured 1.37:1 on that green
       and was effectively invisible;
     - a green hover would be green on green — the request was for the site
       green, and on this backdrop the site green is the BACKGROUND.

   So the accent is expressed the way the site always expresses it on a lime
   ground — as the dark ink lime is paired with everywhere else, e.g. every
   [data-theme="lime"] button. At rest the links carry that ink at .72, which
   measures 6.3:1: clearly quieter than the copyright's 13.8:1, never marginal.
   Hover restores it to full strength and draws the hairline. Same mechanism as
   the primary links (colour shift + motion), same palette, correct for the
   surface it is actually on. */
.footer-legal-links-w {
  align-items: baseline;
}

.footer-legal-links-col.is-legal {
  grid-column-gap: calc(var(--gap) * .75);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* --fluid-font resolves .75rem to 10px at 1440 and 7px at 390. Seven pixels is
   below any usable floor, and this is the one row a visitor may be legally
   entitled to read, so the whole row takes a floor. Rank is carried by ink,
   not by size — the primary links are 1.875rem, far larger either way. */
.footer-legal-links-w .text-title-small-label,
.s.is-footer .ftr-legal-link {
  font-size: max(.75rem, 12px);
}

.s.is-footer .ftr-legal-link {
  color: var(--color--dark-green);
  opacity: .72;
  text-decoration: none;
  position: relative;
}

.s.is-footer .ftr-legal-link::after {
  content: "";
  transform-origin: 0 50%;
  background-color: currentColor;
  height: 1px;
  position: absolute;
  inset: auto 0 -.25rem 0;
  transform: scaleX(0);
}

.s.is-footer .ftr-legal-link:hover,
.s.is-footer .ftr-legal-link:focus-visible {
  opacity: 1;
}

.s.is-footer .ftr-legal-link:hover::after,
.s.is-footer .ftr-legal-link:focus-visible::after {
  transform: scaleX(1);
}

/* The page you are on holds full ink permanently — but NOT the rule. Drawing
   the rule here too was measured as a dead control: on /impressum the current
   link was already in its hover state, so hovering it changed nothing at all.
   Ink carries "current", the rule carries "hovered", and the two states stay
   legible next to each other while every link keeps feedback. */
.s.is-footer .ftr-legal-link.w--current {
  opacity: 1;
}

.s.is-footer .ftr-legal-link:hover::after,
.s.is-footer .ftr-legal-link:focus-visible::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .s.is-footer .text-link-w,
  .s.is-footer .text-link-w *,
  .s.is-footer .ftr-legal-link,
  .s.is-footer .ftr-legal-link::after {
    transition: none;
  }
}

.title-para-layout {
  grid-column-gap: calc(var(--gap) * 2);
  grid-row-gap: calc(var(--gap) * 2);
  display: flex;
}

.btn-rive-w {
  aspect-ratio: 1;
  height: .78125rem;
  display: flex;
}

.btn-rive-w.is-large, .btn-rive-w.is-touch-swipe {
  pointer-events: none;
  height: 1rem;
}

.css-buttons {
  width: 0;
  height: 0;
  display: none;
  position: fixed;
  inset: 0% 0% auto;
  overflow: hidden;
}

.nav-rive-w {
  width: 3.75rem;
  height: 3.75rem;
}

/* --- nav menu button ------------------------------------------------------

   btn-ui.riv used to draw this whole control: the rim, the lime wipe that
   arrives on hover, the two bars and the morph into the close cross. The
   icon is an inline SVG now (nav-ham-mark.js animates it, through a pair of
   code brackets rather than the old race-track loop), so the chrome it used
   to come with is rebuilt here, measured off the original artboard:
   transparent shell, 1px #282c20 rim, a 2.6% light wash while the nav is in
   its light theme, and a lime ellipse that sweeps down from the top edge.

   The Rive canvas is still in the DOM and still running — engine.js wires the
   button's click, hover and aria handling inside its onLoad callback, so
   without the canvas the menu would not open at all — it is simply no longer
   painted. Do not remove it. */
/* Rim and glyph are one ink, and it is the header's ink (--nav-ink, declared
   in css-main.html and re-declared per control by nav-ink.js). This used to be
   a literal #282c20 on both, with a theme rule over the rim and none at all
   over the glyph — so the icon stayed charcoal on every dark backdrop on the
   site and measured 1.1-1.4:1 against it. The literal survives as the token's
   fallback, so the button is still drawn correctly on its own. */
.nav-ham {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--nav-ink, #282c20);
  color: var(--nav-ink, #282c20);
}
.nav-ham .nav-rive-w { opacity: 0; }
.nav-ham::before {
  content: "";
  position: absolute;
  inset: -2px;   /* = the rim, so the lime wipe covers it edge to edge */
  background-color: var(--color--lime);
  clip-path: ellipse(120% 0% at 50% 0%);
  transition: clip-path .34s cubic-bezier(.22, .61, .36, 1);
}
.nav-ham:hover::before,
.nav-ham:focus-visible::before { clip-path: ellipse(120% 132% at 50% 0%); }
[data-nav-theme="light"] .nav-ham { background-color: rgba(237, 245, 243, .026); }
/* While the menu is open the button sits on the overlay as a solid light
   tile — the one state where the shell is filled. (The artboard used the old
   #f4f4ed; this follows the current white token instead.) */
.nav-ham,
[data-nav-theme="light"] .nav-ham {
  transition:
    background-color .28s linear,
    color var(--animation-default),
    border-color var(--animation-default);
}
.nav-ham[aria-expanded="true"],
[data-nav-theme="light"] .nav-ham[aria-expanded="true"] { background-color: var(--color--white); }
.nav-ham-mark {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
.nav-ham-mark svg { display: block; width: 100%; height: 100%; }
.nav-ham-mark path {
  stroke: currentColor;
  stroke-width: 3.8;
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: round;
}
/* the </> slash is drawn on and off by the script; it starts hidden so a
   no-JS page shows the two bars and nothing else */
.nav-ham-mark [data-ham-s] {
  stroke-dasharray: 27.2;
  stroke-dashoffset: 27.2;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .nav-ham::before { transition: none; }
}

.base-signature-rive.scale {
  transform: scale(1.3);
}

.text-on-t-stat-label-large.c-grey-on-track {
  color: var(--color--grey-on-track);
}

.text-on-t-stat-label-large.c-lime {
  color: var(--color--lime);
}

.text-on-t-stat-label-reg.c-grey-on-track {
  color: var(--color--grey-on-track);
}

.on-t-hero-stats-ui-sec1-row.is-1 {
  grid-column-gap: calc(var(--gap) * .5);
  grid-row-gap: calc(var(--gap) * .5);
  justify-content: flex-start;
  align-items: center;
}

.on-t-hero-stats-ui-img-fill.is-1 {
  width: var(--gap);
  border-top: 1px solid var(--color--dark-green-tint-1);
  border-bottom: 1px solid var(--color--dark-green-tint-1);
}

.on-t-hero-stats-ui-img-fill.is-2 {
  z-index: -1;
  border-right: 1px solid var(--color--dark-green-tint-1);
  background-size: 220%;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.on-t-hero-stats-ui-box1-layout {
  width: 100%;
  height: 100%;
  position: absolute;
}

.css-home, .css-on-track {
  width: 0;
  height: 0;
  display: none;
  position: fixed;
  inset: 0% 0% auto;
  overflow: hidden;
}

.on-t-hero-stats-ui-box1-row.is-2 {
  grid-column-gap: var(--gap);
  grid-row-gap: var(--gap);
  justify-content: center;
  align-items: center;
  height: calc(100% - 7.5rem);
}

.on-t-hero-stats-ui-box1-item.is-1 {
  justify-content: center;
  align-items: center;
  width: 8.7rem;
  padding-top: .8rem;
  display: flex;
  position: relative;
  overflow: clip;
}

.on-t-hero-stats-ui-box1-item.is-2 {
  grid-column-gap: calc(var(--gap) * .5);
  grid-row-gap: calc(var(--gap) * .5);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 8.7rem;
  display: flex;
  overflow: clip;
}

.text-on-t-stat-label-major.c-lime {
  color: var(--color--lime);
}

.on-t-hero-stats-ui-box2-col-2-row.is-1 {
  border-bottom: 1px solid var(--color--dark-green-tint-1);
  height: 60%;
  color: var(--color--lime);
}

.on-t-hero-stats-ui-box2-col-2-row.is-2 {
  height: 40%;
}

.text-on-t-stat-label-gigantic {
  font-variation-settings: "wght" 700, "wdth" 75;
  text-transform: uppercase;
  font-size: 122rem;
  line-height: .85;
}

.text-on-t-stat-label-gigantic.is-flex {
  display: flex;
}

.text-on-t-stat-label-gigantic.is-flex:where(.w-variant-cd6da4a0-6006-84fd-f49b-7e29ea7757c3) {
  font-size: 114rem;
}

.text-on-t-large-number.unit {
  color: var(--color--dark-green-tint-2);
}

.text-descriptor.c-grey-on-track {
  color: var(--color--grey-on-track);
}

.f1-highlight-grid {
  padding-right: var(--padding--container);
  padding-left: var(--padding--container);
  grid-column-gap: var(--gap);
  grid-row-gap: var(--gap);
  border-top-style: none;
  border-top-width: 1px;
  border-top-color: var(--color--dark-green);
  padding-top: calc(var(--gap) * .5);
  padding-bottom: calc(var(--gap) * .5);
  grid-template-rows: auto;
  grid-template-columns: 11.775% 35.325% 23.55% 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  position: relative;
}

.f1-highlight-grid:hover {
  background-color: var(--color--lime);
  color: var(--color--black);
}

.f1-highlight-grid.top {
  border-top-style: none;
}

.f1-highlight-grid.top:hover {
  background-color: var(--color--lime-zero);
}

.f1-highlight-grid.top.dropdown-top {
  margin-bottom: var(--gap);
}

.f1-highlight-grid.top.dropdown-item {
  padding-top: calc(var(--gap) * 1.5);
}

.f1-highlight-grid.is-active {
  background-color: var(--color--dark-green);
}

.text-on-t-stat-label-sm {
  font-variation-settings: "wght" 700, "wdth" 75;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 1;
}

.text-on-t-stat-label-sm.c-grey-on-track {
  color: var(--color--grey-on-track);
}

.text-on-t-stat-label-sm.c-lime {
  color: var(--color--lime);
}

.text-on-t-stat-label-sm.is-super {
  position: relative;
  top: .4rem;
  right: -.2rem;
}

.text-on-t-stat-label-sm.c-green-off-white.calendar {
  position: relative;
  bottom: .2rem;
}

.f1-car-img-w.mobile {
  display: none;
}

.icon-svg-closed-reef.pre-f1-car.c-grey-on-track {
  color: var(--color--grey-on-track);
}

.icon-svg-closed-reef.pre-f1-car.is-2nd:where(.w-variant-cd124f6d-02a9-fb35-f3d6-11ada301c998) {
  display: block;
}

.icon-svg-closed-reef.pre-f1-car.is-1st:where(.w-variant-cd124f6d-02a9-fb35-f3d6-11ada301c998), .icon-svg-closed-reef.pre-f1-car.is-1st:where(.w-variant-24b16bae-afa4-935a-2df9-9e3aa096f5f9) {
  display: none;
}

.calendar-track-mask {
  aspect-ratio: 1867.5 / 917.5;
  width: 100%;
  position: relative;
}

.calendar-track-title-layout {
  z-index: 5;
  grid-column-gap: var(--gap);
  grid-row-gap: var(--gap);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.calendar-track-info-item.hero {
  min-width: auto;
}

.text-body-sm-mona {
  letter-spacing: -.0125rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
}

.calendar-track-schedule-row.race {
  color: var(--color--lime);
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}

.calendar-track-schedule-row.last {
  padding-top: calc(var(--gap) * .5);
  border-bottom-style: none;
}

.f1-highlight-grid-line {
  background-color: var(--color--dark-green);
  height: 1px;
  width: calc(100% - calc(var(--gap) * 2));
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: 0% 0% auto;
}

.f1-highlight-mouse-over-w {
  z-index: 10;
  pointer-events: auto;
  width: 20.6rem;
  height: 24.6rem;
  position: absolute;
  inset: 0% auto auto 0%;
}

.f1-highlight-mouse-over-reveal {
  z-index: 2;
  background-color: var(--color--lime);
  opacity: 0;
  position: absolute;
  inset: 0%;
}

.menu-img-no-blend {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.nav-menu-img-w {
  clip-path: ellipse(120% 100% at 50% 20%);
  border-radius: 3rem;
  overflow: hidden;
  flex: none;
  width: 23rem;
  height: 25rem;
  position: relative;
}

.menu-img-blends-w {
  z-index: 5;
  width: 100%;
  height: 100%;
  position: relative;
  inset: 0%;
}

.menu-img-blend-3 {
  opacity: .4;
  background-color: #2a2c2c;
  position: absolute;
  inset: 0%;
}

.menu-img-blend-2 {
  mix-blend-mode: plus-lighter;
  background-color: #040504;
  position: absolute;
  inset: 0%;
}

.menu-img-blend-1 {
  mix-blend-mode: saturation;
  background-color: #000;
  position: absolute;
  inset: 0%;
}

.menu-img-top {
  z-index: 10;
  opacity: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.nav-menu-w {
  z-index: 25;
  background-color: var(--color--dark-green);
  pointer-events: auto;
  width: 100vw;
  color: var(--color--white);
  height: calc(var(--vh, 1vh) * 100);
  clip-path: ellipse(120% 100% at 50% 20%);
  justify-content: center;
  align-items: center;
  display: none;
  position: fixed;
  inset: 0%;
  overflow: clip;
}

.nav-menu-inner {
  height: 100%;
  padding: 1.25rem;
  display: flex;
}

.nav-menu-inner.c {
  justify-content: center;
  align-items: center;
  max-height: 80rem;
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 2.5rem;
  padding-bottom: 2rem;
}

.nav-menu-grid {
  grid-column-gap: var(--gap);
  grid-row-gap: var(--gap);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding-left: 2.25rem;
  padding-right: 8rem;
  display: flex;
}

.nav-menu-links-w {
  text-align: center;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.nav-menu-links-list {
  color: var(--color--green-off-white-1);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.nav-menu-links-col {
  grid-column-gap: calc(var(--gap) * 2);
  grid-row-gap: calc(var(--gap) * 2);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
}

.nav-menu-link-w {
  cursor: pointer;
  position: relative;
  overflow: clip;
}

.nav-menu-link-w:hover {
  color: var(--color--lime-off);
}

.nav-menu-link-w.w--current {
  pointer-events: none;
  color: var(--color--green-off-white-2);
  cursor: auto;
}

.text-nav-link {
  font-variation-settings: "wght" 660, "wdth" 93;
  text-transform: uppercase;
  text-shadow: 0 5.25rem;
  font-size: 5.25rem;
  font-weight: 500;
  line-height: .94;
  transition-property: color;
  transition-duration: .6s;
  transition-timing-function: cubic-bezier(.19, 1, .22, 1);
}

.nav-menu-social-w {
  grid-column-gap: var(--padding--small);
  grid-row-gap: var(--padding--small);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.nav-helmet-rive-w {
  color: var(--color--green-off-white-2);
  grid-column-gap: var(--gap);
  grid-row-gap: var(--gap);
  flex-flow: column;
  display: flex;
  position: relative;
}

.nav-menu-images-w {
  max-height: 100%;
  height: calc(calc(var(--vh, 1vh) * 100)  - var(--gap) * 2);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.nav-menu-images-track {
  grid-column-gap: calc(var(--gap) * 3);
  grid-row-gap: calc(var(--gap) * 3);
  flex: none;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  max-height: 100%;
  display: flex;
}

.nav-menu-images-col {
  grid-column-gap: calc(var(--gap) * 3);
  grid-row-gap: calc(var(--gap) * 3);
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: center;
  height: auto;
  display: flex;
}

.nav-menu-spacer {
  height: 1.25rem;
}

.nav-menu-bg {
  z-index: -1;
  opacity: .12;
  position: absolute;
  inset: 0%;
}

.nav-menu-link-current-svg {
  z-index: 5;
  color: var(--color--lime);
  position: absolute;
  inset: 0%;
}

.text-on-t-hero-heading-mona.margin {
  margin-right: .4rem;
  font-size: 23.2rem;
}

.off-track-hero-signature-rive.scale {
  transform: scale(1.3);
}

.css-off-track {
  width: 0;
  height: 0;
  display: none;
  position: fixed;
  inset: 0% 0% auto;
  overflow: hidden;
}

.camp-list {
  grid-column-gap: var(--gap);
  grid-row-gap: var(--gap);
  border-bottom: 1px solid #04050426;
  flex-flow: column;
  display: flex;
}

.camp-item {
  padding-top: var(--gap);
  padding-bottom: var(--gap);
  grid-column-gap: var(--gap);
  grid-row-gap: var(--gap);
  border-top: 1px solid #04050426;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.camp-item-img-w {
  aspect-ratio: 407 / 411;
  width: 100%;
  position: relative;
}

.page-ln4-svg {
  color: currentColor;
  width: 2.75rem;
  height: 2.75rem;
}

.off-t-hero-scroll-meda-w {
  grid-column-gap: var(--gap);
  grid-row-gap: var(--gap);
  flex-flow: column;
  margin-top: 14rem;
  display: none;
}

.off-t-hero-scroll-meda {
  grid-column-gap: var(--gap);
  grid-row-gap: var(--gap);
  flex-flow: wrap;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.sticky-track-theme-change {
  height: calc(var(--vh, 1vh) * 10);
  top: auto;
  left: 0%;
  right: auto;
  bottom: calc(calc(var(--vh, 1vh) * 10) * -1);
  position: absolute;
}

.helmet-nav-theme-target {
  height: 100vh;
  position: absolute;
  inset: auto auto 0% 0%;
}

.transition-w {
  z-index: 9999;
  background-color: var(--color--lime);
  pointer-events: auto;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  justify-content: center;
  align-items: flex-end;
  display: none;
  position: fixed;
  inset: 0%;
}

.transition-rive {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.transition-btn {
  bottom: var(--gap);
  z-index: 10;
  position: relative;
}

.js__embed {
  display: none;
}

.part-i-video-w {
  z-index: 10;
  aspect-ratio: 68.25 / 36.5625;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  justify-content: center;
  align-items: center;
  height: 36.5625rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
  inset: 0%;
}

.css-partnerships {
  width: 0;
  height: 0;
  display: none;
  position: fixed;
  inset: 0% 0% auto;
  overflow: hidden;
}

.part-i-rich-text.is-impact {
  justify-content: center;
  align-items: flex-start;
  display: block;
}

.text-clip-w {
  clip-path: polygon(0 -2%, 0 94%, 100% 94%, 100% -2%);
}

.input {
  background-color: var(--color--green-light);
  color: var(--color--dark-green);
  border-radius: .6rem;
  font-size: 1.2rem;
  font-weight: 500;
}

.input.center {
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--color--lime-off);
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: var(--color--lime-off);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--color--lime-off);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--color--lime-off);
  background-color: var(--color--black);
  min-height: 3rem;
  color: var(--color--white);
  text-align: center;
  caret-color: var(--color--lime);
  padding: .5rem;
}

.f1-car-stat-past-v2-grid-item.top {
  padding-bottom: calc(var(--gap) * 1.5);
  padding-top: calc(var(--gap) * 1.5);
}

.f1-highlight-item-round-w {
  min-width: 3.4rem;
  color: var(--color--grey-on-track);
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}

.f1-highlight-round-svg {
  width: 110%;
  color: var(--color--lime);
  display: flex;
  position: absolute;
}

.helmet-grid-extender {
  z-index: -1;
  justify-content: flex-start;
  align-items: flex-start;
  width: 13.9375rem;
  height: 2.5rem;
  display: none;
  position: absolute;
  inset: auto auto 0% -11rem;
}

.helmet-grid-extender-img {
  z-index: 1;
  max-width: none;
  height: 100%;
  color: var(--color--dark-green-tint-2);
  flex: none;
  position: relative;
}

.helmet-grid-extender-img.is-overlay {
  z-index: 3;
  opacity: 0;
  width: 100%;
  position: absolute;
  inset: 0%;
}

.mob-landscape-block {
  z-index: 99999;
  background-color: var(--color--lime);
  pointer-events: auto;
  color: var(--color--black);
  text-align: center;
  grid-column-gap: calc(var(--gap) * 3);
  grid-row-gap: calc(var(--gap) * 3);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: none;
  position: fixed;
  inset: 0%;
}

.mob-landscape-rive {
  aspect-ratio: 1;
  height: 40vh;
}

.calendar-dropdown-content {
  display: none;
  position: relative;
  overflow: clip;
}

.calendar-dropdown-trigger {
  cursor: pointer;
}

.calendar-dropdown-chevron {
  width: 1.4375rem;
  height: 1.4375rem;
  color: var(--color--lime);
  justify-content: center;
  align-items: center;
  display: flex;
  transform: rotate(180deg);
}

.home-hero-tablet-hero-text {
  display: none;
}

.marquee-offest-w {
  width: 100vw;
  left: calc(var(--gap) * -1);
  max-width: var(--fluid-container);
  position: relative;
  overflow: clip;
}

.utility__text--w {
  z-index: 40;
  margin-right: auto;
  margin-bottom: var(--gap);
  margin-left: auto;
  position: absolute;
  inset: auto auto 0%;
}

.utility__content-inner {
  text-align: center;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: min(100svh, 1200px);
  display: flex;
  position: relative;
}

.utility__4-svg {
  aspect-ratio: 256.86 / 347;
  height: 21.6875rem;
  display: none;
  position: relative;
}

.utility__gl--pos {
  z-index: 10;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}

.utility__gl {
  aspect-ratio: 1;
  width: 80%;
}

.marquee-css.right {
  justify-content: flex-end;
  align-items: center;
}

.marquee-css__list.right {
  justify-content: flex-end;
  align-items: center;
}

.gl-carousel {
  position: absolute;
  inset: 50% 0% auto;
}

.utility__switcher--w {
  right: var(--gap);
  z-index: 40;
  background-color: var(--color--white);
  border-radius: .625rem;
  flex-flow: column;
  display: flex;
  position: absolute;
  overflow: clip;
}

.utility-switcher-btn {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--color--green-light);
  width: 3.75rem;
  height: 3.75rem;
  color: var(--color--dark-green);
  cursor: pointer;
  grid-column-gap: calc(var(--gap) * .25);
  grid-row-gap: calc(var(--gap) * .25);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.utility-switcher-btn:hover {
  background-color: var(--color--green-off-white-1);
}

.utility-switcher-btn.is-active {
  border-bottom-color: var(--color--lime);
  background-color: var(--color--lime);
}

.utility-switcher-icon {
  aspect-ratio: 24 / 27.65;
  height: 1.6rem;
  display: flex;
}

.video-stream-w {
  width: 10rem;
  height: 10rem;
  position: relative;
  overflow: clip;
}

.video-stream {
  position: absolute;
  inset: 0%;
}

.otot-home-text-w {
  position: relative;
}

.marquee-spacer {
  flex: none;
  width: 7rem;
  height: 0;
}

.marquee-spacer.footer {
  width: calc(var(--gap) * 1.2);
}

.partnership-back-btn-w {
  left: var(--gap);
  top: var(--gap);
  z-index: 10;
  position: absolute;
  bottom: auto;
  right: auto;
}

.partnership-back-btn-w.not-found {
  z-index: 40;
}

.css-safari {
  width: 0;
  height: 0;
  display: none;
  position: fixed;
  inset: 0% 0% auto;
  overflow: hidden;
}

.home-hero-touch-controls-w {
  display: none;
}

.home-title-w {
  color: var(--color--black);
  position: absolute;
  inset: 0% auto auto 0%;
}

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

@media screen and (max-width: 991px) {
  body {
    --color--dark-green: #040504;
    --color--white: #edf5f3;
    --padding--container: 1.25rem;
    --gap: 1.25rem;
    --on-t-nav-spacer: 5.375rem;
    --color--black: #040504;
    --text--h1: 4rem;
    --padding--xlarge: 5rem;
    --padding--med: 3rem;
    --gap--med\<deleted\|variable-196f1660-85b7-2eda-5ec8-e43ca0f5032d\>: 2rem;
    --color--lime-off: #21f1a8; /* ONE SITE GREEN: was #4cc299, now = --color--lime */
    --color--lime: #21f1a8;
    --color--green-off-white-1: #dde1d2;
    --color--lime-zero: #21f1a800;
    --text--btn-primary: 1rem;
    --text--btn-nav: 1.25rem;
    --text--btn-footer: 1.875rem;
    --color--green-off-white-2: #b4b8a5;
    --color--dark-green-tint-2: #535450;
    --color--grey-on-track: #b9bbad;
    --text--impact: 7.9375rem;
    --grid-spacer: 31.51vh;
    --color--dark-green-tint-1: #3b3c38;
    --padding--small: 2rem;
    --color--grey-1: #ebeee0;
    --color--green-light: #ebeee0;
    --radius--small: 1rem;
    --vh: 1vh;
    --color--grey-2: #c8cbbd;
  }

  li {
    font-size: 1.25rem;
  }

  label {
    font-size: .8rem;
  }

  blockquote {
    font-size: 1.2rem;
  }

  .c.home-hero {
    justify-content: center;
    align-items: flex-start;
  }

  

  .rich-text p {
    font-size: 1.25rem;
  }

  .rich-text h1 {
    font-size: 3.28rem;
  }

  .rich-text h2 {
    font-size: 2.5rem;
  }

  .rich-text h3 {
    font-size: 2.19rem;
  }

  .rich-text h4 {
    font-size: 1.65rem;
  }

  .rich-text h5 {
    font-size: 1.25rem;
  }

  .rich-text h6 {
    font-size: 1rem;
  }

  

  .grid-main.is-overlay {
    grid-column-gap: 1.25vw;
  }

  .text-eyebrow {
    font-size: .8rem;
  }

  .text-eyebrow.touch-desc {
    flex: none;
  }

  .btn-layout.is-nav {
    justify-content: space-between;
    width: 100%;
  }

  .btn-w.icon-only.track-ui {
    height: 2.9rem;
  }

  .btn-w.is-touch-swipe {
    width: 5rem;
    height: 5rem;
  }

  .btn-w.is-touch-swipe.track-ui {
    height: 2.9rem;
  }

  .btn-inner.is-touch-swipe {
    flex: none;
    width: 3rem;
  }

  .btn-icon-w.is-touch-swipe {
    width: 90%;
  }

  .nav-brand-link {
    display: none;
  }

  .text-impact-lg-mona {
    font-size: 7rem;
  }

  .text-impact-lg-brier.c-lime-off, .text-impact-lg-brier.c-grey-on-track {
    font-size: inherit;
  }

  .impact-content-w {
    padding-left: 3vw;
    padding-right: 3vw;
  }

  .horizontal-track {
    width: 100%;
    padding-left: var(--gap);
    grid-column-gap: 5rem;
    grid-row-gap: 5rem;
    flex-flow: column;
    height: auto;
  }

  

  

  .horizontal-item-w.is-2 {
    margin-bottom: 0;
    margin-left: auto;
    left: 0;
  }

  .horizontal-item-w.is-text-callout.callout-1 {
    max-width: 31rem;
  }

  .horizontal-item-w.is-4 {
    margin-left: auto;
    left: 0;
    right: 0;
  }

  .horizontal-item-w.is-5, .horizontal-item-w.is-6 {
    margin-bottom: 0;
  }

  .horizontal-item-w.is-7 {
    margin-top: 0;
    margin-left: auto;
  }

  .horizontal-item-w.is-9 {
    left: 0;
  }

  .horizontal-item-w.is-10 {
    margin-top: 0;
    margin-left: auto;
  }

  .horizontal-item-w.is-home9 {
    left: 0;
  }

  .horizontal-item-w.is-home4 {
    margin-left: auto;
    left: 0;
    right: 0;
  }

  .horizontal-item-w.is-home6 {
    margin-bottom: 0;
  }

  .horizontal-item-w.is-home10 {
    margin-top: 0;
    margin-left: auto;
  }

  .horizontal-item-w.is-on-t-5 {
    margin-bottom: 0;
  }

  .horizontal-item-w.is-on-t-4 {
    margin-left: auto;
    left: 0;
    right: 0;
  }

  .horizontal-item-w.is-offt3, .horizontal-item-w.is-offt4 {
    margin-bottom: 0;
    margin-left: auto;
    left: 0;
  }

  .horizontal-item-w.is-offt7 {
    left: 0;
  }

  .horizontal-item-w.is-part-i-2 {
    margin-bottom: 0;
    margin-left: auto;
    left: 0;
  }

  .horizontal-item-w.is-part-i-4 {
    margin-left: auto;
    left: 0;
    right: 0;
  }

  .horizontal-item-w.is-part-i-5, .horizontal-item-w.is-part-i-6 {
    margin-bottom: 0;
  }

  .horizontal-item-w.is-part-i-7 {
    margin-top: 0;
    margin-left: auto;
  }

  .horizontal-item-w.is-part-i-9 {
    left: 0;
  }

  .horizontal-item-w.is-part-i-10 {
    margin-top: 0;
    margin-left: auto;
  }

  .horizontal-item-w.is-home-2 {
    margin-bottom: 0;
    margin-left: auto;
    left: 0;
  }

  .horizontal-item-w.is-home-4 {
    margin-left: auto;
    left: 0;
    right: 0;
  }

  .horizontal-item-w.is-home-6 {
    margin-bottom: 0;
  }

  .horizontal-item-w.is-home-7 {
    margin-top: 0;
    margin-left: auto;
  }

  .horizontal-item-w.is-on-t-2 {
    margin-bottom: 0;
    margin-left: auto;
    left: 0;
  }

  

  .horizontal-item-text {
    font-size: 1.9rem;
  }

  

  .otot-home-inner {
    justify-content: center;
    align-items: flex-start;
    padding-top: 8rem;
  }

  .otot-home-img-w, .otot-home-img-w.is-1 {
    height: calc(var(--vh, 1vh) * 62.67);
  }

  .otot-home-img-w.is-2 {
    height: calc(var(--vh, 1vh) * 62.67);
    justify-content: flex-end;
    align-items: flex-start;
    right: -1px;
  }

  .helmet-grid {
    grid-template-columns: 1fr 1fr;
  }

  .helmet-grid-item-img-helmet {
    max-width: 20rem;
  }

  

  .spacer._20rem.tablet-reduce {
    height: 14rem;
  }

  .helmet-grid-item-text-w {
    grid-column-gap: calc(var(--gap) * .5);
    grid-row-gap: calc(var(--gap) * .5);
    width: auto;
  }

  .text-title-small-label {
    font-size: 1rem;
  }

  .text-title-small-label.text, .text-title-small-label.date {
    font-size: 1.2rem;
  }

  .helmet-grid-item-date-w {
    width: auto;
  }

  .callout-socials-card-w {
    aspect-ratio: 20 / 35;
    width: 17rem;
    height: auto;
  }

  .text-impact-sm-mona.footer {
    font-size: 5rem;
  }

  .text-impact-sm-brier.footer {
    font-size: inherit;
  }

  .footer-bg-img {
    aspect-ratio: 48.75 / 39.875;
    width: auto;
    height: 31rem;
  }

  .footer-links-w {
    padding-left: 4.1rem;
    padding-right: 4.1rem;
  }

  .footer-statement-w {
    top: 10rem;
  }

  .footer-statement-layout {
    width: 42rem;
  }

  .marquee-gl-rive-target {
    width: 50vw;
  }

  /* Below the desktop split the two ends of the utility row stop being two
     ends — there is no width to hold them apart — so they stack in reading
     order instead: copyright first, legal second, matching left-then-right
     on desktop. row-reverse was inherited from a layout where this column
     was empty and had nothing to reverse. */
  .footer-legal-links-w {
    grid-column-gap: calc(var(--gap) * .75);
    grid-row-gap: calc(var(--gap) * .75);
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    position: relative;
  }

  .footer-legal-links-col.is-legal {
    justify-content: center;
  }

  .title-para-layout.tablet-wrap {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .btn-rive-w.is-touch-swipe {
    height: 100%;
  }

  .btn-rive-w.is-touch-swipe.is-locked {
    height: 70%;
    display: none;
  }

  

  .text-on-t-stat-label-gigantic.is-flex {
    font-size: 96rem;
  }

  

  .f1-highlight-grid.top {
    grid-template-columns: 11.775% 35.325% 23.55% 1fr 1fr;
  }

  .f1-highlight-grid.is-highlights:hover {
    color: var(--color--white);
    background-color: #0000;
  }

  

  .f1-highlight-mouse-over-w {
    display: none;
  }

  .nav-menu-grid {
    padding-left: 0;
    padding-right: 0;
  }

  .nav-menu-links-w {
    margin-left: auto;
    margin-right: auto;
  }

  .nav-menu-images-w {
    display: none;
  }

  .text-on-t-hero-heading-mona.margin {
    font-size: 17.8rem;
  }

  

  

  .camp-item {
    grid-template-columns: 1fr 1fr;
  }

  .helmet-grid-extender {
    height: 4rem;
    left: -15rem;
  }

  .home-hero-tablet-hero-text {
    z-index: -5;
    grid-column-gap: var(--gap);
    grid-row-gap: var(--gap);
    color: var(--color--dark-green);
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10rem;
    display: flex;
    position: relative;
  }

  .home-hero-tablet-text-w {
    width: 19rem;
  }

  .gl-carousel {
    top: 50%;
  }

  .home-hero-touch-controls-w {
    top: auto;
    left: auto;
    right: var(--gap);
    bottom: var(--gap);
    z-index: 20;
    pointer-events: auto;
    justify-content: flex-start;
    align-items: center;
    display: flex;
    position: fixed;
  }

  .home-hero-touch-desc-w {
    pointer-events: none;
    width: 10rem;
    color: var(--color--white);
    flex-flow: column;
    flex: none;
    justify-content: center;
    align-items: flex-end;
    display: flex;
    position: absolute;
    right: 6rem;
  }

  .touch-desc-inner {
    pointer-events: auto;
    flex: none;
    justify-content: flex-end;
    align-items: center;
    display: flex;
    position: absolute;
    overflow: clip;
  }
}

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

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

  .text-body-reg-mona {
    font-size: 1.75rem;
  }

  .horizontal-item-w.is-home-8.neg-margin, .horizontal-item-img-w.is-home8 {
    max-width: 100%;
  }

  .text-title-small-label, .text-title-small-label.text, .text-title-small-label.date {
    font-size: 1.3rem;
  }

  .callout-socials-card-w {
    width: 15rem;
  }

  .footer-legal-links-w {
    grid-column-gap: calc(var(--gap) * .75);
    grid-row-gap: calc(var(--gap) * .75);
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    position: relative;
  }

  .text-body-sm-mona {
    font-size: 1.5rem;
  }

  

  

  

  .mob-landscape-rive {
    height: 32rem;
  }

  .gl-carousel {
    top: 42svh;
  }

  
}

@media screen and (max-width: 479px) {
  .c.is-marquee {
    height: 100svh;
    min-height: auto;
  }

  .c.home-helmets {
    padding-top: calc(var(--gap) * 1);
  }

  

  

  

  .h1 {
    font-size: 4rem;
  }

  .text-title-lg-mona {
    font-size: 2.6rem;
  }

  

  

  .text-cta-short-intro {
    font-size: 2rem;
  }

  .text-cta-short-intro.font-brier {
    font-size: 1.7rem;
  }

  .text-eyebrow {
    font-size: .8rem;
  }

  .text-eyebrow.mob-only {
    display: block;
  }

  .text-eyebrow.dt-only, .scroll-indicator {
    display: none;
  }

  .btn-layout {
    flex-flow: wrap;
  }

  .btn-w.icon-only {
    width: 3.3rem;
    height: 3.3rem;
    padding-left: 0;
    padding-right: 0;
  }

  .btn-w.icon-only.track-ui {
    height: auto;
  }

  .btn-w.is-nav {
    height: 4.7rem;
  }

  .btn-w.is-touch-swipe {
    border-radius: .75rem;
    width: min(4rem, 60px);
    height: auto;
    padding-left: 0;
    padding-right: 0;
  }

  .btn-w.is-touch-swipe.track-ui {
    height: auto;
  }

  .btn-inner.is-touch-swipe {
    width: 65%;
  }

  .btn-text.is-footer {
    font-size: var(--text--btn-footer);
    --color--dark-green: #040504;
    --color--white: #edf5f3;
    --padding--container: 1rem;
    --gap: 1.25rem;
    --on-t-nav-spacer: 6.375rem;
    --color--black: #040504;
    --text--h1: 4rem;
    --padding--xlarge: 5rem;
    --padding--med: 3rem;
    --gap--med\<deleted\|variable-196f1660-85b7-2eda-5ec8-e43ca0f5032d\>: 2rem;
    --color--lime-off: #21f1a8; /* ONE SITE GREEN: was #4cc299, now = --color--lime */
    --color--lime: #21f1a8;
    --color--green-off-white-1: #dde1d2;
    --color--lime-zero: #21f1a800;
    --text--btn-primary: 1rem;
    --text--btn-nav: 1.7rem;
    --text--btn-footer: 1.6rem;
    --color--green-off-white-2: #b4b8a5;
    --color--dark-green-tint-2: #535450;
    --color--grey-on-track: #b9bbad;
    --text--impact: 7.9375rem;
    --grid-spacer: 31.51vh;
    --color--dark-green-tint-1: #3b3c38;
    --padding--small: 2rem;
    --color--grey-1: #ebeee0;
    --color--green-light: #ebeee0;
    --radius--small: 1rem;
    --vh: 1vh;
    --color--grey-2: #c8cbbd;
  }

  

  .btn-icon-w {
    width: 1.5rem;
  }

  .btn-icon-svg.is-large {
    width: 100%;
    height: 100%;
  }

  .nav-ham {
    pointer-events: auto;
    width: 4.7rem;
    height: 4.7rem;
  }

  

  .text-body-reg-mona {
    font-size: 1.3rem;
  }

  .text-impact-lg-mona {
    font-size: 3.5rem;
  }

  .text-impact-lg-mona.reduce, .text-impact-lg-brier {
    font-size: 3.6rem;
  }

  .base-helmet-rive {
    width: 4.7rem;
    height: auto;
  }

  .impact-content-w {
    padding-left: 0;
    padding-right: 0;
  }

  

  

  .marquee-gl-target {
    width: 25rem;
    height: 29rem;
  }

  .gl-canvas {
    height: 100svh;
  }

  .image.is-horizontal-scroll {
    width: 100%;
    height: 100%;
    position: relative;
    left: -1px;
  }

  .image.is-otot-home-end {
    height: calc(var(--vh, 1vh) * 80);
  }

  .horizontal-track {
    padding-top: calc(var(--vh, 1vh) * 0);
    padding-bottom: calc(var(--gap) * 0);
  }

  

  

  

  

  .horizontal-grid-col.neg-margin.less {
    margin-top: -5rem;
  }

  

  

  .horizontal-item-w, .horizontal-item-w.is--3 {
    width: 100%;
  }

  .horizontal-item-w.is-text-callout.callout-2 {
    max-width: 19rem;
    margin-top: 1.9rem;
    margin-bottom: 0;
  }

  .horizontal-item-w.is-text-callout.callout-1 {
    max-width: 20rem;
    margin-top: 0;
  }

  .horizontal-item-w.is-text-callout.callout-1.top-gap {
    margin-top: 2rem;
  }

  .horizontal-item-w.is-text-callout.is-home-callout-2 {
    max-width: 19rem;
    margin-top: 0;
    margin-bottom: 0;
  }

  .horizontal-item-w.is-5 {
    margin-bottom: 0;
    margin-left: auto;
  }

  .horizontal-item-w.is-6 {
    margin-left: 20%;
  }

  .horizontal-item-w.is-7 {
    margin-top: 0;
    margin-left: auto;
  }

  .horizontal-item-w.is-8 {
    width: 100%;
    margin-top: 0;
  }

  .horizontal-item-w.is-9 {
    margin-left: auto;
    left: 0;
  }

  .horizontal-item-w.is-10 {
    margin-top: 0;
  }

  .horizontal-item-w.is-title-mid {
    width: 100%;
    margin-bottom: 0;
  }

  .horizontal-item-w.is-title-top {
    width: 100%;
  }

  .horizontal-item-w.is-home9 {
    margin-left: 0;
    left: 0;
  }

  .horizontal-item-w.is-home9.neg-margin {
    margin-top: -5rem;
  }

  .horizontal-item-w.is-home1 {
    left: 20%;
  }

  .horizontal-item-w.is-home3 {
    width: 100%;
  }

  .horizontal-item-w.is-home4 {
    margin-left: 0;
    left: auto;
  }

  .horizontal-item-w.is-home4.neg-margin {
    margin-top: -7rem;
  }

  .horizontal-item-w.is-home6 {
    margin-left: 40%;
  }

  .horizontal-item-w.is-home8 {
    width: 100%;
  }

  .horizontal-item-w.is-home8.neg-margin {
    margin-top: -7rem;
  }

  .horizontal-item-w.is-on-t-1 {
    width: auto;
    margin-left: 20%;
  }

  .horizontal-item-w.is-on-t-5 {
    margin-top: -3rem;
    margin-bottom: 0;
  }

  .horizontal-item-w.is-on-t-4 {
    margin-top: -3rem;
  }

  .horizontal-item-w.is-offt1, .horizontal-item-w.is-offt3 {
    width: 100%;
  }

  .horizontal-item-w.is-offt4.neg-margin {
    margin-top: -7rem;
  }

  .horizontal-item-w.is-offt7 {
    left: 0;
  }

  .horizontal-item-w.is-offt7.neg-margin {
    margin-top: -7rem;
    margin-bottom: 0;
  }

  .horizontal-item-w.is-offt8 {
    margin-bottom: 0;
    margin-left: auto;
    left: 0;
  }

  .horizontal-item-w.is-offt8.neg-margin {
    margin-top: -5rem;
  }

  .horizontal-item-w.is-part-i-1 {
    left: 20%;
  }

  .horizontal-item-w.is-part-i-3 {
    width: 100%;
    margin-top: 0;
  }

  .horizontal-item-w.is-part-i-5 {
    width: auto;
    margin-left: auto;
  }

  .horizontal-item-w.is-part-i-6 {
    margin-left: 20%;
  }

  .horizontal-item-w.is-part-i-7 {
    margin-top: 0;
    margin-left: auto;
  }

  .horizontal-item-w.is-part-i-8 {
    width: 100%;
  }

  .horizontal-item-w.is-part-i-9 {
    margin-left: auto;
    left: 0;
  }

  .horizontal-item-w.is-part-i-10 {
    margin-top: 0;
  }

  .horizontal-item-w.is-home-4 {
    margin-left: 0;
    left: auto;
  }

  .horizontal-item-w.is-home-4.neg-margin {
    margin-top: -5.2rem;
  }

  .horizontal-item-w.is-home-6 {
    width: auto;
    margin-top: -7rem;
    margin-left: 40%;
  }

  .horizontal-item-w.is-home-1 {
    width: auto;
    left: 20%;
  }

  .horizontal-item-w.is-home-7 {
    justify-content: flex-end;
    align-items: flex-start;
    margin-top: 0;
    margin-left: auto;
    display: flex;
  }

  .horizontal-item-w.is-home-8 {
    width: 100%;
  }

  .horizontal-item-w.is-home-8.neg-margin {
    margin-top: -7rem;
  }

  .horizontal-item-layout {
    width: 100%;
  }

  

  

  

  

  

  

  

  .horizontal-item-img-w.is-2 {
    aspect-ratio: 1;
    width: 20rem;
    height: 20rem;
  }

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  .horizontal-item-text {
    font-size: 1.5rem;
  }

  

  

  

  .otot-home-img-w.is-1 {
    width: auto;
    left: -7rem;
  }

  .otot-home-img-w.is-2 {
    right: -7rem;
  }

  .otot-home-layout {
    grid-column-gap: calc(var(--gap) * 2);
    grid-row-gap: calc(var(--gap) * 2);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .otot-home-p-w {
    width: 100%;
  }

  .otot-home-end-img-w {
    min-height: calc(var(--vh, 1vh) * 60);
  }

  .helmet-grid-frame-w.destop {
    display: none;
  }

  .helmet-grid-frame-w.mobile {
    display: flex;
  }

  .helmet-grid-item-img-helmet {
    max-width: 12rem;
  }

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

  .title-layout.grid-main {
    grid-column-gap: calc(var(--gap) * 2);
    grid-row-gap: calc(var(--gap) * 2);
    margin-bottom: calc(var(--gap) * 2);
  }

  

  .title-para-w.mw.flex-2, .title-para-w.mw.flex-1 {
    max-width: none;
  }

  .spacer._8-75rem.mobile-shrink {
    height: 4rem;
  }

  .spacer._8-75rem.m-6rem {
    height: 6rem;
  }

  .spacer._20rem.tablet-reduce {
    height: 8rem;
  }

  .spacer.on-t-hero {
    flex: 1;
    height: 100%;
    min-height: 2rem;
  }

  .spacer._12rem.mob-calendar {
    height: 5rem;
  }

  .spacer.off-t-hero {
    min-height: 2rem;
    max-height: none;
  }

  .helmet-grid-item-text-w {
    grid-column-gap: calc(var(--gap) * .25);
    grid-row-gap: calc(var(--gap) * .25);
    justify-content: flex-end;
    align-items: flex-end;
    width: auto;
  }

  .text-title-small-label {
    font-size: .65rem;
    line-height: 1;
  }

  .text-title-small-label.text, .text-title-small-label.date {
    font-size: .9rem;
  }

  .helmet-grid-item-date-w {
    width: auto;
    margin-left: .4rem;
  }

  .callout-text-w {
    max-width: 29rem;
  }

  .callout-socials-card-w {
    aspect-ratio: 20 / 35;
    width: 14rem;
    height: auto;
  }

  .callout-socials-links-layout {
    grid-column-gap: calc(var(--gap) * 1);
    grid-row-gap: calc(var(--gap) * .5);
    flex-flow: wrap;
    justify-content: center;
    align-items: flex-start;
    max-width: 20rem;
  }

  .footer-layout-clip {
    aspect-ratio: 381.94 / 627.49;
  }

  .text-impact-reg-mona, .text-impact-reg-brier {
    letter-spacing: -.1rem;
    font-size: 4rem;
  }

  .text-title-lg-brier {
    font-size: 2.6rem;
  }

  .text-title-lg-brier.c-lime-off {
    font-size: 2.4rem;
  }

  .text-title-reg-mona, .text-title-reg-brier {
    font-size: 1.9rem;
  }

  .text-impact-sm-mona.footer, .text-impact-sm-brier {
    font-size: 3.6rem;
  }

  

  .footer-marquee {
    inset: 3rem 0% auto;
  }

  .home-collab-marquee-svg {
    height: 4rem;
  }

  

  .footer-bg-img {
    max-width: none;
    height: 24rem;
  }

  .footer-bg-bottom-btn-w {
    bottom: 1.1rem;
  }

  .footer-links-w {
    margin-top: 9rem;
    margin-bottom: 5rem;
  }

  .footer-links-col {
    width: 50%;
  }

  .footer-statement-w {
    position: relative;
    top: auto;
    left: auto;
  }

  .footer-statement-layout {
    width: auto;
    max-width: 90%;
    margin-top: 1.2rem;
  }

  .footer-rive-w {
    aspect-ratio: 13.0625 / 8.5;
    width: 10rem;
    height: auto;
    top: -4.8rem;
  }

  .marquee-gl-rive-target {
    width: 80vw;
  }

  .home-hero-next-race-w {
    display: none;
  }

  .footer-legal-links-w {
    grid-column-gap: calc(var(--gap) * .5);
    grid-row-gap: calc(var(--gap) * .5);
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    padding-bottom: .5rem;
    position: relative;
  }

  .footer-legal-links-col {
    grid-column-gap: calc(var(--gap) * .5);
    grid-row-gap: calc(var(--gap) * .5);
  }

  /* At 320-479px "Impressum Datenschutz" side by side is the widest this row
     ever gets. It wraps rather than overflows, and each link keeps a 24px
     minimum hit box — the row is the smallest interactive target on the page
     and the one most likely to be tapped by someone who needs it. */
  .footer-legal-links-col.is-legal {
    justify-content: center;
    flex-wrap: wrap;
  }

  .s.is-footer .ftr-legal-link {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
  }

  

  .nav-rive-w {
    flex: none;
    width: 4.7rem;
    height: 4.7rem;
  }

  .base-signature-rive.scale.on-t-hero-rive-sig {
    height: 4rem;
    position: absolute;
  }

  

  

  .text-on-t-hero-heading.is-off-t {
    font-size: 7.3rem;
  }

  

  

  

  

  

  .text-on-t-stat-label-large.c-grey-on-track.is-stat {
    position: relative;
    top: -.6rem;
  }

  

  

  

  

  

  

  

  

  

  

  .on-t-hero-stats-ui-img-fill.is-1 {
    width: 1rem;
  }

  

  .on-t-hero-stats-ui-box1-item.is-1, .on-t-hero-stats-ui-box1-item.is-2 {
    width: 7rem;
  }

  

  

  

  

  

  .on-t-hero-stats-ui-box2-col-2-row.is-1 {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }

  .text-on-t-stat-label-gigantic.is-flex {
    font-size: 38.8rem;
  }

  

  

  

  

  

  

  

  

  .f1-highlight-grid.top {
    grid-template-columns: minmax(0, .4fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, .6fr);
  }

  .f1-highlight-grid.top.dropdown-top {
    grid-template-columns: minmax(0, .5fr) minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, .75fr);
  }

  .f1-highlight-grid.top.dropdown-item {
    grid-template-columns: minmax(0, .5fr) minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  }

  .f1-highlight-grid.top.highlights {
    grid-template-columns: 2fr 1fr .6fr;
  }

  

  .f1-highlight-grid.is-highlights {
    grid-template-columns: 2fr 1fr .6fr;
  }

  

  

  

  

  .text-on-t-stat-label-sm {
    font-size: 1.3rem;
    position: relative;
    top: .1rem;
  }

  .text-on-t-stat-label-sm.is-super {
    top: 0;
  }

  .text-on-t-stat-label-sm.is-super.c-lime {
    top: .1rem;
  }

  

  

  .f1-car-img-w.mobile {
    margin-bottom: var(--gap);
    display: block;
  }

  

  

  

  

  .calendar-track-mask {
    min-height: 40rem;
    padding-right: var(--gap);
    padding-bottom: var(--gap);
    padding-left: var(--gap);
    aspect-ratio: auto;
    flex-flow: column;
    display: flex;
  }

  

  .ln-calendar-track-frame.mobile {
    width: 100%;
    display: flex;
    position: absolute;
    inset: 0% auto auto 0%;
  }

  

  

  .calendar-track-title-layout {
    flex-flow: row;
  }

  

  

  

  

  

  

  

  

  .text-body-sm-mona {
    font-size: 1rem;
  }

  .calendar-track-schedule-row.last {
    padding-top: calc(var(--gap) * .2);
  }

  .nav-menu-w {
    height: 100svh;
  }

  .text-nav-link {
    font-size: 3.7rem;
  }

  .text-on-t-hero-heading-mona.margin {
    font-size: 7.6rem;
  }

  

  

  

  

  

  

  

  .camp-collection-w {
    margin-bottom: 2rem;
  }

  .camp-item {
    grid-template-columns: 1fr 1fr;
  }

  

  

  

  .page-ln4-svg {
    width: 2.5rem;
    height: 2.5rem;
  }

  .transition-w {
    height: 100svh;
  }

  

  

  .part-i-video-w {
    height: 13rem;
  }

  

  

  

  

  .f1-highlight-item-round-w {
    justify-content: center;
    align-items: center;
    min-width: auto;
  }

  .f1-highlight-round-svg {
    width: 150%;
  }

  .btn-auto-top {
    margin-top: auto;
  }

  .helmet-grid-extender {
    width: auto;
    height: 1.56rem;
    bottom: 1%;
    left: -5rem;
  }

  .helmet-grid-extender-img {
    color: var(--color--dark-green-tint-2);
    display: flex;
  }

  

  

  

  .calendar-mobile-frame.top {
    inset: auto 0%;
  }

  .calendar-mobile-frame.bottom {
    inset: auto 0% 0%;
  }

  .calendar-mobile-frame.middle {
    inset: 30% 0% auto;
  }

  

  .calendar-dropdown-content {
    display: none;
  }

  

  

  .home-hero-tablet-text-w {
    width: 16rem;
  }

  .utility__switcher--w {
    flex-flow: row;
    bottom: 10rem;
    right: auto;
  }

  .utility-switcher-btn {
    border-right: 1px solid var(--color--green-off-white-1);
    border-bottom-style: none;
    width: 5rem;
    height: 5rem;
  }

  .utility-switcher-icon {
    height: 2rem;
  }

  .marquee-spacer {
    width: 4rem;
  }

  .partnership-back-btn-w {
    top: 7rem;
  }

  .home-hero-touch-desc-w {
    right: 5rem;
  }
}

#w-node-_5d5ac04e-626f-e2bd-ba2c-8a1157b2eda4-0b17a7eb {
  grid-column: span 2 / span 2;
}

#w-node-_8734ac60-bf7c-ac47-bf21-501caa438859-0b17a7eb {
  grid-column: span 1 / span 1;
}

#w-node-_10049719-af3a-791f-b004-78a94b8f2fac-0b17a7eb, #w-node-_04f46b3f-5093-ef67-5316-1ae3df93be8d-0b17a7eb {
  grid-column: span 2 / span 2;
}

#w-node-d38115e1-cbcb-e8d7-fdcd-2280ce4d6775-5f7c7c5b {
  grid-area: 1 / 3 / 2 / 5;
}

#w-node-_11721cd2-515c-d657-a60b-407032999dd8-5f7c7c5b {
  justify-self: start;
}

#w-node-_4eaad92f-9012-c100-dccc-e3361c20d2af-5f7c7c5b {
  grid-area: 1 / 3 / 2 / 5;
}

#w-node-_3f014e94-dd27-efa0-671a-6bf2df74c1ac-5f7c7c5b, #w-node-_4658ea02-c46c-e8e0-3f05-f157ea87ef94-5f7c7c5b {
  grid-column: span 2 / span 2;
}

#w-node-_2ab69dc4-b2e8-572b-3043-245da1d775a7-5f7c7c5b, #w-node-_0e765cc1-15ef-ff7d-3cd5-acc0b8631f47-5f7c7c5b, #w-node-_2e2badd0-edd4-79a3-98d6-d0015899b834-5f7c7c5b, #w-node-da3f9e36-55b8-e2f4-75a4-93b4299d711f-5f7c7c5b {
  justify-self: start;
}

#w-node-f4e413b5-5bad-3f37-eaf1-33dce243f1f5-5f7c7c5b, #w-node-_509fc3b9-0d9f-c7fb-45b7-27d46b8e99bf-5f7c7c5b {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-e77657ec-ff17-bc21-98b5-30fdd8e171c2-5f7c7c5b {
  grid-column: span 2 / span 2;
}

#w-node-e77657ec-ff17-bc21-98b5-30fdd8e171c8-5f7c7c5b {
  grid-column: span 1 / span 1;
}

#w-node-_7e66a639-1a37-e098-bd9b-f9147ab37e70-5f7c7c5b, #w-node-_3b13b201-1c48-e0e0-db72-80f0a491f668-5f7c7c5b, #w-node-_3b13b201-1c48-e0e0-db72-80f0a491f671-5f7c7c5b {
  grid-column: span 2 / span 2;
}

#w-node-_3b13b201-1c48-e0e0-db72-80f0a491f676-5f7c7c5b, #w-node-c285c8ee-adfc-2d87-6651-74320d154718-5f7c7c5b, #w-node-_06790580-4b9a-ecfb-6ba3-02f4a753ad6c-5f7c7c5b, #w-node-c9b0daf0-b689-622f-1a7d-50c6e904a249-5f7c7c5b, #w-node-_0c6af839-14b6-a0c1-a7fe-6831acd6432a-5f7c7c5b, #w-node-_501d26bd-6097-5712-862f-448610ae4c0c-5f7c7c5b, #w-node-e117171d-8d1c-4a99-9489-fe33b006c86a-5f7c7c5b, #w-node-_99243bcc-935d-15f2-1815-ed4443f76624-5f7c7c5b {
  justify-self: start;
}

#w-node-_924c1ab4-f6ca-fd53-1cf2-32303cf4d891-5f7c7c5b {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_26cf4267-3a90-03b0-7d88-cf98de04701c-5f7c7c5b, #w-node-d3d728c8-0307-9ec9-8997-b794991c520d-5f7c7c5b {
  grid-column: span 2 / span 2;
}

#w-node-_86680e93-351c-59a1-0067-b2d57c13896f-5f7c7c5b {
  grid-area: span 1 / span 5 / span 1 / span 5;
}

#w-node-_5d5ac04e-626f-e2bd-ba2c-8a1157b2eda4-5f7c7c5b {
  grid-column: span 2 / span 2;
}

#w-node-_8734ac60-bf7c-ac47-bf21-501caa438859-5f7c7c5b {
  grid-column: span 1 / span 1;
}

#w-node-fd90c382-1486-6d59-724c-5b84d4616719-d4616718, #w-node-f8c63d18-44f5-0268-dcf1-6075f8aea797-4bd20f1f {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-f8c63d18-44f5-0268-dcf1-6075f8aea798-4bd20f1f, #w-node-f8c63d18-44f5-0268-dcf1-6075f8aea79d-4bd20f1f {
  justify-self: start;
}

#w-node-f8c63d18-44f5-0268-dcf1-6075f8aea7a2-4bd20f1f {
  grid-area: 2 / 3 / 3 / 5;
}

#w-node-f8c63d18-44f5-0268-dcf1-6075f8aea7a3-4bd20f1f {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-d7141cd2-775f-07dc-3bd4-0a8762cb4221-4bd20f1f {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-_9a57061a-1a0c-95f7-29fb-b275e62d70dc-4bd20f1f, #w-node-_10049719-af3a-791f-b004-78a94b8f2fac-4bd20f1f, #w-node-_04f46b3f-5093-ef67-5316-1ae3df93be8d-4bd20f1f {
  grid-column: span 2 / span 2;
}

#w-node-e293c79f-165c-d2e3-a2ab-c806e9e14129-4bd20f1f {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_0a8d1411-8edd-4853-d531-ea8c0602db3e-45fd5b3f, #w-node-_0a8d1411-8edd-4853-d531-ea8c0602db45-45fd5b3f {
  grid-column: span 2 / span 2;
}

#w-node-b8b679a5-ee4e-947a-903b-e7f03351e821-45fd5b3f {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_3765c89f-18a0-4ef0-4b26-c9a08819e148-45fd5b3f {
  grid-area: span 1 / span 5 / span 1 / span 5;
}

#w-node-_5d98d550-9063-e0bb-1926-95d45e83dc63-45fd5b3f {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-c6be3a87-ed37-f85c-8805-29e7120e3334-45fd5b3f {
  grid-area: span 1 / span 5 / span 1 / span 5;
}

#w-node-_69f2c3ee-1b73-ac90-efdc-7d70eb7adf60-45fd5b3f, #w-node-_69f2c3ee-1b73-ac90-efdc-7d70eb7adf67-45fd5b3f {
  grid-column: span 2 / span 2;
}

#w-node-_626de594-3e10-cc2b-9d4e-ecf5d2d8d012-45fd5b3f {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_2337f9f5-8a5b-8cec-b6bc-ef6354bc858b-45fd5b3f {
  align-self: center;
}

#w-node-d228dea3-f309-0384-a5be-92e53070e7b9-45fd5b3f, #w-node-e524b83d-a4e3-c97a-d66c-12233e07ff00-45fd5b3f {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-a5090fa2-033c-3b18-6377-e26636438332-45fd5b3f {
  align-self: center;
}

#w-node-a5090fa2-033c-3b18-6377-e26636438334-45fd5b3f, #w-node-a5090fa2-033c-3b18-6377-e26636438346-45fd5b3f {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-ca406da8-336a-2108-699f-f5872ced6a51-45fd5b3f {
  align-self: center;
}

#w-node-ca406da8-336a-2108-699f-f5872ced6a53-45fd5b3f, #w-node-ca406da8-336a-2108-699f-f5872ced6a62-45fd5b3f {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_9702ccf7-4160-1787-6689-a403f344178c-45fd5b3f {
  align-self: center;
}

#w-node-_9702ccf7-4160-1787-6689-a403f344178e-45fd5b3f, #w-node-_9702ccf7-4160-1787-6689-a403f344179d-45fd5b3f {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-ae492d7c-0ee7-9497-bd19-e56af98934ea-45fd5b3f {
  align-self: center;
}

#w-node-ae492d7c-0ee7-9497-bd19-e56af98934ec-45fd5b3f, #w-node-ae492d7c-0ee7-9497-bd19-e56af98934fb-45fd5b3f {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_97261608-057d-a3f3-e754-cefc40031a9e-45fd5b3f {
  align-self: center;
}

#w-node-_97261608-057d-a3f3-e754-cefc40031aa0-45fd5b3f, #w-node-_97261608-057d-a3f3-e754-cefc40031aaf-45fd5b3f {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_98fbe5b1-f605-2a5b-4f6c-a5d08be6447b-45fd5b3f {
  align-self: center;
}

#w-node-_98fbe5b1-f605-2a5b-4f6c-a5d08be6447d-45fd5b3f, #w-node-_98fbe5b1-f605-2a5b-4f6c-a5d08be6448c-45fd5b3f {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

@media screen and (max-width: 991px) {
  #w-node-_8734ac60-bf7c-ac47-bf21-501caa438859-0b17a7eb, #w-node-_04f46b3f-5093-ef67-5316-1ae3df93be8d-0b17a7eb, #w-node-e77657ec-ff17-bc21-98b5-30fdd8e171c8-5f7c7c5b, #w-node-_8734ac60-bf7c-ac47-bf21-501caa438859-5f7c7c5b, #w-node-_04f46b3f-5093-ef67-5316-1ae3df93be8d-4bd20f1f {
    grid-column: span 2 / span 2;
  }
}

@media screen and (max-width: 479px) {
  #w-node-_5d5ac04e-626f-e2bd-ba2c-8a1157b2eda4-0b17a7eb, #w-node-_8734ac60-bf7c-ac47-bf21-501caa438859-0b17a7eb, #w-node-_10049719-af3a-791f-b004-78a94b8f2fac-0b17a7eb, #w-node-_04f46b3f-5093-ef67-5316-1ae3df93be8d-0b17a7eb {
    grid-column: span 1 / span 1;
  }

  #w-node-b6f341ed-fd53-0ac8-b7cc-7ff8d6d8a57c-5f7c7c5b {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }

  #w-node-_4eaad92f-9012-c100-dccc-e3361c20d2af-5f7c7c5b {
    grid-column-start: 1;
  }

  #w-node-e77657ec-ff17-bc21-98b5-30fdd8e171c2-5f7c7c5b, #w-node-e77657ec-ff17-bc21-98b5-30fdd8e171c8-5f7c7c5b {
    grid-column: span 1 / span 1;
  }

  #w-node-b8524681-f28e-9f44-e6a2-4b1ff56d75fc-5f7c7c5b {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_7e66a639-1a37-e098-bd9b-f9147ab37e70-5f7c7c5b {
    grid-column: span 1 / span 1;
  }

  #w-node-_924c1ab4-f6ca-fd53-1cf2-32303cf4d88f-5f7c7c5b {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_26cf4267-3a90-03b0-7d88-cf98de04701c-5f7c7c5b, #w-node-d3d728c8-0307-9ec9-8997-b794991c520d-5f7c7c5b {
    grid-column: span 1 / span 1;
  }

  #w-node-a0f28f49-591b-0ded-0b8a-e2d94bc7e287-5f7c7c5b {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_5d5ac04e-626f-e2bd-ba2c-8a1157b2eda4-5f7c7c5b, #w-node-_8734ac60-bf7c-ac47-bf21-501caa438859-5f7c7c5b {
    grid-column: span 1 / span 1;
  }

  #w-node-f8c63d18-44f5-0268-dcf1-6075f8aea797-4bd20f1f {
    grid-column: span 4 / span 4;
  }

  #w-node-_10049719-af3a-791f-b004-78a94b8f2fac-4bd20f1f, #w-node-_04f46b3f-5093-ef67-5316-1ae3df93be8d-4bd20f1f {
    grid-column: span 1 / span 1;
  }

  #w-node-a679e351-387b-05d9-8ce4-a029c9c963e2-4bd20f1f {
    grid-area: 1 / 2 / 2 / 3;
  }

  #w-node-d9506487-9561-ffb2-8998-1ff6479d9b08-45fd5b3f {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_69f2c3ee-1b73-ac90-efdc-7d70eb7adf60-45fd5b3f, #w-node-_69f2c3ee-1b73-ac90-efdc-7d70eb7adf67-45fd5b3f {
    grid-column: span 1 / span 1;
  }

  #w-node-e524b83d-a4e3-c97a-d66c-12233e07ff15-45fd5b3f, #w-node-a5090fa2-033c-3b18-6377-e26636438358-45fd5b3f {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
}

/* == JR: The Journey — horizontal section content system (rev. 2026-08-01) ==
   A timeline rail runs the length of the track with cards hanging off it,
   alternating above and below. Each step is one glass media card: the
   image fills it edge to edge and the copy sits on a progressive blur —
   a stack of backdrop-filter layers, each masked a little higher than the
   last, so the frost is dense under the text and dissolves as it climbs.

   Four steps, all of them media — the text-only opening and closing panels
   are gone. Fewer cards means less track to travel, so --jr-pad carries the
   difference: it is the gutter between cards *and* the section's scroll
   length, since the engine derives the pin distance from track width.

   The card is square because the four sources are (1080x1080), and it holds
   that ratio at every breakpoint: the whole frame is image, and the whole
   image is in frame. That is also why these images dropped
   .image.is-horizontal-scroll — the engine's per-image parallax works by
   sizing the photo 4rem larger than its frame and sliding it, which crops
   whatever is at the edges (it was eating the logo on three of the four).
   Losing that selector leaves the engine's image NodeList empty for this
   section and builds no parallax timelines; the track's own scroll is
   untouched.

   Engine contract preserved: .horizontal-track children stay flex:none,
   .horizontal-item-w wraps every reveal unit, text keeps .text-eyebrow /
   .horizontal-item-text + split-text. */

.jr-panel {
  --jr-card-h: 42vh;
  /* 1480 x 1080 — the exact ratio of the four source photographs, so
     object-fit: cover never crops a pixel of them. */
  --jr-card-w: calc(var(--jr-card-h) * (1480 / 1080));
  --jr-pad: 7rem;
  --jr-ink: #f2f4ef;
  --jr-line: color-mix(in srgb, var(--color--lime) 30%, transparent);
  --jr-shell: #1b1d1d;
  --jr-rim: #ffffff26;
  flex: none;
  width: calc(var(--jr-card-w) + var(--jr-pad) * 2);
  height: 100%;
  padding-left: var(--jr-pad);
  padding-right: var(--jr-pad);
  display: flex;
  position: relative;
}

.jr-panel:before {
  content: "";
  pointer-events: none;
  background-color: var(--jr-line);
  height: 1px;
  position: absolute;
  inset: 50% 0 auto;
}

/* the rail has no panels to start and finish on any more, so it fades in
   and out inside the outer two cards instead of being cut off mid-air */
.jr-panel:first-child:before {
  background-color: #0000;
  background-image: linear-gradient(90deg, #0000, var(--jr-line) 46%);
}

.jr-panel:last-child:before {
  background-color: #0000;
  background-image: linear-gradient(90deg, var(--jr-line) 36%, #0000);
}

/* Only in pinned mode: the last panel carries a lead-out. It buys back the
   track width the two deleted panels took with them — the engine derives
   both the pin distance and the scroll length from track width, so without
   it four cards would clear the viewport before the pin even engages. */
@media screen and (min-width: 992px) {
  .jr-panel:last-child {
    width: calc(var(--jr-card-w) + var(--jr-pad) + 16vw);
    padding-right: 16vw;
  }
}

.jr-node {
  z-index: 1;
  background-color: var(--color--lime);
  border-radius: 50%;
  width: .4375rem;
  height: .4375rem;
  margin: -.21875rem 0 0 -.21875rem;
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--color--lime) 12%, transparent);
}

.jr-node.is-end {
  width: .6875rem;
  height: .6875rem;
  margin: -.34375rem 0 0 -.34375rem;
}

.jr-node:after {
  content: "";
  background-image: linear-gradient(var(--jr-line), #0000);
  width: 1px;
  height: 2vh;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.is-up .jr-node:after {
  background-image: linear-gradient(#0000, var(--jr-line));
  bottom: 100%;
}

.is-down .jr-node:after {
  top: 100%;
}

/* card shell: a bezel of glass around the media */
.jr-card {
  flex-flow: column;
  width: 100%;
  height: 50%;
  display: flex;
}

.is-up .jr-card {
  justify-content: flex-end;
  padding-bottom: 2.6vh;
}

.is-down .jr-card {
  justify-content: flex-start;
  margin-top: auto;
  padding-top: 2.6vh;
}

.jr-card-in {
  z-index: 0;
  background-color: var(--jr-shell);
  background-image: linear-gradient(#ffffff14, #0000 38%);
  border: 1px solid var(--jr-rim);
  border-radius: 1.5rem;
  flex: none;
  width: 100%;
  height: var(--jr-card-h);
  padding: .3125rem;
  transition: border-color .5s cubic-bezier(.25, .46, .45, .94);
  display: block;
  position: relative;
  overflow: clip;
}

.jr-card-in:hover {
  border-color: color-mix(in srgb, var(--color--lime) 60%, transparent);
}

.jr-frame {
  border-radius: 1.1875rem;
  width: 100%;
  height: 100%;
  transition: filter .55s cubic-bezier(.25, .46, .45, .94);
  position: relative;
  overflow: clip;
}

/* square frame, square source: object-fit has nothing left to crop */
.jr-frame .image {
  pointer-events: none;
  display: block;
}

.jr-card-in:hover .jr-frame {
  filter: saturate(1.12) brightness(1.05);
}

/* progressive blur: four masked backdrop layers, each starting higher */
.jr-glass, .jr-scrim, .jr-sheen {
  pointer-events: none;
  position: absolute;
}

.jr-glass {
  z-index: 1;
  border-radius: 0 0 1.1875rem 1.1875rem;
  height: 62%;
  transition: height .55s cubic-bezier(.25, .46, .45, .94);
  inset: auto .3125rem .3125rem;
  overflow: clip;
}

.jr-card-in:hover .jr-glass {
  height: 68%;
}

.jr-glass span {
  position: absolute;
  inset: 0;
}

.jr-glass span:first-child {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(to top, #000 0 26%, #0000 62%);
  mask-image: linear-gradient(to top, #000 0 26%, #0000 62%);
}

.jr-glass span:nth-child(2) {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to top, #000 0 16%, #0000 48%);
  mask-image: linear-gradient(to top, #000 0 16%, #0000 48%);
}

.jr-glass span:nth-child(3) {
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter: blur(13px);
  -webkit-mask-image: linear-gradient(to top, #000 0 8%, #0000 34%);
  mask-image: linear-gradient(to top, #000 0 8%, #0000 34%);
}

.jr-glass span:nth-child(4) {
  -webkit-backdrop-filter: blur(26px);
  backdrop-filter: blur(26px);
  -webkit-mask-image: linear-gradient(to top, #000 0 2%, #0000 20%);
  mask-image: linear-gradient(to top, #000 0 2%, #0000 20%);
}

/* tint under the frost so the copy always holds */
.jr-scrim {
  z-index: 2;
  background-image: linear-gradient(#0000 38%, #0d0f0f7a 64%, #0a0c0cd1);
  border-radius: 0 0 1.1875rem 1.1875rem;
  inset: auto .3125rem .3125rem;
  height: 62%;
}

/* light sweep on hover */
.jr-sheen {
  z-index: 3;
  background-image: linear-gradient(105deg, #0000 42%, #ffffff2e 50%, #0000 58%);
  border-radius: 1.1875rem;
  inset: .3125rem;
  transition: transform .85s cubic-bezier(.25, .46, .45, .94), opacity .4s linear;
  transform: translateX(-120%);
  opacity: 0;
}

.jr-card-in:hover .jr-sheen {
  opacity: 1;
  transform: translateX(120%);
}

/* copy block */
.jr-info {
  z-index: 4;
  flex-flow: column;
  gap: .4rem;
  padding: 0 1.15rem 1.15rem;
  display: flex;
  position: absolute;
  inset: auto 0 0;
}

.jr-info-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
  display: flex;
}

.jr-title {
  color: var(--jr-ink);
  letter-spacing: .01rem;
  font-size: 1.3125rem;
  line-height: 1.08;
}

.jr-badge {
  color: #10120f;
  background-color: var(--color--lime);
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 1.375rem;
  height: 1.375rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .625rem;
  display: flex;
}

.jr-body {
  color: var(--jr-ink);
  max-width: 100%;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75rem;
  font-weight: 300;
  line-height: 1.5;
  opacity: .74;
}

.jr-foot {
  align-items: center;
  gap: .55rem;
  margin-top: .25rem;
  display: flex;
}

.jr-chip {
  color: var(--jr-ink);
  letter-spacing: .06em;
  align-items: center;
  gap: .28rem;
  font-size: .5625rem;
  display: inline-flex;
  opacity: .78;
}

.jr-ico {
  width: .75rem;
  height: .75rem;
  flex: none;
}

.jr-pill {
  color: #10120f;
  letter-spacing: .04em;
  background-color: #ffffffe6;
  border-radius: 999px;
  align-items: center;
  gap: .18rem;
  margin-left: auto;
  padding: .3rem .6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .5625rem;
  transition: background-color .45s cubic-bezier(.25, .46, .45, .94);
  display: inline-flex;
}

.jr-pill-sep {
  opacity: .45;
}

.jr-card-in:hover .jr-pill {
  background-color: var(--color--lime);
}

/* below the pin breakpoint the track is a plain vertical column. The card
   takes the column's width and derives its height from the ratio, so the
   1:1 framing survives every screen instead of only the pinned one. */
@media screen and (max-width: 991px) {
  .jr-panel {
    --jr-card-w: 100%;
    width: 100%;
    max-width: 26rem;
    height: auto;
    padding-left: 0;
    padding-right: 0;
  }

  .jr-panel:before, .jr-node {
    display: none;
  }

  .jr-card {
    height: auto;
  }

  .is-up .jr-card, .is-down .jr-card {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .jr-card-in {
    aspect-ratio: 1480 / 1080;
    height: auto;
  }

  .jr-title {
    font-size: 1.375rem;
  }
}

/* == AB: footer identity == */
/* the footer signature is Alaa's static SVG now: show the (normally
   designer-only) placeholder and hide the Lando signature.riv canvas */
.footer-rive-w [data-rive-placeholder] {
  display: block;
}

.footer-rive-w .marquee-gl-rive-w {
  display: none;
}

/* == AB: menu identity == */
/* The emblem above "i design what i build" is Alaa's mark now, in place of
   the helmet-reef rive canvas. It is drawn with currentColor so it inherits
   .nav-helmet-rive-w's green-off-white-2 — the colour the rive was tinted
   with — rather than the mint the source SVG ships with. Square, so it needs
   its own box: .base-helmet-rive was a 6.06 x 3.19rem letterbox. */
.nav-menu-mark {
  width: 3.5rem;
  height: 3.5rem;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative;
}

.nav-menu-mark svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

@media screen and (max-width: 991px) {
  .nav-menu-mark {
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* == AB: brand marks == */
.nav-brand svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* centre mark: two stacked copies. The base rides the nav theme; the mint
   copy wipes up on hover — the fill alaa.riv used to animate. */
.page-ln4-svg {
  position: relative;
}

.page-ln4-svg svg {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
}

.page-ln4-svg .mark-fill {
  clip-path: inset(100% 0 0 0);
  transition: clip-path .45s cubic-bezier(.65, 0, .35, 1);
}

.nav-middle:hover .page-ln4-svg .mark-fill,
.nav-middle:focus-visible .page-ln4-svg .mark-fill {
  clip-path: inset(0 0 0 0);
}

/* and it only belongs at the very top of the page (nav-mark.js mirrors the
   old logo-active rule: 10vh on desktop, 10px on touch) */
.page-ln4-pos {
  transition: opacity .3s ease, transform .3s ease;
}

.page-ln4-pos.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-.5rem);
}

@media (prefers-reduced-motion: reduce) {
  .page-ln4-svg .mark-fill,
  .page-ln4-pos {
    transition-duration: .01s;
  }
}

/* loading / page-transition screen: Lando's rive artwork (a cut-out "4")
   can't be recoloured, so the canvas is faded out and the mint field comes
   from CSS with Alaa's mark centred. The engine still loads and drives the
   rive, so its timing and state machine are untouched; the exit is softened
   into a fade because the wipe lived inside that artwork. */
.transition-w {
  opacity: 1;
  background-color: var(--color--lime) !important;
  transition: visibility 0s linear .68s;
  -webkit-mask-image: linear-gradient(#000, #000), url("/assets/img/site/alaa-abbod-logo-svg.svg");
  mask-image: linear-gradient(#000, #000), url("/assets/img/site/alaa-abbod-logo-svg.svg");
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center, center;
  mask-position: center, center;
  -webkit-mask-size: 100% 100%, 0 0;
  mask-size: 100% 100%, 0 0;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* the engine flips this inline style when the page is ready: the mint field
   opens through the mark itself, so the site appears out of the logo, then
   the remainder fades (the mark is a counter-form, so its negative space
   would otherwise linger). visibility is held back until the reveal ends. */
.transition-w[style*="visibility: hidden"] {
  animation: ab-burst .68s cubic-bezier(.66, 0, .28, 1) forwards;
}

.transition-w[style*="visibility: hidden"] .transition-mark {
  opacity: 0;
  transition: opacity .16s linear;
}

@keyframes ab-burst {
  0% {
    -webkit-mask-size: 100% 100%, min(18vw, 9rem) min(18vw, 9rem);
    mask-size: 100% 100%, min(18vw, 9rem) min(18vw, 9rem);
    opacity: 1;
  }

  55% {
    opacity: 1;
  }

  100% {
    -webkit-mask-size: 100% 100%, 280vmax 280vmax;
    mask-size: 100% 100%, 280vmax 280vmax;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .transition-w[style*="visibility: hidden"] {
    animation-duration: .3s;
  }
}

.transition-rive {
  opacity: 0;
}

.transition-mark {
  pointer-events: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}

.transition-mark svg {
  width: min(18vw, 9rem);
  height: auto;
}

/* while the page loads, the mark traces itself in — a stroke draw over the
   compound path (pathLength="1" is set on it in shell-standard.html), then
   the fill blooms. It holds the finished state until the engine's ready
   flip fires ab-burst above; the .16s mark fade there covers a mid-draw
   hand-off. The original site's draw lived inside page-transition.riv,
   which is still loaded (engine timing untouched) but hidden. */
.transition-mark svg path {
  stroke: var(--color--dark-green);
  stroke-width: 3;
  stroke-linecap: butt;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  animation: ab-mark-draw 1.6s cubic-bezier(.65, 0, .35, 1) both;
}

@keyframes ab-mark-draw {
  0% {
    stroke-dashoffset: 1;
    fill-opacity: 0;
  }

  55% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }

  80% {
    fill-opacity: 1;
  }

  100% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .transition-mark svg path {
    animation: none;
  }
}

/* == AB: DESIGN / CODE headings == */
/* the engine clones every [split-text] heading for its reveal wipe and the
   clone carries no classes, so colour the pair together */
.otot-home-text-w .text-impact-reg-brier.c-lime,
.otot-home-text-w h2:has(+ .text-impact-reg-brier.c-lime) {
  color: var(--color--lime);
}

/* == AB: services deck (svc-) == */
/* Sticky card deck under the hero. The wrappers pin natively (sticky, never
   transformed); /assets/js/home-fx/init.js scrubs the inner card (scale +
   translate) and the dim layer (opacity) from scroll progress. Flat by
   design: no shadows, no filters, no keyframes — the old site's version
   died on backdrop-blur over 80vh cards. */
.svc-s {
  position: relative;
}
.svc-head-cell {
  grid-column: span 2;
}
.svc-deck {
  /* z:0 isolates the card z-indexes so they can never paint over later
     sections' sticky content */
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: 10vh;
  padding-bottom: 10vh;
}
.svc-card-w {
  position: sticky;
  top: 10vh;
  height: 80vh;
}
.svc-card-w:nth-child(1) { z-index: 1; }
.svc-card-w:nth-child(2) { z-index: 2; }
.svc-card-w:nth-child(3) { z-index: 3; }
.svc-card-w:nth-child(4) { z-index: 4; }
.svc-card {
  position: relative;
  display: flex;
  height: 100%;
  overflow: clip;
  /* The field behind the deck is the dot-field, and its luminance moves with
     scroll — so the fill alone can never guarantee the card's edge. The rim is
     what defines it, and it carries a little more weight now that the surface
     no longer stands off the page by brightness alone. */
  background-color: var(--color--surface-deep);
  border: 1px solid rgba(237, 245, 243, 0.20);
  border-radius: 1.25rem;
  transform-origin: top center;
  will-change: transform;
}
.svc-card-text {
  display: flex;
  width: 40%;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--gap);
  padding: calc(var(--gap) * 2);
}
.svc-card-text .text-eyebrow {
  color: var(--color--lime);
}
.svc-card-title {
  font-size: 2.75rem;
  line-height: 0.9;
  letter-spacing: -0.0625rem;
  text-transform: uppercase;
  font-variation-settings: "wght" 750, "wdth" 93;
}
.svc-card-body {
  /* number + title live at the top so the card stays readable while the
     next one rises over it; the body anchors to the bottom edge */
  margin-top: auto;
  max-width: 25rem;
  color: var(--color--grey-on-track);
}
.svc-card-visual {
  width: 60%;
  overflow: clip;
}
.svc-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.svc-card-dim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: var(--color--dark-green);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}
/* entrance reveal, same contract as the case studies' .cs-rise; the hfx-js gate
   comes from an inline one-liner so no-JS visitors never see hidden content */
.hfx-js .svc-reveal,
.hfx-js .vx-reveal {
  opacity: 0;
  transform: translateY(2.2rem);
}
.hfx-js .svc-reveal.is-in,
.hfx-js .vx-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.9s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media screen and (max-width: 991px) {
  .svc-card-w {
    top: 5vh;
    height: auto;
  }
  .svc-card {
    min-height: 74svh;
    flex-direction: column-reverse;
  }
  .svc-card-text,
  .svc-card-visual {
    width: 100%;
  }
  .svc-card-visual {
    flex: none;
    aspect-ratio: 4 / 3;
  }
  .svc-card-title {
    font-size: 2.25rem;
  }
  .svc-card-body {
    margin-top: 0;
  }
}

/* == AB: visual explorations ring (vx-) == */
/* Pinned 3D ring: cards sit on a cylinder via rotateY + NEGATIVE translateZ
   and hide their backfaces, so the camera looks through the invisible near
   half at a concave wall of images. The sticky stage replaces a GSAP pin;
   init.js lerps rotationY from the wrapper's scroll progress. Radius math:
   min non-overlap = (15/2)/sin(180/14) = 33.7rem; 36.25rem leaves air. */
.vx-wrap {
  position: relative;
  z-index: 0;
  height: calc(100vh + 62.5rem);
  height: calc(100svh + 62.5rem);
}
.vx-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--gap) * 2);
  /* the stage fills the viewport, so it must clear the fixed nav itself */
  padding-top: var(--on-t-nav-spacer, 5.375rem);
  padding-bottom: var(--gap);
}
.vx-head-cell {
  grid-column: span 2;
}
.vx-viewport {
  position: relative;
  flex: 1;
  min-height: 16rem;
}
/* perspective lives alone on this layer so the reveal transition above it
   and the track rotation below it never share a transform with it */
.vx-persp {
  position: absolute;
  inset: 0;
  perspective: 50rem;
}
.vx-track {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(6.25rem);
  will-change: transform;
}
.vx-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15rem;
  height: 21.25rem;
  overflow: clip;
  background-color: var(--color--green-off-white-1);
  border: 1px solid rgba(40, 44, 32, 0.18);
  border-radius: var(--radius--small);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.vx-card:nth-child(1)  { transform: translate(-50%, -50%) rotateY(0deg) translateZ(-36.25rem); }
.vx-card:nth-child(2)  { transform: translate(-50%, -50%) rotateY(25.7143deg) translateZ(-36.25rem); }
.vx-card:nth-child(3)  { transform: translate(-50%, -50%) rotateY(51.4286deg) translateZ(-36.25rem); }
.vx-card:nth-child(4)  { transform: translate(-50%, -50%) rotateY(77.1429deg) translateZ(-36.25rem); }
.vx-card:nth-child(5)  { transform: translate(-50%, -50%) rotateY(102.8571deg) translateZ(-36.25rem); }
.vx-card:nth-child(6)  { transform: translate(-50%, -50%) rotateY(128.5714deg) translateZ(-36.25rem); }
.vx-card:nth-child(7)  { transform: translate(-50%, -50%) rotateY(154.2857deg) translateZ(-36.25rem); }
.vx-card:nth-child(8)  { transform: translate(-50%, -50%) rotateY(180deg) translateZ(-36.25rem); }
.vx-card:nth-child(9)  { transform: translate(-50%, -50%) rotateY(205.7143deg) translateZ(-36.25rem); }
.vx-card:nth-child(10) { transform: translate(-50%, -50%) rotateY(231.4286deg) translateZ(-36.25rem); }
.vx-card:nth-child(11) { transform: translate(-50%, -50%) rotateY(257.1429deg) translateZ(-36.25rem); }
.vx-card:nth-child(12) { transform: translate(-50%, -50%) rotateY(282.8571deg) translateZ(-36.25rem); }
.vx-card:nth-child(13) { transform: translate(-50%, -50%) rotateY(308.5714deg) translateZ(-36.25rem); }
.vx-card:nth-child(14) { transform: translate(-50%, -50%) rotateY(334.2857deg) translateZ(-36.25rem); }
.vx-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
/* CTA row into /projects. It sits AFTER .vx-wrap, in normal flow — not inside
   the sticky stage. Two reasons: a third stage child competes with
   .vx-viewport for the height that sets the ring's rendered radius, and an
   element pinned at the viewport bottom can never satisfy the reveal
   observer's -12% bottom rootMargin, so it would stay at opacity 0 forever. */
.vx-cta-w {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gap) * 1.5);
  flex-wrap: wrap;
  padding-block: 1rem 5rem;
}
.vx-cta-note {
  margin: 0;
  color: var(--color--dark-green-tint-2);
}
@media screen and (max-width: 767px) {
  /* same trick as the source: scale the perspective element itself —
     perspective applies to its children in the scaled local space */
  .vx-persp {
    transform: scale(0.75);
  }
  /* the mobile nav pills sit lower than the desktop bar */
  .vx-stage {
    padding-top: 7rem;
  }
  .vx-cta-w {
    gap: var(--gap);
  }
  .vx-cta-note {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hfx-js .svc-reveal,
  .hfx-js .vx-reveal {
    transform: none;
  }
  .hfx-js .svc-reveal.is-in,
  .hfx-js .vx-reveal.is-in {
    transition: opacity 0.5s linear;
  }
  .vx-wrap {
    height: 100vh;
    height: 100svh;
  }
  .vx-track {
    transform: translateZ(6.25rem) rotateY(-20deg);
  }
}

/* == AB: brand mark draw (hfx-mark) == */
/* The creativity-and-code mark, drawn live. Every path carries
   pathLength="100"; a single custom property (--hfx-p, 0..1) drives all
   fourteen stroke traces and fill blooms through clamp() windows, so JS
   writes exactly one value per frame. The default of 1 means the mark
   renders fully drawn with no JS, under reduced motion, and in static
   placements (the mobile hero mark is a plain <img> of the source file). */
.hfx-mark {
  display: block;
  width: 100%;
  height: auto;
  color: var(--color--lime);
}
.hfx-mark path {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.1;
  /* butt caps: round ones leave a pen-tip dot at zero progress */
  stroke-linecap: butt;
  stroke-linejoin: round;
  stroke-dasharray: 100;
}
.hfx-mark .hfx-p2,
.hfx-mark .hfx-p3,
.hfx-mark .hfx-p4,
.hfx-mark .hfx-p5,
.hfx-mark .hfx-p6,
.hfx-mark .hfx-p7 {
  stroke-width: 0.7;
}
/* stagger windows: braces -> dome -> brain -> base -> rays */
.hfx-mark .hfx-p1 {
  stroke-dashoffset: calc(100 * (1 - clamp(0, (var(--hfx-p, 1) - 0.44) / 0.14, 1)));
  fill-opacity: clamp(0, (var(--hfx-p, 1) - 0.74) / 0.18, 1);
}
.hfx-mark .hfx-p2 {
  stroke-dashoffset: calc(100 * (1 - clamp(0, (var(--hfx-p, 1) - 0.63) / 0.1, 1)));
  fill-opacity: clamp(0, (var(--hfx-p, 1) - 0.82) / 0.14, 1);
}
.hfx-mark .hfx-p3 {
  stroke-dashoffset: calc(100 * (1 - clamp(0, (var(--hfx-p, 1) - 0.58) / 0.1, 1)));
  fill-opacity: clamp(0, (var(--hfx-p, 1) - 0.8) / 0.14, 1);
}
.hfx-mark .hfx-p4 {
  stroke-dashoffset: calc(100 * (1 - clamp(0, (var(--hfx-p, 1) - 0.68) / 0.07, 1)));
  fill-opacity: clamp(0, (var(--hfx-p, 1) - 0.86) / 0.14, 1);
}
.hfx-mark .hfx-p5 {
  stroke-dashoffset: calc(100 * (1 - clamp(0, (var(--hfx-p, 1) - 0.61) / 0.1, 1)));
  fill-opacity: clamp(0, (var(--hfx-p, 1) - 0.81) / 0.14, 1);
}
.hfx-mark .hfx-p6 {
  stroke-dashoffset: calc(100 * (1 - clamp(0, (var(--hfx-p, 1) - 0.56) / 0.1, 1)));
  fill-opacity: clamp(0, (var(--hfx-p, 1) - 0.79) / 0.14, 1);
}
.hfx-mark .hfx-p7 {
  stroke-dashoffset: calc(100 * (1 - clamp(0, (var(--hfx-p, 1) - 0.66) / 0.09, 1)));
  fill-opacity: clamp(0, (var(--hfx-p, 1) - 0.84) / 0.14, 1);
}
.hfx-mark .hfx-p8 {
  stroke-dashoffset: calc(100 * (1 - clamp(0, (var(--hfx-p, 1) - 0.5) / 0.14, 1)));
  fill-opacity: clamp(0, (var(--hfx-p, 1) - 0.76) / 0.18, 1);
}
.hfx-mark .hfx-p9 {
  stroke-dashoffset: calc(100 * (1 - clamp(0, (var(--hfx-p, 1) - 0.36) / 0.2, 1)));
  fill-opacity: clamp(0, (var(--hfx-p, 1) - 0.7) / 0.2, 1);
}
.hfx-mark .hfx-p10 {
  stroke-dashoffset: calc(100 * (1 - clamp(0, (var(--hfx-p, 1) - 0.22) / 0.24, 1)));
  fill-opacity: clamp(0, (var(--hfx-p, 1) - 0.65) / 0.22, 1);
}
.hfx-mark .hfx-p11 {
  stroke-dashoffset: calc(100 * (1 - clamp(0, (var(--hfx-p, 1) - 0.26) / 0.24, 1)));
  fill-opacity: clamp(0, (var(--hfx-p, 1) - 0.67) / 0.22, 1);
}
.hfx-mark .hfx-p12 {
  stroke-dashoffset: calc(100 * (1 - clamp(0, (var(--hfx-p, 1) - 0.1) / 0.28, 1)));
  fill-opacity: clamp(0, (var(--hfx-p, 1) - 0.6) / 0.25, 1);
}
.hfx-mark .hfx-p13 {
  stroke-dashoffset: calc(100 * (1 - clamp(0, var(--hfx-p, 1) / 0.22, 1)));
  fill-opacity: clamp(0, (var(--hfx-p, 1) - 0.55) / 0.25, 1);
}
.hfx-mark .hfx-p14 {
  stroke-dashoffset: calc(100 * (1 - clamp(0, (var(--hfx-p, 1) - 0.03) / 0.22, 1)));
  fill-opacity: clamp(0, (var(--hfx-p, 1) - 0.57) / 0.25, 1);
}
/* animated placements start undrawn only when JS is up; the JS then owns
   --hfx-p per frame (scroll scrub on the callout, one-shot on the hero) */
.hfx-js .hfx-mark[data-hfx-mark="hero"],
.hfx-js .hfx-mark[data-hfx-mark="callout"] {
  --hfx-p: 0;
}
/* the mark is landscape (1.65:1) — wider boxes than the old square marks */
.callout-icon.is-hfx {
  width: 8.5rem;
}
.hero-mark-mob {
  display: block;
  width: 11rem;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
@media (prefers-reduced-motion: reduce) {
  .hfx-mark {
    --hfx-p: 1 !important;
  }
}

/* == AB: about dossier (abx-) == */
/* About Me as a pinned scene: the wrapper is one viewport plus 26rem of
   scrub; the sticky stage holds a statement that reveals line by line in
   the site's own wipe language, two EQUAL cards (portrait / certificate)
   and a VERIFIED seal that simply stand there, and a terminal line that
   types itself. Flat: 1px lines, token
   radii, no shadows. No JS / reduced motion render the settled end state. */
.abx-s {
  position: relative;
  z-index: 0;
  color: var(--color--dark-green);
}
.abx-visor {
  /* static: the black slab above must ALWAYS end in this curve — scrubbing
     it left a flat glued junction while the section approached */
  z-index: 1;
  pointer-events: none;
  background-color: var(--color--black);
  clip-path: ellipse(70% 100% at 50% 0%);
  height: 8rem;
  position: absolute;
  inset: -1px 0% auto;
}
.abx-wrap {
  height: calc(100vh + 26rem);
  height: calc(100svh + 26rem);
}
.abx-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding-top: var(--on-t-nav-spacer, 5.375rem);
  padding-bottom: 1.5rem;
  text-align: center;
}
.abx-head .text-eyebrow {
  color: var(--color--dark-green-tint-2);
}
.abx-statement {
  max-width: 62rem;
  padding-inline: var(--padding--container);
  font-size: 3.25rem;
  line-height: 1.02;
  letter-spacing: -0.0625rem;
  text-transform: uppercase;
  font-variation-settings: "wght" 750, "wdth" 93;
}
.abx-statement .abx-b {
  font-family: Orbitron, Arial, sans-serif;
  font-weight: 700;
  font-variation-settings: normal;
  color: var(--color--lime-off);
}
/* the site's own reveal: a coloured bar wipes each line open (engine AE()
   timings — 0.6s clip, the bar retracting 0.3s later, staggered per line).
   The engine can't drive it here: its trigger would fire during the
   approach, while this scene is deliberately still empty — so home-fx adds
   .is-revealed the moment the stage pins. */
.abx-row {
  display: block;
}
.abx-line {
  position: relative;
  display: inline-block;
}
.abx-line-bar {
  position: absolute;
  inset: 0;
  z-index: 5;
  background-color: var(--color--dark-green-tint-1);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  pointer-events: none;
}
.hfx-js .abx-line {
  clip-path: inset(0 100% 0 0);
}
.hfx-js .abx-line-bar {
  transform: scaleX(1);
}
.hfx-js .abx-stage.is-revealed .abx-line {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--abx-d, 0s);
}
.hfx-js .abx-stage.is-revealed .abx-line-bar {
  transform: scaleX(0);
  transition: transform 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) calc(var(--abx-d, 0s) + 0.3s);
}
.abx-statement .abx-row:nth-child(1) .abx-line {
  --abx-d: 0.15s;
}
.abx-statement .abx-row:nth-child(2) .abx-line {
  --abx-d: 0.3s;
}
.abx-statement .abx-row:nth-child(3) .abx-line {
  --abx-d: 0.45s;
}
.abx-cards {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}
/* the two cards are deliberately the SAME box — portrait and certificate
   carry equal weight. Identical anatomy: media area + mono caption strip. */
.abx-card {
  /* width-driven; the height follows from the media aspect + cap strip,
     so both cards are equal by construction and the certificate image
     (1179x896) fits its area exactly — no side gaps, no crop */
  --abx-cw: min(28rem, calc((46svh - 2.75rem) * 1.3159));
  display: flex;
  flex-direction: column;
  width: var(--abx-cw);
  overflow: clip;
  background-color: var(--color--dark-green);
  border: 1px solid rgba(40, 44, 32, 0.18);
  border-radius: 1.25rem;
  will-change: transform;
}
.abx-card--l {
  transform: rotate(-2deg);
}
.abx-card--r {
  transform: rotate(2deg);
}
.abx-media {
  position: relative;
  flex: none;
  aspect-ratio: 1179 / 896;
  overflow: clip;
  /* pure white: the cut-out portrait and the paper doc sit on a clean field */
  background-color: #fff;
}
.abx-img {
  width: 100%;
  height: 100%;
  display: block;
}
.abx-img.is-portrait {
  object-fit: cover;
  object-position: 50% 18%;
}
.abx-img.is-doc {
  /* the media box shares the image's exact aspect, so cover === contain:
     full document, no gaps */
  object-fit: cover;
}
.abx-cap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  height: 2.75rem;
  flex: none;
  padding: 0 1rem;
  /* the visible base of each card speaks the black-slab voice of the site */
  color: var(--color--green-off-white-1);
  background-color: var(--color--dark-green);
  border-top: 1px solid rgba(237, 245, 243, 0.14);
  font-family: Quicksand Label, Arial, sans-serif;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.abx-cap-a {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.abx-cap-b {
  color: var(--color--grey-on-track);
  flex: none;
}
.abx-verify {
  color: var(--color--lime);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
/* the seal straddles both cards, so it must never eat their hovers/links */
.abx-stamp {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 8.75rem;
  height: 8.75rem;
  margin: -4.375rem 0 0 -4.375rem;
  pointer-events: none;
  z-index: 2;
}
.abx-stamp svg {
  display: block;
  width: 100%;
  height: 100%;
}
.abx-stamp-ring {
  position: absolute;
  inset: 0;
  animation: abx-spin 18s linear infinite;
}
.abx-stamp-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4.6rem;
  height: 4.6rem;
  margin: -2.3rem 0 0 -2.3rem;
}
@keyframes abx-spin {
  to {
    transform: rotate(360deg);
  }
}
.abx-facts {
  min-height: 1.25rem;
}
.abx-term {
  font-family: Quicksand Label, Arial, sans-serif;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--color--dark-green-tint-2);
  white-space: nowrap;
  overflow: hidden;
  width: 53ch;
  max-width: 100%;
  border-right: 2px solid transparent;
}
.hfx-js .abx-term {
  width: 0;
}
.hfx-js .abx-term.is-typed {
  animation: abx-type 1.4s steps(52, end) forwards,
    abx-caret 0.8s step-end 1.4s infinite;
  border-right-color: var(--color--lime-off);
}
@keyframes abx-type {
  from {
    width: 0;
  }
  to {
    width: 53ch;
  }
}
@keyframes abx-caret {
  50% {
    border-right-color: transparent;
  }
}
@media screen and (max-width: 991px) {
  .abx-statement {
    font-size: 2.5rem;
  }
  .abx-card {
    --abx-cw: min(24rem, calc((40svh - 2.75rem) * 1.3159));
  }
}
@media screen and (max-width: 767px) {
  .abx-stage {
    padding-top: 7rem;
    gap: 1.25rem;
  }
  .abx-statement {
    font-size: 1.875rem;
  }
  .abx-cards {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .abx-card {
    --abx-cw: min(19.5rem, calc((28svh - 2.5rem) * 1.3159));
  }
  .abx-cap {
    height: 2.5rem;
  }
  .abx-stamp {
    width: 6.25rem;
    height: 6.25rem;
    margin: -3.125rem 0 0 -3.125rem;
    top: 50%;
  }
  .abx-stamp-core {
    width: 3.25rem;
    height: 3.25rem;
    margin: -1.625rem 0 0 -1.625rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .abx-stamp-ring {
    animation: none;
  }
  .abx-wrap {
    height: 100vh;
    height: 100svh;
  }
  .hfx-js .abx-line {
    clip-path: none;
  }
  .hfx-js .abx-line-bar {
    display: none;
  }
  .hfx-js .abx-term {
    width: 53ch;
    animation: none;
    border-right-color: transparent;
  }
}

/* == AB: hero signature (hsx-) == */
/* The marquee signature used to be Lando's, drawn by a Rive state machine
   scrubbed over .hero-rive-tracker (top center -> bottom 80%). This is
   Alaa's own signature — the very artwork the footer carries — revealed by
   a pen that travels its own centreline: the mask is a chain of stroke
   runs in writing order, each as wide as the letterform it uncovers and
   each with its own window on --hsx-p. home-fx drives that one property
   over the same scroll window, with the same catch-up softness. */
.hsx-host {
  --hsx-p: 1;
  align-items: center;
  justify-content: center;
  display: flex;
}

/* JS present: the page is blank paper until the scroll starts writing */
.hfx-js .hsx-host {
  --hsx-p: 0;
}

.hsx-sig {
  width: 100%;
  height: auto;
  color: var(--color--lime);
  display: block;
}

.hsx-i {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100 100.5;
  stroke-dashoffset: calc(100 - 100 * clamp(0, (var(--hsx-p, 1) - var(--hsx-s)) / var(--hsx-d), 1));
}

.hsx-i1 {
  --hsx-s: 0.0300;
  --hsx-d: 0.0894;
  stroke-width: 5.25;
}
.hsx-i2 {
  --hsx-s: 0.1194;
  --hsx-d: 0.0531;
  stroke-width: 6.00;
}
.hsx-i3 {
  --hsx-s: 0.1725;
  --hsx-d: 0.1081;
  stroke-width: 4.50;
}
.hsx-i4 {
  --hsx-s: 0.2807;
  --hsx-d: 0.0613;
  stroke-width: 9.00;
}
.hsx-i5 {
  --hsx-s: 0.3420;
  --hsx-d: 0.0343;
  stroke-width: 6.00;
}
.hsx-i6 {
  --hsx-s: 0.3763;
  --hsx-d: 0.0454;
  stroke-width: 5.25;
}
.hsx-i7 {
  --hsx-s: 0.4264;
  --hsx-d: 0.0591;
  stroke-width: 5.25;
}
.hsx-i8 {
  --hsx-s: 0.4902;
  --hsx-d: 0.0415;
  stroke-width: 6.75;
}
.hsx-i9 {
  --hsx-s: 0.5317;
  --hsx-d: 0.0291;
  stroke-width: 5.25;
}
.hsx-i10 {
  --hsx-s: 0.5608;
  --hsx-d: 0.0269;
  stroke-width: 7.50;
}
.hsx-i11 {
  --hsx-s: 0.5924;
  --hsx-d: 0.0607;
  stroke-width: 5.25;
}
.hsx-i12 {
  --hsx-s: 0.6531;
  --hsx-d: 0.0137;
  stroke-width: 3.00;
}
.hsx-i13 {
  --hsx-s: 0.6668;
  --hsx-d: 0.0759;
  stroke-width: 6.75;
}
.hsx-i14 {
  --hsx-s: 0.7427;
  --hsx-d: 0.0200;
  stroke-width: 4.50;
}
.hsx-i15 {
  --hsx-s: 0.7627;
  --hsx-d: 0.0196;
  stroke-width: 3.00;
}
.hsx-i16 {
  --hsx-s: 0.7823;
  --hsx-d: 0.0068;
  stroke-width: 9.00;
}
.hsx-i17 {
  --hsx-s: 0.7937;
  --hsx-d: 0.0612;
  stroke-width: 5.25;
}
.hsx-i18 {
  --hsx-s: 0.8549;
  --hsx-d: 0.0138;
  stroke-width: 3.00;
}
.hsx-i19 {
  --hsx-s: 0.8687;
  --hsx-d: 0.0553;
  stroke-width: 6.75;
}
.hsx-i20 {
  --hsx-s: 0.9240;
  --hsx-d: 0.0400;
  stroke-width: 6.00;
}
.hsx-i21 {
  --hsx-s: 0.9640;
  --hsx-d: 0.0180;
  stroke-width: 3.00;
}
.hsx-i22 {
  --hsx-s: 0.9820;
  --hsx-d: 0.0080;
  stroke-width: 8.25;
}

@media (prefers-reduced-motion: reduce) {
  .hfx-js .hsx-host {
    --hsx-p: 1;
  }
}

/* == AB: hero wireframe (wfx-) == */
/* The hero's bottom-left corner used to be a driver's "next race" card: a
   circuit map from circuits.riv inside a notched outline, plus the
   data-gl-helmet hover that pixelated the whole portrait at once. In its
   place, an artboard the size of a business card where interface layouts
   sketch themselves in mint hairlines, hold, erase, and hand over to the
   next one. Twenty strokes, one keyframe, zero JavaScript and no
   per-frame work: each group carries its slot in the 18s cycle (--wfx-t)
   and each stroke its stagger inside that slot (--wfx-i). The wrapper
   keeps its old class on purpose — the engine clips this corner away with
   .hidden the moment the page scrolls, and hides it below 992px. */
.wfx-host {
  width: 8.25rem;
  height: auto;
  color: var(--color--dark-green-tint-2);
  flex-flow: column;
  gap: .625rem;
  display: flex;
}

.wfx-board {
  width: 100%;
  height: auto;
  display: block;
}

.wfx-crop path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: .4;
}

.wfx-e {
  fill: none;
  stroke: var(--color--lime-off);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  animation: wfx-draw 18s linear infinite;
  animation-delay: calc(var(--wfx-t, 0s) + var(--wfx-i, 0) * .1s);
}

/* copy lines are drawn with the flat of the pen, not its tip */
.wfx-bar {
  stroke-width: 2.6;
}

.wfx-g1 {
  --wfx-t: 0s;
}

.wfx-g2 {
  --wfx-t: 4.5s;
}

.wfx-g3 {
  --wfx-t: 9s;
}

.wfx-g4 {
  --wfx-t: 13.5s;
}

.wfx-e:nth-child(1) {
  --wfx-i: 0;
}

.wfx-e:nth-child(2) {
  --wfx-i: 1;
}

.wfx-e:nth-child(3) {
  --wfx-i: 2;
}

.wfx-e:nth-child(4) {
  --wfx-i: 3;
}

.wfx-e:nth-child(5) {
  --wfx-i: 4;
}

.wfx-e:nth-child(6) {
  --wfx-i: 5;
}

@keyframes wfx-draw {
  0% {
    stroke-dashoffset: 100;
    animation-timing-function: cubic-bezier(.65, 0, .35, 1);
  }

  4.7% {
    stroke-dashoffset: 0;
  }

  17.2% {
    stroke-dashoffset: 0;
    animation-timing-function: cubic-bezier(.65, 0, .35, 1);
  }

  21.1% {
    stroke-dashoffset: -100;
  }

  100% {
    stroke-dashoffset: -100;
  }
}

.wfx-cap .text-eyebrow {
  color: var(--color--dark-green-tint-2);
  letter-spacing: .04em;
  font-size: .5625rem;
}

/* Desktop only. The old card was hidden at 479px and stayed on tablets, but
   at those widths the rem scale puts this caption under 4px — and the tablet
   hero already carries its own mark and tagline above the portrait. (The
   rule is needed anyway: .wfx-host's display would otherwise beat the phone
   rule below, same specificity and later in the file.) */
@media screen and (max-width: 991px) {
  .wfx-host {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wfx-e {
    stroke-dashoffset: 0;
    animation: none;
  }

  .wfx-g2,
  .wfx-g3,
  .wfx-g4 {
    display: none;
  }
}

/* == AB: centred section heads (ab-mid) == */
/* Three heads — my services, experiments & side quests, visual
   explorations — now read as one centred column instead of the template's
   headline-left / paragraph-right split. The reveal is untouched: the
   engine still splits each line and wipes it in on first scroll, and
   because .title-headline-w keeps its children at content width the colour
   bar still hugs the words rather than the whole column. */
.title-layout.ab-mid {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  row-gap: 1.75rem;
  text-align: center;
}

/* the template spans these cells across two of four tracks; left alone in a
   single-column grid that would conjure a phantom second track */
.title-layout.ab-mid > * {
  grid-column: 1;
  width: 100%;
}

.ab-mid .title-headline-w {
  justify-content: center;
  align-items: center;
}

.ab-mid .title-para-layout {
  justify-content: center;
  align-items: center;
}

.ab-mid .title-para-w,
.ab-mid .title-para-w.mw {
  max-width: 30rem;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

.ab-mid .eyebrow-w {
  justify-content: center;
}

/* the label leads the head instead of the paragraph, and sits closer to it
   than the row gap alone would allow */
.ab-mid-brow {
  color: var(--color--grey-on-track);
  margin-bottom: -1rem;
}

/* == AB: full-bleed studio shot == */
/* Top-first framing, with the parallax kept. The engine's version (unhooked
   in the markup — see the missing data-otot-bottom) drifted the image up by
   20vh and scaled it about its CENTRE, and between them they ate 117-176px
   off the top of the photograph. Here the image is a fifth taller than its
   clipped wrapper and pinned to its top edge, the scale grows from that same
   top edge, and home-fx pans the spare fifth — so the crop is always taken
   from the bottom. No JS (or reduced motion) leaves it parked at the top,
   which is the correct frame anyway. */
.image.is-otot-home-end {
  object-fit: cover;
  object-position: 50% 0;
  transform-origin: 50% 0;
  width: 100%;
  height: 120%;
  inset: 0 0 auto;
}

/* == AB: stack grid (cdx-) == */
/* The sixteen squares now carry the stack rather than pictures. At rest each
   one wears a language's short mark with its full name underneath; on hover
   the panel Webflow already wipes open becomes a small editor that types a
   snippet, holds it, wipes it and types the next one. The panel keeps the
   .helmet-grid-item-reveal-img class on purpose — that is the element the
   Webflow interaction animates, and it does not care that it is now a div.
   Only the hovered card ever runs; home-fx drives one rAF chain, not
   sixteen. */
.cdx-mark {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: .375rem;
  width: 100%;
  height: 100%;
  padding: 1rem;
  display: flex;
}

.cdx-abbr {
  color: var(--color--green-off-white-1);
  text-transform: uppercase;
  letter-spacing: -.02em;
  font-variation-settings: "wght" 700, "wdth" 96;
  font-size: 2.5rem;
  line-height: 1;
}

.cdx-full {
  color: var(--color--dark-green-tint-2);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-family: Quicksand Label, Arial, sans-serif;
  font-size: .5rem;
  line-height: 1.3;
}

/* the mark steps back as the panel arrives, so the two never fight */
.helmet-grid-item:hover .cdx-abbr {
  color: var(--color--dark-green-tint-2);
  transition: color .45s cubic-bezier(.65, 0, .35, 1);
}

.cdx-panel {
  background-color: var(--color--black);
  background-image: none;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  gap: .625rem;
  padding: 1.125rem;
  display: flex;
  overflow: hidden;
}

.cdx-file {
  color: var(--color--dark-green-tint-2);
  letter-spacing: .06em;
  font-family: Quicksand Label, Arial, sans-serif;
  font-size: .5625rem;
}

.cdx-code {
  flex-flow: column;
  gap: .25rem;
  width: 100%;
  display: flex;
}

.cdx-snip {
  flex-flow: column;
  gap: .25rem;
  display: none;
}

/* no JS: the first snippet simply stands there, fully written */
.cdx-snip:first-child {
  display: flex;
}

.hfx-js .cdx-snip {
  display: none;
}

.hfx-js .cdx-snip.is-on {
  display: flex;
}

.cdx-line {
  color: var(--color--green-off-white-1);
  white-space: pre;
  border-right: 1px solid rgba(0, 0, 0, 0);
  width: auto;
  font-family: Quicksand Label, Arial, sans-serif;
  font-size: .8125rem;
  line-height: 1.5;
  display: block;
  overflow: hidden;
}

.hfx-js .cdx-line {
  width: 0;
}

/* solid while the characters are landing, blinking once it rests — the way
   a real caret behaves */
.cdx-line.is-caret {
  border-right-color: var(--color--lime);
  animation: cdx-caret 1s step-end infinite;
}

@keyframes cdx-caret {
  0%, 60% {
    border-right-color: var(--color--lime);
  }

  61%, 100% {
    border-right-color: rgba(0, 0, 0, 0);
  }
}

.cdx-k {
  color: var(--color--lime);
  font-style: normal;
}

.cdx-t {
  color: var(--color--lime-off);
  font-style: normal;
}

.cdx-s {
  color: var(--color--grey-on-track);
  font-style: normal;
}

.cdx-m {
  color: var(--color--dark-green-tint-2);
  font-style: normal;
}

@media screen and (max-width: 991px) {
  .cdx-abbr {
    font-size: 1.75rem;
  }

  .cdx-line {
    font-size: .625rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hfx-js .cdx-snip:first-child {
    display: flex;
  }

  .hfx-js .cdx-line {
    width: auto;
  }
}

/* ---- footer icon dock (the image marquee's replacement) ----
   A row of 22 glyph circles riding a traveling sine wave — same geometry
   as the Antigravity "bouncer" study: 98px circles / 8px gap (70/6 under
   1024px), the row intentionally overflows and is clipped, centered.
   Colors translated to the dark footer: cool-grey glass fill kept, light
   hairline, mint glyphs. Motion lives in /assets/js/footer-dock.js. */

.ftr-dock {
  z-index: 1;
  overflow-x: clip;
  padding: 3rem 0 1.5rem;
  position: relative;
}

.ftr-dock-list {
  will-change: transform;
  flex-flow: row;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  display: flex;
}

.ftr-dock-item {
  will-change: transform;
  padding: 0;
  list-style: none;
}

.ftr-dock-circle {
  aspect-ratio: 1;
  backface-visibility: hidden;
  background: rgba(183, 191, 217, .07);
  border: 1px solid rgba(237, 245, 243, .1);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 98px;
  display: flex;
  position: relative;
}

.ftr-dock-ico {
  width: 36px;
  height: 36px;
  fill: currentColor;
  color: var(--color--lime);
}

@media screen and (max-width: 1024px) {
  .ftr-dock-list {
    gap: 6px;
  }

  .ftr-dock-circle {
    width: 70px;
  }

  .ftr-dock-ico {
    width: 28px;
    height: 28px;
  }
}