/* =====================================================================
   ELO18 — Refinamento visual V8
   Arquivo de overrides organizado por seção.
   Mantém a base original preservada e concentra os ajustes desta rodada.
   ===================================================================== */

/* ---------------------------------------------------------------------
   01. Sistema de luz e transições
   --------------------------------------------------------------------- */
.global-light--aqua {
  background: radial-gradient(ellipse at center,
    rgba(72,169,166,.48) 0%,
    rgba(72,169,166,.24) 30%,
    rgba(72,169,166,.07) 58%,
    transparent 76%);
  filter: blur(46px);
  opacity: .68;
}

.global-light--coral {
  background: radial-gradient(ellipse at center,
    rgba(216,92,50,.40) 0%,
    rgba(216,92,50,.20) 30%,
    rgba(216,92,50,.06) 58%,
    transparent 77%);
  filter: blur(48px);
  opacity: .58;
}

.global-light--beam {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(72,169,166,0) 10%,
    rgba(72,169,166,.12) 22%,
    rgba(141,212,207,.27) 36%,
    rgba(255,255,255,.16) 47%,
    rgba(216,92,50,.25) 59%,
    rgba(216,92,50,.08) 73%,
    transparent 89%);
  filter: blur(28px);
  opacity: .70;
}

.global-light--haze {
  background: radial-gradient(circle,
    rgba(255,255,255,.11) 0%,
    rgba(141,212,207,.07) 32%,
    rgba(72,169,166,.025) 58%,
    transparent 78%);
  opacity: .46;
}

.global-light--flare {
  background: radial-gradient(circle,
    rgba(255,255,255,.20) 0%,
    rgba(72,169,166,.11) 18%,
    rgba(72,169,166,.025) 46%,
    transparent 72%);
  opacity: .40;
}

.hero-problem-transition::before {
  opacity: .68;
  background:
    radial-gradient(ellipse at 24% 48%, rgba(72,169,166,.38) 0%, rgba(72,169,166,.13) 36%, transparent 64%),
    radial-gradient(ellipse at 74% 46%, rgba(216,92,50,.18) 0%, transparent 62%),
    linear-gradient(180deg, transparent 0%, rgba(3,15,25,.60) 48%, transparent 100%);
  filter: blur(28px) saturate(.95);
}

/* Luzes locais padronizadas nas bordas das seções. */
.problem,
.journeys,
.services,
.method,
.outcomes,
.projects,
.origin-content,
.diagnostic {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.problem::before,
.problem::after,
.journeys::before,
.journeys::after,
.services::before,
.services::after,
.method::before,
.method::after,
.outcomes::before,
.outcomes::after,
.projects::before,
.projects::after,
.origin-content::before,
.origin-content::after,
.diagnostic::before,
.diagnostic::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(38vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(62px);
  opacity: .34;
}

.problem::before,
.journeys::before,
.services::before,
.method::before,
.outcomes::before,
.projects::before,
.origin-content::before,
.diagnostic::before {
  left: -14vw;
  top: 9%;
  background: radial-gradient(circle, rgba(72,169,166,.19), transparent 70%);
}

.problem::after,
.journeys::after,
.services::after,
.method::after,
.outcomes::after,
.projects::after,
.origin-content::after,
.diagnostic::after {
  right: -14vw;
  bottom: 6%;
  background: radial-gradient(circle, rgba(216,92,50,.15), transparent 70%);
}

.problem-content,
.section-heading,
.journey-grid,
.service-stack,
.method-intro,
.method-layout,
.method .cycle-note,
.outcomes > .section-number,
.outcomes-head,
.outcome-grid,
.projects-header,
.project-film,
.project-controls,
.origin-content__inner,
.diagnostic-head,
.diagnostic-steps,
.diagnostic-bottom {
  position: relative;
  z-index: 2;
}

/* ---------------------------------------------------------------------
   02. Hero — tipografia e luz como protagonistas
   --------------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(circle at 18% 74%, rgba(72,169,166,.10), transparent 34%),
    radial-gradient(circle at 82% 22%, rgba(216,92,50,.08), transparent 30%),
    linear-gradient(180deg, #04101a 0%, #061421 100%);
  overflow: hidden;
}

.hero-media {
  display: none;
}

.hero::before {
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(3,15,25,.30) 0%, transparent 46%, rgba(3,15,25,.18) 100%),
    radial-gradient(circle at 52% 34%, rgba(72,169,166,.10), transparent 38%);
}

.hero-lights {
  z-index: 1;
  opacity: .86;
}

.hero-light--aqua {
  left: -15%;
  bottom: 0;
  background: radial-gradient(circle,
    rgba(72,169,166,.58) 0%,
    rgba(72,169,166,.28) 28%,
    rgba(72,169,166,.07) 55%,
    transparent 74%);
  filter: blur(84px);
  opacity: .56;
}

.hero-light--coral {
  top: -4%;
  right: -10%;
  background: radial-gradient(circle,
    rgba(216,92,50,.48) 0%,
    rgba(216,92,50,.22) 28%,
    rgba(216,92,50,.06) 55%,
    transparent 74%);
  filter: blur(80px);
  opacity: .52;
}

.hero-light--halo,
.hero-light--glow {
  opacity: .38;
  filter: blur(70px);
}

.hero-copy,
.hero-footer {
  z-index: 3;
}

.hero-copy {
  max-width: 1140px;
}

.hero-copy .eyebrow {
  transform: none;
  margin-bottom: clamp(1.8rem, 3.5vh, 2.8rem);
  color: rgba(141,212,207,.84);
}

.hero-lockup {
  width: min(100%, 980px);
  gap: clamp(.25rem, .75vh, .65rem);
}

.hero-phrase {
  gap: clamp(.75rem, 1.3vw, 1.25rem);
}

.hero-phrase small {
  font-size: clamp(1.15rem, 1.8vw, 1.8rem);
  line-height: 1.12;
  color: rgba(255,255,255,.80);
}

.hero-phrase--top strong {
  font-size: clamp(4.8rem, 8.4vw, 8.2rem);
}

.hero-phrase--middle {
  padding-left: clamp(4rem, 10vw, 10rem);
}

.hero-phrase--middle strong {
  font-size: clamp(5.8rem, 10.2vw, 10rem);
}

.hero-phrase--bottom small {
  max-width: 13rem;
  text-transform: none;
  letter-spacing: -.01em;
  line-height: 1.08;
}

.hero-phrase--bottom strong {
  font-size: clamp(4.9rem, 8.7vw, 8.6rem);
}

.hero-summary {
  max-width: 720px;
  margin-top: clamp(2rem, 4vh, 3rem);
  font-size: clamp(1rem, 1.15vw, 1.14rem);
  color: rgba(255,255,255,.72);
}

.hero-footer {
  padding-top: 1.35rem;
  border-top-color: rgba(255,255,255,.11);
}

/* ---------------------------------------------------------------------
   03. O problema — fundo sólido, sem fotografia
   --------------------------------------------------------------------- */
.problem {
  min-height: auto;
  padding: clamp(7rem, 11vh, 10rem) 0;  
  overflow: hidden;
}

.problem::before {
  inset: auto;
  left: -12vw;
  top: 12%;
  width: min(36vw, 520px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(72,169,166,.18), transparent 72%);
  background-image: radial-gradient(circle, rgba(72,169,166,.18), transparent 72%);
  background-attachment: scroll;
  background-size: auto;
  opacity: .38;
  transform: none;
  filter: blur(58px);
}

.problem::after {
  inset: auto;
  right: -11vw;
  bottom: 7%;
  width: min(34vw, 500px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(216,92,50,.13), transparent 72%);
  opacity: .34;
  filter: blur(58px);
}

.problem-content {
  min-height: 0;
  padding: 0;
}

.problem-section__header {
  margin-bottom: clamp(4rem, 7vh, 6rem);
}

.problem-section__main {
  align-items: start;
}

.problem-heading .display-title {
  font-size: clamp(4.8rem, 4.7vw, 6.8rem);
}

.problem-lead {
  font-size: clamp(1.08rem, 1.35vw, 1.3rem);
}

/* A faixa parallax deixa de repetir a imagem removida da seção. */
.parallax-image {
  min-height: 18vh;
  background:
    radial-gradient(ellipse at 22% 50%, rgba(72,169,166,.22), transparent 52%),
    radial-gradient(ellipse at 76% 46%, rgba(216,92,50,.14), transparent 56%),
    #04101a;
  background-image:
    radial-gradient(ellipse at 22% 50%, rgba(72,169,166,.22), transparent 52%),
    radial-gradient(ellipse at 76% 46%, rgba(216,92,50,.14), transparent 56%);
  background-attachment: scroll;
}

.parallax-image::before {
  background: linear-gradient(180deg, #06111b 0%, transparent 48%, rgba(4,11,18,.78) 100%);
}

/* ---------------------------------------------------------------------
   04. Para sua marca — imagens full bleed nas extremidades
   --------------------------------------------------------------------- */
.journeys {
  padding-bottom: clamp(0rem, 0vh, 0rem);
  background: rgba(4,11,18,.94);
}

.journeys .section-heading {
  margin-bottom: clamp(4rem, 8vh, 7rem);
}

.journey-grid {
  width: 100%;
  max-width: none;
  gap: clamp(3rem, 6vh, 5rem);
}

.journey-card,
.journey-card--reverse {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: clamp(34rem, 68vh, 46rem);
  padding-inline: max(4vw, calc((100vw - 1140px) / 2));
  border-top: 1px solid rgba(255,255,255,.11);
  overflow: hidden;
}

.journey-card {
  justify-content: flex-end;
}

.journey-card--reverse {
  justify-content: flex-start;
}

.journey-card figure,
.journey-card--reverse figure {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(53vw, 860px);
  height: 100%;
  min-height: 100%;
  margin: 0;
  aspect-ratio: auto;
}

.journey-card--reverse figure {
  left: auto;
  right: 0;
  order: initial;
}

.journey-card picture,
.journey-card img {
  width: 100%;
  height: 100%;
}

.journey-card img {
  object-fit: cover;
}

.journey-card figure::after,
.journey-card--reverse figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(4,11,18,.05) 0%,
    rgba(4,11,18,.30) 58%,
    rgba(4,11,18,.86) 100%);

}

.journey-card--reverse figure::after { 
}

.card-index {
  z-index: 3;
}

.journey-content {
  position: relative;
  z-index: 3;
  width: min(500px, 45vw);
  margin: 0;
  padding: clamp(2.7rem, 4.2vw, 4.2rem);  
}

.journey-content h3 {
  margin: .9rem 0 1.25rem;
  font-size: clamp(2.5rem, 3.7vw, 4.4rem);
  line-height: .94;
}

.journey-content p:not(.eyebrow) {
  margin-bottom: 1.8rem;
  color: rgba(255,255,255,.76);
}

/* ---------------------------------------------------------------------
   05. Como ajudamos — imagem de fundo e degradê branco
   --------------------------------------------------------------------- */
.services {
  padding-bottom: clamp(0rem, 0vh, 0rem);
  background: rgba(244,240,233,.98);
}

.services .section-heading {
  margin-bottom: clamp(4rem, 8vh, 7rem);
}

.service-stack {
  width: 100%;
  max-width: none;
  gap: clamp(2.25rem, 4.5vh, 3.75rem);
}

.service-panel,
.service-panel--reverse {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: clamp(34rem, 66vh, 46rem);
  padding-inline: max(4vw, calc((100vw - 1140px) / 2));
  border-top: 1px solid rgba(7,20,33,.10);
  overflow: hidden;
  isolation: isolate;
  background: #d8d3cb;
}

.service-panel {
  justify-content: flex-start;
}

.service-panel--reverse {
  justify-content: flex-end;
}

.service-panel figure,
.service-panel--reverse figure {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  aspect-ratio: auto;
}

.service-panel picture,
.service-panel img {
  width: 100%;
  height: 100%;
}

.service-panel img {
  object-fit: cover;
  transform: scale(1.01);
}

.service-panel::before,
.service-panel--reverse::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(244,240,233,.99) 0%,
    rgba(244,240,233,.98) 30%,
    rgba(244,240,233,.90) 47%,
    rgba(244,240,233,.48) 66%,
    rgba(244,240,233,.08) 84%,
    transparent 100%);
}

.service-panel--reverse::before {
  background: linear-gradient(270deg,
    rgba(244,240,233,.99) 0%,
    rgba(244,240,233,.98) 30%,
    rgba(244,240,233,.90) 47%,
    rgba(244,240,233,.48) 66%,
    rgba(244,240,233,.08) 84%,
    transparent 100%);
}

.service-copy,
.service-panel--reverse .service-copy {
  position: relative;
  z-index: 2;
  width: min(560px, 47vw);
  margin: 0;
  padding: clamp(2.8rem, 4.4vw, 4.6rem) 0;
}

.service-index {
  margin-bottom: 1.35rem;
  font-size: clamp(3rem, 5vw, 5.6rem);
}

.service-copy h3 {
  margin: .75rem 0 1.1rem;
  font-size: clamp(2.4rem, 3.55vw, 4.3rem);
  line-height: .95;
}

.service-copy > p:not(.eyebrow) {
  margin-bottom: 1.35rem;
  color: rgba(7,20,33,.78);
}

.service-copy ul {
  border-top-color: rgba(7,20,33,.14);
}

.service-copy li {
  border-bottom-color: rgba(7,20,33,.14);
}

/* ---------------------------------------------------------------------
   06. Metodologia — ciclo visual
   --------------------------------------------------------------------- */
.method {
  background: rgba(4,11,18,.94);
}

.method-title-column {
  justify-content: center;
}

.method-title {
  position: relative;
  width: clamp(21rem, 31vw, 29rem);
  height: clamp(21rem, 31vw, 29rem);
  margin: 0;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .62rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  text-align: center;
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,.04), rgba(255,255,255,.012) 56%, transparent 73%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 0 80px rgba(72,169,166,.07);
}

.method-title::before {
  content: "Ciclo";
  display: block;
  margin-bottom: .45rem;
  font-family: var(--font-sans);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .23em;
  text-transform: uppercase;
  color: rgba(255,255,255,.48);
}

.method-title::after {
  content: "↻";
  position: absolute;
  right: 8%;
  bottom: 9%;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid rgba(141,212,207,.38);
  background: #061421;
  color: var(--aqua-soft);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1;
}

.method-title span {
  display: block;
}

.method-title__attraction,
.method-title__confirmation,
.method-title__permanence {
  font-size: clamp(2.65rem, 4vw, 4.1rem);
  line-height: .88;
}

/* ---------------------------------------------------------------------
   07. Projetos — mais editorial e menos bloco rígido
   --------------------------------------------------------------------- */
.projects {
  padding-top: clamp(7rem, 12vh, 10rem);
  padding-bottom: clamp(6rem, 10vh, 8rem);
  background:
    radial-gradient(circle at 82% 18%, rgba(72,169,166,.10), transparent 32%),
    linear-gradient(180deg, #22394d 0%, #1d3346 100%);
}

.projects-header {
  margin-bottom: clamp(4rem, 8vh, 6.5rem);
}

.projects-header .display-title {
  max-width: 1050px;
  font-size: clamp(3.7rem, 6.4vw, 7rem);
}

.project-film {
  height: min(72vh, 760px);
  min-height: 620px;
  background: rgba(4,11,18,.18);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 26px 80px rgba(2,8,13,.20);
}

.project-frame {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
}

.project-copy {
  padding: clamp(3rem, 5vw, 5.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(180deg, rgba(7,20,33,.72), rgba(7,20,33,.42));
}

.project-copy h3 {
  margin: 1.5rem 0 2.7rem;
  font-size: clamp(4rem, 6.5vw, 7.2rem);
}

.project-copy dl div {
  grid-template-columns: 96px 1fr;
  padding: 14px 0;
}

.project-frame figure {
  position: relative;
}

.project-frame figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7,20,33,.16), transparent 28%);
  pointer-events: none;
}

.project-frame img {
  transform: scale(1.01);
}

.project-controls {
  margin-top: 1.7rem;
}

/* ---------------------------------------------------------------------
   08. Origem — frase em uma linha e narrativa mais compacta
   --------------------------------------------------------------------- */
.origin-story {
  min-height: 340vh;
  background:
    radial-gradient(circle at 78% 28%, rgba(72,169,166,.11), transparent 36%),
    radial-gradient(circle at 20% 74%, rgba(216,92,50,.09), transparent 38%),
    #030c14;
}

.origin-story__stage::before {
  background: radial-gradient(ellipse, rgba(72,169,166,.32), transparent 70%);
  opacity: .46;
}

.origin-story__stage::after {
  background: radial-gradient(ellipse, rgba(216,92,50,.24), transparent 72%);
  opacity: .42;
}

.origin-story__question {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .12em;
  width: min(calc(100vw - 80px), 1280px);
  max-width: none;
  white-space: nowrap;
  font-size: clamp(2.8rem, 5vw, 5.9rem);
  line-height: 1;
}

.origin-story__question strong {
  margin: 0;
  flex: 0 0 auto;
}

.origin-content {
  background: rgba(4,11,18,.94);
}

/* ---------------------------------------------------------------------
   09. Responsividade
   --------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .journey-card figure,
  .journey-card--reverse figure {
    width: min(56vw, 700px);
  }

  .journey-content {
    width: min(480px, 46vw);
  }

  .service-copy,
  .service-panel--reverse .service-copy {
    width: min(520px, 48vw);
  }

  .method-title {
    width: clamp(19rem, 35vw, 25rem);
    height: clamp(19rem, 35vw, 25rem);
  }
}

@media (max-width: 900px) {
  .problem::before,
  .problem::after,
  .journeys::before,
  .journeys::after,
  .services::before,
  .services::after,
  .method::before,
  .method::after,
  .outcomes::before,
  .outcomes::after,
  .projects::before,
  .projects::after,
  .origin-content::before,
  .origin-content::after,
  .diagnostic::before,
  .diagnostic::after {
    width: 46vw;
    filter: blur(48px);
    opacity: .27;
  }

  .hero-phrase--middle {
    padding-left: 6vw;
  }

  .hero-phrase small {
    font-size: clamp(1.05rem, 3.4vw, 1.5rem);
  }

  .journey-card,
  .journey-card--reverse,
  .service-panel,
  .service-panel--reverse {
    display: block;
    min-height: auto;
    padding-inline: var(--container-gutter, 20px);
  }

  .journey-card figure,
  .journey-card--reverse figure,
  .service-panel figure,
  .service-panel--reverse figure {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .journey-card figure::after,
  .journey-card--reverse figure::after {
    background: linear-gradient(180deg,
      rgba(4,11,18,.05) 0%,
      rgba(4,11,18,.30) 58%,
      rgba(4,11,18,.86) 100%);
  }

  .journey-content {
    width: 100%;
    margin: 0;
    padding: 2.2rem 0 4.5rem;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
  }

  .service-panel::before,
  .service-panel--reverse::before {
    background: linear-gradient(180deg,
      rgba(244,240,233,.08) 0%,
      rgba(244,240,233,.20) 26%,
      rgba(244,240,233,.86) 58%,
      rgba(244,240,233,.99) 100%);
  }

  .service-copy,
  .service-panel--reverse .service-copy {
    width: 100%;
    margin: 0;
    padding: 2.4rem 0 4.8rem;
  }

  .method-title-column {
    justify-content: center;
  }

  .method-title {
    width: min(100%, 22rem);
    height: min(calc(100vw - 4rem), 22rem);
    margin-inline: auto;
  }

  .project-film {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .project-frame {
    position: relative;
    inset: auto;
    display: none;
    grid-template-columns: 1fr;
    transform: none;
  }

  .project-frame.is-current {
    display: grid;
  }

  .project-copy {
    padding: 3rem 2rem;
  }

  .project-frame figure {
    min-height: 52vh;
  }

  .origin-story {
    min-height: 300vh;
  }

  .origin-story__question {
    flex-wrap: wrap;
    width: min(calc(100vw - 40px), 720px);
    white-space: normal;
    font-size: clamp(2.5rem, 9vw, 4.5rem);
    line-height: .98;
  }
}

@media (max-width: 560px) {
  .hero {
    padding-top: calc(var(--header-h) + 5vh);
  }

  .hero-copy .eyebrow {
    margin-bottom: 1.5rem;
  }

  .hero-lockup {
    gap: .35rem;
  }

  .hero-phrase {
    gap: .45rem;
  }

  .hero-phrase--middle {
    padding-left: 0;
  }

  .hero-phrase--top strong {
    font-size: clamp(3.7rem, 18vw, 5.2rem);
  }

  .hero-phrase--middle strong {
    font-size: clamp(4.35rem, 21vw, 6rem);
  }

  .hero-phrase--bottom {
    align-items: flex-end;
  }

  .hero-phrase--bottom small {
    max-width: 7rem;
    font-size: .82rem;
  }

  .hero-phrase--bottom strong {
    font-size: clamp(3.6rem, 17vw, 5rem);
  }

  .problem,
  .journeys,
  .services,
  .method,
  .projects {
    padding-top: 5.5rem;
  }

  .journey-card,
  .journey-card--reverse,
  .service-panel,
  .service-panel--reverse {
    padding-inline: 18px;
  }

  .journey-content h3,
  .service-copy h3 {
    font-size: clamp(2.2rem, 11.5vw, 3.25rem);
  }

  .method-title {
    width: min(calc(100vw - 44px), 20rem);
    height: min(calc(100vw - 44px), 20rem);
    padding: 2rem;
  }

  .method-title__attraction,
  .method-title__confirmation,
  .method-title__permanence {
    font-size: clamp(2.3rem, 12vw, 3.25rem);
  }

  .projects-header .display-title {
    font-size: clamp(3rem, 13vw, 4.5rem);
  }

  .project-copy {
    padding: 2.5rem 1.25rem;
  }

  .project-copy h3 {
    font-size: clamp(3.6rem, 17vw, 5.4rem);
  }

  .project-copy dl div {
    grid-template-columns: 1fr;
    gap: .35rem;
  }

  .origin-story__question {
    gap: .08em;
    font-size: clamp(2.2rem, 10.5vw, 3.6rem);
  }
}

/* Ajuste fino da pergunta da origem: preserva espaços ao usar flex. */
.origin-story__question {
  gap: 0;
}
.origin-story__question strong {
  margin-inline: .14em;
}

/* A narrativa continua legível quando o usuário reduz animações. */
@media (prefers-reduced-motion: reduce) {
  .origin-story {
    min-height: 100svh;
  }
  .origin-story__sticky {
    position: relative;
  }
  .origin-story__word,
  .origin-story__value,
  .origin-story__image {
    display: none;
  }
  .origin-story__question {
    opacity: 1 !important;
    transform: none !important;
  }
}