/* Load after the component styles. Keep the cinematic stage and CAD gestures;
   reserve real space for controls instead of cropping the page to fit. */
.journey { overflow-anchor: none; }
@media (max-width: 760px) {
  :root {
    --mobile-header: calc(88px + env(safe-area-inset-top, 0px));
    --mobile-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-scene-shift: min(0px, calc(50svh - 28.125vw - 236px - var(--mobile-bottom)));
  }

  html { scroll-padding-top: calc(var(--mobile-header) + 12px); }
  .header {
    height: var(--mobile-header);
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    padding-inline: max(6%, env(safe-area-inset-left, 0px)) max(6%, env(safe-area-inset-right, 0px));
  }
  .header-actions { gap: 12px; }
  .language, .menu-button { min-width: 44px; min-height: 44px; }
  .menu-button { display: flex; flex-direction: column; justify-content: center; align-items: center; }
  .menu-button span { margin: 4px 0; }
  .mobile-menu {
    top: var(--mobile-header);
    max-height: calc(100svh - var(--mobile-header));
    max-height: calc(100dvh - var(--mobile-header));
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding-bottom: calc(25px + var(--mobile-bottom));
  }

  .journey-poster { object-fit: cover; object-position: 50% 50%; }
  .journey-copy { top: clamp(132px, 28svh, 230px); max-width: none; }
  .journey-copy h1 { font-size: clamp(35px, 10.5vw, 47px); }
  .journey-copy p { line-height: 1.6; }
  .journey-link, .film-button { min-height: 44px; }
  .journey-bottom { bottom: calc(24px + var(--mobile-bottom)); }
  .chapter-dots button { width: 32px; height: 32px; padding: 13px; }

  .building-intro { top: calc(var(--mobile-header) + 16px); bottom: calc(238px + var(--mobile-bottom)); }
  /* The map and its hit areas move together only when a short portrait needs
     room for the controls beneath its contained 16:9 image. */
  .building-scene > #buildingMap { transform: translateY(var(--mobile-scene-shift)); }
  .building-list {
    top: calc(50svh + 28.125vw + var(--mobile-scene-shift) + 12px - var(--mobile-header) - 16px);
    bottom: auto;
    left: calc(12px - 7vw);
    right: calc(12px - 7vw);
    grid-template-columns: repeat(7, minmax(44px, 1fr));
    gap: 4px;
    margin: 0;
    height: 44px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .building-list::-webkit-scrollbar { display: none; }
  .building-list button { min-height: 44px; min-width: 44px; }
  .building-list button:focus-visible { outline-offset: -3px; }
  .building-intro > .text-link { position: relative; top: auto; bottom: auto; left: auto; right: auto; margin-top: 12px; min-height: 44px; }
  .quick-inquiry-mobile { top: calc(50svh + 28.125vw + var(--mobile-scene-shift) + 64px); bottom: auto; min-height: 44px; }
  .floor-explorer .explorer-partners { bottom: calc(60px + var(--mobile-bottom)); padding-top: 4px; }
  .floor-selector {
    top: calc(var(--mobile-header) + 16px);
    max-height: calc(100svh - var(--mobile-header) - var(--mobile-bottom) - 212px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
  }
  .floor-selector > .explorer-back { min-height: 44px; padding-block: 8px; }
  .floor-selector .floor-choice { height: auto; min-height: 44px; padding-block: 10px; }
  .explorer-bottom { bottom: calc(8px + var(--mobile-bottom)); padding-inline-start: 0; }
  .explorer-bottom .text-link { max-width: calc(100% - 174px); min-height: 44px; gap: 8px; }

  .plan-heading .plan-tools { gap: 6px; }
  .plan-tools button { width: 44px; height: 44px; min-width: 44px; }
  .plan-tools #resetPlan { width: auto; min-width: 70px; }
  .plan-layout { bottom: calc(178px + var(--mobile-bottom)); }
  .plan-meta { bottom: -25px; }
  .plan-mode-controls { bottom: -84px; }
  .unit-details { bottom: calc(24px + var(--mobile-bottom)); }
  .unit-details #unitSelect { font-size: 16px; }

  /* A focused form must stay readable without the browser zooming its page. */
  .inquiry-form input, .inquiry-form textarea,
  .quick-inquiry-dialog input, .quick-inquiry-dialog textarea, .quick-inquiry-dialog select,
  .unit-request-form input, .unit-request-form textarea, .unit-request-form select { font-size: 16px; }
  .inquiry-form .interest-options span, .quick-inquiry-dialog .submit-button,
  .request-actions > button, .request-actions > a { min-height: 44px; }
  .field-row { min-width: 0; }
  .field-row > label { min-width: 0; }

  .gallery-collection .collection-filter, .gallery-collection .collection-all-images,
  .collection-open-image, .collection-image-arrow, .gallery-controls button,
  .dialog-close, .success-read, .location-map-lock { min-height: 44px; }
  .collection-image-arrow, .gallery-controls button, .dialog-close { min-width: 44px; }
  .collection-image-controls { gap: 4px; padding-inline: 12px; }
  .gallery-controls { flex-wrap: wrap; gap: 8px; }
  .gallery-controls #galleryCaption { min-width: 0; flex: 1; overflow-wrap: anywhere; }
  .collection-row-name, .location-map-title, .success-copy h2 { overflow-wrap: break-word; }

  .media-dialog { max-height: calc(100svh - 24px); max-height: calc(100dvh - 24px); overflow: auto; }
  .media-dialog > img { max-height: calc(100svh - 112px); max-height: calc(100dvh - 112px); }
  .quick-inquiry-dialog, .request-dialog, .partner-story-dialog, .unit-dialog {
    max-height: calc(100svh - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding-bottom: calc(26px + var(--mobile-bottom));
  }
  .quick-inquiry-dialog { padding-top: 60px; }
  .request-dialog { padding-top: 55px; }
  .floating-whatsapp { min-height: 44px; bottom: calc(8px + var(--mobile-bottom)); }
  .footer { padding-bottom: calc(76px + var(--mobile-bottom)); }
  .footer-bottom { flex-wrap: wrap; gap: 12px; }
  .tracking-choice { bottom: calc(12px + var(--mobile-bottom)); max-height: calc(100dvh - 24px); overflow-y: auto; }
  .tracking-choice button { min-height: 44px; }
}

/* The unit view already has its own request action. The floating contact pill
   otherwise sits over the unit selector at the bottom of the full-screen plan. */
body.unit-explorer-active.explorer-in-view .floating-whatsapp { visibility: hidden; pointer-events: none; }

@media (max-width: 380px) {
  .inquiry-form .field-row { grid-template-columns: 1fr; gap: 22px; }
  .interest-options { gap: 8px; }
  .collection-image-count { letter-spacing: 0; }
}

/* Phone landscape includes wide phones: width alone would select desktop
   spacing and leave a 375px-high screen with almost no floor-plan canvas. */
@media (max-width: 1024px) and (max-height: 500px) and (orientation: landscape) {
  :root {
    --mobile-header: calc(64px + env(safe-area-inset-top, 0px));
    --mobile-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-scene-shift: 0px;
  }
  html { scroll-padding-top: calc(var(--mobile-header) + 8px); }
  .header { height: var(--mobile-header); padding: calc(8px + env(safe-area-inset-top, 0px)) 6% 8px; }
  .brand { width: 96px; }
  .brand img { height: 42px; }
  .desktop-nav, .nav-cta { display: none; }
  .header-actions { gap: 12px; }
  .language, .menu-button { min-width: 44px; min-height: 44px; }
  .menu-button { display: flex; flex-direction: column; justify-content: center; align-items: center; }
  .menu-button span { margin: 4px 0; }
  .mobile-menu { top: var(--mobile-header); max-height: calc(100dvh - var(--mobile-header)); overflow-y: auto; }
  .mobile-menu .nav-floor { display: block; width: 100%; text-align: start; font-size: 20px; padding: 14px; }

  .journey-copy { top: calc(var(--mobile-header) + 18px); inset-inline: 7%; max-width: 78%; }
  .chapter-kicker { margin-bottom: 10px; }
  .journey-copy h1 { font-size: clamp(28px, 4.5vw, 40px); line-height: 1.14; }
  .journey-copy p { font-size: 13px; line-height: 1.5; margin-top: 12px; max-width: 380px; }
  .journey-link { margin-top: 12px; min-height: 44px; font-size: 12px; }
  .journey-bottom { bottom: calc(12px + var(--mobile-bottom)); inset-inline: 7%; }
  .chapter-dots { top: 40%; }
  .plaza-copy { bottom: calc(60px + var(--mobile-bottom)); padding: 14px 20px; width: 55%; inset-inline-start: 7%; }
  .plaza-copy h2 { font-size: 25px; margin-block: 8px; }
  .plaza-copy p { font-size: 12px; }

  .building-intro { inset: calc(var(--mobile-header) + 14px) 7% calc(150px + var(--mobile-bottom)); width: auto; pointer-events: none; }
  .building-intro h2 { font-size: 20px; line-height: 1.1; margin: 6px 0; }
  .building-intro p { font-size: 11px; line-height: 1.45; max-width: 220px; }
  .building-intro > .text-link { display: inline-flex; position: absolute; top: 0; bottom: auto; left: auto; right: auto; inset-inline-start: auto; inset-inline-end: 0; margin: 0; max-width: 40%; min-height: 44px; font-size: 10px; pointer-events: auto; }
  .building-list { position: absolute; inset: auto 0 0; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; gap: 5px; pointer-events: auto; }
  .building-list button { min-height: 44px; }
  .quick-inquiry { display: none; }
  .quick-inquiry-mobile { display: block; position: absolute; z-index: 4; top: auto; bottom: calc(94px + var(--mobile-bottom)); left: 7%; right: auto; width: 32%; min-height: 44px; padding: 10px; font-size: 13px; color: #fff; background: #49276dd9; border: 1px solid #dcc6f0; border-radius: 4px; }
  .floor-explorer .explorer-partners { bottom: calc(54px + var(--mobile-bottom)); width: 50%; left: 68%; padding: 8px 6px 6px; }
  .floor-selector { inset: calc(var(--mobile-header) + 14px) 7% auto auto; width: 46%; max-width: none; max-height: calc(100svh - var(--mobile-bottom) - 215px); overflow-y: auto; overscroll-behavior-y: contain; padding: 14px; background: #142039e8; border: 1px solid #ffffff30; }
  .floor-selector > .explorer-back { min-height: 44px; padding: 8px 0; margin-bottom: 8px; }
  .floor-selector h2 { font-size: 25px; margin: 6px 0; }
  .floor-selector > p { font-size: 12px; margin-bottom: 10px; }
  .floor-selector .floor-choice { height: auto; min-height: 44px; font-size: 13px; padding: 10px; }
  .explorer-bottom { inset: auto 7% calc(6px + var(--mobile-bottom)); padding: 0; justify-content: flex-start; }
  .explorer-bottom .text-link { min-height: 44px; font-size: 10px; }
  .explorer-visual-note { display: none; }

  .plan-heading { inset: calc(12px + env(safe-area-inset-top, 0px)) 4% auto; }
  .plan-heading > .explorer-back { min-height: 44px; max-width: 50%; font-size: 10px; }
  .plan-heading > div:not(.plan-tools) { margin-top: 2px; }
  .plan-heading .explorer-eyebrow { font-size: 9px; }
  .plan-heading h2, html[lang=en] .plan-heading h2 { font-size: 25px; margin-top: 5px; }
  .plan-heading .plan-tools { top: 0; gap: 6px; }
  .plan-tools button { width: 44px; height: 44px; min-width: 44px; }
  .plan-tools #resetPlan { width: auto; min-width: 70px; font-size: 10px; }
  .plan-language { top: 52px; min-height: 44px; min-width: 44px; }
  .plan-layout, .showing-concept .plan-layout { inset: calc(105px + env(safe-area-inset-top, 0px)) 14% calc(88px + var(--mobile-bottom)) 4%; display: block; }
  .plan-column, .plan-viewport, .unit-presentation { min-height: 0; }
  .plan-floor-tabs { right: 3%; width: 65px; top: 48%; gap: 0; }
  .plan-floor-tabs button { min-height: 44px; padding: 3px 0 3px 12px; gap: 3px; flex-direction: column; align-items: start; }
  .rail-code { font-size: 17px; width: auto; }
  .rail-name { font-size: 8px; }
  .plan-meta { bottom: -18px; font-size: 9px; line-height: 1.4; }
  .plan-mode-controls { bottom: -68px; left: 66%; max-width: 75%; width: max-content; }
  .plan-mode-controls button { min-height: 44px; padding: 8px 14px; font-size: 11px; }
  .unit-details { left: 4%; right: auto; bottom: calc(12px + var(--mobile-bottom)); width: min(215px, 34%); }
  .unit-details #unitSelect { width: calc(100% - 50px); min-height: 44px; font-size: 16px; padding: 8px; }
  .unit-details .unit-inquiry { right: 0; }
  .unit-presentation > p { display: block; font-size: 8px; }
  .design-variants { padding-block: 4px; }
  .design-variants button { min-height: 44px; }

  .collection-stage { top: var(--mobile-header); height: 32svh; min-height: 120px; }
  .location-map-frame { height: 300px; }
  .unit-dialog-layout { display: flex; flex-direction: column; }
  .unit-view-art, .unit-request-form { width: 100%; }
  .unit-art-toggle { height: 230px; }
  .unit-request-form input, .unit-request-form textarea, .unit-request-form select,
  .quick-inquiry-dialog input, .quick-inquiry-dialog textarea, .quick-inquiry-dialog select { font-size: 16px; }
  .quick-inquiry-dialog, .request-dialog, .partner-story-dialog, .unit-dialog { max-height: calc(100dvh - 20px); overflow-y: auto; }
  .floating-whatsapp { min-height: 44px; bottom: calc(6px + var(--mobile-bottom)); font-size: 10px; padding: 10px 12px; }
}

.plan-load-status {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  background: #171e25;
  color: #bdc7d4;
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}
.plan-load-status[hidden] { display: none; }
#retryPlanArtwork {
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid #bac4d350;
  border-radius: 22px;
  background: #243040;
  color: #f5f2ee;
  font-size: 12px;
}