/* Home-only hero composition; other pages keep the shared master unchanged. */
@property --film-feather-left {
  syntax: '<length>';
  inherits: false;
  initial-value: 24px;
}
.hero .hero-content {
  display: grid;
  grid-template-columns: var(--editorial-columns);
  column-gap: var(--editorial-column-gap);
  align-items: start;
}
.hero #hero-title {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  font-size: clamp(64px, 6.7vw, 112px);
}
.hero .hero-details {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}
.hero .hero-film {
  position: relative;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: start;
  justify-self: end;
  width: 100%;
  min-width: 0;
  margin: 6% 0 0;
}
.hero .hero-film .video-stage {
  aspect-ratio: 33 / 20;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.hero .hero-film .film-ambient {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: blur(clamp(8px, 1.2vw, 18px));
  --media-mask-x: linear-gradient(to right, transparent, rgb(0 0 0 / .1) 4.5%, rgb(0 0 0 / .4) 9%, rgb(0 0 0 / .78) 13.5%, #000 18%, #000 90%, rgb(0 0 0 / .84) 92.5%, rgb(0 0 0 / .5) 95%, rgb(0 0 0 / .16) 97.5%, transparent);
  --media-mask-y: linear-gradient(to bottom, transparent, rgb(0 0 0 / .1) 5.5%, rgb(0 0 0 / .4) 11%, rgb(0 0 0 / .78) 16.5%, #000 22%, #000 78%, rgb(0 0 0 / .78) 83.5%, rgb(0 0 0 / .4) 89%, rgb(0 0 0 / .1) 94.5%, transparent);
  -webkit-mask-image: var(--media-mask-x), var(--media-mask-y);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-image: var(--media-mask-x), var(--media-mask-y);
  mask-repeat: no-repeat;
  mask-composite: intersect;
}
/* Blend the original image into the wider media field.
   The short lower fade keeps the native control row clear; Play is unmasked. */
.hero .hero-film .film-viewport {
  position: absolute;
  z-index: 1;
  left: 2%;
  top: 0;
  bottom: 0;
  width: 96%;
  height: 89.1%; /* 96% width at 16:9 inside the unchanged 33:20 stage. */
  aspect-ratio: 16 / 9;
  margin-block: auto;
  background: transparent;
}
/* Fade a matching backdrop over the edges. The native video and all its
   ancestors remain unmasked, so video frames use the normal rendering path. */
.hero .hero-film .film-edge {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  --film-feather-x: clamp(12px, 1.7vw, 24px);
  --film-feather-left: clamp(30px, 4vw, 60px);
  --film-feather-top: clamp(28px, 3.8vw, 56px);
  --film-feather-bottom: clamp(10px, 1.3vw, 20px);
  transition: --film-feather-left .24s ease;
  --film-mask-x: linear-gradient(to right,
    #000 0,
    rgb(0 0 0 / .84) calc(var(--film-feather-left) * .25),
    rgb(0 0 0 / .5) calc(var(--film-feather-left) * .5),
    rgb(0 0 0 / .16) calc(var(--film-feather-left) * .75),
    transparent var(--film-feather-left),
    transparent calc(100% - var(--film-feather-x)),
    rgb(0 0 0 / .16) calc(100% - var(--film-feather-x) * .75),
    rgb(0 0 0 / .5) calc(100% - var(--film-feather-x) * .5),
    rgb(0 0 0 / .84) calc(100% - var(--film-feather-x) * .25),
    #000 100%);
  --film-mask-y: linear-gradient(to bottom,
    #000 0,
    rgb(0 0 0 / .84) calc(var(--film-feather-top) * .25),
    rgb(0 0 0 / .5) calc(var(--film-feather-top) * .5),
    rgb(0 0 0 / .16) calc(var(--film-feather-top) * .75),
    transparent var(--film-feather-top),
    transparent calc(100% - var(--film-feather-bottom)),
    rgb(0 0 0 / .16) calc(100% - var(--film-feather-bottom) * .75),
    rgb(0 0 0 / .5) calc(100% - var(--film-feather-bottom) * .5),
    rgb(0 0 0 / .84) calc(100% - var(--film-feather-bottom) * .25),
    #000 100%);
  background: transparent;
  -webkit-mask-image: var(--film-mask-x), var(--film-mask-y);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-over;
  mask-image: var(--film-mask-x), var(--film-mask-y);
  mask-repeat: no-repeat;
  mask-composite: add;
}
.hero .hero-film .film-backdrop {
  position: absolute;
  isolation: isolate;
  background: var(--navy);
}
/* No CSS masks, filters or transforms on the player or its container. */
.hero .hero-film video {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  background: transparent;
}
/* Keep the native left-hand controls clear whenever the player is operated. */
@media (min-width: 1001px) {
  .hero .hero-film .video-stage:hover .film-edge,
  .hero .hero-film .video-stage:focus-within .film-edge {
    --film-feather-left: var(--film-feather-x);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-film .film-edge { transition: none; }
}
.hero .hero-film video:fullscreen {
  position: static;
  width: 100%;
  height: 100%;
  transform: none;
  -webkit-mask-image: none;
  mask-image: none;
  background: var(--navy);
}
.hero .hero-film video:-webkit-full-screen {
  position: static;
  width: 100%;
  height: 100%;
  transform: none;
  -webkit-mask-image: none;
  mask-image: none;
  background: var(--navy);
}
.hero .hero-film .film-play {
  z-index: 2;
  width: clamp(56px, 5.3vw, 78px);
  height: clamp(56px, 5.3vw, 78px);
}
@media (max-width: 1000px) {
  .hero .hero-content { grid-template-columns: minmax(0, 1fr); }
  .hero #hero-title { font-size: clamp(57px, 9.4vw, 86px); }
  .hero .hero-film {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    margin-top: 32px;
  }
  .hero .hero-details { grid-column: 1; grid-row: 3; }
  .hero .hero-film .video-stage { aspect-ratio: 16 / 9; }
  .hero .hero-film .film-viewport { height: 96%; }
  .hero .hero-film .film-ambient {
    --media-mask-x: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
    --media-mask-y: linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  }
  .hero .hero-film .film-edge {
    --film-feather-x: clamp(10px, 1.5vw, 15px);
    --film-feather-left: var(--film-feather-x);
    --film-feather-top: clamp(12px, 1.8vw, 18px);
    --film-feather-bottom: 6px;
    transition: none;
  }
}
@media (max-width: 480px) {
  .hero #hero-title { font-size: clamp(43px, 11.4vw, 56px); }
  .hero .hero-film { margin-top: 27px; }
  .hero .hero-film .film-play { width: 56px; height: 56px; }
}
@media (max-width: 350px) {
  .hero #hero-title { font-size: 41px; }
}

.company-section #contact .contact-action { color: #000000; }