/* Tovizy Showcase — property presentation sites */
:root {
  --ink: #0d1311; --ink-2: #141c19; --paper: #eee9df; --paper-2: #e4ddd0;
  --fg: #eee9df; --fg-2: rgba(238,233,223,.62); --fg-3: rgba(238,233,223,.38);
  --line: rgba(238,233,223,.16); --accent: #c98b5b; --accent-2: #e2b48c;
  --f-serif: "Instrument Serif", "Times New Roman", serif;
  --f-sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(20px, 4.2vw, 72px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --fs-hero: clamp(64px, 13.5vw, 232px);
  --fs-xxl: clamp(44px, 7.4vw, 128px);
  --fs-xl: clamp(34px, 4.6vw, 76px);
  --fs-l: clamp(24px, 2.6vw, 40px);
  --fs-m: clamp(17px, 1.25vw, 20px);
  --fs-s: 14px; --fs-xs: 11.5px;
}
body[data-theme="ocotillo"] {
  --ink: #16100c; --ink-2: #1f1712; --paper: #f2e9dd; --paper-2: #e8dccc;
  --fg: #f2e9dd; --fg-2: rgba(242,233,221,.62); --fg-3: rgba(242,233,221,.38);
  --line: rgba(242,233,221,.16); --accent: #d08a55; --accent-2: #ecbf94;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--ink); color: var(--fg); font: 400 var(--fs-m)/1.55 var(--f-sans); letter-spacing: -.005em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
::selection { background: var(--accent); color: var(--ink); }
.serif { font-family: var(--f-serif); font-weight: 400; letter-spacing: -.01em; }
.it { font-style: italic; }
.eyebrow { font-size: var(--fs-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--fg-2); font-weight: 500; }
.wrap { padding-left: var(--pad); padding-right: var(--pad); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.line-mask { overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }

/* ---------- Loader ---------- */
.ld { position: fixed; inset: 0; z-index: 90; background: var(--ink); display: grid; place-items: center; pointer-events: none; }
.ld-in { width: min(520px, 80vw); text-align: center; }
.ld-mark { font-family: var(--f-serif); font-size: clamp(40px, 6vw, 72px); line-height: 1; }
.ld-mark span { display: inline-block; }
.ld-bar { margin-top: 28px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.ld-bar i { position: absolute; inset: 0; background: var(--fg); transform-origin: 0 50%; transform: scaleX(0); }
.ld-meta { margin-top: 14px; display: flex; justify-content: space-between; font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); }
.no-js .ld { display: none; }

/* ---------- Top bar ---------- */
.tb { position: fixed; z-index: 60; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px var(--pad); color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.35); transition: color .5s var(--ease), text-shadow .5s; }
.tb.dark { color: var(--ink); text-shadow: none; }
.tb::before { content: ""; position: absolute; inset: 0 0 -30px; background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,0)); opacity: 1; transition: opacity .5s; pointer-events: none; z-index: -1; }
.tb.dark::before, .tb.solid::before { opacity: 0; }
.tb-name { font-family: var(--f-serif); font-size: 22px; line-height: 1; text-decoration: none; letter-spacing: 0; }
.tb-nav { display: flex; gap: clamp(14px, 2.2vw, 34px); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.tb-nav a { text-decoration: none; opacity: .86; transition: opacity .3s; }
.tb-nav a:hover { opacity: 1; }
.tb-cta { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 99px; padding: 10px 18px; text-decoration: none; }
.tb-prog { position: fixed; z-index: 61; left: 0; top: 0; height: 2px; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 860px) { .tb-nav { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.hero canvas, .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero .fallback, .stage .fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.has-gl .fallback { visibility: hidden; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); pointer-events: none; }
.hero-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--pad) clamp(28px, 5vh, 56px); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; }
.hero h1 { grid-column: 1 / -1; font-family: var(--f-serif); font-weight: 400; font-size: var(--fs-hero); line-height: .86; letter-spacing: -.035em; margin-left: -.04em; }
.hero h1 .ch { display: inline-block; will-change: transform; }
.hero-sub { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.86); }
.hero-sub b { font-weight: 500; color: #fff; }
.hero-clock { justify-self: end; text-align: right; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.hero-clock .t { display: block; font-family: var(--f-serif); font-size: clamp(30px, 3vw, 46px); letter-spacing: 0; text-transform: none; color: #fff; line-height: 1; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.sun { width: 120px; height: 38px; margin: 0 0 10px auto; }
.sun path { stroke: rgba(255,255,255,.4); }
.sun circle { fill: var(--accent-2); }
.hero-cue { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; width: 1px; height: 46px; background: rgba(255,255,255,.25); overflow: hidden; }
.hero-cue::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #fff; animation: cue 2.2s var(--ease-io) infinite; }
@keyframes cue { to { top: 100%; } }
.hero-tag { position: absolute; top: 92px; right: var(--pad); text-align: right; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.75); }

/* ---------- Statement ---------- */
.st { background: var(--paper); color: var(--ink); padding: clamp(110px, 18vh, 220px) 0 clamp(90px, 14vh, 170px); }
.st .eyebrow { color: rgba(0,0,0,.5); }
.st-txt { margin-top: 34px; font-family: var(--f-serif); font-size: var(--fs-xl); line-height: 1.04; letter-spacing: -.02em; max-width: 21ch; }
.st-txt .w { opacity: .14; transition: none; }
.facts { margin-top: clamp(70px, 10vh, 120px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid rgba(0,0,0,.14); }
.facts > div { padding: 22px 18px 0 0; }
.facts dt { font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; color: rgba(0,0,0,.5); }
.facts dd { margin-top: 10px; font-family: var(--f-serif); font-size: clamp(40px, 4.4vw, 72px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .facts { grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: 28px; } .sec-head, .mt-grid { grid-template-columns: minmax(0, 1fr); } .mt-grid { gap: 28px; } }

/* ---------- Pinned stages ---------- */
.pin { position: relative; }
.stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #000; }
.ap-caps { position: absolute; left: var(--pad); bottom: clamp(30px, 7vh, 72px); width: min(460px, 80vw); color: #fff; }
.ap-cap { position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0; }
.ap-cap .n { font-size: 12px; letter-spacing: .2em; color: rgba(255,255,255,.7); }
.ap-cap h3 { margin-top: 10px; font-family: var(--f-serif); font-weight: 400; font-size: var(--fs-xl); line-height: .96; letter-spacing: -.02em; }
.ap-cap p { margin-top: 14px; color: rgba(255,255,255,.82); max-width: 38ch; }
.ap-steps { position: absolute; right: var(--pad); bottom: clamp(30px, 7vh, 72px); display: flex; gap: 10px; }
.ap-steps i { width: 54px; height: 2px; background: rgba(255,255,255,.25); position: relative; overflow: hidden; }
.ap-steps i b { position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.ap-head { position: absolute; top: clamp(90px, 14vh, 140px); left: var(--pad); color: #fff; }
.ap-head .eyebrow { color: rgba(255,255,255,.75); }
@media (max-width: 760px) { .ap-steps { bottom: auto; top: clamp(86px, 13vh, 130px); } .ap-steps i { width: 30px; } .ap-head { top: clamp(80px, 12vh, 124px); } }
.stage-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,.6)); }

/* ---------- Materials ---------- */
.mt { padding: clamp(100px, 16vh, 200px) 0; }
.sec-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 64px; align-items: end; }
.sec-head h2 { font-family: var(--f-serif); font-weight: 400; font-size: var(--fs-xxl); line-height: .92; letter-spacing: -.03em; }
.sec-head p { color: var(--fg-2); max-width: 44ch; }
.mt-grid { margin-top: clamp(48px, 7vh, 90px); display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.lens-box { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-2); cursor: none; }
.lens-box > img { width: 100%; height: 100%; object-fit: cover; }
.lens { position: absolute; left: 0; top: 0; width: clamp(150px, 17vw, 260px); aspect-ratio: 1; border-radius: 50%; pointer-events: none; background-repeat: no-repeat; box-shadow: 0 0 0 1px rgba(255,255,255,.7), 0 30px 60px rgba(0,0,0,.45); translate: -50% -50%; will-change: transform; }
.lens::after { content: ""; position: absolute; inset: -12px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; }
.hot { position: absolute; width: 12px; height: 12px; translate: -50% -50%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255,255,255,.18); pointer-events: none; transition: opacity .4s; }
.hot::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.mats li { border-top: 1px solid var(--line); }
.mats li:last-child { border-bottom: 1px solid var(--line); }
.mats button { width: 100%; text-align: left; display: grid; grid-template-columns: 54px 1fr; gap: 18px; align-items: center; padding: 16px 0; }
.mats .sw { width: 54px; height: 54px; border-radius: 50%; background-size: 900% auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transition: transform .5s var(--ease); }
.mats b { display: block; font-family: var(--f-serif); font-weight: 400; font-size: clamp(22px, 1.9vw, 30px); line-height: 1.05; }
.mats span { display: block; margin-top: 4px; font-size: var(--fs-s); color: var(--fg-2); }
.mats li.on .sw { transform: scale(1.12); }
.mats li.on b { color: var(--accent-2); }

.mt-duo { margin-top: clamp(16px, 2vw, 32px); display: grid; grid-template-columns: 7fr 5fr; gap: clamp(16px, 2vw, 32px); align-items: start; }
.mt-duo figure { cursor: none; }
.mt-duo .ph { display: block; overflow: hidden; aspect-ratio: 4 / 3; }
.mt-duo figure:last-child .ph { aspect-ratio: 4 / 5; }
.mt-duo img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.mt-duo figcaption { margin-top: 12px; font-size: var(--fs-s); color: var(--fg-2); max-width: 40ch; }
@media (max-width: 760px) { .mt-duo { grid-template-columns: 1fr; } .mt-duo figure:last-child .ph { aspect-ratio: 4 / 3; } }

/* ---------- Horizontal rooms ---------- */
.hz { position: relative; overflow: hidden; }
.hz-track { display: flex; gap: clamp(16px, 2vw, 32px); padding: 0 var(--pad); height: 100vh; height: 100svh; align-items: center; will-change: transform; }
.hz-intro { flex: 0 0 min(440px, 78vw); align-self: center; }
.hz-intro h2 { font-family: var(--f-serif); font-weight: 400; font-size: var(--fs-xxl); line-height: .92; letter-spacing: -.03em; }
.hz-intro p { margin-top: 22px; color: var(--fg-2); max-width: 34ch; }
.hz-card { flex: 0 0 auto; height: min(70vh, 720px); aspect-ratio: 3 / 2; position: relative; overflow: hidden; cursor: none; }
.hz-card.tall { aspect-ratio: 4 / 5; }
.hz-card img { position: absolute; top: 0; left: -12%; width: 124%; height: 100%; object-fit: cover; will-change: transform; }
.hz-card figcaption { position: absolute; left: 18px; bottom: 16px; right: 18px; display: flex; justify-content: space-between; color: #fff; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.hz-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.45)); pointer-events: none; }
.hz-end { flex: 0 0 22vw; }
@media (max-width: 760px) { .hz-card { height: 58vh; } }

/* ---------- Outdoor (cinemagraph) ---------- */
.od .stage { height: 120vh; }
.od-txt { position: absolute; left: var(--pad); right: var(--pad); top: 50%; translate: 0 -50%; color: #fff; text-align: center; }
.od-txt h2 { font-family: var(--f-serif); font-weight: 400; font-size: var(--fs-xxl); line-height: .86; letter-spacing: -.035em; text-shadow: 0 6px 60px rgba(0,0,0,.25); }
.od-txt p { margin: 26px auto 0; max-width: 44ch; color: rgba(255,255,255,.88); }

/* ---------- Site plan ---------- */
.sp { padding: clamp(100px, 16vh, 200px) 0; background: var(--ink-2); }
.sp-fig { margin-top: clamp(48px, 7vh, 90px); position: relative; }
.sp-fig img { width: 100%; height: auto; }
.sp-fig > svg.plan { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sp-fig .bd { fill: none; stroke: #fff; stroke-width: 1.6; stroke-dasharray: 6 7; vector-effect: non-scaling-stroke; }
.sp-fig .ld-l { stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sp-fig .dot { fill: #fff; }
.sp-lab { position: absolute; translate: 0 -50%; white-space: nowrap; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(10,10,10,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 8px 12px; border: 1px solid rgba(255,255,255,.22); }
.sp-lab.l { translate: -100% -50%; }
.sp-lab em { font-style: normal; color: var(--accent-2); margin-right: 8px; }
.sp-north { position: absolute; right: 18px; top: 18px; width: 40px; height: auto; color: #fff; filter: drop-shadow(0 2px 10px rgba(0,0,0,.4)); }
.sp-scale { position: absolute; left: 18px; bottom: 18px; color: #fff; font-size: 11px; letter-spacing: .14em; }
.sp-scale i { display: block; width: 120px; height: 6px; border: 1px solid #fff; border-top: 0; margin-bottom: 6px; }
@media (max-width: 760px) { .sp-lab { font-size: 9.5px; padding: 5px 7px; letter-spacing: .1em; } }

/* ---------- Gallery ---------- */
.gl { padding: clamp(100px, 16vh, 200px) 0; }
.gl-grid { margin-top: clamp(48px, 7vh, 90px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.gl-grid figure { position: relative; overflow: hidden; cursor: none; grid-column: span 6; }
.gl-grid figure.w8 { grid-column: span 8; } .gl-grid figure.w4 { grid-column: span 4; } .gl-grid figure.w12 { grid-column: span 12; }
.gl-grid img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; transition: transform 1.2s var(--ease); }
.gl-grid figure:hover img { transform: scale(1.04); }
.gl-grid figcaption { margin-top: 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
@media (max-width: 760px) { .gl-grid figure, .gl-grid figure.w8, .gl-grid figure.w4 { grid-column: span 12; } }

/* ---------- Lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 80; display: none; background: rgba(5,5,5,.94); }
.lb.on { display: block; }
.lb img { position: absolute; inset: 0; margin: auto; max-width: 94vw; max-height: 88vh; object-fit: contain; }
.lb-x, .lb-p, .lb-n { position: absolute; color: #fff; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; padding: 14px; }
.lb-x { top: 14px; right: 14px; } .lb-p { left: 14px; top: 50%; translate: 0 -50%; } .lb-n { right: 14px; top: 50%; translate: 0 -50%; }
.lb-c { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: rgba(255,255,255,.7); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }

/* ---------- Enquire ---------- */
.eq { position: relative; padding: clamp(120px, 22vh, 260px) 0 clamp(80px, 12vh, 140px); text-align: center; overflow: hidden; }
.eq-bg { position: absolute; inset: 0; opacity: .32; }
.eq-bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); }
.eq-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.25), var(--ink) 75%); }
.eq-in { position: relative; }
.eq h2 { font-family: var(--f-serif); font-weight: 400; font-size: var(--fs-xxl); line-height: .92; letter-spacing: -.03em; max-width: 13ch; margin: 22px auto 0; }
.eq-btns { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.btn { display: inline-flex; align-items: center; gap: 12px; border-radius: 99px; padding: 18px 30px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--fg); position: relative; overflow: hidden; isolation: isolate; transition: color .5s var(--ease); }
.btn::before { content: ""; position: absolute; inset: 0; background: var(--fg); transform: translateY(101%); transition: transform .6s var(--ease); z-index: -1; border-radius: inherit; }
.btn:hover { color: var(--ink); } .btn:hover::before { transform: translateY(0); }
.btn.solid { background: var(--fg); color: var(--ink); } .btn.solid::before { background: var(--accent-2); }
.eq-agent { margin-top: 70px; display: inline-grid; grid-auto-flow: column; gap: 40px; text-align: left; font-size: var(--fs-s); color: var(--fg-2); }
.eq-agent b { display: block; color: var(--fg); font-weight: 500; }

/* ---------- Footer ---------- */
.ft { border-top: 1px solid var(--line); padding: 34px var(--pad) 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 40px; font-size: 13px; color: var(--fg-3); }
.ft a { color: var(--fg-2); text-decoration: none; } .ft a:hover { color: var(--fg); }
.ft .by { color: var(--fg-2); } .ft .by b { color: var(--fg); font-weight: 500; }

/* ---------- Modal ---------- */
.md { position: fixed; inset: 0; z-index: 85; display: none; place-items: center; background: rgba(0,0,0,.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 20px; }
.md.on { display: grid; }
.md-in { width: min(560px, 100%); background: var(--paper); color: var(--ink); padding: clamp(28px, 4vw, 48px); position: relative; }
.md-in h3 { font-family: var(--f-serif); font-weight: 400; font-size: clamp(30px, 3vw, 44px); line-height: 1; letter-spacing: -.02em; }
.md-in p { margin-top: 16px; color: rgba(0,0,0,.66); }
.md-in .btn { margin-top: 26px; border-color: var(--ink); } .md-in .btn::before { background: var(--ink); } .md-in .btn:hover { color: var(--paper); }
.md-x { position: absolute; right: 16px; top: 14px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }

/* ---------- Cursor ---------- */
.cur { position: fixed; z-index: 95; left: 0; top: 0; pointer-events: none; mix-blend-mode: difference; }
.cur i { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; }
.cur b { position: absolute; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; display: grid; place-items: center; font: 500 11px/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: #000; background: #fff; transform: scale(0); transition: transform .45s var(--ease); }
.cur.big b { transform: scale(1); }
@media (hover: none) { .cur { display: none; } .lens-box, .hz-card, .gl-grid figure { cursor: auto; } }

/* ---------- Page transition veil ---------- */
.veil { position: fixed; inset: 0; z-index: 99; background: var(--accent); transform: translateY(100%); pointer-events: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-cue::after, .hot::after { animation: none; }
}

/* ---------- Compare slider ---------- */
.cmp { position: relative; overflow: hidden; aspect-ratio: 16 / 9; cursor: ew-resize; background: var(--ink-2); user-select: none; touch-action: pan-y; }
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cmp .top { clip-path: inset(0 0 0 var(--x, 50%)); }
.cmp .bar { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 1px; background: #fff; box-shadow: 0 0 20px rgba(0,0,0,.4); }
.cmp .bar::after { content: "⟷"; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; font-size: 18px; }
.cmp-labs { display: flex; justify-content: space-between; margin-top: 12px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
.steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); margin-top: clamp(40px, 6vh, 70px); counter-reset: s; }
.steps4 li { counter-increment: s; }
.steps4 .ph { aspect-ratio: 3 / 2; overflow: hidden; background: var(--ink-2); }
.steps4 img { width: 100%; height: 100%; object-fit: cover; }
.steps4 h3 { margin-top: 14px; font-family: var(--f-serif); font-weight: 400; font-size: var(--fs-l); line-height: 1; }
.steps4 h3::before { content: counter(s, decimal-leading-zero) "  "; font-family: var(--f-sans); font-size: 12px; letter-spacing: .16em; color: var(--fg-3); vertical-align: middle; }
.steps4 p { margin-top: 6px; font-size: var(--fs-s); color: var(--fg-2); }
@media (max-width: 760px) { .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 360 tour ---------- */
.tour { position: relative; height: 100vh; height: 100svh; background: #000; overflow: hidden; }
.tour-view { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.tour-view.drag { cursor: grabbing; }
.tour-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tour-hots { position: absolute; inset: 0; pointer-events: none; transition: opacity .4s; }
.tour-hot { position: absolute; left: 0; top: 0; pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: -23px 0 0 -60px; width: 120px; }
.tour-hot i { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid #fff; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 6px 24px rgba(0,0,0,.35); transform: perspective(200px) rotateX(52deg); transition: transform .5s var(--ease), background .3s; }
.tour-hot i::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: #fff; }
.tour-hot span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.45); padding: 6px 10px; white-space: nowrap; opacity: 0; translate: 0 -6px; transition: opacity .3s, translate .3s; }
.tour-hot:hover i { background: rgba(255,255,255,.4); transform: perspective(200px) rotateX(40deg) scale(1.1); }
.tour-hot:hover span, .tour-hot:focus-visible span { opacity: 1; translate: 0 0; }
@media (hover: none) { .tour-hot span { opacity: 1; translate: 0 0; } }
.tour-ui { position: absolute; inset: 0; pointer-events: none; color: #fff; }
.tour-head { position: absolute; left: var(--pad); top: clamp(86px, 13vh, 130px); text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.tour-head .eyebrow { color: rgba(255,255,255,.8); }
.tour-room { margin-top: 10px; font-family: var(--f-serif); font-weight: 400; font-size: var(--fs-xl); line-height: .95; letter-spacing: -.02em; }
.tour-hint { margin-top: 10px; font-size: 13px; color: rgba(255,255,255,.75); }
.tour-map { position: absolute; right: var(--pad); bottom: clamp(24px, 5vh, 48px); width: min(380px, 42vw); pointer-events: auto; background: rgba(12,12,12,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.18); padding: 10px; }
.tour-map .pl { position: relative; }
.tour-map img { width: 100%; height: auto; opacity: .92; }
.tour-map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tour-map .pt { fill: rgba(255,255,255,.75); stroke: rgba(0,0,0,.4); stroke-width: 1; cursor: pointer; vector-effect: non-scaling-stroke; }
.tour-map .pt.on { fill: var(--accent-2); }
.tour-map .cone { fill: rgba(226,180,140,.38); stroke: none; }
.tour-map p { margin-top: 8px; display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.tour-list { position: absolute; left: var(--pad); bottom: clamp(24px, 5vh, 48px); display: flex; flex-wrap: wrap; gap: 8px; max-width: 46vw; pointer-events: auto; }
.tour-list button { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 9px 14px; border-radius: 99px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; transition: background .3s, color .3s; }
.tour-list button.on, .tour-list button:hover { background: #fff; color: #111; }
@media (max-width: 760px) { .tour-list { display: none; } .tour-map { width: 46vw; bottom: auto; top: clamp(86px, 13vh, 130px); padding: 6px; } .tour-map p { display: none; } .tour-head { top: auto; bottom: 28px; } }

/* ---------- presentations switch ---------- */
.tb-r { display: flex; align-items: center; gap: 18px; }
.tb-all { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; opacity: .86; transition: opacity .3s; }
.tb-all:hover { opacity: 1; }
.tb-name { white-space: nowrap; }
.tb-all .s { display: none; }
@media (max-width: 520px) { .tb-all .l { display: none; } .tb-all .s { display: inline; } .tb-name { font-size: 19px; } .tb-r { gap: 14px; } .tb-cta { padding: 9px 14px; font-size: 10.5px; } }