@charset "UTF-8";
:root {
  font-family: "Helvetica Neue", Inter, Arial, "Noto Sans", sans-serif;
  font-synthesis: none;
  color: #eff3f1;
  background: #0b1111;
  --accent: #5bdb9a;
  --green: #006b49;
  --muted: #b2beb8;
  --line: #ffffff20;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, select { font: inherit; }
a { color: inherit; text-decoration: none; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { opacity: .32; cursor: default; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.skip { position: fixed; top: -100px; left: 16px; z-index: 1200; background: #fff; color: #102a20; padding: 16px; }
.skip:focus { top: 10px; }
.header { height: 78px; display: flex; align-items: center; gap: 38px; padding: 7px 3.2vw; background: #fff; color: #152b24; }
.brand { margin-inline-end: auto; display: flex; align-items: center; }
.brand img { width: 110px; height: 62px; object-fit: contain; }
.top-nav { display: flex; align-items: center; gap: 32px; font-size: .875rem; font-weight: 550; }
.top-nav a { padding-block: 12px; }
.top-nav a:hover { color: var(--green); }
.language { display: flex; align-items: center; gap: 8px; padding-inline-start: 25px; border-inline-start: 1px solid #163a2326; }
.language select { min-height: 44px; max-width: 155px; font-size: .875rem; border: 0; color: inherit; background: transparent; }
main { max-width: 2400px; margin: auto; padding: 0 2.1vw; }
.heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 19px 0 17px; }
.heading > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 20px; }
.eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .13em; color: var(--accent); line-height: 1.6; margin: 0 0 16px; }
.heading .eyebrow { margin: 0; font-size: .75rem; color: #92a69a; }
h1 { font-size: 1.375rem; line-height: 1.25; letter-spacing: -.035em; font-weight: 450; margin: 0; }
.real-badge { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .75rem; }
.real-badge i { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
.explorer, .viewer-column { min-width: 0; }
.viewer-shell { background: #121b19; overflow: hidden; border: 1px solid #ffffff16; }
.view-top { min-height: 58px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 9px 22px; background: #15201d; border-bottom: 1px solid var(--line); }
.scene-identity { display: flex; align-items: center; gap: 18px; min-width: 0; }
.scene-number { font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--accent); white-space: nowrap; direction: ltr; }
#active-name { font-size: .875rem; font-weight: 500; line-height: 1.4; }
.view-kind { color: #92a79b; font-size: .75rem; border-inline-start: 1px solid var(--line); padding-inline-start: 18px; }
.view-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.view-actions button { min-height: 38px; border: 0; background: transparent; color: #d5e1d9; font-size: .875rem; padding: 5px 8px; }
.view-actions #info-toggle { display: flex; align-items: center; gap: 6px; color: var(--accent); }
.view-actions button:hover { background: #ffffff0b; }
.stage { position: relative; height: clamp(430px, 68svh, 1000px); width: 100%; background: #0c1211; overflow: hidden; direction: ltr; touch-action: none; }
.stage:focus-visible { outline-offset: -4px; }
.stage img { user-select: none; -webkit-user-drag: none; }
#photo-surface { position: absolute; inset: 0; overflow: hidden; cursor: grab; }
#photo-surface.dragging { cursor: grabbing; }
#photo { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: center; }
#panorama { position: absolute; inset: 0; background: #0c1211; }
#tour-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0c1211; }
.loading { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 11px 18px; background: #10251cef; color: #fff; border: 1px solid #88b09a; border-radius: 3px; max-width: 90%; font-size: .875rem; text-align: center; pointer-events: none; }
.view-controls { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 62px; padding: 9px 18px; border-top: 1px solid var(--line); background: #15201d; }
.view-navigation, .control-buttons { display: flex; align-items: center; gap: 7px; }
.control-buttons { flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
.view-controls button { border: 1px solid #ffffff25; border-radius: 2px; background: transparent; color: #e5eee8; min-width: 42px; min-height: 40px; padding: 4px 10px; font-size: 1rem; }
.view-controls button:hover:not(:disabled) { border-color: #88b09a; background: #273c31; }
.view-controls #reset, .view-controls #view-mode { font-size: .875rem; padding-inline: 15px; }
.view-controls #view-mode { color: var(--accent); border-color: #72b58b77; margin-inline-end: 10px; }
#gesture-hint { font-size: .75rem; line-height: 1.5; color: #a8b9ae; margin: 0 0 0 12px; }
.strip-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 22px 0 14px; }
.strip-heading h2 { margin: 0; font-size: .875rem; font-weight: 500; }
.strip-heading > span { color: #8ea395; font-size: .75rem; }
.scene-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; min-width: 0; padding-bottom: 9px; }
.scene { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 10px 8px; min-width: 0; border-top: 2px solid #ffffff1f; transition: border-color .18s, background .18s; }
.scene img { width: 52px; height: 65px; object-fit: cover; display: block; grid-row: 1 / 3; background: #1f2b24; opacity: .65; }
.scene > span { font-size: .875rem; font-weight: 450; line-height: 1.5; overflow-wrap: anywhere; align-self: end; }
.scene > small { color: #83988a; font-size: .75rem; align-self: start; margin-top: 3px; line-height: 1.4; }
.scene:hover, .scene.selected { border-color: var(--accent); background: #1a2d2277; }
.scene:hover img, .scene.selected img { opacity: 1; }
.scene.selected > span { color: #c4f3d6; }
.showroom-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 23px 0 25px; margin-top: 10px; border-top: 1px solid var(--line); }
.showroom-bottom > span { color: #8ea395; font-size: .75rem; }
.showroom-bottom > a { font-size: .875rem; border-bottom: 1px solid #9fc5af; padding-bottom: 5px; }
footer { display: flex; align-items: center; gap: 24px; padding: 22px 2.1vw; color: #96a99c; font-size: .75rem; border-top: 1px solid #ffffff12; }
footer > span { margin-inline-end: auto; }
.scene-info { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(480px, 100%); height: 100dvh; max-height: 100dvh; max-width: 100%; padding: 0 34px 32px; border: 0; border-inline-start: 1px solid #c0cfc4; background: #f7faf7; color: #142d22; overflow-y: auto; overscroll-behavior: contain; }
.scene-info::backdrop { background: #030c09a8; backdrop-filter: blur(4px); }
.dialog-top { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; margin-bottom: 20px; border-bottom: 1px solid #1d432425; background: #f7faf7; color: #50745c; font-size: .875rem; }
.dialog-top button { color: #264931; border: 1px solid #66897566; background: #fff; min-height: 42px; padding: 6px 13px; font-size: .875rem; }
.scene-info .eyebrow { color: var(--green); }
.scene-info h2 { font-size: 2rem; line-height: 1.25; letter-spacing: -.035em; font-weight: 450; margin: 0 0 20px; }
.scene-info > p:not(.eyebrow) { font-size: 1rem; line-height: 1.8; color: #45604f; }
.view-links { display: grid; gap: 19px; margin: 28px 0; font-size: .875rem; }
.view-links a { width: fit-content; border-bottom: 1px solid #94b39e; padding-bottom: 6px; }
.related { font-weight: 600; color: var(--green); }
.truth-note { display: flex; gap: 13px; padding: 24px 0; border-block: 1px solid #638d742f; }
.note-icon { color: var(--green); font-size: 1.5rem; }
.truth-note h3 { font-size: .875rem; margin: 3px 0 10px; font-weight: 600; }
.truth-note p { font-size: .875rem; color: #55725e; line-height: 1.8; margin: 0; }
.sales { display: grid; gap: 20px; padding: 25px 0; font-size: .875rem; }
.sales > p { font-weight: 600; margin: 0; }
.sales-button { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #fff; background: var(--green); min-height: 52px; padding: 15px 20px; }
.sales-button:hover { background: #164a31; }
.sales-secondary { color: var(--green); font-weight: 600; }
.sales > a:last-child { color: #486a54; overflow-wrap: anywhere; }
.scene-info .model-note { font-size: .875rem !important; padding-top: 20px; border-top: 1px solid #638d742f; }
.viewer-shell:fullscreen, .viewer-shell.expanded { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border: 0; }
.viewer-shell:fullscreen .stage, .viewer-shell.expanded .stage { height: 100%; min-height: 0; }
.viewer-shell.expanded { position: fixed; inset: 0; z-index: 1000; height: 100dvh; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
body.view-expanded, body.details-open { overflow: hidden; }
.pnlm-panorama-info { display: none; }
.no-script { padding: 24px; color: #c5dbcd; }
[dir="rtl"] .scene-info { inset: 0 auto 0 0; }
[dir="rtl"] #gesture-hint { margin: 0 12px 0 0; }
@media(max-width: 1600px) {
  .scene-strip { grid-template-columns: repeat(8, minmax(150px, 1fr)); gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
  .scene { scroll-snap-align: start; }
}
@media(max-width: 1050px) {
  .view-kind { display: none; }
  .scene-identity { gap: 12px; }
  .view-actions { gap: 5px; }
  .stage { height: 66svh; min-height: 440px; }
  #gesture-hint { max-width: 260px; }
}
@media(max-width: 760px) {
  .header { height: 69px; padding: 5px 16px; gap: 10px; }
  .brand img { width: 101px; height: 58px; }
  .top-nav { display: none; }
  .language { padding-inline-start: 13px; }
  .language select { max-width: 144px; }
  main { padding: 0; }
  .heading { padding: 18px 16px 17px; }
  .heading > div { align-items: center; gap: 13px; }
  .heading .eyebrow { display: none; }
  h1 { font-size: 1.25rem; }
  .real-badge { font-size: .75rem; gap: 6px; }
  .viewer-shell { border-inline: 0; }
  .view-top { flex-wrap: wrap; padding: 9px 14px; gap: 6px; }
  .scene-identity { flex: 1 1 100%; }
  #active-name { font-size: .875rem; }
  .scene-number { font-size: .75rem; }
  .view-actions { width: 100%; justify-content: space-between; }
  .view-actions button { min-height: 38px; padding-inline: 0; }
  .stage { height: 57svh; min-height: 350px; max-height: 760px; }
  .view-controls { flex-wrap: wrap; padding: 9px 12px; gap: 9px; min-height: 62px; }
  .view-navigation { flex: 1 1 auto; }
  #gesture-hint { display: none; }
  .control-buttons { gap: 5px; }
  .view-controls button { min-height: 44px; min-width: 38px; padding-inline: 7px; }
  .view-controls #reset, .view-controls #view-mode { padding-inline: 9px; }
  .view-controls #view-mode { margin-inline-end: 4px; }
  .strip-heading { margin: 21px 16px 12px; }
  .strip-heading > span { max-width: 52%; text-align: end; line-height: 1.6; }
  .scene-strip { padding: 0 16px 14px; grid-template-columns: repeat(8, 157px); gap: 12px; }
  .scene { padding: 12px 4px; }
  .scene > span { font-size: .875rem; }
  .showroom-bottom { margin: 3px 16px 0; }
  .showroom-bottom > span { max-width: 45%; line-height: 1.6; }
  footer { padding: 20px 16px; gap: 20px; flex-wrap: wrap; line-height: 1.5; }
  .scene-info { width: 100%; padding-inline: 24px; }
  .scene-info h2 { font-size: 1.75rem; }
}
@media(prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }