.virtual-tour { --vt-bg: #0e2420; --vt-ink: #f9f5ed; --vt-accent: #dfc089; width: min(88vw, 1440px); margin: 0 auto 100px; padding: clamp(24px, 4vw, 60px); background: var(--vt-bg); color: var(--vt-ink); box-sizing: border-box; scroll-margin-top: 100px; }
.virtual-tour *, .virtual-tour *::before, .virtual-tour *::after { box-sizing: border-box; }
.virtual-tour-heading { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: end; margin-bottom: 32px; }
.virtual-tour-eyebrow { font: 600 .75rem/1.5 var(--sans, Arial, sans-serif); color: var(--vt-accent); letter-spacing: .16em; text-transform: uppercase; }
.virtual-tour-heading h1, .virtual-tour-heading h2 { margin: 12px 0 0; color: inherit; font: 400 clamp(36px, 4.4vw, 64px)/1.08 var(--serif, Georgia, serif); letter-spacing: -.025em; overflow-wrap: break-word; }
.virtual-tour-heading em { color: var(--vt-accent); font-weight: 400; }
.virtual-tour-heading p { margin: 0; max-width: 430px; color: #e0e8e3; font-size: 1rem; line-height: 1.75; }
.virtual-tour-stage { position: relative; isolation: isolate; width: 100%; height: clamp(340px, 43vw, 590px); background: #071613; border: 1px solid #536354; overflow: hidden; }
.virtual-tour-cover { position: absolute; inset: 0; background: #142c25; }
.virtual-tour-cover[hidden], .virtual-tour-stop[hidden] { display: none; }
.virtual-tour-cover > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.virtual-tour-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4,18,14,.64),rgba(4,18,14,.18) 65%,rgba(4,18,14,.08)); pointer-events: none; }
.virtual-tour-cover-content { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; }
.virtual-tour-mark { font: italic 400 clamp(48px, 6vw, 82px)/1 var(--serif, Georgia, serif); color: #fff; text-shadow: 0 2px 24px #071613; }
.virtual-tour-property { color: #fff; font-size: .875rem; letter-spacing: .1em; text-shadow: 0 2px 12px #071613; }
.virtual-tour-launch { display: inline-flex; align-items: center; justify-content: center; gap: 12px; max-width: 100%; min-height: 52px; padding: 15px 23px; color: #10271f; background: var(--vt-accent); font: 600 .875rem/1.45 var(--sans, Arial, sans-serif); text-decoration: none; border: 1px solid var(--vt-accent); transition: background .2s, transform .2s; }
.virtual-tour-launch:hover { background: #f2dfbc; transform: translateY(-2px); }
.virtual-tour-scene-count { position: absolute; z-index: 1; bottom: 16px; left: 20px; color: #fff; padding: 4px 9px; background: rgba(4,18,14,.6); font-size: .75rem; }
.virtual-tour-stage iframe { display: block; width: 100%; height: 100%; border: 0; background: #071613; }
.virtual-tour-toolbar { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px 24px; padding: 18px 0 12px; }
.virtual-tour-toolbar p { flex: 1 1 280px; margin: 0; max-width: 620px; font-size: .875rem; line-height: 1.65; color: #e0e8e3; }
.virtual-tour-toolbar > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.virtual-tour-toolbar a, .virtual-tour-stop { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--vt-accent); font: 500 .875rem/1.5 var(--sans, Arial, sans-serif); text-decoration: underline; text-underline-offset: 4px; }
.virtual-tour-stop { padding: 6px 12px; color: #fff; background: transparent; border: 1px solid #8f9e96; text-decoration: none; cursor: pointer; }
.virtual-tour a:focus-visible, .virtual-tour button:focus-visible, .virtual-tour iframe:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.virtual-tour-privacy { margin: 0; color: #b9c7bf; font-size: .75rem; line-height: 1.6; }
.virtual-tour-status { margin: 12px 0 0; color: #e0e8e3; font-size: .875rem; line-height: 1.6; }
.virtual-tour-status:empty { display: none; }
.gallery-page .virtual-tour { margin-top: 64px; }
@media (max-width: 760px) { .virtual-tour { width: 90vw; margin-bottom: 64px; padding: 24px 18px; } .virtual-tour-heading { grid-template-columns: 1fr; gap: 18px; margin-bottom: 24px; } .virtual-tour-heading h1, .virtual-tour-heading h2 { font-size: clamp(32px, 7.3vw, 48px); } .virtual-tour-stage { height: clamp(350px, 66vh, 470px); } .virtual-tour-cover-content { padding: 18px; } .virtual-tour-toolbar { gap: 8px; } .virtual-tour-toolbar > div { justify-content: space-between; width: 100%; } .virtual-tour-launch { padding: 13px 17px; } }
@media (prefers-reduced-motion: reduce) { .virtual-tour-launch { transition: none; } .virtual-tour-launch:hover { transform: none; } }