/* Cinematic Fullscreen Hero 0.2.1 */
.cmh-stage{position:relative;left:50%;transform:translateX(-50%);width:100vw;width:100dvw;max-width:none!important;margin:0!important;padding:0!important;isolation:isolate;background:#090a0d;color:#f4f0e8}
.cmh-stage.cmh-effect-cinematic{height:100svh}
.cmh-stage.cmh-effect-subtle,.cmh-stage.cmh-effect-none{height:100svh}
.cmh-hero{position:sticky;top:0;display:flex;flex-direction:column;height:100svh;width:100%;min-height:480px;isolation:isolate;overflow:hidden;background:#090a0d;color:#f4f0e8}
.cmh-photo,.cmh-shade,.cmh-transition{position:absolute;inset:0;pointer-events:none}
.cmh-photo{z-index:-2;transform:scale(1.09);transform-origin:50% 50%;will-change:transform,filter}
.cmh-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.cmh-placeholder{background:radial-gradient(circle at 65% 40%,#444851,#090a0d 75%)}
.cmh-shade{z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.17) 80%),linear-gradient(0deg,rgba(0,0,0,.55),transparent 50%)}
.cmh-transition{z-index:3;background:#0b0c0f;opacity:0;visibility:hidden}
.cmh-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(20px,3vw,46px) clamp(20px,5vw,88px);width:100%;z-index:4}
.cmh-nav a{color:#fff!important;text-decoration:none!important}
.cmh-brand{display:inline-flex;gap:clamp(10px,1.4vw,20px);align-items:center;min-width:0;font-weight:650;letter-spacing:.16em;font-size:clamp(.72rem,.9vw,.94rem);line-height:1.4}
.cmh-logo{display:block;width:auto;max-width:clamp(42px,7vw,100px);height:auto;max-height:64px;object-fit:contain}
.cmh-nav nav{display:flex;justify-content:flex-end;align-items:center;gap:clamp(12px,2vw,34px);flex-wrap:wrap}
.cmh-nav nav a{font-size:.7rem;letter-spacing:.15em;border-bottom:1px solid transparent;padding-bottom:7px;white-space:nowrap}
.cmh-nav nav a:hover,.cmh-nav nav a:focus-visible{border-color:#f4f0e8}
.cmh-content{width:min(1180px,calc(100% - 48px));margin:auto clamp(24px,8vw,150px);padding:6vh 0;z-index:2;transform-origin:left center;will-change:transform,opacity}
.cmh-eyebrow{color:#e0c5a8;font-size:.75rem;letter-spacing:.23em}
.cmh-content h1{color:#fff;font-weight:300;letter-spacing:-.055em;line-height:.98;font-size:clamp(3.1rem,9.2vw,10rem);max-width:1100px;margin:25px 0;overflow-wrap:break-word}
.cmh-subtitle{max-width:640px;font-size:clamp(1rem,1.5vw,1.4rem);color:#e7e3dd}
.cmh-scroll{position:absolute;bottom:clamp(24px,5vh,65px);left:clamp(24px,8vw,150px);display:flex;gap:24px;align-items:center;color:#fff!important;text-decoration:none!important;font-size:.66rem;letter-spacing:.25em;z-index:4;transition:opacity .3s ease}
.cmh-scroll span:last-child{font-size:1.6rem}
.cmh-stage a:focus-visible{outline:2px solid #f4f0e8;outline-offset:5px}
@media(max-width:700px){.cmh-nav{align-items:flex-start;gap:14px;flex-wrap:wrap}.cmh-nav nav{gap:12px;justify-content:flex-start}.cmh-nav nav a{font-size:.62rem}.cmh-content{width:auto;margin:auto 6vw;padding:7vh 0}.cmh-scroll{left:6vw}.cmh-logo{max-height:48px}.cmh-brand{letter-spacing:.1em}}
@media(prefers-reduced-motion:reduce){.cmh-stage.cmh-effect-cinematic{height:100svh}.cmh-photo,.cmh-content{will-change:auto;transform:none!important;opacity:1!important}.cmh-transition{visibility:hidden!important;opacity:0!important}}

/* 0.2.1: continuous hero-to-collection handover, no blackout interval. */
.cmh-stage.cmh-effect-cinematic .cmh-hero{position:relative;top:auto}
.cmh-stage.cmh-effect-cinematic .cmh-transition{display:none!important}

/* 0.2.2: banner is full width already, avoid 100vw scrollbar overflow.
   The extra 30vh supplies scroll distance for the pinned reveal. */
.cmh-stage{width:100%;max-width:100%!important;left:auto;transform:none;box-sizing:border-box;overflow-x:clip}
.cmh-stage.cmh-effect-cinematic{height:130svh}
.cmh-stage.cmh-effect-cinematic .cmh-hero{position:sticky;top:0;height:100svh}
@media(prefers-reduced-motion:reduce){.cmh-stage.cmh-effect-cinematic{height:100svh}.cmh-stage.cmh-effect-cinematic .cmh-hero{position:relative;top:auto}}

/* v0.2.3: two full viewport-heights of pinned scrolling, with overlapping reveal phases. */
.cmh-stage.cmh-effect-cinematic{
  height:300svh;
  margin-bottom:-18svh!important;
  background:transparent;
  isolation:auto;
  overflow:visible;
  position:relative;
  z-index:1;
}
.cmh-stage.cmh-effect-cinematic .cmh-hero{
  height:100svh;
  position:sticky;
  top:0;
  background:transparent;
  isolation:isolate;
}
.cmh-stage.cmh-effect-cinematic .cmh-photo{transform:scale(1.04);opacity:1}
.cmh-stage.cmh-effect-cinematic .cmh-transition{display:none!important}
.cmh-stage.cmh-effect-cinematic .cmh-shade{z-index:-1}
@media(prefers-reduced-motion:reduce){
 .cmh-stage.cmh-effect-cinematic{height:100svh;margin-bottom:0!important}
 .cmh-stage.cmh-effect-cinematic .cmh-hero{position:relative;top:auto;background:#090a0d}
}

/* 0.2.4: Allow the following section to rise into the last viewport
   while the fading, pinned hero is still occupying the viewport.
   300svh section, -100svh overlap => ~200svh of scroll travel. */
.cmh-stage.cmh-effect-cinematic{margin-bottom:-100svh!important}
@media(prefers-reduced-motion:reduce){.cmh-stage.cmh-effect-cinematic{margin-bottom:0!important}}

/* 0.2.5: ensure the whole hero, including its dark shade, fades away
   during the overlapping handover to the following module. */
.cmh-stage.cmh-effect-cinematic .cmh-hero{will-change:opacity}
@media(prefers-reduced-motion:reduce){.cmh-stage.cmh-effect-cinematic .cmh-hero{opacity:1!important;will-change:auto}}