/* The home navigation floats over the complete, uncropped demo frame. */
body.home-video-page { padding-top: 0; --nav-h: 72px; }
.home-video-page .top {
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.18);
  transition: background-color .25s ease, backdrop-filter .25s ease;
}
.home-video-page .top.is-past-hero {
  background: rgba(25,29,30,.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.home-video-page .top-links { color: rgba(255,255,255,.94); }
.home-video-page .top-logo, .home-video-page .top-links, .home-video-page .lang {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.2));
}
.hero--video { isolation: isolate; background: #343b3e; }
.hero--video .hero-video {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: contain;
}
.hero--video::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(31,39,43,.68), rgba(31,39,43,.2) 18%, transparent 36%),
    linear-gradient(90deg, rgba(31,39,43,.48), rgba(31,39,43,.13) 44%, transparent 68%),
    linear-gradient(0deg, rgba(31,39,43,.48), transparent 48%);
}
.hero--video > .hero-copy {
  position: absolute; z-index: 2;
  top: auto; bottom: 11%; left: 8%;
  max-width: 50%; padding: 0; color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.2);
}
.hero--video h1 { font-size: clamp(30px, 4vw, 56px); line-height: 1.25; }
.hero--video .hero-sub { color: rgba(255,255,255,.94); font-size: clamp(14px,1.35vw,19px); }
.hero--video .btn-solid {
  min-height: 42px; margin-top: 24px; padding-inline: 26px;
  text-shadow: none; background: #2f7d43; border-color: #2f7d43;
}
.hero--video .btn-solid:hover { background: #276c39; border-color: #276c39; }
@media (max-width: 760px) {
  body.home-video-page { --nav-h: 60px; }
  .home-video-page .top { background: rgba(31,39,43,.94); }
  .hero--video {
    display: flex; flex-direction: column;
    padding-top: var(--nav-h); background: #1f272b;
  }
  .hero--video .hero-video { order: 0; flex: none; }
  /* Keep navigation, text and the award clear of the complete mobile video. */
  .hero--video > .hero-copy {
    position: relative; order: 1; inset: auto;
    width: 100%; max-width: none; padding: 24px max(24px, env(safe-area-inset-left)) 28px;
    background: #1f272b;
  }
  .hero--video::before { display: none; }
  .hero--video h1 { font-size: clamp(27px,7.2vw,38px); }
  .hero--video .hero-sub { font-size: 14px; margin-top: 12px; }
  .hero--video .btn-solid { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-video-page .top { transition: none; }
}

/* A quiet brand-footer credential, with the awarded product identified. */
.foot-design-award { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.foot-design-award img { width: 56px; height: auto; flex: 0 0 auto; }
.foot-design-award span { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.65); }

/* Keep media unobstructed; controls live with the copy, outside the picture. */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.hero--video .hero-actions .btn-solid { margin-top: 0; min-height: 44px; }
.hero-playback { color: #fff; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; padding: 10px 18px; min-height: 44px; font: inherit; font-size: 14px; cursor: pointer; background: rgba(31,39,43,.5); }
.hero-playback:focus-visible { outline: 2px solid white; outline-offset: 4px; }
@media (max-width: 760px) {
  .home-video-page .top { padding-top: env(safe-area-inset-top); }
  .hero--video { padding-top: calc(var(--nav-h) + env(safe-area-inset-top)); }
  .hero--video .hero-sub { line-height: 1.65; max-width: 38em; }
  .hero--video .hero-actions { margin-top: 20px; gap: 10px; }
  .hero--video .hero-actions .btn-solid { padding-inline: 22px; }
}

.hero-playback[hidden] { display: none; }

/* A compact white introduction beneath the complete mobile video. */
@media (max-width: 760px) {
  .hero--video { background: #fff; }
  .hero--video > .hero-copy {
    padding: 22px max(20px, env(safe-area-inset-left)) 24px;
    background: #fff; color: #171717; text-align: center; text-shadow: none;
  }
  .hero--video h1 { font-size: clamp(26px, 6.6vw, 32px); line-height: 1.25; text-wrap: balance; }
  .hero--video .hero-sub { margin: 8px auto 0; color: #686868; font-size: 13px; line-height: 1.6; text-wrap: balance; }
  .hero--video .hero-actions { justify-content: center; margin-top: 16px; }
  .hero--video .hero-actions .btn-solid { font-size: 13px; min-height: 44px; padding: 10px 22px; }
  .hero--video .hero-playback { color: #333; background: #fff; border-color: #aaa; font-size: 13px; }
  .hero--video .hero-playback:focus-visible { outline-color: #333; }
}