/* Variation B — Mostviertel Modern · ported from design system */
:root{
  --vb-bg: #F4E9E6;          /* soft rosa background */
  --vb-paper: #EAD9D4;       /* deeper rosa for cards */
  --vb-ink: #2C3A2E;         /* deep green as primary ink */
  --vb-ink2: #3D4A3F;
  --vb-muted: #4E5A51;       /* warm gray-green */
  --vb-line: rgba(44,58,46,.2);
  --vb-ochre: #5A7A4A;       /* sage/olive green accent */
  --vb-sage: #8FA887;

  --vb-sans: 'Bricolage Grotesque', 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --vb-body: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --vb-mono: 'JetBrains Mono', ui-monospace, monospace;
  --vb-serif: 'Instrument Serif', Georgia, serif;
  --vb-display: var(--vb-sans);

  --vb-radius: 6px;
  --vb-radius-pill: 999px;
  --vb-pad-x: 48px;
  --vb-pad-y: 80px;
  --vb-nav-h: 76px;
}

.site-shell.vb-root{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.vb-root main{
  flex:1;
}

.vb-root *{
  box-sizing:border-box;
}

.vb-root h1,
.vb-root h2,
.vb-root h3,
.vb-root h4,
.vb-root p{
  margin:0;
}

.vb-area-feature-grid{
  display:grid;
  gap:24px;
}

.vb-card-grid{
  display:grid;
  gap:24px;
}

.vb-form-card{
  display:grid;
  gap:12px;
  padding:12px;
  border:1px solid rgba(244,233,230,.16);
  border-radius:18px;
  background:rgba(244,233,230,.08);
}

.vb-field{
  border:1px solid rgba(244,233,230,.16);
  border-radius:12px;
  background:rgba(244,233,230,.08);
  padding:14px 16px;
}

.vb-field span,
.vb-chip,
.vb-meta{
  font-family:var(--vb-mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.vb-field strong{
  display:block;
  margin-top:4px;
  color:var(--vb-bg);
  font-family:var(--vb-sans);
  font-weight:500;
}

.vb-product-card,
.vb-course-card{
  overflow:hidden;
  border:1px solid var(--vb-line);
  border-radius:14px;
  background:var(--vb-bg);
  color:var(--vb-ink);
}

.vb-product-img{
  aspect-ratio:1;
  overflow:hidden;
  background:var(--vb-paper);
}

.vb-product-img img,
.vb-room-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s ease;
}

.vb-product-card:hover img,
.vb-rcard:hover img{
  transform:scale(1.05);
}

.vb-product-body,
.vb-course-card{
  padding:24px;
}

.vb-price-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.vb-price{
  font-family:var(--vb-sans);
  font-size:24px;
  font-weight:500;
  white-space:nowrap;
}

.vb-filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:32px;
}

.vb-filter-row button{
  border:1px solid rgba(244,233,230,.28);
  border-radius:999px;
  background:transparent;
  color:rgba(244,233,230,.82);
  padding:10px 16px;
}

.vb-filter-row button.active,
.vb-filter-row button:hover{
  background:var(--vb-bg);
  color:var(--vb-ink);
}

.vb-course-card{
  display:grid;
  gap:24px;
  align-items:center;
}

.vb-course-meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  color:var(--vb-muted);
}

.vb-course-action{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.vb-icon-btn{
  border:0;
  border-radius:999px;
  background:var(--vb-ochre);
  color:#fff;
  padding:12px 18px;
  font-family:var(--vb-sans);
  font-weight:600;
}

.vb-area-news-card{
  text-decoration:none;
}

@media (min-width: 720px){
  .vb-form-card{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .vb-card-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .vb-course-card{
    grid-template-columns:5fr 4fr 3fr;
  }

  .vb-course-action{
    flex-direction:column;
    align-items:flex-end;
  }
}

.vb-root{
  background: var(--vb-bg);
  color: var(--vb-ink2);
  font-family: var(--vb-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
.vb-root a{ color: inherit; text-decoration: none; }
.vb-root img{ display: block; max-width: 100%; }

/* ---------- NAV ---------- */
.vb-nav{position:fixed !important; top:0; left:0; right:0; z-index:50; background:rgba(244,233,230,.96); border:0 !important; border-bottom:0 !important; box-shadow:0 1px 0 rgba(44,58,46,.08); transition:background-color .25s ease, box-shadow .25s ease; padding:0 !important; contain:layout paint; will-change:background-color;}
.vb-nav-transparent{background:transparent !important; box-shadow:none !important;}
.vb-nav-transparent .vb-brand, .vb-nav-transparent .vb-nav-links a{color:var(--vb-bg);}
.vb-nav-transparent .vb-brand{background:transparent; border-color:transparent; box-shadow:none;}
.vb-nav-transparent .vb-nav-links a:hover{background:rgba(255,255,255,.12);}
.vb-nav-transparent .vb-nav-links a.vb-active{background:rgba(244,233,230,.18); color:var(--vb-bg);}
.vb-nav-transparent .vb-burger{background:rgba(255,255,255,.15);}
.vb-nav-transparent .vb-burger span{background:var(--vb-bg);}
.vb-logo{height:48px; width:auto; display:block;}
.vb-nav-transparent .vb-logo{filter:drop-shadow(0 2px 14px rgba(25,19,16,.45));}
@media (max-width: 900px){ .vb-logo{height:40px;} }
.vb-nav-inner{max-width:1480px; margin:0 auto; padding:12px var(--vb-pad-x); display:flex; align-items:center; justify-content:space-between; gap:32px;}
.vb-brand{display:flex; align-items:center; gap:14px; color:var(--vb-ink); padding:10px 16px; border-radius:999px; border:0; background:transparent; transition:color .25s ease;}
.vb-nav-links{display:flex; gap:8px; font-family:var(--vb-sans); font-size:14px; font-weight:500; letter-spacing:-.01em;}
.vb-nav-links a{padding:8px 14px; border-radius:var(--vb-radius-pill); color:var(--vb-ink2); transition:all .2s;}
.vb-nav-links a:hover{background:var(--vb-paper);}
.vb-nav-links a.vb-active{background:var(--vb-ink); color:var(--vb-bg);}
.vb-book{background:var(--vb-ochre); color:#fff; padding:12px 22px; border-radius:var(--vb-radius-pill); font-family:var(--vb-sans); font-weight:600; font-size:14px; letter-spacing:-.005em; transition:background-color .25s ease, color .25s ease; display:inline-flex; align-items:center; gap:8px;}
.vb-book:hover{background:var(--vb-ink); color:#fff;}
.vb-book .vb-dot{width:6px; height:6px; border-radius:50%; background:#fff;}
.vb-burger{display:none; width:42px; height:42px; border-radius:var(--vb-radius-pill); background:var(--vb-paper); border:none; align-items:center; justify-content:center; cursor:pointer; flex-direction:column; gap:4px;}
.vb-burger span{display:block; width:18px; height:1.5px; background:var(--vb-ink);}

.vb-drawer{position:fixed; top:0; right:0; bottom:0; width:80%; max-width:320px; background:var(--vb-bg); z-index:60; padding:80px 28px 28px; display:flex; flex-direction:column; gap:0; transform:translateX(100%); transition:transform .3s ease; border-left:1px solid var(--vb-line); box-shadow:-12px 0 40px rgba(0,0,0,.12);}
.vb-drawer[data-open="1"]{transform:translateX(0);}
.vb-drawer a{padding:18px 0; border-bottom:1px solid var(--vb-line); font-family:var(--vb-sans); font-weight:500; font-size:22px; color:var(--vb-ink); letter-spacing:-.02em;}
.vb-drawer a:last-child{border-bottom:none;}
.vb-scrim{position:fixed; inset:0; background:rgba(0,0,0,.3); z-index:55; opacity:0; pointer-events:none; transition:opacity .2s;}
.vb-scrim[data-open="1"]{opacity:1; pointer-events:auto;}

/* ---------- SECTIONS ---------- */
.vb-section{max-width:1480px; margin:0 auto; padding:var(--vb-pad-y) var(--vb-pad-x);}
.vb-eyebrow{font-family:var(--vb-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--vb-ochre); margin-bottom:24px;}
.vb-sec-head{display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:end; margin-bottom:56px; padding-bottom:32px; border-bottom:1px solid var(--vb-line);}
.vb-sec-head h2{font-family:var(--vb-sans); font-weight:500; font-size:clamp(36px,5.6vw,84px); line-height:.96; letter-spacing:-.035em; color:var(--vb-ink); max-width:14ch;}
.vb-sec-head h2 .vb-it{font-family:var(--vb-serif); font-style:italic; font-weight:400; color:var(--vb-ochre);}
.vb-sec-head .vb-lede{font-size:16px; color:var(--vb-muted); line-height:1.65; max-width:42ch; padding-bottom:8px;}

/* ---------- BUTTONS ---------- */
.vb-root .vb-btn{display:inline-flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 24px; border-radius:var(--vb-radius-pill); font-family:var(--vb-sans); font-weight:600; font-size:15px; transition:background-color .25s ease, color .25s ease, border-color .25s ease; letter-spacing:-.005em;}
.vb-root .vb-btn-primary{background:var(--vb-ink); color:#fff;}
.vb-root .vb-btn-primary:hover{background:var(--vb-ochre); color:#fff;}
.vb-root .vb-btn-secondary{background:transparent; color:var(--vb-ink); border:1px solid var(--vb-ink);}
.vb-root .vb-btn-secondary:hover{background:var(--vb-ink); color:#fff;}
/* On dark backgrounds (hero, dark sections), secondary inverts automatically */
.vb-hero-full .vb-btn-secondary,
.vb-area-feature .vb-btn-secondary,
.vb-areas-promo .vb-btn-secondary,
.vb-on-dark .vb-btn-secondary{color:#fff; border-color:#fff; background:rgba(0,0,0,.28);}
.vb-hero-full .vb-btn-secondary:hover,
.vb-area-feature .vb-btn-secondary:hover,
.vb-areas-promo .vb-btn-secondary:hover,
.vb-on-dark .vb-btn-secondary:hover{background:#fff; color:var(--vb-ink); border-color:#fff;}
.vb-btn .vb-arrow{font-size:18px; line-height:1;}
.vb-root .vb-nav-cta{padding:12px 20px; font-size:14px; gap:10px;}
.vb-root .vb-nav-cta .vb-arrow{font-size:16px;}


/* ---------- PLACEHOLDER ---------- */
.vb-ph{background:repeating-linear-gradient(45deg,#E0CDC8 0 14px,#D4BEB8 14px 28px); display:grid; place-items:center; color:var(--vb-muted); font-family:var(--vb-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;}

/* ---------- FOOTER ---------- */
.vb-footer{background:var(--vb-ink); color:var(--vb-bg); margin-top:0;}
.vb-foot-top{max-width:1480px; margin:0 auto; padding:100px var(--vb-pad-x) 60px;}
.vb-foot-top h2{font-family:var(--vb-sans); font-weight:500; font-size:clamp(48px,8vw,128px); line-height:.92; letter-spacing:-.04em; color:var(--vb-bg); max-width:14ch; margin-bottom:40px;}
.vb-foot-top h2 .vb-it{font-family:var(--vb-serif); font-style:italic; font-weight:400; color:var(--vb-ochre);}
.vb-foot-cols{max-width:1480px; margin:0 auto; padding:48px var(--vb-pad-x) 32px; border-top:1px solid rgba(255,255,255,.12); display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px;}
.vb-foot-cols h4{font-family:var(--vb-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:#9a8b87; margin-bottom:18px;}
.vb-foot-cols a{display:block; padding:5px 0; color:var(--vb-bg); font-family:var(--vb-sans); font-weight:400; font-size:15px; transition:color .2s;}
.vb-foot-cols a:hover{color:var(--vb-ochre);}
.vb-foot-brand p{font-family:var(--vb-body); font-size:14px; color:#c9b8b3; line-height:1.6; max-width:34ch; margin-top:18px;}
.vb-foot-bot{max-width:1480px; margin:0 auto; padding:20px var(--vb-pad-x); border-top:1px solid rgba(255,255,255,.08); display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between; font-family:var(--vb-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#9a8b87;}
.vb-foot-bot a{margin-left:18px; color:#9a8b87;}

/* ---------- HERO FULL ---------- */
.vb-hero-full{position:relative; width:100%; height:100vh; height:100svh; overflow:hidden; background:var(--vb-paper); margin-top:0;}
.vb-hero-full > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:translateZ(0); will-change:transform;}
.vb-hero-full::after{content:""; position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(ellipse 90% 70% at 20% 90%, rgba(10,12,14,.78) 0%, rgba(10,12,14,.35) 45%, rgba(10,12,14,0) 75%),
  linear-gradient(180deg, rgba(10,12,14,.45) 0%, rgba(10,12,14,.05) 30%, rgba(10,12,14,.55) 75%, rgba(10,12,14,.88) 100%);}
.vb-hero-full .vb-hero-content{position:absolute; inset:auto 0 0 0; max-width:1480px; margin:0 auto; padding:0 var(--vb-pad-x) clamp(48px, 7vw, 96px); z-index:2; color:var(--vb-bg); text-shadow:0 2px 24px rgba(0,0,0,.45);}
.vb-hero-full .vb-hero-eyebrow{color:rgba(255,255,255,.95); margin-bottom:24px; font-weight:500;}
.vb-hero-full .vb-hero-eyebrow .vb-dot{background:var(--vb-ochre);}
.vb-hero-full h1{font-family:var(--vb-sans); font-weight:500; font-size:clamp(48px, 8.5vw, 132px); line-height:.92; letter-spacing:-.045em; max-width:14ch; margin-bottom:28px; color:#fff; text-shadow:0 4px 32px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);}
.vb-hero-full h1 .vb-it{font-family:var(--vb-serif); font-style:italic; font-weight:400; color:var(--vb-ochre);}
.vb-hero-full .vb-lede{font-family:var(--vb-body); font-size:clamp(16px,1.4vw,19px); line-height:1.6; max-width:54ch; color:rgba(255,255,255,.98); margin-bottom:32px; text-shadow:0 2px 16px rgba(0,0,0,.55);}
.vb-hero-full .vb-actions{display:flex; gap:12px; flex-wrap:wrap;}
.vb-hero-full .vb-btn{text-shadow:none; box-shadow:0 8px 28px rgba(0,0,0,.35);}
.vb-hero-full .vb-btn-primary{background:#fff; color:var(--vb-ink); font-weight:600;}
.vb-hero-full .vb-btn-primary:hover{background:var(--vb-ochre); color:#fff;}
.vb-hero-full .vb-btn-secondary{color:#fff; border-color:rgba(255,255,255,.7); background:rgba(255,255,255,.08); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); font-weight:500;}
.vb-hero-full .vb-btn-secondary:hover{border-color:#fff; background:rgba(255,255,255,.18);}

/* ---------- PILLARS (3 main areas) ---------- */
.vb-pillars{display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;}
.vb-pillar{display:flex; flex-direction:column; background:var(--vb-paper); border-radius:8px; overflow:hidden;}
.vb-pillar-img{aspect-ratio: 4/3; overflow:hidden; background:#d9cdb4;}
.vb-pillar-img img{width:100%; height:100%; object-fit:cover;}
@media (hover: hover){ .vb-pillar-img img{transition:transform .6s;} .vb-pillar:hover .vb-pillar-img img{transform:scale(1.04);} }
.vb-pillar-body{padding:32px 28px 32px; display:flex; flex-direction:column; gap:14px; flex:1;}
.vb-pillar-eyebrow{font-family:var(--vb-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--vb-ochre);}
.vb-pillar h3{font-family:var(--vb-sans); font-weight:500; font-size:30px; letter-spacing:-.025em; color:var(--vb-ink); line-height:1.05;}
.vb-pillar h3 .vb-it{font-family:var(--vb-serif); font-style:italic; font-weight:400; color:var(--vb-ochre);}
.vb-pillar p{font-size:15.5px; line-height:1.6; color:var(--vb-muted);}
.vb-pillar-cta{margin-top:auto; padding-top:8px;}
.vb-pillar-cta .vb-link{font-family:var(--vb-sans); font-weight:500; font-size:14px; color:var(--vb-ink); display:inline-flex; align-items:center; gap:8px; padding-bottom:4px; border-bottom:1px solid var(--vb-ink); transition:color .2s, border-color .2s;}
.vb-pillar-cta .vb-link:hover{color:var(--vb-ochre); border-color:var(--vb-ochre);}

.vb-pillar-news{border-top:1px solid var(--vb-line); padding:22px 28px 26px; background:rgba(255,255,255,.35);}
.vb-pillar-news .vb-news-meta{font-family:var(--vb-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--vb-muted); margin-bottom:10px; display:flex; gap:10px; align-items:center;}
.vb-pillar-news .vb-news-meta .vb-d{width:4px; height:4px; border-radius:50%; background:var(--vb-ochre);}
.vb-pillar-news h4{font-family:var(--vb-sans); font-weight:500; font-size:17px; line-height:1.25; letter-spacing:-.015em; color:var(--vb-ink); margin-bottom:8px;}
.vb-pillar-news p{font-size:14px; line-height:1.55; color:var(--vb-muted); margin-bottom:14px;}
.vb-pillar-news .vb-more{font-family:var(--vb-sans); font-weight:500; font-size:13px; color:var(--vb-ink); display:inline-flex; gap:6px; align-items:center;}
.vb-pillar-news .vb-more::after{content:"→";}
.vb-pillar-news .vb-more:hover{color:var(--vb-ochre);}

@media (max-width: 900px){
  :root{ --vb-nav-h: 84px; }
  .vb-pillars{grid-template-columns:1fr; gap:20px;}
  .vb-hero-full{height:100vh; height:100svh;}
}

/* ---------- HERO ---------- */
.vb-hero{max-width:1480px; margin:0 auto; padding:48px var(--vb-pad-x) 0;}
.vb-hero-top{display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:end;}
.vb-hero-eyebrow{font-family:var(--vb-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--vb-muted); display:flex; gap:18px; align-items:center; margin-bottom:36px; flex-wrap:wrap;}
.vb-hero-eyebrow .vb-dot{width:6px; height:6px; border-radius:50%; background:var(--vb-ochre);}
.vb-hero h1{font-family:var(--vb-sans); font-weight:500; font-size:clamp(64px, 12vw, 200px); line-height:.88; letter-spacing:-.05em; color:var(--vb-ink); margin-bottom:8px;}
.vb-hero h1 .vb-it{font-family:var(--vb-serif); font-style:italic; font-weight:400; color:var(--vb-ochre);}
.vb-hero-side .vb-lede{font-family:var(--vb-body); font-size:18px; line-height:1.55; color:var(--vb-ink2); max-width:36ch; margin-bottom:24px;}
.vb-hero-side .vb-actions{display:flex; flex-direction:column; gap:10px; align-items:flex-start;}

.vb-hero-photo{aspect-ratio: 21 / 10; overflow:hidden; border-radius:6px; margin-top:48px; position:relative; background:var(--vb-paper);}
.vb-hero-photo img{width:100%; height:100%; object-fit:cover;}
.vb-meta-tag{position:absolute; bottom:18px; left:18px; background:rgba(244,233,230,.94); padding:10px 14px; border-radius:999px; font-family:var(--vb-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; display:flex; gap:14px; align-items:center;}
.vb-meta-tag .vb-d{width:5px; height:5px; border-radius:50%; background:var(--vb-ochre);}
.vb-rating{position:absolute; bottom:18px; right:18px; background:var(--vb-ink); color:var(--vb-bg); padding:14px 22px; border-radius:999px; display:flex; align-items:center; gap:14px;}
.vb-rating .vb-num{font-family:var(--vb-sans); font-size:32px; font-weight:600; line-height:1; letter-spacing:-.02em;}
.vb-rating .vb-lbl{font-family:var(--vb-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; line-height:1.3; opacity:.8;}

/* TICKER */
.vb-ticker{padding:24px 0; overflow:hidden; border-top:1px solid var(--vb-line); border-bottom:1px solid var(--vb-line); margin:48px auto 0; background:var(--vb-bg);}
.vb-ticker-track{display:flex; gap:48px; white-space:nowrap; font-family:var(--vb-sans); font-weight:500; font-size:18px; letter-spacing:-.01em; color:var(--vb-ink); animation: vb-ticker 35s linear infinite;}
.vb-ticker-track > span{display:flex; align-items:center; gap:48px;}
.vb-ticker-track .vb-sep{color:var(--vb-ochre); font-family:var(--vb-serif); font-style:italic;}
@keyframes vb-ticker { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ROOM CARDS */
.vb-room-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.vb-rcard{background:var(--vb-paper); border-radius:6px; overflow:hidden; position:relative; transition:transform .3s; display:block;}
.vb-rcard:hover{transform:translateY(-4px);}
.vb-rcard .vb-img{aspect-ratio:4/3.4; overflow:hidden; background:#d9cdb4; position:relative;}
.vb-rcard .vb-img img{width:100%; height:100%; object-fit:cover;}
@media (hover: hover){ .vb-rcard .vb-img img{transition:transform .6s;} .vb-rcard:hover .vb-img img{transform:scale(1.04);} }
.vb-rcard .vb-nr{position:absolute; top:14px; left:14px; background:var(--vb-bg); color:var(--vb-ink); padding:6px 10px; border-radius:999px; font-family:var(--vb-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; z-index:1;}
.vb-rcard .vb-body{padding:24px 22px 26px;}
.vb-rcard .vb-name{font-family:var(--vb-sans); font-weight:500; font-size:24px; color:var(--vb-ink); letter-spacing:-.02em; margin-bottom:6px;}
.vb-rcard .vb-desc{font-size:14px; color:var(--vb-muted); margin-bottom:18px;}
.vb-rcard .vb-foot-row{display:flex; justify-content:space-between; align-items:end;}
.vb-rcard .vb-price{font-family:var(--vb-sans); font-size:28px; font-weight:500; color:var(--vb-ink); letter-spacing:-.02em;}
.vb-rcard .vb-price .vb-u{font-family:var(--vb-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--vb-muted); display:block;}
.vb-rcard .vb-gobtn{width:42px; height:42px; border-radius:50%; background:var(--vb-ink); color:var(--vb-bg); display:grid; place-items:center; font-size:18px; transition:background .2s;}
.vb-rcard:hover .vb-gobtn{background:var(--vb-ochre);}

/* BACKSTUBE FEATURE */
.vb-back-feature{display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:80px; border-top:1px solid var(--vb-line); border-bottom:1px solid var(--vb-line); max-width:1480px; margin-left:auto; margin-right:auto;}
.vb-back-feature .vb-left{padding:80px 48px 80px 48px;}
.vb-back-feature .vb-right{aspect-ratio: 1/1; background:var(--vb-paper); overflow:hidden; position:relative;}
.vb-back-feature .vb-right img{width:100%; height:100%; object-fit:cover;}
.vb-back-feature h2{font-family:var(--vb-sans); font-weight:500; font-size:clamp(48px,6.4vw,96px); line-height:.96; letter-spacing:-.04em; color:var(--vb-ink); margin-bottom:32px;}
.vb-back-feature h2 .vb-it{font-family:var(--vb-serif); font-style:italic; font-weight:400; color:var(--vb-ochre);}
.vb-back-feature p{font-size:17px; line-height:1.65; color:var(--vb-ink2); max-width:44ch; margin-bottom:18px;}
.vb-stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:40px; padding-top:28px; border-top:1px solid var(--vb-line);}
.vb-stat .vb-n{font-family:var(--vb-sans); font-size:48px; font-weight:500; color:var(--vb-ochre); letter-spacing:-.03em; line-height:1;}
.vb-stat .vb-l{font-family:var(--vb-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--vb-muted); margin-top:8px;}

/* COURSES STRIP */
.vb-courses-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:0;}
.vb-cstrip{padding:36px 28px 32px 0; border-right:1px solid var(--vb-line);}
.vb-cstrip:last-child{border-right:none; padding-right:0;}
.vb-cstrip .vb-date{font-family:var(--vb-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--vb-ochre); margin-bottom:18px;}
.vb-cstrip h4{font-family:var(--vb-sans); font-weight:500; font-size:22px; color:var(--vb-ink); letter-spacing:-.02em; line-height:1.15; margin-bottom:10px;}
.vb-cstrip p{font-size:14px; color:var(--vb-muted); line-height:1.6; margin-bottom:18px;}
.vb-cstrip .vb-more{font-family:var(--vb-sans); font-weight:500; font-size:13px; color:var(--vb-ink); display:inline-flex; gap:8px; align-items:center;}
.vb-cstrip .vb-more::after{content:"→";}

/* FAMILY BLEED */
.vb-family-bleed{background:var(--vb-ink); color:var(--vb-bg); margin:80px 0 0; padding:0;}
.vb-family-bleed .vb-inner{max-width:1480px; margin:0 auto; padding:100px var(--vb-pad-x); display:grid; grid-template-columns:1fr 1.2fr; gap:80px; align-items:center;}
.vb-family-bleed .vb-photo{aspect-ratio:4/5; overflow:hidden; border-radius:6px;}
.vb-family-bleed .vb-photo img{width:100%; height:100%; object-fit:cover;}
.vb-family-bleed h2{font-family:var(--vb-sans); font-weight:500; font-size:clamp(48px,6.4vw,104px); line-height:.94; letter-spacing:-.04em; color:var(--vb-bg); margin-bottom:32px;}
.vb-family-bleed h2 .vb-it{font-family:var(--vb-serif); font-style:italic; font-weight:400; color:var(--vb-ochre);}
.vb-family-bleed p{font-size:17px; line-height:1.7; color:#c9b8b3; max-width:46ch; margin-bottom:16px;}
.vb-yearly{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; padding-top:32px; border-top:1px solid rgba(255,255,255,.12);}
.vb-yearly .vb-n{font-family:var(--vb-sans); font-size:56px; font-weight:500; color:var(--vb-ochre); letter-spacing:-.03em; line-height:1;}
.vb-yearly .vb-l{font-family:var(--vb-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#c9b8b3; margin-top:10px;}

/* QUOTES */
.vb-quotes-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.vb-qcard{background:var(--vb-paper); border-radius:6px; padding:32px 28px; display:flex; flex-direction:column; gap:24px;}
.vb-qcard .vb-stars{font-family:var(--vb-mono); font-size:13px; letter-spacing:.16em; color:var(--vb-ochre);}
.vb-qcard blockquote{font-family:var(--vb-sans); font-size:22px; font-weight:400; line-height:1.35; color:var(--vb-ink); letter-spacing:-.015em; flex:1;}
.vb-qcard cite{font-family:var(--vb-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--vb-muted); font-style:normal;}

/* GALLERY */
.vb-gallery-grid{display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:140px; gap:14px;}
.vb-gph{overflow:hidden; border-radius:6px; background:var(--vb-paper);}
.vb-gph img{width:100%; height:100%; object-fit:cover;}
.vb-gph:nth-child(1){grid-column:span 3; grid-row:span 3;}
.vb-gph:nth-child(2){grid-column:span 2; grid-row:span 2;}
.vb-gph:nth-child(3){grid-column:span 1; grid-row:span 2;}
.vb-gph:nth-child(4){grid-column:span 2;}
.vb-gph:nth-child(5){grid-column:span 1;}
.vb-gph:nth-child(6){grid-column:span 3; grid-row:span 2;}
.vb-gph:nth-child(7){grid-column:span 2;}
.vb-gph:nth-child(8){grid-column:span 1;}

/* WELCOME body text */
.vb-welcome-body p{font-family:var(--vb-body); font-size:17px; line-height:1.7; color:var(--vb-ink2); margin-bottom:16px;}
.vb-welcome-body p:last-child{margin-bottom:0;}

/* RESPONSIVE */
@media (max-width: 1180px){
  :root{ --vb-pad-x:36px; --vb-pad-y:64px; }
  .vb-nav-links{gap:2px;}
  .vb-nav-links a{padding:8px 10px; font-size:13px;}
  .vb-nav-inner{gap:16px;}
}
@media (max-width: 900px){
  :root{ --vb-pad-x:28px; --vb-pad-y:56px; }
  .vb-nav-links{display:none;}
  .vb-burger{display:flex;}
  .vb-nav-inner{padding:14px var(--vb-pad-x);}
  .vb-book{padding:10px 16px; font-size:13px;}
  .vb-root .vb-nav-cta{display:none;}

  .vb-sec-head{grid-template-columns:1fr; gap:24px; padding-bottom:24px; margin-bottom:40px;}
  .vb-sec-head h2{max-width:18ch;}
  .vb-foot-cols{grid-template-columns:1fr 1fr; gap:32px;}
  .vb-foot-top{padding:64px var(--vb-pad-x) 40px;}

  .vb-hero{padding:24px var(--vb-pad-x) 0;}
  .vb-hero-top{grid-template-columns:1fr; gap:24px; align-items:start;}
  .vb-hero h1{font-size:clamp(40px,9vw,72px);}
  .vb-hero-photo{margin-top:24px; aspect-ratio: 16/10;}
  .vb-rating{padding:10px 16px; gap:10px;}
  .vb-rating .vb-num{font-size:24px;}
  .vb-meta-tag{padding:8px 12px; font-size:9px; gap:8px;}

  .vb-room-cards, .vb-quotes-grid, .vb-courses-strip, .vb-back-feature, .vb-family-bleed .vb-inner{grid-template-columns:1fr;}
  .vb-back-feature .vb-left{padding:48px var(--vb-pad-x);}
  .vb-back-feature .vb-right{aspect-ratio: 16/10;}
  .vb-stat-row, .vb-yearly{grid-template-columns:repeat(3,1fr); gap:14px;}
  .vb-stat .vb-n, .vb-yearly .vb-n{font-size:36px;}

  .vb-cstrip{border-right:none; border-bottom:1px solid var(--vb-line); padding:24px 0;}
  .vb-cstrip:last-child{border-bottom:none;}

  .vb-ticker-track{font-size:14px; gap:24px;}
  .vb-family-bleed .vb-inner{gap:32px;}

  .vb-gallery-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:120px;}
  .vb-gph:nth-child(1){grid-column:span 2; grid-row:span 2;}
  .vb-gph:nth-child(n+2){grid-column:span 1; grid-row:span 1;}
}
@media (max-width: 560px){
  :root{ --vb-pad-x:20px; --vb-pad-y:48px; }
  .vb-foot-cols{grid-template-columns:1fr;}
  .vb-foot-top h2{font-size:clamp(40px,12vw,64px);}
  .vb-foot-bot{flex-direction:column; gap:6px;}
  .vb-foot-bot a{margin-left:0; margin-right:14px;}
  .vb-stat-row, .vb-yearly{grid-template-columns:1fr 1fr;}
  .vb-ticker{display:none;}
  .vb-btn{padding:14px 18px; font-size:14px;}
}

/* ---------- VIDEO SECTION ---------- */
.vb-video-section{background:var(--vb-bg);}
.vb-video-frame{position:relative; width:100%; max-width:1240px; margin:24px auto 0; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#000; box-shadow:0 30px 80px -30px rgba(25,19,16,.45), 0 2px 0 rgba(44,58,46,.08);}
.vb-video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}
.vb-video-cta{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:32px;}
@media (max-width: 700px){
  .vb-video-frame{border-radius:8px; margin-top:16px;}
  .vb-video-cta{margin-top:22px;}
}

/* ---------- YOUTUBE FACADE ---------- */
.vb-yt-facade{position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; cursor:pointer; background:#000; display:block; overflow:hidden;}
.vb-yt-facade img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;}
.vb-yt-facade::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.0) 35%, rgba(0,0,0,.45) 100%); pointer-events:none; z-index:1;}
.vb-yt-facade:hover img{transform:scale(1.03);}
.vb-yt-play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:2; filter:drop-shadow(0 8px 28px rgba(0,0,0,.55)); transition:transform .25s ease;}
.vb-yt-facade:hover .vb-yt-play{transform:translate(-50%,-50%) scale(1.08);}
.vb-yt-facade:hover .vb-yt-play svg path:first-child{fill:#cc0000; fill-opacity:1;}

/* ---------- CONTACT (in footer top) ---------- */
.vb-contact-top{padding:96px var(--vb-pad-x) 72px;}
.vb-contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start;}
.vb-contact-eyebrow{font-family:var(--vb-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#bdb4a9; margin-bottom:28px;}
.vb-contact-top h2{font-family:var(--vb-sans); font-weight:500; font-size:clamp(40px,5.4vw,80px); line-height:.96; letter-spacing:-.035em; color:var(--vb-bg); max-width:14ch; margin-bottom:28px;}
.vb-contact-top h2 .vb-it{font-family:var(--vb-serif); font-style:italic; font-weight:400; color:var(--vb-ochre);}
.vb-contact-lede{font-size:16px; line-height:1.65; color:#c9b8b3; max-width:42ch; margin-bottom:36px;}
.vb-contact-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:20px; border-top:1px solid rgba(255,255,255,.1); padding-top:28px;}
.vb-contact-list li{display:grid; grid-template-columns:120px 1fr; gap:18px; align-items:baseline;}
.vb-c-label{font-family:var(--vb-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:#9a8b87;}
.vb-c-value{font-family:var(--vb-sans); font-size:16px; color:var(--vb-bg); line-height:1.5;}
.vb-c-link{transition:color .2s ease;}
.vb-c-link:hover{color:var(--vb-ochre);}

.vb-contact-form{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:36px; display:flex; flex-direction:column; gap:18px;}
.vb-form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.vb-contact-form label{display:flex; flex-direction:column; gap:8px;}
.vb-contact-form label > span{font-family:var(--vb-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:#9a8b87;}
.vb-contact-form input, .vb-contact-form textarea{width:100%; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.18); padding:10px 0; color:var(--vb-bg); font-family:var(--vb-body); font-size:15.5px; outline:none; transition:border-color .2s ease;}
.vb-contact-form textarea{border:1px solid rgba(255,255,255,.18); border-radius:8px; padding:14px 16px; resize:vertical; min-height:120px; line-height:1.5;}
.vb-contact-form input::placeholder, .vb-contact-form textarea::placeholder{color:#7a716a;}
.vb-contact-form input:focus, .vb-contact-form textarea:focus{border-color:var(--vb-ochre);}
.vb-form-actions{display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:10px;}
.vb-contact-submit{background:var(--vb-ochre); color:var(--vb-ink);}
.vb-contact-submit:hover{background:var(--vb-bg); color:var(--vb-ink);}
.vb-c-secondary{font-family:var(--vb-sans); font-size:14px; color:#c9b8b3; transition:color .2s ease;}
.vb-c-secondary:hover{color:var(--vb-ochre);}

@media (max-width: 900px){
  .vb-contact-top{padding:64px var(--vb-pad-x) 48px;}
  .vb-contact-grid{grid-template-columns:1fr; gap:48px;}
  .vb-contact-form{padding:24px;}
  .vb-contact-list li{grid-template-columns:100px 1fr; gap:12px;}
  .vb-form-row{grid-template-columns:1fr;}
}

/* ---------- ANIMATIONS ---------- */
@keyframes vb-rise {
  from { opacity:0; transform:translate3d(0, 28px, 0); }
  to   { opacity:1; transform:translate3d(0, 0, 0); }
}
@keyframes vb-ken-burns {
  0%   { transform:scale(1.08) translate3d(0,0,0); }
  50%  { transform:scale(1.14) translate3d(-1%, -.6%, 0); }
  100% { transform:scale(1.08) translate3d(0,0,0); }
}
@keyframes vb-cue {
  0%, 100% { transform:translateY(0); opacity:.7; }
  50%      { transform:translateY(10px); opacity:1; }
}

/* Hero slideshow: smooth crossfade, continuous ken burns on all slides */
.vb-hero-slides{position:absolute; inset:0;}
.vb-hero-slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0;
  transition:opacity 1.8s cubic-bezier(.4,0,.2,1);
  animation: vb-ken-burns 28s ease-in-out infinite;
  will-change: opacity, transform;
  transform: scale(1.08);
  backface-visibility:hidden;
}
.vb-hero-slide.is-active{opacity:1;}
.vb-hero-dots{display:flex; gap:10px; margin-top:28px;}
.vb-hero-dot{width:34px; height:3px; border-radius:2px; background:rgba(244,233,230,.32); border:0; padding:0; cursor:pointer; transition:background .3s ease, width .3s ease;}
.vb-hero-dot:hover{background:rgba(244,233,230,.6);}
.vb-hero-dot.is-active{background:var(--vb-ochre); width:54px;}
.vb-hero-anim{opacity:0; animation: vb-rise .9s cubic-bezier(.2,.7,.2,1) forwards;}
.vb-hero-content{will-change: transform;}

/* Scroll-down cue */
.vb-scroll-cue{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:3; width:22px; height:36px; border:1.5px solid rgba(244,233,230,.55); border-radius:14px; display:flex; justify-content:center; padding-top:6px; pointer-events:none;}
.vb-scroll-cue span{width:2px; height:8px; border-radius:2px; background:rgba(244,233,230,.85); animation: vb-cue 1.8s ease-in-out infinite;}

/* Scroll-reveal */
[data-reveal]{opacity:0; transform:translate3d(0, 36px, 0); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);}
[data-reveal].is-visible{opacity:1; transform:translate3d(0,0,0);}

/* Pillar image: subtle scale-in on reveal + crisper hover */
.vb-pillar[data-reveal] .vb-pillar-img img{transform:scale(1.06); transition:transform 1.4s cubic-bezier(.2,.7,.2,1);}
.vb-pillar[data-reveal].is-visible .vb-pillar-img img{transform:scale(1);}
@media (hover:hover){
  .vb-pillar[data-reveal].is-visible:hover .vb-pillar-img img{transform:scale(1.05);}
}

/* Button arrow nudge */
.vb-btn .vb-arrow{transition: transform .3s cubic-bezier(.2,.7,.2,1);}
.vb-btn:hover .vb-arrow{transform: translateX(4px);}

/* Pillar link arrow */
.vb-pillar-cta .vb-link span{transition: transform .3s cubic-bezier(.2,.7,.2,1); display:inline-block;}
.vb-pillar-cta .vb-link:hover span{transform: translateX(4px);}

/* Video frame: subtle float on hover */
.vb-video-frame{transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;}
@media (hover:hover){
  .vb-video-frame:hover{transform: translateY(-4px); box-shadow:0 40px 100px -30px rgba(25,19,16,.55), 0 2px 0 rgba(44,58,46,.08);}
}

/* News card lift */
.vb-pillar-news{transition: background-color .3s ease;}
@media (hover:hover){
  .vb-pillar:hover .vb-pillar-news{background:rgba(255,255,255,.55);}
}

@media (prefers-reduced-motion: reduce){
  .vb-hero-img, .vb-hero-anim, .vb-scroll-cue span, [data-reveal]{animation:none !important; transition:none !important; opacity:1 !important; transform:none !important;}
}

/* ============= Areas Promo Slider ============= */
.vb-areas-promo{
  padding: clamp(72px, 9vw, 130px) clamp(20px, 5vw, 64px) clamp(72px, 9vw, 130px);
  background: var(--vb-bg);
  color: var(--vb-ink);
  border-top: 1px solid var(--vb-line);
}
.vb-areas-head{
  max-width: 1480px; margin: 0 auto clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px;
  align-items: end;
  padding-bottom: 32px; border-bottom: 1px solid var(--vb-line);
}
@media (max-width: 820px){
  .vb-areas-head{ grid-template-columns: 1fr; gap: 18px; padding-bottom: 24px; }
}
.vb-areas-head .vb-eyebrow{
  font-family: var(--vb-mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--vb-ochre); margin-bottom: 18px;
  display: block;
}
.vb-areas-head h2{
  font-family: var(--vb-sans); font-weight: 500;
  font-size: clamp(36px, 5.6vw, 84px); line-height: .96;
  letter-spacing: -.035em; color: var(--vb-ink);
  max-width: 14ch; margin: 0;
}
.vb-areas-head h2 .vb-it{
  font-family: var(--vb-serif); font-style: italic; font-weight: 400; color: var(--vb-ochre);
}
.vb-areas-head .vb-areas-lede{
  font-size: 16px; line-height: 1.65; color: var(--vb-muted);
  max-width: 42ch; padding-bottom: 8px; margin: 0;
}

.vb-areas-stage{
  position: relative;
  max-width: 1480px;
  margin: 0 auto;
  aspect-ratio: 16 / 7.5;
  border-radius: 22px;
  overflow: hidden;
  background: #111;
  border: 1px solid var(--vb-line);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 40px 90px -32px rgba(44,58,46,.45),
    0 12px 30px -18px rgba(44,58,46,.25);
}
@media (max-width: 720px){
  .vb-areas-stage{ aspect-ratio: 4 / 5; border-radius: 16px; }
}
.vb-areas-slide{
  position: absolute; inset: 0;
  display: block;
  opacity: 0; visibility: hidden;
  transition: opacity 1.2s ease, visibility 0s linear 1.2s;
  text-decoration: none;
  color: var(--vb-paper);
}
.vb-areas-slide.is-active{
  opacity: 1; visibility: visible;
  transition: opacity 1.2s ease, visibility 0s linear 0s;
}
.vb-areas-slide img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 8s ease-out;
}
.vb-areas-slide.is-active img{ transform: scale(1.14); }
.vb-areas-overlay{
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(10,12,14,.92) 0%, rgba(10,12,14,.65) 45%, rgba(10,12,14,.35) 100%),
    linear-gradient(to right, rgba(10,12,14,.7), rgba(10,12,14,.1) 70%);
  pointer-events: none;
}
.vb-areas-content{
  position: absolute;
  left: clamp(24px, 4vw, 56px);
  right: clamp(24px, 4vw, 56px);
  bottom: clamp(28px, 4vw, 56px);
  max-width: 640px;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
.vb-areas-eyebrow{
  display: inline-block;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: #d9c08a;
  margin-bottom: 12px;
}
.vb-areas-content h3{
  font-family: var(--vb-display);
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.05; letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 12px;
}
.vb-areas-content p{
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.5;
  color: rgba(244,233,230,.92);
  margin: 0 0 18px;
  max-width: 560px;
}
.vb-areas-cta{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--vb-bg); color: var(--vb-ink);
  font-family: var(--vb-sans); font-weight: 500; font-size: 15px;
  transition: background-color .25s ease, color .25s ease;
}
.vb-areas-cta:hover{ background: var(--vb-ochre); color: var(--vb-ink); }

.vb-areas-dots{
  position: absolute;
  bottom: clamp(20px, 2.5vw, 32px);
  right: clamp(24px, 4vw, 56px);
  display: flex; gap: 10px; z-index: 2;
}
.vb-areas-dot{
  width: 34px; height: 3px; border-radius: 2px;
  background: rgba(244,233,230,.32);
  border: 0; padding: 0; cursor: pointer;
  transition: background .3s ease, width .3s ease;
}
.vb-areas-dot:hover{ background: rgba(244,233,230,.6); }
.vb-areas-dot.is-active{ background: var(--vb-ochre); width: 54px; }

/* ============= Area News — uses home sec-head + pillar typography ============= */
.vb-area-news{
  padding: clamp(80px, 10vw, 140px) clamp(20px, 5vw, 64px);
  background: var(--vb-paper);
}
.vb-area-news-head{
  max-width: 1480px; margin: 0 auto clamp(40px, 5vw, 56px);
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px;
  align-items: end;
  padding-bottom: 32px; border-bottom: 1px solid var(--vb-line);
}
@media (max-width: 820px){
  .vb-area-news-head{ grid-template-columns: 1fr; gap: 18px; padding-bottom: 24px; }
}
.vb-area-news-head .vb-eyebrow{
  font-family: var(--vb-mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--vb-ochre);
  margin-bottom: 18px; display: block;
}
.vb-area-news-head h2{
  font-family: var(--vb-sans); font-weight: 500;
  font-size: clamp(36px, 5.6vw, 84px); line-height: .96;
  letter-spacing: -.035em; color: var(--vb-ink);
  max-width: 14ch; margin: 0;
}
.vb-area-news-head h2 .vb-it{
  font-family: var(--vb-serif); font-style: italic; font-weight: 400; color: var(--vb-ochre);
}
.vb-area-news-lede{
  font-size: 16px; line-height: 1.65; color: var(--vb-muted);
  max-width: 42ch; padding-bottom: 8px; margin: 0;
}
.vb-area-news-grid{
  max-width: 1480px; margin: 0 auto;
  display: grid; gap: 28px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px){ .vb-area-news-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px){ .vb-area-news-grid{ grid-template-columns: 1fr; gap: 20px; } }
.vb-area-news-card{
  display: flex; flex-direction: column;
  background: var(--vb-bg);
  border: 1px solid var(--vb-line);
  border-radius: 14px; overflow: hidden;
  transition: border-color .25s ease, box-shadow .35s ease, transform .35s ease;
}
.vb-area-news-card:hover{
  border-color: rgba(44,58,46,.22);
  box-shadow: 0 24px 50px -28px rgba(44,58,46,.25);
  transform: translateY(-3px);
}
.vb-area-news-img{ aspect-ratio: 4 / 3; overflow: hidden; background: #d9cdb4; }
.vb-area-news-img img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.vb-area-news-card:hover .vb-area-news-img img{ transform: scale(1.05); }
.vb-area-news-body{ padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.vb-area-news-meta{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--vb-mono); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--vb-muted); margin-bottom: 4px;
}
.vb-area-news-meta .vb-d{
  width: 4px; height: 4px; border-radius: 50%; background: var(--vb-ochre);
}
.vb-area-news-card h3{
  font-family: var(--vb-sans); font-weight: 500;
  font-size: 22px; line-height: 1.18; letter-spacing: -.02em;
  color: var(--vb-ink); margin: 0;
}
.vb-area-news-card p{
  font-size: 15px; line-height: 1.55; color: var(--vb-muted);
  margin: 0;
}
.vb-area-news-more{
  margin-top: auto; padding-top: 14px;
  font-family: var(--vb-sans); font-weight: 500; font-size: 13px;
  color: var(--vb-ink); display: inline-flex; gap: 6px; align-items: center;
  transition: color .2s ease;
}
.vb-area-news-card:hover .vb-area-news-more{ color: var(--vb-ochre); }


/* ============= Area Intro ============= */
.vb-area-hero{
  position: relative;
  min-height: 52svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.vb-area-hero img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.05);
}
.vb-area-hero::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,12,14,.78) 0%, rgba(10,12,14,.25) 60%, rgba(10,12,14,0) 100%);
}
.vb-area-hero-inner{
  position: relative; z-index: 1;
  max-width: 1480px; margin: 0 auto; width: 100%;
  padding: 0 clamp(20px, 5vw, 64px) clamp(56px, 7vw, 100px);
  color: var(--vb-paper);
}
.vb-area-hero h1{
  font-family: var(--vb-display);
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1; letter-spacing: -0.03em;
  margin: 12px 0 0;
  max-width: 16ch;
  text-shadow: 0 4px 28px rgba(0,0,0,.45);
}
.vb-area-hero .vb-eyebrow{ color: rgba(244,233,230,.85); }
/* "Über den Bereich" — mirrors home sec-head design-system */
.vb-area-intro{
  padding: clamp(80px, 10vw, 140px) clamp(20px, 5vw, 64px);
  background: var(--vb-bg);
}
.vb-area-intro-inner{
  max-width: 1480px; margin: 0 auto;
  display: grid; gap: 60px;
  grid-template-columns: 1.2fr 1fr;
  align-items: end;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--vb-line);
}
@media (max-width: 820px){
  .vb-area-intro-inner{ grid-template-columns: 1fr; gap: 24px; padding-bottom: 24px; }
}
.vb-area-intro .vb-eyebrow{
  font-family: var(--vb-mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--vb-ochre);
  margin-bottom: 24px; display: block;
}
.vb-area-intro h2{
  font-family: var(--vb-sans); font-weight: 500;
  font-size: clamp(36px, 5.6vw, 84px); line-height: .96;
  letter-spacing: -.035em; color: var(--vb-ink);
  max-width: 14ch; margin: 0;
}
.vb-area-intro h2 .vb-it{
  font-family: var(--vb-serif); font-style: italic; font-weight: 400; color: var(--vb-ochre);
}
.vb-area-intro .vb-area-intro-body{
  font-size: 16px; line-height: 1.65; color: var(--vb-muted);
  max-width: 46ch; padding-bottom: 8px;
}
.vb-area-intro .vb-area-intro-body p + p{ margin-top: 14px; }

/* Premium brand-stat row under intro */
.vb-area-stats{
  max-width: 1480px; margin: clamp(36px, 5vw, 56px) auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--vb-line);
}
@media (max-width: 720px){ .vb-area-stats{ grid-template-columns: 1fr; } }
.vb-area-stat{
  padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 32px);
  border-right: 1px solid var(--vb-line);
}
.vb-area-stat:last-child{ border-right: 0; }
@media (max-width: 720px){
  .vb-area-stat{ border-right: 0; border-bottom: 1px solid var(--vb-line); }
  .vb-area-stat:last-child{ border-bottom: 0; }
}
.vb-area-stat .vb-stat-k{
  font-family: var(--vb-serif); font-style: italic; font-weight: 400;
  font-size: clamp(36px, 4.4vw, 56px); line-height: 1;
  color: var(--vb-ochre); margin-bottom: 12px;
}
.vb-area-stat .vb-stat-l{
  font-family: var(--vb-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--vb-muted);
  margin-bottom: 6px;
}
.vb-area-stat .vb-stat-t{
  font-family: var(--vb-sans); font-size: 17px; color: var(--vb-ink);
  line-height: 1.4; letter-spacing: -.01em;
}


/* ============= Area Feature (CTA section per area) ============= */
.vb-area-feature{
  padding: clamp(64px, 8vw, 110px) clamp(20px, 5vw, 64px);
  background: var(--vb-ink); color: var(--vb-paper);
}
.vb-area-feature-inner{
  max-width: 1200px; margin: 0 auto;
}
.vb-area-feature-head{
  max-width: 700px; margin-bottom: 40px;
}
.vb-area-feature-head .vb-eyebrow{ color: var(--vb-ochre); }
.vb-area-feature-head h2{
  font-family: var(--vb-display);
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.05; letter-spacing: -0.02em;
  margin: 10px 0 14px; color: var(--vb-paper);
}
.vb-area-feature-head p{
  font-size: 17px; line-height: 1.6;
  color: rgba(244,233,230,.82);
}

/* ============= Elegant section transitions ============= */
.vb-section-divider{
  height: clamp(56px, 9vw, 120px);
  background: linear-gradient(to bottom, var(--vb-bg) 0%, var(--vb-paper) 100%);
}
.vb-to-ink{
  height: clamp(48px, 7vw, 96px);
  background: linear-gradient(to bottom, var(--vb-paper) 0%, var(--vb-ink) 100%);
}
.vb-area-intro + .vb-area-news,
.vb-area-news + .vb-area-feature{ position:relative; }

/* ============= Kontakt page ============= */
.vb-kontakt-info{
  background: var(--vb-bg);
  padding: clamp(80px, 10vw, 140px) clamp(20px, 5vw, 64px);
}
.vb-kontakt-info-inner{
  max-width: 1480px; margin: 0 auto;
  display: grid; gap: 60px;
  grid-template-columns: 1.2fr 1fr;
  align-items: start;
  padding-bottom: 0;
}
@media (max-width: 820px){ .vb-kontakt-info-inner{ grid-template-columns: 1fr; gap: 36px; } }
.vb-kontakt-intro .vb-eyebrow{
  font-family: var(--vb-mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--vb-ochre);
  margin-bottom: 24px; display: block;
}
.vb-kontakt-info h2{
  font-family: var(--vb-sans); font-weight: 500;
  font-size: clamp(36px, 5.6vw, 84px); line-height: .96;
  letter-spacing: -.035em; color: var(--vb-ink);
  max-width: 14ch; margin: 0 0 28px;
}
.vb-kontakt-info h2 .vb-it{
  font-family: var(--vb-serif); font-style: italic; font-weight: 400; color: var(--vb-ochre);
}
.vb-kontakt-info p.vb-kontakt-lede{ font-size: 16px; line-height: 1.65; color: var(--vb-muted); max-width: 46ch; }
.vb-kontakt-cards{ display: grid; gap: 16px; }
.vb-kontakt-card{
  display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start;
  padding: 22px 24px; background: var(--vb-paper);
  border: 1px solid var(--vb-line); border-radius: 14px;
  transition: border-color .25s ease, background-color .25s ease;
}
.vb-kontakt-card:hover{ border-color: var(--vb-ochre); }
.vb-kontakt-card .vb-k-icon{
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--vb-bg); color: var(--vb-ochre);
}
.vb-kontakt-card .vb-k-label{
  font-family: var(--vb-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--vb-muted); margin-bottom: 4px;
}
.vb-kontakt-card .vb-k-value{ color: var(--vb-ink); font-size: 16px; line-height: 1.5; }
.vb-kontakt-card a.vb-k-value:hover{ color: var(--vb-ochre); }

/* Map block, soft transition to footer */
.vb-kontakt-map{
  position: relative;
  height: clamp(280px, 38vw, 420px);
  background:
    linear-gradient(to bottom, transparent 0%, var(--vb-ink) 100%),
    repeating-linear-gradient(45deg, #E0CDC8 0 14px, #D4BEB8 14px 28px);
  display: grid; place-items: center;
}
.vb-kontakt-map span{
  font-family: var(--vb-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--vb-ink); opacity: .55;
}

/* ============= Kontakt form ============= */
.vb-kontakt-form-section{
  background: var(--vb-paper);
  padding: clamp(80px, 10vw, 140px) clamp(20px, 5vw, 64px);
  border-top: 1px solid var(--vb-line);
}
.vb-kontakt-form-inner{ max-width: 1480px; margin: 0 auto; }
.vb-form{ margin-top: 8px; }
.vb-form-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px;
}
@media (max-width: 760px){ .vb-form-grid{ grid-template-columns: 1fr; gap: 18px; } }
.vb-kontakt-form-section .vb-field{ display: flex; flex-direction: column; gap: 8px; }
.vb-field-full{ grid-column: 1 / -1; }
.vb-kontakt-form-section .vb-field > span{
  font-family: var(--vb-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--vb-muted);
}
.vb-kontakt-form-section .vb-field input,
.vb-kontakt-form-section .vb-field select,
.vb-kontakt-form-section .vb-field textarea{
  font-family: var(--vb-sans); font-size: 16px; color: var(--vb-ink);
  background: var(--vb-bg);
  border: 1px solid var(--vb-line); border-radius: 10px;
  padding: 14px 16px; line-height: 1.4;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  width: 100%;
}
.vb-kontakt-form-section .vb-field textarea{ resize: vertical; min-height: 140px; }
.vb-kontakt-form-section .vb-field input:focus,
.vb-kontakt-form-section .vb-field select:focus,
.vb-kontakt-form-section .vb-field textarea:focus{
  outline: none; border-color: var(--vb-ochre);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--vb-ochre) 22%, transparent);
  background: #fff;
}
.vb-form-foot{
  margin-top: 28px;
  display: flex; gap: 24px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
}
.vb-form-note{ font-size: 13.5px; color: var(--vb-muted); line-height: 1.55; max-width: 56ch; }
.vb-form-note a{ color: var(--vb-ink); border-bottom: 1px solid var(--vb-line); }
.vb-form-note a:hover{ color: var(--vb-ochre); border-color: var(--vb-ochre); }

/* ============= Stability: prevent layout shift on hover for outline buttons ============= */
.vb-btn, .vb-book, button{ will-change: auto; }