/* Three supplied films: ambient hero, readable workflow film, closing brand backdrop. */
.motion-hero,.motion-contact{position:relative;isolation:isolate;overflow:hidden;background:#062a1b;color:#f4f4f2}
.motion-backdrop{position:absolute;inset:0;z-index:-2;pointer-events:none}
.motion-video{display:block;width:100%;height:100%;object-fit:cover}
.motion-hero .motion-backdrop{left:20%}
.motion-hero::before,.motion-contact::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.motion-hero::before{background:linear-gradient(90deg,rgba(4,31,21,.96),rgba(4,31,21,.7) 45%,rgba(4,31,21,.42))}
.motion-hero .dsp,.motion-hero h2,.motion-hero strong,.motion-hero .kick{color:#f4f4f2!important}
.motion-hero .kick{color:#b9d8c7!important;padding-right:160px}
.motion-hero>div[style*="border-top"]{border-top-color:rgba(207,231,219,.45)!important}
.motion-hero p{color:#d9e6df}
.motion-hero .home-metrics{border-color:rgba(207,231,219,.45);background:rgba(5,38,25,.75)}
.motion-hero .home-metrics .cell{background:transparent;outline-color:rgba(207,231,219,.45);color:#d9e6df}
.motion-toggle{position:absolute;top:24px;right:clamp(16px,4vw,56px);z-index:1;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 14px;border:1px solid rgba(225,240,232,.55);border-radius:0;background:rgba(5,35,24,.88);color:#f4f4f2;font:600 12px/1.4 'A2z',sans-serif;cursor:pointer;white-space:nowrap}
.motion-toggle:hover{background:#0e5a3c}
.motion-toggle:focus-visible{outline:3px solid #c9e0d6;outline-offset:4px}
.motion-workflow{margin:clamp(24px,3vw,40px) 0 0;border:1px solid var(--brand);background:#062a1b}
.motion-workflow-screen{aspect-ratio:16/9;width:100%;max-width:960px;margin:0 auto}
.motion-workflow .motion-video{object-fit:contain}
.motion-workflow figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--color-bg);border-top:1px solid var(--brand);color:var(--brand);font-size:12px;line-height:1.6}
.motion-workflow .motion-toggle{position:static;flex-shrink:0;background:var(--brand);border-color:var(--brand)}
.motion-contact{background:#062a1b!important}
.motion-contact .motion-backdrop{left:35%}
.motion-contact::before{background:linear-gradient(90deg,#062a1b 24%,rgba(6,42,27,.94) 38%,rgba(6,42,27,.12) 70%)}
.motion-contact>h2,.motion-contact>p,.motion-contact>div:not(.motion-backdrop){position:relative;max-width:52%}
@media(max-width:700px){
  .motion-hero .motion-backdrop{left:0}
  .motion-hero::before{background:linear-gradient(180deg,rgba(4,31,21,.68),rgba(4,31,21,.87) 55%,rgba(4,31,21,.96))}
  .motion-hero .kick{padding-right:0;max-width:28ch}
  .motion-hero .motion-toggle{top:12px;right:16px;min-height:36px;padding:7px 10px;font-size:11px}
  .motion-contact{padding-bottom:clamp(220px,56vw,380px)!important}
  .motion-contact .motion-backdrop{inset:auto 0 0;height:auto;aspect-ratio:16/9}
  .motion-contact::before{background:linear-gradient(180deg,#062a1b 42%,rgba(6,42,27,.85) 58%,rgba(6,42,27,.05) 78%)}
  .motion-contact>h2,.motion-contact>p,.motion-contact>div:not(.motion-backdrop){max-width:100%}
  .motion-contact .motion-toggle{top:auto;bottom:16px;right:16px}
  .motion-workflow figcaption{align-items:flex-start;padding:10px;gap:8px;font-size:11px}
  .motion-workflow .motion-toggle{min-height:36px;padding:7px 10px;font-size:11px}
}