/* Full-bleed scene, including the navigation area. */
.has-scene-hero .site-header {
  position:absolute;
  inset:0 0 auto;
  background:linear-gradient(180deg,#070d18ce,#070d184a);
  border-bottom:1px solid #d9beea13;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.has-scene-hero .hero {
  height:clamp(630px,34vw,780px);
  padding-top:84px;
  background:#101925;
  overflow:clip;
}
.has-scene-hero .hero .hero-art {
  inset:0;
  width:100%;
  height:100%;
  background-image:url('/assets/hero-panorama.webp');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  mask-image:none;
  -webkit-mask-image:none;
}
.page-products .hero .hero-art {background-image:url('/assets/hero-products.webp')}
.page-our-story .hero .hero-art {background-image:url('/assets/hero-about.webp')}
.page-lookbook .hero .hero-art {background-image:url('/assets/hero-lookbook.webp')}
.page-contact .hero .hero-art {background-image:url('/assets/hero-contact.webp')}
.page-videos .hero .hero-art {background-image:url('/assets/hero-videos.webp')}
.has-scene-hero .hero:after {
  background:linear-gradient(90deg,#08111bae 0%,#08111b7d 30%,#08111b20 56%,transparent 76%),linear-gradient(0deg,#101925b8,transparent 17%);
  z-index:0;
}
.has-scene-hero .hero .hero-inner {z-index:2}
.has-scene-hero .hero-copy {padding-bottom:58px}
.has-scene-hero .hero .wall-note {display:none}
.hero-cut {
  position:absolute;
  inset:auto 0 -1px;
  height:66px;
  pointer-events:none;
  z-index:4;
}
.hero-cut svg {display:block;width:100%;height:100%;overflow:visible}
@media(min-width:2200px) {
  .has-scene-hero .hero .hero-art {background-position:center 34%}
}
@media(max-width:900px) {
  .has-scene-hero .hero {height:600px;padding-top:74px}
  .has-scene-hero .hero .hero-art {background-position:62% center}
  .has-scene-hero .hero:after {background:linear-gradient(90deg,#08111bd6,#08111b92 38%,#08111b26 70%,transparent),linear-gradient(0deg,#101925a8,transparent 20%)}
  .page-products .hero .hero-art {background-position:70% center}
  .page-our-story .hero .hero-art {background-position:72% center}
  .page-lookbook .hero .hero-art {background-position:70% center}
  .page-videos .hero .hero-art {background-position:70% center}
  .page-contact .hero .hero-art {background-position:68% center}
}
@media(max-width:600px) {
  .has-scene-hero .hero {height:660px;padding-top:68px}
  .has-scene-hero .hero .hero-art {background-position:76% center}
  .has-scene-hero .hero:after {background:linear-gradient(180deg,#07111cb3 0%,#07111c80 33%,#07111c20 66%,#101925b3 100%),linear-gradient(90deg,#07111c72,transparent 85%)}
  .has-scene-hero .hero-copy {padding-top:35px;padding-bottom:36px}
  .has-scene-hero .hero-description {text-shadow:0 1px 5px #000,0 2px 18px #000}
  .has-scene-hero .contact-hero {height:565px}
  .page-products .hero .hero-art {background-position:77% center}
  .page-our-story .hero .hero-art {background-position:78% center}
  .page-lookbook .hero .hero-art {background-position:76% center}
  .page-videos .hero .hero-art {background-position:76% center}
  .page-contact .hero .hero-art {background-position:74% center}
  .hero-cut {height:43px}
}

/* The scene itself ends at the torn silhouette; the page background continues below. */
.has-scene-hero .hero{--cut-height:66px;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut-height) * 0.736111 + 1px),99.625% calc(100% - var(--cut-height) * 0.736111 + 1px),99.3125% calc(100% - var(--cut-height) * 0.736111 + 1px),99% calc(100% - var(--cut-height) * 0.722222 + 1px),96.875% calc(100% - var(--cut-height) * 0.736111 + 1px),93.9375% calc(100% - var(--cut-height) * 0.736111 + 1px),93.4375% calc(100% - var(--cut-height) * 0.736111 + 1px),92.125% calc(100% - var(--cut-height) * 0.722222 + 1px),91.375% calc(100% - var(--cut-height) * 0.736111 + 1px),90.875% calc(100% - var(--cut-height) * 0.736111 + 1px),88.75% calc(100% - var(--cut-height) * 0.652778 + 1px),85.8125% calc(100% - var(--cut-height) * 0.638889 + 1px),85.625% calc(100% - var(--cut-height) * 0.722222 + 1px),84.875% calc(100% - var(--cut-height) * 0.736111 + 1px),84.125% calc(100% - var(--cut-height) * 0.722222 + 1px),82.8125% calc(100% - var(--cut-height) * 0.680556 + 1px),82.3125% calc(100% - var(--cut-height) * 0.722222 + 1px),80.1875% calc(100% - var(--cut-height) * 0.638889 + 1px),80% calc(100% - var(--cut-height) * 0.638889 + 1px),79.6875% calc(100% - var(--cut-height) * 0.722222 + 1px),79.1875% calc(100% - var(--cut-height) * 0.736111 + 1px),79% calc(100% - var(--cut-height) * 0.666667 + 1px),77.6875% calc(100% - var(--cut-height) * 0.625000 + 1px),75.5625% calc(100% - var(--cut-height) * 0.708333 + 1px),74.25% calc(100% - var(--cut-height) * 0.694444 + 1px),72.9375% calc(100% - var(--cut-height) * 0.736111 + 1px),70.8125% calc(100% - var(--cut-height) * 0.736111 + 1px),70.0625% calc(100% - var(--cut-height) * 0.736111 + 1px),69.5625% calc(100% - var(--cut-height) * 0.736111 + 1px),69.375% calc(100% - var(--cut-height) * 0.736111 + 1px),69.0625% calc(100% - var(--cut-height) * 0.652778 + 1px),68.3125% calc(100% - var(--cut-height) * 0.611111 + 1px),68% calc(100% - var(--cut-height) * 0.611111 + 1px),65.875% calc(100% - var(--cut-height) * 0.611111 + 1px),65.125% calc(100% - var(--cut-height) * 0.527778 + 1px),64.9375% calc(100% - var(--cut-height) * 0.569444 + 1px),64.4375% calc(100% - var(--cut-height) * 0.486111 + 1px),62.3125% calc(100% - var(--cut-height) * 0.472222 + 1px),60.1875% calc(100% - var(--cut-height) * 0.388889 + 1px),58.0625% calc(100% - var(--cut-height) * 0.402778 + 1px),55.9375% calc(100% - var(--cut-height) * 0.444444 + 1px),55.75% calc(100% - var(--cut-height) * 0.361111 + 1px),54.4375% calc(100% - var(--cut-height) * 0.444444 + 1px),53.9375% calc(100% - var(--cut-height) * 0.430556 + 1px),53.625% calc(100% - var(--cut-height) * 0.513889 + 1px),53.125% calc(100% - var(--cut-height) * 0.527778 + 1px),51% calc(100% - var(--cut-height) * 0.611111 + 1px),48.0625% calc(100% - var(--cut-height) * 0.569444 + 1px),47.3125% calc(100% - var(--cut-height) * 0.611111 + 1px),46.5625% calc(100% - var(--cut-height) * 0.569444 + 1px),46.0625% calc(100% - var(--cut-height) * 0.652778 + 1px),45.75% calc(100% - var(--cut-height) * 0.736111 + 1px),44.4375% calc(100% - var(--cut-height) * 0.722222 + 1px),44.125% calc(100% - var(--cut-height) * 0.708333 + 1px),43.8125% calc(100% - var(--cut-height) * 0.722222 + 1px),40.875% calc(100% - var(--cut-height) * 0.736111 + 1px),40.125% calc(100% - var(--cut-height) * 0.736111 + 1px),39.9375% calc(100% - var(--cut-height) * 0.736111 + 1px),39.4375% calc(100% - var(--cut-height) * 0.722222 + 1px),39.25% calc(100% - var(--cut-height) * 0.708333 + 1px),38.5% calc(100% - var(--cut-height) * 0.694444 + 1px),35.5625% calc(100% - var(--cut-height) * 0.652778 + 1px),35.25% calc(100% - var(--cut-height) * 0.736111 + 1px),32.3125% calc(100% - var(--cut-height) * 0.722222 + 1px),31.5625% calc(100% - var(--cut-height) * 0.736111 + 1px),31.0625% calc(100% - var(--cut-height) * 0.736111 + 1px),28.9375% calc(100% - var(--cut-height) * 0.736111 + 1px),28.4375% calc(100% - var(--cut-height) * 0.736111 + 1px),25.5% calc(100% - var(--cut-height) * 0.694444 + 1px),23.375% calc(100% - var(--cut-height) * 0.680556 + 1px),22.625% calc(100% - var(--cut-height) * 0.638889 + 1px),21.875% calc(100% - var(--cut-height) * 0.638889 + 1px),18.9375% calc(100% - var(--cut-height) * 0.638889 + 1px),16.8125% calc(100% - var(--cut-height) * 0.652778 + 1px),16.3125% calc(100% - var(--cut-height) * 0.666667 + 1px),14.1875% calc(100% - var(--cut-height) * 0.680556 + 1px),14% calc(100% - var(--cut-height) * 0.722222 + 1px),13.25% calc(100% - var(--cut-height) * 0.736111 + 1px),11.125% calc(100% - var(--cut-height) * 0.722222 + 1px),9.8125% calc(100% - var(--cut-height) * 0.708333 + 1px),9.3125% calc(100% - var(--cut-height) * 0.666667 + 1px),6.375% calc(100% - var(--cut-height) * 0.652778 + 1px),4.25% calc(100% - var(--cut-height) * 0.652778 + 1px),2.125% calc(100% - var(--cut-height) * 0.638889 + 1px),0% calc(100% - var(--cut-height) * 0.555556 + 1px))}
@media(max-width:600px){.has-scene-hero .hero{--cut-height:43px}}

/* Products need a shorter mobile stage than the narrative page heroes. */
@media(max-width:600px){
  .has-scene-hero .hero.catalogue-hero{
    height:520px;
    min-height:520px;
    padding-top:68px;
  }
  .has-scene-hero .hero.catalogue-hero .hero-inner{
    height:100%;
    min-height:0;
  }
  .has-scene-hero .hero.catalogue-hero .hero-copy{
    padding-top:17px;
    padding-bottom:19px;
  }
}

/* Phones see only a slice of the panorama: serve that crop instead of the full 2172px image. */
@media(max-width:600px){
  .page-home .hero .hero-art{background-image:url('/assets/hero-panorama-m.webp');background-position:50% 50%}
  .page-products .hero .hero-art{background-image:url('/assets/hero-products-m.webp');background-position:50% 50%}
  .page-our-story .hero .hero-art{background-image:url('/assets/hero-about-m.webp');background-position:50% 50%}
  .page-lookbook .hero .hero-art{background-image:url('/assets/hero-lookbook-m.webp');background-position:50% 50%}
  .page-contact .hero .hero-art{background-image:url('/assets/hero-contact-m.webp');background-position:50% 50%}
  .page-videos .hero .hero-art{background-image:url('/assets/hero-videos-m.webp');background-position:50% 50%}
}