.choice-intro .why-motion {
  --why-white: #f4f7f5;
  --why-green: #29c58d;
  --why-duration: 3.2s;
  grid-column: 1 / -1;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-width: 0;
  height: clamp(270px, 27vw, 350px);
  margin-bottom: 56px;
  padding: 36px 28px;
  overflow: hidden;
  border-radius: 18px;
  background: #090e0c;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}

.why-motion *, .why-motion *::before, .why-motion *::after { box-sizing: border-box; }
.why-motion-ambient, .why-motion-flash {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.why-motion-ambient {
  width: 104%;
  height: 106%;
  background: radial-gradient(ellipse, rgba(41,197,141,.24), rgba(41,197,141,.09) 48%, transparent 78%);
  filter: blur(34px);
}
.why-motion-flash {
  width: 48%;
  height: 56%;
  background: radial-gradient(ellipse, rgba(41,197,141,.32), rgba(41,197,141,.08) 48%, transparent 76%);
  filter: blur(24px);
}
.why-motion-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  column-gap: .34em;
  width: 100%;
  color: var(--why-white);
  font-size: clamp(48px, 7.2vw, 96px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.012em;
  white-space: nowrap;
  -webkit-text-stroke: 0 currentColor;
  transform-origin: center;
  will-change: transform, color;
}
.why-motion-middle {
  position: relative;
  z-index: 2;
  isolation: isolate;
  display: inline-grid;
  place-items: baseline center;
  width: 1.72em;
  flex: 0 0 1.72em;
}
.why-motion-middle::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -.4em -.8em;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(41,197,141,.34), rgba(41,197,141,.08) 48%, transparent 76%);
  filter: blur(17px);
  opacity: 0;
  pointer-events: none;
}
.why-motion-or, .why-motion-and {
  grid-area: 1 / 1;
  display: inline-block;
  backface-visibility: hidden;
}
.why-motion-or { transform-origin: 50% 90%; }
.why-motion-and {
  position: relative;
  z-index: 3;
  color: var(--why-green);
  opacity: 0;
  transform: translate3d(-.05em,-1.7em,0) rotate(-8deg) scale(2.15);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.why-motion-mark {
  position: relative;
  display: inline-block;
  width: .55em;
  height: .94em;
  margin-left: -.015em;
  vertical-align: -.09em;
}
.why-motion-mark::after {
  content: "";
  position: absolute;
  inset: -.24em;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(41,197,141,.46), rgba(41,197,141,.1) 48%, transparent 73%);
  filter: blur(.12em);
  opacity: 0;
  pointer-events: none;
}
.why-motion-question, .why-motion-exclamation {
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
}
.why-motion-exclamation { color: #19ae77; opacity: 0; filter: drop-shadow(0 0 .16em rgba(41,197,141,.7)); }
.why-motion-mark i { position: absolute; display: block; font-style: normal; }
.why-motion-q-arc {
  top: .045em; left: .075em; width: .39em; height: .38em;
  border: .085em solid currentColor; border-left-color: transparent; border-bottom-color: transparent;
  border-radius: 50%; transform: rotate(25deg);
}
.why-motion-q-tail {
  top: .35em; left: .23em; width: .09em; height: .24em;
  border-radius: .05em; background: currentColor; transform: rotate(24deg);
}
.why-motion-q-dot, .why-motion-e-dot {
  top: .74em; left: .22em; width: .12em; height: .12em;
  border-radius: 50%; background: currentColor;
}
.why-motion-e-bar {
  top: .035em; left: .18em; width: .2em; height: .62em;
  background: currentColor; border-radius: .045em;
  clip-path: polygon(0 0,100% 0,76% 100%,24% 100%);
}

.why-motion.is-playing .why-motion-line { animation: why-impact var(--why-duration) linear both; }
.why-motion.is-playing .why-motion-or { animation: why-or var(--why-duration) linear both; }
.why-motion.is-playing .why-motion-and { animation: why-and var(--why-duration) linear both; }
.why-motion.is-playing .why-motion-question { animation: why-question var(--why-duration) linear both; }
.why-motion.is-playing .why-motion-exclamation { animation: why-exclamation var(--why-duration) linear both; }
.why-motion.is-playing .why-motion-mark::after { animation: why-mark-flash var(--why-duration) ease-out both; }
.why-motion.is-playing .why-motion-middle::after { animation: why-hit-glow var(--why-duration) ease-out both; }
.why-motion.is-playing .why-motion-flash { animation: why-flash var(--why-duration) linear both; }
.why-motion.is-playing .why-motion-ambient { animation: why-ambient var(--why-duration) ease-out both; }

@keyframes why-impact {
  0%, 47% { color: var(--why-white); -webkit-text-stroke-width: 0; transform: translate3d(0,0,0) scale(1); }
  51% { color: var(--why-white); -webkit-text-stroke-width: 0; transform: translate3d(0,.025em,0) scale(1.03,.97); }
  55% { color: var(--why-white); -webkit-text-stroke-width: .004em; transform: translate3d(-.01em,-.012em,0) scale(1.035,1.012); }
  64% { color: var(--why-green); -webkit-text-stroke-width: .014em; transform: translate3d(0,0,0) scale(1.115); }
  76%, 100% { color: var(--why-green); -webkit-text-stroke-width: .012em; transform: translate3d(0,0,0) scale(1.085); }
}
@keyframes why-or {
  0%, 47% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
  51% { opacity: .5; transform: translate3d(0,.08em,0) scale(1.05,.54); }
  56%, 100% { opacity: 0; transform: translate3d(0,.15em,0) scale(1.08,.12); }
}
@keyframes why-and {
  0%, 23% { opacity: 0; transform: translate3d(-.05em,-1.7em,0) rotate(-8deg) scale(2.15); filter: blur(5px); text-shadow: none; animation-timing-function: cubic-bezier(.25,.02,.72,.58); }
  34% { opacity: 1; filter: blur(2px); }
  51% { opacity: 1; transform: translate3d(0,.055em,0) rotate(0) scale(1.08,.82); filter: blur(0); text-shadow: 0 0 .18em rgba(41,197,141,.38); animation-timing-function: cubic-bezier(.16,.8,.27,1); }
  58% { transform: translate3d(0,-.025em,0) scale(.98,1.04); text-shadow: 0 0 .14em rgba(41,197,141,.25); }
  67% { transform: translate3d(0,0,0) scale(1); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); text-shadow: 0 0 .08em rgba(41,197,141,.16); }
}
@keyframes why-question { 0%, 50% { opacity: 1; transform: translate3d(0,0,0) scale(1); } 59%, 100% { opacity: 0; transform: translate3d(0,-.06em,0) scale(.72); } }
@keyframes why-exclamation { 0%, 50% { opacity: 0; transform: translate3d(0,.12em,0) scale(.65); } 58% { opacity: 1; transform: translate3d(0,-.025em,0) scale(1.27); } 68% { opacity: 1; transform: translate3d(0,0,0) scale(.98); } 100% { opacity: 1; transform: translate3d(0,0,0) scale(1.05); } }
@keyframes why-mark-flash { 0%, 48% { opacity: 0; transform: scale(.55); } 56% { opacity: .85; transform: scale(1.1); } 72%, 100% { opacity: 0; transform: scale(1.45); } }
@keyframes why-hit-glow { 0%, 46% { opacity: 0; transform: scale(.62); } 53% { opacity: .72; transform: scale(1); } 75%, 100% { opacity: .1; transform: scale(1.2); } }
@keyframes why-flash { 0%, 46% { opacity: 0; transform: scale(.7); } 53% { opacity: .48; transform: scale(1); } 68% { opacity: .13; transform: scale(1.22); } 88%, 100% { opacity: 0; transform: scale(1.36); } }
@keyframes why-ambient { 0%, 46% { opacity: 0; transform: scale(.72); } 62% { opacity: .72; transform: scale(1); } 100% { opacity: .35; transform: scale(1.16); } }

.agency-section .agency-conclusion { grid-column: 1 / -1; padding-top: 32px; border-top: 1px solid rgba(11,55,40,.27); }

@media (max-width: 700px) {
  .choice-intro .why-motion { height: 340px; margin-bottom: 42px; padding: 25px 16px; }
  .why-motion-line {
    display: grid;
    justify-items: center;
    row-gap: .17em;
    font-size: clamp(46px, 12.5vw, 62px);
    line-height: 1;
  }
  .why-motion-middle { height: 1em; }
}

@media (max-width: 350px) {
  .why-motion-line { font-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .why-motion *, .why-motion *::before, .why-motion *::after { animation: none !important; }
  .why-motion-line { color: var(--why-green); -webkit-text-stroke-width: .012em; transform: scale(1.085); }
  .why-motion-or, .why-motion-question { display: none; }
  .why-motion-and, .why-motion-exclamation { opacity: 1; transform: none; }
  .why-motion-ambient { opacity: .2; }
}