/* Services hero: pick a service, see its video. Videos are shown whole (contain)
   over a blurred copy of their own poster, so nothing is ever cropped. */
.svc-hero h1 { font-size: clamp(2.7rem, 4.8vw, 4.9rem); text-wrap: balance; }
.svc-hero .svc-hint { max-width: 520px; margin: 26px 0 0; color: var(--muted); font-size: clamp(.95rem, 1.15vw, 1.08rem); font-weight: 300; line-height: 1.7; }
.svc-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.svc-pill { min-height: 42px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.02); color: var(--muted); font: inherit; font-size: 11px; font-weight: 500; cursor: pointer; transition: color .25s ease, border-color .25s ease, background .25s ease; }
.svc-pill:hover, .svc-pill:focus-visible { border-color: rgba(87,230,209,.5); color: #fff; }
.svc-pill[aria-selected="true"] { border-color: var(--aqua); background: rgba(87,230,209,.1); color: #fff; }

/* The slot keeps a fixed height so the page never jumps; the stage inside it
   reshapes to each video's own proportions, cut corners included. */
.svc-slot { position: relative; display: grid; place-items: center; align-self: center; height: min(76vh, 720px); }
.svc-hero .svc-stage { min-height: 0; align-self: auto; width: 100%; height: 100%; background: #040b18; transition: width .6s cubic-bezier(.2,.8,.2,1), height .6s cubic-bezier(.2,.8,.2,1); }
.svc-blur { display: none; position: absolute; inset: -40px; background-position: center; background-size: cover; filter: blur(28px) brightness(.5) saturate(1.1); transition: background-image .4s ease; }
.svc-video { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 1; transition: opacity .3s ease; }
.svc-video.is-fading { opacity: 0; }
.svc-stage::after { z-index: 2; }
.svc-more { position: absolute; z-index: 3; right: 28px; bottom: 26px; left: 28px; color: rgba(255,255,255,.85); font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; transition: color .25s ease; }
.svc-more:hover { color: var(--aqua); }
.svc-progress { position: absolute; z-index: 3; top: 0; left: 0; height: 2px; width: 0; background: var(--aqua); opacity: .8; }
.svc-progress.is-running { animation: svcProgress var(--svc-step, 7s) linear forwards; }
@keyframes svcProgress { from { width: 0; } to { width: 100%; } }

@media (max-width: 1000px) { .svc-slot { height: min(70vh, 640px); } }
@media (max-width: 700px) {
  .svc-slot { height: min(64vh, 520px); }
  .svc-pills { gap: 8px; }
  .svc-pill { min-height: 38px; padding: 0 14px; font-size: 10px; }
  .svc-more { right: 18px; bottom: 18px; left: 18px; }
}

/* Keep the layout fixed whatever video is showing: the columns never resize, so the headline never re-wraps */
.svc-hero.page-hero-split { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.svc-hero .svc-slot { width: 100%; min-width: 0; }
.svc-hero .svc-stage { max-width: 100%; }
.svc-hero h1 { text-wrap: wrap; }
@media (max-width: 1000px) { .svc-hero.page-hero-split { grid-template-columns: minmax(0, 1fr); } }