/* Generated by scripts/build-css.mjs from the Webflow export CSS (normalize.css, webflow.css,
   saturn-terminal.webflow.css) and public/css/sts.css. Edit sts.css, then rebuild. Do not edit by hand. */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
/**
 * Remove default margin.
 */
body {
  margin: 0;
}
/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
footer,
header,
main,
nav,
section {
  display: block;
}
/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0;
}
/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
/**
 * Address styling not present in Safari and Chrome.
 */
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/**
 * Address styling not present in IE 8/9.
 */
/**
 * Address inconsistent and variable font size in all browsers.
 */
/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}
/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
/**
 * Address differences between Firefox and other browsers.
 */
/**
 * Contain overflow in all browsers.
 */
/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}
/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}
/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button {
  text-transform: none;
}
/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. CUSTOM FOR WEBFLOW: Removed the input[type="submit"] selector to reduce
 *    specificity and defer to the .w-button selector
 */
button,
html input[type="button"],
input[type="reset"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}
/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}
/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}
/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
/**
 * 1. CUSTOM FOR WEBFLOW: changed from `textfield` to `none` to normalize iOS rounded input
 * 2. CUSTOM FOR WEBFLOW: box-sizing: content-box rule removed
 *    (similar to normalize.css >=4.0.0)
 */
/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
/**
 * Define consistent border, margin, and padding.
 */
/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}
/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  background-color: #fff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}
img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}
h1,
h2,
h3 {
  font-weight: bold;
  margin-bottom: 10px;
}
h1 {
  font-size: 38px;
  line-height: 44px;
  margin-top: 20px;
}
h2 {
  font-size: 32px;
  line-height: 36px;
  margin-top: 20px;
}
h3 {
  font-size: 24px;
  line-height: 30px;
  margin-top: 20px;
}
p {
  margin-top: 0;
  margin-bottom: 10px;
}
ul,
ol {
  margin-top: 0px;
  margin-bottom: 10px;
  padding-left: 40px;
}
button,
[type='button'],
[type='reset'] {
  border: 0;
  cursor: pointer;
  -webkit-appearance: button;
}
.w-form {
  margin: 0 0 15px;
}
.w-form-done {
  display: none;
  padding: 20px;
  text-align: center;
  background-color: #dddddd;
}
.w-form-fail {
  display: none;
  margin-top: 10px;
  padding: 10px;
  background-color: #ffdede;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
.w-input {
  display: block;
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333333;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
}
.w-input::placeholder {
  color: #999;
}
.w-input:focus {
  border-color: #3898EC;
  outline: 0;
}
.w-input[disabled] {
  cursor: not-allowed;
}
.w-input[disabled]:not(.w-input-disabled) {
  background-color: #eeeeee;
}
textarea.w-input {
  height: auto;
}
/**
 * ## Note
 * Safari (on both iOS and OS X) does not handle viewport units (vh, vw) well.
 * For example percentage units do not work on descendants of elements that
 * have any dimensions expressed in viewport units. It also doesn’t handle them at
 * all in `calc()`.
 */
/**
 * Wrapper around all lightbox elements
 *
 * 1. Since the lightbox can receive focus, IE also gives it an outline.
 * 2. Fixes flickering on Chrome when a transition is in progress
 *    underneath the lightbox.
 */
/**
 * Neat trick to bind the rubberband effect to our canvas instead of the whole
 * document on iOS. It also prevents a bug that causes the document underneath to scroll.
 */
/* .w-lightbox-content */
/*
 * 1. Remove default margin set by user-agent on the <figure> element.
 */
/**
 * IE adds image dimensions as width and height attributes on the IMG tag,
 * but we need both width and height to be set to auto to enable scaling.
 */
/**
 * 1. Reset if style is set by user on "All Images"
 */
/*
 * Without specifying the with and height inside the SVG, all versions of IE render the icon too small.
 * The bug does not seem to manifest itself if the elements are tall enough such as the above arrows.
 * (http://stackoverflow.com/questions/16092114/background-size-differs-in-internet-explorer)
 */
/**
 * 1. All IE versions add extra space at the bottom without this.
 */
/*
 * 1. We use content-box to avoid having to do `width: calc(10vh + 2vw)`
 *    which doesn’t work in Safari anyway.
 * 2. Chrome renders images pixelated when switching to GPU. Making sure
 *    the parent is also rendered on the GPU (by setting translate3d for
 *    example) fixes this behavior.
 */
/*
 * Spinner
 *
 * Absolute pixel values are used to avoid rounding errors that would cause
 * the white spinning element to be misaligned with the track.
 */
/*
 * Utility classes
 */
@media (min-width: 768px) {
  /* .w-lightbox-content */
}
/**
 * NOTE: These rules are overridden in site-designer.less to use container queries instead of media queries
 * when the navbar is inside a Frame on the Open Canvas.
 */

:root {
  --color-scheme-1--background: var(--_primitives---colors--white);
  --_typography---font-styles--body: Inter;
  --color-scheme-1--text: var(--_primitives---colors--neutral-darkest);
  --_typography---font-styles--heading: "IBM Plex Mono", sans-serif;
  --color-scheme-2--text: var(--_primitives---colors--white);
  --_primitives---opacity--neutral-darkest-60: #0009;
  --_primitives---colors--white: #fff;
  --color-scheme-2--accent: var(--_primitives---colors--white);
  --_primitives---opacity--neutral-darkest-15: #00000026;
  --_primitives---opacity--transparent: transparent;
  --_primitives---opacity--neutral-darkest-5: #0000000d;
  --_primitives---colors--neutral-darkest: #000;
  --_primitives---opacity--white-20: #fff3;
  --_primitives---opacity--white-10: #ffffff1a;
  --_primitives---colors--leaf-green: #1f8f5f;
  --_primitives---colors--leaf-green-dark: #18724c;
  --_primitives---colors--neutral-lighter: #d8d8d8;
  --color-scheme-2--background: var(--_primitives---colors--neutral-darker);
  --_primitives---opacity--white-60: #fff9;
  --color-scheme-3--text: var(--_primitives---colors--neutral-darkest);
  --color-scheme-1--accent: var(--_primitives---colors--leaf-green);
  --_ui-styles---stroke--border-width: 1px;
  --color-scheme-1--border: var(--_primitives---opacity--neutral-darkest-15);
  --_ui-styles---radius--medium: 16px;
  --color-scheme-1--foreground: var(--_primitives---colors--white);
  --water: #08f;
  --background-color--background-secondary\<deleted\|relume-variable-background-color-2\>: var(--base-color-neutral--neutral-lightest\<deleted\|relume-variable-color-neutral-3\>);
  --border-color--border-primary\<deleted\|relume-variable-border-color-1\>: var(--base-color-neutral--black\<deleted\|relume-variable-color-neutral-1\>);
  --_ui-styles---radius--small: 4px;
  --_ui-styles---radius--large: 16px;
  --color-scheme-3--background: var(--_primitives---colors--neutral-lighter);
  --color-scheme-4--background: var(--_primitives---colors--leaf-green-darker);
  --color-scheme-4--text: var(--_primitives---colors--white);
  --color-scheme-5--background: var(--_primitives---colors--saturn-blue);
  --color-scheme-5--text: var(--_primitives---colors--white);
  --_primitives---colors--saturn-blue: #294a76;
  --_primitives---colors--neutral-lightest: #f2f2f2;
  --_ui-styles---stroke--divider-width: 1px;
  --_primitives---opacity--neutral-darkest-40: #0006;
  --color-scheme-2--foreground: var(--_primitives---colors--neutral-darker);
  --_primitives---opacity--neutral-darkest-20: #0003;
  --color-scheme-2--border: var(--_primitives---opacity--white-20);
  --_primitives---colors--abbey-lightest: #ececec;
  --_primitives---colors--saturn-blue-lightest: #e9ecf1;
  --_primitives---colors--saturn-blue-lighter: #d4dae3;
  --_primitives---colors--saturn-blue-light: #69809f;
  --_primitives---colors--abbey-lighter: #d9d9d9;
  --_primitives---colors--abbey-dark: #343435;
  --_primitives---colors--abbey-darkest: #131314;
  --_primitives---colors--abbey-light: #7a7a7b;
  --_primitives---colors--leaf-green-light: #62b08f;
  --_primitives---colors--saturn-blue-darkest: #0c1623;
  --_primitives---colors--saturn-blue-darker: #101d2f;
  --_primitives---colors--leaf-green-lighter: #d2e8df;
  --_primitives---colors--abbey-darker: #1a1a1a;
  --_primitives---colors--leaf-green-darkest: #092a1c;
  --_primitives---colors--abbey: #414243;
  --_primitives---colors--leaf-green-lightest: #e8f3ef;
  --_primitives---colors--leaf-green-darker: #0c3926;
  --_primitives---colors--saturn-blue-dark: #203b5e;
  --color-scheme-4--accent: var(--_primitives---colors--white);
  --color-scheme-4--foreground: var(--_primitives---colors--leaf-green-darker);
  --color-scheme-5--border: var(--_primitives---opacity--white-20);
  --color-scheme-3--accent: var(--_primitives---colors--neutral-darkest);
  --color-scheme-3--border: var(--_primitives---opacity--neutral-darkest-15);
  --color-scheme-4--border: var(--_primitives---opacity--white-20);
  --color-scheme-3--foreground: var(--_primitives---colors--neutral-lighter);
  --color-scheme-5--accent: var(--_primitives---colors--white);
  --color-scheme-5--foreground: var(--_primitives---colors--saturn-blue);
  --_primitives---colors--neutral-light: #b2b2b2;
  --_primitives---colors--neutral: #7f7f7f;
  --_primitives---colors--neutral-dark: #4c4c4c;
  --_primitives---colors--neutral-darker: #191919;
  --_primitives---opacity--white-5: #ffffff0d;
  --_primitives---opacity--white-15: #ffffff26;
  --_primitives---opacity--white-30: #ffffff4d;
  --_primitives---opacity--white-40: #fff6;
  --_primitives---opacity--white-50: #ffffff80;
  --_primitives---opacity--neutral-darkest-10: #0000001a;
  --_primitives---opacity--neutral-darkest-30: #0000004d;
  --_primitives---opacity--neutral-darkest-50: #00000080;
  --base-color-neutral--neutral-lightest\<deleted\|relume-variable-color-neutral-3\>: #eee;
  --base-color-neutral--black\<deleted\|relume-variable-color-neutral-1\>: black;
}

body {
  background-color: var(--color-scheme-1--background);
  font-family: var(--_typography---font-styles--body);
  color: var(--color-scheme-1--text);
  font-size: 1rem;
  line-height: 1.5rem;
}

h1 {
  font-family: var(--_typography---font-styles--heading);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-family: var(--_typography---font-styles--heading);
  letter-spacing: -.0375rem;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.75rem;
  font-weight: 500;
  line-height: 1.2;
}

h3 {
  font-family: var(--_typography---font-styles--heading);
  letter-spacing: -.03rem;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.2;
}

p {
  margin-bottom: 0;
}

a {
  color: var(--color-scheme-1--text);
  text-decoration: underline;
}

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

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

li {
  margin-top: .25rem;
  margin-bottom: .25rem;
  padding-left: .5rem;
}

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

label {
  margin-bottom: .25rem;
  font-weight: 500;
}

.max-width-full {
  width: 100%;
  max-width: none;
}

.layer {
  justify-content: center;
  align-items: center;
  position: absolute;
  inset: 0%;
}

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

.page-wrapper {
  flex-direction: column;
  min-height: 100svh;
  display: flex;
  overflow: hidden;
}

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

.main-wrapper {
  flex-grow: 1;
}

.heading-style-h1 {
  font-family: var(--_typography---font-styles--heading);
  color: #fff;
  letter-spacing: -.4rem;
  -webkit-text-stroke-width: 0px;
  font-size: 5rem;
  font-weight: 500;
  line-height: 1.1;
}

.form_field-label {
  margin-bottom: .5rem;
  font-weight: 400;
}

.form_field-label.is-alternate {
  color: var(--_primitives---colors--white);
}

.button {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  border: 1px solid var(--_primitives---colors--leaf-green);
  background-color: var(--_primitives---colors--leaf-green);
  color: var(--_primitives---colors--white);
  text-align: center;
  text-transform: none;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  padding: .625rem 1.5rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .2s, background-color .2s;
  display: flex;
}

.button:hover {
  border-color: var(--_primitives---colors--leaf-green-dark);
  background-color: var(--_primitives---colors--leaf-green-dark);
}

.button.is-link {
  background-color: var(--_primitives---opacity--transparent);
  color: var(--_primitives---colors--neutral-darkest);
  border-style: none;
  padding: .25rem 0;
  line-height: 1;
  text-decoration: none;
}

.button.is-link:hover {
  text-decoration: underline;
}

.button.is-link.is-alternate {
  background-color: var(--_primitives---opacity--transparent);
  color: var(--_primitives---colors--white);
}

.button.is-link.is-alternate:hover {
  background-color: var(--_primitives---opacity--transparent);
}

.button.is-link.is-icon {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
}

.button.is-icon {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  justify-content: center;
  align-items: center;
  display: flex;
}

.button.is-secondary {
  border-color: var(--_primitives---colors--leaf-green);
  background-color: var(--_primitives---opacity--transparent);
  color: var(--_primitives---colors--neutral-darkest);
}

.button.is-secondary:hover {
  background-color: var(--_primitives---opacity--neutral-darkest-5);
}

.button.is-secondary.is-alternate {
  border-color: var(--_primitives---opacity--white-20);
  background-color: var(--_primitives---opacity--transparent);
  color: var(--_primitives---colors--white);
}

.button.is-secondary.is-alternate:hover {
  background-color: var(--_primitives---opacity--white-10);
}

.button.is-alternate {
  border-color: var(--_primitives---colors--white);
  background-color: var(--_primitives---colors--white);
  color: var(--_primitives---colors--neutral-darkest);
}

.button.is-alternate:hover {
  border-color: var(--_primitives---colors--neutral-lighter);
  background-color: var(--_primitives---colors--neutral-lighter);
}

.button.nav-button {
  font-family: var(--_typography---font-styles--heading);
}

.button.max-width-full {
  background-color: var(--_primitives---colors--leaf-green);
}

.form_input {
  border: 1px solid var(--_primitives---opacity--neutral-darkest-15);
  background-color: var(--_primitives---opacity--transparent);
  height: auto;
  min-height: 2.75rem;
  color: var(--_primitives---colors--neutral-darkest);
  border-radius: 12px;
  margin-bottom: 0;
  padding: .5rem .75rem;
  font-size: 1rem;
  line-height: 1.6;
  transition: border-color .2s, background-color .2s;
}

.form_input:hover {
  border-color: var(--_primitives---opacity--neutral-darkest-15);
  background-color: var(--_primitives---opacity--neutral-darkest-5);
}

.form_input:focus {
  border-color: var(--_primitives---colors--neutral-darkest);
  background-color: var(--_primitives---opacity--neutral-darkest-5);
}

.form_input::placeholder {
  color: var(--_primitives---opacity--neutral-darkest-60);
}

.form_input.is-text-area {
  height: auto;
  min-height: 11.25rem;
  padding-top: .75rem;
  padding-bottom: .75rem;
  overflow: auto;
}

.form_input.is-alternate {
  border-color: var(--_primitives---opacity--white-20);
  background-color: var(--color-scheme-2--background);
  color: var(--_primitives---colors--white);
}

.form_input.is-alternate:hover {
  border-color: var(--_primitives---opacity--white-20);
  background-color: var(--_primitives---opacity--white-10);
}

.form_input.is-alternate:focus {
  border-color: var(--_primitives---colors--white);
}

.form_input.is-alternate::placeholder {
  color: var(--_primitives---opacity--white-60);
}

.button-group {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.form_field-wrapper {
  position: relative;
}

.padding-global {
  padding-left: 5%;
  padding-right: 5%;
}

.padding-section-large {
  padding-top: 9rem;
  padding-bottom: 9rem;
}

.form_message-success-wrapper {
  margin-top: 1rem;
  padding: 0;
}

.form_message-success {
  color: #027a48;
  background-color: #ecfdf3;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2.5rem;
  display: flex;
}

.form_message-error {
  color: #b42318;
  background-color: #fef3f2;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  display: flex;
}

.form_message-error-wrapper {
  margin-top: 1rem;
  padding: 0;
}

.color-scheme-1 {
  background-color: var(--color-scheme-1--background);
  color: var(--color-scheme-1--text);
}

.color-scheme-2 {
  background-color: var(--color-scheme-2--background);
  color: var(--color-scheme-2--text);
}

.color-scheme-5 {
  background-color: var(--color-scheme-5--background);
  color: var(--color-scheme-5--text);
}

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

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

.error-text {
  color: #e23939;
}

.success-text {
  font-weight: 600;
}

.contact6_form-block {
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 0;
}

.blue-title {
  color: var(--water);
  text-transform: none;
  font-size: 6rem;
  font-style: italic;
  font-weight: 500;
}

.arrow {
  width: 250px;
  height: 250px;
}

.image {
  max-height: 6rem;
}

.span {
  color: var(--color-scheme-5--text);
  text-align: center;
}

@media screen and (max-width: 991px) {
  h1 {
    font-size: 3.25rem;
  }

  h2 {
    font-size: 2.75rem;
  }

  h3 {
    font-size: 2.25rem;
  }

  .heading-style-h1 {
    color: var(--color-scheme-2--accent);
    letter-spacing: -.2rem;
    font-size: 3.25rem;
  }

  .button {
    display: block;
  }

  .button.nav-button {
    display: none;
  }

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

  .blue-title {
    font-size: 4.2rem;
  }
}

@media screen and (max-width: 767px) {
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2.25rem;
  }

  h3 {
    font-size: 2rem;
  }

  .heading-style-h1 {
    letter-spacing: 0;
    font-size: 2.5rem;
  }

  .padding-section-large {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .form_field-2col.is-mobile-1col {
    grid-template-columns: 1fr;
  }

  .blue-title {
    font-size: 4rem;
  }

  .text-span-2 {
    letter-spacing: 0;
  }
}

@media screen and (max-width: 479px) {
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2.75rem;
  }

  h3 {
    font-size: 2rem;
  }

  .heading-style-h1 {
    font-size: 2rem;
  }

  .blue-title {
    font-size: 2rem;
  }
}



/*
  Saturn Tribal Systems: page styles layered on the saturnterminal.com Webflow export CSS
  (normalize.css, webflow.css, saturn-terminal.webflow.css). New classes use the sts- prefix.
  The page reuses the parent's design system (colors, type, buttons, form fields, glass bar,
  human check, scramble and marquee motion) with its own layouts. The look is flat: solid
  colors only, no gradients, no background grids, and no tag or label chips.
  scripts/build-css.mjs bundles this file and the export CSS into public/css/site.css, the one
  stylesheet the pages load.

  DESIGN INVENTORY (read from the export, 2026-10-21). Everything below uses these values.

  Colors (primitives in saturn-terminal.webflow.css :root)
    Neutral      #000 darkest, #131314 abbey darkest, #191919 darker, #4c4c4c dark, #7f7f7f,
                 #b2b2b2 light, #d8d8d8 lighter, #f2f2f2 lightest, #fff white
    Leaf green   #1f8f5f base, #18724c dark, #0c3926 darker, #092a1c darkest,
                 #62b08f light, #d2e8df lighter, #e8f3ef lightest
    Saturn blue  #294a76 base, #203b5e dark, #101d2f darker, #0c1623 darkest,
                 #69809f light, #d4dae3 lighter, #e9ecf1 lightest
    Water        #08f (the parent's hero "Water" word, taglines, step icons)
    Opacity      black and white at 5, 10, 15, 20, 30, 40, 50, 60 percent; the human check
                 adds text rgba(244,244,245,.92) and subtext .72
    Form states  success #027a48 on #ecfdf3, error #b42318 on #fef3f2, error text #e23939
    Focus ring   #4d65ff, 0.125rem solid, 0.125rem offset (global-styles embed)
    Darkest      #000, used for theme-color, favicon tile, and OG image background
  Color schemes (class sets background and text; embed remaps --color-scheme-1--*)
    1 white bg / black text, 2 #191919 bg / white text, 3 #d8d8d8 bg / black text,
    4 #0c3926 bg / white text, 5 #294a76 bg / white text (footer)
  Fonts
    Headings  "IBM Plex Mono", sans-serif: 400 and 500 here (the parent loads 300 to 700).
              The italic hero word is browser-synthesized, as on the parent.
    Body      Inter, one variable file per subset, so 400 to 700 render as real weights.
  Type scale on the parent (desktop / max 991 / max 767 / max 479)
    heading-style-h1  Plex Mono 500, 5rem / 3.25 / 2.5 / 2, line-height 1.1, tight tracking
    h2                3.75rem / 2.75 / 2.25, weight 500, line-height 1.2
    decor words       Plex Mono 400, 12rem / 7 / 5, line-height 1
    text-size-medium  1.25rem / 1.25 / 1 / 1; body Inter 1rem, line-height 1.5rem
  Layout and spacing
    padding-global 5% sides, container-large 80rem
    padding-section-large 9rem / 6 / 4, medium 5rem / 4 / 3, small 3rem / 3 / 2
    margin and padding scale .25, .5, 1, 1.5, 2, 3, 4, 5, 6 rem
  Buttons
    .button              leaf green, white text, 12px radius, padding .625rem 1.5rem, weight 500,
                         .2s color transitions; hover leaf green dark
    .is-secondary        leaf green border, transparent; hover black at 5%
    .is-secondary.is-alternate  white-20 border, white text; hover white at 10%
    .is-link             text only, hover underline; .nav-button uses the heading font
  Radii
    4px small, 16px large (image wrappers, cards), 12px buttons and inputs, 6px tags,
    14px and 12px human-check track and handle
  Shadows
    navbar bar 0 0 5px #0000001a, 0 6px 6px #0003; human-check track 0 14px 40px rgba(0,0,0,.45)
  Overlays
    hero media black at 60%
  Breakpoints
    max-width 991, 767, 479 (the export defines no larger ones)
  Motion
    .2s color transitions; cubic-bezier(.16,1,.3,1) from the parent's hover embed; a text
    scramble on the big mono words; a marquee for the news list
*/

/* ---------- Fonts: self-hosted copies of the files the parent loads from Google Fonts ---------- */

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --_typography---font-styles--body: Inter, sans-serif;
  --sts-heading: var(--_typography---font-styles--heading);
  --sts-ink: #131314;
  --sts-ink-raised: #191919;
  --sts-green: #1f8f5f;
  --sts-green-dark: #18724c;
  --sts-green-darker: #0c3926;
  --sts-green-light: #62b08f;
  --sts-water: #08f;
  --sts-text-on-dark: rgba(244, 244, 245, 0.92);
  --sts-muted-on-dark: rgba(244, 244, 245, 0.72);
  --sts-muted-on-light: rgba(0, 0, 0, 0.6);
  --sts-line-on-dark: rgba(255, 255, 255, 0.1);
  /* Material 3 emphasized decelerate and standard curves, plus a small spring for icons */
  --sts-ease-out: cubic-bezier(0.05, 0.7, 0.1, 1);
  --sts-ease: cubic-bezier(0.2, 0, 0, 1);
  --sts-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sts-header-offset: 5.5rem;
  /* IBM Plex Mono's widest pairs ("rm", "rv", "rt") touch at the parent's -0.4rem hero tracking,
     so every mono heading uses this gentler value, which keeps at least a 0.05em gap. */
  --sts-mono-tracking: -0.02em;
  --sts-focus: #4d65ff;
}

/* ---------- Ported from the export's global-styles embeds (only what this page needs) ---------- */

/* Ensure all elements inherit the color from its parent */
a,
.w-input {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
}

/* Make sure containers never lose their center alignment */
.container-large {
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Color schemes: components read --color-scheme-1--*, each scheme class remaps them */
.color-scheme-2 {
  --color-scheme-1--text: var(--color-scheme-2--text);
  --color-scheme-1--background: var(--color-scheme-2--background);
  --color-scheme-1--foreground: var(--color-scheme-2--foreground);
  --color-scheme-1--border: var(--color-scheme-2--border);
  --color-scheme-1--accent: var(--color-scheme-2--accent);
}
.color-scheme-5 {
  --color-scheme-1--text: var(--color-scheme-5--text);
  --color-scheme-1--background: var(--color-scheme-5--background);
  --color-scheme-1--foreground: var(--color-scheme-5--foreground);
  --color-scheme-1--border: var(--color-scheme-5--border);
  --color-scheme-1--accent: var(--color-scheme-5--accent);
}

/* Font smoothing, from the parent's head embed */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--sts-ink);
}

/* The parent clips with overflow: hidden, which would stop sticky positioning. */
.page-wrapper {
  overflow: clip;
}

/* ---------- Accessibility ---------- */

/* The parent styles focus only on [tabindex] elements; extend the same ring to every control.
   Webflow's .w-input:focus rule still wins on form fields, which keep the parent's border change. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 0.125rem solid var(--sts-focus);
  outline-offset: 0.125rem;
}
.sts-header,
.sts-hero,
.color-scheme-2,
.color-scheme-5 {
  --sts-focus: var(--_primitives---colors--white);
}

.sts-skip-link {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 3000;
  transform: translateY(-200%);
}
.sts-skip-link:focus {
  transform: none;
}

.sts-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* AA contrast: white text on the parent's leaf green measures 4.1:1, so solid green buttons use
   its dark shade (5.9:1) at rest and the darker shade on hover. */
.button:not(.is-secondary):not(.is-link):not(.is-alternate) {
  border-color: var(--_primitives---colors--leaf-green-dark);
  background-color: var(--_primitives---colors--leaf-green-dark);
}
.button:not(.is-secondary):not(.is-link):not(.is-alternate):hover {
  border-color: var(--_primitives---colors--leaf-green-darker);
  background-color: var(--_primitives---colors--leaf-green-darker);
}

/* ---------- Scrolling and reveal ---------- */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* The fixed header covers the top of the viewport; keep anchor targets below it. */
.sts-anchor {
  scroll-margin-top: var(--sts-header-offset);
}

/* main.js adds .sts-reveal-pending to .sts-reveal elements below the fold, only when it runs and
   motion is allowed, so nothing starts hidden without the script. The transition lives on the
   revealed state so hiding is instant and only the reveal animates. */
.sts-reveal-pending {
  opacity: 0;
  transform: translate3d(0, 2rem, 0);
}
.sts-reveal-pending.sts-revealed {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--sts-ease-out), transform 1.1s var(--sts-ease-out);
}
@media print, (prefers-reduced-motion: reduce) {
  .sts-reveal-pending {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Scramble overlay: main.js lays random letters over the real word, which stays readable to
   screen readers and search engines underneath. */
[data-scramble] {
  position: relative;
}
[data-scramble].is-scrambling {
  color: transparent;
}
.sts-scramble {
  position: absolute;
  inset: 0;
  color: var(--_primitives---colors--white);
}

/* ---------- Shared pieces ---------- */

.sts-h2 {
  margin: 0 0 1.5rem;
  font-family: var(--sts-heading);
  font-size: clamp(2.25rem, 1rem + 3vw, 3.5rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: var(--sts-mono-tracking);
  text-wrap: balance;
}

.sts-lead {
  max-width: 36rem;
  margin: 0 0 1rem;
  color: var(--sts-muted-on-light);
  font-size: 1.125rem;
  line-height: 1.65;
}
.color-scheme-2 .sts-lead {
  color: var(--sts-muted-on-dark);
}

/* Buttons: the parent's shapes and colors, a little larger, with lift and an arrow nudge */
.button.sts-button-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.875rem 1.5rem;
  transition: background-color 0.2s, border-color 0.2s, transform 0.4s var(--sts-ease-out);
}
.button.sts-button-glass {
  background-color: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.button.sts-button-glass:hover {
  background-color: rgba(255, 255, 255, 0.12);
}
.sts-button-icon {
  flex: none;
  transition: transform 0.4s var(--sts-ease-out);
}
.sts-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
@media (prefers-reduced-motion: no-preference) {
  .button.sts-button-lg:hover {
    transform: translateY(-2px);
  }
  a:hover > .sts-button-icon {
    transform: translateX(3px);
  }
  a:hover > .sts-button-icon.is-external {
    transform: translate(2px, -2px);
  }
}

/* ---------- Header: the parent's floating glass bar, aligned to the content width ---------- */

.sts-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 2000;
  padding: 1rem 5% 0;
  pointer-events: none;
}
.sts-header__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0.625rem 0.625rem 0.625rem 1.5rem;
  border: 1px solid var(--sts-line-on-dark);
  border-radius: 16px;
  background: rgba(19, 19, 20, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 0 5px #0000001a, 0 6px 6px #0003;
  pointer-events: auto;
}
.sts-header__logo {
  display: flex;
  flex: none;
  margin-right: auto;
}
.sts-header__logo img {
  display: block;
  width: 141px;
  height: 32px;
}
.sts-header__nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.sts-header__link {
  position: relative;
  padding: 0.5rem 0.875rem;
  color: var(--sts-text-on-dark);
  font-family: var(--sts-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.2s;
}
.sts-header__link::after {
  content: "";
  position: absolute;
  right: 0.875rem;
  bottom: 0.3rem;
  left: 0.875rem;
  height: 1px;
  background-color: var(--sts-green-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--sts-ease-out);
}
.sts-header__link:hover {
  color: var(--_primitives---colors--white);
}
.sts-header__link:hover::after {
  transform: scaleX(1);
}
.button.nav-button.sts-header__cta {
  display: block;
  flex: none;
  margin-left: 0.5rem;
}

@media screen and (max-width: 991px) {
  .sts-header__link {
    padding: 0.5rem 0.625rem;
    font-size: 0.875rem;
  }
  .sts-header__link::after {
    right: 0.625rem;
    left: 0.625rem;
  }
}
@media screen and (max-width: 767px) {
  .sts-header__nav {
    display: none;
  }
  .sts-header__bar {
    padding-left: 1rem;
  }
}

/* ---------- Hero: exactly one screen tall ---------- */

/* 100vh, with the small-viewport unit where supported so phones fit it under their browser bars.
   It is a minimum, so a very short screen grows the hero instead of clipping the buttons. */
.sts-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 6.5rem 0;
  overflow: clip;
  background-color: #000;
  color: var(--_primitives---colors--white);
}
.sts-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.sts-hero__picture {
  position: absolute;
  inset: 0;
  display: block;
}
.sts-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Flat black overlay. The parent uses 60%; this brighter photo needs 75% so the blue "Water"
   still clears 3:1 over the brightest clouds (white text sits far above 4.5:1). */
.sts-hero__shade {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.75);
}
.sts-hero__content {
  position: relative;
}
/* The parent's own heading-style-h1 and blue-title set the sizes (5rem, with a 6rem italic
   "Water", stepping down at each breakpoint). Tracking is eased so no letters touch. */
.heading-style-h1.sts-hero__title,
.sts-hero__title .text-span-2 {
  letter-spacing: var(--sts-mono-tracking);
}
.sts-hero__title {
  margin: 0 0 2rem;
}
/* Each line clips its own text so it can rise into view; padding keeps descenders. */
.sts-hero__line {
  display: block;
  overflow: hidden;
  padding: 0.02em 0 0.1em;
  margin-bottom: -0.08em;
}
.sts-hero__line-inner {
  display: inline-block;
}
.sts-hero__lead {
  max-width: 38rem;
  margin: 0 0 2.5rem;
  color: var(--sts-text-on-dark);
  font-size: 1.25rem;
  line-height: 1.6;
}
.sts-hero__actions {
  gap: 0.75rem;
}
.sts-hero__scroll {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: var(--sts-muted-on-dark);
  font-family: var(--sts-heading);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.sts-hero__scroll-line {
  position: relative;
  width: 1px;
  height: 2rem;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.2);
}
.sts-hero__scroll-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 40%;
  background-color: var(--_primitives---colors--white);
  transform: translateY(-100%);
}

/* On very short screens the scroll cue would crowd the buttons. */
@media screen and (max-height: 640px) {
  .sts-hero__scroll {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .sts-hero {
    padding: 6rem 0 6.5rem;
  }
  .sts-hero__title {
    margin-bottom: 1.5rem;
  }
  .sts-hero__lead {
    margin-bottom: 2rem;
    font-size: 1rem;
  }
}

/* Hero entrance and ambient motion. The text and buttons only move (no fade), so the call to action
   is never invisible and the largest text on small screens paints right away. */
@media (prefers-reduced-motion: no-preference) {
  .sts-hero__img {
    animation: sts-zoom-in 2.6s var(--sts-ease-out) both;
  }
  .sts-hero__line-inner {
    animation: sts-line-up 1.1s var(--sts-ease-out) 0.15s both;
  }
  .sts-hero__line + .sts-hero__line .sts-hero__line-inner {
    animation-delay: 0.27s;
  }
  .sts-hero__lead {
    animation: sts-rise 1s var(--sts-ease-out) 0.4s both;
  }
  .sts-hero__actions {
    animation: sts-rise 1s var(--sts-ease-out) 0.5s both;
  }
  .sts-hero__scroll {
    animation: sts-fade 1s ease 1.1s both;
  }
  .sts-hero__scroll-line::after {
    animation: sts-scroll-cue 2.2s var(--sts-ease) 1.5s infinite;
  }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .sts-hero__picture {
      animation: sts-hero-parallax linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
  }
}

@keyframes sts-zoom-in {
  from { transform: scale(1.12); }
  to { transform: none; }
}
@keyframes sts-line-up {
  from { transform: translateY(110%); }
  to { transform: none; }
}
@keyframes sts-rise {
  from { transform: translateY(1.25rem); }
  to { transform: none; }
}
@keyframes sts-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes sts-scroll-cue {
  from { transform: translateY(-100%); }
  to { transform: translateY(250%); }
}
@keyframes sts-hero-parallax {
  to { transform: translateY(18%); }
}

/* ---------- Marquee: the parent's news ticker, carrying the capabilities named in the copy ---------- */

.sts-marquee {
  position: relative;
  overflow: hidden;
  padding: 1.25rem 0;
  border-block: 1px solid var(--sts-line-on-dark);
  background-color: var(--sts-green-darker);
  color: var(--_primitives---colors--white);
}
.sts-marquee__track {
  display: flex;
  width: max-content;
}
.sts-marquee__list {
  display: flex;
  align-items: center;
  gap: 3rem;
  margin: 0;
  padding: 0 3rem 0 0;
  list-style: none;
}
.sts-marquee__list li {
  display: inline-flex;
  align-items: center;
  gap: 3rem;
  margin: 0;
  padding: 0;
  font-family: var(--sts-heading);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sts-marquee__list li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background-color: var(--sts-green-light);
}
@media (prefers-reduced-motion: no-preference) {
  .sts-marquee__track {
    animation: sts-marquee 48s linear infinite;
  }
  .sts-marquee:hover .sts-marquee__track {
    animation-play-state: paused;
  }
}
@keyframes sts-marquee {
  to { transform: translateX(-50%); }
}

/* ---------- About: split copy and framed image ---------- */

.sts-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(3rem, 6vw, 6rem);
}
.sts-about__actions {
  gap: 1.5rem;
  margin-top: 2.25rem;
}
.sts-about__frame {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.55);
}
.sts-about__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 50%;
  transform: scale(1.12);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sts-about__img {
      animation: sts-parallax linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}
@keyframes sts-parallax {
  from { transform: translateY(-6%) scale(1.12); }
  to { transform: translateY(6%) scale(1.12); }
}

@media screen and (max-width: 991px) {
  .sts-about__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Stacked sheets: each section from Commitments down overlaps the one above ---------- */

.sts-sheet {
  position: relative;
  z-index: 1;
  margin-top: -2rem;
  border-radius: 2rem 2rem 0 0;
}
@media screen and (max-width: 767px) {
  .sts-sheet {
    margin-top: -1.5rem;
    border-radius: 1.5rem 1.5rem 0 0;
  }
}

/* ---------- Commitments: bento grid of cards with photo panels ---------- */

.sts-commitments {
  position: relative;
  overflow: clip;
  background-color: var(--sts-ink);
}
.sts-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 1.25rem;
}
.sts-bento__intro {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 1rem 1rem 0;
}
.sts-card {
  display: flex;
  flex-direction: column;
  min-height: 22rem;
  overflow: hidden;
  border: 1px solid var(--sts-line-on-dark);
  border-radius: 16px;
  background-color: var(--sts-ink-raised);
}
.sts-card--wide {
  grid-column: span 2;
  flex-direction: row;
}
.sts-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  min-width: 0;
  padding: 2rem;
  container-type: inline-size;
}
/* Photo panel: on top of the narrow card, beside the text on wide cards. */
.sts-card__media {
  order: -1;
  flex: none;
  height: 12rem;
  overflow: hidden;
  border-bottom: 1px solid var(--sts-line-on-dark);
}
.sts-card--wide .sts-card__media {
  order: 0;
  width: 40%;
  height: auto;
  border-bottom: 0;
  border-left: 1px solid var(--sts-line-on-dark);
}
.sts-card__media picture {
  display: block;
  height: 100%;
}
.sts-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sts-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sts-card__index {
  margin: 0;
  color: var(--sts-green-light);
  font-family: var(--sts-heading);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.sts-card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--sts-line-on-dark);
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--sts-green-light);
}
.sts-card__icon svg {
  overflow: visible;
}
/* "Sovereignty" is 11 letters at 0.58em each with this tracking (6.4em), so 15cqi always fits. */
.sts-card__title {
  margin: 0 0 0.875rem;
  color: var(--_primitives---colors--white);
  font-family: var(--sts-heading);
  font-size: min(4.5rem, 15cqi);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--sts-mono-tracking);
}
.sts-card__text {
  max-width: 34rem;
  margin: 0;
  color: var(--sts-muted-on-dark);
  font-size: 1.0625rem;
  line-height: 1.6;
}
/* The Water card takes the parent's water blue, echoing the hero's blue "Water". */
.sts-card--water .sts-card__index,
.sts-card--water .sts-card__icon {
  color: var(--sts-water);
}
.sts-icon-needle,
.sts-icon-ripple {
  transform-box: fill-box;
  transform-origin: center;
}
.sts-bento > .sts-reveal-pending.sts-revealed:nth-child(3) {
  transition-delay: 0.1s;
}
.sts-bento > .sts-reveal-pending.sts-revealed:nth-child(4) {
  transition-delay: 0.2s;
}
/* Each icon moves once as its card scrolls in. The cards are not links, so nothing reacts to hover. */
@media (prefers-reduced-motion: no-preference) {
  .sts-card.sts-revealed .sts-icon-needle {
    animation: sts-needle 1.4s var(--sts-spring) 0.5s both;
  }
  .sts-card.sts-revealed .sts-icon-ripple {
    animation: sts-ripple 1.2s ease-out 0.6s 2 both;
  }
  .sts-card.sts-revealed .sts-icon-shackle {
    animation: sts-shackle 1s var(--sts-spring) 0.6s both;
  }
}
@keyframes sts-needle {
  from { transform: rotate(-135deg); }
  to { transform: none; }
}
@keyframes sts-ripple {
  0% { opacity: 1; transform: scaleX(0.3); }
  70% { opacity: 0; transform: scaleX(1.25); }
  100% { opacity: 1; transform: none; }
}
@keyframes sts-shackle {
  from { transform: translateY(-3px); }
  to { transform: none; }
}

@media screen and (max-width: 991px) {
  .sts-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sts-bento__intro {
    grid-column: 1 / -1;
  }
  /* Water drops to one column with its photo on top; Sovereignty stays full width. */
  .sts-card--wide {
    grid-column: span 1;
    flex-direction: column;
  }
  .sts-card--wide .sts-card__media {
    order: -1;
    width: auto;
    height: 12rem;
    border-bottom: 1px solid var(--sts-line-on-dark);
    border-left: 0;
  }
  .sts-card--wide:first-of-type {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  .sts-card--wide:first-of-type .sts-card__media {
    order: 0;
    width: 40%;
    height: auto;
    border-bottom: 0;
    border-left: 1px solid var(--sts-line-on-dark);
  }
}
@media screen and (max-width: 767px) {
  .sts-bento {
    grid-template-columns: minmax(0, 1fr);
  }
  .sts-card {
    min-height: 0;
  }
  .sts-card--wide:first-of-type {
    grid-column: auto;
    flex-direction: column;
  }
  .sts-card .sts-card__media,
  .sts-card--wide .sts-card__media,
  .sts-card--wide:first-of-type .sts-card__media {
    order: -1;
    width: auto;
    height: 11rem;
    border-bottom: 1px solid var(--sts-line-on-dark);
    border-left: 0;
  }
  .sts-card__body {
    padding: 1.5rem;
  }
}

/* ---------- How it works: a timeline that draws itself ---------- */

.sts-approach {
  background-color: var(--_primitives---colors--neutral-lightest);
}
.sts-approach__head {
  max-width: 48rem;
  margin-bottom: 4rem;
}
.sts-steps {
  --sts-dot: 0.875rem;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The track, then the green line drawn over it */
.sts-steps::before,
.sts-steps::after {
  content: "";
  position: absolute;
  top: calc(var(--sts-dot) / 2 - 1px);
  right: 0;
  left: 0;
  height: 2px;
  border-radius: 2px;
}
.sts-steps::before {
  background-color: rgba(0, 0, 0, 0.1);
}
.sts-steps::after {
  background-color: var(--sts-green-dark);
  transform-origin: left;
}
.sts-step {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
.sts-step:nth-child(2) { --sts-i: 1; }
.sts-step:nth-child(3) { --sts-i: 2; }
.sts-step:nth-child(4) { --sts-i: 3; }
.sts-step__dot {
  position: relative;
  z-index: 1;
  width: var(--sts-dot);
  height: var(--sts-dot);
  border-radius: 50%;
  background-color: var(--sts-green-dark);
  box-shadow: 0 0 0 0.375rem rgba(31, 143, 95, 0.16);
}
.sts-step__card {
  flex: 1;
  margin-top: 2rem;
  padding: 2rem 1.75rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  background-color: var(--_primitives---colors--white);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03), 0 18px 40px -28px rgba(0, 0, 0, 0.35);
}
.sts-step__num {
  margin: 0 0 2.5rem;
  color: var(--sts-green-dark);
  font-family: var(--sts-heading);
  font-size: 3.5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--sts-mono-tracking);
}
.sts-step__title {
  margin: 0 0 0.75rem;
  font-family: var(--sts-heading);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: var(--sts-mono-tracking);
}
.sts-step__text {
  margin: 0;
  color: var(--sts-muted-on-light);
  font-size: 1rem;
  line-height: 1.6;
}
.sts-step__text .text-style-link {
  color: var(--_primitives---colors--neutral-darkest);
  text-decoration-color: var(--sts-green);
  text-underline-offset: 3px;
}
/* Reveal choreography: the list stays put while the line draws and each step lights up in turn. */
.sts-steps.sts-reveal-pending {
  opacity: 1;
  transform: none;
}
.sts-steps.sts-reveal-pending::after {
  transform: scaleX(0);
}
.sts-steps.sts-reveal-pending .sts-step__dot {
  background-color: var(--_primitives---colors--neutral-lightest);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
}
.sts-steps.sts-reveal-pending .sts-step__card {
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
}
.sts-steps.sts-reveal-pending.sts-revealed::after {
  transform: none;
  transition: transform 1.8s var(--sts-ease-out) 0.15s;
}
.sts-steps.sts-reveal-pending.sts-revealed .sts-step__dot {
  background-color: var(--sts-green-dark);
  box-shadow: 0 0 0 0.375rem rgba(31, 143, 95, 0.16);
  transition: background-color 0.4s var(--sts-ease), box-shadow 0.6s var(--sts-ease);
  transition-delay: calc(0.2s + var(--sts-i, 0) * 0.4s);
}
.sts-steps.sts-reveal-pending.sts-revealed .sts-step__card {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--sts-ease-out), transform 1.1s var(--sts-ease-out);
  transition-delay: calc(0.1s + var(--sts-i, 0) * 0.12s);
}

@media screen and (max-width: 991px) {
  .sts-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sts-steps::before,
  .sts-steps::after {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .sts-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding-left: 2rem;
  }
  .sts-steps::before,
  .sts-steps::after {
    display: block;
    top: 0;
    right: auto;
    bottom: 0;
    left: calc(var(--sts-dot) / 2 - 1px);
    width: 2px;
    height: auto;
  }
  .sts-steps::after {
    transform-origin: top;
  }
  .sts-steps.sts-reveal-pending::after {
    transform: scaleY(0);
  }
  .sts-step {
    position: relative;
  }
  .sts-step__dot {
    position: absolute;
    top: 2.25rem;
    left: -2rem;
  }
  .sts-step__card {
    margin-top: 0;
    padding: 1.75rem 1.5rem;
  }
  .sts-step__num {
    margin-bottom: 1.5rem;
    font-size: 2.75rem;
  }
}

/* ---------- Contact: intro beside the form card ---------- */

.sts-contact {
  position: relative;
  overflow: clip;
  background-color: var(--sts-ink);
}
.sts-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: clamp(3rem, 6vw, 5rem);
}
.sts-contact__intro {
  position: sticky;
  top: 8rem;
}
.sts-mail-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 26rem;
  margin-top: 2.5rem;
  padding: 1rem 1.25rem 1rem 1rem;
  border: 1px solid var(--sts-line-on-dark);
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--_primitives---colors--white);
  transition: border-color 0.3s var(--sts-ease), background-color 0.3s var(--sts-ease), transform 0.5s var(--sts-ease-out);
}
.sts-mail-card:hover {
  border-color: rgba(98, 176, 143, 0.5);
  background-color: rgba(255, 255, 255, 0.07);
}
.sts-mail-card__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  background-color: rgba(31, 143, 95, 0.2);
  color: var(--sts-green-light);
}
.sts-mail-card__value {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: no-preference) {
  .sts-mail-card:hover {
    transform: translateY(-2px);
  }
}
/* Solid border that turns green while someone is filling in the form */
.sts-form-card {
  border: 1px solid var(--sts-line-on-dark);
  border-radius: 16px;
  background-color: var(--sts-ink-raised);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8);
  transition: border-color 0.4s var(--sts-ease);
}
.sts-form-card:focus-within {
  border-color: rgba(98, 176, 143, 0.55);
}
.sts-form-card__inner {
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.sts-form-card .w-form {
  margin-bottom: 0;
}
.sts-form-note {
  margin: 1rem 0 0;
  color: var(--sts-muted-on-dark);
  font-size: 0.875rem;
}

@media screen and (max-width: 991px) {
  .sts-contact__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .sts-contact__intro {
    position: static;
  }
}

/* Form states */
.form_input.is-alternate[aria-invalid="true"] {
  border-color: #e23939;
}
/* Inline field errors use the human-check error style from the parent form. */
.sts-field-error {
  margin-top: 0.5rem;
  color: var(--sts-text-on-dark);
  font-size: 0.875rem;
  line-height: 1.4;
}
.sts-field-error:empty {
  display: none;
}
.w-form-done.sts-show,
.w-form-fail.sts-show {
  display: block;
}
/* #e23939 on #fef3f2 measures 4.0:1; the block's own #b42318 measures 6.1:1. */
.form_message-error .error-text {
  color: inherit;
}

/* Human check: ported from the export's contact-us.html embed */
.mp-captcha {
  --st-blue: #294a76;
  --st-green: #1f8f5f;
  --st-steel: #414243;
  --st-white: #ffffff;
  --st-plat: #f4f4f5;
  --st-text: rgba(244, 244, 245, 0.92);
  --st-subtext: rgba(244, 244, 245, 0.72);
  --st-border: rgba(244, 244, 245, 0.14);
  --st-border-blue: rgba(41, 74, 118, 0.55);
  --st-border-green: rgba(31, 143, 95, 0.55);
  width: 100%;
  max-width: none;
  position: relative;
}
.mp-captcha__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--st-text);
  font-size: 12px;
  font-weight: 650;
  margin-bottom: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mp-captcha__track {
  width: 100%;
  position: relative;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(65, 66, 67, 0.38), rgba(65, 66, 67, 0.22));
  border: 1px solid var(--st-border);
  overflow: hidden;
  cursor: pointer;
  outline: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(244, 244, 245, 0.06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.mp-captcha__track::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background: repeating-linear-gradient(180deg, rgba(244, 244, 245, 0.05) 0px, rgba(244, 244, 245, 0.05) 1px, rgba(244, 244, 245, 0) 6px);
  mix-blend-mode: overlay;
}
.mp-captcha__track::after {
  content: "";
  position: absolute;
  inset: -45%;
  pointer-events: none;
  background: radial-gradient(circle at 18% 55%, rgba(41, 74, 118, 0.28), transparent 58%);
  opacity: 0.85;
  transform: translateZ(0);
}
.mp-captcha__track:focus {
  border-color: var(--st-border-green);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(31, 143, 95, 0.18), 0 0 24px rgba(31, 143, 95, 0.1), inset 0 1px 0 rgba(244, 244, 245, 0.06);
}
.mp-captcha__fill {
  position: absolute;
  inset: 0;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  background: linear-gradient(90deg, rgba(41, 74, 118, 0.34), rgba(31, 143, 95, 0.24));
}
.mp-captcha__text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--st-subtext);
  font-size: 13px;
  font-weight: 550;
  pointer-events: none;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.mp-captcha__handle {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(31, 143, 95, 1), rgba(31, 143, 95, 0.78));
  color: var(--st-plat);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 18px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.48), 0 0 18px rgba(31, 143, 95, 0.14), inset 0 0 0 1px rgba(244, 244, 245, 0.18);
  will-change: transform;
  transform: translate3d(0, 0, 0);
  touch-action: none;
}
.mp-captcha__arrow {
  transform: translateX(1px);
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
}
.mp-captcha.is-animating .mp-captcha__fill,
.mp-captcha.is-animating .mp-captcha__handle {
  transition: transform 180ms ease;
}
.mp-captcha.is-verified .mp-captcha__track {
  border-color: rgba(31, 143, 95, 0.6);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(31, 143, 95, 0.14), 0 0 30px rgba(31, 143, 95, 0.1), inset 0 1px 0 rgba(244, 244, 245, 0.06);
}
.mp-captcha.is-verified .mp-captcha__fill {
  background: linear-gradient(90deg, rgba(41, 74, 118, 0.42), rgba(31, 143, 95, 0.3));
}
.mp-captcha.is-verified .mp-captcha__text {
  color: var(--st-text);
}
.mp-captcha__error {
  margin-top: 8px;
  color: rgba(244, 244, 245, 0.7);
  font-size: 12px;
  min-height: 16px;
}
/* Honeypot: off screen rather than display: none */
.mp-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}
/* The submit looks disabled until the check passes but stays focusable, so pressing it
   explains what is missing instead of doing nothing. */
#mp-submit.mp-submit-disabled,
#mp-submit[aria-disabled="true"] {
  opacity: 0.35;
  filter: saturate(0);
  cursor: not-allowed;
  background: rgba(65, 66, 67, 0.22);
  color: rgba(244, 244, 245, 0.8);
  border-color: rgba(244, 244, 245, 0.12);
  box-shadow: none;
  transform: none;
}
#mp-submit.mp-submit-disabled:hover,
#mp-submit[aria-disabled="true"]:hover {
  background: rgba(65, 66, 67, 0.22);
  border-color: rgba(244, 244, 245, 0.12);
}
@media (prefers-reduced-motion: reduce) {
  .mp-captcha.is-animating .mp-captcha__fill,
  .mp-captcha.is-animating .mp-captcha__handle {
    transition: none !important;
  }
}


/* ---------- Footer ---------- */

.sts-footer {
  position: relative;
  overflow: clip;
  padding: 5rem 0 2.5rem;
}
.sts-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.sts-footer__logo img {
  display: block;
  width: 141px;
  height: 32px;
}
.sts-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
}
/* Underline fades in on hover; the arrow flows with the text when it wraps. */
.sts-footer__link {
  color: var(--_primitives---colors--white);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
  transition: text-decoration-color 0.3s var(--sts-ease);
}
.sts-footer__link:hover {
  text-decoration-color: currentColor;
}
.sts-footer__link .sts-button-icon {
  display: inline-block;
  margin-left: 0.375rem;
  vertical-align: -0.125em;
}
/* Decorative name in the heading font, sized so its 21 letters (12.2em with this tracking) fill the
   container. The parent's white-50 token keeps it quiet while still clearing 3:1 (3.5:1). */
.sts-footer__wordmark {
  margin: 3.5rem 0 2rem;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--sts-heading);
  font-size: min(6.5rem, 7.3vw);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: var(--sts-mono-tracking);
  white-space: nowrap;
}
.sts-footer__credit {
  margin: 0;
  color: var(--sts-muted-on-dark);
  font-size: 0.875rem;
}

@media screen and (max-width: 767px) {
  .sts-footer {
    padding-top: 4rem;
  }
  .sts-footer__top {
    flex-direction: column;
    align-items: flex-start;
  }
  .sts-footer__links {
    flex-direction: column;
  }
}

/* ---------- 404 ---------- */

.sts-hero.sts-hero--plain {
  background-color: var(--sts-ink);
}