/* Keep the page usable before JavaScript and when motion is reduced. */
.header{transition:box-shadow .3s ease,border-color .3s ease}
.header.is-scrolled{box-shadow:0 5px 24px rgba(23,24,22,.055)}
.hero-window,.scroll-label-story{display:none}
.hero-scroll .scroll-label-default,.hero-scroll .scroll-label-story{font-size:inherit}

@media(prefers-reduced-motion:no-preference){
  .window-story .hero-scene{
    height:calc(var(--stage-height,600px) + var(--reveal-distance,600px));
    background:#070a08;
  }
  .window-story .hero{
    position:sticky;top:var(--header-height,95px);
    height:clamp(540px,calc(100svh - var(--header-height,95px)),760px);
    background:#070a08;
  }
  .window-story .hero-image img{
    clip-path:inset(var(--window-top,16%) var(--window-right,9%) var(--window-bottom,16%) var(--window-left,66%));
    opacity:var(--light-opacity,0);
  }
  .window-story .hero-window{
    display:block;position:absolute;z-index:1;pointer-events:none;
    top:var(--window-top,16%);right:var(--window-right,9%);
    bottom:var(--window-bottom,16%);left:var(--window-left,66%);
    border:2px solid #e7e8d1;opacity:var(--frame-opacity,.4);
  }
  .window-story .hero-window::before{
    content:"";position:absolute;top:0;bottom:0;left:49.5%;width:3px;background:#d8dac4;
  }
  .window-story .hero-window::after{
    content:"";position:absolute;left:0;right:0;top:64%;height:2px;background:#d8dac4;
  }
  .window-story .hero-image figcaption{opacity:var(--caption-opacity,0)}
  .window-story .scroll-label-default{display:none}
  .window-story .scroll-label-story{display:inline}
  .window-story .hero-scroll{gap:14px;bottom:46px}
  .window-story .hero-scroll .scroll-arrow{border:1px solid #ffffff65;width:31px;height:31px;display:grid;place-items:center}
  .motion-enabled .hero-copy{animation:hero-arrive .85s cubic-bezier(.2,.65,.25,1) both}
  .motion-reveal{
    opacity:1;transform:none;
    transition:opacity .72s cubic-bezier(.2,.65,.25,1),transform .82s cubic-bezier(.2,.65,.25,1);
    transition-delay:var(--reveal-delay,0ms);
  }
  .motion-reveal.is-waiting{opacity:0;transform:translate3d(0,22px,0)}
  .motion-reveal:focus-within{opacity:1;transform:none;transition:none}
  @keyframes hero-arrive{from{opacity:.55;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
}
@media(max-width:640px) and (prefers-reduced-motion:no-preference){
  .window-story .hero{height:calc(100svh - var(--header-height,76px) - 64px - env(safe-area-inset-bottom))}
  .window-story .hero-copy{padding-top:28px}
  .window-story .hero h1{font-size:clamp(36px,10.3vw,49px);margin:22px 0 20px}
  .window-story .hero-actions{margin-top:23px}
  .window-story .hero-phone{display:none}
  .window-story .hero-scroll{bottom:39px}
  .window-story .hero-image figcaption{bottom:13px;font-size:7px}
  .motion-reveal{transition-duration:.55s,.65s}
  .motion-reveal.is-waiting{transform:translate3d(0,14px,0)}
  .motion-enabled .hero-copy{animation-duration:.65s}
}
@media(prefers-reduced-motion:reduce){
  .motion-reveal,.motion-reveal.is-waiting{opacity:1!important;transform:none!important;transition:none!important}
  .hero-copy{animation:none!important}
  .header{transition:none}
}
@media print{
  .window-story .hero-scene{height:auto}
  .window-story .hero{position:relative;top:auto}
  .window-story .hero-image img{clip-path:none;opacity:1}
  .window-story .hero-window{display:none}
  .motion-reveal,.motion-reveal.is-waiting{opacity:1!important;transform:none!important;transition:none!important}
}