/* The landscape is the community the work serves: keep town and terrain visible. */
.hero-morning-scene .scene-frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1.9;
  min-height: 660px;
  padding: clamp(48px, 4vw, 76px) 4% 34px;
}
.hero-morning-scene .scene-image {
  object-position: center 26%;
}
.hero-morning-scene .scene-frame::after {
  background: linear-gradient(180deg, #14283b00 45%, #11263810 72%, #10233252 100%);
}
.hero-morning-scene .morning-workspace {
  width: min(72%, 1040px);
  max-width: none;
  margin: 0 auto;
  flex-shrink: 0;
}
/* A small, reversible approach to the product. Native size remains the endpoint. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .hero-morning-scene .morning-workspace {
    transform: var(--workspace-motion, none);
    transform-origin: center top;
  }
}
.hero-morning-scene .scene-caption {
  width: 100%;
  max-width: none;
  margin: auto 0 0;
  padding-top: 76px;
  text-shadow: 0 1px 10px #1023328f;
}
@media (min-width: 901px) and (max-width: 1200px) {
  .hero-morning-scene .morning-workspace { width: 80%; }
  .hero-morning-scene .sale-detail { display: none; }
  .hero-morning-scene .prepared-label { display: none; }
}

/* At smaller sizes show the complete place, then the workspace, without fading the town away. */
@media (max-width: 900px) {
  .hero-morning-scene .scene-frame {
    display: block;
    aspect-ratio: auto;
    min-height: 0;
    padding: 0 16px 24px;
    background: #213c51;
  }
  .hero-morning-scene .scene-frame::before {
    content: "";
    display: block;
    width: calc(100% + 32px);
    margin-inline: -16px;
    aspect-ratio: 3 / 2;
    margin-bottom: -16px;
  }
  .hero-morning-scene .scene-image {
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 2;
    object-position: center;
  }
  .hero-morning-scene .scene-frame::after { background: none; }
  .hero-morning-scene .morning-workspace { width: 100%; margin: 0; }
  .hero-morning-scene .scene-caption { padding-top: 24px; margin: 0; }
}
@media (max-width: 480px) {
  .hero-morning-scene .scene-frame { padding-inline: 12px; padding-bottom: 20px; }
  .hero-morning-scene .scene-frame::before { width: calc(100% + 24px); margin-inline: -12px; }
}