:root {
  /* Sizes */
  --max-width: 1280px;
  --horizontal-padding: 16px;
  --button-margin-bottom: 16px;

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 900;

  /* Line heights */
  --line-height-xs: 1;
  --line-height-sm: 1.2;
  --line-height-md: 1.3333;
  --line-height-lg: 1.5;
  --line-height-xl: 2;

  /* Transitions */
  --animation-duration: 200ms;
  --transition-function-linear: linear;
  --transition-function-ease-in-out: ease-in-out;
}

/* Base critical styles */
html {
  overflow-x: clip;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  min-height: 100%;
  width: 100%;
  font-size: 16px;
  line-height: var(--line-height-lg, 1.5);
  overflow-x: clip;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body > * {
  flex: 0 0 auto;
}

a {
  display: inline-block;
  vertical-align: top;
  color: inherit;
  text-decoration: none;
  transition: all var(--animation-duration, 200ms) var(--transition-function-ease-in-out);
}

ul, ol {
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
}

input,
textarea {
  font-family: var(--font-body, sans-serif);
  border-radius: var(--border-radius-rounded, 0);
}

.touch {
  text-size-adjust: 100%;
}

/* Container styles */
.container {
  max-width: var(--max-width);
  padding: 0 var(--horizontal-padding, 16px);
  margin: 0 auto;
}

/* Text styles */
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  font-family: var(--font-heading, sans-serif);
  font-weight: var(--font-weight-headers, 700);
  line-height: var(--line-height-sm, 1.2);
  margin-bottom: 1.5625rem;
}

:is(h1, .h1) {
  font-size: var(--font-size-h1, 56px);
  font-weight: var(--font-weight-h1, 700);
}

:is(h2, .h2) {
  font-size: var(--font-size-h2, 48px);
  font-weight: var(--font-weight-h2, 700);
}

:is(h3, .h3) {
  font-size: var(--font-size-h3, 40px);
  font-weight: var(--font-weight-h3, 700);
}

:is(h4, .h4) {
  font-size: 32px;
  line-height: var(--line-height-md, 1.3);
}

:is(h5, .h5) {
  font-size: 24px;
  line-height: 1.4;
}

:is(h6, .h6) {
  font-size: 20px;
  line-height: 1.4;
}

.text-large {
  font-size: 1.25rem;
  line-height: var(--line-height-lg, 1.5);
}

.text-medium {
  font-size: 1.125rem;
  line-height: var(--line-height-lg, 1.5);
}

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

.tagline {
  display: inline-block;
  vertical-align: top;
  font-family: var(--font-tagline, sans-serif);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-lg, 1.5);
  font-size: var(--font-size-tagline, 14px);
  letter-spacing: 0.03em;
  margin: 0 0 20px;
}

/* Image optimization */
img {
  display: block;
  height: auto;
  max-width: 100%;
}

.image-wrapper {
  display: block;
  contain: style;
}

.image-wrapper[data-aspect-ratio] {
  aspect-ratio: attr(data-aspect-ratio);
}

.image-wrapper[data-intrinsic-width][data-intrinsic-height] {
  contain-intrinsic-size: attr(data-intrinsic-width px) attr(data-intrinsic-height px);
}

.image-wrapper:has(.image-placeholder) {
  position: relative;
  content-visibility: auto;
}

.image-wrapper:has(.image-placeholder) .image-main {
  will-change: opacity;
  opacity: 1;
}

.image-wrapper:has(.image-placeholder) .image-main.hidden {
  opacity: 0;
}

.image-wrapper:has(.image-placeholder) .image-main.loaded {
  opacity: 1;
  transition: opacity var(--animation-duration, 200ms) var(--transition-function-ease-in-out);
}

.image-placeholder {
  filter: blur(10px);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
  will-change: opacity;
  transition: opacity var(--animation-duration, 200ms) var(--transition-function-ease-in-out);
  backface-visibility: hidden;
}

@supports not (aspect-ratio: 1) {
  .image-wrapper[data-aspect-ratio]::before {
    content: '';
    display: block;
    padding-bottom: calc(100% / var(--aspect-ratio, 1));
  }

  .image-wrapper[data-aspect-ratio] > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* Header styles */
.header {
  position: relative;
  z-index: 1001;
  margin-top: var(--preview-height, 0) !important;
  margin-bottom: -1px;
  contain: layout style;
}

.header--sticky {
  position: sticky;
  top: var(--preview-height, 0);
  left: 0;
  right: 0;
  margin-top: 0 !important;
  transition: top var(--animation-duration, 200ms) var(--transition-function-ease-in-out);
}

/* Button styles */
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-body, sans-serif);
  font-size: 16px;
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-sm, 1.2);
  letter-spacing: -0.01em;
  color: currentcolor;
  border: 1px solid transparent;
  border-radius: var(--border-radius-dynamic, 0);
  background: none;
  cursor: pointer;
  margin-bottom: var(--button-margin-bottom, 16px);
  transition: all var(--animation-duration, 200ms) var(--transition-function-ease-in-out);
}

.button.button--secondary svg {
  margin-left: 17px;
}

.button.button--secondary path {
  transition: all var(--animation-duration, 200ms) var(--transition-function-ease-in-out);
}

.button.button--secondary:hover {
  text-decoration: none;
}

.button.button--small {
  padding: 8px 18px;
}

.button.button--large {
  padding: 14px 24px;
}

/* The first section critical styles */
#main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

#main > * {
  width: 100%;
}

/* Modifier states */
.overflow-hidden {
  overflow: clip;
}

/* Critical Images section styles */
.images__wrapper {
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: stretch;
}

.images__container {
  min-height: 515px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.images__text-area {
  flex: 1 1 auto;
  display: flex;
  justify-content: var(--text-justify-content-mobile, flex-start);
  align-items: var(--text-align-items-mobile, flex-start);
  text-align: var(--text-align-mobile, left);
  margin: 0 var(--margin-right-mobile) 0 var(--margin-left-mobile);
}

.images__title {
  font-size: var(--font-size-h2, 48px);
}

.images__title * {
  font-family: var(--font-heading, sans-serif);
}

.images__description:not(:last-child) {
  padding: 0 0 38px;
}

.images__description:last-child {
  padding-bottom: 0;
}

.images__buttons {
  margin: 0 -8px calc(-1 * var(--button-margin-bottom, 16px));
}

.images__button {
  margin-left: 8px;
  margin-right: 8px;
}

.images__vision {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
}

.images__vision-wrapper {
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
  position: relative;
  max-width: calc(var(--max-width) - var(--horizontal-padding) * 2);
  margin: 0 auto;
}

.images__image-wrapper .image-placeholder {
  z-index: -1;
}

.images__image-wrapper:has(.image-placeholder) {
  position: static;
}

.images__image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

/* Basic responsive styles */
@media (width >= 428px) {
  .images__container {
    min-height: 560px;
  }
}

@media (width >= 992px) {
  .images__container {
    min-height: calc(var(--height, auto) - var(--header-height, 105px));
  }

  .images__vision-wrapper {
    display: block;
  }

  .images__text-area {
    justify-content: var(--text-justify-content, flex-start);
    align-items: var(--text-align-items, center);
    text-align: var(--text-align, left);
    margin: 0 var(--margin-right) 0 var(--margin-left);
  }

  .images__title {
    font-size: calc(var(--font-size-h1, 56px) + 1rem);
  }

  .images__description {
    padding-left: var(--padding-left, 0);
    padding-right: var(--padding-right, 0);
  }
}

@media (width >= 1100px) {
  .tagline {
    margin: 0 0 16px;
  }
}

@media (width >= 1248px) {
  .images__text-area {
    padding: 0 var(--padding-no-full-width, 56px);
  }
}
