.ds-video{--dsv-brand:var(--color-brand,#14AA3C);--dsv-forest:var(--color-forest,#0B2615);--dsv-line:var(--color-line,#E0E5DF);--dsv-radius:var(--radius,16px);position:relative;isolation:isolate;overflow:hidden;width:100%;aspect-ratio:16/9;border:1px solid var(--dsv-line);border-radius:var(--dsv-radius);background:#F3F7F3}
.ds-video[data-radius="lg"]{--dsv-radius:var(--radius-lg,24px)}
.ds-video[data-ratio="21-9"]{aspect-ratio:21/9}
.ds-video[data-ratio="4-3"]{aspect-ratio:4/3}
.ds-video[data-ratio="1-1"]{aspect-ratio:1/1}
.ds-video[data-ratio="film"]{aspect-ratio:1920/996}
/* Two cuts: the mobile ratio applies only when a mobile video is set; posters live in the video's background */
.ds-video .ds-video__media--dual{background:var(--dsv-poster) center/cover no-repeat}
/* the poster stays on top as its own layer until the video really plays (a decoded first frame would otherwise
   replace it, and the 1920 px video is softer than the 2x poster) */
.ds-video .ds-video__poster{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--dsv-poster) center/cover no-repeat;transition:opacity .35s ease}
.ds-video.has-played .ds-video__poster{opacity:0}
.ds-video.is-expand .ds-video__poster{left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%)}
@media (max-width:767.98px){.ds-video[data-ratio-m="4-5"]{aspect-ratio:4/5}.ds-video[data-ratio-m="1-1"]{aspect-ratio:1/1}.ds-video[data-ratio-m="9-16"]{aspect-ratio:9/16}.ds-video[data-ratio-m="16-9"]{aspect-ratio:16/9}.ds-video .ds-video__media--dual,.ds-video .ds-video__poster{background-image:var(--dsv-poster-m)}}
.ds-video[data-surface="dark"]{border-color:rgba(255,255,255,.14);background:var(--dsv-forest)}
.ds-video .ds-video__media{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.ds-video .ds-video__controls{position:absolute;left:20px;bottom:20px;z-index:2}
.ds-video button.ds-video__toggle,.ds-video button.ds-video__toggle:hover,.ds-video button.ds-video__toggle:focus{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:0;margin:0;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.92);color:var(--dsv-forest);line-height:1;cursor:pointer;box-shadow:0 2px 10px rgba(11,38,21,.18);transition:background-color .2s,transform .2s}
.ds-video button.ds-video__toggle:hover{background:#fff;transform:scale(1.05)}
.ds-video button.ds-video__toggle:focus-visible{outline:2px solid var(--dsv-brand);outline-offset:3px}
.ds-video .ds-video__toggle svg{width:20px;height:20px;fill:currentColor}
.ds-video .ds-video__icon-pause,.ds-video.is-playing .ds-video__icon-play{display:none}
.ds-video.is-playing .ds-video__icon-pause{display:block}
.ds-video .ds-video__progress{position:absolute;left:0;right:0;bottom:0;z-index:2;height:4px;background:rgba(255,255,255,.35)}
.ds-video .ds-video__bar{display:block;height:100%;background:var(--dsv-brand);transform:scaleX(0);transform-origin:0 50%}
.ds-video[data-controls="no"]:not(.is-reduced) .ds-video__controls,.ds-video[data-controls="no"]:not(.is-reduced) .ds-video__progress{display:none}
.ds-video--empty{display:flex;align-items:center;justify-content:center;border-style:dashed;color:var(--color-muted,#5B6472);font:600 14px/1.4 var(--font-body,'Open Sans'),'Open Sans',Arial,sans-serif}
@media (max-width:767.98px){.ds-video .ds-video__controls{left:12px;bottom:14px}.ds-video button.ds-video__toggle{width:40px;height:40px}}
@media (prefers-reduced-motion:reduce){.ds-video button.ds-video__toggle{transition:none}}
/* Open on scroll (hero film): script.js sizes the frame from a strip (a slice of frame 0, centred) to the full film.
   The video keeps the full-film size and stays centred; the frame around it does the growing. --dsv-open goes 0 → 1. */
.ds-video.is-expand{aspect-ratio:auto;max-width:100%;margin-left:auto;margin-right:auto;cursor:pointer;will-change:height,width}
.ds-video.is-expand.is-open{cursor:auto}
.ds-video.is-expand .ds-video__media{left:50%;top:50%;right:auto;bottom:auto;max-width:none;transform:translate(-50%,-50%)}
.ds-video.is-expand .ds-video__controls,.ds-video.is-expand .ds-video__progress{opacity:calc(var(--dsv-open,0) * 1.4 - .4)}
.ds-video.is-expand:not(.is-open) .ds-video__controls{pointer-events:none}
.ds-video.is-expand.is-strip{border-color:#E3E8E1;box-shadow:0 12px 32px rgba(11,38,21,.10),0 2px 6px rgba(11,38,21,.05)}
.ds-video.is-expand.is-strip:hover{box-shadow:0 14px 36px rgba(11,38,21,.14),0 2px 6px rgba(11,38,21,.06)}
.ds-video.is-expand:focus-visible{outline:2px solid var(--dsv-brand);outline-offset:3px}
/* Strip light (hero film): a green light travels around the strip's edge, like the hero eyebrow chip; script.js moves
   the conic gradient's centre (--dsv-x, --dsv-y) and angle along the pill. Fades out as the film opens. */
.ds-video.is-expand::after{content:"";position:absolute;inset:0;z-index:3;padding:2px;border-radius:inherit;pointer-events:none;background:conic-gradient(from var(--dsv-angle,100deg) at var(--dsv-x,50%) var(--dsv-y,50%),rgba(20,170,60,0),#5CC77A 20deg,#14AA3C 100deg,rgba(20,170,60,0) 120deg);background:conic-gradient(from var(--dsv-angle,100deg) at var(--dsv-x,50%) var(--dsv-y,50%) in oklch,rgba(20,170,60,0),#5CC77A 20deg,#14AA3C 100deg,rgba(20,170,60,0) 120deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:calc(1 - var(--dsv-open,0) * 5)}

/* Open on scroll, before the script runs: draw the strip from the CSS variables the widget prints, at the script's
   10% strip zoom, so the first paint matches what the script lays out (no layout shift). Not in the editor and not
   with reduced motion, where the script keeps the full film. --dsv-c* pick the desktop or the mobile cut. */
@media (prefers-reduced-motion:no-preference){
  body:not(.elementor-editor-active) .ds-video[data-expand="yes"]:not(.is-expand){--dsv-cw:var(--dsv-sw);--dsv-ch:var(--dsv-sh);--dsv-cr:var(--dsv-r);width:calc(var(--dsv-cw) * 1.1%);max-width:100%;aspect-ratio:var(--dsv-cw) / var(--dsv-ch);height:auto;margin-left:auto;margin-right:auto;border-radius:999px;border-color:#E3E8E1;box-shadow:0 12px 32px rgba(11,38,21,.10),0 2px 6px rgba(11,38,21,.05)}
  body:not(.elementor-editor-active) .ds-video[data-expand="yes"]:not(.is-expand) :is(.ds-video__media,.ds-video__poster){left:50%;top:50%;right:auto;bottom:auto;max-width:none;width:calc(10000% / var(--dsv-cw));height:calc(var(--dsv-cr) * 10000% / var(--dsv-ch));transform:translate(-50%,-50%)}
  body:not(.elementor-editor-active) .ds-video[data-expand="yes"]:not(.is-expand) :is(.ds-video__controls,.ds-video__progress){opacity:0;pointer-events:none}
}
@media (prefers-reduced-motion:no-preference) and (max-width:767.98px){
  body:not(.elementor-editor-active) .ds-video[data-expand="yes"][data-src-m]:not(.is-expand){--dsv-cw:var(--dsv-swm);--dsv-ch:var(--dsv-shm);--dsv-cr:var(--dsv-rm)}
}
/* 1.4.5: strip corners matching a rectangular frame-0 component (data-strip-r, % of frame width) and an opt-out for the travelling light */
.ds-video[data-strip-light="no"]::after{display:none}
@media (prefers-reduced-motion:no-preference){
  body:not(.elementor-editor-active) .ds-video[data-expand="yes"][data-strip-r]:not(.is-expand){--dsv-csr:var(--dsv-sr);border-radius:calc(var(--dsv-csr) / var(--dsv-cw) * 100%) / calc(var(--dsv-csr) / var(--dsv-ch) * 100%)}
  @media (max-width:767.98px){body:not(.elementor-editor-active) .ds-video[data-expand="yes"][data-strip-r][data-src-m]:not(.is-expand){--dsv-csr:var(--dsv-srm)}}
}
/* 1.4.6: sharp HTML strip (strip_html): sits centred over the poster/video, sized by the script to the frame-0 component, fades out early as the film opens */
.ds-video .ds-video__strip{position:absolute;left:50%;top:50%;z-index:2;width:100%;transform:translate(-50%,-50%);pointer-events:none;opacity:calc(1 - var(--dsv-open,0) * 5)}
.ds-video:not([data-expand="yes"]) .ds-video__strip,body.elementor-editor-active .ds-video__strip{display:none}
@media (prefers-reduced-motion:reduce){.ds-video .ds-video__strip{display:none}}