/* Matched E57 photo viewpoints, carried from framing to finished home. */
.a360-builder-story {
  --story-reveal: 0;
  --story-intro: 1;
  --story-cta: 0;
  --story-cta-shade: 0;
  position: relative;
  isolation: isolate;
  height: 100svh;
  min-height: 680px;
  color: #fff;
  background: #102431;
}
.a360-builder-story.is-enhanced { height: 310svh; min-height: 1900px; }
.a360-builder-story-sticky {
  position: relative;
  isolation: isolate;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  background: #102431;
  cursor: move;
}
.a360-builder-story.is-enhanced .a360-builder-story-sticky {
  position: sticky;
  top: 0;
}
.a360-builder-story-poster,
.a360-builder-story-poster > img,
.a360-builder-story-canvas,
.a360-builder-story-shade,
.a360-builder-story-cta-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.a360-builder-story-poster { z-index: 0; overflow: hidden; }
.a360-builder-story-poster > img {
  max-width: none;
  object-fit: cover;
  object-position: center;
}
.a360-builder-story-poster-finished { opacity: var(--story-reveal); }
.a360-builder-story-canvas {
  z-index: 1;
  display: block;
  opacity: 0;
  pointer-events: none;
  cursor: move;
  touch-action: pan-y;
  transition: opacity .38s ease;
}
.a360-builder-story.is-ready .a360-builder-story-canvas { opacity: 1; pointer-events: auto; }
.a360-builder-story-shade,
.a360-builder-story-cta-shade { z-index: 2; pointer-events: none; }
.a360-builder-story-shade {
  background: linear-gradient(180deg,#0718278f 0%,#07182705 24%,#07182704 48%,#071827c9 100%),
              linear-gradient(90deg,#0718279c 0%,#07182745 39%,transparent 76%);
}
.a360-builder-story-cta-shade {
  opacity: var(--story-cta-shade);
  background: linear-gradient(90deg,#071827d8 0%,#071827bc 42%,#07182748 75%,#07182738 100%);
}
.a360-builder-story-top,
.a360-builder-story-intro,
.a360-builder-story-cta,
.a360-builder-story-status { position: absolute; z-index: 3; }
.a360-builder-story-top {
  top: clamp(25px,4.5vw,58px);
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  color: #ffffffde;
  font: 800 10px/1.5 var(--a360-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  pointer-events: none;
}
.a360-builder-story-edition > span { color: #e3c68c; padding-inline: 6px; }
.a360-builder-story-intro,
.a360-builder-story-cta {
  left: 0;
  right: 0;
  bottom: clamp(84px,13vh,150px);
  pointer-events: none;
}
.a360-builder-story-intro { display: none; }
.a360-builder-story.is-enhanced .a360-builder-story-intro {
  display: block;
  opacity: var(--story-intro);
  transform: translateY(var(--story-intro-y,0px));
}
.a360-builder-story-cta { max-width: 1190px; }
.a360-builder-story.is-enhanced .a360-builder-story-cta {
  opacity: var(--story-cta);
  transform: translateY(var(--story-cta-y,0px));
}
.a360-builder-story-cta a { margin-top: 29px; pointer-events: auto; cursor: pointer; }
.a360-builder-story.is-enhanced .a360-builder-story-cta:not(.is-actionable) a { pointer-events: none; }
.a360-builder-story .a360-landing-kicker { margin-bottom: 18px; color: #e3c68c; }
.a360-builder-story h2 {
  max-width: 800px;
  margin: 0;
  color: #fff;
  font: 400 clamp(66px,7.2vw,112px)/.94 var(--a360-serif);
  letter-spacing: -.04em;
  text-wrap: balance;
}
.a360-builder-story h2 em { color: #e3c68c; font-weight: inherit; }
.a360-builder-story-intro > p:last-child,
.a360-builder-story-cta > p:not(.a360-landing-kicker) {
  max-width: 530px;
  margin: 27px 0 0;
  color: #fff;
  font: 500 clamp(14px,1.1vw,17px)/1.8 var(--a360-sans);
  text-shadow: 0 2px 16px #0718279c;
}
.a360-builder-story-status {
  right: max(48px,calc((100vw - 1190px) / 2 + 48px));
  bottom: 24px;
  max-width: 330px;
  margin: 0;
  padding: 9px 12px;
  color: #fff;
  background: #071827b8;
  font: 600 11px/1.5 var(--a360-sans);
  text-align: right;
  pointer-events: none;
  opacity: 0;
}
.a360-builder-story.is-loading .a360-builder-story-status,
.a360-builder-story.is-error .a360-builder-story-status { opacity: 1; }

@media (max-width: 700px) {
  .a360-builder-story,
  .a360-builder-story-sticky { min-height: 620px; }
  .a360-builder-story.is-enhanced { height: 300svh; min-height: 1860px; }
  .a360-builder-story-shade {
    background: linear-gradient(180deg,#07182799 0%,#07182724 21%,transparent 40%,transparent 53%,#07182730 73%,#071827bb 100%);
  }
  .a360-builder-story-cta-shade {
    background: linear-gradient(180deg,transparent 0%,transparent 46%,#07182724 61%,#071827b5 84%,#071827ed 100%);
  }
  .a360-builder-story-top { top: 24px; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 8px; }
  .a360-builder-story-intro,
  .a360-builder-story-cta { bottom: 76px; }
  .a360-builder-story h2 { font-size: clamp(48px,12vw,70px); line-height: .97; }
  .a360-builder-story .a360-builder-story-cta { bottom: max(24px,calc(env(safe-area-inset-bottom) + 16px)); }
  .a360-builder-story .a360-builder-story-cta h2 { font-size: clamp(38px,10.5vw,58px); line-height: .98; }
  .a360-builder-story .a360-builder-story-cta .a360-landing-kicker { margin-bottom: 8px; }
  .a360-builder-story-intro > p:last-child,
  .a360-builder-story-cta > p:not(.a360-landing-kicker) { max-width: 330px; margin-top: 18px; font-size: 13px; line-height: 1.65; }
  .a360-builder-story .a360-builder-story-cta > p:not(.a360-landing-kicker) { max-width: 37ch; margin-top: 12px; font-size: 12px; line-height: 1.55; }
  .a360-builder-story-cta a { margin-top: 16px; padding-inline: 18px !important; }
  .a360-builder-story-status { left: 24px; right: 24px; bottom: 20px; max-width: none; text-align: left; }
}
@media (max-width: 390px) {
  .a360-builder-story h2 { font-size: 47px; }
  .a360-builder-story-intro,
  .a360-builder-story-cta { bottom: 68px; }
}
@media (max-height: 650px) {
  .a360-builder-story,
  .a360-builder-story-sticky { min-height: 0; }
  .a360-builder-story.is-enhanced { height: 340svh; min-height: 0; }
  .a360-builder-story-top { top: 13px; }
  .a360-builder-story-intro,
  .a360-builder-story-cta { bottom: 38px; }
  .a360-builder-story h2 { font-size: clamp(45px,7vh,66px); }
  .a360-builder-story .a360-landing-kicker { margin-bottom: 6px; }
  .a360-builder-story-intro > p:last-child,
  .a360-builder-story-cta > p:not(.a360-landing-kicker) { margin-top: 9px; font-size: 11px; line-height: 1.45; }
  .a360-builder-story-cta a { margin-top: 10px; min-height: 38px !important; padding-block: 10px !important; }
}
@media (max-width: 700px) and (max-height: 650px) {
  .a360-builder-story .a360-builder-story-cta { bottom: max(12px,calc(env(safe-area-inset-bottom) + 8px)); }
  .a360-builder-story .a360-builder-story-cta h2 { font-size: clamp(34px,9vw,46px); }
  .a360-builder-story .a360-builder-story-cta > p:not(.a360-landing-kicker) { margin-top: 8px; font-size: 11px; line-height: 1.45; }
}
@media (prefers-reduced-motion: reduce) {
  .a360-builder-story-canvas { transition: none; }
  .a360-builder-story.is-enhanced .a360-builder-story-intro,
  .a360-builder-story.is-enhanced .a360-builder-story-cta { transform: none; }
}