.sr-only {
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
html:has(.storefront-story) { scroll-behavior:auto; scroll-padding-top:0; }
.storefront-story { height:100svh; position:relative; background:#101820; }
.motion-active .storefront-story { height:205svh; }
.storefront-stage { height:100svh; position:sticky; top:0; overflow:hidden; isolation:isolate; background:#101820; }
.story-marker { position:absolute; left:0; width:1px; height:1px; pointer-events:none; }
#the-name { top:51svh; }
#the-work { top:104svh; }
.photo-plane, .building-photo, .clean-fascia, .scene-shade, .scene-vignette { position:absolute; inset:0; width:100%; height:100%; }
.photo-plane { transform-origin:center; }
.building-photo { object-fit:cover; object-position:center; }
.clean-fascia, .scene-shade { opacity:0; pointer-events:none; }
.scene-shade { background:#0c151d; }
.scene-vignette { background:linear-gradient(180deg,#081019aa,transparent 28%,transparent 48%,#081019dc); pointer-events:none; }
.motion-active .photo-plane { will-change:transform; }
.motion-active .clean-fascia, .motion-active .scene-shade { will-change:opacity; }
.lifting-sign {
  display:none; position:absolute; top:0; left:0; width:640px; aspect-ratio:284/72;
  transform-origin:center; opacity:0; pointer-events:none; z-index:4;
}
.motion-active .lifting-sign { display:block; will-change:transform,opacity; }
.lifting-sign .actual-sign { display:block; width:100%; height:100%; overflow:visible; }
.opening-copy { position:absolute; left:max(24px,5.5vw); bottom:104px; z-index:2; }
.opening-copy>p { font:650 clamp(32px,4.7vw,66px)/1.03 Manrope,sans-serif; letter-spacing:-.05em; color:#fff; }
.opening-promise { display:block; color:#f5f5f5; margin-top:.75rem; font-size:clamp(1rem,1.4vw,1.15rem); }
.opening-quote { display:inline-flex; align-items:center; gap:26px; margin-top:22px; padding:10px 0 7px; border-bottom:1px solid #fff9; font-size:15px; font-weight:700; }
.opening-quote:hover { border-color:#fff; }
.scroll-cue { position:absolute; bottom:32px; left:max(24px,5.5vw); display:flex; align-items:center; gap:14px; z-index:2; font-size:13px; }
.scroll-track { width:43px; height:1px; position:relative; background:#ffffff75; }
.scroll-track i { position:absolute; inset:0 auto 0 0; width:17px; background:#fff; }
.scene-message {
  display:none; position:absolute; top:0; left:50%; text-align:center;
  opacity:0; z-index:3; pointer-events:none;
}
.motion-active .scene-message { display:block; will-change:transform,opacity; }
.scene-message a { display:inline-flex; gap:20px; white-space:nowrap; padding:9px 0; border-bottom:1px solid #fff7; font-size:15px; }
.scene-message:not([inert]) a { pointer-events:auto; }
.fieldwork .storefront-header {
  position:fixed; inset:0 0 auto; z-index:60; border:0; background:transparent; color:#fff;
}
.storefront-header::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:#121a20; opacity:var(--header-fill,0);
}
.storefront-header .brand { position:relative; }
.storefront-header .brand .actual-sign { opacity:var(--brand-initial,1); }
.motion-active .storefront-header .brand .actual-sign { --brand-initial:0; }
.initial-location {
  display:none; position:absolute; left:0; top:50%; transform:translateY(-50%);
  font-size:12px; font-weight:700; letter-spacing:.13em; white-space:nowrap; pointer-events:none;
}
.motion-active .initial-location { display:block; }
.motion-setting { display:none; padding:9px 0; background:none; color:#f1f1f1; border:0; font:inherit; white-space:nowrap; cursor:pointer; }
.js .motion-setting { display:inline-flex; align-items:center; gap:7px; }
.motion-still .photo-plane { transform:none!important; }
.motion-still .clean-fascia, .motion-still .scene-shade { opacity:0!important; }
@media (max-width:700px) {
  .motion-active .storefront-story { height:188svh; }
  #the-name { top:43svh; }
  #the-work { top:87svh; }
  .opening-copy { bottom:94px; }
  .opening-quote { margin-top:16px; }
  .scroll-cue { bottom:25px; }
  .storefront-header .brand { width:clamp(117px,36vw,155px); }
  .initial-location { font-size:10px; }
  .storefront-header .header-actions { gap:12px; }
  .motion-setting { font-size:11px; }
}
