/* ==========================================================================
   Mav Analytics
   A dark site: navy grounds, DC photographs under a navy wash, white
   uppercase headings, the horn's cyan for links and rules. Motion is
   small and slow: a zoom on the photographs, a slideshow in the home hero,
   a capabilities ticker, and sections that slide in as they are scrolled
   to. Everything renders fully with motion off.

   1. Tokens   2. Fonts    3. Base     4. Buttons  5. Header
   6. Hero     7. Ticker   8. Sections 9. Statement 10. Tiles
  11. Sectors 12. Stages  13. Rows    14. Facts   15. Closing band
  16. Footer  17. Motion  18. Reduced motion, forced colors
   ========================================================================== */

/* -------------------------------------------------------------- 1. Tokens */

:root {
  /* The palette is the logo's: navy #0A1F44 and the horn's cyan #00E5FF.
     Two grounds carry type, --band and --band-deep. On both: white 16:1,
     --muted 9:1, --cyan 10:1. --band-deep is pushed toward black so the
     logo's blues stand off it; --band keeps the logo's own navy. The filled button is white with navy type;
     the ghost button is a 55% white border. --blue is the brand blue from
     the logo, kept for the icon tile and the brand sheet; it is never a
     ground under text here because white on it is 5.8:1 and on navy it is
     2.8:1. tools/contrast.js audits every pair, including copy over the
     washed photographs. */
  --band: #0a1f44;
  --band-deep: #040c1f;
  --text: #ffffff;
  --muted: #b8c4db;
  --cyan: #00e5ff;
  --blue: #0052ff;
  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.55);
  --panel: rgba(255, 255, 255, 0.03);
  --panel-hover: rgba(255, 255, 255, 0.07);

  --font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --wrap: 76rem;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --radius: 4px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: dark;
}

/* --------------------------------------------------------------- 2. Fonts */

@font-face {
  font-family: "Public Sans";
  src: url("/fonts/public-sans-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------------- 3. Base */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--band-deep);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--text);
  line-height: 1.12;
}

/* Page and section headings are set in capitals; h3 and below are not. */
h1,
h2 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

h1 {
  font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4rem);
  line-height: 1.04;
}

h2 {
  font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.5rem);
}

h3 {
  font-weight: 600;
  font-size: 1.3125rem;
  letter-spacing: -0.01em;
}

h4 {
  font-weight: 600;
  font-size: 1.0625rem;
}

p,
ul,
ol,
dl,
figure {
  margin: 0;
}

svg,
img {
  max-width: 100%;
}

img {
  display: block;
  height: auto;
}

a {
  color: var(--cyan);
  text-underline-offset: 0.16em;
}

a:hover {
  color: var(--text);
}

:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

#main:focus {
  outline: none;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: #fff;
  color: var(--band);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The small cyan line above a heading. */
.eyebrow {
  color: var(--cyan);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.intro {
  max-width: 38rem;
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: 1.1875rem;
}

.prose {
  max-width: 42rem;
}

.prose p,
.prose li {
  color: var(--muted);
}

.prose p + p,
.prose ul + p,
.prose p + ul,
.prose h2 + p,
.prose h2 + ul {
  margin-top: 1em;
}

.prose h2 + p,
.prose h2 + ul {
  margin-top: 1.25rem;
}

.prose h3 {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.prose h3:first-child {
  margin-top: 0;
}

.prose ul {
  padding-left: 1.2rem;
}

.prose li + li {
  margin-top: 0.4rem;
}

/* -------------------------------------------------------------- 4. Buttons */

.btn {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  border: 2px solid #fff;
  background: #fff;
  color: var(--band);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: transform 250ms var(--ease), background-color 250ms ease, border-color 250ms ease;
}

.btn:hover {
  transform: translateY(-2px);
  background: var(--muted);
  border-color: var(--muted);
  color: var(--band);
}

.btn:focus-visible {
  outline-color: #fff;
  outline-offset: 4px;
}

/* On the white masthead only: the brand blue under white type (5.8:1). */
.btn--blue {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.btn--blue:hover {
  background: #0040cc;
  border-color: #0040cc;
  color: #fff;
}

.btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: #fff;
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #fff;
  color: #fff;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* A text link set like the eyebrow. */
.arrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.arrow:hover {
  text-decoration: underline;
}

.arrow::after {
  content: " \203A";
}

/* --------------------------------------------------------------- 5. Header */

/* A white bar above the dark page: the one ground the full-colour lockup
   was drawn for. On navy the bull's darker facets vanish into the page. */
.masthead {
  position: relative;
  z-index: 5;
  background: #fff;
  color: var(--band);
}

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 1.1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* The lockup PNG is 3x; the intrinsic width/height attributes reserve the
   box before it loads and the rule below scales it. */
.brand img {
  display: block;
  height: 2.75rem;
  width: auto;
}

.nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  color: var(--band);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.nav a:hover,
.nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-color: var(--blue);
}

.nav .btn,
.nav .btn:hover {
  text-decoration: none;
  padding: 0.55rem 1.2rem;
}

.masthead :focus-visible {
  outline-color: var(--band);
}

/* ----------------------------------------------------------------- 6. Hero */

/* A photograph fills the band; a navy wash runs from near-solid on the
   left, where the copy sits, to a light tint on the right so the blue of
   the photograph shows. The lede column ends by 52% of a wide viewport and
   the heading by 70%; the wash is 0.78 and 0.6 there (tools/contrast.js).
   Below 64rem the copy spans the width, so the wash is flat and heavy. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--band-deep);
  color: var(--text);
}

.hero__photo,
.hero__slides {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__photo img,
.hero__slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(4, 12, 31, 0.84) 0%, rgba(4, 12, 31, 0.8) 100%);
}

@media (min-width: 64rem) {
  .hero__wash {
    background: linear-gradient(90deg, rgba(4, 12, 31, 0.95) 0%, rgba(4, 12, 31, 0.78) 52%, rgba(4, 12, 31, 0.6) 70%, rgba(10, 31, 68, 0.25) 100%);
  }
}

.hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 32rem;
  padding-top: clamp(3.5rem, 8vw, 6rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}

.hero--home .hero__inner {
  min-height: min(46rem, 86vh);
}

.hero--sub .hero__inner {
  min-height: 26rem;
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

.hero__text {
  max-width: 54rem;
}

.hero__text h1 {
  margin-top: 1rem;
}

.hero__text .intro {
  max-width: 38rem;
}

.hero .email {
  margin-top: 1.5rem;
  font-size: 1.375rem;
  font-weight: 600;
}

/* Slideshow: three photographs on an eighteen-second loop. */
.hero__slides img {
  opacity: 0;
}

.hero__slides img:nth-child(1) {
  animation: fade 18s ease-in-out infinite, kb 18s ease-out infinite;
}

.hero__slides img:nth-child(2) {
  animation: fade 18s ease-in-out 6s infinite, kb 18s ease-out 6s infinite;
}

.hero__slides img:nth-child(3) {
  animation: fade 18s ease-in-out 12s infinite, kb 18s ease-out 12s infinite;
}

.hero__bars {
  display: flex;
  gap: 0.5rem;
  margin-top: 2rem;
}

.hero__bars i {
  position: relative;
  display: block;
  width: 2.5rem;
  height: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.25);
}

.hero__bars i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  animation: bar 18s linear infinite;
}

.hero__bars i:nth-child(2)::after {
  animation-delay: 6s;
}

.hero__bars i:nth-child(3)::after {
  animation-delay: 12s;
}

.hero__caps {
  position: absolute;
  right: var(--gutter);
  bottom: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The caption sits at the right edge, where the wash is lightest, so it
   carries its own ground. */
.hero__caps li {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0.35rem 0.6rem;
  background: rgba(4, 12, 31, 0.82);
  white-space: nowrap;
  opacity: 0;
  /* Own timing: a caption appears once its photograph is fully in and is
     gone before the next one starts, so two never show at once. */
  animation: capfade 18s ease-in-out infinite;
}

.hero__caps li:nth-child(2) {
  animation-delay: 6s;
}

.hero__caps li:nth-child(3) {
  animation-delay: 12s;
}

/* Single photograph: a slow zoom. */
.hero--sub .hero__photo img {
  animation: kb 22s ease-out both;
}

/* --------------------------------------------------------------- 7. Ticker */

.ticker {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--band-deep);
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: slide 36s linear infinite;
}

.ticker span {
  display: inline-block;
  padding: 1.3rem 2.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  white-space: nowrap;
}

.ticker span::after {
  content: "\00B7";
  margin-left: 2.5rem;
  color: var(--cyan);
}

/* ------------------------------------------------------------- 8. Sections */

.section {
  padding-block: clamp(4rem, 8vw, 7rem);
  background: var(--band-deep);
}

.section--tint {
  background: var(--band);
}

.section__head {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section__head .eyebrow {
  margin-bottom: 0.9rem;
}

.section__head p {
  margin-top: 0.9rem;
  color: var(--muted);
  font-size: 1.0625rem;
}

.section__head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  max-width: none;
}

.section__head--split > div {
  max-width: 44rem;
}

.two {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 56rem) {
  .two {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .two--text-wide {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }
}

.photo {
  border-radius: var(--radius);
  overflow: hidden;
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo--4x3 {
  aspect-ratio: 4 / 3;
}

/* Contact page: three plain columns. */
.cols {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cols h3 {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.cols p {
  color: var(--muted);
  font-size: 0.9375rem;
}

/* ------------------------------------------------------------ 9. Statement */

/* Copy at display size on the left, the mark whole on the right. */
.statement {
  background: var(--band-deep);
}

.statement__inner {
  display: grid;
  gap: 2.5rem clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
  padding-block: clamp(4rem, 9vw, 7.5rem);
}

@media (min-width: 56rem) {
  .statement__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

.statement__mark {
  width: min(100%, 30rem);
  justify-self: center;
}

@media (min-width: 56rem) {
  .statement__mark {
    justify-self: end;
  }
}

.statement__inner p {
  max-width: 36rem;
  margin-top: 1.25rem;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
  font-weight: 600;
  line-height: 1.3;
}

.statement__inner p + p {
  max-width: 38rem;
  font-size: 1.1875rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------------------------------------------------------------- 10. Tiles */

.tiles {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 40rem) {
  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 60rem) {
  .tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  height: 100%;
  padding: 1.6rem 1.6rem 1.75rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--cyan);
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  transition: background-color 300ms ease, transform 300ms var(--ease);
}

.tile:hover {
  background: var(--panel-hover);
  color: var(--text);
  transform: translateY(-3px);
}

.tile h3 {
  font-size: 1.25rem;
}

.tile p {
  color: var(--muted);
  font-size: 0.9375rem;
}

/* -------------------------------------------------------------- 11. Sectors */

.markets {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 40rem) {
  .markets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .markets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .markets > li:first-child {
    grid-column: span 2;
  }
}

.market {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius);
  min-height: 20rem;
  display: flex;
  align-items: flex-end;
  padding: 1.6rem;
  background: var(--band);
  color: #fff;
}

.market img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 900ms ease;
}

.market:hover img {
  transform: scale(1.06);
}

/* Takes the lower half to the band colour so the caption clears 4.5:1 on
   any crop. */
.market::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 31, 68, 0.1) 0%, rgba(10, 31, 68, 0.6) 50%, rgba(4, 12, 31, 0.96) 100%);
}

.market h2,
.market h3 {
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
}

.market p {
  font-size: 0.9375rem;
  color: var(--muted);
  max-width: 30rem;
}

.market .arrow {
  display: inline-block;
  margin-top: 0.8rem;
}

/* Home page: the cards ride a rail that slides continuously and pauses
   under the pointer. The list is doubled so the loop is seamless; the
   second copy is hidden from assistive technology. */
.rail {
  overflow: hidden;
}

.rail .markets {
  display: flex;
  width: max-content;
  gap: 1rem;
  padding-inline: var(--gutter);
  animation: rail 44s linear infinite;
}

.rail:hover .markets,
.rail:focus-within .markets {
  animation-play-state: paused;
}

.rail .market {
  width: clamp(18rem, 28vw, 24rem);
  flex: none;
}

/* --------------------------------------------------------------- 12. Stages */

.stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 60rem) {
  .stages {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.stages li {
  padding-top: 1.5rem;
  border-top: 2px solid var(--line);
}

.stages h3 {
  font-size: 1.3125rem;
}

.stages p {
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* The cyan line that draws across above the stages. */
.rule {
  position: relative;
  height: 2px;
  margin-bottom: -2px;
  background: transparent;
  overflow: hidden;
}

.rule::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1400ms ease 200ms;
}

.js .in .rule::after,
.js .rule.in::after {
  transform: scaleX(1);
}

/* ----------------------------------------------------------------- 13. Rows */

/* Heading on the left, content on the right, a rule between rows. */
.rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.row {
  display: grid;
  gap: 0.5rem 3rem;
  grid-template-columns: 1fr;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 48rem) {
  .row {
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  }
}

.row h3 {
  font-size: 1.3125rem;
}

.row__body p {
  color: var(--muted);
}

.row__body p + p,
.row__body p + ul {
  margin-top: 0.85em;
}

.row__body ul {
  padding-left: 1.2rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.row__body li + li {
  margin-top: 0.3rem;
}

/* Rows that are jump targets sit below a plain header; give them room. */
.row[id] {
  scroll-margin-top: 1.5rem;
}

/* ---------------------------------------------------------------- 14. Facts */

.facts {
  display: grid;
  gap: 1.25rem 2rem;
  grid-template-columns: 1fr;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

@media (min-width: 40rem) {
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.facts dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
}

.facts dd {
  margin: 0.25rem 0 0;
  font-weight: 600;
  color: var(--text);
}

.facts dd span {
  display: block;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--muted);
}

/* --------------------------------------------------------- 15. Closing band */

.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--band);
  color: var(--text);
}

.closing__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  animation: kb 22s ease-out both;
}

.closing__wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(4, 12, 31, 0.84) 0%, rgba(4, 12, 31, 0.8) 100%);
}

@media (min-width: 64rem) {
  .closing__wash {
    background: linear-gradient(90deg, rgba(4, 12, 31, 0.95) 0%, rgba(4, 12, 31, 0.78) 52%, rgba(4, 12, 31, 0.6) 70%, rgba(10, 31, 68, 0.25) 100%);
  }
}

.closing__inner {
  padding-block: clamp(4rem, 9vw, 7rem);
}

.closing__inner h2 {
  max-width: 40rem;
  margin-top: 1rem;
}

.closing__inner p:not(.eyebrow) {
  max-width: 36rem;
  margin-top: 1rem;
  color: var(--muted);
  font-size: 1.0625rem;
}

/* --------------------------------------------------------------- 16. Footer */

.footer {
  background: var(--band-deep);
  color: var(--text);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
  border-top: 1px solid var(--line);
}

.footer a {
  color: var(--muted);
  text-decoration: none;
}

.footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer__top {
  display: grid;
  gap: 2.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 52rem) {
  .footer__top {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

.footer__blurb {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--muted);
  max-width: 22rem;
}

.footer__col h2 {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--cyan);
  margin-bottom: 0.9rem;
}

.footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
}

.footer__col li + li {
  margin-top: 0.45rem;
}

.footer__legal {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
}

/* --------------------------------------------------------------- 17. Motion */

@keyframes kb {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes capfade {
  0% {
    opacity: 0;
  }
  9% {
    opacity: 0;
  }
  13% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes bar {
  0% {
    transform: scaleX(0);
  }
  33% {
    transform: scaleX(1);
  }
  33.01% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(0);
  }
}

@keyframes slide {
  to {
    transform: translateX(-50%);
  }
}

@keyframes rail {
  to {
    transform: translateX(calc(-50% - 0.5rem));
  }
}

@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Hero copy rises in on load, one line after another. */
.rise {
  opacity: 0;
  transform: translateY(28px);
  animation: rise 800ms var(--ease) forwards;
}

.rise:nth-child(1) { animation-delay: 100ms; }
.rise:nth-child(2) { animation-delay: 250ms; }
.rise:nth-child(3) { animation-delay: 400ms; }
.rise:nth-child(4) { animation-delay: 550ms; }
.rise:nth-child(5) { animation-delay: 700ms; }

/* Sections slide in as they are scrolled to. The hidden state applies only
   once motion.js has run and added .js to <html>, so without the script
   everything is simply visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 800ms ease, transform 800ms var(--ease);
}

.js .reveal--left {
  transform: translateX(-48px);
}

.js .reveal--right {
  transform: translateX(48px);
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

.js .reveal.s2 { transition-delay: 120ms; }
.js .reveal.s3 { transition-delay: 240ms; }
.js .reveal.s4 { transition-delay: 360ms; }
.js .reveal.s5 { transition-delay: 480ms; }
.js .reveal.s6 { transition-delay: 600ms; }

/* ------------------------------------ 18. Reduced motion, forced colors */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .rise,
  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .hero__slides img:nth-child(1),
  .hero__caps li:nth-child(1) {
    opacity: 1;
  }

  .hero__bars {
    display: none;
  }

  .ticker__track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
  }

  .ticker__track span:nth-child(n + 7) {
    display: none;
  }

  .rail {
    overflow-x: auto;
  }

  .rail .markets {
    animation: none;
  }

  .rail .markets > li[aria-hidden] {
    display: none;
  }

  .rule::after {
    transform: scaleX(1);
  }
}

@media (forced-colors: active) {
  .btn,
  .tile,
  .market,
  .photo,
  .facts {
    border: 1px solid CanvasText;
  }
}