:root {
  color-scheme: dark;
  --oxford: #002147;
  --oxford-deep: #000812;
  --cream: #fffaf0;
  --gold: #d8b36a;
  --o-size: clamp(142px, 18vw, 254px);
  --x-size: clamp(62px, 7.8vw, 108px);
  --bridge-width: clamp(248px, 29vw, 438px);
  --bridge-final-width: var(--bridge-width);
  --x-final-width: var(--x-size);
  --wordmark-nudge: 0px;
  --mission-nudge-x: clamp(-18px, -1.1vw, -8px);
  --x-left: calc((var(--o-size) - var(--x-size)) / 2);
  --field-bg: var(--oxford);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

html:has(body.contact-page) {
  background: var(--oxford);
}

body {
  margin: 0;
  color: var(--cream);
  background: var(--oxford-deep);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  place-items: center;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(0, 33, 71, .78), rgba(0, 8, 18, .98) 58%),
    var(--oxford-deep);
  opacity: 1;
  transition:
    opacity 850ms ease,
    visibility 850ms ease;
}

.loading-mark {
  position: relative;
  display: grid;
  width: clamp(82px, 12vw, 132px);
  aspect-ratio: 1;
  place-items: center;
  box-shadow:
    0 0 30px rgba(255, 255, 255, .14),
    0 0 76px rgba(0, 94, 150, .24);
}

.loading-x {
  position: relative;
  z-index: 2;
  color: #ffffff;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(2.35rem, 6.2vw, 4.85rem);
  line-height: 1;
  text-shadow:
    0 0 12px rgba(255, 255, 255, .9),
    0 0 34px rgba(255, 255, 255, .54),
    0 12px 34px rgba(0, 8, 18, .7);
  animation: loadingXPulse 1800ms ease-in-out infinite;
}

.loading-circle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

.loading-circle-track,
.loading-circle-progress {
  fill: none;
  stroke-width: 5;
}

.loading-circle-track {
  stroke: rgba(255, 255, 255, .14);
}

.loading-circle-progress {
  stroke: #ffffff;
  stroke-dasharray: 302;
  stroke-dashoffset: 302;
  stroke-linecap: round;
  filter:
    drop-shadow(0 0 7px rgba(255, 255, 255, .9))
    drop-shadow(0 0 18px rgba(255, 255, 255, .46));
  animation: loadingCircleDraw 1800ms cubic-bezier(.65, 0, .25, 1) infinite;
}

.is-loading .stage {
  opacity: 0;
  transform: scale(1.01);
}

.is-loading .stage::before,
.is-loading .o-mark,
.is-loading .bridge-word,
.is-loading .x-mark,
.is-loading .mission-statement,
.is-loading .mission-group {
  animation-play-state: paused;
}

.is-loaded .stage {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 900ms ease,
    transform 1200ms cubic-bezier(.2, .8, .2, 1);
}

.is-loaded .loading-screen {
  visibility: hidden;
  opacity: 0;
}

.stage {
  position: relative;
  display: grid;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  place-items: start center;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(rgba(0, 8, 18, .1), rgba(0, 8, 18, .1)),
    url("OBridgeXNew4.png?v=20260507f") center / cover no-repeat,
    var(--oxford-deep);
}

.stage::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background: inherit;
  background-position: center;
  background-size: cover;
  filter: saturate(1.04) contrast(1.06) brightness(.72);
  transform: scale(1.035);
  animation: photoSettle 1800ms cubic-bezier(.2, .8, .2, 1) forwards;
}

.bridge-photo,
img[src*="OBridgeXNew"] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.home-logo-link {
  position: absolute;
  top: clamp(18px, 2.5vw, 34px);
  left: clamp(18px, 2.5vw, 34px);
  z-index: 4;
  display: block;
  width: clamp(76px, 7vw, 112px);
}

.home-logo {
  display: block;
  width: 100%;
  height: auto;
  filter: none;
}

.brand-stage {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100%;
  justify-items: center;
  padding: clamp(28px, 5.8vh, 68px) clamp(20px, 4vw, 54px) 0;
  text-align: center;
}

.wordmark {
  position: relative;
  width: calc(var(--o-size) + var(--bridge-final-width) + var(--x-final-width) + var(--bridge-glow-pad, 0px));
  max-width: calc(100vw - 36px);
  min-height: calc(var(--o-size) * 1.05);
  justify-self: center;
  transform: translateX(var(--wordmark-nudge));
}

.o-mark {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  width: var(--o-size);
  height: var(--o-size);
  object-fit: contain;
  opacity: 0;
  transform: translateY(-50%) scale(.72) rotate(-8deg);
  transform-origin: 50% 50%;
  filter:
    drop-shadow(0 0 14px rgba(255, 255, 255, .92))
    drop-shadow(0 0 42px rgba(255, 255, 255, .68))
    drop-shadow(0 26px 54px rgba(0, 8, 18, .48));
  animation:
    oArrive 1000ms 260ms cubic-bezier(.19, 1, .22, 1) forwards,
    oPlayfulDrift 7600ms 5200ms ease-in-out infinite;
}

.bridge-word,
.x-mark {
  color: white;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(4.1rem, 9.2vw, 9.1rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-shadow:
    0 0 12px rgba(255, 255, 255, .9),
    0 0 34px rgba(255, 255, 255, .68),
    0 18px 42px rgba(0, 8, 18, .54);
}

.bridge-word {
  position: absolute;
  top: 50%;
  left: calc(var(--o-size) - var(--bridge-glow-pad, 0px));
  z-index: 1;
  display: block;
  width: var(--bridge-final-width);
  max-width: var(--bridge-final-width);
  overflow: visible;
  padding: .16em .18em .2em var(--bridge-glow-pad, 0px);
  margin: -.16em 0 -.2em;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  transform: translateY(calc(-50% + .075em));
  animation: bridgeReveal 1900ms 2300ms cubic-bezier(.2, .8, .18, 1) forwards;
}

.bridge-word.is-complete {
  clip-path: none;
  overflow: visible;
}

.bridge-word.is-complete::after {
  visibility: hidden;
  opacity: 0;
  animation: none;
}

.bridge-word::after {
  content: none;
}

.x-mark {
  position: absolute;
  top: var(--x-top, 50%);
  left: var(--x-left);
  z-index: 3;
  display: block;
  width: max-content;
  padding: 0;
  margin: 0;
  opacity: var(--x-opacity, 0);
  transform: scale(var(--x-scale, 0));
  transform-origin: 50% 55%;
  text-shadow:
    0 0 calc(10px * var(--x-glow, 0)) rgba(255, 255, 255, .68),
    0 0 calc(34px * var(--x-glow, 0)) rgba(255, 255, 255, .52),
    0 0 calc(72px * var(--x-glow, 0)) rgba(255, 255, 255, .22),
    0 22px 44px rgba(0, 8, 18, .56);
  filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  will-change: opacity, transform, text-shadow, filter;
}

.x-mark.is-grown {
  animation:
    xLandGlow 1650ms cubic-bezier(.16, 1, .3, 1),
    xPulse 3200ms 1650ms ease-in-out infinite;
}

.mission-statement {
  position: relative;
  z-index: 4;
  margin: 0 0 14px;
  color: #ffffff;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(2rem, 4.4vw, 4.6rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: 0;
  text-transform: none;
  text-shadow:
    0 0 8px rgba(255, 255, 255, .94),
    0 0 26px rgba(255, 255, 255, .76),
    0 0 54px rgba(255, 255, 255, .38),
    0 10px 34px rgba(0, 8, 18, .58);
  opacity: 0;
  transform: translateY(clamp(-34px, -3.6vw, -18px)) perspective(920px) rotateX(3deg);
  animation:
    missionEnter 720ms 5450ms ease forwards,
    missionGlow 2800ms 6150ms ease-in-out infinite;
}

.mission-group {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  align-content: center;
  width: min(1060px, calc(100vw - 48px));
  min-height: clamp(410px, 52vh, 590px);
  justify-self: center;
  margin-top: clamp(24px, 4vh, 56px);
  padding: clamp(46px, 5.6vw, 76px) clamp(44px, 5.8vw, 84px) clamp(84px, 9.5vw, 132px);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  filter:
    drop-shadow(0 28px 54px rgba(0, 8, 18, .54))
    drop-shadow(0 0 34px rgba(0, 33, 71, .24));
  opacity: 0;
  transform: translateX(var(--mission-nudge-x));
  animation: copyEnter 720ms 5900ms ease forwards;
}

.mission-locked .mission-group {
  opacity: 1;
  transform: translateX(var(--mission-nudge-x));
  animation: none;
}

.mission-locked .mission-statement {
  opacity: 1;
  transform: translateY(clamp(-34px, -3.6vw, -18px)) perspective(920px) rotateX(3deg);
  animation: missionGlow 2800ms ease-in-out infinite;
}

.intractable-cloud {
  --cloud-left: -32px;
  --cloud-top: -72px;
  --cloud-width-extra: 64px;
  --cloud-height-extra: 214px;
  position: absolute;
  top: var(--cloud-top);
  left: var(--cloud-left);
  z-index: 3;
  display: block;
  width: calc(100% + var(--cloud-width-extra));
  height: calc(100% + var(--cloud-height-extra));
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: normal;
  transition: opacity 1400ms ease;
}

.intractable-cloud.is-ready {
  opacity: .98;
}

.mission-group::before {
  content: "";
  display: none;
}

.mission-group::after {
  content: "";
  display: none;
}

.eyebrow {
  position: relative;
  z-index: 4;
  margin: 16px 0 0;
  color: #ffffff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(.72rem, .86vw, .82rem);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow:
    0 0 8px rgba(255, 255, 255, .96),
    0 0 26px rgba(255, 255, 255, .76),
    0 0 58px rgba(255, 255, 255, .36),
    0 6px 20px rgba(0, 8, 18, .62);
  transform: translateY(clamp(-34px, -3.6vw, -18px));
}

.tagline {
  position: relative;
  z-index: 4;
  width: min(820px, calc(100vw - 112px));
  max-width: 100%;
  margin: 0 auto;
  color: #f7fbff;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: clamp(.9rem, 1.08vw, 1.08rem);
  font-weight: 500;
  line-height: 1.42;
  text-align: justify;
  text-align-last: center;
  text-wrap: pretty;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, .96),
    0 0 16px rgba(0, 0, 0, .84),
    0 0 34px rgba(0, 8, 18, .72);
  transform: translateY(clamp(-34px, -3.6vw, -18px)) perspective(920px) rotateX(3deg);
}

.tagline strong {
  color: white;
  font-weight: 800;
}

.contact-link {
  position: fixed;
  right: clamp(18px, 3vw, 42px);
  bottom: clamp(14px, 2.6vh, 30px);
  z-index: 4;
  color: rgba(255, 250, 240, .82);
  font-size: .84rem;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

.contact-link:hover,
.contact-link:focus-visible {
  color: var(--cream);
}

.contact-page {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  overflow: auto;
  color: var(--cream);
  background: var(--oxford) !important;
  background-color: var(--oxford) !important;
}

.contact-logo-link {
  position: fixed;
  top: clamp(18px, 2.4vw, 30px);
  left: clamp(18px, 2.4vw, 30px);
  z-index: 3;
  display: block;
  width: clamp(88px, 9vw, 132px);
}

.contact-logo {
  display: block;
  width: 100%;
  height: auto;
  filter: none;
}

.contact-back {
  position: fixed;
  top: clamp(20px, 3vw, 38px);
  right: clamp(18px, 3.4vw, 42px);
  z-index: 4;
  color: rgba(255, 250, 240, .86);
  font-size: .88rem;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

.contact-back:hover,
.contact-back:focus-visible {
  color: var(--cream);
}

.contact-shell {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 24px;
  width: min(720px, calc(100vw - 36px));
  padding: clamp(116px, 12vw, 176px) clamp(28px, 5vw, 54px) clamp(28px, 5vw, 54px);
}

.contact-title {
  margin: 0;
  color: var(--cream);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(2.4rem, 7vw, 5.4rem);
  font-weight: 700;
  line-height: .92;
  letter-spacing: 0;
}

.contact-form {
  display: grid;
  gap: 14px;
}

.spam-field {
  position: absolute;
  left: -100vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form label {
  display: grid;
  gap: 7px;
  color: #c9d8e2;
  font-size: .82rem;
  font-weight: 750;
  text-transform: uppercase;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid #8fa6b4;
  border-radius: 0;
  color: #f7fbff;
  background: var(--field-bg) !important;
  background-color: var(--field-bg) !important;
  caret-color: var(--cream);
  color-scheme: dark;
  font: inherit;
  appearance: none;
}

.contact-form input {
  min-height: 44px;
  padding: 10px 12px;
}

.contact-form textarea {
  min-height: 210px;
  padding: 12px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form input:active,
.contact-form input:hover,
.contact-form textarea:hover,
.contact-form textarea:focus {
  border-color: #c9d8e2;
  background: var(--field-bg) !important;
  background-color: var(--field-bg) !important;
  outline: 2px solid rgba(201, 216, 226, .72);
  outline-offset: 2px;
}

.contact-form textarea:active {
  background: var(--field-bg) !important;
  background-color: var(--field-bg) !important;
}

.contact-form input:autofill,
.contact-form input:-webkit-autofill,
.contact-form input:-webkit-autofill:hover,
.contact-form input:-webkit-autofill:focus {
  border-color: #c9d8e2;
  background: var(--field-bg) !important;
  background-color: var(--field-bg) !important;
  -webkit-text-fill-color: #f7fbff;
  caret-color: var(--cream);
  box-shadow: 0 0 0 1000px var(--field-bg) inset;
  transition: background-color 9999s ease-in-out 0s;
}

.contact-form button {
  justify-self: start;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid #8fa6b4;
  border-radius: 0;
  color: #00142c;
  background: var(--cream);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.contact-form button:disabled {
  cursor: wait;
  opacity: .7;
}

.contact-status {
  min-height: 1.5em;
  margin: 0;
  color: #c9d8e2;
  font-size: .94rem;
}

@keyframes photoSettle {
  from {
    transform: scale(1.055);
    filter: saturate(1.14) contrast(1.06) brightness(.84);
  }
  to {
    transform: scale(1.035);
    filter: saturate(1.04) contrast(1.06) brightness(.72);
  }
}

@keyframes loadingCircleDraw {
  0% {
    stroke-dashoffset: 302;
    opacity: .65;
  }
  72% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: .38;
  }
}

@keyframes loadingXPulse {
  0%, 100% {
    transform: scale(.98);
    opacity: .86;
  }
  54% {
    transform: scale(1.04);
    opacity: 1;
  }
}

@keyframes oArrive {
  0% {
    opacity: 0;
    transform: translateY(-50%) scale(.72) rotate(-8deg);
  }
  64% {
    opacity: 1;
    transform: translateY(-50%) scale(1.05) rotate(2deg);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) scale(1) rotate(0deg);
  }
}

@keyframes oPlayfulDrift {
  0%, 62%, 100% {
    transform: translateY(-50%) scale(1) rotate(0deg);
  }
  70% {
    transform: translateY(-50%) scale(1.035) rotate(1.1deg);
  }
  78% {
    transform: translateY(-50%) scale(.985) rotate(-.7deg);
  }
  86% {
    transform: translateY(-50%) scale(1.012) rotate(.3deg);
  }
}

@keyframes bridgeReveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes cursorFlash {
  0%, 8% {
    opacity: 0;
  }
  18%, 82% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes xPulse {
  0%, 100% {
    text-shadow:
      0 0 14px rgba(255, 255, 255, .98),
      0 0 44px rgba(255, 255, 255, .76),
      0 0 82px rgba(255, 255, 255, .24),
      0 22px 44px rgba(0, 8, 18, .56);
  }
  28% {
    text-shadow:
      0 0 24px rgba(255, 255, 255, 1),
      0 0 78px rgba(255, 255, 255, .96),
      0 0 132px rgba(255, 255, 255, .42),
      0 22px 44px rgba(0, 8, 18, .56);
  }
}

@keyframes xLandGlow {
  0% {
    text-shadow:
      0 0 42px rgba(255, 255, 255, 1),
      0 0 132px rgba(255, 255, 255, 1),
      0 0 250px rgba(255, 255, 255, .68),
      0 0 390px rgba(255, 255, 255, .34),
      0 22px 44px rgba(0, 8, 18, .56);
    filter:
      drop-shadow(0 0 52px rgba(255, 255, 255, .92))
      drop-shadow(0 0 142px rgba(255, 255, 255, .5));
  }
  26% {
    text-shadow:
      0 0 36px rgba(255, 255, 255, 1),
      0 0 112px rgba(255, 255, 255, .96),
      0 0 220px rgba(255, 255, 255, .58),
      0 0 330px rgba(255, 255, 255, .24),
      0 22px 44px rgba(0, 8, 18, .56);
    filter:
      drop-shadow(0 0 42px rgba(255, 255, 255, .78))
      drop-shadow(0 0 106px rgba(255, 255, 255, .36));
  }
  100% {
    text-shadow:
      0 0 14px rgba(255, 255, 255, .98),
      0 0 44px rgba(255, 255, 255, .76),
      0 0 82px rgba(255, 255, 255, .24),
      0 22px 44px rgba(0, 8, 18, .56);
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }
}

@keyframes missionEnter {
  from {
    opacity: 0;
    transform: translateY(calc(clamp(-34px, -3.6vw, -18px) + 8px)) perspective(920px) rotateX(3deg);
  }
  to {
    opacity: 1;
    transform: translateY(clamp(-34px, -3.6vw, -18px)) perspective(920px) rotateX(3deg);
  }
}

@keyframes mobileMissionEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes missionGlow {
  0%, 100% {
    text-shadow:
      0 0 8px rgba(255, 255, 255, .9),
      0 0 26px rgba(255, 255, 255, .7),
      0 0 54px rgba(255, 255, 255, .34),
      0 10px 34px rgba(0, 8, 18, .58);
  }
  45% {
    text-shadow:
      0 0 12px rgba(255, 255, 255, 1),
      0 0 38px rgba(255, 255, 255, .92),
      0 0 76px rgba(255, 255, 255, .56),
      0 10px 34px rgba(0, 8, 18, .58);
  }
}

@keyframes copyEnter {
  from {
    opacity: 0;
    transform: translateX(var(--mission-nudge-x)) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(var(--mission-nudge-x)) translateY(0);
  }
}

@keyframes cloudReveal {
  from {
    opacity: 0;
  }
  to {
    opacity: .84;
  }
}

@media (max-width: 760px) {
  :root {
    --o-size: clamp(82px, 22vw, 124px);
    --x-size: clamp(39px, 10.5vw, 60px);
    --bridge-width: clamp(150px, 40vw, 228px);
    --bridge-final-width: var(--bridge-width);
    --x-final-width: var(--x-size);
    --wordmark-nudge: 0px;
    --mission-nudge-x: 0px;
    --x-left: calc((var(--o-size) - var(--x-size)) / 2);
  }

  .brand-stage {
    padding: clamp(26px, 5.4vh, 42px) 12px 0;
  }

  .home-logo-link {
    top: 12px;
    left: 12px;
    width: clamp(38px, 11vw, 52px);
  }

  .wordmark {
    max-width: calc(100vw - 20px);
    min-height: calc(var(--o-size) * 1.18);
  }

  .bridge-word,
  .x-mark {
    font-size: clamp(2.55rem, 12.4vw, 4rem);
  }

  .mission-group {
    width: min(100vw - 24px, 640px);
    min-height: auto;
    margin-top: clamp(18px, 3.2vh, 34px);
    padding: clamp(28px, 5vw, 42px) clamp(20px, 5vw, 34px) clamp(30px, 6vw, 42px);
    overflow: hidden;
    border: 1px solid rgba(161, 184, 198, .72);
    border-radius: 14px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 38%),
      linear-gradient(135deg, rgba(0, 12, 28, .92) 0%, rgba(0, 33, 71, .78) 48%, rgba(0, 16, 36, .92) 100%);
    box-shadow:
      0 24px 70px rgba(0, 8, 18, .42),
      0 6px 18px rgba(0, 8, 18, .22),
      inset 0 1px 0 rgba(255, 255, 255, .18),
      inset 0 -1px 0 rgba(0, 8, 18, .64);
    filter: none;
  }

  .intractable-cloud {
    display: none;
  }

  .mission-group::before {
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    display: block;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, rgba(202, 216, 226, 0), rgba(202, 216, 226, .88), rgba(202, 216, 226, 0));
  }

  .mission-group::after {
    position: absolute;
    inset: 1px;
    display: block;
    content: "";
    border-radius: 13px;
    pointer-events: none;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .055),
      inset 0 28px 62px rgba(255, 255, 255, .045);
  }

  .mission-statement {
    margin-bottom: 10px;
    font-size: clamp(1.72rem, 8.2vw, 2.7rem);
    transform: none;
    animation:
      mobileMissionEnter 720ms 5450ms ease forwards,
      missionGlow 2800ms 6150ms ease-in-out infinite;
  }

  .mission-locked .mission-statement {
    transform: none;
    animation: missionGlow 2800ms ease-in-out infinite;
  }

  .tagline {
    width: min(560px, calc(100vw - 64px));
    font-size: clamp(.76rem, 3vw, .92rem);
    line-height: 1.34;
    text-align: justify;
    text-align-last: center;
    transform: none;
  }

  .eyebrow {
    transform: none;
  }

  .contact-link {
    right: auto;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    font-size: .78rem;
  }

  .contact-logo-link {
    top: 18px;
    left: 18px;
    width: clamp(82px, 22vw, 112px);
  }

  .contact-back {
    top: 18px;
    right: 16px;
  }

  .contact-shell {
    width: min(100vw - 28px, 640px);
    padding-top: clamp(104px, 29vw, 142px);
  }
}

@media (max-width: 520px) {
  :root {
    --o-size: clamp(72px, 21vw, 96px);
    --x-size: clamp(34px, 9.6vw, 46px);
    --bridge-width: clamp(128px, 39vw, 176px);
    --bridge-final-width: var(--bridge-width);
    --x-final-width: var(--x-size);
    --wordmark-nudge: 0px;
    --x-left: calc((var(--o-size) - var(--x-size)) / 2);
  }

  .stage::before {
    background-position: 50% center;
  }

  .mission-group {
    padding: 24px 14px 28px;
  }

  .intractable-cloud {
    display: none;
  }

  .mission-statement {
    font-size: clamp(1.45rem, 8vw, 2.05rem);
  }

  .tagline {
    width: min(100%, calc(100vw - 48px));
    font-size: clamp(.68rem, 2.9vw, .8rem);
    line-height: 1.3;
    text-align: center;
    text-align-last: center;
  }

  .eyebrow {
    font-size: .7rem;
  }
}

@media (max-height: 650px) and (min-width: 761px) {
  :root {
    --o-size: clamp(96px, 21vh, 150px);
    --x-size: clamp(58px, 12vh, 88px);
    --bridge-width: clamp(188px, 47vh, 286px);
  }

  .eyebrow {
    font-size: .76rem;
  }

  .tagline {
    font-size: .95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .intractable-cloud {
    transition-duration: 900ms;
  }
}