.vl-section { box-sizing: border-box; max-width: 1260px; margin: 0 auto; padding: clamp(36px, 5vw, 72px) clamp(20px, 4vw, 48px); color: #193a35; text-align: start; }
.vl-section *, .vl-section *::before, .vl-section *::after { box-sizing: border-box; }
.vl-heading { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 18px 32px; margin-bottom: 26px; }
.vl-eyebrow { margin: 0 0 8px !important; color: #527164; font-size: 12px !important; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.vl-heading h2 { margin: 0 !important; color: #193a35 !important; font-size: clamp(28px, 4vw, 42px) !important; font-weight: 550; line-height: 1.12 !important; letter-spacing: -.025em; }
.vl-intro { max-width: 600px; margin: 12px 0 0 !important; color: #536b60; font-size: 16px !important; line-height: 1.55 !important; }
.vl-more { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: #193a35 !important; font-size: 15px; font-weight: 650; text-decoration: none !important; border-bottom: 1px solid #a9baad; }
.vl-more:hover { border-color: #193a35; }
.vl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.vl-card { min-width: 0; overflow: hidden; border: 1px solid #d7dfd5; border-radius: 16px; background: #f7f8f3; box-shadow: none; }
.vl-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #102722; }
.vl-play { position: absolute; inset: 0; display: block; color: white !important; }
.vl-play[hidden] { display: none !important; }
.vl-play img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; transition: transform .2s; }
.vl-play:hover img { transform: scale(1.03); }
.vl-play-icon { position: absolute; inset: 50% auto auto 50%; display: grid; place-items: center; width: 48px; height: 48px; padding-inline-start: 3px; border-radius: 50%; background: rgba(10, 30, 24, .82); border: 1px solid rgba(255,255,255,.7); transform: translate(-50%, -50%); font-size: 18px; }
.vl-duration { position: absolute; inset: auto 10px 10px auto; padding: 3px 7px; border-radius: 4px; color: #fff; background: rgba(0,0,0,.8); font-size: 12px; line-height: 1.4; }
.vl-card-copy { padding: 20px; }
.vl-card h3 { margin: 0 0 9px !important; color: #193a35 !important; font-size: 19px !important; font-weight: 600; line-height: 1.25 !important; letter-spacing: -.01em; }
.vl-card p { margin: 0 !important; color: #536b60 !important; font-size: 14px !important; line-height: 1.55 !important; }
.vl-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vl-stop { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid #fff; border-radius: 50%; color: #fff; background: #102722; font-size: 25px; cursor: pointer; z-index: 1; }
.vl-card.is-playing { grid-column: 1 / -1; }
.vl-card.is-playing .vl-screen { aspect-ratio: 16 / 9; max-height: 70vh; }
.vl-section a:focus-visible, .vl-stop:focus-visible { outline: 3px solid #ac613c; outline-offset: 4px; }
.vl-section .vl-play:focus-visible { outline-offset: -4px; }
.vl-original { max-width: 1180px; margin: 0 auto; padding: 16px 24px 36px; font-size: 13px; color: #536b60; }
.vl-original a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 680px) { .vl-grid { grid-template-columns: 1fr; gap: 16px; } .vl-card-copy { padding: 18px; } .vl-heading { align-items: start; } }
@media (prefers-reduced-motion: reduce) { .vl-play img { transition: none; } }