@font-face {
  font-family: 'Alright Sans';
  src: url('fonts/AlrightSans.woff2') format('woff2');
  font-display: swap;
}

#social-navigation {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
  transform: translateX(-50%);
  display: flex;
  align-items: stretch;
  width: max-content;
  max-width: calc(100vw - 24px);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 16px;
  background: rgba(20,61,49,.94);
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
  overflow: hidden;
}

#social-navigation[hidden],
#social-navigation button[hidden] { display: none; }

#social-navigation button {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  min-width: 0;
  padding: 12px 16px;
  margin: 0;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: transparent;
  font: 14px/1.3 'Alright Sans', Arial, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#social-navigation button + button { border-left: 1px solid rgba(255,255,255,.3); }
#social-navigation button:hover { background: rgba(255,255,255,.12); }
#social-navigation button:active { background: rgba(255,255,255,.2); }
#social-navigation button:focus-visible {
  outline: 2px solid #b2e482;
  outline-offset: -4px;
}
#social-navigation button:disabled { cursor: wait; opacity: .75; }
#social-navigation svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#social-navigation .social-enter svg { transform: rotate(180deg); }
#social-navigation button span { white-space: normal; }
.social-screen-reader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 360px) {
  #social-navigation button { padding: 12px 10px; font-size: 13px; gap: 6px; }
}
@media (max-height: 480px) {
  #social-navigation { bottom: max(8px, env(safe-area-inset-bottom)); }
  #social-navigation button { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
}

#social-room-picker {
  box-sizing: border-box;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  padding: 20px;
  border: 1px solid rgba(30,102,46,.15);
  border-radius: 20px;
  color: #163e30;
  background: #fff;
  box-shadow: 0 12px 48px rgba(0,0,0,.3);
  font-family: 'Alright Sans', Arial, sans-serif;
}
#social-room-picker[open] { display: flex; flex-direction: column; }
#social-room-picker::backdrop { background: rgba(7,28,20,.5); }
.social-picker-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
#social-room-picker h2 { margin: 0; flex: 1; font-size: 18px; line-height: 1.35; }
#social-room-picker button { font: inherit; cursor: pointer; touch-action: manipulation; }
.social-picker-close {
  width: 44px; height: 44px; flex: 0 0 44px;
  border: 0; border-radius: 50%; color: #163e30; background: #f1f6f0;
  font-size: 27px !important; line-height: 1;
}
.social-room-choice {
  display: block; width: 100%; min-height: 52px; margin-top: 8px;
  padding: 12px 14px; text-align: left; color: #163e30;
  border: 1px solid #d3e2d6; border-radius: 12px; background: #f5f8f3;
}
.social-room-choice:hover, .social-room-choice:focus-visible { background: #e3efdf; border-color: #1e662e; }
#social-room-picker button:focus-visible { outline: 2px solid #1e662e; outline-offset: 2px; }

/* The destination picker remains available in every photograph. */
#social-space-button {
  position: fixed; z-index: 21;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.35); border-radius: 16px;
  background: rgba(20,61,49,.94); color: #fff;
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
  font: 14px/1.3 'Alright Sans', Arial, sans-serif;
  cursor: pointer; touch-action: manipulation;
}
#social-space-button svg {
  width: 20px; height: 20px; flex: 0 0 20px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
#social-space-button:hover { background: #24624a; }
#social-space-button:focus-visible { outline: 2px solid #b2e482; outline-offset: 3px; }
#social-space-button:disabled { cursor: wait; opacity: .75; }
.social-picker-heading { flex: 0 0 auto; }
.social-space-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; min-height: 0; overflow-y: auto;
  padding: 3px; overscroll-behavior: contain;
}
.social-space-list .social-room-choice { margin: 0; }
@media (max-width: 420px) {
  .social-space-list { grid-template-columns: 1fr; }
  #social-room-picker { padding: 16px; }
  #social-space-button { right: 12px; padding: 12px; font-size: 13px; }
}

.social-room-choice[aria-current="location"] { border-color: #1e662e; background: #e3efdf; }

/* Two translucent greens distinguish fixed controls from scene destinations. */
#social-navigation {
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
#social-navigation button,
#social-space-button,
.social-room-choice,
.social-picker-close {
  border-radius: 16px;
}
#social-navigation button,
#social-navigation button + button {
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(10,32,28,.7);
  box-shadow: 0 3px 12px rgba(0,0,0,.14);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
#social-navigation button:hover,
#social-navigation button:active { background: rgba(29,74,57,.84); }
#social-space-button {
  background: rgba(10,32,28,.7);
  border-color: rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
#social-navigation button, #social-space-button, #social-room-picker button {
  font-family: 'Alright Sans', Arial, sans-serif;
  font-weight: 400;
}
.social-room-choice { padding-left: 18px; }
#social-room-picker {
  background: rgba(10,32,28,.86);
  border-color: rgba(255,255,255,.25);
  color: #fff;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
#social-room-picker .social-room-choice,
#social-room-picker .social-picker-close {
  color: #fff;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
}
#social-room-picker .social-room-choice:hover,
#social-room-picker .social-room-choice[aria-current="location"] {
  color: #fff;
  background: rgba(55,107,69,.55);
  border-color: #86b88a;
}
#social-instructions {
  box-sizing: border-box;
  position: fixed;
  z-index: 19;
  left: 50%;
  bottom: calc(max(16px, env(safe-area-inset-bottom) + 12px) + var(--nav-height, 52px) + 12px);
  transform: translateX(-50%);
  width: max-content;
  max-width: min(600px, calc(100vw - 24px));
  padding: 10px 16px;
  border-radius: 16px;
  background: rgba(9,32,25,.7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font: 13px/1.5 'Alright Sans', Arial, sans-serif;
  text-align: center;
  pointer-events: none;
}
.social-help-touch { display: none; }
@media (pointer: coarse), (max-width: 600px) {
  .social-help-mouse { display: none; }
  .social-help-touch { display: inline; }
  #social-instructions { width: calc(100vw - 24px); padding: 9px 14px; font-size: 12px; }
}
@media (max-height: 480px) {
  #social-instructions { bottom: calc(max(8px, env(safe-area-inset-bottom)) + var(--nav-height, 44px) + 8px); }
}

#social-map-button {
  position: fixed; z-index: 21;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  min-height: 44px; padding: 10px 16px;
  color: #fff; background: rgba(10,32,28,.7);
  border: 1px solid rgba(255,255,255,.28); border-radius: 16px;
  font: 14px/1.3 'Alright Sans', Arial, sans-serif;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  cursor: pointer; touch-action: manipulation;
}
#social-project-map {
  box-sizing: border-box; width: min(1020px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
  padding: 24px; border: 1px solid rgba(255,255,255,.28); border-radius: 24px;
  color: #fff; background: rgba(10,32,28,.94);
  box-shadow: 0 18px 65px rgba(0,0,0,.4);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  font: 14px/1.5 'Alright Sans', Arial, sans-serif;
}
#social-project-map::backdrop { background: rgba(7,28,20,.65); }
#social-project-map .social-picker-heading { justify-content: space-between; position: sticky; top: -24px; z-index: 2; background: #0a201c; padding: 8px 0; }
#social-project-map h2 { margin: 0; font-size: 25px; font-weight: 400; }
.social-eyebrow { margin: 0 0 4px; color: #b9dba9; font-size: 11px; letter-spacing: .16em; }
.social-map-current { margin: 0 0 16px; color: #d7edcb; }
.social-map-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 22px; }
.social-map-image { position: relative; border-radius: 18px; overflow: hidden; background: #66785b; }
.social-map-image svg { display: block; width: 100%; height: auto; }
.social-map-pin {
  position: absolute; transform: translate(-50%,-50%);
  width: 44px; height: 44px; border: 2px solid #fff; border-radius: 50%;
  color: #fff; background: #1c573d; box-shadow: 0 2px 12px #0008;
  font: 16px 'Alright Sans', Arial, sans-serif; cursor: pointer; touch-action: manipulation;
}
.social-map-pin[aria-current] { background: #c7e7ae; color: #173b2c; box-shadow: 0 0 0 6px #c7e7ae77; }
.social-map-note, .social-map-pending { margin: 10px 0 0; color: #c6d6ce; font-size: 12px; }
.social-map-label { margin: 0 0 10px; color: #d7edcb; }
.social-map-list { display: grid; gap: 7px; }
.social-map-group { min-width: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; background: rgba(255,255,255,.045); overflow: hidden; }
.social-map-group[data-current] { border-color: #86b88a; }
.social-map-group summary { display: flex; align-items: center; gap: 11px; min-height: 56px; box-sizing: border-box; padding: 12px; cursor: pointer; list-style: none; touch-action: manipulation; }
.social-map-group summary::-webkit-details-marker { display: none; }
.social-map-group summary:hover, .social-map-group[open] summary { background: rgba(55,107,69,.36); }
.social-map-group summary:focus-visible { outline: 3px solid #c7e7ae; outline-offset: -3px; border-radius: 15px; }
.social-map-group-heading { display: grid; flex: 1; min-width: 0; gap: 3px; line-height: 1.35; }
.social-map-group-heading small { font-size: 11px; color: #c6d6ce; }
.social-map-group-current { color: #d7edcb; }
.social-map-chevron { flex: 0 0 8px; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); margin: 0 4px 0 3px; }
.social-map-group[open] .social-map-chevron { transform: translateY(2px) rotate(225deg); }
.social-map-group-choices { display: grid; gap: 6px; padding: 0 10px 10px; }
#social-project-map .social-room-choice {
  display: flex; gap: 10px; align-items: center; margin: 0; min-height: 44px;
  padding: 9px 12px; color: #fff; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.2); border-radius: 14px;
  font: inherit; text-align: left; cursor: pointer; touch-action: manipulation;
}
#social-project-map .social-room-choice[aria-current] { background: #376b458c; border-color: #b9dba9; }
.social-map-number { display: inline-flex; flex: 0 0 23px; width: 23px; height: 23px; align-items: center; justify-content: center; border: 1px solid #b9dba9; border-radius: 50%; font-size: 12px; }
#social-project-map .social-picker-close { color: #fff; background: #ffffff15; cursor: pointer; }
#social-project-map button:hover { background-color: #376b45; }
#social-map-button:focus-visible, #social-project-map button:focus-visible { outline: 3px solid #c7e7ae; outline-offset: 3px; }
@media (max-width: 640px) {
  #social-project-map { padding: 16px; }
  #social-project-map .social-picker-heading { top: -16px; }
  .social-map-layout { grid-template-columns: 1fr; gap: 14px; }
  #social-project-map h2 { font-size: 21px; }
  .social-map-list { grid-template-columns: 1fr; }
  .social-map-group summary { min-height: 58px; padding: 11px; }
  #social-project-map .social-room-choice { padding: 10px 8px; font-size: 12px; }
  #social-map-button { right: 12px; padding: 10px 12px; font-size: 13px; }
}

/* Keep the urbanism visible while browsing the expanded destination list. */
@media (min-width: 641px) {
  .social-map-layout > div:first-child { position: sticky; top: 82px; align-self: start; }
}
#social-project-map .social-room-choice > span:last-child { min-width: 0; overflow-wrap: anywhere; }
#social-project-map .social-map-group .social-room-choice { width: 100%; min-width: 0; font-size: 13px; padding: 11px 12px; overflow-wrap: anywhere; }
.social-apartment-link { box-sizing: border-box; text-decoration: none; justify-content: space-between; }
.social-apartment-link:focus-visible { outline: 3px solid #c7e7ae; outline-offset: 2px; }
.social-apartment-group .social-map-note { padding: 0 3px; }
#social-apartment-view { position: fixed; inset: 0; margin: 0; padding: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; border: 0; color: #fff; background: #0a201c; overflow: hidden; font: 14px/1.4 'Alright Sans', Arial, sans-serif; }
#social-apartment-view[open] { display: flex; flex-direction: column; }
#social-apartment-view::backdrop { background: #0a201c; }
.social-apartment-header { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); }
.social-apartment-header h2 { margin: 0; font-size: 16px; font-weight: 400; }
.social-apartment-header p { margin: 2px 0 0; color: #c6d6ce; font-size: 12px; }
.social-apartment-back { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.35); border-radius: 16px; background: rgba(55,107,69,.42); color: #fff; font: inherit; cursor: pointer; touch-action: manipulation; }
.social-apartment-back:hover { background: #376b45; }
.social-apartment-back:focus-visible { outline: 3px solid #c7e7ae; outline-offset: 2px; }
.social-apartment-body { position: relative; flex: 1; min-height: 0; }
.social-apartment-body iframe { display: block; position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.social-apartment-loading { position: absolute; inset: 40% 20px auto; text-align: center; }
@media (max-width: 600px) {
  .social-apartment-header { gap: 10px; padding-right: 12px; padding-left: 12px; }
  .social-apartment-header h2 { font-size: 13px; }
  .social-apartment-header p { font-size: 11px; }
  .social-apartment-back { flex: 0 0 auto; gap: 6px; font-size: 12px; padding: 10px; }
}

/* Crisp, stable photo markers with a visible attachment point. */
#social-photo-markers { position:fixed; inset:0; z-index:18; pointer-events:none; overflow:hidden; }
.social-photo-marker {
  position:absolute; transform:translate(-50%,calc(-100% - 14px));
  width:max-content; max-width:min(205px,44vw); min-height:44px;
  box-sizing:border-box; padding:11px 15px; border:1px solid rgba(255,255,255,.5);
  border-radius:15px; color:#fff; background:rgba(22,83,52,.78);
  box-shadow:0 3px 10px rgba(0,0,0,.17); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  font:14px/1.25 'Alright Sans',Arial,sans-serif; font-weight:400; text-align:center;
  pointer-events:auto; cursor:pointer; touch-action:manipulation; overflow:visible;
}
.social-photo-marker::before { content:''; position:absolute; left:50%; top:100%; height:11px; width:1px; background:rgba(255,255,255,.85); }
.social-photo-marker::after { content:''; position:absolute; left:50%; top:calc(100% + 9px); transform:translateX(-50%); width:8px; height:8px; border:2px solid #fff; border-radius:50%; background:#397c50; box-shadow:0 1px 5px #0005; }
.social-photo-marker[hidden] { display:none!important; }
.social-photo-marker:hover { background:rgba(22,83,52,.93); }
.social-photo-marker:focus-visible { outline:3px solid #d9edcf; outline-offset:4px; }
@media(max-width:600px) { .social-photo-marker { padding:10px 12px; font-size:13px; max-width:43vw; } }