.moments{background:#0b0b0b;border-top:1px solid var(--line);padding-bottom:110px;overflow:hidden}
.momentsHeading{display:grid;grid-template-columns:1.6fr .6fr;gap:7vw;align-items:end;padding-bottom:55px}
.momentsHeading h2{font-size:clamp(55px,8vw,112px);line-height:.84;letter-spacing:-.065em;margin:28px 0 0}
.momentsHeading h2 span{color:var(--cyan)}
.momentsHeading>p{color:#999;line-height:1.8;margin:0 0 8px}

/* Cards are paginated by visibility rather than translated by a measured pixel
   offset. This stays stable in Safari, at browser zoom, and after embeds load. */
.momentCarousel{position:relative;width:100%;padding:0 5vw}
.momentGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;width:100%;min-height:clamp(430px,38vw,720px)}
.momentCard{position:relative;min-width:0;aspect-ratio:4/5;background:#151515;border:1px solid #2d2d2d;overflow:hidden;animation:momentIn .42s cubic-bezier(.22,.8,.22,1) both}
.momentCard[hidden]{display:none!important}
.momentCard>a{position:absolute;inset:0;display:block;z-index:1;color:inherit;text-decoration:none}
.momentCard iframe{width:100%;height:100%;border:0;background:#fff;pointer-events:none;display:block}
.momentCard:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.72) 100%)}
.momentCard:after{content:"WATCH ON INSTAGRAM  ↗";position:absolute;z-index:4;right:14px;top:14px;background:var(--cyan);color:#00151a;padding:12px 14px;font:900 10px/1 monospace;letter-spacing:.12em;pointer-events:none;transition:transform .25s}
.momentCard:hover:after{transform:translateY(-3px)}
.momentTag{position:absolute;z-index:4;left:14px;bottom:14px;background:#050505;color:#fff;border:1px solid #ffffff30;padding:11px 13px;font:800 10px/1 monospace;letter-spacing:.15em;pointer-events:none}
.momentArrow{position:absolute;z-index:8;top:50%;width:54px;height:54px;border:1px solid #ffffff55;border-radius:50%;background:#050505f2;color:#fff;font-size:22px;cursor:pointer;transform:translateY(-50%);transition:.2s;display:grid;place-items:center}
.momentArrow:hover,.momentArrow:focus-visible{background:var(--cyan);color:#00151a;border-color:var(--cyan);outline:none}
.momentPrev{left:calc(5vw + 14px)}.momentNext{right:calc(5vw + 14px)}
.momentDots{display:flex;justify-content:center;gap:9px;padding-top:24px}
.momentDots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#555;cursor:pointer;transition:.25s}
.momentDots button.active{width:30px;border-radius:8px;background:var(--cyan)}
.momentsCta{text-align:center;padding-top:32px}.momentsCta .buttonPrimary{display:inline-block}
.nav .brand img,footer .brand img{width:auto;height:34px;object-fit:contain}

@media(max-width:1100px){
  .momentGrid{grid-template-columns:repeat(2,minmax(0,1fr));min-height:clamp(500px,58vw,760px)}
}
@media(max-width:850px){
  .moments{padding-bottom:75px}.momentsHeading{grid-template-columns:1fr;padding-bottom:40px}.momentsHeading>p{max-width:560px}
  .momentCarousel{padding:0 5vw}.momentGrid{grid-template-columns:1fr;min-height:0}.momentCard{width:100%;aspect-ratio:4/5}
  .momentPrev{left:calc(5vw + 10px)}.momentNext{right:calc(5vw + 10px)}
  .nav .brand img,footer .brand img{height:28px}
}
@media(max-width:520px){
  .momentArrow{width:44px;height:44px}.momentCard:after{font-size:9px;padding:10px}.momentsCta{padding-left:5vw;padding-right:5vw}.momentsCta .buttonPrimary{width:100%;line-height:1.5}
}
@keyframes momentIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.momentCard{animation:none}}