/* Explainer video after the four services. Static block by default; video.js adds the desktop curtain
   (.is-curtain inside the grid) and, elsewhere, the opening from the centre with a muted preview (.is-revealed). */
.explainer{margin-top:72px;color:#f2f7ff}
.explainer-caption{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin:0 0 18px}
.explainer-eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#a5bddb}
.explainer-length{font-size:12px;letter-spacing:.08em;color:#8fa6c2;font-variant-numeric:tabular-nums}
.explainer-frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0b1626;border:1px solid rgba(165,189,219,.28);box-shadow:0 40px 90px -40px rgba(0,0,0,.75),12px 12px 0 -1px rgba(120,183,243,.08)}
.explainer-frame video{display:block;width:100%;height:100%;object-fit:cover;background:#0b1626;cursor:pointer}

/* Start button over the poster */
.explainer-start{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:76px;height:76px;margin:-38px 0 0 -38px;border:1px solid rgba(224,235,248,.7);background:rgba(11,22,38,.62);color:#f2f7ff;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .25s var(--ease,ease),background-color .25s,opacity .3s}
.explainer-start svg{width:28px;height:28px}
.explainer-start:hover{transform:scale(1.06);background:rgba(22,38,59,.82)}
.explainer-frame.has-started .explainer-start{opacity:0;pointer-events:none}

/* Controls bar */
.explainer-controls{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:14px;padding:28px 18px 14px;background:linear-gradient(to top,rgba(6,13,24,.82),rgba(6,13,24,0));opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s var(--ease,ease)}
.explainer-frame.has-started .explainer-controls{opacity:1;transform:none}
.explainer-frame.has-started.is-playing .explainer-controls{opacity:0}
.explainer-frame.has-started.is-playing:hover .explainer-controls,.explainer-frame.has-started:focus-within .explainer-controls{opacity:1;transform:none}
.explainer-controls button{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0 12px;border:1px solid rgba(165,189,219,.4);background:rgba(22,38,59,.55);color:#eef5ff;font:inherit;font-size:12px;letter-spacing:.04em;cursor:pointer}
.explainer-controls button:hover{border-color:#e0ebf8}
.explainer-controls .explainer-play,.explainer-controls .explainer-full{padding:0}
.explainer-sound[aria-pressed="true"]{border-color:#78b7f3;color:#fff}
.explainer-time{min-width:7.5em;font-size:12px;color:#c6d4e5;font-variant-numeric:tabular-nums;text-align:center}
.explainer-track{flex:1;min-width:60px;height:44px;margin:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;--filled:0%}
.explainer-track::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,#78b7f3 var(--filled),rgba(198,212,229,.3) var(--filled))}
.explainer-track::-moz-range-track{height:2px;background:linear-gradient(to right,#78b7f3 var(--filled),rgba(198,212,229,.3) var(--filled))}
.explainer-track::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-5px;background:#f2f7ff;border:0}
.explainer-track::-moz-range-thumb{width:12px;height:12px;background:#f2f7ff;border:0;border-radius:0}
.explainer :focus-visible{outline:2px solid #78b7f3;outline-offset:2px}
.explainer-frame:fullscreen{border:0}

/* Desktop curtain: the block sits behind the bottom of the card grid and is revealed as the columns part */
.mvp-services-grid.has-explainer{position:relative}
.mvp-services-grid.has-explainer>.mvp-service{position:relative;z-index:1;will-change:transform}
.explainer.is-curtain{position:absolute;z-index:0;left:50%;bottom:0;width:100vw;height:100vh;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:96px var(--gutter,56px) 40px;transform:translateX(-50%);pointer-events:none}
.explainer.is-curtain>*{pointer-events:auto}
.explainer.is-curtain .explainer-caption,.explainer.is-curtain .explainer-screen{width:min(100%,calc((100vh - 220px)*16/9))}
.explainer-screen{position:relative}
.explainer-trace{display:none}
.explainer.is-curtain .explainer-trace{display:block;position:absolute;inset:-12px;pointer-events:none}
.explainer-line{position:absolute;background:rgba(120,183,243,.5)}
.explainer-line[data-edge="top"],.explainer-line[data-edge="bottom"]{left:12px;right:12px;height:1px}
.explainer-line[data-edge="left"],.explainer-line[data-edge="right"]{top:12px;bottom:12px;width:1px}
.explainer-line[data-edge="top"]{top:0}.explainer-line[data-edge="bottom"]{bottom:0}.explainer-line[data-edge="left"]{left:0}.explainer-line[data-edge="right"]{right:0}
.explainer-node{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:#164bff;box-shadow:0 0 0 3px rgba(22,75,255,.2),0 0 18px 5px rgba(22,75,255,.45)}
.explainer-node:nth-of-type(1){left:0;top:0}.explainer-node:nth-of-type(2){left:100%;top:0}.explainer-node:nth-of-type(3){left:100%;top:100%}.explainer-node:nth-of-type(4){left:0;top:100%}
.explainer-seam{position:absolute;z-index:2;left:50%;bottom:0;width:2px;height:100vh;margin-left:-1px;pointer-events:none}
.explainer-seam i{position:absolute;display:block}
.explainer-seam i:first-child{inset:0;transform-origin:top;background:linear-gradient(to bottom,rgba(120,183,243,0),rgba(140,195,255,.85) 45%,#dcecff);box-shadow:0 0 10px 1px rgba(120,183,243,.75),0 0 28px 4px rgba(22,75,255,.35)}
.explainer-seam i:last-child{left:-11px;top:-150px;width:24px;height:160px;background:radial-gradient(ellipse 50% 50% at 50% 90%,#fff 0,#cfe6ff 14%,rgba(120,183,243,.75) 34%,rgba(22,75,255,0) 72%)}
.explainer-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;box-shadow:0 34px 70px -24px rgba(0,0,0,.7),0 12px 28px -12px rgba(0,0,0,.5);opacity:0}
.explainer.is-curtain .explainer-frame{will-change:clip-path,transform}

/* Phones and touch screens: muted preview over the poster, hidden once the full video starts */
.explainer-teaser{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0;transition:opacity .5s}
.explainer-frame.has-teaser .explainer-teaser{opacity:1}
.explainer-frame.has-started .explainer-teaser{display:none}
/* The frame opens from the centre (a horizontal curtain without holding the scroll), then the four nodes lock on */
@media (prefers-reduced-motion:no-preference){
  .explainer-ready:not(.is-curtain) .explainer-frame{clip-path:inset(0 50% 0 50%);transition:clip-path .9s cubic-bezier(.65,0,.35,1)}
  .explainer-ready.is-revealed:not(.is-curtain) .explainer-frame{clip-path:inset(0 0 0 0)}
  .explainer-ready:not(.is-curtain) .explainer-trace{display:block;position:absolute;inset:-8px;pointer-events:none}
  .explainer-ready:not(.is-curtain) .explainer-line{opacity:0;transform:scale(0);transition:opacity .3s .85s,transform .35s .85s cubic-bezier(.2,.7,.2,1)}
  .explainer-ready:not(.is-curtain) .explainer-line[data-edge="top"],.explainer-ready:not(.is-curtain) .explainer-line[data-edge="bottom"]{left:8px;right:8px}
  .explainer-ready:not(.is-curtain) .explainer-line[data-edge="left"],.explainer-ready:not(.is-curtain) .explainer-line[data-edge="right"]{top:8px;bottom:8px}
  .explainer-ready:not(.is-curtain) .explainer-node{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;opacity:0;transform:scale(0) rotate(-90deg);transition:opacity .2s .75s,transform .3s .75s cubic-bezier(.34,1.8,.5,1)}
  .explainer-ready.is-revealed:not(.is-curtain) .explainer-line,.explainer-ready.is-revealed:not(.is-curtain) .explainer-node{opacity:1;transform:none}
}
@media (max-width:760px){
  .explainer{margin-top:48px}
  .explainer-caption{flex-wrap:wrap;gap:4px 16px;margin-bottom:14px}
  .explainer-caption>span{white-space:nowrap}
  .explainer-controls{gap:8px;padding:22px 8px 6px}
  .explainer-time{display:none}
  .explainer-start{width:60px;height:60px;margin:-30px 0 0 -30px}
}
@media (prefers-reduced-motion:reduce){.explainer-start,.explainer-controls{transition:none}}