/* Contact (also imported by hardware-requirements.css): video hero + "Awaits you" section.
   Measurements follow the original Brizy page at desktop (>=992), tablet (768-991) and phone (<768). */

/* ---------- Video hero ---------- */
.video-hero { position: relative; overflow: hidden; background: #000; color: #fff; text-align: center; padding: 60px 0 90px; }
/* Cover the section with a 16:9 YouTube iframe, centred like Brizy's background video. */
.video-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.video-bg video { width: 100%; height: 100%; object-fit: cover; }
.vh-inner { position: relative; width: 774px; max-width: calc(100% - 30px); margin: 0 auto; }
.video-hero img { margin: 0 auto; height: auto; }
.video-hero .icon { width: 46px; transform: scale(1.77); margin-bottom: 21px; }
.video-hero .wordmark { width: 495px; margin-bottom: 19px; }
.video-hero .robot { width: 248px; }
.video-hero .wordmark + .pill, .video-hero .robot + .pill { margin-top: 74px; }
.pill {
  background: var(--orange); color: #181818;
  font: 700 32px/41.6px var(--font-head); letter-spacing: -1.5px;
  padding: 15px; margin: 0 5px; border-radius: 100px 0;
}
.pill .brand-white { color: #fff; }
.pill-sub { margin: 15px 0 0; font: 700 28px/39.2px var(--font-head); letter-spacing: -1.5px; }
.pill-sub span { background: rgb(26, 29, 33); color: rgb(209, 210, 211); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- "STASISM Awaits you!" ---------- */
.awaits { background: var(--bg-alt); padding: 125px 0 75px; text-align: center; }
.aw-inner { width: 90%; max-width: 1290px; margin: 0 auto; }
.awaits h2 { font-size: 46px; line-height: 59.8px; color: #000; margin: 0 0 20px; }
.awaits h2 .highlight { background: rgb(242, 178, 18); }
.awaits .robot-small { width: 24%; aspect-ratio: 310 / 282; object-fit: cover; margin: 0 auto 10px; }
.contact-box { background: #000; color: #fff; padding: 15px 15px 20px; }
.contact-box h3 { color: #fff; font-size: 28px; line-height: 39.2px; margin: 0 0 20px; }
.contact-box p { margin: 0 0 12px; }
.contact-box a { color: #fff; }
.contact-box p a { text-decoration: none; }
.awaits .aw-inner > :last-child { margin-bottom: 20px; }

@media (max-width: 991px) {
  .video-hero { padding: 60px 0 110px; }
  .vh-inner { width: 74%; }
  .video-hero .icon { width: 34.5px; transform: scale(1.78); margin-bottom: 19px; }
  .video-hero .wordmark { width: 364px; margin-bottom: 20px; }
  .video-hero .robot { width: 182px; }
  .video-hero .wordmark + .pill, .video-hero .robot + .pill { margin-top: 23px; }
  .pill { font-size: 25px; line-height: 32.5px; padding: 15px; margin: 0; }
  .pill-sub { margin-top: 10px; font-size: 27px; line-height: 35.1px; letter-spacing: -1px; }
  .awaits { padding: 99px 0 50px; }
  .awaits h2 { font-size: 38px; line-height: 45.6px; letter-spacing: -1px; }
  .contact-box h3 { font-size: 27px; line-height: 35.1px; letter-spacing: -1px; }
  .contact-box p, .awaits p { font-size: 15px; line-height: 24px; }
}
/* The original swaps the video for a still image on tablets. */
@media (min-width: 768px) and (max-width: 991px) {
  .video-hero { background: #000 url(/assets/img/2023/04/AppBg.jpg) center / cover no-repeat; }
  .video-bg { display: none; }
}
@media (max-width: 767px) {
  .video-hero { padding: 25px 0; }
  .vh-inner { width: 88%; max-width: none; }
  .video-hero .icon { width: 20.3px; transform: scale(1.77); margin-bottom: 21px; }
  .video-hero .wordmark { width: 220px; margin-bottom: 19px; }
  .video-hero .robot { width: 110px; }
  .video-hero .wordmark + .pill, .video-hero .robot + .pill { margin-top: 30px; }
  .pill { font-size: 19px; line-height: 24.7px; padding: 10px; }
  .pill-sub { margin-top: 20px; font-size: 22px; line-height: 28.6px; letter-spacing: -.5px; }
  .awaits { padding: 35px 0 25px; }
  .aw-inner { width: 88%; }
  .awaits h2 { font-size: 36px; line-height: 46.8px; }
  .contact-box h3 { font-size: 22px; line-height: 28.6px; letter-spacing: -.5px; }
  .awaits .robot-small { margin-bottom: 20px; }
  .awaits .aw-inner > :last-child { margin-bottom: 10px; }
}