/* One spatial scene; the visitor's scroll moves the same parts through the program. */
.building-family { --family-progress: 0%; position: relative; margin: 0; color: #244a43; background: #e9f1eb; }
.bf-pin { position: relative; display: flex; flex-direction: column; background: radial-gradient(ellipse at 52% 45%,#f8f7ef 0%,#eef3ec 46%,#dce9e2 100%); overflow: hidden; }
.bf-intro { flex: 0 0 auto; background: #d8ebdf; border-bottom: 1px solid #b8d3c0; }
.bf-top { display: flex; justify-content: space-between; align-items: center; gap: 32px; width: var(--shell); margin: 0 auto; padding: 24px 0; }
.bf-top h2 { margin: 0; max-width: 720px; color: #244a43; font-size: clamp(21px,2.15vw,28px); line-height: 1.23; text-wrap: pretty; }
.bf-top-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.bf-top-actions .button { white-space: nowrap; }
.bf-skip { display: none; flex-shrink: 0; padding: 8px 0; color: #537d70; font-size: 12px; }
.bf-skip:hover { color: #137550; }
.bf-world { position: relative; width: 100%; min-height: 0; flex: 1 1 auto; }
.bf-world canvas { display: none; position: absolute; width: 100%; height: 100%; inset: 0; }
.bf-still { width: min(1200px,100%); height: auto; margin: auto; }
.bf-bottom { flex: 0 0 auto; width: var(--shell); margin: 0 auto; padding: 0 0 20px; }
.bf-narration { display: grid; grid-template-columns: 58px minmax(170px,.4fr) minmax(0,1fr); align-items: start; gap: 18px; min-height: 58px; padding-top: 15px; border-top: 1px solid #b9d0c1; }
.bf-count { flex-shrink: 0; padding-top: 4px; color: #337a68; font: 500 12px/1.5 var(--label); }
.bf-narration strong { color: #244a43; font-size: 16px; line-height: 1.35; }
.bf-narration p { max-width: 760px; margin: 0; color: #476c62; font-size: 15px; line-height: 1.5; }
.bf-controls { display: none; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.bf-chapters { display: flex; gap: 6px; }
.bf-chapters button { position: relative; border: 1px solid #b9d0c1; border-radius: 30px; padding: 8px 15px; background: transparent; color: #476c62; font-size: 12px; line-height: 1.3; cursor: pointer; }
.bf-chapters button[aria-current="step"] { border-color: #28654e; background: #28654e; color: #fff; }
.bf-chapters button:hover { border-color: #28654e; }
.bf-scroll-hint { color: #537d70; font: 500 10px/1.5 var(--label); text-transform: uppercase; letter-spacing: .08em; }
.bf-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; color: #537d70; font-size: 11px; }
.bf-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bf-legend i { width: 8px; height: 8px; border-radius: 1px; }
.bf-key-bim { background: #e4eee8; border: 1px solid #8eafa2; }.bf-key-wall { background: #eee8d9; }.bf-key-floor { background: #84a898; }.bf-key-service { background: #e5c58a; }.bf-key-grey { background: #bbc7bd; }
.bf-progress { height: 3px; background: #c7dacb; flex: 0 0 auto; }
.bf-progress::after { content: ''; display: block; height: 100%; width: var(--family-progress); background: #438b72; }
.bf-static-story { max-width: 1000px; margin: 0 auto; padding: 24px 40px 48px; color: #476c62; }
.bf-static-story li { margin-bottom: 16px; }.bf-static-story strong { display: block; color: #244a43; }
.bf-end { height: 0; scroll-margin-top: var(--header); }
.building-family.is-enhanced { height: 620vh; height: 620svh; }
.is-enhanced .bf-pin { position: sticky; top: var(--header); height: calc(100vh - var(--header)); height: calc(100svh - var(--header)); }
.is-enhanced .bf-world canvas { display: block; }.is-enhanced .bf-still,.is-enhanced .bf-static-story { display: none; }
.is-enhanced .bf-skip { display: block; }.is-enhanced .bf-controls { display: flex; }
@media (max-width: 650px) {
  .bf-top { padding: 19px 0; gap: 14px; flex-wrap: wrap; }.bf-top h2 { font-size: 21px; max-width: 100%; }.bf-top-actions { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; }.bf-top-actions .button { min-height: 36px; padding: 7px 11px; font-size: 12px; }.bf-skip { font-size: 10px; }
  .bf-narration { grid-template-columns: 35px 1fr; gap: 5px 10px; min-height: 76px; padding-top: 10px; }.bf-count { font-size: 10px; }.bf-narration strong { font-size: 12px; }.bf-narration p { grid-column: 2; font-size: 12px; line-height: 1.5; }
  .bf-bottom { padding-bottom: 12px; }.bf-chapters { width: 100%; justify-content: space-between; gap: 4px; }.bf-chapters button { font-size: 10px; padding: 8px 9px; }.bf-scroll-hint { display: none; }
  .bf-controls { margin-top: 8px; flex-wrap: wrap; }.bf-legend { gap: 6px 12px; margin-top: 10px; font-size: 9px; }
}
@media (max-height: 650px) and (min-width: 651px) {
  .bf-top { padding: 12px 0; }.bf-top h2 { font-size: 22px; }.bf-top-actions .button { min-height: 36px; padding: 7px 12px; font-size: 12px; }.bf-narration { min-height: 40px; padding-top: 8px; }.bf-narration p { font-size: 13px; }.bf-bottom { padding-bottom: 10px; }.bf-legend { margin-top: 7px; }.bf-controls { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .building-family.is-enhanced { height: auto; }.is-enhanced .bf-pin { position: relative; top: auto; height: auto; }.is-enhanced .bf-world canvas { display: none; }.is-enhanced .bf-still,.is-enhanced .bf-static-story { display: block; }.is-enhanced .bf-controls,.is-enhanced .bf-skip { display: none; }
}