/* One architectural world at a time, directly on the Goodo background. */
.architectural-experience {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 24px 0 24px 12px;
  padding: 0 0 10px;
  color: #f6f7f3;
  overflow: visible;
  box-shadow: none;
}
.architectural-experience .room-stage {
  height: 515px;
  width: 100%;
  margin: 0;
  background: transparent;
  perspective: 1500px;
}
.architectural-experience .room-stage:before { content: none; }
.architectural-experience .room-scene {
  transform-origin: 50% 55%;
  transition: none;
  filter: none;
}
.architectural-experience .room-scene > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
}
.architectural-experience .room-scene:not(.active) {
  visibility: hidden;
  opacity: 0;
  animation: none;
  transform: none;
}
.architectural-experience .room-scene.active {
  visibility: visible;
  opacity: 1;
  transform: none;
  filter: none;
  animation: plan-arrive 1.15s cubic-bezier(.2,.65,.2,1) both;
}
@keyframes plan-arrive {
  from { opacity: 0; transform: translateY(12px) rotateY(-7deg) scale(.97); }
  to { opacity: 1; transform: translateY(0) rotateY(0) scale(1); }
}
.architectural-experience .room-caption {
  margin: 0 24px;
  padding: 18px 0 6px;
  border-top: 1px solid #ffffff20;
  gap: 14px;
}
.architectural-experience .room-caption > span { color: var(--yellow); font-size: 12px; }
.architectural-experience .room-caption h2 { color: #f6f7f3; font-size: 24px; }
.architectural-experience .room-caption p { color: #aaafa5; font-size: 14px; }
.architectural-experience .room-arrows > button { color: #f6f7f3; border-color: #ffffff38; background: transparent; width: 44px; height: 44px; }
.architectural-experience .room-arrows > button:hover { background: var(--yellow); border-color: var(--yellow); color: #171a18; }
.architectural-experience .room-progress { gap: 4px; }
.architectural-experience .room-dot { width: 30px; min-height: 44px; }
.architectural-experience .room-dot:after { width: 14px; background: #ffffff28; }
.architectural-experience .room-dot[aria-pressed=true]:after { width: 24px; background: var(--yellow); }
.architectural-experience :focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
@media (max-width: 1000px) {
  .architectural-experience { margin-left: 10px; }
  .architectural-experience .room-stage { height: 380px; }
  .architectural-experience .room-caption { margin: 0 12px; gap: 10px; flex-wrap: wrap; }
  .architectural-experience .room-caption h2 { font-size: 21px; }
  .architectural-experience .room-caption > div:nth-child(2) { flex: 1 1 130px; }
}
@media (max-width: 600px) {
  .architectural-experience { margin: 12px 0 18px; width: 100%; padding: 0; }
  .architectural-experience .room-stage { height: auto; aspect-ratio: 1.15; width: 111%; margin: 0 -5.5%; }
  .architectural-experience .room-caption { margin: 0; padding-top: 16px; }
  .architectural-experience .room-caption > span { font-size: 12px; }
  .architectural-experience .room-caption h2 { font-size: 22px; }
  .architectural-experience .room-caption p { font-size: 14px; line-height: 1.5; }
  .architectural-experience .room-caption > div:nth-child(2) { flex-basis: calc(100% - 65px); }
  .architectural-experience .room-arrows { margin-left: auto; }
  .architectural-experience .room-progress { gap: 2px; }
  .architectural-experience .room-dot { width: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .architectural-experience .room-scene.active { animation: none; }
}
.motion-paused .architectural-experience .room-scene.active { animation: none; }