:root {
  --brand-green: #7e886d;
  --brand-green-dark: #5d6650;
  --brand-green-light: #939d85;
  --brand-orange: #fdb783;
  --brand-orange-dark: #e5a06e;
  --brand-brown-dark: #3d3225;
  --brand-brown: #5c4d3d;
  --brand-brown-mid: #6b5a48;
  --brand-brown-light: #857c6e;
  --brand-cream: #fffcd6;
  --brand-cream-dark: #f5f0e0;
  --brand-sand: #d4c5a9;
  --brand-sand-light: #ddd4bc;
  --brand-bg: #fafaf7;
  --brand-red: #c0392b;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", Arial, sans-serif;
  --shadow-soft: 0 24px 80px rgba(61, 50, 37, 0.12);
  --shadow-line: rgba(61, 50, 37, 0.12);
  --content-width: 1180px;
  --hero-progress: 0;
  --hero-title-scale: 1;
  --hero-floating-scale: 3.4;
  --collab-progress: 0;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at top, rgba(214, 199, 171, 0.28), transparent 34%),
    linear-gradient(180deg, #f5f1e7 0%, #f0eadd 48%, #ebe3d3 100%);
  color: var(--brand-brown-dark);
  font-family: var(--font-serif);
}

/* Static paper grain — replaces the pulsing vignette */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.2 0 0 0 0 0.15 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.07;
  mix-blend-mode: multiply;
  z-index: 1;
  pointer-events: none;
}

/* Faint, still vignette — enough to frame, not enough to muddy */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse 90% 80% at center,
    transparent 55%,
    rgba(61, 50, 37, 0.14) 100%
  );
  z-index: 1;
  pointer-events: none;
}

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

.page-shell {
  position: relative;
  z-index: 2;
  overflow: clip;
}

.top-login {
  position: fixed;
  top: 1.35rem;
  right: 1.5rem;
  z-index: 20;
  padding: 0.45rem 0.8rem;
  color: rgba(255, 252, 214, 0.9);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid rgba(255, 252, 214, 0.22);
  border-radius: 999px;
  background: rgba(61, 50, 37, 0.16);
  backdrop-filter: blur(8px);
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.top-login:hover {
  color: var(--brand-cream);
  border-color: rgba(255, 252, 214, 0.38);
  background: rgba(61, 50, 37, 0.24);
}

/* Compass legend: fixed like a map legend, always pointing north.
   --compass-wobble is set by JS while scrolling; the springy
   transition swings the rose back to north when scrolling stops. */
.compass-legend {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 20;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  padding: 0.6rem;
  background: radial-gradient(circle at 32% 28%, rgba(255, 252, 214, 0.92), rgba(245, 240, 224, 0.78));
  border: 1px solid rgba(61, 50, 37, 0.16);
  border-radius: 50%;
  box-shadow: 0 10px 30px rgba(61, 50, 37, 0.16);
  pointer-events: none;
}

.compass-legend img {
  width: 100%;
  height: auto;
  transform: rotate(var(--compass-wobble, 0deg));
  transition: transform 900ms cubic-bezier(0.22, 1.5, 0.36, 1);
  filter: contrast(1.15) saturate(1.05) drop-shadow(0 2px 4px rgba(61, 50, 37, 0.2));
}

.section {
  width: min(calc(100% - 3rem), var(--content-width));
  margin: 0 auto;
}

.hero {
  position: relative;
  min-height: 100svh;
  padding: 3rem 0 5rem;
  display: grid;
  align-items: center;
}

.hero-scroll {
  height: 220vh;
}

.hero-scroll__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
}

.hero--immersive {
  min-height: 100svh;
}

@keyframes hero-entrance-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero__backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: clip;
  border-radius: 0 0 2rem 2rem;
  opacity: 0;
  animation: hero-entrance-fade 900ms ease-out 80ms forwards;
}

.hero__watercolor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1.24 - (var(--hero-progress) * 0.24)));
  transform-origin: center center;
  filter: saturate(0.72) sepia(0.08) contrast(0.82) brightness(1.2);
}

.hero__birds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: scale(calc(1.24 - (var(--hero-progress) * 0.24)));
  transform-origin: center center;
  opacity: 0;
  animation: hero-entrance-fade 800ms ease-out 700ms forwards;
}

.hero__bird {
  position: absolute;
  display: block;
  width: 18px;
  height: 8px;
  opacity: 0.7;
  --bird-scale: 0.4;
  animation: hero-bird-drift linear infinite;
}

.hero__bird::before,
.hero__bird::after {
  content: "";
  position: absolute;
  top: 2px;
  width: 10px;
  height: 1.5px;
  background: rgba(0, 0, 0, 0.95);
  border-radius: 999px;
}

.hero__bird::before {
  left: 0;
  transform: rotate(30deg);
  transform-origin: right center;
  animation: hero-bird-left-flap 1.6s ease-in-out infinite;
}

.hero__bird::after {
  right: 0;
  transform: rotate(-30deg);
  transform-origin: left center;
  animation: hero-bird-right-flap 1.6s ease-in-out infinite;
}

.hero__bird--1 { top: 24%; left: 18%; --bird-scale: 0.55; animation-duration: 22s; animation-delay: -4s; }
.hero__bird--2 { top: 28%; left: 24%; --bird-scale: 0.4; animation-duration: 18s; animation-delay: -9s; }
.hero__bird--3 { top: 22%; left: 66%; --bird-scale: 0.45; animation-duration: 24s; animation-delay: -6s; }
.hero__bird--4 { top: 26%; left: 72%; --bird-scale: 0.32; animation-duration: 20s; animation-delay: -11s; }
.hero__bird--5 { top: 34%; left: 58%; --bird-scale: 0.28; animation-duration: 26s; animation-delay: -3s; }
.hero__bird--6 { top: 31%; left: 14%; --bird-scale: 0.24; animation-duration: 19s; animation-delay: -13s; }
.hero__bird--7 { top: 20%; left: 30%; --bird-scale: 0.22; animation-duration: 21s; animation-delay: -7s; }
.hero__bird--8 { top: 18%; left: 78%; --bird-scale: 0.2; animation-duration: 23s; animation-delay: -15s; }
.hero__bird--9 { top: 36%; left: 68%; --bird-scale: 0.26; animation-duration: 25s; animation-delay: -5s; }
.hero__bird--10 { top: 29%; left: 40%; --bird-scale: 0.18; animation-duration: 17s; animation-delay: -10s; }

@keyframes hero-bird-drift {
  0% { transform: translate(0, 0) scale(var(--bird-scale)); }
  50% { transform: translate(10px, -4px) scale(var(--bird-scale)); }
  100% { transform: translate(22px, 0) scale(var(--bird-scale)); }
}

@keyframes hero-bird-left-flap {
  0%, 100% { transform: rotate(30deg); }
  50% { transform: rotate(2deg); }
}

@keyframes hero-bird-right-flap {
  0%, 100% { transform: rotate(-30deg); }
  50% { transform: rotate(-2deg); }
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 60rem;
  margin: 0 auto;
  padding: 10rem 0 8rem;
  text-align: center;
  opacity: clamp(0, calc((var(--hero-progress) - 0.34) * 2.2), 1);
  transform: translateY(calc(8rem - (var(--hero-progress) * 4rem)));
  text-shadow: 0 8px 22px rgba(61, 50, 37, 0.18);
}

.hero__content::before {
  content: "";
  position: absolute;
  inset: -2.5rem -3rem -2.25rem;
  z-index: -1;
  background:
    radial-gradient(ellipse at center, rgba(255, 252, 214, 0.7) 0%, rgba(245, 240, 224, 0.42) 46%, rgba(245, 240, 224, 0.08) 72%, transparent 100%);
  filter: blur(20px);
  pointer-events: none;
}

.hero__wordmark-layer,
.hero__logo-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hero__logo-layer {
  opacity: 0;
  animation: hero-entrance-fade 700ms ease-out 320ms forwards;
}

.hero__wordmark-layer {
  opacity: 0;
  animation: hero-entrance-fade 600ms ease-out 520ms forwards;
}

.hero__brand-wordmark {
  position: fixed;
  top: calc(38vh + ((6rem - 42.5vh) * var(--hero-progress)));
  left: calc(50% + ((21rem - 50%) * var(--hero-progress)));
  transform: translate(-50%, -50%);
  transform-origin: center center;
  white-space: nowrap;
}

/* A soft dark pocket behind the word while it sits inside the
   balcony window; fades out as the lockup separates on scroll. */
.hero__brand-wordmark::before {
  content: "";
  position: absolute;
  inset: -2.2rem -2.6rem;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(61, 50, 37, 0.34) 0%, rgba(61, 50, 37, 0.12) 55%, transparent 78%);
  filter: blur(14px);
  opacity: calc(1 - (var(--hero-progress) * 2.4));
}

.hero__brand-word {
  color: var(--brand-cream);
  /* Georgia, not Fraunces: matches the type inside the actual logo */
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.3rem, 5vw, 4.6rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  text-shadow:
    0 1px 2px rgba(61, 50, 37, 0.4),
    0 5px 16px rgba(61, 50, 37, 0.38),
    0 16px 44px rgba(61, 50, 37, 0.26);
}

.hero__brand-lockup {
  position: absolute;
  top: calc(50vh - 4.5rem);
  left: 50%;
  transform:
    translate(-50%, -50%)
    translateY(calc((1 - var(--hero-progress)) * -0.6rem))
    scale(var(--hero-floating-scale));
  transform-origin: center center;
}

.hero__brand-mark {
  width: clamp(4rem, 8vw, 6.5rem);
  height: auto;
  opacity: 0.92;
  filter: drop-shadow(0 28px 60px rgba(61, 50, 37, 0.22));
}

.eyebrow {
  margin-top: 6rem;
  margin-bottom: 1rem;
  color: var(--brand-green-dark);
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 {
  max-width: 17ch;
  margin-inline: auto;
  font-size: clamp(2.8rem, 6vw, 4.9rem);
}

h2 {
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
}

.lede,
.section__copy p:last-child {
  max-width: 40rem;
  margin: 1.5rem 0 0;
  color: var(--brand-brown);
  font-family: var(--font-sans);
  font-size: clamp(1.08rem, 1.7vw, 1.3rem);
  line-height: 1.75;
}

.lede {
  margin-inline: auto;
  max-width: 42rem;
  color: var(--brand-brown);
}

.narrative {
  padding: 10rem 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.section__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section__copy .eyebrow {
  margin-top: 0;
}

.narrative--diagnosis {
  padding-top: 12rem;
}

.narrative--collab {
  padding-top: 8rem;
  padding-bottom: 4rem;
}

.narrative--collab .section__visual {
  z-index: 4;
}

.narrative--reverse .section__copy {
  order: 2;
}

.narrative--reverse .section__visual {
  order: 1;
}

.section__visual {
  position: relative;
}

/* ---------- Diagnosis: drift on the map, watercolor SVG ---------- */

.diagnosis-board {
  position: relative;
  min-height: 34rem;
  overflow: hidden;
  border: 1px solid rgba(61, 50, 37, 0.12);
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(245, 240, 224, 0.86) 100%);
  box-shadow: var(--shadow-soft);
  --diagnosis-settle: var(--diagnosis-progress, 0);
}

.diagnosis-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Rising to the balcony: the map eases back as the section scrolls */
.dg-map {
  transform: scale(calc(1.12 - (var(--diagnosis-settle) * 0.12)));
  transform-origin: 300px 260px;
  transition: transform 120ms linear;
}

/* The drifting route recedes into history... */
.dg-drift {
  opacity: calc(0.95 - (var(--diagnosis-settle) * 0.55));
}

/* ...as the scored route inks in toward the pass.
   Dash length runs slightly past pathLength so the round cap of the
   next dash never peeks out at the path's end while hidden. */
.dg-route {
  stroke-dasharray: 100.6;
  stroke-dashoffset: calc(100.6 - (var(--diagnosis-settle) * 100.6));
}

/* Waypoints surface one at a time, each with its score */
.dg-wp--1 {
  opacity: clamp(0, calc((var(--diagnosis-settle) * 5) - 1.2), 1);
}

.dg-wp--2 {
  opacity: clamp(0, calc((var(--diagnosis-settle) * 5) - 2.4), 1);
}

.dg-wp--3 {
  opacity: clamp(0, calc((var(--diagnosis-settle) * 5) - 3.4), 1);
}

/* The pass lights up last: time to move */
.dg-pass {
  opacity: clamp(0, calc((var(--diagnosis-settle) * 6) - 4.8), 1);
}

.dg-pass-halo {
  animation: dg-pass-pulse 2.6s ease-in-out infinite;
  transform-origin: 436px 132px;
}

/* The timing window creeps in from the southwest */
.dg-shadow {
  transform: translate(calc(var(--diagnosis-settle) * 20px), calc(var(--diagnosis-settle) * -8px));
  transition: transform 120ms linear;
}

@keyframes dg-pass-pulse {
  0%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.45);
  }
}

/* ---------- Collab: converging paths, watercolor SVG ---------- */

.collab-scene {
  position: relative;
  min-height: 34rem;
  overflow: hidden;
  border: 1px solid rgba(61, 50, 37, 0.12);
  border-radius: 32px;
  background:
    radial-gradient(circle at 74% 46%, rgba(253, 183, 131, 0.1), transparent 40%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(245, 240, 224, 0.82) 100%);
  box-shadow: var(--shadow-soft);
}

.collab-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Paths draw in as the section scrolls into view */
.cb-path {
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--collab-progress));
}

.cb-flow {
  opacity: calc(var(--collab-progress) * 0.95);
}

.cb-label {
  fill: rgba(61, 50, 37, 0.85);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-anchor: middle;
  text-transform: uppercase;
}

.cb-glyph {
  fill: rgba(61, 50, 37, 0.9);
  font-family: var(--font-serif);
  font-size: 26px;
  font-style: italic;
  text-anchor: middle;
  dominant-baseline: central;
}

.cb-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: cb-halo-breathe 4.8s ease-in-out infinite;
}

@keyframes cb-halo-breathe {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.94);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.06);
  }
}

.cb-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: cb-pulse-ring 2.8s ease-out infinite;
}

@keyframes cb-pulse-ring {
  0% {
    opacity: 0.7;
    transform: scale(0.86);
  }
  70% {
    opacity: 0;
    transform: scale(1.28);
  }
  100% {
    opacity: 0;
    transform: scale(1.28);
  }
}

/* ---------- Promo video ---------- */

.page-video {
  padding: 2rem 0 0;
  text-align: center;
}

.page-video__text {
  max-width: 36rem;
  margin: 1.5rem auto 0;
  color: var(--brand-brown);
  font-family: var(--font-sans);
  font-size: 1.04rem;
  line-height: 1.75;
}

.page-video__frame {
  max-width: 880px;
  margin: 2.5rem auto 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(61, 50, 37, 0.12);
  border-radius: 32px;
  background: rgba(61, 50, 37, 0.08);
  box-shadow: var(--shadow-soft);
}

.page-video__player {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- CTA ---------- */

.page-cta {
  padding: 14rem 0 8rem;
  text-align: center;
}

.page-cta__text {
  max-width: 36rem;
  margin: 1.5rem auto 0;
  color: var(--brand-brown);
  font-family: var(--font-sans);
  font-size: 1.04rem;
  line-height: 1.75;
}

.page-cta__form {
  max-width: 42rem;
  margin: 2rem auto 0;
}

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

.page-cta__form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
}

.page-cta__input {
  width: 100%;
  min-height: 3.5rem;
  padding: 0.95rem 1.15rem;
  color: var(--brand-brown-dark);
  font-family: var(--font-sans);
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(61, 50, 37, 0.16);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.page-cta__input::placeholder {
  color: rgba(92, 77, 61, 0.55);
}

.page-cta__input:focus {
  outline: none;
  border-color: rgba(93, 102, 80, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 0 3px rgba(126, 136, 109, 0.14);
}

.page-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.6rem;
  color: var(--brand-brown-dark);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--brand-orange) 0%, var(--brand-orange-dark) 100%);
  border: 1px solid rgba(176, 116, 74, 0.5);
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(229, 160, 110, 0.35);
  cursor: pointer;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

.page-cta__button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.page-cta__button:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 16px 34px rgba(229, 160, 110, 0.45);
}

.page-cta__status {
  min-height: 1.5rem;
  margin: 0.85rem 0 0;
  color: rgba(92, 77, 61, 0.72);
  font-family: var(--font-sans);
  font-size: 0.92rem;
}

.page-cta__status[data-state="success"] {
  color: var(--brand-green-dark);
}

.page-cta__status[data-state="error"] {
  color: var(--brand-red);
}

.page-cta__iframe {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  border: 0;
}

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

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 2.25rem 0 2.5rem;
  border-top: 1px solid rgba(61, 50, 37, 0.14);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.site-footer__mark {
  width: 30px;
  height: auto;
  opacity: 0.85;
}

.site-footer__name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--brand-brown-dark);
}

.site-footer__note {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: rgba(92, 77, 61, 0.72);
}

/* ---------- Scroll reveal ---------- */

.js-enhanced .section__copy .eyebrow,
.js-enhanced .section__copy h2,
.js-enhanced .section__copy p {
  opacity: 0;
  transform: translateY(3rem);
  transition: opacity 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.js-enhanced .section__visual {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity 820ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 820ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 200ms;
}

.js-enhanced .narrative.is-revealed .section__copy .eyebrow {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms;
}

.js-enhanced .narrative.is-revealed .section__copy h2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 160ms;
}

.js-enhanced .narrative.is-revealed .section__copy p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 340ms;
}

.js-enhanced .narrative.is-revealed .section__visual {
  opacity: 1;
  transform: translateY(0);
}

.js-enhanced .page-video {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity 820ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 820ms cubic-bezier(0.16, 1, 0.3, 1);
}

.js-enhanced .page-video.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hero__backdrop,
  .hero__logo-layer,
  .hero__wordmark-layer,
  .hero__birds {
    opacity: 1;
    animation: none;
  }

  .compass-legend img {
    transition: none;
    transform: none;
  }

  .dg-pass-halo,
  .cb-halo,
  .cb-pulse {
    animation: none;
  }

  /* Show the map in its finished state: route drawn, waypoints scored */
  .diagnosis-board {
    --diagnosis-settle: 1;
  }

  .js-enhanced .section__copy .eyebrow,
  .js-enhanced .section__copy h2,
  .js-enhanced .section__copy p,
  .js-enhanced .section__visual,
  .js-enhanced .page-video {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 900px) {
  .section {
    width: min(calc(100% - 2rem), var(--content-width));
  }

  .top-login {
    top: 1rem;
    right: 1rem;
    padding: 0.4rem 0.7rem;
    font-size: 0.78rem;
  }

  .compass-legend {
    right: 1rem;
    bottom: 1rem;
    width: 60px;
    height: 60px;
    padding: 0.45rem;
  }

  .hero {
    min-height: auto;
    padding-top: 1.5rem;
  }

  .hero__content {
    max-width: 100%;
    padding: 6rem 0 4rem;
  }

  .hero__content::before {
    inset: -1.75rem -1rem -1.75rem;
  }

  .hero__brand-wordmark {
    top: calc(27vh + ((2.75rem - 27vh) * var(--hero-progress)));
    left: calc(50% + ((7rem - 50%) * var(--hero-progress)));
  }

  .hero__brand-lockup {
    top: calc(50vh - 7.75rem);
  }

  .hero__brand-mark {
    width: clamp(3.4rem, 7vw, 5.2rem);
  }

  .hero-scroll {
    height: 155vh;
  }

  .hero__backdrop {
    border-radius: 0 0 1.5rem 1.5rem;
  }

  .hero__brand-word {
    font-size: clamp(2.2rem, 8vw, 4.2rem);
  }

  .eyebrow {
    margin-top: 3rem;
  }

  .narrative,
  .narrative--reverse {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2.75rem 0;
  }

  .narrative--diagnosis {
    padding-top: 3.5rem;
  }

  .narrative--collab {
    padding-top: 3.25rem;
  }

  .section__copy {
    justify-content: flex-start;
  }

  .diagnosis-board,
  .collab-scene {
    min-height: 26rem;
  }

  .page-video {
    padding: 1.5rem 0 0;
  }

  .page-video__frame {
    border-radius: 20px;
  }

  .page-cta__form-row {
    grid-template-columns: 1fr;
  }

  .page-cta {
    padding: 7rem 0 7rem;
  }

  .page-cta__button {
    width: 100%;
  }

  .site-footer {
    flex-direction: column;
    text-align: center;
  }

  .narrative--reverse .section__copy,
  .narrative--reverse .section__visual {
    order: initial;
  }
}