:root {
  --home-river-ink: #123f70;
  --home-river-blue: #2d74c8;
  --home-river-cyan: #66b9cf;
  --home-river-paper: #f7fbfc;
  --home-river-line: rgba(44, 94, 137, .13);
  --home-river-ease: cubic-bezier(.22, 1, .36, 1);
}

body {
  background:
    radial-gradient(circle at 86% 18%, rgba(169, 224, 239, .18), transparent 28%),
    linear-gradient(180deg, #edf8fa 0, var(--home-river-paper) 16%, #f8fbfc 100%);
}

.nav--minimal,
.nav--minimal.is-scrolled {
  border-bottom-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.river-hero {
  min-height: 100svh;
  background-color: #e9f6f8 !important;
}

/* Shift only the water hue and saturation toward a clear lake blue. Color
   blending preserves the original water highlights instead of dimming them. */
.river-hero .hero-ink-river::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(48, 182, 227, 0) 0%,
    rgba(48, 182, 227, 0) 34%,
    rgba(48, 182, 227, .28) 54%,
    rgba(36, 166, 219, .62) 76%,
    rgba(27, 151, 208, .84) 100%
  );
  mix-blend-mode: color;
}

.river-hero::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: -1px;
  left: 0;
  height: clamp(130px, 22vh, 240px);
  background: linear-gradient(180deg, rgba(247, 251, 252, 0), rgba(247, 251, 252, .28) 34%, #f7fbfc 100%);
  pointer-events: none;
}

.river-hero__content {
  --hero-handoff-y: 0px;
  --hero-handoff-opacity: 1;
  z-index: 4 !important;
  translate: 0 var(--hero-handoff-y);
  opacity: var(--hero-handoff-opacity);
  will-change: transform, opacity;
}

.river-hero .scroll-cue {
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(27, 79, 121, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .38);
  backdrop-filter: blur(12px);
  transition: color .3s ease, background-color .3s ease, border-color .3s ease, transform .45s var(--home-river-ease);
}

.river-hero .scroll-cue:hover,
.river-hero .scroll-cue:focus-visible {
  color: #174f82;
  border-color: rgba(30, 100, 157, .28);
  background: rgba(255, 255, 255, .72);
  transform: translateY(-3px);
}

.thought-river-guide {
  background: rgba(248, 252, 252, .84) !important;
  box-shadow: 0 12px 34px rgba(52, 92, 126, .035);
  backdrop-filter: blur(18px) saturate(1.08);
}

/* Five remaining chapters share the full guide width after the life archive
   is removed, so the last destination still lands at the river's end. */
.thought-river-guide a:nth-child(1) { left: 7%; }
.thought-river-guide a:nth-child(2) { left: 28.5%; }
.thought-river-guide a:nth-child(3) { left: 50%; }
.thought-river-guide a:nth-child(4) { left: 71.5%; }
.thought-river-guide a:nth-child(5) { left: 93%; }

main > section:not(.hero) {
  position: relative;
  isolation: isolate;
  background-color: var(--home-river-paper);
}

#faces,
#work,
#thinking,
#future,
#life {
  background:
    radial-gradient(circle at 92% 8%, rgba(158, 220, 235, .14), transparent 25%),
    radial-gradient(circle at 8% 92%, rgba(197, 215, 235, .12), transparent 28%),
    linear-gradient(180deg, rgba(247, 251, 252, .98), rgba(250, 252, 252, .98)) !important;
}

/* Keep the future chapter heading inside the same atmosphere as its scenes. */
html body main > section#future.future-lab {
  background:
    radial-gradient(circle at 16% 28%, rgba(255, 255, 255, .64), transparent 34%),
    radial-gradient(circle at 86% 70%, rgba(173, 224, 239, .25), transparent 36%),
    #edf7fa !important;
}

#future > .future-heading {
  background: transparent !important;
}

#faces::before,
#work::before,
#thinking::before,
#future::before,
#life::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  height: min(42vw, 520px);
  opacity: .34;
  background:
    repeating-radial-gradient(ellipse at 72% -12%, transparent 0 84px, rgba(49, 100, 141, .045) 85px 86px, transparent 87px 112px);
  pointer-events: none;
}

#faces {
  margin-top: -2px;
  padding-top: clamp(110px, 13vw, 170px) !important;
}

.chapter-heading {
  position: relative;
}

.chapter-heading::after {
  content: "";
  display: block;
  width: 58px;
  height: 1px;
  margin-top: 24px;
  background: linear-gradient(90deg, var(--home-river-blue), rgba(45, 116, 200, 0));
  transform: scaleX(.55);
  transform-origin: left center;
  transition: transform .8s var(--home-river-ease), width .8s var(--home-river-ease);
}

main > section.is-section-active .chapter-heading::after {
  width: 112px;
  transform: scaleX(1);
}

.chapter-heading .section-label {
  color: #315f8c !important;
}

#work .work-card {
  --card-light-x: 50%;
  --card-light-y: 50%;
  transform-style: flat;
  will-change: auto;
}

#work .work-card::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  opacity: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--card-light-x) var(--card-light-y), rgba(255, 255, 255, .72), rgba(255, 255, 255, 0) 34%);
  mix-blend-mode: soft-light;
  pointer-events: none;
  transition: opacity .35s ease;
}

#work .work-card.is-interacting::after { opacity: .72; }
#work .work-card.is-interacting .work-card__media img { transform: scale(1.035) translateZ(16px); }
#work .work-card__copy,
#work .work-card__eyebrow { transform: none; }
#work .work-card__media img { transition: transform .65s var(--home-river-ease), filter .4s ease; }

#thinking .workflow-portals {
  perspective: 1100px;
}

#thinking .workflow-portals button {
  position: relative;
  overflow: hidden;
  transform-origin: center bottom;
  transition: opacity .32s ease, border-color .32s ease, box-shadow .45s ease, background-color .32s ease !important;
  will-change: transform;
}

#thinking .workflow-portals button::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: 18px;
  left: 22px;
  height: 2px;
  background: linear-gradient(90deg, var(--home-river-blue), var(--home-river-cyan));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s var(--home-river-ease);
}

#thinking .workflow-portals:has(button.is-interacting) button:not(.is-interacting) { opacity: .5; }
#thinking .workflow-portals button.is-interacting::after,
#thinking .workflow-portals button:focus-visible::after { transform: scaleX(1); }

.future-panel__media {
  will-change: transform;
  transform-style: preserve-3d;
}

.future-panel.is-active .future-panel__media img {
  filter: saturate(.9) brightness(1.04) drop-shadow(0 28px 38px rgba(60, 102, 137, .12));
}

.circular-gallery__item {
  transform-style: preserve-3d;
  will-change: transform;
}

.circular-gallery__item .circular-gallery__caption {
  transition: transform .55s var(--home-river-ease), background-color .3s ease;
}

.circular-gallery__item.is-interacting .circular-gallery__caption {
  transform: translate3d(0, -8px, 24px);
  background: rgba(248, 252, 252, .88);
}

@media (max-width: 820px) {
  .river-hero .hero-ink-river::before {
    background: linear-gradient(
      180deg,
      rgba(48, 182, 227, 0) 0%,
      rgba(48, 182, 227, .2) 46%,
      rgba(27, 151, 208, .76) 100%
    );
  }

  .river-hero::after { height: 150px; }
  .river-hero .scroll-cue { padding-inline: 14px; }
  #faces::before,
  #work::before,
  #thinking::before,
  #future::before,
  #life::before { opacity: .22; }
  .future-panel__media::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .river-hero__content,
  #work .work-card,
  #thinking .workflow-portals button,
  .future-panel__media,
  .circular-gallery__item { transform: none !important; }
  #work .work-card::after { display: none; }
}