/* Native autoplaying launch promo, visible brand work and team credentials.
   Loaded last: refinements only, nothing here redesigns a neighbouring section. */

/* ---------------------------------------------------------- 1. Launch promo */
html body .brand-film-live{position:relative;display:block;width:100%;aspect-ratio:16/9;background:var(--deep);overflow:hidden;line-height:0;isolation:isolate}
html body .brand-film-live .brand-film-video{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:var(--deep)}
/* An autoplaying film should sit still: keep the signature tilt, drop the hover lift. */
@media(hover:hover) and (min-width:700px){html body .brand-film-live:hover{transform:perspective(1000px) rotateY(-2.5deg)}}
html body .brand-film-live [hidden]{display:none!important}

/* Controls stay out of the way until the viewer reaches for them. */
html body .brand-film-live .film-sound{position:absolute;right:16px;bottom:16px;z-index:3;display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:9px 15px;background:rgba(4,31,25,.74);border:1px solid rgba(213,175,89,.38);color:var(--paper);font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;line-height:1;opacity:0;transition:opacity .35s var(--ease),border-color .3s var(--ease)}
html body .brand-film-live:hover .film-sound,html body .brand-film-live:focus-within .film-sound{opacity:1}
html body .brand-film-live .film-sound:hover{border-color:var(--gold)}
html body .brand-film-live .film-sound svg{flex:0 0 auto;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
html body .brand-film-live .film-sound .film-sound-wave{opacity:0}
html body .brand-film-live .film-sound[aria-pressed=true]{color:var(--gold);border-color:rgba(213,175,89,.62)}
html body .brand-film-live .film-sound[aria-pressed=true] .film-sound-cross{opacity:0}
html body .brand-film-live .film-sound[aria-pressed=true] .film-sound-wave{opacity:1}
/* Touch devices never hover, so the control is simply present. */
@media(hover:none){html body .brand-film-live .film-sound{opacity:1}}

/* Shown only when autoplay is declined: reduced motion, data saver, or a blocked play. */
html body .brand-film-live .film-still-play{z-index:3;border:0;cursor:pointer}
html body .brand-film-live[data-film-state=still] .film-sound{display:none}

html body .film-underbar-live{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;min-height:0;padding:23px 0 21px;border-bottom:1px solid var(--line-dark)}
html body .film-live-caption{min-width:0}
html body .film-live-caption .film-live-eyebrow{color:var(--gold);font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;line-height:1}
html body .film-live-caption .film-live-brand{margin-top:13px;color:var(--white);font-size:clamp(26px,2.5vw,34px);font-weight:560;letter-spacing:-.035em;line-height:1}
html body .film-live-caption .film-live-line{margin-top:12px;color:var(--muted-dark);font-size:12px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;line-height:1.55}
html body .film-underbar-live>span{flex:0 0 auto;padding-bottom:5px;color:var(--muted-dark);font-size:10px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}

/* ------------------------------------------------------------ 2. Brand work */
html body .brand-work-showcase .brand-work-grid{display:grid;grid-template-columns:1fr;gap:26px}
html body .brand-work-showcase .brand-work-grid>.brand-work-card{position:relative;display:block;padding:0;overflow:hidden;background:var(--pine);color:var(--white);text-align:left}
html body .brand-work-showcase .brand-work-grid>.brand-work-card>img{display:block;width:100%;height:auto!important;aspect-ratio:16/9!important;object-fit:cover!important;object-position:center!important}
html body .brand-work-showcase .brand-work-grid>.brand-work-card>span{display:block;align-items:stretch;gap:0;padding:25px 27px 27px;font-weight:400;font-size:1rem}
html body .brand-work-card strong{display:block;margin-top:0;font-size:clamp(24px,2.3vw,31px);font-weight:560;letter-spacing:-.035em;line-height:1.03}
html body .brand-work-card .brand-work-flag{display:block;max-width:26ch;margin-top:16px;padding-top:14px;border-top:1px solid rgba(213,175,89,.34);color:var(--gold);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;line-height:1.55}
html body .brand-work-card small{display:block;max-width:40ch;margin-top:12px;color:var(--muted-dark);font-size:13px;font-weight:400;line-height:1.65}
html body .brand-work-card .brand-work-action{display:inline-flex;align-items:center;gap:12px;margin-top:20px;color:var(--paper);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
html body .brand-work-card .brand-work-action svg{width:18px;height:18px;margin-left:0;fill:none;stroke:var(--gold);stroke-width:1.6;transition:transform .3s var(--ease)}
html body .brand-work-card:hover .brand-work-action svg{transform:translateX(4px)}

/* Both pieces occupy the same full-width box; Völkl mirrors Gamma so the pair reads as a spread. */
@media(min-width:900px){
html body .brand-work-showcase .brand-work-grid>.brand-work-card{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:stretch;min-height:326px}
html body .brand-work-showcase .brand-work-grid>.brand-work-card>img{grid-area:1/1;height:100%!important;min-height:326px;aspect-ratio:auto!important}
html body .brand-work-showcase .brand-work-grid>.brand-work-card>span{grid-area:1/2;align-self:center;padding:38px 40px}
html body .brand-work-showcase .brand-work-grid>.brand-work-card.is-reverse{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}
html body .brand-work-showcase .brand-work-grid>.brand-work-card.is-reverse>img{grid-area:1/2}
html body .brand-work-showcase .brand-work-grid>.brand-work-card.is-reverse>span{grid-area:1/1}
html body .brand-work-card strong{font-size:clamp(29px,2.9vw,41px)}
}
@media(max-width:899px){
html body .brand-work-showcase .brand-work-grid{gap:20px}
html body .brand-work-showcase .brand-work-grid>.brand-work-card>span{padding:21px 22px 23px}
}

/* ---------------------------------------------------------- 3. Credentials */
html body .credentials-block{margin-top:74px;padding-top:44px;border-top:1px solid var(--line)}
html body .credentials-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 56px;align-items:end}
html body .credentials-head .eyebrow{grid-column:1/-1;margin-bottom:4px;font-size:11px!important;letter-spacing:.17em!important;text-transform:uppercase}
html body .credentials-head h3{font-size:clamp(28px,3.1vw,46px);font-weight:560;letter-spacing:-.035em;line-height:1.04;color:var(--ink)}
html body .credentials-intro{align-self:end;max-width:54ch;color:var(--muted);font-size:15px;line-height:1.72}
html body .credentials-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin:54px 0 0}
html body .credentials-group{position:relative;padding-top:21px;border-top:1px solid var(--line)}
html body .credentials-group::before{content:"";position:absolute;top:-1px;left:0;width:46px;height:2px;background:var(--gold)}
html body .credentials-group dt{color:var(--muted);font-size:10.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;line-height:1.5}
html body .credentials-group dd{margin:17px 0 0}
html body .credentials-group dd span{display:block;color:var(--ink);font-size:17px;font-weight:550;letter-spacing:-.012em;line-height:1.95}
html body .credentials-note{max-width:84ch;margin-top:46px;padding-top:19px;border-top:1px solid var(--line);color:var(--muted);font-size:11.5px;line-height:1.7}

@media(max-width:1079px){
html body .credentials-head{grid-template-columns:1fr;gap:18px}
html body .credentials-intro{max-width:60ch}
html body .credentials-grid{gap:30px;margin-top:44px}
}
@media(max-width:699px){
html body .brand-film-live .film-sound{right:11px;bottom:11px;min-height:38px;padding:8px 12px;font-size:10px;gap:7px}
html body .film-underbar-live{display:block;padding:19px 0 18px}
html body .film-live-caption .film-live-brand{font-size:27px;margin-top:11px}
html body .film-live-caption .film-live-line{font-size:11px;letter-spacing:.11em;margin-top:10px}
html body .film-underbar-live>span{display:block;margin-top:14px;padding-bottom:0;font-size:10px}
html body .credentials-block{margin-top:50px;padding-top:32px}
html body .credentials-head h3{font-size:29px}
html body .credentials-intro{font-size:14px;line-height:1.7}
html body .credentials-grid{grid-template-columns:1fr;gap:26px;margin-top:34px}
html body .credentials-group dd span{font-size:16px;line-height:1.85}
html body .credentials-note{margin-top:32px;font-size:11px}
}
@media print{html body .credentials-block{page-break-inside:avoid}}