/* Timeless Tastes — video hero (layered over template v7). Replaced the 3D showroom on 2026-10-12;
   the showroom files stay beside this one as the backup (hero-previous.html, hero-previous.webp). */

.hero--custom{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  background:#101315;
  border-top:0;
  padding-block:0;
  overflow:clip;
}
.hero--custom .hero__text{
  position:relative;
  z-index:6;
  /* visible with the first frame (it is the LCP element); is-ready only lifts it into place */
  transform:translateY(14px);
  transition:transform 1s cubic-bezier(.22,1,.36,1) .45s;
  padding-block:0 clamp(56px,9vh,96px);
  max-width:min(92vw,620px);
  margin-inline:0;
}
.hero--custom .hero__local{color:#c9d6d5}
.hero--custom .display--hero{
  color:#F7FAFA;
  font-size:clamp(2.2rem,5.2vw,3.6rem);
  line-height:1.04;
  text-wrap:balance;
}
.hero--custom .lead{color:#d4dcdb;max-width:44ch}
.hero--custom .btn--solid{background:#98E2E1;color:#101315}
.hero--custom .btn--solid:hover{background:#b5ecea}
.hero--custom .link{color:#98E2E1}
.hero--custom .link::after{background:#98E2E1}

/* the footage: full bleed, the poster frame underneath so nothing flashes */
.hero__video{
  position:absolute;inset:0;z-index:1;overflow:hidden;
  background:#101315 url(hero-poster.webp) center / cover no-repeat;
}
.hero__vid{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;object-fit:cover;object-position:50% 50%;
}
@media (min-width:900px){
  /* keep the watch right of the headline column */
  .hero__vid{object-position:62% 50%}
}
@media (max-width:767.98px){
  /* phones: the portrait poster (cut from the clip's wide shot) shows while the lighter
     encode loads, and stays if autoplay is refused */
  .hero__video{background-image:url(hero-poster-m.webp);background-position:50% 35%}
}
/* reduced motion, or play() refused (iOS Low Power Mode): poster only, no play button */
.hero--custom.is-still .hero__vid{display:none}
.hero__vid::-webkit-media-controls{display:none !important}
.hero__vid::-webkit-media-controls-start-playback-button{display:none !important;-webkit-appearance:none}
/* the client logo in the header: white over the footage, its own black once the nav is solid */
.nav:not(.is-stuck) .nav__logo img{filter:brightness(0) invert(1)}
/* the veil: the marble is bright, so the text corner and the nav strip go dark,
   the watch in the middle stays close to the footage */
.hero__veil{
  position:absolute;inset:0;pointer-events:none;z-index:3;
  background:
    linear-gradient(180deg, rgba(9,11,12,.62) 0%, rgba(9,11,12,.22) 22%, rgba(9,11,12,.12) 50%, rgba(9,11,12,.86) 100%),
    linear-gradient(90deg, rgba(9,11,12,.50) 0%, rgba(9,11,12,.28) 34%, rgba(9,11,12,0) 62%);
}
@media (max-width:767.98px){
  .hero__veil{background:linear-gradient(180deg, rgba(9,11,12,.55) 0%, rgba(9,11,12,.14) 16%, rgba(9,11,12,.22) 36%, rgba(9,11,12,.90) 100%)}
}

.hero--custom.is-ready .hero__text{transform:none}
@media (prefers-reduced-motion:reduce){.hero--custom .hero__text{transform:none;transition:none}}

/* nav over the footage: light until it sticks (unchanged from the showroom) */
.nav:not(.is-stuck) .wordmark{color:#F7FAFA}
.nav:not(.is-stuck) .nav__links a{color:#dde5e4}
.nav:not(.is-stuck) .nav__links a:hover,.nav:not(.is-stuck) .nav__links a[aria-current="page"]{color:#F7FAFA}
.nav:not(.is-stuck) .nav__links .btn--solid{background:#98E2E1;color:#101315}
.nav:not(.is-stuck) .nav__toggle span,.nav:not(.is-stuck) .nav__toggle span::before,.nav:not(.is-stuck) .nav__toggle span::after{background:#F7FAFA}