*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--wa-color-text-normal);
  background: var(--wa-color-surface-default);
}

img,
lite-youtube {
  display: block;
  max-inline-size: 100%;
}

img {
  block-size: auto;
}

figure,
h1,
h2,
h3,
p {
  margin: 0;
}

a {
  text-underline-offset: var(--wa-space-2xs);
}

.site-page {
  --main-width: 100%;
}

.site-page::part(base),
.site-page::part(body),
.site-page::part(main-content) {
  color: var(--wa-color-text-normal);
  background: var(--wa-color-surface-default);
}

.site-page::part(main-content),
.site-page::part(header),
.site-page::part(footer) {
  padding: 0;
}

.site-page::part(body) {
  gap: 0;
}

.site-page > main {
  padding: 0;
}

.home-main section[id] {
  scroll-margin-block-start: var(--wa-space-5xl);
}

.site-page[view="desktop"]::part(navigation) {
  display: none;
}

.site-page[view="mobile"] .site-top-nav {
  display: none;
}

.site-page[view="mobile"] .brand-link {
  inline-size: calc(var(--wa-space-5xl) + var(--wa-space-4xl));
}

.site-page[view="mobile"] .page-boundary {
  padding-inline: var(--wa-space-m);
}

.page-boundary {
  inline-size: 100%;
  max-inline-size: calc(var(--wa-space-5xl) * 15);
  padding-inline: var(--wa-space-xl);
  margin-inline: auto;
}

.site-header {
  color: var(--wa-color-text-normal);
  background: var(--wa-color-surface-raised);
  border-block-end: var(--wa-border-width-m) solid var(--wa-color-brand-fill-loud);
}

.site-header__bar {
  min-block-size: var(--wa-space-3xl);
}

.brand-link,
.footer-brand {
  display: inline-block;
  flex: 0 0 auto;
}

.brand-link {
  inline-size: calc(var(--wa-space-5xl) * 2.5);
}

.footer-brand {
  inline-size: calc(var(--wa-space-5xl) * 3);
}

.brand-logo {
  inline-size: 100%;
}

.site-header__actions {
  flex: 1;
}

.site-top-nav__link,
.site-nav-link {
  font-family: var(--wa-font-family-heading);
  font-weight: var(--wa-font-weight-action);
  text-decoration: none;
}

.site-top-nav__link {
  color: var(--wa-color-text-normal);
  font-size: var(--wa-font-size-s);
}

.site-top-nav__link:hover,
.site-top-nav__link:focus-visible {
  color: var(--wa-color-text-link);
}

.site-nav-link:hover,
.site-nav-link:focus-visible {
  color: var(--wa-color-text-link);
}

.site-nav-link {
  display: block;
  padding-block: var(--wa-space-xs);
  color: var(--wa-color-text-normal);
  font-size: var(--wa-font-size-l);
}

.site-drawer-section {
  inline-size: 100%;
}

.drawer-summary {
  max-inline-size: 38ch;
  color: var(--wa-color-text-quiet);
}

.hero {
  min-block-size: 78dvh;
  padding-block: var(--wa-space-5xl);
  color: var(--wa-color-neutral-on-loud);
  background:
    linear-gradient(
      to right,
      var(--wa-color-neutral-fill-loud),
      color-mix(in oklab, var(--wa-color-neutral-fill-loud) 88%, transparent) 48%,
      color-mix(in oklab, var(--wa-color-neutral-fill-loud) 24%, transparent)
    ),
    url("/assets/images/index-hero.jpg") center / cover;
}

.site-page[view="mobile"] .hero {
  min-block-size: auto;
  padding-block: var(--wa-space-4xl);
  background:
    linear-gradient(
      to right,
      color-mix(in oklab, var(--wa-color-neutral-fill-loud) 94%, transparent),
      color-mix(in oklab, var(--wa-color-neutral-fill-loud) 78%, transparent)
    ),
    url("/assets/images/index-hero-mobile.jpg") center / cover;
}

.hero-content {
  min-block-size: calc(78dvh - (var(--wa-space-5xl) * 2));
}

.hero-copy {
  max-inline-size: 66ch;
}

.site-page[view="mobile"] .hero-content {
  min-block-size: auto;
}

.hero h1 {
  max-inline-size: 13ch;
  color: var(--wa-color-neutral-on-loud);
  line-height: var(--wa-line-height-condensed);
}

.hero h1 span {
  display: block;
  color: var(--wa-color-brand-fill-loud);
}

.site-page[view="mobile"] .hero h1 {
  font-size: var(--wa-font-size-3xl);
}

.hero-lead {
  max-inline-size: 62ch;
  color: var(--wa-color-neutral-on-loud);
  line-height: var(--wa-line-height-expanded);
}

.site-page[view="mobile"] .hero-lead {
  font-size: var(--wa-font-size-m);
}

.section-kicker {
  color: var(--wa-color-text-link);
  font-family: var(--wa-font-family-heading);
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-action);
  letter-spacing: var(--wa-letter-spacing-expanded);
  text-transform: uppercase;
}

.hero-proof {
  max-inline-size: 70ch;
  padding-block-start: var(--wa-space-l);
  color: var(--wa-color-neutral-on-loud);
  border-block-start: var(--wa-border-width-s) solid var(--wa-color-neutral-border-loud);
}

.site-page[view="mobile"] .hero-proof {
  font-size: var(--wa-font-size-s);
}

.hero-proof wa-icon {
  color: var(--wa-color-brand-fill-loud);
}

.operation-icon,
.icon-badge,
.step-number,
.capability-icon,
.social-link {
  flex: 0 0 auto;
  inline-size: var(--wa-space-2xl);
  block-size: var(--wa-space-2xl);
  border-radius: var(--wa-border-radius-circle);
}

.operations-band {
  padding-block: var(--wa-space-3xl);
  color: var(--wa-color-brand-on-loud);
  background: var(--wa-color-brand-fill-loud);
}

.operations-band .section-kicker,
.operations-band h2,
.operations-band h3,
.operations-band p {
  color: var(--wa-color-brand-on-loud);
}

.operations-band__heading {
  max-inline-size: 72ch;
}

.operations-grid {
  --min-column-size: 24ch;
}

.operation-item {
  padding-block-start: var(--wa-space-m);
  border-block-start: var(--wa-border-width-m) solid var(--wa-color-brand-on-loud);
}

.operation-icon {
  color: var(--wa-color-brand-fill-loud);
  background: var(--wa-color-brand-on-loud);
}

.operation-item p {
  line-height: var(--wa-line-height-expanded);
}

.site-section,
.legal-section,
.error-section,
.cta-band {
  padding-block: var(--wa-space-4xl);
}

.site-section--lowered {
  background: var(--wa-color-surface-lowered);
  border-block: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.section-heading {
  max-inline-size: 72ch;
}

.section-heading--center {
  align-self: center;
  margin-inline: auto;
}

.section-lead {
  max-inline-size: 66ch;
  color: var(--wa-color-text-quiet);
  line-height: var(--wa-line-height-expanded);
}

.audience-grid {
  --min-column-size: 26ch;
}

.process-grid {
  --min-column-size: 26ch;
  padding: 0;
  margin: 0;
  list-style: none;
}

.feature-card,
.process-card {
  --spacing: var(--wa-space-xl);
  block-size: 100%;
}

.process-entry {
  block-size: 100%;
}

.feature-card p,
.process-card p {
  color: var(--wa-color-text-quiet);
  line-height: var(--wa-line-height-expanded);
}

.item-heading {
  align-items: center;
}

.icon-badge {
  color: var(--wa-color-brand-on-loud);
  background: var(--wa-color-brand-fill-loud);
  font-size: var(--wa-font-size-l);
}

.step-number {
  color: var(--wa-color-brand-on-loud);
  background: var(--wa-color-brand-fill-loud);
  font-family: var(--wa-font-family-heading);
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-heading);
}

.capabilities-band {
  padding-block: var(--wa-space-4xl);
  color: var(--wa-color-neutral-on-loud);
  background: var(--wa-color-neutral-fill-loud);
  border-block-start: var(--wa-border-width-l) solid var(--wa-color-brand-fill-loud);
}

.capabilities-layout {
  --min-column-size: 34ch;
}

.capabilities-band .section-kicker {
  color: var(--wa-color-brand-fill-loud);
}

.capabilities-band h2,
.capabilities-band h3 {
  color: var(--wa-color-neutral-on-loud);
}

.capabilities-band .section-lead {
  color: var(--wa-color-neutral-on-loud);
}

.capability-list {
  --min-column-size: 22ch;
  padding: 0;
  margin: 0;
  list-style: none;
}

.capability-item {
  padding: var(--wa-space-m);
  color: var(--wa-color-neutral-on-loud);
  background: color-mix(in oklab, var(--wa-color-neutral-on-loud) 8%, transparent);
  border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-loud);
  border-radius: var(--wa-border-radius-m);
}

.capability-item p {
  color: color-mix(in oklab, var(--wa-color-neutral-on-loud) 78%, transparent);
  line-height: var(--wa-line-height-expanded);
}

.capability-icon {
  color: var(--wa-color-brand-on-loud);
  background: var(--wa-color-brand-fill-loud);
  border-radius: var(--wa-border-radius-m);
  font-size: var(--wa-font-size-l);
}

.tour-section {
  background: var(--wa-color-surface-default);
}

.tour-section .section-lead {
  margin-inline: auto;
}

.video-frame {
  inline-size: 100%;
  max-inline-size: calc(var(--wa-space-5xl) * 12);
  margin-inline: auto;
  overflow: hidden;
  border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-l);
  box-shadow: var(--wa-shadow-l);
}

.video-frame lite-youtube {
  inline-size: 100%;
  block-size: 100%;
}

.cta-band {
  color: var(--wa-color-neutral-on-loud);
  background:
    linear-gradient(
      135deg,
      var(--wa-color-neutral-fill-loud),
      color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-brand-fill-loud) 18%)
    );
  border-block-start: var(--wa-border-width-l) solid var(--wa-color-brand-fill-loud);
}

.cta-copy {
  max-inline-size: 72ch;
}

.cta-band h2,
.cta-band p {
  color: var(--wa-color-neutral-on-loud);
}

.cta-band .section-kicker {
  color: var(--wa-color-brand-fill-loud);
}

.site-footer {
  color: var(--wa-color-neutral-on-loud);
  background: var(--wa-color-neutral-fill-loud);
}

.footer-grid {
  --min-column-size: 22ch;
  padding-block: var(--wa-space-3xl);
}

.footer-grid p,
.footer-grid span,
.footer-grid a,
.footer-bottom {
  color: color-mix(in oklab, var(--wa-color-neutral-on-loud) 76%, transparent);
}

.footer-grid a:hover,
.footer-grid a:focus-visible,
.footer-grid a[aria-current="page"] {
  color: var(--wa-color-neutral-on-loud);
}

.footer-brand img {
  filter: brightness(0) invert(1);
}

.footer-heading {
  color: var(--wa-color-neutral-on-loud);
  font-size: var(--wa-font-size-m);
}

.social-link {
  color: var(--wa-color-brand-on-loud);
  background: var(--wa-color-brand-fill-loud);
  font-size: var(--wa-font-size-l);
  text-decoration: none;
}

.footer-bottom {
  padding-block: var(--wa-space-l);
  border-block-start: var(--wa-border-width-s) solid var(--wa-color-neutral-border-loud);
}

.legal-section {
  background: var(--wa-color-surface-lowered);
}

.legal-card {
  --spacing: var(--wa-space-xl);
  display: block;
  inline-size: 100%;
  max-inline-size: 76ch;
  margin-inline: auto;
  overflow-wrap: anywhere;
}

.legal-card article {
  line-height: var(--wa-line-height-expanded);
}

.legal-card h1 {
  line-height: var(--wa-line-height-condensed);
}

.error-section {
  min-block-size: calc(var(--wa-space-5xl) * 7);
  color: var(--wa-color-neutral-on-loud);
  background:
    linear-gradient(
      to right,
      color-mix(in oklab, var(--wa-color-neutral-fill-loud) 92%, transparent),
      color-mix(in oklab, var(--wa-color-neutral-fill-loud) 56%, transparent)
    ),
    url("/assets/images/index-hero.jpg") center / cover;
}

.site-page[view="mobile"] .error-section {
  background:
    linear-gradient(
      to right,
      color-mix(in oklab, var(--wa-color-neutral-fill-loud) 92%, transparent),
      color-mix(in oklab, var(--wa-color-neutral-fill-loud) 56%, transparent)
    ),
    url("/assets/images/index-hero-mobile.jpg") center / cover;
}

.error-panel {
  max-inline-size: 70ch;
  padding: var(--wa-space-3xl);
  background: color-mix(in oklab, var(--wa-color-neutral-fill-loud) 88%, transparent);
  border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-loud);
  border-radius: var(--wa-border-radius-l);
  box-shadow: var(--wa-shadow-l);
  backdrop-filter: blur(var(--wa-space-xs));
}

.error-panel h1 {
  color: var(--wa-color-neutral-on-loud);
}

.error-panel .section-kicker {
  color: var(--wa-color-brand-fill-loud);
}

.error-panel .section-lead {
  color: color-mix(in oklab, var(--wa-color-neutral-on-loud) 78%, transparent);
}
