/* Homepage video section: posters load first; MP4 is attached only on play. */
body[data-page="index"] .mogo-motion {
  background: #000 !important;
  color: #eee3d1;
  padding: 106px 0 118px !important;
}
body[data-page="index"] .mogo-motion .container { width: min(1220px, calc(100% - 72px)) !important; }
.mogo-motion__eyebrow { color: #b99052; }
.mogo-motion__title {
  margin: 13px 0 11px;
  color: #e9ded0;
  font: 400 clamp(34px, 3.4vw, 54px)/.98 "Libre Bodoni", "Bodoni Moda", serif;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.mogo-motion__intro {
  max-width: 520px;
  margin: 0 auto 45px;
  color: #a79b8d;
  font: 400 15px/1.55 Arial, Helvetica, sans-serif;
}
.mogo-motion__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.mogo-motion__card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(191, 146, 80, .58);
  background: linear-gradient(180deg, #080706 0%, #000 42%);
  padding: 0 22px 25px;
}
.mogo-motion__media {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #111;
  margin: 0 -22px;
  border-bottom: 1px solid rgba(191, 146, 80, .45);
}
.mogo-motion__poster, .mogo-motion__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mogo-motion__video { display: none; opacity: 0; transition: opacity .3s ease; }
.mogo-motion__card.is-playing .mogo-motion__video { display: block; opacity: 1; }
.mogo-motion__card.is-playing .mogo-motion__poster { opacity: 0; }
.mogo-motion__play {
  position: absolute; z-index: 2; inset: 0; border: 0; cursor: pointer;
  color: #f0dfc1; background: linear-gradient(180deg, rgba(0,0,0,.04) 40%, rgba(0,0,0,.42));
  display: grid; place-items: center;
}
.mogo-motion__play::before {
  content: ""; width: 62px; height: 62px; border: 1px solid rgba(240, 223, 193, .88);
  border-radius: 50%; background: rgba(0,0,0,.22); transition: transform .25s ease, background .25s ease;
}
.mogo-motion__play::after { content: "▶"; position: absolute; margin-left: 4px; font-size: 16px; }
.mogo-motion__play:hover::before, .mogo-motion__play:focus-visible::before { transform: scale(1.08); background: rgba(143, 101, 44, .22); }
.mogo-motion__card.is-playing .mogo-motion__play { opacity: 0; transition: opacity .2s ease; }
.mogo-motion__card.is-playing .mogo-motion__media:hover .mogo-motion__play,
.mogo-motion__card.is-playing .mogo-motion__play:focus-visible { opacity: 1; }
.mogo-motion__number { display: block; margin: 20px 0 11px; color: #b99052; font: 500 11px/1 Arial, sans-serif; letter-spacing: .25em; }
.mogo-motion__card h3 { margin: 0; color: #e9ded0; font: 400 28px/1 "Libre Bodoni", "Bodoni Moda", serif; letter-spacing: .035em; }
.mogo-motion__card p { margin: 12px 0 0; color: #a79b8d; font-size: 14px; line-height: 1.55; }
@media (max-width: 760px) {
  body[data-page="index"] .mogo-motion { padding: 68px 0 74px !important; }
  body[data-page="index"] .mogo-motion .container { width: calc(100% - 32px) !important; }
  .mogo-motion__intro { margin-bottom: 30px; font-size: 14px; }
  .mogo-motion__grid { display: grid; grid-template-columns: 1fr; overflow: visible; gap: 22px; padding-bottom: 0; }
  .mogo-motion__card { min-width: 0; width: 100%; scroll-snap-align: none; }
  .mogo-motion__card h3 { font-size: 25px; }
}