/* Video page (/company/videos/). Loaded on that page only. Markup: inc/video-library.php. Behaviour: assets/js/videos.js.
   One dark page of thumbnail rows. Stills are slightly dimmed so white titles read; full brightness when pointed at. */
.v3{--ink:#201b1c;--ink2:#2b2425;--paper:#f3eee9;--ash:#a89fa0;--sig:#66ad8b;--studio:#f5f3f1;--mute:#675e60;--pad:max(24px,calc((100% - 1232px)/2));background:var(--ink);color:var(--paper);padding-bottom:96px;overflow-x:clip}
.v3 *{box-sizing:border-box}
.v3 .vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.x-in{max-width:1280px;margin:0 auto;padding:0 24px}

/* banner */
.vbill{position:relative;min-height:min(74vh,680px);display:flex;align-items:flex-end;isolation:isolate}
.vbill .vbk{position:absolute;inset:0;z-index:-2;background:#000}
.vbill .vbk img,.vbill .vbk video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.vbill::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(32,27,28,.85) 0%,rgba(32,27,28,.35) 34%,rgba(32,27,28,0) 60%),linear-gradient(0deg,var(--ink) 0%,rgba(32,27,28,.75) 26%,rgba(32,27,28,0) 52%)}
/* headline kept small and low so the logo reveal at the end of the banner loop has the middle of the frame */
.vbill .vin{width:100%;max-width:1280px;margin:0 auto;padding:0 24px 40px}
.vkick{display:inline-flex;align-items:center;gap:8px;font:600 13px var(--fb);color:#a9d3bd;margin:0 0 14px}
.vkick::before{content:"";width:22px;height:2px;background:var(--sig)}
.vbill h2{font-family:var(--fd);font-weight:800;font-size:clamp(28px,3vw,44px);line-height:1.05;letter-spacing:-.02em;margin:0 0 10px;max-width:20ch;color:#fff;text-wrap:balance}
.vdesc{font-size:16px;line-height:1.5;color:#e6e1e1;max-width:46ch;margin:0 0 20px}
.vbtns{display:flex;gap:12px;flex-wrap:wrap}
.vb{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:8px;padding:13px 26px;font:700 16px var(--fb);cursor:pointer;text-decoration:none;font-variant-numeric:tabular-nums}
.vb svg{width:18px;height:18px}
.vb.vpl{background:#fff;color:#201b1c}.vb.vpl:hover{background:#e6e6e6}
.vb.vsc{background:rgba(255,255,255,.18);color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.vb.vsc:hover{background:rgba(255,255,255,.28)}
.vb:focus-visible{outline:3px solid var(--sig);outline-offset:3px}

/* topic bar: plain text links */
.x-nav{position:sticky;top:var(--vhdr,64px);z-index:30;background:rgba(32,27,28,.96);box-shadow:0 1px 0 rgba(243,238,233,.1)}
body.admin-bar .x-nav{top:var(--vhdr,96px)}
.x-nav .x-in{display:flex;align-items:center;gap:32px}
.x-links{display:flex;gap:30px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.x-links::-webkit-scrollbar{display:none}
.x-links a{font:600 15.5px/1 var(--fb);color:var(--paper);opacity:.66;text-decoration:none;padding:21px 0 18px;border-bottom:3px solid transparent;white-space:nowrap;transition:opacity .2s}
.x-links a:hover,.x-links a:focus-visible{opacity:1}
.x-links a[aria-current]{opacity:1;border-bottom-color:var(--sig)}
.x-search{position:relative;flex:0 0 230px;color:var(--paper)}
.x-search svg{position:absolute;left:0;top:50%;transform:translateY(-50%);width:17px;height:17px;opacity:.7;pointer-events:none}
.x-search input{width:100%;background:transparent;border:0;border-bottom:1.5px solid currentColor;border-radius:0;color:inherit;padding:8px 2px 7px 27px;font:15px var(--fb);opacity:.85;-webkit-appearance:none;appearance:none}
.x-search input:focus{outline:none;opacity:1;border-bottom-color:var(--sig)}
.x-search input::placeholder{color:inherit;opacity:.6}

/* section and row headings */
.x-anchor{scroll-margin-top:150px}
.x-ch{max-width:1280px;margin:0 auto;padding:64px 24px 0;scroll-margin-top:120px}
.x-ch h2{font:800 clamp(26px,2.4vw,34px)/1.1 var(--fd);letter-spacing:-.02em;margin:0 0 6px;color:var(--paper)}
.x-ch p{margin:0;max-width:60ch;font-size:15.5px;line-height:1.5;color:var(--ash)}
.x-hd{max-width:1280px;margin:0 auto;padding:0 24px;display:flex;align-items:baseline;gap:6px 16px;flex-wrap:wrap}
.x-hd h3{font:700 21px/1.25 var(--fd);margin:0;color:var(--paper)}
.x-hd p{margin:0;font-size:15px;color:var(--ash)}
.x-hd .x-pin{font:600 13px/1 var(--fb);color:var(--sig);align-self:center}

/* rows */
.a-row{margin-top:36px}
.x-anchor+.a-row{margin-top:48px}
.x-tw{position:relative}
.x-tr{display:grid;grid-auto-flow:column;grid-auto-columns:calc((min(100vw,1280px) - 48px - 2*18px)/3.2);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);padding:14px var(--pad) 10px;scrollbar-width:none}
.x-tr::-webkit-scrollbar{display:none}
.x-arr{position:absolute;top:14px;bottom:10px;width:56px;border:0;padding:0;color:var(--paper);cursor:pointer;z-index:4;display:grid;place-items:center;opacity:0;transition:opacity .2s}
.x-arr svg{width:30px;height:30px}
.x-arr.l{left:0;background:linear-gradient(90deg,rgba(32,27,28,.95),rgba(32,27,28,0))}
.x-arr.r{right:0;background:linear-gradient(270deg,rgba(32,27,28,.95),rgba(32,27,28,0))}
.x-tw:hover .x-arr,.x-arr:focus-visible{opacity:1}
.x-arr[hidden]{display:none}

/* tiles: dimmed still, full brightness on hover or focus */
.a-t{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;margin:0;background:var(--ink2);border-radius:3px;overflow:hidden;cursor:pointer;text-align:left;color:var(--paper);font:inherit;scroll-snap-align:start}
.a-t img,.a-t video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vg img{filter:saturate(.85) brightness(.82);transition:filter .6s ease,transform .8s ease}
.a-t video{z-index:1}
.a-t::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(32,27,28,.94) 0%,rgba(32,27,28,.45) 42%,rgba(32,27,28,0) 72%);transition:opacity .5s}
.a-cap{position:absolute;left:18px;right:18px;bottom:15px;z-index:2;display:flex;flex-direction:column;gap:7px}
.a-ti{font:700 clamp(16px,1.35vw,19.5px)/1.22 var(--fd);letter-spacing:-.005em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
.a-ds{font-size:13.5px;line-height:1.4;color:#ebe5e1;max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .45s ease}
.a-me{display:flex;align-items:center;gap:10px;font:600 13px/1 var(--fb);color:#d8d0cc;font-variant-numeric:tabular-nums}
.a-me svg{width:14px;height:14px}
.m-h{font:600 12.5px/1 var(--fb);padding:3px 6px 4px;border:1px solid currentColor;border-radius:3px}
.a-bar{position:absolute;left:0;bottom:0;z-index:3;height:3px;width:100%;background:var(--sig);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.vg:hover img,.vg:focus-visible img{filter:none;transform:scale(1.035)}
.a-t:hover::after,.a-t:focus-visible::after{opacity:.85}
.a-t:hover .a-ds,.a-t:focus-visible .a-ds{max-height:3em;opacity:1}
.a-t:hover .a-bar,.a-t:focus-visible .a-bar{transform:scaleX(1)}
.a-t:focus-visible{outline:3px solid var(--sig);outline-offset:3px}
.a-rk{position:absolute;left:16px;top:8px;z-index:2;font:800 56px/1 var(--fd);letter-spacing:-.04em;color:var(--paper);text-shadow:0 2px 18px rgba(0,0,0,.45)}

/* product films: product name as the title, its line always shown */
.a-prod .a-ti{font-size:clamp(20px,1.8vw,26px);font-weight:800}
.a-prod .a-ds{max-height:none;opacity:1}
/* product films, photo style (Videos → Video page): the product photo in a pool of light that fades into the page */
.a-t.a-pp{background:radial-gradient(ellipse 34% 62% at 73% 52%,#efe9e5 0%,#d6cecb 40%,#4a4243 78%,#2b2425 100%)}
.a-t.a-pp img{mix-blend-mode:multiply;object-fit:contain;inset:9% 2% 9% 48%;width:50%;height:82%;transition:transform .8s ease}
/* same tint as the stills: slightly dimmed at rest, full brightness when pointed at */
.a-t.a-pp img{filter:saturate(.85)}
.a-t.a-pp::after{background:rgba(32,27,28,.18)}
.a-t.a-pp:hover::after,.a-t.a-pp:focus-visible::after{opacity:0}
.a-t.a-pp:hover img,.a-t.a-pp:focus-visible img{filter:none}
.a-t.a-pp .a-cap{right:54%;bottom:18px}
.a-t.a-pp:hover img,.a-t.a-pp:focus-visible img{transform:scale(1.04)}

/* search results */
.x-res{padding-top:40px}
.x-grid{max-width:1280px;margin:18px auto 0;padding:0 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.x-none{max-width:1280px;margin:0 auto;padding:0 24px;font-size:17px}

/* player */
.vmodal{border:0;padding:0;background:#181314;color:#fff;width:min(960px,94vw);max-height:94vh;border-radius:12px;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.7)}
.vmodal::backdrop{background:rgba(0,0,0,.8)}
.vmodal .vfr{aspect-ratio:16/9;background:#000}
.vmodal iframe{width:100%;height:100%;border:0;display:block}
.vmodal .vbd{padding:20px 76px 24px 24px}
.vmodal h3{font:700 24px/1.2 var(--fd);margin:0 0 8px;color:#fff}
.vmodal .vmeta{display:flex;gap:10px;align-items:center;color:var(--ash);font-size:14px;margin:0 0 10px;font-variant-numeric:tabular-nums}
.vmodal p{margin:0 0 14px;color:#e6e1e1;line-height:1.5}
.vmodal .vyt{color:#a9d3bd;font-weight:600;font-size:14px}
.vmodal .vx{position:absolute;right:16px;top:calc(min(960px,94vw)*.5625 + 18px);width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;font-size:22px;line-height:1}
.vmodal .vx:focus-visible{outline:3px solid var(--sig)}

@media (max-width:1000px){
  .x-tr{grid-auto-columns:calc((100vw - 48px - 18px)/1.75)}
  .x-search{flex-basis:44px}
  .x-search input{padding-left:24px;width:0;border-color:transparent;transition:width .2s}
  .x-search input:focus,.x-search input:not(:placeholder-shown){width:200px;border-color:currentColor}
  .x-arr{display:none}
}
@media (max-width:560px){
  .x-in,.x-ch,.x-hd,.vbill .vin{padding-left:16px;padding-right:16px}
  .x-tr{--pad:16px;grid-auto-columns:82vw;gap:12px}
  .x-ch{padding-top:48px}
  .a-t.a-pp .a-cap{right:46%}
  .x-nav .x-in{gap:12px}
  .x-links{gap:16px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .x-links a{font-size:14px}
  .x-search{flex-basis:30px}
  .x-search input:focus,.x-search input:not(:placeholder-shown){width:150px}
  .a-rk{font-size:44px}
  .vbill{min-height:70vh}
  .vmodal .vbd{padding:18px 18px 22px}
  .vmodal .vx{top:auto;bottom:18px}
}
@media (prefers-reduced-motion:reduce){.vg img,.a-bar,.a-ds,.a-t.a-pp img,.x-links a{transition:none}.vg:hover img,.vg:focus-visible img,.a-t.a-pp:hover img{transform:none}}