:root {
  --content-width: 1200px;
  --content-gutter: max(5vw, calc((100vw - var(--content-width)) / 2));
}

body {
  overflow-x: hidden;
}

main {
  overflow: hidden;
}

/* Keep the colour fields full-bleed, while placing the reading and interaction
   content on a single, deliberately narrow executive-profile rail. */
.nav {
  background-color: transparent;
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
  transition:
    background-color 220ms ease,
    box-shadow 220ms ease,
    backdrop-filter 220ms ease;
}

.nav.is-scrolled {
  background-color: rgba(6, 49, 71, 0.94);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(145, 225, 215, 0.24), 0 10px 28px rgba(0, 0, 0, 0.16);
  position: fixed;
}

.hero {
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
}

.section,
.section-dark {
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
}

.section-dark {
  overflow: hidden;
}

footer {
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
}

.scroll {
  left: var(--content-gutter);
}

@media (prefers-reduced-motion: no-preference) {
  .orb-violet,
  .orb-green,
  .grid,
  .portrait > div {
    will-change: transform;
  }

  .orb-violet {
    transform: translate3d(
      var(--hero-violet-x-parallax, 0px),
      var(--hero-violet-y-parallax, 0px),
      0
    );
  }

  .orb-green {
    transform: translate3d(
      var(--hero-green-x-parallax, 0px),
      var(--hero-green-y-parallax, 0px),
      0
    );
  }

  .grid {
    transform: translate3d(0, var(--hero-grid-parallax, 0px), 0);
  }

  .portrait > div {
    transform: translate3d(
      var(--hero-portrait-shape-x-parallax, 0px),
      var(--hero-portrait-shape-y-parallax, 0px),
      0
    );
  }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
  .hero-copy {
    transform: translate3d(0, var(--hero-copy-parallax, 0px), 0);
  }

  .portrait {
    transform: translate3d(0, var(--hero-portrait-parallax, 0px), 0);
  }
}

@media (min-width: 1025px) {
  .hero-copy {
    max-width: 570px;
  }

  .portrait {
    right: var(--content-gutter);
    width: min(34vw, 415px);
  }
}

@media (min-width: 761px) and (max-width: 1024px) {
  .hero {
    min-height: 720px;
  }

  .hero-copy {
    max-width: 52%;
  }

  .hero-copy > p:not(.eyebrow) {
    font-size: 16px;
    max-width: 100%;
  }

  h1 {
    font-size: clamp(52px, 7vw, 72px);
  }

  .portrait {
    right: var(--content-gutter);
    width: min(37vw, 365px);
  }
}

@media (max-width: 1024px) {
  .portrait > div {
    display: none;
  }
}

@media (max-width: 760px) {
  :root {
    --content-gutter: 6vw;
  }

  .portrait {
    bottom: auto;
    height: 330px;
    margin: 42px -6vw 0 auto;
    position: relative;
    right: auto;
    width: min(84vw, 320px);
  }

  .hero {
    min-height: 0;
    padding-bottom: 0;
  }

  .hero-copy {
    max-width: 100%;
  }

  .scroll {
    display: none;
  }
}

@media (max-width: 480px) {
  .result-grid {
    grid-template-columns: 1fr;
  }

  .result-grid article {
    min-height: 0;
  }
}