/* Homepage hero adaptation. The existing service pages retain their styling. */
.omni-video-home { font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.liquid-glass {
  background:rgba(0,0,0,.65); background-blend-mode:luminosity;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  border:none; box-shadow:inset 0 1px 1px rgba(255,255,255,.1);
  position:relative; overflow:hidden;
}
.liquid-glass::before {
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.4px;
  background:linear-gradient(180deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.1) 20%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,.1) 80%,rgba(255,255,255,.3) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.omni-video-home header.nav {
  top:24px; left:24px; right:24px; padding:8px 16px; gap:16px;
  background:rgba(246,244,241,.96); background-blend-mode:normal; border:1px solid var(--omni-line); border-radius:12px;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  box-shadow:var(--shadow-1); overflow:visible;
}
.omni-video-home header.nav.scrolled { background:var(--omni-canvas); }
.omni-video-home header.nav::after { display:none; }
/* Original navy/gold artwork sits directly on the light navigation surface. */
.omni-video-home .nav-logo { display:flex; align-items:center; min-height:44px; background:transparent; padding:6px 0; border-radius:0; }
.omni-video-home .nav-logo img { height:auto; width:180px; max-width:42vw; }
.omni-video-home .nav-links { gap:32px; }
.omni-video-home .nav-links a { color:var(--omni-navy); font-size:14px; font-weight:400; }
.omni-video-home .nav-links a:hover,.omni-video-home .nav-links a[aria-current] { color:var(--omni-navy-deep); }
.omni-video-home .nav-links a::after { background:var(--omni-gold-text); }
.omni-video-home .nav-actions .btn { display:inline-flex; min-height:44px; background:var(--omni-navy); color:#fff; padding:8px 24px; border:0; border-radius:8px; font-size:14px; font-weight:500; box-shadow:none; }
.omni-video-home .nav-actions .btn:hover { background:var(--omni-navy-deep); transform:none; }
.omni-video-home .hamburger span { background:var(--omni-navy); }
.omni-video-home .hero { text-align:left; scroll-margin-top:0; }
.omni-hero-stage { position:relative; isolation:isolate; display:flex; align-items:flex-end; min-height:100vh; min-height:100svh; padding:160px 24px 48px; background:#000; color:#fff; }
.omni-hero-video { position:absolute; inset:0; z-index:-1; display:block; width:100%; height:100%; object-fit:cover; }
.omni-hero-grid { width:100%; }
.omni-hero-copy { min-width:0; }
.hero h1.omni-hero-heading { color:#fff; font-family:'Inter',sans-serif; font-size:36px; font-weight:400; line-height:1.1; letter-spacing:-.04em; margin:0 0 16px; text-align:left; }
.omni-heading-line { display:block; }
.omni-hero-char { display:inline-block; }
.omni-hero-sub { font-size:16px; line-height:1.55; color:#d1d5db; margin:0 0 20px; max-width:660px; }
.omni-hero-actions { display:flex; flex-wrap:wrap; gap:16px; }
.omni-hero-button { display:inline-flex; align-items:center; justify-content:center; padding:12px 32px; border-radius:8px; text-decoration:none; font-size:16px; font-weight:500; line-height:1.5; transition:background .2s,color .2s; }
.omni-hero-primary { background:#fff; color:#000; }
.omni-hero-primary:hover { background:#f3f4f6; }
.omni-hero-secondary { color:#fff; border:1px solid rgba(255,255,255,.2); }
.omni-hero-secondary:hover { background:#fff; color:#000; }
.omni-hero-trust { color:#d1d5db; font-size:14px; margin:16px 0 0; }
.omni-hero-tag-wrap { display:flex; justify-content:flex-start; align-items:flex-end; margin-top:32px; }
.omni-hero-tag { border:1px solid rgba(255,255,255,.2); padding:12px 24px; border-radius:12px; font-size:18px; font-weight:400; line-height:1.5; margin:0; }
.omni-video-home .hero-support { padding-top:32px; }
.omni-hero-button:focus-visible { outline:2px solid #fff; outline-offset:4px; }
@keyframes omniFadeIn { from { opacity:0; } to { opacity:1; } }
.omni-motion-ready .omni-fade { animation:omniFadeIn 1000ms both; }
.omni-motion-ready .omni-fade-sub { animation-delay:800ms; }
.omni-motion-ready .omni-fade-actions { animation-delay:1200ms; }
.omni-motion-ready .omni-fade-tag { animation-delay:1400ms; }
@media(min-width:768px) {
  .omni-video-home header.nav { left:48px; right:48px; }
  .omni-hero-stage { padding-left:48px; padding-right:48px; }
  .hero h1.omni-hero-heading { font-size:48px; }
  .omni-hero-sub { font-size:18px; }
  .omni-hero-tag { font-size:20px; }
}
@media(min-width:1024px) {
  .omni-video-home header.nav { left:64px; right:64px; }
  .omni-hero-stage { padding:160px 64px 64px; }
  .omni-hero-grid { display:grid; grid-template-columns:1fr 1fr; align-items:end; }
  .hero h1.omni-hero-heading { font-size:60px; }
  .omni-hero-tag-wrap { justify-content:flex-end; margin-top:0; }
  .omni-hero-tag { font-size:24px; }
}
@media(min-width:1280px) { .hero h1.omni-hero-heading { font-size:72px; } }
@media(max-width:767px) {
  .omni-hero-stage { padding-bottom:100px; }
  .omni-video-home .nav-actions { gap:4px; }
  .omni-video-home .nav-actions .btn { padding:8px 12px; }
  .omni-video-home .nav-logo img { height:auto; width:140px; }
}
@media(max-width:374px) {
  .omni-video-home header.nav { gap:4px; padding:8px; }
  .hero h1.omni-hero-heading { font-size:32px; }
}
@media(prefers-reduced-motion:reduce) {
  .omni-hero-char,.omni-motion-ready .omni-fade { animation:none!important; opacity:1!important; transform:none!important; }
}

/* ============================================================
   Audit fixes — hero legibility, responsive poster, video control
============================================================ */

/* Poster moves out of the video's poster attribute so it can be served
   per-breakpoint and AVIF-first. Plain url() first for anything without
   image-set(); the image-set rules below override where supported. */
.omni-hero-stage {
  background-color: #000;
  background-image: url('../img/hero-mclaren-mobile.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
@supports (background-image: image-set(url('x.webp') type('image/webp'))) {
  .omni-hero-stage {
    background-image: image-set(
      url('../img/hero-mclaren-mobile.avif') type('image/avif'),
      url('../img/hero-mclaren-mobile.webp') type('image/webp'));
  }
}

/* Scrim: sits above the video (same negative layer, later in tree order)
   and below the copy. Only over the lower band where the text sits, so the
   upper two-thirds of the footage stays undimmed. */
.omni-hero-stage::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(0,0,0,.76) 0%,
    rgba(0,0,0,.74) 46%,
    rgba(0,0,0,.68) 62%,
    rgba(0,0,0,.30) 78%,
    rgba(0,0,0,0)   92%);
}

/* Video pause control (WCAG 2.2.2). Revealed by JS; without JS the video
   never starts, so a dead control is never shown. */
.omni-hero-mediatoggle {
  position: absolute; top: 104px; right: 24px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border-radius: 10px; cursor: pointer;
  color: #fff; background: rgba(0,0,0,.65);
}
.omni-hero-mediatoggle[hidden] { display: none; }
.omni-hero-mediatoggle svg { width: 18px; height: 18px; display: block; }
.omni-hero-mediatoggle:hover { background: rgba(0,0,0,.78); }
.omni-hero-mediatoggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (min-width: 768px) {
  .omni-hero-stage {
    background-image: url('../img/hero-mclaren.webp');
  }
  .omni-hero-mediatoggle { right: 48px; }
}
@supports (background-image: image-set(url('x.webp') type('image/webp'))) {
  @media (min-width: 768px) {
    .omni-hero-stage {
      background-image: image-set(
        url('../img/hero-mclaren.avif') type('image/avif'),
        url('../img/hero-mclaren.webp') type('image/webp'));
    }
  }
}
@media (min-width: 1024px) {
  .omni-hero-mediatoggle { right: 64px; }
}
/* Taller copy block on narrow screens needs the scrim to reach higher. */
@media (max-width: 767px) {
  .omni-hero-stage::after {
    background: linear-gradient(to top,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.76) 62%,
      rgba(0,0,0,.70) 76%,
      rgba(0,0,0,.32) 88%,
      rgba(0,0,0,0)   97%);
  }
}