.hero-preview-label { display: block; font-size: 11px; margin-top: 7px; opacity: .8; }
.reels-section { padding-top: 100px; padding-bottom: 100px; }
.reels-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 42px; }
.reels-heading .eyebrow { margin-bottom: 20px; }
.reels-heading h2 { font-size: clamp(48px, 5vw, 72px); }
.reels-heading p:not(.eyebrow) { font-size: 17px; color: #485143; margin-top: 20px; }
.reels-heading .text-link { flex-shrink: 0; margin-bottom: 8px; }
.reels-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.reel-card { grid-column: span 2; aspect-ratio: 2 / 3; position: relative; overflow: hidden; border-radius: 18px; background: #565f4e; color: white; isolation: isolate; contain: paint; }
.reel-card:nth-child(4) { grid-column: 2 / span 2; }
.reel-card:nth-child(5) { grid-column: 4 / span 2; }
.reel-card > img, .reel-card video, .reel-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.reel-card > img { object-fit: cover; pointer-events: none; }
.reel-card video { object-fit: cover; opacity: 0; transition: none; pointer-events: none; }
.reel-card video.clip-ready { opacity: 1; }
.reel-shade { z-index: 1; background: linear-gradient(180deg, #18251c80 0%, transparent 28%, #15211930 43%, #152119d9 100%); pointer-events: none; }
.reel-badge { position: absolute; z-index: 2; top: 23px; left: 23px; font-size: 10px; letter-spacing: 1.2px; font-weight: 500; }
.reel-toggle { position: absolute; top: 17px; right: 17px; z-index: 3; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #ffffff77; border-radius: 50%; color: white; background: #1d302bcc; font: 19px var(--body); transition: background .2s; }
.reel-toggle:hover { background: #1d302b99; }
.reel-sound { position: absolute; top: 17px; right: 67px; z-index: 3; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #ffffff77; border-radius: 50%; color: white; background: #1d302bcc; }
.reel-sound svg { width: 20px; height: 20px; }
.reel-sound .sound-on, .reel-sound.is-audible .sound-off { display: none; }
.reel-sound.is-audible .sound-on { display: block; }
.reel-sound.is-audible { background: var(--cream); color: var(--ink); }
.reel-sound.no-audio { color: #e0e2d8; border-style: dashed; }
.reel-sound-status { position: absolute; top: 72px; left: 18px; right: 18px; z-index: 4; margin: 0; border-radius: 9px; padding: 12px 14px; color: white; background: #243227f5; font-size: 13px; line-height: 1.6; }
.reel-sound-status:empty { display: none; }
.reel-caption { position: absolute; left: 26px; right: 26px; bottom: 26px; z-index: 2; }
.reel-caption h3 { font: 500 clamp(26px, 2.5vw, 38px)/1.1 var(--display); letter-spacing: -.5px; }
.reel-caption p { font-size: 13px; margin-top: 14px; color: #f2f3eb; }
.reel-caption a { display: flex; justify-content: space-between; align-items: center; min-height: 46px; padding: 12px 0 0; margin-top: 20px; border-top: 1px solid #ffffff55; font-size: 14px; }
.reel-caption a span { font-size: 24px; }
.preview-loop { transform: none; animation: none; will-change: auto; }
.reel-card > img, .reel-shade, .reel-caption, .reel-badge { transform: none; animation: none; transition: none; }
.reel-card, .reel-card:hover, .reel-card video, .reel-card:hover video { transform: none; animation: none; }
.reels-preview-note { font-size: 12px; color: #5f6857; margin-top: 18px; }
@media (max-width: 1000px) { .reels-grid { gap: 16px; } .reel-badge { top: 18px; left: 17px; font-size: 8px; letter-spacing: .5px; } .reel-caption { left: 20px; right: 20px; bottom: 20px; } .reel-caption h3 { font-size: 29px; } .reel-caption p { font-size: 12px; } .reel-caption a { font-size: 12px; margin-top: 12px; } .reel-toggle { width: 36px; height: 36px; top: 12px; right: 12px; } }
@media (max-width: 760px) { .reels-section { padding-top: 70px; padding-bottom: 70px; } .reels-heading { display: block; margin-bottom: 30px; } .reels-heading h2 { font-size: 54px; } .reels-heading .text-link { margin-top: 24px; } .reels-grid { display: flex; gap: 17px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #879376 transparent; padding-bottom: 15px; } .reel-card { width: 77%; flex: 0 0 77%; scroll-snap-align: start; } .reel-card.reveal { opacity: 1; transform: none; } .reel-caption h3 { font-size: 34px; } .reel-caption p, .reel-caption a { font-size: 14px; } .reel-caption { left: 24px; right: 24px; bottom: 24px; } .reel-badge { top: 24px; left: 24px; font-size: 9px; } .reel-toggle { top: 16px; right: 16px; width: 42px; height: 42px; } .reels-preview-note { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .reel-card video { transition: none; } .preview-loop { animation: none; transform: none; will-change: auto; } }
@media (max-width: 1000px) and (min-width: 761px) { .reel-sound { width: 36px; height: 36px; top: 12px; right: 56px; } .reel-sound-status { top: 60px; } .reel-badge { max-width: calc(100% - 110px); line-height: 1.4; } }
@media (max-width: 760px) { .reel-sound { top: 16px; right: 66px; } .reel-badge { max-width: calc(100% - 130px); line-height: 1.4; } }