/* Shared structure for the three design mocks. Each direction's look lives in a.css, b.css, c.css. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0}
h1,h2,h3,h4,h5,p,ul,figure,blockquote{margin:0}
ul{padding:0;list-style:none}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}


.ph{display:inline-block;font-size:11px;line-height:1.4;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border:1px dashed currentColor;border-radius:3px;opacity:.75;margin-bottom:12px}

.roi-num,.roi-unit,.roi-label{display:block}
.flow-scroll{overflow-x:auto;background:#fff;border-radius:6px}
.flow-scroll img{width:100%;min-width:600px;max-width:760px;margin:0 auto}
.video-frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:6px;overflow:hidden}
.video-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;cursor:pointer}
.video-frame button{display:grid;place-items:center;padding:0;border:0;background:none;color:#fff}
.video-frame svg{width:18px;height:18px;fill:currentColor}
.video-frame .p-big{position:absolute;inset:0;margin:auto;width:68px;height:68px;border-radius:50%;background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:opacity .25s,transform .25s,background .2s}
.video-frame .p-big:hover{background:rgba(255,255,255,.26)}
.p-big svg{width:26px;height:26px;margin-left:3px}
.playing .p-big{opacity:0;transform:scale(.85);pointer-events:none}
.p-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:14px;padding:30px 16px 12px;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.62));visibility:hidden;opacity:0;transition:opacity .25s}
.active .p-bar{visibility:visible;opacity:1}
.playing.idle:not(:has(:focus-visible)) .p-bar{opacity:0}
.playing.idle:not(:has(:focus-visible)) video{cursor:none}
.p-time{font:500 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.p-cc[aria-pressed=false]{opacity:.45}
.i-pause,.i-off,.playing .p-play .i-play,.muted .i-vol{display:none}
.playing .i-pause,.muted .i-off{display:block}
.p-seek{flex:1;min-width:0;height:14px;margin:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;--p:0%}
.p-seek::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,var(--p-accent,#fff) var(--p),rgba(255,255,255,.28) var(--p))}
.p-seek::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;margin-top:-4px;border-radius:50%;background:#fff;opacity:0;transition:opacity .15s}
.p-seek:hover::-webkit-slider-thumb,.p-seek:focus-visible::-webkit-slider-thumb{opacity:1}
.p-seek::-moz-range-track{height:3px;border-radius:2px;background:rgba(255,255,255,.28)}
.p-seek::-moz-range-progress{height:3px;border-radius:2px;background:var(--p-accent,#fff)}
.p-seek::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:#fff}
.video-frame:fullscreen{border-radius:0}
.links .btn,.contact-actions .btn{display:inline-block;text-decoration:none;margin:0 10px 10px 0}
.t-icon::before{content:"+"}
[aria-expanded="true"] .t-icon::before{content:"–"}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.duo,.video-frame,.video-frame *{transition:none!important}}