/* ============================================================
   STUDIO DE VENTE - HIGHLAND MAKELAARS DESIGN
   Pure compositie. Geen gradients. Geen template look.
   Palette: warm papier, diep inkt, dusty gold, stille grijs
   ============================================================ */

:root {
  --paper: #faf8f4;
  --ink: #121210;
  --gold: #9b7a48;
  --rule: #e6e1d6;
  --rule-dark: #1f1f1c;
  --muted: #6f6c64;
  --card: #ffffff;
  --ink-alt: #f2efe8;

  --f-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --t-fast: 0.25s ease-out;
  --t-med: 0.5s cubic-bezier(0.22, 1, 0.36, 1);

  --page-edge: 72px;
  --max: 1380px;
}

/* ======================================================================
   HYBRID HOMES 2026 - PRODUCT EXPERIENCE
   ====================================================================== */
.landing-v2 { --lime:#d7ff45; --night:#0c0d0d; --soft:#e9e9e3; background:var(--soft); color:var(--night); font-family:"DM Sans",sans-serif; }
.landing-v2 .v-logo { font:600 19px/1 "Manrope",sans-serif; letter-spacing:-.07em; white-space:nowrap; }
.landing-v2 .v-logo span { font-weight:300; }
.v-nav { position:fixed; z-index:100; top:0; left:0; right:0; height:82px; padding:0 clamp(24px,4vw,68px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; color:white; border-bottom:1px solid rgba(255,255,255,.16); transition:.35s ease; }
.v-nav.is-scrolled { height:68px; background:rgba(12,13,13,.88); backdrop-filter:blur(20px); }
.v-navlinks { display:flex; gap:38px; font-size:12px; letter-spacing:.08em; }
.v-navlinks a { opacity:.65; transition:.2s; } .v-navlinks a:hover { opacity:1; }
.v-nav-cta { justify-self:end; font-size:12px; letter-spacing:.04em; display:flex; gap:18px; align-items:center; }
.v-nav-cta span { width:32px; height:32px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.35); border-radius:50%; transition:.3s; }
.v-nav-cta:hover span { background:var(--lime); color:#111; border-color:var(--lime); transform:rotate(45deg); }
.v-hero { min-height:100svh; position:relative; overflow:hidden; background:#101211; color:white; display:flex; align-items:flex-end; padding:140px clamp(24px,7vw,110px) clamp(64px,8vh,90px); }
.v-hero::after { content:"";position:absolute;z-index:2;inset:0;pointer-events:none;background:radial-gradient(ellipse 46% 58% at 68% 49%,transparent 30%,rgba(7,8,8,.12) 68%,rgba(7,8,8,.3)),linear-gradient(90deg,rgba(7,8,8,.72),rgba(7,8,8,.12) 54%,transparent 80%); }
.v-hero-media { position:absolute; inset:-3%; background:url("../thumbnails/09-trap-01.webp") center/cover; transform:scale(1.04); filter:saturate(.58) contrast(1.08); will-change:transform,background-position; animation:vHeroIn 1.8s cubic-bezier(.2,.8,.2,1) both,vHeroPan 22s ease-in-out 1.8s infinite alternate; }
.v-hero-field { position:absolute;z-index:2;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;opacity:.72; }
.v-hero-orb{position:absolute;z-index:1;inset:0;width:100%;height:100%;cursor:crosshair;will-change:opacity,filter}.v-hero-glow{position:absolute;z-index:0;left:68%;top:49%;width:min(78vw,1050px);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(215,255,69,.13),rgba(215,255,69,.025) 43%,transparent 69%);animation:vFloat 9s ease-in-out infinite;will-change:opacity}
.v-noise { position:absolute; z-index:3; inset:0; opacity:.05; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
@keyframes vHeroIn { from{opacity:0;transform:scale(1.16)} to{opacity:1;transform:scale(1.04)} }
@keyframes vHeroPan { from{background-position:44% 50%} to{background-position:58% 47%} }
.v-hero-copy { position:relative; z-index:4; width:min(920px,82vw); }
.v-kicker,.v-overline { font-size:10px; text-transform:uppercase; letter-spacing:.21em; font-weight:500; }
.v-kicker { display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.63); margin-bottom:28px; animation:vUp .8s .2s both; }
.v-hero h1 { font:300 clamp(58px,8.8vw,138px)/.85 "Manrope",sans-serif; letter-spacing:-.075em; margin:0 0 34px; animation:vUp 1s .3s both; }
.v-hero h1 em { font-style:normal; color:var(--lime); }
.v-lead { width:min(570px,100%); font-size:clamp(16px,1.4vw,20px); line-height:1.6; font-weight:300; color:rgba(255,255,255,.7); animation:vUp 1s .45s both; }
.v-actions { display:flex; gap:12px; margin-top:40px; animation:vUp 1s .55s both; }
@keyframes vUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:none} }
.v-btn { min-height:56px; padding:0 24px; display:inline-flex; align-items:center; justify-content:center; gap:28px; font-size:12px; letter-spacing:.04em; border:1px solid; transition:.35s cubic-bezier(.2,.8,.2,1); }
.v-btn-light { background:var(--lime); border-color:var(--lime); color:#0c0d0d; } .v-btn-light:hover { background:white; border-color:white; transform:translateY(-3px); }
.v-btn-ghost { border-color:rgba(255,255,255,.35); color:white; backdrop-filter:blur(5px); } .v-btn-ghost:hover { border-color:white; background:rgba(255,255,255,.09); }
.v-play { font-style:normal;font-size:8px;width:24px;height:24px;border:1px solid rgba(255,255,255,.5);border-radius:50%;display:grid;place-items:center;padding-left:1px; }
.v-hero-index { position:absolute;z-index:3;right:clamp(24px,4vw,68px);bottom:88px;display:flex;gap:32px;transform:rotate(-90deg) translateX(100%);transform-origin:right bottom;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5); }
.v-scroll { position:absolute;z-index:3;right:clamp(24px,4vw,68px);bottom:38px;display:flex;align-items:center;gap:14px;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5); }
.v-scroll i { display:block;width:44px;height:1px;background:rgba(255,255,255,.4);position:relative;overflow:hidden; }.v-scroll i::after{content:"";position:absolute;inset:0;background:var(--lime);animation:vScan 2s infinite;transform:translateX(-100%)}
@keyframes vScan{50%,100%{transform:translateX(100%)}}
.v-intro,.v-showcase,.v-process { padding:clamp(90px,11vw,170px) clamp(24px,7vw,110px); }
.v-overline { color:#787a73; margin-bottom:45px; }
.v-intro-grid { display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.55fr);gap:9vw;align-items:end; }
.v-intro h2,.v-showcase h2,.v-process h2,.v-closing h2 { font:300 clamp(38px,5.4vw,82px)/1.04 "Manrope",sans-serif;letter-spacing:-.06em; }.v-intro h2 span{color:#90928b}
.v-intro-copy p { color:#62645f; font-size:15px; line-height:1.75; }.v-intro-copy a{display:flex;justify-content:space-between;border-bottom:1px solid #aaa;padding:22px 0 14px;margin-top:30px;font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.v-metrics { margin-top:100px;border-top:1px solid #bfc0ba;display:grid;grid-template-columns:repeat(4,1fr); }.v-metrics>div{padding:32px 24px 0 0;border-right:1px solid #bfc0ba;min-height:150px}.v-metrics>div:not(:first-child){padding-left:28px}.v-metrics>div:last-child{border:0}.v-metrics strong{display:block;font:300 clamp(27px,3vw,42px)/1 "Manrope";letter-spacing:-.06em;margin-bottom:18px}.v-metrics span{font-size:11px;color:#74766f;}
.v-showcase { background:#101212;color:white; }.v-showcase-head{display:grid;grid-template-columns:1.4fr .6fr;gap:10vw;align-items:end;margin-bottom:58px}.v-showcase .v-overline{color:var(--lime);margin-bottom:18px}.v-showcase-head>p{font-size:14px;line-height:1.7;color:rgba(255,255,255,.55)}
.v-demo-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:14px}.v-demo-card{height:min(70vh,730px);position:relative;overflow:hidden;color:white;background:#222}.v-demo-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent 55%),radial-gradient(500px circle at var(--x,50%) var(--y,50%),transparent,rgba(0,0,0,.18));transition:.2s}.v-demo-card img{width:100%;height:100%;object-fit:cover;filter:saturate(.55);transition:1s cubic-bezier(.2,.8,.2,1)}.v-demo-card:hover img{transform:scale(1.035);filter:saturate(.9)}
.v-card-type{position:absolute;z-index:2;top:24px;right:24px;font-size:9px;letter-spacing:.16em;text-transform:uppercase}
.v-card-bottom{position:absolute;z-index:2;left:28px;right:28px;bottom:28px;display:flex;justify-content:space-between;align-items:end}.v-card-bottom small{font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:var(--lime)}.v-card-bottom h3{font:300 clamp(24px,3vw,45px)/1.1 "Manrope";letter-spacing:-.05em;margin-top:8px}.v-card-bottom>i{font-style:normal;width:54px;height:54px;border:1px solid rgba(255,255,255,.5);border-radius:50%;display:grid;place-items:center;transition:.35s}.v-demo-card:hover .v-card-bottom>i{background:var(--lime);border-color:var(--lime);color:#111;transform:rotate(45deg)}.v-demo-card:hover .v-play-large{transform:scale(1.08)!important}.v-play-large{font-size:11px!important;padding-left:2px}
.v-process { display:grid;grid-template-columns:.8fr 1.2fr;gap:10vw;background:#e9e9e3 }.v-process-title{position:sticky;top:120px;align-self:start}.v-process .v-overline{margin-bottom:26px}.v-process-list article{display:grid;grid-template-columns:1fr auto;gap:24px;padding:35px 0;border-top:1px solid #bfc0ba;align-items:start}.v-process-list article:last-child{border-bottom:1px solid #bfc0ba}.v-process-list h3{font:400 21px/1.2 "Manrope";letter-spacing:-.03em;margin-bottom:12px}.v-process-list p{font-size:13px;line-height:1.65;color:#70726b;max-width:420px}.v-process-list i{font-style:normal;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#878983}
.v-closing { min-height:88vh;background:#0b0d0c;color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;padding:100px 24px}.v-closing::after{content:"";position:absolute;z-index:0;inset:0;background:radial-gradient(ellipse 42% 45% at 50% 50%,rgba(11,13,12,.1),rgba(11,13,12,.65) 75%);pointer-events:none}.v-closing .v-overline{color:var(--lime);margin-bottom:30px;position:relative;z-index:2}.v-closing h2{font-size:clamp(48px,7vw,106px);position:relative;z-index:2}.v-closing .v-btn{margin-top:45px;position:relative;z-index:2}.v-drone-field{position:absolute;z-index:0;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}.v-closing-foot{position:absolute;z-index:2;bottom:35px;left:5vw;right:5vw;display:flex;justify-content:space-between;color:rgba(255,255,255,.4);font-size:9px;letter-spacing:.14em;text-transform:uppercase}
.v-footer{height:112px;padding:0 clamp(24px,4vw,68px);position:relative;overflow:hidden;background:#070908;color:white;border-top:1px solid rgba(255,255,255,.1)}
.v-footer-orb{position:absolute;z-index:1;inset:0;width:100%;height:100%;cursor:crosshair}.v-footer-glow{position:absolute;z-index:0;left:50%;bottom:-48%;width:min(1000px,92vw);aspect-ratio:1;transform:translateX(-50%);background:radial-gradient(circle,rgba(215,255,69,.13),rgba(215,255,69,.025) 42%,transparent 68%)}
.v-footer-top,.v-footer-bottom{position:absolute;z-index:2;left:clamp(24px,4vw,68px);right:clamp(24px,4vw,68px);display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.48);pointer-events:none}.v-footer-top{top:26px}.v-footer-top a{pointer-events:auto;color:white}.v-footer-bottom{bottom:22px}
.v-footer-bottom{align-items:flex-end}.v-footer-contact,.v-footer-credit{display:flex;flex-direction:column;gap:6px}.v-footer-contact a,.v-footer-credit a{pointer-events:auto;transition:color .25s ease}.v-footer-contact a{color:rgba(255,255,255,.82);text-transform:none;letter-spacing:.08em}.v-footer-credit{align-items:flex-end}.v-footer-credit a:hover,.v-footer-contact a:hover{color:var(--lime)}
.reveal{opacity:0;transform:translateY(38px);transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1)}.reveal.is-visible{opacity:1;transform:none}.v-process-list .reveal:nth-child(2){transition-delay:.08s}.v-process-list .reveal:nth-child(3){transition-delay:.16s}

/* shared immersive viewer skin */
.tour-body { font-family:"DM Sans",var(--f-sans); --gold:#d7ff45; --ink:#0c0d0d; --ink-alt:#fff; }
.tour-topbar{padding:18px 28px;background:linear-gradient(180deg,rgba(7,9,8,.85),transparent);border:0;backdrop-filter:none}.tour-brand-logo{width:40px;height:40px;border:1px solid rgba(255,255,255,.38);background:rgba(10,12,11,.2);color:var(--gold);font:500 10px "DM Sans";letter-spacing:-.05em;border-radius:50%;backdrop-filter:blur(12px)}.tour-brand-name{font:500 13px "Manrope";letter-spacing:-.03em}.tour-brand-sub{font-size:8px;letter-spacing:.2em}.icon-btn{border-radius:50%;background:rgba(12,13,13,.3);backdrop-filter:blur(12px)}.tour-bottom{left:22px;right:22px;bottom:20px;padding:18px 20px;background:rgba(10,12,11,.72);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(20px);border-radius:4px}.track-label{color:var(--gold);font-size:8px}.tour-room-text h2{font-family:"Manrope";font-size:clamp(25px,3vw,40px);letter-spacing:-.05em}.room-nav-btn{border-radius:40px;font-size:9px;padding:12px 17px}.room-nav-btn.primary{background:var(--gold);border-color:var(--gold)}.route-progress{border-radius:30px;background:rgba(10,12,11,.6);backdrop-filter:blur(14px)}.pano-thumbs{bottom:130px;border-radius:4px;background:rgba(10,12,11,.6);backdrop-filter:blur(14px)}.video-info-card{background:rgba(10,12,11,.68)!important;backdrop-filter:blur(18px)!important;border:1px solid rgba(255,255,255,.12)!important}.video-info-title{font-family:"Manrope"!important;letter-spacing:-.055em!important}.video-info-title em{color:var(--gold)!important;font-style:normal!important}.video-controls{border-radius:4px!important;background:rgba(10,12,11,.76)!important;backdrop-filter:blur(20px)!important}.loader{background:#0c0d0d}.loader-mark{border-color:var(--gold)}.loader-text{font-family:"Manrope";letter-spacing:.2em;font-size:15px}.loader-sub{font-size:8px;letter-spacing:.22em;text-transform:uppercase}

@media(max-width:800px){.v-nav{grid-template-columns:1fr 1fr;height:70px}.v-navlinks{display:none}.v-nav-cta{font-size:0}.v-nav-cta span{font-size:12px}.v-hero{min-height:100svh;padding:120px 24px max(42px,6svh);align-items:flex-end}.v-hero-media{inset:-5%;background-position:61% center}.v-hero::after{background:linear-gradient(0deg,rgba(7,8,8,.9) 0%,rgba(7,8,8,.28) 75%),linear-gradient(90deg,rgba(7,8,8,.42),transparent)}.v-hero-field{opacity:.48}.v-hero-copy{width:100%}.v-kicker{font-size:8px;margin-bottom:20px}.v-hero h1{font-size:clamp(47px,15.5vw,79px);line-height:.91;margin-bottom:24px}.v-lead{font-size:15px;line-height:1.55;max-width:500px}.v-hero-index,.v-scroll{display:none}.v-actions{align-items:stretch;flex-direction:column;width:min(100%,330px);margin-top:28px}.v-btn{min-height:52px}.v-intro-grid,.v-showcase-head,.v-process{grid-template-columns:1fr}.v-intro-copy{margin-top:30px}.v-metrics{grid-template-columns:1fr 1fr}.v-metrics>div:nth-child(2){border-right:0}.v-demo-grid{grid-template-columns:1fr}.v-demo-card{height:58vh}.v-process-title{position:static;margin-bottom:45px}.v-footer{height:560px}.v-footer-top>span{display:none}.v-footer-bottom span:first-child{display:none}.v-footer-bottom{justify-content:flex-end}.v-footer-wordmark{bottom:8px;white-space:normal;width:90%;text-align:center;line-height:.84!important}.tour-bottom{left:10px;right:10px;bottom:10px}.tour-brand-text{display:block}.tour-brand-sub{display:none}.video-info-card{left:14px!important;right:14px!important;max-width:none!important}.v-closing-foot{display:none}}
@media(max-width:800px) and (orientation:landscape){.v-hero{min-height:660px;padding-top:100px}.v-hero h1{font-size:clamp(46px,10vw,72px)}.v-actions{flex-direction:row;width:auto}.v-btn{min-width:210px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--gold); color: var(--ink); }

/* ---------- numerieke cijfers: ouderwetse serif stijl ---------- */
.numeral {
  font-family: var(--f-display);
  font-weight: 400;
  font-style: italic;
  color: var(--gold);
  letter-spacing: -0.01em;
}

/* ======================================================================
   LANDING - INDEX
   ====================================================================== */
.landing {
  background: var(--paper);
  overflow-x: hidden;
}

.landing > .section,
.landing > .cta-band,
.landing > .site-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* ---------- HERO: editorial, links gebonden, geen centered ---------- */
.landing-hero {
  position: relative;
  min-height: 100vh;
  background: var(--ink);
  color: var(--ink-alt);
  overflow: hidden;
}

.landing-hero::before {
  content: "";
  position: absolute;
  inset: -8%;
  background-image: url("../thumbnails/09-trap-01.webp");
  background-repeat: no-repeat;
  background-size: 180% 130%;
  background-position: 0% 50%;
  filter: saturate(0.55) brightness(0.42) contrast(1.04);
  animation: heroPanoDrift 48s ease-in-out infinite alternate;
  transform: translate3d(-3%, 0, 0) scale(1.04);
}

@keyframes heroPanoDrift {
  from { transform: translate3d(-3%, 0, 0) scale(1.04); }
  to   { transform: translate3d(3%, -1%, 0) scale(1.07); }
}

.hero-grid {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  max-width: var(--max);
  margin: 0 auto;
  padding: 44px var(--page-edge) 80px;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(242, 239, 232, 0.55);
  font-weight: 500;
}
.hero-meta .hm-l, .hero-meta .hm-r { line-height: 1.8; }
.hero-meta .dot-inline { color: var(--gold); }

.hero-body {
  align-self: end;
  max-width: 760px;
  padding-bottom: 48px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  padding-bottom: 32px;
}
.eyebrow::before {
  content: "";
  width: 40px; height: 1px; background: var(--gold);
}

.hero-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(72px, 11vw, 176px);
  line-height: 0.88;
  letter-spacing: -0.035em;
  margin-bottom: 32px;
}
.hero-title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}

.hero-subtitle {
  max-width: 520px;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(242, 239, 232, 0.68);
  font-weight: 300;
  margin-bottom: 56px;
  padding-left: 2px;
}

.hero-cta {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 26px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all var(--t-med);
  position: relative;
  background: transparent;
  color: inherit;
}

.btn-accent {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.btn-accent:hover {
  background: transparent;
  color: var(--gold);
}

.btn-outline {
  border-color: rgba(242, 239, 232, 0.35);
  color: var(--ink-alt);
}
.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.btn svg { width: 15px; height: 15px; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(242, 239, 232, 0.14);
  padding-top: 32px;
  gap: 20px;
}
.stat { min-width: 0; }
.stat-number {
  font-family: var(--f-display);
  font-weight: 400;
  font-style: italic;
  color: var(--gold);
  font-size: 54px;
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.stat-label {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242, 239, 232, 0.5);
  font-weight: 500;
}

.hero-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 40px;
  border-top: 1px solid rgba(242, 239, 232, 0.1);
}
.hf-scroll {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(242, 239, 232, 0.45);
}
.hf-scroll .tick {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, rgba(242,239,232,0.55), transparent);
}
.hf-tag {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 15px;
  color: rgba(242, 239, 232, 0.4);
  letter-spacing: 0.02em;
}

@media (max-width: 880px) {
  :root { --page-edge: 28px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .stat-number { font-size: 44px; }
}

/* ---------- SECTIONS: editorial shell ---------- */
.section {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 140px var(--page-edge);
}

.section-head {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 40px;
  align-items: end;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 72px;
}
.sh-no {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  font-size: 38px;
  line-height: 1;
  padding-bottom: 2px;
}
.sh-texts h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 62px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.sh-texts h2 em {
  font-style: italic;
  color: var(--gold);
}
.sh-texts p {
  max-width: 560px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}
.sh-legend {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  padding-bottom: 6px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr; gap: 20px; }
  .section { padding: 96px 28px; }
}

/* ---------- RUIMTES: ASYMMETRIC GRID (geen auto-fit!) ---------- */
.rooms-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px 28px;
}

.room-card {
  position: relative;
  grid-column: span 6;
  color: var(--ink);
  transition: transform var(--t-med);
  display: block;
}
.room-card:hover { transform: translateY(-3px); }

/* onregelmatige spans (geen template look) */
.room-card:nth-child(1) { grid-column: span 7; grid-row: span 2; }
.room-card:nth-child(2) { grid-column: span 5; }
.room-card:nth-child(3) { grid-column: span 5; }
.room-card:nth-child(4) { grid-column: span 5; }
.room-card:nth-child(5) { grid-column: span 7; grid-row: span 2; }
.room-card:nth-child(6) { grid-column: span 4; }
.room-card:nth-child(7) { grid-column: span 4; }
.room-card:nth-child(8) { grid-column: span 4; }
.room-card:nth-child(9) { grid-column: span 7; }
.room-card:nth-child(10) { grid-column: span 5; }

.room-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
}
.rc-no {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.01em;
}
.rc-type {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.room-card-image {
  position: relative;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--rule);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.room-card:nth-child(1) .room-card-image,
.room-card:nth-child(5) .room-card-image { aspect-ratio: 4 / 5; }
.room-card:nth-child(2) .room-card-image,
.room-card:nth-child(10) .room-card-image { aspect-ratio: 1 / 1; }
.room-card:nth-child(6) .room-card-image,
.room-card:nth-child(7) .room-card-image,
.room-card:nth-child(8) .room-card-image { aspect-ratio: 5 / 4; }

.room-card-image img {
  width: 190%;
  height: 130%;
  max-width: none;
  object-fit: cover;
  object-position: 12% 50%;
  filter: saturate(0.86) contrast(1.03);
  transition: filter 0.7s ease, transform 0.7s ease;
  transform-origin: 50% 50%;
  animation: roomPanoLeft 52s ease-in-out infinite alternate;
  transform: translate3d(-4%, 0, 0);
}

.room-card:nth-child(even) .room-card-image img {
  animation-name: roomPanoRight;
}

.room-card:nth-child(3n) .room-card-image img { animation-duration: 64s; }
.room-card:nth-child(4n) .room-card-image img { animation-duration: 58s; }
.room-card:nth-child(5n) .room-card-image img { animation-duration: 70s; }

@keyframes roomPanoLeft {
  from { transform: translate3d(-4%, 0, 0) scale(1.01); }
  to   { transform: translate3d(-38%, -1.5%, 0) scale(1.04); }
}

@keyframes roomPanoRight {
  from { transform: translate3d(-38%, -1%, 0) scale(1.04); }
  to   { transform: translate3d(-4%, 1%, 0) scale(1.01); }
}

.room-card:hover .room-card-image img {
  filter: saturate(1) contrast(1.06);
  animation-duration: 28s;
}

.rc-nameplate {
  position: absolute;
  left: 18px;
  bottom: 18px;
  right: 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  color: var(--ink-alt);
  z-index: 2;
}
.rc-name-left {
  max-width: 70%;
}
.rc-sub {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242,239,232,0.55);
  margin-bottom: 4px;
  font-weight: 500;
}
.rc-name {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.rc-arrow {
  width: 38px; height: 38px;
  background: var(--ink);
  border: 1px solid rgba(242,239,232,0.25);
  display: grid;
  place-items: center;
  transition: all var(--t-med);
  flex-shrink: 0;
}
.room-card:hover .rc-arrow {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.rc-arrow svg { width: 16px; height: 16px; stroke-width: 1.75; }

.room-card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(18,18,16,0.82) 100%);
}

.room-card-body {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.rc-func {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.01em;
  max-width: 60%;
}
.rc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  max-width: 40%;
}
.rc-tag {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 9px;
  border: 1px solid var(--rule);
  color: var(--muted);
  font-weight: 500;
}

@media (max-width: 1000px) {
  .rooms-grid { grid-template-columns: 1fr 1fr; }
  .room-card, .room-card:nth-child(1n) { grid-column: span 1; grid-row: auto; }
  .room-card:nth-child(1), .room-card:nth-child(5) { grid-column: span 2; }
  .room-card-image,
  .room-card:nth-child(1n) .room-card-image { aspect-ratio: 16/10; }
  .rc-name { font-size: 22px; }
}
@media (max-width: 620px) {
  .rooms-grid { grid-template-columns: 1fr; gap: 44px; }
  .room-card, .room-card:nth-child(1n) { grid-column: span 1; }
  .rc-name { font-size: 24px; }
}

/* ---------- FEATURES: EDITORIAL 3-KOLoms (geen boxes!) ---------- */
.features-wrap {
  display: grid;
  grid-template-columns: 90px 260px 1fr;
  gap: 24px 40px;
  align-items: baseline;
}

.feature-row {
  display: contents;
}
.f-no {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 30px;
  color: var(--gold);
  line-height: 1.1;
  border-top: 1px solid var(--rule);
  padding: 22px 0;
  letter-spacing: -0.01em;
}
.f-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-top: 1px solid var(--rule);
  padding: 26px 0;
  color: var(--ink);
  line-height: 1.35;
}
.f-desc {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  padding: 26px 0 26px 0;
  max-width: 640px;
}

.feature-row:first-child .f-no,
.feature-row:first-child .f-title,
.feature-row:first-child .f-desc { border-top: 1px solid var(--ink); }

.feature-video .f-title::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  background: #b84034;
  margin-right: 10px;
  vertical-align: 1px;
}

@media (max-width: 820px) {
  .features-wrap { grid-template-columns: 60px 1fr; }
  .f-desc { grid-column: 1 / -1; padding-top: 0; margin-top: -8px; border-top: none; }
  .feature-row:first-child .f-desc { border-top: none; }
  .f-no { padding: 20px 0 16px; }
  .f-title { padding: 20px 0 16px; }
}

/* ---------- CTA SECTION: donker, offset compositie ---------- */
.cta-band {
  background: var(--ink);
  color: var(--ink-alt);
  padding: 140px 0 120px;
  margin: 40px 0 0;
  position: relative;
}
.cta-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--page-edge);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
}
.cta-left .sh-no { color: var(--gold); }
.cta-left h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-top: 28px;
  margin-bottom: 20px;
}
.cta-left h2 em { color: var(--gold); font-style: italic; }
.cta-left p {
  color: rgba(242, 239, 232, 0.62);
  max-width: 440px;
  line-height: 1.8;
  font-size: 15px;
  font-weight: 300;
}

.cta-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}
.cta-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.cta-buttons .btn-outline { border-color: rgba(242,239,232,0.25); }
.cta-signoff {
  display: flex;
  gap: 18px;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid rgba(242,239,232,0.1);
  width: 100%;
}
.ct-mark {
  width: 46px; height: 46px;
  background: var(--gold);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
}
.ct-text { font-size: 12px; color: rgba(242,239,232,0.5); letter-spacing: 0.06em; line-height: 1.6; }

@media (max-width: 820px) {
  .cta-inner { grid-template-columns: 1fr; gap: 48px; }
}

/* ---------- FOOTER: extreem minimaal ---------- */
.site-footer {
  background: var(--ink);
  color: rgba(242,239,232,0.4);
  padding: 44px 0 48px;
  border-top: 1px solid rgba(242,239,232,0.06);
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--page-edge);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11.5px;
  letter-spacing: 0.06em;
}
.ft-left, .ft-right { line-height: 1.9; }
.ft-right { text-align: right; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }

/* ======================================================================
   TOUR PAGINA - 360 FOTO
   ====================================================================== */
.tour-body {
  background: var(--ink);
  color: var(--ink-alt);
  overflow: hidden;
}

#tour-app, #video-app {
  position: fixed;
  inset: 0;
}

/* Topbar: hard rule onder, geen gradient */
.tour-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  padding: 18px 32px 16px;
  background: rgba(18,18,16,0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(242,239,232,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tour-brand {
  display: flex; align-items: center; gap: 14px; color: var(--ink-alt);
}
.tour-brand-logo {
  width: 38px; height: 38px;
  background: var(--gold);
  color: var(--ink);
  display: grid; place-items: center;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 20px;
  font-weight: 500;
}
.tour-brand-name {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.01em;
}
.tour-brand-sub {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242,239,232,0.45);
  margin-top: 2px;
}

.tour-actions { display: flex; gap: 8px; }

.icon-btn {
  width: 42px; height: 42px;
  background: transparent;
  border: 1px solid rgba(242,239,232,0.14);
  color: var(--ink-alt);
  display: grid; place-items: center;
  transition: all var(--t-med);
}
.icon-btn:hover {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.icon-btn svg { width: 17px; height: 17px; stroke-width: 1.75; }

/* Bottom bar: hard rule boven, geen gradient */
.tour-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 20;
  padding: 18px 32px 24px;
  background: rgba(18,18,16,0.88);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(242,239,232,0.08);
}

.tour-room-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
}

.track-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.track-label::before {
  content: ""; width: 24px; height: 1px; background: var(--gold);
}
.tour-room-text h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.tour-room-meta {
  display: inline-flex;
  gap: 22px;
  font-size: 12.5px;
  color: rgba(242,239,232,0.55);
  letter-spacing: 0.04em;
}
.tour-room-meta span { display: inline-flex; gap: 10px; align-items: center; }
.tour-room-meta .dot { width: 3px; height: 3px; background: var(--gold); }

.tour-controls-row { display: flex; gap: 10px; align-items: center; }
.room-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  background: transparent;
  border: 1px solid rgba(242,239,232,0.18);
  color: var(--ink-alt);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  transition: all var(--t-med);
}
.room-nav-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.room-nav-btn.primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.room-nav-btn.primary:hover {
  background: transparent;
  color: var(--gold);
}
.room-nav-btn svg { width: 15px; height: 15px; stroke-width: 1.8; }

/* Route progress: dots lineair */
.route-progress {
  position: absolute;
  top: 88px;
  left: 32px;
  z-index: 18;
  display: inline-flex;
  gap: 0;
  align-items: center;
  padding: 8px 14px;
  background: rgba(18,18,16,0.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(242,239,232,0.08);
}
.route-dot {
  width: 22px; height: 2px;
  background: rgba(242,239,232,0.15);
  transition: all var(--t-med);
  cursor: pointer;
  position: relative;
  margin: 0 1px;
}
.route-dot.done { background: rgba(242,239,232,0.5); }
.route-dot.active { background: var(--gold); }
.route-dot.active::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: 8px; height: 8px;
  background: var(--gold);
}

/* Pano thumbs: flat */
.pano-thumbs {
  position: absolute;
  bottom: 110px;
  left: 50%; transform: translateX(-50%);
  z-index: 18;
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  background: rgba(18,18,16,0.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(242,239,232,0.08);
}
.pano-thumb {
  width: 56px; height: 40px;
  background-size: cover;
  background-position: center;
  border: 1px solid transparent;
  cursor: pointer;
  opacity: 0.42;
  transition: all var(--t-med);
  filter: saturate(0.6);
}
.pano-thumb:hover { opacity: 0.8; }
.pano-thumb.active { opacity: 1; border-color: var(--gold); filter: saturate(1); }

/* ---------- PANNELLUM NATIVE HOTSPOTS (geen blur, geen radius!) ---------- */
.pnlm-container { background: #0a0a09; outline: none; }
.pnlm-load-box, .pnlm-lbar, .pnlm-lbox, .pnlm-loading, .pnlm-sprite { display: none !important; }

.pnlm-hotspot {
  transform: translate(-50%, -50%);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0;
  margin: 0;
}

/* Navigatie hotspots: VOLLEDIG VIERKANT, 2px gouden rule, 1e rang groter vierkant pulse */
.hotspot-nav {
  position: relative;
  width: 56px;
  height: 56px;
  background: rgba(18, 18, 16, 0.65);
  border: 1.5px solid var(--ink-alt) !important;
  color: var(--ink-alt);
  display: grid !important;
  place-items: center;
  transition: all var(--t-med);
  cursor: pointer;
  box-sizing: border-box;
}
.hotspot-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--gold);
  animation: hsFrame 3.2s ease-out infinite;
}
@keyframes hsFrame {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.9); opacity: 0; }
}
.hotspot-nav svg { width: 20px; height: 20px; }
.hotspot-nav:hover {
  background: var(--gold);
  border-color: var(--gold) !important;
  color: var(--ink);
}

.hotspot-nav .hs-label {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  padding: 10px 14px;
  background: var(--ink);
  border: 1px solid rgba(242,239,232,0.14);
  white-space: nowrap;
  color: var(--ink-alt);
  font-size: 12px;
  letter-spacing: 0.04em;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast);
  font-weight: 500;
}
.hotspot-nav:hover .hs-label { opacity: 1; }

/* Info / POI hotspots: DIAMANTVORM, i 90° terug */
.hotspot-info {
  position: relative;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1.5px solid var(--gold) !important;
  cursor: pointer;
  display: grid !important;
  place-items: center;
  box-sizing: border-box;
  transition: all var(--t-med);
}
.hotspot-info::before {
  content: "i";
  display: block;
  transform: rotate(-45deg);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
  font-size: 16px;
  line-height: 1;
  transition: color var(--t-fast);
}
.hotspot-info::after { display: none; }
.hotspot-info:hover {
  background: var(--gold);
}
.hotspot-info:hover::before { color: var(--ink); }

.hotspot-info .hs-label {
  position: absolute;
  bottom: calc(100% + 20px);
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background: var(--ink);
  border: 1px solid rgba(242,239,232,0.12);
  white-space: nowrap;
  color: var(--ink-alt);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast);
  font-weight: 500;
}
.hotspot-info:hover .hs-label { opacity: 1; }

/* POI overlay panel: LUXE (geen border-radius card!) */
.overlay {
  position: fixed; inset: 0;
  z-index: 100;
  background: rgba(18,18,16,0.6);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 48px 28px;
  animation: fadeIn 0.35s ease both;
}
.overlay-panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  overflow: hidden;
  animation: panelIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.overlay-visual {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--rule);
  border-bottom: 1px solid var(--rule);
}
.overlay-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.04);
}
.overlay-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(18,18,16,0.45) 100%);
}
.overlay-body {
  padding: 40px 44px 44px;
}
.overlay-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  font-weight: 500;
}
.overlay-label::before {
  content: ""; width: 28px; height: 1px; background: var(--gold);
}
.overlay-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.overlay-desc {
  font-size: 15px;
  line-height: 1.8;
  color: #4e4b45;
}
.overlay-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 32px;
}
.close-overlay {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid rgba(242,239,232,0.2);
  color: var(--ink-alt);
  display: grid; place-items: center;
  transition: all var(--t-fast);
}
.close-overlay:hover {
  background: var(--ink-alt);
  color: var(--ink);
}
.close-overlay svg { width: 14px; height: 14px; }

/* Floorplan sidebar: minimal flat */
.sidebar {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 60;
  width: 400px;
  max-width: 92vw;
  background: var(--paper);
  color: var(--ink);
  transform: translateX(100%);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--rule);
}
.sidebar.open { transform: translateX(0); }

.sidebar-header {
  padding: 28px 32px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sidebar-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.01em;
}
.sidebar-header .icon-btn {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
}
.sidebar-header .icon-btn:hover { background: var(--ink); color: var(--ink-alt); border-color: var(--ink); }

.sidebar-body { padding: 28px 32px; flex: 1; overflow-y: auto; }

.floor-selector {
  display: inline-flex;
  border: 1px solid var(--rule);
  padding: 3px;
  margin-bottom: 28px;
}
.floor-btn {
  padding: 7px 14px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast);
}
.floor-btn.active {
  background: var(--ink);
  color: var(--ink-alt);
}

.floorplan-canvas {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--card);
  border: 1px solid var(--rule);
  margin-bottom: 32px;
  overflow: hidden;
}
.floorplan-canvas::before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px dashed var(--rule);
}
.floorplan-route { position: absolute; inset: 10%; }

.floorplan-room {
  position: absolute;
  transform: translate(-50%,-50%);
  cursor: pointer;
}
.floorplan-room-marker {
  width: 8px; height: 8px;
  background: var(--muted);
  position: relative;
  transition: all var(--t-med);
}
.floorplan-room.active .floorplan-room-marker {
  background: var(--gold);
  transform: scale(1);
  box-shadow: 0 0 0 5px rgba(155,122,72,0.12);
}
.floorplan-room-marker::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid var(--rule);
}
.floorplan-room.active .floorplan-room-marker::after { border-color: var(--gold); inset: -7px; }

.floorplan-room-label {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  font-weight: 500;
}
.floorplan-room.active .floorplan-room-label { color: var(--gold); }

.rooms-list { display: flex; flex-direction: column; }
.rooms-list-title {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
  font-weight: 500;
}
.room-list-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--rule);
  cursor: pointer;
  transition: all var(--t-fast);
}
.room-list-item:last-child { border-bottom: 1px solid var(--rule); }
.room-list-item:hover { padding-left: 6px; }
.room-list-item.active { border-color: var(--ink); }
.rli-no {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--gold);
  font-size: 22px;
  line-height: 1;
}
.rli-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.rli-floor { font-size: 11px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; }
.rli-arrow { color: var(--muted); }
.rli-arrow svg { width: 14px; height: 14px; stroke-width: 1.8; }
.room-list-item.active .rli-name { color: var(--gold); }
.room-list-item.active .rli-arrow { color: var(--gold); }

/* ======================================================================
   LOADER (minimal)
   ====================================================================== */
.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--ink);
  display: grid;
  place-items: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-inner { text-align: center; color: var(--ink-alt); }
.loader-mark {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-bottom: 28px;
}
.loader-mark span {
  width: 28px; height: 28px;
  display: inline-block;
}
.loader-mark .l-a { background: var(--gold); }
.loader-mark .l-b { background: transparent; border: 1px solid rgba(242,239,232,0.25); }
.loader-text {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 28px;
  letter-spacing: 0.01em;
  margin-bottom: 10px;
  color: var(--ink-alt);
  font-weight: 400;
}
.loader-sub {
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(242,239,232,0.45);
}

/* ======================================================================
   KEYFRAMES (geen gradient in keyframes, enkel opacity/transform!)
   ====================================================================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ======================================================================
   360° VIDEO PAGINA
   ====================================================================== */
#video-container {
  position: absolute; inset: 0;
  background: var(--ink);
}
#video-container .pnlm-container { background: var(--ink) !important; }
#video-container video { object-fit: contain; outline: none; }

.video-badge {
  position: absolute;
  top: 100px;
  right: 32px;
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(18,18,16,0.82);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(242,239,232,0.1);
  color: var(--ink-alt);
  font-size: 11.5px;
  letter-spacing: 0.1em;
}
.video-badge-dot {
  width: 7px; height: 7px;
  background: #b84034;
  position: relative;
}
.video-badge-dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid #b84034;
  animation: badgePulse 2.2s ease-out infinite;
}
@keyframes badgePulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2); opacity: 0; }
}
.video-badge-dot.buffering { background: #d38a1f; }
.video-badge-dot.buffering::after { border-color: #d38a1f; animation: blinkBox 0.5s steps(2) infinite; }
@keyframes blinkBox { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

.video-info-card {
  position: absolute;
  left: 32px;
  top: 100px;
  z-index: 26;
  width: 380px;
  max-width: calc(100% - 64px);
  background: rgba(18,18,16,0.88);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(242,239,232,0.08);
  padding: 32px;
  color: var(--ink-alt);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.video-info-card.hidden { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.video-info-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 18px;
}
.video-info-tag::before {
  content: ""; width: 28px; height: 1px; background: var(--gold);
}
.video-info-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.video-info-title em { font-style: italic; color: var(--gold); }
.video-info-desc {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(242,239,232,0.62);
  font-weight: 300;
  margin-bottom: 22px;
}
.video-info-hints {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(242,239,232,0.08);
}
.hint {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: flex-start;
  font-size: 12.5px;
  color: rgba(242,239,232,0.6);
  letter-spacing: 0.01em;
  line-height: 1.55;
}
.hint svg {
  width: 20px; height: 20px;
  color: var(--gold);
  stroke-width: 1.75;
  margin-top: 1px;
}

/* Video controls bar: ALL SQUARE / RECHTHOEKIG, GEEN GRADIENTS */
.video-controls {
  position: absolute;
  left: 32px; right: 32px; bottom: 28px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(18,18,16,0.88);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(242,239,232,0.08);
  color: var(--ink-alt);
}
.vc-btn {
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-alt);
  cursor: pointer;
  padding: 0;
  transition: all var(--t-med);
  flex-shrink: 0;
}
.vc-btn:hover {
  color: var(--gold);
  border-color: rgba(155,122,72,0.35);
}
.vc-btn svg { width: 18px; height: 18px; stroke-width: 1.8; }

.vc-play {
  width: 46px; height: 46px;
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.vc-play:hover {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
}
.vc-play svg { width: 20px; height: 20px; }
.vc-icon-pause { display: none; }
.video-controls.is-playing .vc-icon-play { display: none; }
.video-controls.is-playing .vc-icon-pause { display: block; }

.vc-icon-vol-off { display: none; }
.video-controls.is-muted .vc-icon-vol-on { display: none; }
.video-controls.is-muted .vc-icon-vol-off { display: block; }

.vc-time {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(242,239,232,0.7);
  font-variant-numeric: tabular-nums;
}
.vc-time > span { min-width: 52px; text-align: center; }

.vc-seek-wrap {
  position: relative;
  flex: 1;
  height: 36px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}
.vc-seek-bg, .vc-seek-buffer, .vc-seek-progress {
  position: absolute;
  left: 0; right: 0;
  top: 50%; transform: translateY(-50%);
  height: 2px;
}
.vc-seek-bg { background: rgba(242,239,232,0.1); }
.vc-seek-buffer { background: rgba(242,239,232,0.22); width: 0; right: auto; }
.vc-seek-progress {
  background: var(--gold);
  width: 0;
  right: auto;
}
.vc-seek-handle {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px; height: 12px;
  background: var(--gold);
  transform: translate(-50%,-50%) scale(0.8);
  opacity: 0;
  transition: all var(--t-fast);
}
.vc-seek-wrap:hover .vc-seek-handle,
.vc-seek-wrap:active .vc-seek-handle { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.vc-seek-wrap:hover .vc-seek-bg,
.vc-seek-wrap:hover .vc-seek-buffer,
.vc-seek-wrap:hover .vc-seek-progress { height: 3px; }

.vc-seek-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  transform: translateX(-50%);
  background: var(--ink);
  border: 1px solid rgba(242,239,232,0.12);
  color: var(--ink-alt);
  padding: 6px 10px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-fast);
  white-space: nowrap;
  letter-spacing: 0.04em;
}
.vc-seek-tooltip.show { opacity: 1; }

.vc-rate-wrap { position: relative; }
.vc-rate {
  width: auto;
  min-width: 52px;
  padding: 0 12px;
  height: 34px;
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: rgba(242,239,232,0.8);
}
.vc-rate:hover { background: rgba(155,122,72,0.12); color: var(--gold); border-color: transparent; }
.vc-rate-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  background: var(--ink);
  border: 1px solid rgba(242,239,232,0.08);
  padding: 6px;
  display: none;
  min-width: 92px;
}
.vc-rate-menu.show { display: block; animation: fadeUp 0.2s ease; }
.vc-rate-menu button {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  color: rgba(242,239,232,0.8);
  padding: 8px 12px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all var(--t-fast);
  text-align: left;
  font-weight: 500;
}
.vc-rate-menu button:hover { background: rgba(155,122,72,0.12); color: var(--gold); }
.vc-rate-menu button.active { color: var(--gold); font-weight: 600; }

.vc-volume-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}
.vc-volume-slider-wrap {
  width: 0;
  overflow: hidden;
  transition: width 0.25s ease;
  height: 30px;
  display: flex;
  align-items: center;
  position: relative;
}
.vc-volume-wrap:hover .vc-volume-slider-wrap { width: 82px; padding-right: 6px; }
.vc-volume-slider-bg {
  position: absolute;
  left: 6px; right: 12px;
  height: 2px;
  background: rgba(242,239,232,0.1);
}
.vc-volume-slider-fill {
  position: absolute;
  left: 6px;
  height: 2px;
  width: 70%;
  background: var(--gold);
}
.vc-volume-slider-handle {
  position: absolute;
  left: calc(6px + 70% - 5px);
  top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px;
  background: var(--gold);
}

/* Pannellum zoom controls (video page) */
#video-container .pnlm-zoom-controls {
  position: absolute;
  right: 32px;
  bottom: 112px;
  background: rgba(18,18,16,0.88);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(242,239,232,0.08);
  padding: 4px;
  display: flex;
  flex-direction: column;
}
#video-container .pnlm-zoom-controls button {
  width: 36px; height: 36px;
  background: transparent;
  border: none;
  color: var(--ink-alt);
  font-size: 16px;
  cursor: pointer;
  transition: all var(--t-fast);
  display: grid; place-items: center;
}
#video-container .pnlm-zoom-controls button:hover {
  background: rgba(155,122,72,0.15);
  color: var(--gold);
}
#video-container .pnlm-zoom-controls .pnlm-zoom-in { border-bottom: 1px solid rgba(242,239,232,0.06); }

/* Mobile - responsive */
@media (max-width: 768px) {
  .tour-topbar, .tour-bottom { padding-left: 20px; padding-right: 20px; }
  .tour-topbar { padding-top: 14px; padding-bottom: 14px; }
  .tour-bottom { padding-bottom: 18px; }
  .route-progress { top: 76px; left: 20px; }
  .video-info-card { left: 20px; top: 90px; width: calc(100% - 40px); padding: 22px; }
  .video-badge { right: 20px; top: 90px; }
  .video-controls { left: 16px; right: 16px; bottom: 16px; padding: 12px; gap: 8px; }
  .vc-volume-wrap { display: none; }
  .vc-rate-wrap { display: none; }
  #video-container .pnlm-zoom-controls { right: 16px; bottom: 100px; }
  .pano-thumbs { bottom: 140px; }
}

/* Final cascade: Hybrid Homes immersive UI */
.tour-body { font-family:"DM Sans",sans-serif; --gold:#d7ff45; --ink:#0c0d0d; --ink-alt:#fff; }
.tour-topbar { padding:18px 28px; background:linear-gradient(180deg,rgba(7,9,8,.88),transparent); border:0; backdrop-filter:none; }
.tour-brand-logo { width:40px;height:40px;border:1px solid rgba(255,255,255,.38);background:rgba(10,12,11,.2);color:var(--gold);font:500 10px "DM Sans";letter-spacing:-.05em;border-radius:50%;backdrop-filter:blur(12px) }
.tour-brand-name { font:500 13px "Manrope";letter-spacing:-.03em }.tour-brand-sub{font-size:8px;letter-spacing:.2em}
.icon-btn { border-radius:50%;background:rgba(12,13,13,.3);backdrop-filter:blur(12px) }
.tour-bottom { left:22px;right:22px;bottom:20px;padding:18px 20px;background:rgba(10,12,11,.72);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(20px);border-radius:4px }
.track-label { color:var(--gold);font-size:8px }.tour-room-text h2{font-family:"Manrope";font-size:clamp(25px,3vw,40px);letter-spacing:-.05em}
.room-nav-btn { border-radius:40px;font-size:9px;padding:12px 17px }.room-nav-btn.primary{background:var(--gold);border-color:var(--gold)}
.route-progress { border-radius:30px;background:rgba(10,12,11,.6);backdrop-filter:blur(14px) }.pano-thumbs{bottom:130px;border-radius:4px;background:rgba(10,12,11,.6);backdrop-filter:blur(14px)}
.video-info-card { background:rgba(10,12,11,.68)!important;backdrop-filter:blur(18px)!important;border:1px solid rgba(255,255,255,.12)!important }.video-info-title{font-family:"Manrope"!important;letter-spacing:-.055em!important}.video-info-title em{color:var(--gold)!important;font-style:normal!important}
.video-controls { border-radius:4px!important;background:rgba(10,12,11,.76)!important;backdrop-filter:blur(20px)!important }.loader{background:#0c0d0d}.loader-text{font-family:"Manrope";letter-spacing:.2em;font-size:15px}.loader-sub{font-size:8px;letter-spacing:.22em;text-transform:uppercase}
@media(max-width:768px){.tour-bottom{left:10px;right:10px;bottom:10px}.tour-brand-text{display:block}.tour-brand-sub{display:none}.video-info-card{left:14px!important;right:14px!important;width:auto!important;max-width:none!important}}

.protocol-notice{position:fixed;inset:0;display:grid;place-items:center;padding:24px;background:#0c0d0d;color:#fff}.protocol-notice-inner{width:min(620px,100%);padding:clamp(30px,5vw,60px);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.035)}.protocol-label{display:block;margin-bottom:24px;color:#d7ff45;font-size:9px;letter-spacing:.2em;text-transform:uppercase}.protocol-notice h1{font:300 clamp(34px,5vw,58px)/1.05 "Manrope",sans-serif;letter-spacing:-.055em;margin-bottom:20px}.protocol-notice p{max-width:490px;color:rgba(255,255,255,.6);font-size:14px;line-height:1.7}.protocol-notice .v-btn{margin-top:30px}.protocol-notice small{display:block;margin-top:25px;color:rgba(255,255,255,.4);line-height:1.6}.protocol-notice code{color:rgba(255,255,255,.75);font-family:ui-monospace,SFMono-Regular,monospace}

@media(max-width:800px){
  .landing-v2 .v-footer{height:128px}
  .v-hero-glow{left:50%;top:34%;width:120vw}
  .v-drone-field{opacity:.78}
  .v-hero::after{background:linear-gradient(0deg,rgba(7,8,8,.86) 0%,rgba(7,8,8,.18) 62%,rgba(7,8,8,.2))}
  .v-footer-bottom span:first-child{display:block}.v-footer-contact{align-items:flex-start}.v-footer-credit{align-items:flex-end}
}

/* FAQ */
.v-faq{padding:clamp(95px,11vw,170px) clamp(24px,7vw,110px);display:grid;grid-template-columns:.72fr 1.28fr;gap:10vw;background:#e9e9e3;color:#0c0d0d}
.v-faq-intro{align-self:start;position:sticky;top:120px}.v-faq-intro .v-overline{margin-bottom:24px}.v-faq-intro h2{font:300 clamp(43px,5vw,76px)/.98 "Manrope",sans-serif;letter-spacing:-.06em}.v-faq-intro>p:last-child{max-width:390px;margin-top:28px;color:#6f716b;font-size:14px;line-height:1.75}
.v-faq-list{border-top:1px solid #aeb0a9}.v-faq-list details{border-bottom:1px solid #bfc0ba}.v-faq-list summary{list-style:none;display:grid;grid-template-columns:1fr 32px;gap:24px;align-items:center;padding:29px 0;cursor:pointer;font:400 clamp(17px,1.6vw,22px)/1.35 "Manrope",sans-serif;letter-spacing:-.025em}.v-faq-list summary::-webkit-details-marker{display:none}.v-faq-list summary span{position:relative;width:28px;height:28px}.v-faq-list summary span::before,.v-faq-list summary span::after{content:"";position:absolute;left:7px;right:7px;top:50%;height:1px;background:#0c0d0d;transition:transform .35s ease}.v-faq-list summary span::after{transform:rotate(90deg)}.v-faq-list details[open] summary span::after{transform:rotate(0)}.v-faq-list details>p{max-width:650px;padding:0 55px 30px 0;color:#666862;font-size:14px;line-height:1.75;animation:faqIn .35s ease both}@keyframes faqIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}

/* Cinematic video CTA */
.v-video-cta{position:relative;min-height:clamp(620px,80vh,900px);overflow:hidden;display:grid;place-items:center;padding:90px 24px;background:#0a0c0b;color:#fff;text-align:center}.v-video-cta video{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;filter:saturate(.72) contrast(1.08);animation:vVideoDrift 15s ease-in-out infinite alternate}.v-video-cta-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,9,8,.56),rgba(7,9,8,.76)),radial-gradient(circle at 50% 50%,rgba(83,112,32,.13),rgba(5,7,6,.42) 70%)}.v-video-cta-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:min(900px,100%)}.v-video-cta .v-overline{margin-bottom:25px;color:#d7ff45}.v-video-cta h2{font:300 clamp(49px,7vw,108px)/.94 "Manrope",sans-serif;letter-spacing:-.07em}.v-video-cta-content>p:not(.v-overline){max-width:520px;margin-top:25px;color:rgba(255,255,255,.7);font-size:15px;line-height:1.7}.v-video-cta .v-btn{margin-top:38px}@keyframes vVideoDrift{from{transform:scale(1.01) translateX(-.6%)}to{transform:scale(1.045) translateX(.6%)}}

@media(max-width:800px){.v-faq{grid-template-columns:1fr;gap:55px}.v-faq-intro{position:static}.v-faq-list summary{padding:24px 0;font-size:17px}.v-faq-list details>p{padding-right:30px}.v-video-cta{min-height:690px}.v-video-cta video{inset:0;width:100%;height:100%}.v-video-cta h2{font-size:clamp(45px,14vw,72px)}}
@media(prefers-reduced-motion:reduce){.v-video-cta video{animation:none}}

/* Interactive viewer loader */
.tour-topbar{justify-content:flex-end}
.loader{perspective:900px;background:#080a09}
.loader::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--loader-x,50%) var(--loader-y,50%),rgba(215,255,69,.09),transparent 30%);transition:background .2s ease;pointer-events:none}
.loader-inner{position:relative;width:min(430px,calc(100vw - 48px));text-align:left!important}
.loader-visual{position:relative;width:150px;height:150px;margin:0 auto 46px;transform-style:preserve-3d;animation:loaderFloat 4s ease-in-out infinite}.loader-visual span{position:absolute;inset:0;border:1px solid rgba(215,255,69,.25);border-radius:50%}.loader-visual span:first-child{animation:loaderOrbitA 3.4s linear infinite}.loader-visual span:nth-child(2){animation:loaderOrbitB 4.6s linear infinite}.loader-visual span:nth-child(3){inset:31px;border-color:rgba(215,255,69,.55);animation:loaderPulse 2s ease-in-out infinite}.loader-visual i{position:absolute;left:50%;top:50%;width:7px;height:7px;background:#d7ff45;box-shadow:0 0 25px 7px rgba(215,255,69,.3);transform:translate(-50%,-50%)}
.loader-kicker{margin-bottom:13px;color:rgba(255,255,255,.42);font-size:8px;letter-spacing:.22em;text-transform:uppercase}.loader-text{min-height:34px;margin:0!important;font:300 clamp(25px,4vw,35px)/1.1 "Manrope",sans-serif!important;letter-spacing:-.04em!important;text-transform:none!important;color:#fff}.loader-progress{height:1px;margin-top:30px;background:rgba(255,255,255,.13);overflow:hidden}.loader-progress i{display:block;width:0;height:100%;background:#d7ff45;box-shadow:0 0 12px rgba(215,255,69,.65);transition:width .55s cubic-bezier(.2,.8,.2,1)}.loader-meta{display:flex;justify-content:space-between;margin-top:11px;color:rgba(255,255,255,.38);font-size:8px;letter-spacing:.18em;text-transform:uppercase}.loader-meta strong{color:#d7ff45;font-weight:500;font-variant-numeric:tabular-nums}
@keyframes loaderOrbitA{to{transform:rotateX(70deg) rotateZ(360deg)}}@keyframes loaderOrbitB{from{transform:rotateY(67deg) rotateZ(0)}to{transform:rotateY(67deg) rotateZ(-360deg)}}@keyframes loaderPulse{50%{transform:scale(.78);opacity:.45}}@keyframes loaderFloat{50%{transform:translateY(-8px)}}
@media(max-width:600px){.loader-visual{width:120px;height:120px;margin-bottom:38px}.loader-text{font-size:27px!important}.loader-inner{width:calc(100vw - 56px)}}
@media(prefers-reduced-motion:reduce){.loader-visual,.loader-visual span{animation:none!important}}

/* Viewer progress integrated into the topbar */
.tour-topbar{justify-content:space-between;gap:22px}
.tour-topbar>.route-progress{position:relative;top:auto;left:auto;flex:0 1 auto;padding:8px 12px;margin:0;background:rgba(10,12,11,.48)}
.tour-topbar>.route-progress .route-dot{appearance:none;border:0;padding:0}
.video-route-progress .route-dot{background:linear-gradient(90deg,#d7ff45 var(--segment-progress,0%),rgba(255,255,255,.16) var(--segment-progress,0%));cursor:pointer}
.video-route-progress .route-dot.done,.video-route-progress .route-dot.active{background:linear-gradient(90deg,#d7ff45 var(--segment-progress,100%),rgba(255,255,255,.16) var(--segment-progress,100%))}
.video-route-progress .route-dot.active::after{display:none}
.video-top-play .vc-icon-pause{display:none}.video-top-play.is-playing .vc-icon-play{display:none}.video-top-play.is-playing .vc-icon-pause{display:block}
.video-controls[hidden]{display:none!important}
@media(max-width:600px){.tour-topbar{padding-left:14px;padding-right:14px;gap:10px}.tour-topbar>.route-progress{padding:7px 8px}.tour-topbar>.route-progress .route-dot{width:10px}.tour-actions{gap:5px}.tour-actions .icon-btn{width:38px;height:38px}}

/* Subtle video information and seekable top timeline */
.video-info-card{width:350px;padding:27px;background:rgba(8,10,9,.46)!important;backdrop-filter:blur(9px)!important;border-color:rgba(255,255,255,.09)!important;box-shadow:0 18px 60px rgba(0,0,0,.12)}
.video-info-tag{font-size:8px;letter-spacing:.19em;margin-bottom:14px;color:rgba(215,255,69,.78)}.video-info-tag::before{content:none!important;display:none!important}.video-info-title{font-size:27px!important}.video-info-desc{font-size:13px;color:rgba(255,255,255,.56);margin-bottom:17px}.video-info-hints{gap:8px;opacity:.72}.video-info-close{position:absolute;top:13px;right:13px;width:30px;height:30px;display:grid;place-items:center;background:transparent;border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.65);transition:background .25s,color .25s,border-color .25s}.video-info-close:hover{background:#d7ff45;border-color:#d7ff45;color:#0c0d0d}.video-info-close svg{width:14px;height:14px}
.video-route-shell{display:flex;align-items:center;gap:10px;min-width:0;color:rgba(255,255,255,.5);font-size:8px;font-variant-numeric:tabular-nums;letter-spacing:.08em}.video-route-shell>.route-progress{position:relative;top:auto;left:auto;margin:0;padding:8px 11px;display:flex;flex-shrink:1;background:rgba(10,12,11,.48);cursor:ew-resize}.video-route-shell>.route-progress:focus-visible{outline:1px solid #d7ff45;outline-offset:3px}.video-route-shell .route-dot{pointer-events:none}
@media(max-width:700px){.video-info-card{top:78px!important;padding:22px!important}.video-route-shell{gap:6px}.video-route-shell>.route-progress{padding:7px 6px}.video-route-shell .route-dot{width:8px}.video-route-shell>span{font-size:7px}.video-body .tour-actions .icon-btn:nth-last-child(2){display:none}}

/* Minimal tour room information and edge navigation */
.tour-body .tour-bottom{left:24px;right:auto;bottom:24px;width:auto;max-width:min(440px,calc(100vw - 48px));padding:0;background:transparent;border:0;backdrop-filter:none}
.tour-body .tour-room-info{display:block;padding:15px 18px;background:rgba(8,10,9,.4);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(9px)}
.tour-body .track-label{margin-bottom:6px;font-size:7px;letter-spacing:.18em;color:rgba(215,255,69,.68)}.tour-body .track-label::before{display:none}
.tour-body .tour-room-text h2{margin-bottom:7px;font-size:24px;line-height:1.05;color:rgba(255,255,255,.88)}
.tour-body .tour-room-meta{gap:14px;font-size:10px;color:rgba(255,255,255,.42)}
.tour-side-nav{position:absolute;z-index:21;top:50%;display:flex;align-items:center;gap:9px;padding:10px 12px;background:rgba(8,10,9,.28);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.62);backdrop-filter:blur(8px);transform:translateY(-50%);font:500 8px "DM Sans",sans-serif;letter-spacing:.15em;text-transform:uppercase;transition:background .25s,border-color .25s,color .25s,transform .25s}.tour-side-nav svg{width:17px;height:17px}.tour-side-nav:hover{background:rgba(215,255,69,.9);border-color:#d7ff45;color:#0c0d0d}.tour-side-prev{left:18px}.tour-side-next{right:18px}.tour-side-prev:hover{transform:translate(-3px,-50%)}.tour-side-next:hover{transform:translate(3px,-50%)}
@media(max-width:650px){.tour-body .tour-bottom{left:12px;bottom:12px;max-width:calc(100vw - 24px)}.tour-body .tour-room-info{padding:12px 14px}.tour-body .tour-room-text h2{font-size:20px}.tour-side-nav{padding:10px;top:48%}.tour-side-nav span{display:none}.tour-side-prev{left:8px}.tour-side-next{right:8px}}

/* Three-second cinematic movement between viewpoints */
.flight-transition{position:absolute;z-index:60;inset:0;overflow:hidden;background:#080a09;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility .28s}.flight-transition.active{opacity:1;visibility:visible;pointer-events:auto}.flight-transition video{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;filter:saturate(.7) contrast(1.08)}.flight-transition.active video{animation:flightPush 3s linear both}.flight-transition-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,7,6,.2),rgba(5,7,6,.48)),radial-gradient(circle at 50% 50%,transparent,rgba(5,7,6,.38))}.flight-transition-label{position:absolute;left:50%;bottom:35px;display:flex;align-items:center;gap:14px;transform:translateX(-50%);color:rgba(255,255,255,.65);font-size:8px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}.flight-transition-label i{display:block;width:52px;height:1px;background:rgba(255,255,255,.18);overflow:hidden}.flight-transition-label i::after{content:"";display:block;width:100%;height:100%;background:#d7ff45;transform:translateX(-100%)}.flight-transition.active .flight-transition-label i::after{animation:flightLine 3s linear forwards}.hotspot-pano{border-color:#d7ff45!important;background:rgba(8,10,9,.72)}
@keyframes flightPush{from{transform:scale(1.02)}to{transform:scale(1.1)}}@keyframes flightLine{to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.flight-transition video,.flight-transition-label i::after{animation:none}}

/* Visible panorama hotspots and room menu */
.tour-menu-btn{width:auto!important;padding:0 15px;display:flex!important;grid-template-columns:none!important;gap:8px;border-radius:24px}.tour-menu-btn span{font-size:8px;letter-spacing:.14em;text-transform:uppercase}.tour-menu-btn svg{flex:0 0 auto}
.pnlm-hotspot.hotspot-nav,.pnlm-hotspot.hotspot-info{z-index:12!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.hotspot-nav{box-shadow:0 8px 28px rgba(0,0,0,.28)!important}.hotspot-info{background:rgba(8,10,9,.66)!important;box-shadow:0 0 0 5px rgba(215,255,69,.09),0 8px 24px rgba(0,0,0,.28)!important}.hotspot-info-room{width:36px;height:36px;background:rgba(215,255,69,.16)!important;animation:infoBreathe 2.4s ease-in-out infinite}.hotspot-info-room::before{font-size:18px}.hotspot-pano{animation:hotspotAppear .6s ease both}.hotspot-pano::before{animation:hsFrame 2.2s ease-out infinite}
@keyframes infoBreathe{50%{box-shadow:0 0 0 10px rgba(215,255,69,.03),0 8px 24px rgba(0,0,0,.28)}}@keyframes hotspotAppear{from{opacity:0;filter:blur(5px)}to{opacity:1;filter:none}}
@media(max-width:600px){.tour-menu-btn{padding:0 11px}.tour-menu-btn span{font-size:7px}.hotspot-nav{width:48px;height:48px}}


/* Centered hero and mobile navigation */
.v-hero{align-items:center;justify-content:center;padding-top:120px;padding-bottom:100px;text-align:center}
.v-hero-copy{width:min(940px,86vw);display:flex;flex-direction:column;align-items:center}
.v-kicker{justify-content:center}.v-lead{margin-inline:auto}.v-actions{justify-content:center}
.v-hero-orb{opacity:.9;filter:brightness(1.12)}
.v-hero-glow{left:50%;top:50%;opacity:.8}
.v-hero::after{background:radial-gradient(ellipse 48% 54% at 50% 50%,rgba(7,8,8,.1),rgba(7,8,8,.4) 70%),linear-gradient(0deg,rgba(7,8,8,.34),transparent 55%)}
.v-menu-toggle,.v-mobile-menu{display:none}

@media(max-width:800px){
  body.menu-open{overflow:hidden}
  .v-nav{z-index:120;grid-template-columns:1fr auto}
  .v-nav-cta{display:none}
  .v-menu-toggle{position:relative;z-index:2;display:flex;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:7px;background:transparent;border:1px solid rgba(255,255,255,.2);color:#fff}
  .v-menu-toggle i{display:block;width:18px;height:1px;background:currentColor;transition:transform .35s ease,opacity .25s ease}
  .v-menu-toggle[aria-expanded="true"] i:first-child{transform:translateY(4px) rotate(45deg)}
  .v-menu-toggle[aria-expanded="true"] i:last-child{transform:translateY(-4px) rotate(-45deg)}
  .v-mobile-menu{position:fixed;display:block;visibility:hidden;opacity:0;inset:0;padding:110px 24px 30px;background:rgba(7,9,8,.97);backdrop-filter:blur(22px);transform:translateY(-16px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility .35s;pointer-events:none}
  .v-mobile-menu.is-open{visibility:visible;opacity:1;transform:none;pointer-events:auto}
  .v-mobile-menu nav{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding-bottom:70px}
  .v-mobile-menu a{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.13);font:300 clamp(30px,10vw,48px)/1.1 "Manrope",sans-serif;letter-spacing:-.045em;color:#fff}
  .v-mobile-menu a:last-child{margin-top:25px;padding:18px 20px;border:1px solid #d7ff45;background:#d7ff45;color:#0c0d0d;font:500 12px "DM Sans",sans-serif;letter-spacing:.04em}
  .v-hero{padding:100px 24px 76px;align-items:center;justify-content:center}
  .v-hero-copy{width:100%}.v-hero h1{font-size:clamp(45px,14.7vw,72px)}
  .v-actions{margin-left:auto;margin-right:auto}.v-hero-glow{left:50%;top:38%;opacity:.68}
  .landing-v2 .v-footer{height:238px}
  .v-footer-top{top:28px}.v-footer-top>span{display:none}
  .v-footer-bottom{top:78px;bottom:auto;display:flex;flex-direction:column;align-items:flex-start;gap:26px}
  .v-footer-contact,.v-footer-credit{width:100%;align-items:flex-start;gap:8px}
  .v-footer-credit{padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}
  .v-footer-credit span,.v-footer-credit a{display:block}
}