.motion-item {
  --reveal-x: 0px;
  --reveal-y: 88px;
  --parallax-y: 0px;
  opacity: 0;
  transform: translate3d(var(--reveal-x), calc(var(--reveal-y) + var(--parallax-y)), 0);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform 1.15s cubic-bezier(.16,1,.3,1);
  will-change: transform, opacity;
}

.motion-item.from-left {
  --reveal-x: -105px;
  --reveal-y: 35px;
}

.motion-item.from-right {
  --reveal-x: 105px;
  --reveal-y: 35px;
}

.motion-item.is-visible {
  --reveal-x: 0px;
  --reveal-y: 0px;
  opacity: 1;
}

.parallax-layer {
  --scroll-shift: 0px;
  translate: 0 var(--scroll-shift);
  will-change: translate;
}

.cards .motion-item:nth-child(2),
.leaders .motion-item:nth-child(2),
.stats .motion-item:nth-child(2) { transition-delay: .09s; }

.cards .motion-item:nth-child(3),
.leaders .motion-item:nth-child(3),
.stats .motion-item:nth-child(3) { transition-delay: .18s; }

.cards .motion-item:nth-child(4),
.leaders .motion-item:nth-child(4) { transition-delay: .27s; }

@media (max-width: 680px) {
  .motion-item { --reveal-y: 64px; }
  .motion-item.from-left,
  .motion-item.from-right { --reveal-x: 0px; }
  .parallax-layer { translate: none; }

  .two-col > *,
  .market-body > *,
  .contact > * {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    translate: none !important;
    overflow-wrap: anywhere;
  }

  #about .two-col {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  #about .two-col > p {
    width: 100%;
    max-width: 100%;
    margin: 0 0 22px;
    padding: 0;
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    text-align: left;
  }

  .quote {
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
  }

  .quote > .eyebrow,
  .quote > h2 {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    text-align: center;
  }

  .quote > .eyebrow {
    font-size: 9px;
    letter-spacing: .12em;
    white-space: normal;
  }

  .quote > h2 {
    font-size: 34px;
    line-height: 1.08;
  }

  /* Keep the full regional-platform composition inside its mobile panel. */
  #locations {
    width: calc(100% - 44px);
    max-width: calc(100% - 44px);
    overflow: hidden;
  }

  #locations > *,
  #locations > * > *,
  #locations .location-list,
  #locations .location-trigger {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    transform: none !important;
    translate: none !important;
  }

  #locations > * {
    width: 100%;
    opacity: 1 !important;
  }

  #locations h2,
  #locations p,
  #locations .eyebrow,
  #locations .location-trigger {
    text-align: left;
  }

  #locations .location-list {
    width: 100%;
    align-items: stretch;
  }

  #locations .location-trigger {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  /* The contact copy and form are one aligned, viewport-safe mobile column. */
  #contact {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    overflow: hidden;
  }

  #contact > *,
  #contact > * > * {
    min-width: 0;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    transform: none !important;
    translate: none !important;
  }

  #contact > * {
    width: 100%;
    opacity: 1 !important;
  }

  #contact h2,
  #contact p,
  #contact .eyebrow,
  #contact .contact-lines,
  #contact form {
    width: 100%;
    text-align: left;
  }

  #contact form {
    box-sizing: border-box;
    overflow: hidden;
  }

  #contact input,
  #contact textarea,
  #contact label {
    min-width: 0;
    max-width: 100%;
  }

  #approach .heading h2 {
    width: 290px;
    max-width: 100%;
  }

  #contact h2 {
    width: 300px;
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-item,
  .motion-item.from-left,
  .motion-item.from-right,
  .motion-item.is-visible {
    --reveal-x: 0px;
    --reveal-y: 0px;
    --parallax-y: 0px;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .parallax-layer { translate: none; }
}

.faqs summary {
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  transition: background-color .22s ease;
}

.faqs summary:hover {
  background: rgba(23, 49, 58, .045);
}

@media (min-width: 681px) {
  .intro > .heading {
    max-width: 820px;
  }

  #approach .heading {
    translate: none !important;
    transform: none;
  }

  #approach .heading h2 {
    margin-bottom: 26px;
  }

  #approach .heading > p {
    margin: 0;
    position: relative;
    clear: both;
  }
}