/* =============================================
   HEFTOL — ROOFTOP BERLIN
   Ultra-Premium Cinematic Stylesheet
   ============================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #FFFFFF;
  --fg: #272727;
  --gold: #c9a96e;
  --gold-light: #e8d5b0;
  --gold-dim: rgba(201,169,110,0.3);
  --mid: #F0F0F0;
  --dark: #FAFAFA;
  --border: rgba(39,39,39,0.09);
  --border-gold: rgba(201,169,110,0.2);
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-cormo: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html { scroll-behavior: auto; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: 200;
  line-height: 1.65;
  overflow-x: hidden;
  cursor: none;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gold); }

/* ---- GRAIN ---- */
.grain-overlay {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 256px 256px; opacity: 0.5; mix-blend-mode: overlay;
  animation: grain 0.4s steps(2) infinite;
}
@keyframes grain {
  0%,100% { background-position: 0 0; }
  20% { background-position: -20% -30%; }
  40% { background-position: 30% 10%; }
  60% { background-position: -10% 20%; }
  80% { background-position: 20% -10%; }
}

/* ---- PARTICLES ---- */
.particles-canvas {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
}

/* ---- CURSOR (AWWWARDS EXTREME) ---- */
.mouse-spotlight {
  position: fixed; width: 800px; height: 800px; border-radius: 50%; pointer-events: none; z-index: 100;
  background: radial-gradient(circle, rgba(201,169,110,0.06), transparent 70%);
  mix-blend-mode: soft-light;
}
.cursor {
  position: fixed; width: 12px; height: 12px; border-radius: 50%;
  pointer-events: none; z-index: 10000;
  transform: translate(-50%,-50%);
  display: flex; align-items: center; justify-content: center;
  
}
.cursor-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: #000000;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), clip-path 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s;
  clip-path: circle(50% at 50% 50%);
}
.cursor-follower {
  position: fixed; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid #fff; pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%); transition: width 0.35s var(--ease), height 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
  display: flex; justify-content: center; align-items: center;
  background: rgba(255,255,255,0);
  backdrop-filter: blur(0px);
  
}
.cursor-ring {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  fill: none; stroke: var(--gold); stroke-width: 1;
  stroke-dasharray: 301.59; stroke-dashoffset: 301.59;
  transform: rotate(-90deg); transition: stroke-dashoffset 0.1s linear;
}
.cursor-ghost {
  position: fixed; width: 6px; height: 6px; border-radius: 50%;
  background: #ffffff; pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%); 
}
.cursor-text {
  font-size: 10px; font-weight: 500; letter-spacing: 0.1em;
  color: #1a1410; opacity: 0; transition: opacity 0.3s;
  text-transform: uppercase;
}
.cursor-follower.cursor-expanded {
  width: 80px; height: 80px;
  background: #ffffff;
  border-color: transparent;
  
}
.cursor-follower.cursor-expanded .cursor-text {
  opacity: 1;
}
.cursor-follower.active {
  width: 60px; height: 60px;
  background: rgba(255,255,255,0.1);
  border-color: rgba(201,169,110,0.8);
}
body:has(a:hover) .cursor-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: #000000;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), clip-path 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s;
  clip-path: circle(50% at 50% 50%);
}

/* ---- SPLIT TEXT & RGB GLITCH (AWWWARDS EXTREME) ---- */
.brand-title, .marquee-inner, .parallax-img img {
  will-change: transform;
  will-change: filter, transform;
}
.split-word { display: inline-block; white-space: nowrap; }
.split-char { display: inline-block; will-change: transform, opacity; }
.split-text-inner { display: inline-block; will-change: transform, opacity; }
.reveal-img-wrap { overflow: hidden; width: 100%; height: 100%; position: relative; }
.reveal-img-wrap img, .reveal-img-wrap .parallax-inner { will-change: transform, filter, opacity; }

/* ---- PROGRESS BAR ---- */
.progress-bar {
  position: fixed; top: 0; left: 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-light), var(--gold));
  z-index: 1000; transform-origin: left; transform: scaleX(0);
  transition: transform 0.05s linear;
}

/* ---- NAV ---- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 48px;
  background: var(--theme-bg, #ffffff);
  color: var(--theme-text, #111111);
  transition: background 0.5s, padding 0.4s, border-color 0.5s, color 0.4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: var(--theme-bg, #ffffff);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 16px 48px;
  border-bottom-color: var(--border);
}
/* Light background phase — keep logo legible on white hero sky */
.nav.light-bg:not(.scrolled) { background: var(--theme-bg, #ffffff); backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav.light-bg:not(.scrolled) .logo-text { color: #1a1410; }
.nav.light-bg:not(.scrolled) .logo-text em { color: #8b6914; }
.nav.light-bg:not(.scrolled) .logo-sub { color: rgba(26,20,16,0.45); }
.nav.light-bg:not(.scrolled) .nav-link { color: rgba(26,20,16,0.55); }
.nav.light-bg:not(.scrolled) .nav-link:hover { color: #1a1410; }
.nav.light-bg:not(.scrolled) .nav-menu-btn span { background: #1a1410; }
.nav-logo { display: flex; flex-direction: column; }
.logo-text { font-family: var(--font-serif); font-size: 22px; line-height: 1; font-weight: 200; transition: color 0.4s; }
.logo-text em { color: var(--gold); font-style: normal; transition: color 0.4s; }
.logo-sub { font-size: 8px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(39,39,39,0.5); margin-top: 4px; transition: color 0.4s; }
.nav-center-links { display: flex; gap: 40px; }
.nav-link {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
  color: rgba(39,39,39,0.7); transition: color 0.3s; position: relative;
}
.nav-link::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav-link:hover { color: var(--fg); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-right { display: flex; align-items: center; gap: 28px; }
.nav-cta-btn {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
  color: var(--bg); background: var(--gold); padding: 10px 22px;
  transition: background 0.3s, color 0.3s;
  animation: subtleGlow 4s infinite alternate var(--ease-out);
}
@keyframes subtleGlow {
  0% { box-shadow: 0 0 0px rgba(201,169,110,0); }
  100% { box-shadow: 0 0 20px rgba(201,169,110,0.6); }
}
.nav-cta-btn:hover { background: var(--gold-light); animation-play-state: paused; box-shadow: 0 0 30px rgba(201,169,110,0.9); }
.nav-menu-btn {
  display: flex; flex-direction: column; gap: 7px;
  cursor: none; padding: 8px; z-index: 600;
}
.nav-menu-btn span {
  display: block; width: 28px; height: 1px;
  background: var(--fg); transition: all 0.4s var(--ease);
}
.nav-menu-btn.open span:first-child { transform: rotate(45deg) translate(5px,5px); }
.nav-menu-btn.open span:last-child { transform: rotate(-45deg) translate(5px,-5px); }

/* ---- FULLSCREEN MENU ---- */
.fullscreen-menu {
  position: fixed; inset: 0; z-index: 400;
  display: flex; flex-direction: column;
  justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.6s var(--ease);
}
.fullscreen-menu.open { opacity: 1; pointer-events: all; }
.menu-bg-video { position: absolute; inset: 0; overflow: hidden; }
.menu-bg-video video { width: 100%; height: 100%; object-fit: cover; }
.menu-video-overlay { position: absolute; inset: 0; background: rgba(5,5,5,0.87); }
.menu-inner {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 80px;
}
.menu-nav { flex: 1; padding: 0 60px; }
.menu-link {
  display: block; font-family: var(--font-cormo); font-size: clamp(44px, 5.5vw, 72px);
  font-weight: 200; color: var(--fg); text-decoration: none;
  line-height: 1.05; padding: 8px 0; position: relative; overflow: hidden;
  transition: color 0.3s;
}
.menu-link::before {
  content: attr(data-num);
  position: absolute; left: -50px; font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.2em; color: var(--gold);
  top: 50%; transform: translateY(-50%); opacity: 0;
  transition: opacity 0.3s, left 0.4s var(--ease);
}
.menu-link:hover { color: var(--gold); }
.menu-link:hover::before { opacity: 1; left: -40px; }
.menu-side-info {
  display: flex; flex-direction: column; gap: 32px; padding-bottom: 12px;
}
.menu-stat { display: flex; flex-direction: column; align-items: flex-end; }
.menu-stat-num { font-family: var(--font-serif); font-size: 40px; font-weight: 200; color: var(--gold); line-height: 1; }
.menu-stat-label { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(242,237,228,0.4); margin-top: 4px; }
/* Menu logo block */
.menu-logo-block {
  display: flex; flex-direction: column;
  margin-bottom: 40px;
}
.menu-logo-main {
  font-family: var(--font-cormo); font-size: clamp(28px, 3vw, 44px);
  font-weight: 200; color: var(--fg); line-height: 1;
  letter-spacing: 0.01em;
}
.menu-logo-main em { color: var(--gold); font-style: italic; }
.menu-logo-sub {
  font-family: var(--font-sans); font-size: 9px;
  letter-spacing: 0.4em; text-transform: uppercase;
  color: rgba(242,237,228,0.3); margin-top: 6px;
}
.menu-footer {
  position: absolute; bottom: 40px; left: 80px; right: 80px; z-index: 1;
  display: flex; justify-content: space-between;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(242,237,228,0.3);
  border-top: 1px solid var(--border); padding-top: 20px;
}

/* ---- CONTAINER ---- */
.container { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 60px; }

/* ---- SECTIONS ---- */
.section { position: relative; padding: 140px 0; overflow: hidden; }
.section-tag {
  font-size: 9px; letter-spacing: 0.5em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 52px;
}
.tag--light { color: var(--gold-light); }
.section-title {
  font-family: var(--font-cormo); font-size: clamp(52px, 6.5vw, 96px);
  font-weight: 200; line-height: 1.0; margin-bottom: 44px;
}
.section-title em { color: var(--gold); font-style: italic; }
.section-title.light { color: var(--fg); }
.section-title.centered { text-align: center; }

/* ---- PARALLAX ---- */
.parallax-img { overflow: hidden; }
.parallax-img .parallax-inner { transform: scale(1.18); will-change: transform; }
img { width: 100%; height: 100%; object-fit: cover; display: block; }




/* ---- REVEAL ---- */
.reveal {
  transform: translateY(48px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ==================== HERO ==================== */
.hero-scroll-zone { height: 400vh; position: relative; }
.hero-sticky {
  position: sticky; top: 0;
  width: 100%; height: 100vh; overflow: hidden;
}
.drone-layer { position: absolute; inset: 0; will-change: transform, opacity, filter; }
.drone-layer img { width: 100%; height: 100%; object-fit: cover; will-change: transform, filter; }
.drone-sky { z-index: 0; }
.sky-gradient { position: absolute; inset: 0; background: #06060a; }
.sky-gradient.phase-1 { background: #0e1018; }
.sky-gradient.phase-2 { background: linear-gradient(180deg, #141824 0%, #080808 100%); }
.sky-gradient.phase-3 { background: linear-gradient(180deg, #222838 0%, #141420 100%); }
.sky-gradient.phase-4 { background: linear-gradient(180deg, rgba(201,169,110,0.25) 0%, rgba(232,201,128,0.08) 30%, rgba(245,240,224,0.04) 100%); }
.sky-gradient.phase-5 { background: linear-gradient(180deg, #f0e8d8 0%, #faf5eb 50%, #fff9ee 100%); }
.drone-street { z-index: 1; opacity: 1; }
.drone-street img { filter: grayscale(1) brightness(0.3) contrast(1.4); transform-origin: bottom center; }
.street-fog {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,8,8,0.95) 0%, rgba(8,8,8,0.5) 40%, transparent 70%);
  z-index: 1;
}
.drone-facade { z-index: 2; opacity: 0; }
.drone-facade img { filter: grayscale(0.9) brightness(0.4) contrast(1.25); transform-origin: center center; }
.facade-vignette {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(8,8,8,0.7) 100%);
}
.drone-rooftop { z-index: 3; opacity: 0; }
.drone-rooftop img { filter: grayscale(0.5) brightness(0.6) contrast(1.1); transform-origin: bottom center; }
.drone-penthouse { z-index: 4; opacity: 0; }
.drone-penthouse img { filter: brightness(0.9) saturate(1.3) contrast(1.05); transform-origin: center center; }
.penthouse-glow {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at 60% 30%, rgba(255,220,120,0) 0%, transparent 100%);
  mix-blend-mode: screen; pointer-events: none;
}
.drone-flash { position: absolute; inset: 0; z-index: 20; background: radial-gradient(ellipse at center, #fff9e0, white); opacity: 0; pointer-events: none; }
.light-rays { position: absolute; inset: 0; z-index: 5; opacity: 0; overflow: hidden; pointer-events: none; }
.ray {
  position: absolute; top: -20%; left: 50%;
  width: 3px; height: 160%;
  background: linear-gradient(to bottom, rgba(255,215,100,0.2), transparent);
  transform-origin: top center; filter: blur(10px);
}
.r1 { transform: rotate(-25deg) translateX(-200px); width: 70px; }
.r2 { transform: rotate(-10deg) translateX(-80px); opacity: 0.6; }
.r3 { transform: rotate(8deg) translateX(60px); width: 45px; opacity: 0.7; }
.r4 { transform: rotate(22deg) translateX(180px); width: 90px; opacity: 0.5; }

/* LOGO REVEAL */
.drone-logo-reveal {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  padding: 0 80px; opacity: 0; pointer-events: none; will-change: opacity;
}
.dlr-eyebrow {
  font-size: 9px; letter-spacing: 0.7em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 32px; opacity: 0; transform: translateY(20px);
}
.dlr-wordmark {
  display: flex; align-items: center; gap: 36px;
  margin-bottom: 36px; overflow: hidden;
}
.dlr-word {
  display: block; font-family: var(--font-cormo);
  font-size: clamp(50px, 8vw, 110px);
  font-weight: 200; line-height: 0.88; color: var(--fg);
  opacity: 0; will-change: transform, opacity;
}
.dlr-word--1 { transform: translateX(-100px); }
.dlr-word--2 { transform: translateX(100px); }
.dlr-word em { color: var(--gold); font-style: italic; }
.dlr-divider {
  display: block; width: 1px; height: clamp(70px, 10vw, 140px);
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  opacity: 0; flex-shrink: 0;
}
.dlr-sub {
  font-size: 15px; color: rgba(242,237,228,0.55);
  max-width: 480px; line-height: 1.75; margin-bottom: 44px;
  opacity: 0; transform: translateY(20px);
}
.dlr-stats {
  display: flex; align-items: center; gap: 0; margin-bottom: 40px;
  opacity: 0; transform: translateY(16px);
}
.dlr-stat { display: flex; flex-direction: column; padding: 0 32px; }
.dlr-stat:first-child { padding-left: 0; }
.dlr-stat-num { font-family: var(--font-cormo); font-size: 36px; font-weight: 200; color: var(--gold); line-height: 1; }
.dlr-stat-label { font-size: 8px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(242,237,228,0.35); margin-top: 4px; }
.dlr-stat-div { width: 1px; height: 40px; background: var(--border-gold); flex-shrink: 0; }
.dlr-cta {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--fg); text-decoration: none;
  border-bottom: 1px solid rgba(201,169,110,0.35); padding-bottom: 10px;
  opacity: 0; transition: color 0.3s, border-color 0.3s;
}
.dlr-cta svg { width: 16px; height: 16px; transition: transform 0.3s; }
.dlr-cta:hover { color: var(--gold); border-color: var(--gold); }
.dlr-cta:hover svg { transform: translateY(5px); }

/* HUD */
.drone-hud {
  position: absolute; left: 36px; top: 50%; transform: translateY(-50%);
  z-index: 15; display: flex; flex-direction: column; align-items: center;
  gap: 8px; opacity: 0.7;
}
.hud-top, .hud-floor { font-size: 7px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); }
.hud-bar-wrap { flex: 1; }
.hud-bar { width: 2px; height: 140px; background: rgba(242,237,228,0.08); position: relative; }
.hud-fill { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, var(--gold), rgba(201,169,110,0.3)); height: 0%; }
.hud-drone-icon { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; font-size: 8px; color: var(--gold); }
.hud-altitude { font-size: 8px; letter-spacing: 0.2em; color: var(--gold); writing-mode: vertical-rl; margin-top: 4px; }
.drone-data {
  position: absolute; top: 36px; right: 48px;
  z-index: 15; display: flex; gap: 36px;
  font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0;
}
.dd-item { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.dd-label { color: rgba(242,237,228,0.3); font-size: 7px; }
.dd-val { color: var(--gold); font-family: 'Courier New', monospace; font-size: 13px; }
.hero-scroll-hint {
  position: absolute; bottom: 44px; left: 50%;
  transform: translateX(-50%); z-index: 20;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scroll-label { font-size: 8px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(242,237,228,0.3); }
.scroll-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: bounce 2.2s infinite; }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(12px); } }

/* Lens flash compat */
.lens-flash { position: absolute; inset: 0; z-index: 10; background: white; opacity: 0; pointer-events: none; }
.interior-content { position: absolute; bottom: 80px; left: 80px; z-index: 25; opacity:0; pointer-events:none; }
.hero-content { position: absolute; bottom: 80px; left: 80px; z-index: 20; opacity: 0; }

/* ==================== STATEMENT STRIP ==================== */
.statement-strip {
  position: relative; min-height: 80vh;
  display: grid; grid-template-columns: 1fr 1fr;
  overflow: hidden; background: var(--dark);
}
.statement-inner {
  display: flex; flex-direction: column; justify-content: center;
  padding: 120px 80px; position: relative; z-index: 2;
}
.statement-tag {
  font-size: 9px; letter-spacing: 0.5em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 32px;
}
.statement-title {
  font-family: var(--font-cormo); font-size: clamp(40px, 4.5vw, 68px);
  font-weight: 200; line-height: 1.1; color: var(--fg);
}
.statement-title em { color: var(--gold); font-style: italic; }
.statement-line {
  width: 60px; height: 1px; background: var(--gold); margin-top: 48px;
  opacity: 0.5;
}
.statement-body {
  font-size: 15px; color: rgba(242,237,228,0.5); line-height: 1.85;
  margin-top: 24px; max-width: 380px;
}
.statement-photo { position: relative; overflow: hidden; min-height: 80vh; }
.statement-photo .parallax-inner { transform: scale(1.15); }
.statement-photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(5,5,5,0.6) 0%, transparent 50%);
  z-index: 1;
}

/* ==================== VISION ==================== */
.vision { background: var(--bg); }
.vision-bg-text {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-family: var(--font-cormo); font-size: clamp(120px, 20vw, 300px);
  font-weight: 700; color: rgba(242,237,228,0.018);
  white-space: nowrap; pointer-events: none; z-index: 0; letter-spacing: 0.05em;
}
/* === VISION FULL-BLEED GRID === */
.vision-fullbleed-grid {
  display: grid;
  grid-template-columns: 58% 42%;
  min-height: 88vh;
  position: relative; z-index: 1;
}
.vision-img-col {
  position: relative;
  overflow: hidden;
}
.vision-img-col .vision-img-wrap {
  height: 100%;
  min-height: 88vh;
}
.vision-text-col {
  display: flex; flex-direction: column;
  justify-content: center;
  padding: 100px 72px 100px 80px;
  position: relative; z-index: 2;
}
/* Legacy grid — keep for mobile fallback */
.vision-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 100px; align-items: start; position: relative; z-index: 1;
}
.vision-text { font-size: 16px; color: rgba(242,237,228,0.65); margin-bottom: 24px; line-height: 1.85; }
.vision-specs { margin-top: 48px; display: flex; flex-direction: column; gap: 0; }
.vision-spec {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid var(--border);
}
.vspec-label { font-size: 8px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); }
.vspec-val { font-family: var(--font-cormo); font-size: 22px; font-weight: 200; color: var(--fg); }
.vision-img-wrap { height: 520px; position: relative; overflow: hidden; }

/* ---- VISION CROSSFADE SLIDESHOW ---- */
.vision-crossfade-wrap { border-radius: 0; }
.vcf-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.vcf-slide img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  object-position: center 20%;
  transform: scale(1.06);
  transition: transform 8s ease;
}
.vcf-slide--1 { z-index: 1; }
.vcf-slide--2 {
  z-index: 2;
  opacity: 0;
  /* 4s Zyklus: ultra-schnell wie Video-Transition */
  animation: vcfFade 4s ease-in-out 0.5s infinite;
}
@keyframes vcfFade {
  0%   { opacity: 0; }   /* Tag                                */
  15%  { opacity: 1; }   /* 0→15% = 0.6s → schneller Cut       */
  50%  { opacity: 1; }   /* 15→50% = 1.4s → Nacht halten       */
  65%  { opacity: 0; }   /* 50→65% = 0.6s → schneller Cut      */
  100% { opacity: 0; }   /* 65→100% = 1.4s → Tag halten        */
}
.vision-quote {
  margin-top: 48px; padding: 24px 24px 24px 28px;
  border-left: 1px solid var(--gold);
  background: rgba(201,169,110,0.03);
}
.vision-quote blockquote {
  font-family: var(--font-cormo); font-size: 18px; font-style: italic;
  color: rgba(242,237,228,0.7); line-height: 1.6;
}
.vision-quote cite {
  display: block; margin-top: 12px; font-size: 9px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold); font-style: normal;
}

/* ==================== EDITORIAL STRIP ==================== */
.editorial-strip { padding: 80px 0 120px; background: var(--mid); overflow: hidden; }
.editorial-label {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 0 60px; margin-bottom: 60px;
  font-size: 9px; letter-spacing: 0.5em; text-transform: uppercase; color: rgba(242,237,228,0.3);
}
.editorial-label-em { font-family: var(--font-cormo); font-size: 56px; font-weight: 200; letter-spacing: 0.02em; color: var(--fg); line-height: 1; text-transform: none; margin-top: 4px; }
.editorial-photos {
  display: flex; align-items: stretch; gap: 4px;
  height: 70vh; min-height: 500px;
}
.editorial-photo {
  position: relative; overflow: hidden; flex: 1;
  transition: flex 0.6s var(--ease);
  cursor: none;
}
.editorial-photo:hover { flex: 1.6; }
.ep--tall { align-self: stretch; }
.ep--short { align-self: stretch; height: auto; }
.editorial-photo .parallax-inner { transition: transform 0.6s var(--ease); }
.editorial-photo:hover .parallax-inner { transform: scale(1.06); }
.ep-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 60%);
  z-index: 1;
}
.ep-caption {
  position: absolute; bottom: 20px; left: 20px; z-index: 2;
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0; transform: translateY(8px);
  transition: all 0.4s var(--ease);
}
.editorial-photo:hover .ep-caption { opacity: 1; transform: translateY(0); }
.ep-number { font-size: 9px; letter-spacing: 0.3em; color: var(--gold); }
.ep-text { font-family: var(--font-cormo); font-size: 28px; font-weight: 200; color: var(--fg); }
.editorial-middle-text {
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: flex-start; text-align: left;
  padding: 0 40px 32px; align-self: stretch; min-width: 240px;
}
.editorial-mid-title {
  font-family: var(--font-cormo); font-size: clamp(36px, 3.5vw, 52px);
  font-weight: 200; line-height: 1.1; color: var(--fg); margin-bottom: 16px;
}
.editorial-mid-title em { color: var(--gold); font-style: italic; }
.editorial-mid-sub { font-size: 13px; color: rgba(242,237,228,0.6); line-height: 1.7; max-width: 280px; }
.editorial-mid-line { width: 40px; height: 1px; background: var(--gold); margin-top: 24px; opacity: 0.5; }

/* ==================== TRANSFORMATION ==================== */
.transformation { padding: 0; min-height: 100vh; display: flex; align-items: center; }
.transformation-video-wrap { position: absolute; inset: 0; }
.transformation-overlay { position: absolute; inset: 0; background: rgba(8,8,8,0.78); }
.section-video { width: 100%; height: 100%; object-fit: cover; }
.transformation-content { position: relative; z-index: 2; padding: 140px 60px; }
.transformation-steps {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 48px; margin-top: 80px;
}
.step { border-top: 1px solid rgba(201,169,110,0.2); padding-top: 28px; }
.step-num { display: block; font-family: var(--font-cormo); font-size: 44px; font-weight: 200; color: var(--gold); margin-bottom: 16px; line-height: 1; }
.step h3 { font-family: var(--font-cormo); font-weight: 400; font-size: 20px; margin-bottom: 14px; color: var(--fg); }
.step p { font-size: 14px; color: rgba(242,237,228,0.55); line-height: 1.75; }

/* ==================== EDITORIAL FULLSCREEN ==================== */
.editorial-fullscreen { position: relative; height: 90vh; overflow: hidden; }
.editorial-fs-bg { position: absolute; inset: 0; height: 100%; }
.editorial-fs-bg .parallax-inner { height: 120%; transform: scale(1.1); }
.editorial-fs-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(250,250,250,0.85) 0%, rgba(250,250,250,0.4) 50%, transparent 100%);
  z-index: 1;
}
.editorial-fs-content {
  position: absolute; bottom: 80px; left: 0; width: 100%; z-index: 2; text-align: center;
}
.efs-tag { font-size: 9px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; }
.efs-title {
  font-family: var(--font-cormo); font-size: clamp(60px, 7vw, 110px);
  font-weight: 200; line-height: 1.0; color: var(--fg); margin-bottom: 28px;
}
.efs-title em { color: var(--gold); font-style: italic; }
.efs-divider { width: 60px; height: 1px; background: var(--gold); margin-bottom: 20px; }
.efs-sub { font-size: 13px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(242,237,228,0.5); }
.editorial-fs-number {
  position: absolute; bottom: 60px; right: 60px; z-index: 2;
  font-family: var(--font-cormo); font-size: 120px; font-weight: 200;
  color: rgba(242,237,228,0.04); line-height: 1; letter-spacing: -0.02em;
}

/* ==================== RÄUME ==================== */
.raeume { background: var(--mid); }
.gallery-strip {
  display: flex; gap: 3px; margin: 80px 0;
  height: 65vh; min-height: 420px;
}
.gallery-item {
  position: relative; overflow: hidden;
  transition: flex 0.6s var(--ease);
  cursor: none; flex: 1;
}
.gi--large { flex: 2; }
.gi--medium { flex: 1.5; }
.gi--small { flex: 1.5; }
.gallery-item:hover { flex: 2.5; }
.gallery-item-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 40%);
  opacity: 0; transition: opacity 0.4s;
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-item:hover .parallax-inner { transform: scale(1.06); }
.gallery-item .parallax-inner { transition: transform 0.7s var(--ease); }
.gallery-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 24px 20px 18px;
  background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
  font-size: 9px; letter-spacing: 0.35em; text-transform: uppercase;
  color: rgba(242,237,228,0.75); z-index: 2;
  opacity: 0; transform: translateY(10px);
  transition: all 0.4s;
}
.gallery-item:hover .gallery-caption { opacity: 1; transform: translateY(0); }
.features-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 52px; margin-top: 60px;
}
.feature { border-top: 1px solid var(--border); padding-top: 28px; }
.feature-icon { font-size: 18px; color: var(--gold); margin-bottom: 14px; }
.feature h3 { font-family: var(--font-cormo); font-size: 22px; font-weight: 400; margin-bottom: 12px; }
.feature p { font-size: 14px; color: rgba(242,237,228,0.55); line-height: 1.75; }

/* ==================== VIDEO INTERLUDE ==================== */
.video-interlude {
  padding: 0; height: 80vh; display: flex;
  align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.interlude-video-wrap { position: absolute; inset: 0; }
.interlude-overlay { position: absolute; inset: 0; background: rgba(8,8,8,0.65); }
.interlude-text { position: relative; z-index: 2; text-align: center; }
.pull-quote {
  font-family: var(--font-cormo); font-size: clamp(44px, 6.5vw, 90px);
  font-weight: 200; line-height: 1.12; color: rgba(242,237,228,0.9);
}
.pull-quote em { color: var(--gold); font-style: italic; }
.pull-quote-sub { margin-top: 20px; font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(242,237,228,0.3); }

/* ==================== DIPTYCH ==================== */
.editorial-diptych {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 80vh; overflow: hidden;
}
.diptych-left { position: relative; overflow: hidden; }
.diptych-photo { height: 100%; }
.diptych-photo .parallax-inner { height: 120%; transform: scale(1.12); }
.diptych-vignette {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, transparent 60%, rgba(8,8,8,0.7) 100%);
}
.diptych-right {
  background: var(--dark); display: flex; flex-direction: column;
  justify-content: center; position: relative; padding: 80px;
  border-left: 1px solid var(--border);
}
.diptych-text-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.diptych-tag { font-size: 9px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--gold); margin-bottom: 28px; }
.diptych-title {
  font-family: var(--font-cormo); font-size: clamp(40px, 4vw, 60px);
  font-weight: 200; line-height: 1.1; color: var(--fg); margin-bottom: 28px;
}
.diptych-title em { color: var(--gold); font-style: italic; }
.diptych-sub { font-size: 15px; color: rgba(242,237,228,0.6); line-height: 1.8; max-width: 440px; margin-bottom: 48px; }
.diptych-stats { display: flex; gap: 40px; }
.diptych-stat { display: flex; flex-direction: column; }
.ds-num { font-family: var(--font-cormo); font-size: 44px; font-weight: 200; color: var(--gold); line-height: 1; }
.ds-label { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(242,237,228,0.35); margin-top: 6px; }
.diptych-gold-line { width: 60px; height: 1px; background: var(--gold); margin-top: 40px; opacity: 0.4; }

/* ==================== MARQUEE ==================== */
.marquee-wrap { overflow: hidden; background: var(--dark); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 20px 0; }
.marquee-track {
  display: flex; gap: 48px; white-space: nowrap;
  animation: marquee 30s linear infinite;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(242,237,228,0.25);
}
.marquee-track em { color: var(--gold); font-style: normal; }
.marquee-track span { flex-shrink: 0; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==================== LAGE — ANIMATED ==================== */
.lage { background: var(--bg); padding: 0; overflow: hidden; }
.lage-bg-anim {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0.7;
}
.lage-grid-svg { width: 100%; height: 100%; }
.grid-line { stroke: rgba(201,169,110,0.06); stroke-width: 1; }
.grid-accent { stroke: rgba(201,169,110,0.1); stroke-width: 1; }
.grid-label { fill: rgba(201,169,110,0.3); font-family: 'Inter', sans-serif; letter-spacing: 0.2em; text-transform: uppercase; }
.pulse-ring {
  fill: none; stroke: var(--gold); stroke-width: 1;
  opacity: 0;
  animation: pulseRing 3s ease-out infinite;
}
.pulse-ring.delay-1 { animation-delay: 1.5s; }
.pulse-dot { fill: var(--gold); }
@keyframes pulseRing {
  0% { r: 30; opacity: 0.5; }
  100% { r: 120; opacity: 0; }
}

.lage-content { position: relative; z-index: 2; padding: 140px 60px 80px; }
.lage-intro { font-size: 16px; color: rgba(242,237,228,0.6); max-width: 600px; line-height: 1.85; margin-top: -20px; }

/* Location Cards Grid */
.locations-grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border-gold);
  border-left: 1px solid var(--border-gold);
  margin-top: 0;
}
.loc-card {
  position: relative; overflow: hidden;
  padding: 48px 40px;
  border-right: 1px solid var(--border-gold);
  border-bottom: 1px solid var(--border-gold);
  transition: background 0.4s var(--ease);
  cursor: none;
  opacity: 0; transform: translateY(40px);
}
.loc-card.in-view {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), background 0.4s var(--ease);
}
.loc-card:hover { background: rgba(201,169,110,0.04); }

.loc-line-h {
  position: absolute; bottom: 0; left: 0; right: 100%;
  height: 1px; background: var(--gold);
  transition: right 0.6s var(--ease);
}
.loc-line-v {
  position: absolute; right: 0; top: 0; bottom: 100%;
  width: 1px; background: var(--gold);
  transition: bottom 0.6s var(--ease) 0.1s;
}
.loc-card:hover .loc-line-h { right: 0; }
.loc-card:hover .loc-line-v { bottom: 0; }
.loc-dot {
  position: absolute; top: 20px; right: 20px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); opacity: 0;
  transition: opacity 0.3s 0.5s;
  box-shadow: 0 0 12px rgba(201,169,110,0.6);
}
.loc-card:hover .loc-dot { opacity: 1; }
.loc-district { font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.loc-street { font-family: var(--font-cormo); font-size: 22px; font-weight: 200; color: var(--fg); line-height: 1.3; margin-bottom: 20px; }
.loc-status { font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; padding: 5px 12px; display: inline-block; }
.loc-status--avail { background: rgba(201,169,110,0.1); color: var(--gold); border: 1px solid rgba(201,169,110,0.25); }
.loc-status--soon { background: rgba(242,237,228,0.04); color: rgba(242,237,228,0.4); border: 1px solid rgba(242,237,228,0.08); }
.loc-status--sold { background: transparent; color: rgba(242,237,228,0.2); border: 1px solid rgba(242,237,228,0.05); }
.loc-num {
  position: absolute; bottom: 24px; right: 28px;
  font-family: var(--font-cormo); font-size: 52px; font-weight: 200;
  color: rgba(242,237,228,0.04); line-height: 1; letter-spacing: -0.02em;
  transition: color 0.4s;
}
.loc-card:hover .loc-num { color: rgba(201,169,110,0.08); }

.lage-bottom {
  position: relative; z-index: 2;
  display: flex; justify-content: center; gap: 0;
  border-top: 1px solid var(--border-gold);
  padding: 60px 0;
}
.lage-bottom-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 80px;
  border-right: 1px solid var(--border-gold);
}
.lage-bottom-stat:last-child { border-right: none; }
.lbs-num { font-family: var(--font-cormo); font-size: 64px; font-weight: 200; color: var(--gold); line-height: 1; }
.lbs-label { font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(242,237,228,0.35); margin-top: 8px; }

/* ==================== ZAHLEN ==================== */
.zahlen { background: var(--mid); position: relative; overflow: hidden; }
.zahlen-bg-text {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-family: var(--font-cormo); font-size: clamp(130px, 22vw, 340px);
  font-weight: 700; color: rgba(242,237,228,0.018);
  white-space: nowrap; pointer-events: none; z-index: 0; letter-spacing: 0.1em;
}
.zahlen-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 0; margin-top: 80px; position: relative; z-index: 1;
  border-top: 1px solid var(--border); border-left: 1px solid var(--border);
}
.zahlen-item {
  padding: 48px 40px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
  transition: background 0.4s;
}
.zahlen-item:hover { background: rgba(201,169,110,0.03); }
.zahlen-num {
  display: block; font-family: var(--font-cormo);
  font-size: clamp(64px, 8vw, 110px);
  font-weight: 200; line-height: 1; color: var(--gold);
  margin-bottom: 12px;
}
.zahlen-label { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(242,237,228,0.4); }

/* ==================== BRAND SECTION ==================== */
.brand-section { position: relative; padding: 150px 0; overflow: hidden; display: flex; align-items: center; }
.brand-bg { position: absolute; inset: 0; height: 100%; }
.brand-bg .parallax-inner { height: 130%; transform: scale(1.1); }
.brand-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(250,250,250,0.85) 0%, rgba(250,250,250,0.5) 60%, rgba(250,250,250,0.2) 100%);
}
.brand-content { position: relative; z-index: 2; width: 100%; max-width: 100%; padding: 0 60px; margin: 0 auto; text-align: center; }
.brand-eyebrow { font-size: 9px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; }
.brand-title-wrap { margin-bottom: 80px; }
.brand-title {
  font-family: var(--font-cormo); font-size: clamp(60px, 6vw, 90px);
  font-weight: 200; line-height: 1.1; color: var(--fg); margin-bottom: 28px;
}
.brand-title em { color: var(--gold); font-style: italic; }
.brand-text { font-size: 18px; color: rgba(39,39,39,0.7); line-height: 1.8; max-width: 700px; margin: 0 auto 60px auto; }
.brand-cta {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--bg); background: var(--gold); text-decoration: none;
  padding: 14px 28px; transition: background 0.3s;
}
.brand-cta svg { width: 16px; height: 16px; transition: transform 0.3s; }
.brand-cta:hover { background: var(--gold-light); }
.brand-cta:hover svg { transform: translateX(4px); }

/* ==================== KONTAKT ==================== */
/* Kontakt background image */
.kontakt-bg-img {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
.kontakt-bg-inner {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 30%;
  opacity: 0.18;
  filter: grayscale(0.3) brightness(0.7);
  transform: scale(1.06);
  will-change: transform;
}
.kontakt-bg-cover {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8,8,8,0.6) 0%,
    rgba(8,8,8,0.4) 50%,
    rgba(8,8,8,0.7) 100%
  );
}
.kontakt { background: var(--dark); position: relative; overflow: hidden; }
.kontakt-bg-text {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-family: var(--font-cormo); font-size: clamp(100px, 16vw, 240px);
  font-weight: 700; color: rgba(242,237,228,0.018);
  white-space: nowrap; pointer-events: none; z-index: 0; letter-spacing: 0.1em;
}
.kontakt-grid {
  display: flex; flex-direction: column; align-items: center;
  gap: 40px; position: relative; z-index: 1; text-align: center; width: 100%; max-width: 800px; margin: 0 auto;
}
.kontakt-sub { font-size: 16px; color: rgba(242,237,228,0.55); line-height: 1.85; max-width: 380px; margin-bottom: 44px; }
.kontakt-info { display: flex; flex-direction: column; gap: 0; }
.kontakt-info-item { padding: 16px 0; border-bottom: 1px solid var(--border); }
.kii-label { display: block; font-size: 8px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.kii-val { font-size: 14px; color: rgba(242,237,228,0.7); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.form-field { position: relative; margin-bottom: 32px; }
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%; padding: 16px 0; background: transparent;
  border: none; border-bottom: 1px solid var(--border);
  color: var(--fg); font-family: var(--font-sans); font-size: 14px; font-weight: 200;
  outline: none; transition: border-color 0.3s;
  -webkit-appearance: none; appearance: none;
}
.form-field select { cursor: pointer; color: rgba(242,237,228,0.35); }
.form-field select option { background: var(--mid); color: var(--fg); }
.form-field label {
  position: absolute; top: 16px; left: 0;
  font-size: 13px; font-weight: 200; color: rgba(242,237,228,0.35);
  pointer-events: none; transition: all 0.3s var(--ease);
}
.form-field input:focus ~ label,
.form-field input:not(:placeholder-shown) ~ label,
.form-field textarea:focus ~ label,
.form-field textarea:not(:placeholder-shown) ~ label {
  top: -10px; font-size: 9px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold);
}
.field-line {
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.form-field:focus-within .field-line { transform: scaleX(1); }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus { border-bottom-color: transparent; }
.submit-btn {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.4em;
  text-transform: uppercase; color: var(--bg); background: var(--gold);
  border: none; padding: 18px 36px; cursor: none;
  position: relative; overflow: hidden;
  transition: background 0.3s, transform 0.2s;
}
.submit-btn svg { width: 16px; height: 16px; transition: transform 0.3s; }
.submit-btn:hover { background: var(--gold-light); }
.submit-btn:hover svg { transform: translateX(4px); }
.btn-magnetic-bg {
  position: absolute; inset: 0; background: var(--gold-light); opacity: 0;
  transition: opacity 0.3s; border-radius: 50% 50% 0 0;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.4s var(--ease), opacity 0.4s;
}
.submit-btn:hover .btn-magnetic-bg { transform: scaleY(1); opacity: 0.3; }

/* ===================== CINEMATIC KONTAKT EXTRAS ===================== */
/* More visible background */
.kontakt-bg-inner { opacity: 0.28 !important; }

/* Floating horizontal + vertical accent lines */
.kontakt-line {
  position: absolute; background: var(--gold); opacity: 0;
  pointer-events: none; will-change: transform, opacity;
}
.kontakt-line--h1 { top: 18%; left: 0; height: 1px; width: 30%; }
.kontakt-line--h2 { bottom: 22%; right: 0; height: 1px; width: 22%; }
.kontakt-line--v1 { top: 0; left: 22%; width: 1px; height: 35%; opacity: 0; }
.kontakt-line--v2 { bottom: 0; right: 18%; width: 1px; height: 28%; opacity: 0; }

/* Gold glow orb */
.kontakt-orb {
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,169,110,0.14) 0%, transparent 70%);
  top: 50%; right: 5%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
  will-change: transform;
}

/* Corner brackets */
.kontakt-corner {
  position: absolute; width: 40px; height: 40px;
  border-color: var(--gold); border-style: solid; opacity: 0.35;
  pointer-events: none; z-index: 2;
}
.kontakt-corner--tl { top: 40px; left: 60px; border-width: 1px 0 0 1px; }
.kontakt-corner--br { bottom: 40px; right: 60px; border-width: 0 1px 1px 0; }

/* Rotated side text decoration */
.kontakt-side-deco {
  position: absolute; right: 32px; top: 50%;
  transform: translateY(-50%) rotate(90deg);
  display: flex; align-items: center; gap: 16px;
  z-index: 2; pointer-events: none;
}
.ksd-line { width: 40px; height: 1px; background: var(--gold); opacity: 0.4; }
.ksd-text {
  font-size: 8px; letter-spacing: 0.4em; text-transform: uppercase;
  color: rgba(242,237,228,0.3); white-space: nowrap;
}

/* Stat pills */
.kontakt-stat-pills {
  display: flex; gap: 20px; margin-top: 44px; flex-wrap: wrap;
}
.ksp-pill {
  background: rgba(201,169,110,0.08);
  border: 1px solid rgba(201,169,110,0.2);
  padding: 14px 22px;
  display: flex; flex-direction: column; align-items: center;
  min-width: 80px;
  position: relative; overflow: hidden;
  transition: background 0.4s, border-color 0.4s;
}
.ksp-pill::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(201,169,110,0.1), transparent);
  opacity: 0; transition: opacity 0.4s;
}
.ksp-pill:hover { background: rgba(201,169,110,0.14); border-color: var(--gold); }
.ksp-pill:hover::before { opacity: 1; }
.ksp-num {
  font-family: var(--font-cormo); font-size: 28px; font-weight: 200;
  color: var(--gold); line-height: 1;
}
.ksp-label {
  font-size: 8px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(242,237,228,0.4); margin-top: 4px;
}

/* ==================== FOOTER ==================== */
.footer { background: var(--dark); padding: 60px 0 40px; border-top: 1px solid var(--border); }
.footer-inner {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 40px;
}
.footer-logo {
  font-family: var(--font-cormo); font-size: 28px; font-weight: 200; line-height: 1.2;
}
.footer-logo em { color: var(--gold); font-style: normal; }
.footer-logo span { display: block; font-family: var(--font-sans); font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(242,237,228,0.25); margin-top: 6px; }
.footer-links { display: flex; gap: 32px; }
.footer-links a {
  font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase;
  text-decoration: none; color: rgba(242,237,228,0.35); transition: color 0.3s;
}
.footer-links a:hover { color: var(--gold); }
.footer-legal { text-align: right; }
.footer-legal p { font-size: 10px; color: rgba(242,237,228,0.2); margin-bottom: 4px; letter-spacing: 0.1em; }
.footer-bar { height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); margin-top: 40px; opacity: 0.2; }

/* ==================== MOBILE STICKY CTA BAR ==================== */
.mobile-cta-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
  background: rgba(8,8,8,0.96);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(201,169,110,0.2);
  padding: 14px 20px;
  flex-direction: row; align-items: center; justify-content: space-between;
  gap: 12px;
}
.mobile-cta-text { display: flex; flex-direction: column; gap: 2px; }
.mobile-cta-title {
  font-family: var(--font-serif); font-size: 15px; font-weight: 200;
  color: var(--fg); line-height: 1;
}
.mobile-cta-title em { color: var(--gold); font-style: normal; }
.mobile-cta-sub {
  font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(242,237,228,0.4);
}
.mobile-cta-btn {
  flex-shrink: 0;
  font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--bg); background: var(--gold); text-decoration: none;
  padding: 11px 18px; white-space: nowrap;
  transition: background 0.3s;
}
.mobile-cta-btn:hover, .mobile-cta-btn:active { background: var(--gold-light); }

/* zahlen 3-wide override */
/* .zahlen-grid--3 { grid-template-columns: repeat(3,1fr); } */
.zahlen-grid--3 .zahlen-num { font-size: clamp(80px, 12vw, 160px); }

/* ==================== RESPONSIVE — TABLET ==================== */
@media (max-width: 1024px) {
  .nav-center-links { display: none; }
  .vision-grid, .lage-grid, .kontakt-grid { grid-template-columns: 1fr; gap: 60px; }
  .vision-fullbleed-grid { grid-template-columns: 1fr; }
  .vision-img-col .vision-img-wrap { min-height: 55vh; }
  .vision-text-col { padding: 60px 40px; }
  .transformation-steps { grid-template-columns: 1fr 1fr; }
  .features-grid { grid-template-columns: 1fr 1fr; }
  .editorial-diptych { grid-template-columns: 1fr; }
  .diptych-left { height: 60vh; }
  .locations-grid { grid-template-columns: repeat(2,1fr); }
  .statement-strip { grid-template-columns: 1fr; }
  .statement-photo { min-height: 50vh; }
  .menu-inner { flex-direction: column; gap: 48px; }
  .menu-side-info { flex-direction: row; gap: 40px; align-items: flex-start; }
  .container { padding: 0 40px; }
  .lage-list { grid-template-columns: repeat(2, 1fr); }
}

/* ==================== RESPONSIVE — MOBILE ==================== */
@media (max-width: 768px) {

  /* --- GLOBAL MOBILE RESETS --- */
  body { cursor: auto; }
  .cursor, .cursor-follower {
  position: fixed; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid #fff; pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%); transition: width 0.35s var(--ease), height 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
  display: flex; justify-content: center; align-items: center;
  background: rgba(255,255,255,0);
  backdrop-filter: blur(0px);
  
}
  .section { padding: 80px 0; }
  .container { padding: 0 24px; }
  .section-title { font-size: clamp(36px, 9vw, 56px); margin-bottom: 28px; }
  .section-tag { margin-bottom: 32px; }
  /* Prevent word-clip animations from cutting text on mobile */
  .word-wrap { overflow: visible; }

  /* --- NAV --- */
  .nav { padding: 16px 20px; }
  .nav.scrolled { padding: 12px 20px; }
  .nav-cta-btn { display: none; }
  .logo-text { font-size: 19px; }

  /* --- HERO / FLIP --- */
  .drone-logo-reveal { padding: 0 28px; }
  .dlr-wordmark { flex-direction: column; gap: 8px; }
  .dlr-divider { display: none; }
  .flip-text { padding: 0 28px; }
  .flip-word--2 { padding-left: 20px; }
  .flip-label { left: 24px; bottom: 100px; }
  .flip-scroll-hint { bottom: 100px; }
  .flr-char { font-size: clamp(44px, 13vw, 80px); }

  /* --- STATEMENT STRIP --- */
  .statement-strip { grid-template-columns: 1fr; min-height: auto; }
  .statement-inner { padding: 60px 24px; }
  .statement-title { font-size: clamp(28px, 7.5vw, 44px); word-wrap: break-word; overflow-wrap: break-word; }
  .statement-body { font-size: 14px; max-width: 100%; }
  .statement-photo { min-height: 50vh; }

  /* --- VISION --- */
  .vision-fullbleed-grid { grid-template-columns: 1fr; }
  .vision-img-col .vision-img-wrap { min-height: 50vh; }
  .vision-text-col { padding: 48px 24px; }
  .vision-text { font-size: 15px; }
  .vision-specs { margin-top: 32px; }
  .vision-spec { flex-direction: column; gap: 4px; align-items: flex-start; }
  .vspec-val { font-size: 18px; }
  .vision-quote { padding: 20px 20px 20px 24px; margin-top: 48px; }
  .vision-quote blockquote { font-size: 16px; }

  /* --- EDITORIAL STRIP --- */
  .editorial-strip { padding: 60px 0 80px; }
  .editorial-label { padding: 0 24px; margin-bottom: 40px; }
  .editorial-label-em { font-size: 36px; }
  .editorial-photos { flex-direction: column; height: auto; gap: 4px; }
  .editorial-photo { height: 300px; flex: none; }
  .editorial-photo img { object-position: top; }
  .editorial-middle-text {
    padding: 32px 24px;
    min-width: auto;
    order: -1;
    text-align: left;
    align-items: flex-start;
  }
  .editorial-mid-title { font-size: clamp(32px, 7vw, 42px); }
  .editorial-mid-sub { max-width: 100%; text-align: left; }

  /* --- TRANSFORMATION --- */
  .transformation-content { padding: 80px 24px; }
  .transformation-steps { grid-template-columns: 1fr; gap: 32px; }
  .step h3 { font-size: 18px; }
  .step p { font-size: 13px; }

  /* --- EDITORIAL FULLSCREEN --- */
  .editorial-fullscreen { height: 70vh; }
  .editorial-fs-content { bottom: 40px; left: 24px; right: 24px; }
  .efs-title { font-size: clamp(40px, 10vw, 64px); }
  .efs-sub { font-size: 11px; letter-spacing: 0.15em; }
  .editorial-fs-number { font-size: 60px; right: 24px; bottom: 40px; }

  /* --- SPACES/RÄUME --- */
  .raeume .container { padding: 0 24px; }
  .gallery-strip { flex-direction: column; height: auto; gap: 4px; }
  .gallery-item { height: 280px; flex: none; }
  .features-grid { grid-template-columns: 1fr; gap: 36px; }
  .feature h3 { font-size: 20px; }
  .feature p { font-size: 13px; }

  /* --- VIDEO INTERLUDE --- */
  .video-interlude { height: 60vh; }
  .pull-quote { font-size: clamp(28px, 7vw, 44px); padding: 0 24px; }

  /* --- DIPTYCH --- */
  .editorial-diptych { grid-template-columns: 1fr; }
  .diptych-left { height: 50vh; }
  .diptych-right { padding: 48px 24px; }
  .diptych-title { font-size: clamp(32px, 8vw, 48px); }
  .diptych-sub { font-size: 14px; margin-bottom: 32px; }
  .diptych-stats { gap: 24px; flex-wrap: wrap; }
  .ds-num { font-size: 36px; }

  /* --- MARQUEE --- */
  .marquee-track { font-size: 10px; gap: 28px; }

  /* --- LAGE / MAP --- */
  .lage { padding: 80px 0 60px; }
  .lage-header { padding: 0 24px; margin-bottom: 40px; }
  .lage .lage-header .section-tag { margin-bottom: 28px; }
  .lage-intro { font-size: 14px; max-width: 100%; }
  .berlin-map-wrap {
    padding: 0;
    overflow: hidden;
    margin: 0 -24px;
  }
  .berlin-map-svg {
  background: transparent;
    transform: scale(2.8);
    transform-origin: 48% 48%;
  }
  /* Make dots extra large & glowing on mobile */
  .loc-core { r: 18 !important; fill: #c9a96e !important; }
  .loc-inner { r: 7 !important; }
  .loc-pulse-ring { r: 42 !important; }
  /* Strong mobile pulse glow */
  .map-loc .loc-pulse-ring {
    stroke-width: 2 !important;
    stroke: rgba(201,169,110,0.7) !important;
  }
  .map-loc .loc-core {
    animation: mobileDotGlow 1.5s ease-in-out infinite alternate !important;
  }
  @keyframes mobileDotGlow {
    0%   { filter: drop-shadow(0 0 6px rgba(201,169,110,0.5)) drop-shadow(0 0 12px rgba(201,169,110,0.3)); }
    100% { filter: drop-shadow(0 0 14px rgba(201,169,110,1)) drop-shadow(0 0 28px rgba(201,169,110,0.6)); }
  }
  .loc-map-label { font-size: 12px !important; font-weight: 600 !important; opacity: 1 !important; }
  .loc-map-num { font-size: 11px !important; opacity: 0.7 !important; }
  .map-loc { cursor: pointer; }
  .lage-list {
    grid-template-columns: 1fr;
    padding: 0 24px;
    margin-top: 24px;
    gap: 0;
  }
  .lage-list-item {
    border-right: none;
    padding: 20px 0;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 12px;
    align-items: center;
  }
  .lage-list-item:nth-child(4n) { border-right: none; }
  .lli-district { font-size: 18px; }
  .lli-street { font-size: 11px; }
  .lli-badge { font-size: 8px; padding: 4px 10px; }
  .lage-bottom { flex-direction: column; align-items: center; gap: 24px; }
  .lage-bottom-stat { border-right: none; border-bottom: 1px solid var(--border-gold); padding: 24px 0; width: 100%; text-align: center; }
  .lage-hint { font-size: 8px; }

  /* --- BRAND SECTION --- */
  .brand-section { height: auto; min-height: 60vh; }
  .brand-content { padding: 60px 24px; max-width: 100%; }
  .brand-title { font-size: clamp(32px, 8vw, 48px); }
  .brand-text { font-size: 14px; max-width: 100%; }
  .brand-cta { font-size: 9px; padding: 12px 20px; }

  /* --- ZAHLEN --- */
  /* .zahlen-grid--3 { grid-template-columns: 1fr; } */
  .zahlen-grid--3 .zahlen-num { font-size: clamp(60px, 15vw, 100px); }
  /* .zahlen-grid { grid-template-columns: 1fr; } */
  .zahlen-item { padding: 32px 24px; }
  .zahlen-label { font-size: 10px; }

  /* --- KONTAKT --- */
  .kontakt-grid { grid-template-columns: 1fr; gap: 48px; }
  .kontakt-sub { font-size: 14px; max-width: 100%; }
  .kontakt-bg-text { font-size: clamp(60px, 12vw, 100px); }
  .kontakt-corner { display: none; }
  .kontakt-side-deco { display: none; }
  .kontakt-line { display: none; }
  .kontakt-stat-pills { display: none; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-field input,
  .form-field textarea,
  .form-field select { font-size: 16px; }

  /* --- FOOTER --- */
  .footer-inner { flex-direction: column; gap: 32px; }
  .footer-links { flex-wrap: wrap; gap: 16px; }
  .footer-legal { text-align: center; }
  .footer-logo { font-size: 24px; }
  .footer { padding-bottom: 90px; } /* space for mobile CTA bar */

  /* --- MOBILE CTA BAR --- */
  .mobile-cta-bar { display: flex; }

  /* --- FULLSCREEN MENU --- */
  .menu-inner { padding: 0 24px; }
  .menu-nav { padding: 0 16px; }
  .menu-link { font-size: clamp(32px, 7vw, 48px); }
  .menu-side-info { flex-direction: row; gap: 20px; flex-wrap: wrap; }
  .menu-stat-num { font-size: 28px; }
  .menu-footer { left: 24px; right: 24px; bottom: 24px; flex-direction: column; gap: 8px; }
  .menu-logo-main { font-size: clamp(22px, 5vw, 32px); }

  /* Modal is already full-screen by default — no mobile overrides needed */

  /* === MOBILE PERFORMANCE === */
  /* Kill grain animation — constant repaints destroy mobile FPS */
  .grain-overlay { animation: none !important; opacity: 0.25 !important; }
  /* Kill particles canvas on mobile — saves GPU cycles */
  .particles-canvas { display: none !important; }
  /* Kill custom cursor — not needed on touch devices */
  .cursor, .cursor-follower {
  position: fixed; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid #fff; pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%); transition: width 0.35s var(--ease), height 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
  display: flex; justify-content: center; align-items: center;
  background: rgba(255,255,255,0);
  backdrop-filter: blur(0px);
  
}
  /* GPU-promote scroll-heavy sections to avoid jank */
  .parallax-img, .parallax-inner,
  .section, .editorial-photo,
  .gallery-item, .gallery-strip,
  .editorial-fullscreen, .editorial-diptych,
  .vcf-slide img,
  .brand-bg, .kontakt-bg {
    will-change: auto;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  /* Reduce parallax overshoot to minimize paint area */
  .parallax-img .parallax-inner { transform: scale(1.06) translateZ(0) !important; }
  .editorial-fs-bg .parallax-inner { transform: scale(1.04) translateZ(0) !important; height: 108% !important; }
  .diptych-photo .parallax-inner { transform: scale(1.04) translateZ(0) !important; height: 108% !important; }
  .brand-bg .parallax-inner { transform: scale(1.04) translateZ(0) !important; height: 110% !important; }

  /* ═══════════════════════════════════════════════
     MOBILE SCROLL ANIMATION — INITIAL STATES
     Everything starts hidden, GSAP reveals on scroll
     ═══════════════════════════════════════════════ */

  /* Sections & large blocks — start faded */
  .statement-inner,
  .statement-photo,
  .editorial-fs-content,
  .editorial-fs-number,
  .diptych-left,
  .diptych-text-wrap,
  .brand-content,
  .berlin-map-svg {
  background: transparent;
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Images — start hidden + slightly scaled */
  .statement-photo img,
  .editorial-photo img,
  .editorial-fs-bg img,
  .gallery-item img,
  .diptych-photo img,
  .brand-bg img,
  .kontakt-bg-inner {
    opacity: 0;
    will-change: opacity, transform;
  }
  .vision-crossfade-wrap {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Editorial photos container */
  .editorial-photo {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Gallery items */
  .gallery-item {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Text elements — start hidden */
  .vision-text,
  .statement-body,
  .editorial-mid-sub,
  .efs-sub,
  .diptych-sub,
  .lage-intro,
  .brand-text,
  .kontakt-sub,
  .pull-quote-sub,
  .pull-quote {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Tags — start hidden */
  .section-tag,
  .tag--light,
  .statement-tag,
  .diptych-tag,
  .efs-tag,
  .brand-eyebrow,
  .editorial-label {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Features */
  .feature {
    opacity: 0;
    will-change: opacity, transform;
  }
  .feature-icon {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Steps */
  .step {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Dividers — start collapsed */
  .statement-line,
  .editorial-mid-line,
  .efs-divider,
  .diptych-gold-line {
    transform: scaleX(0);
    transform-origin: left;
    will-change: transform;
  }

  /* Zahlen */
  .zahlen-item {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Footer */
  .footer-logo,
  .footer-links a,
  .footer-legal {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Kontakt form elements */
  .kontakt .form-field,
  .kontakt .form-row,
  .kontakt .submit-btn,
  .kontakt-info-item {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Stats */
  .diptych-stat,
  .lage-bottom-stat {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Editorial middle text */
  .editorial-mid-title,
  .editorial-mid-sub {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Lage header elements */
  .lage-header .section-tag,
  .lage-header .section-title,
  .lage-hint {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Transformation video */
  .transformation-video-wrap {
    opacity: 0.6;
    will-change: opacity, transform;
  }

  /* Marquee */
  .marquee-wrap {
    opacity: 0;
    will-change: opacity;
  }

  /* Vision specs & quote */
  .vision-spec {
    opacity: 0;
    will-change: opacity, transform;
  }
  .vision-quote {
    opacity: 0;
    will-change: opacity, transform;
  }
}


/* ==================== SCROLL VIDEO — PENTHOUSE TIMELAPSE ==================== */
.scroll-video-zone { height: 500vh; position: relative; }
.sv-sticky {
  position: sticky; top: 0;
  width: 100%; height: 100vh;
  overflow: hidden; background: #000;
  display: flex; align-items: center; justify-content: center;
}
.sv-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.sv-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.1) 40%,
    rgba(0,0,0,0.1) 60%,
    rgba(0,0,0,0.65) 100%
  );
}
.sv-scanlines {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 3px,
    rgba(0,0,0,0.06) 3px, rgba(0,0,0,0.06) 4px
  );
  opacity: 0.4;
}
/* HUD top bar */
.sv-hud-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 28px 48px;
  border-bottom: 1px solid rgba(201,169,110,0.12);
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent);
}
.sv-hud-left { display: flex; flex-direction: column; gap: 4px; }
.sv-hud-tag {
  font-size: 9px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--gold);
}
.sv-hud-sub {
  font-size: 8px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(242,237,228,0.3);
}
.sv-hud-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sv-hud-label {
  font-size: 7px; letter-spacing: 0.5em; text-transform: uppercase; color: rgba(242,237,228,0.3);
}
.sv-hud-pct {
  font-family: var(--font-cormo); font-size: 36px; font-weight: 200; color: var(--gold); line-height: 1;
}
/* Center content */
.sv-content {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  padding: 0 80px; pointer-events: none;
}
.sv-phase {
  font-size: 9px; letter-spacing: 0.6em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 20px;
  transition: opacity 0.4s;
}
.sv-title {
  font-family: var(--font-cormo); font-size: clamp(64px, 9vw, 130px);
  font-weight: 200; line-height: 1.0; color: var(--fg);
}
.sv-title em { color: var(--gold); font-style: italic; }
/* Progress bar */
.sv-progress-wrap {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 10;
  padding: 0 48px 36px;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}
.sv-progress-track {
  width: 100%; height: 1px; background: rgba(242,237,228,0.1); margin-bottom: 16px; position: relative;
}
.sv-progress-fill {
  height: 1px; background: linear-gradient(to right, var(--gold), var(--gold-light));
  width: 0%; transition: width 0.05s linear;
  box-shadow: 0 0 12px rgba(201,169,110,0.5);
}
.sv-progress-fill::after {
  content: ''; position: absolute; right: 0; top: 50%; transform: translate(50%,-50%);
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 14px rgba(201,169,110,0.8);
}
.sv-chapters {
  display: flex; justify-content: space-between;
}
.sv-chapter {
  font-size: 7px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(242,237,228,0.25); transition: color 0.3s;
}
.sv-chapter.active { color: var(--gold); }
/* Corner decorators */
.sv-corner {
  position: absolute; width: 24px; height: 24px; z-index: 15; pointer-events: none;
}
.sv-corner--tl { top: 20px; left: 20px; border-top: 1px solid rgba(201,169,110,0.4); border-left: 1px solid rgba(201,169,110,0.4); }
.sv-corner--tr { top: 20px; right: 20px; border-top: 1px solid rgba(201,169,110,0.4); border-right: 1px solid rgba(201,169,110,0.4); }
.sv-corner--bl { bottom: 20px; left: 20px; border-bottom: 1px solid rgba(201,169,110,0.4); border-left: 1px solid rgba(201,169,110,0.4); }
.sv-corner--br { bottom: 20px; right: 20px; border-bottom: 1px solid rgba(201,169,110,0.4); border-right: 1px solid rgba(201,169,110,0.4); }

/* ==================== CURSOR SPARKLE TRAIL ==================== */
.sparkle {
  position: fixed; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, var(--gold-light), transparent);
  pointer-events: none; z-index: 9998;
  mix-blend-mode: screen;
}

/* ==================== CLIP-PATH SECTION REVEALS ==================== */
.clip-reveal {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.clip-reveal.in-view { clip-path: inset(0 0 0% 0); }

/* ==================== HORIZONTAL DRIFT TITLES ==================== */
.drift-left { transform: translateX(-60px); opacity: 0; transition: all 1.4s cubic-bezier(0.19,1,0.22,1); }
.drift-right { transform: translateX(60px); opacity: 0; transition: all 1.4s cubic-bezier(0.19,1,0.22,1); }
.drift-left.in-view, .drift-right.in-view { transform: translateX(0); opacity: 1; }

/* ==================== SECTION BACKGROUND COLOR FLOW ==================== */
body { background: var(--bg); }

/* ==================== MAGNETIC HOVER ITEMS ==================== */
.magnetic { transition: transform 0.4s cubic-bezier(0.19,1,0.22,1); }

/* ==================== ENHANCED PARALLAX DEPTH ==================== */
.parallax-deep .parallax-inner { transform: scale(1.35); }
.vision-img-wrap .parallax-inner { transform: scale(1.35); }

/* ==================== IMAGE HOVER DISTORT ==================== */
.gallery-item img, .editorial-photo img {
  transition: transform 0.8s cubic-bezier(0.19,1,0.22,1), filter 0.6s, clip-path 0.6s;
}
.gallery-item:hover img {
  clip-path: inset(2% 2% 2% 2% round 2px);
}

/* ==================== BERLIN MAP ==================== */
.lage { padding: 120px 0 80px; position: relative; overflow: hidden; }
.lage-header { margin-bottom: 60px; }
.lage-hint {
  display: flex; align-items: center; gap: 8px; margin-top: 20px;
  font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase;
  color: rgba(201,169,110,0.5);
}

.berlin-map-wrap {
  width: 100%; max-width: 100%; margin: 0 auto;
  padding: 0 40px; position: relative;
}
.berlin-map-svg {
  background: transparent;
  width: 100%; height: auto;
  background: #050505;
  border: 1px solid rgba(201,169,110,0.08);
}
/* Berlin border polygon */
.berlin-border {
  fill: rgba(201,169,110,0.03);
  stroke: rgba(201,169,110,0.15);
  stroke-width: 0.8;
}
/* S-Bahn ring */
.sbahn-ring {
  fill: none;
  stroke: rgba(201,169,110,0.08);
  stroke-width: 0.8;
  stroke-dasharray: 6,4;
}
/* Spree river */
.spree-river {
  fill: none;
  stroke: rgba(80,120,160,0.25);
  stroke-width: 3;
  stroke-linecap: round;
}
/* District text labels */
.map-district-label {
  font-family: 'Inter', sans-serif; font-size: 8px;
  fill: rgba(242,237,228,0.1); letter-spacing: 0.1em; text-transform: uppercase;
  pointer-events: none;
}
.map-mitte-label {
  font-family: 'Inter', sans-serif; font-size: 7px;
  fill: rgba(201,169,110,0.35); letter-spacing: 0.2em; text-transform: uppercase;
  pointer-events: none;
}
.mitte-cross { stroke: rgba(201,169,110,0.2); stroke-width: 0.8; }

/* Location dots */
.map-loc { opacity: 0; } /* starts hidden — JS animates in */
.map-loc .loc-pulse-ring {
  fill: none; stroke: rgba(201,169,110,0.4); stroke-width: 0.8;
  transform-origin: 0 0;
  animation: svgPulse 2.5s ease-out infinite;
}
.map-loc .loc-pulse-ring.r2 { animation-delay: 1.25s; }
.map-loc .loc-pulse-ring.ring-sold { stroke: rgba(120,100,80,0.3); }
.map-loc .loc-core { filter: url(#dotGlow); transition: r 0.3s; }
.map-loc .loc-inner { pointer-events: none; }
.map-loc:hover .loc-core { r: 10; }
.map-loc .loc-map-label {
  font-family: 'Inter', sans-serif; font-size: 9px;
  fill: rgba(242,237,228,0.6); letter-spacing: 0.08em;
  opacity: 0; transition: opacity 0.3s;
  pointer-events: none;
}
.map-loc .loc-map-num {
  font-family: 'Cormorant Garamond', serif; font-size: 11px;
  fill: rgba(201,169,110,0.5);
  opacity: 0; transition: opacity 0.3s;
  pointer-events: none;
}
.map-loc:hover .loc-map-label,
.map-loc:hover .loc-map-num { opacity: 1; }
.map-loc.active .loc-map-label,
.map-loc.active .loc-map-num { opacity: 1; }

@keyframes svgPulse {
  0%   { r: 10; opacity: 0.6; }
  70%  { r: 28; opacity: 0; }
  100% { r: 28; opacity: 0; }
}

/* Location list below map */
.lage-list {
  width: 100%; max-width: 100%; margin: 40px auto 0; padding: 0 40px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0;
  border-top: 1px solid rgba(201,169,110,0.1);
}
.lage-list-item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 24px 20px; cursor: pointer;
  border-right: 1px solid rgba(201,169,110,0.08);
  border-bottom: 1px solid rgba(201,169,110,0.08);
  transition: background 0.3s;
  opacity: 0; transform: translateY(20px); /* animated in by JS */
}
.lage-list-item:hover { background: rgba(201,169,110,0.04); }
.lage-list-item:nth-child(4n) { border-right: none; }
.lli-num { font-size: 8px; color: var(--gold); letter-spacing: 0.3em; }
.lli-district { font-family: var(--font-cormo); font-size: 18px; color: var(--fg); font-weight: 200; }
.lli-street { font-size: 10px; color: rgba(242,237,228,0.4); letter-spacing: 0.05em; }
.lli-badge {
  font-size: 7px; letter-spacing: 0.3em; text-transform: uppercase;
  display: inline-block; padding: 3px 8px; margin-top: 4px; width: fit-content;
}
.lli-badge.avail { background: rgba(201,169,110,0.12); color: var(--gold); }
.lli-badge.soon  { background: rgba(120,100,70,0.12);  color: #8b7355; }
.lli-badge.sold  { background: rgba(80,60,40,0.12);    color: rgba(201,169,110,0.4); }

/* ==================== LISTING MODAL (Airbnb-style) ==================== */
.loc-modal {
  position: fixed; inset: 0; z-index: 9000;
  pointer-events: none;
}
.loc-modal.open { pointer-events: all; }
.loc-modal-bg {
  position: absolute; inset: 0;
  background: rgba(3,3,3,0.95);
  opacity: 0; transition: opacity 0.5s;
  backdrop-filter: blur(16px);
}
.loc-modal.open .loc-modal-bg { opacity: 1; }

/* Panel — fullscreen on mobile, centered card on desktop */
.loc-modal-panel {
  position: fixed; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  background: var(--bg);
  transform: translateY(100%); opacity: 0;
  transition: transform 0.55s cubic-bezier(0.19,1,0.22,1), opacity 0.35s;
}
.loc-modal.open .loc-modal-panel {
  transform: translateY(0); opacity: 1;
}

/* --- Top Bar --- */
.lm-topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: rgba(8,8,8,0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(201,169,110,0.08);
  min-height: 52px;
}
.lm-back {
  width: 36px; height: 36px;
  border: 1px solid rgba(201,169,110,0.2); border-radius: 50%;
  background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s;
  flex-shrink: 0;
}
.lm-back:hover { border-color: var(--gold); background: rgba(201,169,110,0.06); }
.lm-back svg { width: 18px; height: 18px; color: var(--fg); }
.lm-topbar-title {
  flex: 1;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(242,237,228,0.5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lm-photo-counter {
  font-size: 10px; letter-spacing: 0.15em;
  color: rgba(242,237,228,0.4);
  padding: 4px 10px;
  border: 1px solid rgba(201,169,110,0.1);
  border-radius: 12px;
}

/* --- Scroll Container --- */
.lm-scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* --- Gallery --- */
.lm-gallery { position: relative; }
.lm-hero-wrap {
  position: relative;
  width: 100%; height: 55vh; min-height: 280px; max-height: 480px;
  overflow: hidden;
}
.lm-hero-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  transition: transform 0.8s cubic-bezier(0.19,1,0.22,1);
}
.lm-hero-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--bg) 0%, transparent 40%);
}
.lm-hero-num {
  position: absolute; bottom: 16px; left: 20px;
  font-family: var(--font-cormo); font-size: 72px; font-weight: 200;
  color: rgba(201,169,110,0.12); line-height: 1;
}
.lm-thumbs {
  display: flex; gap: 3px; padding: 3px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: rgba(8,8,8,0.95);
}
.lm-thumb {
  flex: 0 0 80px; height: 56px;
  overflow: hidden; cursor: pointer;
  border: 1.5px solid transparent;
  transition: border-color 0.3s, opacity 0.3s;
  opacity: 0.6;
}
.lm-thumb.active { border-color: var(--gold); opacity: 1; }
.lm-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* --- Content Area --- */
.lm-content { padding: 28px 20px 0; }

/* Header */
.lm-header { margin-bottom: 0; }
.lm-tag {
  font-size: 8px; letter-spacing: 0.5em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.lm-title {
  font-family: var(--font-cormo); font-size: 36px; font-weight: 200;
  color: var(--fg); line-height: 1.1; margin-bottom: 6px;
}
.lm-street {
  font-size: 12px; color: rgba(242,237,228,0.45);
  letter-spacing: 0.03em; margin-bottom: 12px;
}
.lm-badge {
  display: inline-block;
  font-size: 7px; letter-spacing: 0.4em; text-transform: uppercase;
  padding: 5px 12px;
  background: rgba(201,169,110,0.12); color: var(--gold);
}

/* Dividers */
.lm-divider {
  height: 1px; background: rgba(201,169,110,0.08); margin: 24px 0;
}

/* Specs Grid */
.lm-specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.lm-spec { display: flex; flex-direction: column; gap: 3px; }
.lm-spec-val {
  font-family: var(--font-cormo); font-size: 24px; color: var(--fg); font-weight: 200;
}
.lm-spec-label {
  font-size: 7px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(242,237,228,0.3);
}

/* Section Labels */
.lm-section { margin-bottom: 0; }
.lm-section-label {
  font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 18px;
  display: flex; align-items: center; gap: 12px;
}
.lm-section-label::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(to right, rgba(201,169,110,0.15), transparent);
}

/* USP Highlights */
.lm-usps { display: flex; flex-direction: column; gap: 14px; }
.lm-usp {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px;
  background: rgba(201,169,110,0.03);
  border: 1px solid rgba(201,169,110,0.06);
  border-radius: 4px;
  transition: border-color 0.3s, background 0.3s;
}
.lm-usp:hover {
  border-color: rgba(201,169,110,0.15);
  background: rgba(201,169,110,0.05);
}
.lm-usp-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; border-radius: 50%;
  background: rgba(201,169,110,0.08);
}
.lm-usp-text { flex: 1; }
.lm-usp-title {
  font-size: 12px; font-weight: 500; color: var(--fg);
  letter-spacing: 0.02em; margin-bottom: 2px;
}
.lm-usp-sub {
  font-size: 11px; color: rgba(242,237,228,0.4); line-height: 1.5;
}

/* Description */
.lm-desc {
  font-size: 14px; line-height: 1.85; color: rgba(242,237,228,0.55);
  font-weight: 200;
}

/* Investment Bars */
.lm-invest-bars { display: flex; flex-direction: column; gap: 18px; margin-bottom: 18px; }
.lm-invest-row { display: flex; flex-direction: column; gap: 6px; }
.lm-invest-row-head {
  display: flex; justify-content: space-between; align-items: baseline;
}
.lm-invest-row-label {
  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(242,237,228,0.5);
}
.lm-invest-row-val {
  font-family: var(--font-cormo); font-size: 18px; color: var(--gold); font-weight: 400;
}
.lm-invest-bar {
  height: 4px; background: rgba(201,169,110,0.08); border-radius: 2px;
  overflow: hidden;
}
.lm-invest-bar-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  width: 0; transition: width 1.2s cubic-bezier(0.19,1,0.22,1);
}
.lm-invest-text {
  font-size: 12px; line-height: 1.7; color: rgba(242,237,228,0.4); font-style: italic;
}

/* POI Distance List */
.lm-pois { display: flex; flex-direction: column; gap: 0; }
.lm-poi {
  display: grid; grid-template-columns: 32px 1fr auto;
  align-items: center; gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(201,169,110,0.04);
  transition: background 0.3s;
}
.lm-poi:last-child { border-bottom: none; }
.lm-poi-icon {
  font-size: 16px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(201,169,110,0.06);
  border-radius: 6px;
}
.lm-poi-name {
  font-size: 12px; color: rgba(242,237,228,0.65);
  letter-spacing: 0.02em;
}
.lm-poi-dist {
  font-family: var(--font-cormo); font-size: 16px; color: var(--gold);
  font-weight: 400; white-space: nowrap;
}

/* Google Map */
.lm-gmap-wrap {
  position: relative; width: 100%;
  padding-bottom: 70%; /* 10:7 aspect */
  border-radius: 4px; overflow: hidden;
  border: 1px solid rgba(201,169,110,0.08);
}
.lm-gmap {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  filter: invert(0.92) hue-rotate(180deg) saturate(0.3) brightness(0.7) contrast(1.1);
}

/* Sticky CTA */
.lm-sticky-cta {
  position: sticky; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: rgba(8,8,8,0.95);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(201,169,110,0.1);
  z-index: 40;
}
.lm-price-label {
  font-family: var(--font-cormo); font-size: 18px; color: var(--fg);
  font-weight: 200;
}
.lm-cta-btn {
  display: inline-flex; align-items: center; text-decoration: none;
  font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--bg); background: var(--gold);
  padding: 13px 24px; border-radius: 2px;
  transition: background 0.3s, transform 0.3s;
}
.lm-cta-btn:hover { background: var(--gold-light); transform: translateY(-1px); }

/* Desktop overrides for modal */
@media (min-width: 769px) {
  .loc-modal-panel {
    position: relative;
    inset: auto;
    width: 90vw; max-width: 560px;
    height: 92vh; max-height: 800px;
    margin: auto;
    border-radius: 8px;
    border: 1px solid rgba(201,169,110,0.1);
    overflow: hidden;
  }
  .loc-modal {
    display: flex; align-items: center; justify-content: center;
  }
  .lm-content { padding: 32px 28px 0; }
  .lm-title { font-size: 42px; }
}

/* =============================================
   CINEMATIC WORD-CLIP REVEAL SYSTEM
   Used by JS splitAndReveal() — wraps each word
   in overflow:hidden so it slides up from below
   ============================================= */
.word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.06em; /* prevent descender clip */
  margin-right: 0.22em;
}
.word-inner {
  display: inline-block;
  will-change: transform, opacity;
}

/* Perspective on titles for rotateX to render */
.section-title, .statement-title {
  transform-style: preserve-3d;
  perspective: 1200px;
}

/* ==================== FLIP-UP HERO ==================== */
.flip-hero {
  position: relative;
  height: 150vh;
  background: var(--bg);
}

/* Sticky wrapper — stays in viewport while scrolling */
.flip-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

/* Text revealed underneath the panel */
.flip-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 80px;
  z-index: 1;
  pointer-events: none;
}

.flip-eyebrow {
  font-size: 9px;
  letter-spacing: 0.7em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s var(--ease) 0.6s, transform 1s var(--ease) 0.6s;
}
.flip-hero-text-ready .flip-eyebrow { opacity: 1; transform: translateY(0); }

.flip-title {
  font-family: var(--font-cormo);
  font-size: clamp(80px, 14vw, 200px);
  font-weight: 200;
  line-height: 0.9;
  color: var(--fg);
  letter-spacing: -0.02em;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
}

.flip-word {
  display: block;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.flip-word--1 { transition-delay: 0.7s; }
.flip-word--2 { transition-delay: 0.9s; padding-left: 60px; }
.flip-word em { color: var(--gold); font-style: italic; }
.flip-hero-text-ready .flip-word { opacity: 1; transform: translateY(0); }

.flip-sub {
  font-size: 14px;
  color: rgba(242,237,228,0.5);
  letter-spacing: 0.1em;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s var(--ease) 1.1s, transform 1s var(--ease) 1.1s;
}
.flip-hero-text-ready .flip-sub { opacity: 1; transform: translateY(0); }

/* The flip panel — full cover, flips upward via rotateX */
.flip-panel {
  position: absolute;
  inset: 0;
  z-index: 10;
  will-change: opacity, transform;
}

/* No 3D perspective needed — flat panel with fade-out exit */
.flip-sticky {
  overflow: hidden;
}

.flip-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
  pointer-events: none;
}
/* Hide native browser play button & controls */
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0 !important;
}

/* Light initial overlay — GSAP scroll will darken to 80% via flip-dark-veil */
.flip-panel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15) 0%,
    transparent 35%,
    transparent 65%,
    rgba(0,0,0,0.45) 100%
  );
  z-index: 2;
}

/* Dark veil — scroll darkens further, keeps motif visible at ~80% */
.flip-dark-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(250,250,250,0.92);
  opacity: 0;
  pointer-events: none;
}

/* ---- LOGO REVEAL ON SCROLL ---- */
.flip-logo-reveal {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  pointer-events: none;
  /* hidden — GSAP scroll reveals it */
  opacity: 0;
}

.flr-line {
  width: 0px; /* grows via JS */
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201,169,110,0.9), transparent);
  transition: none; /* controlled by GSAP */
  will-change: width;
}

.flr-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  will-change: transform, opacity;
}

.flr-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 9px;
  letter-spacing: 0.72em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transform: translateY(12px);
  will-change: opacity, transform;
}
.flr-eyebrow-text { flex-shrink: 0; }
.flr-eyebrow-line {
  height: 1px;
  width: 0;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  will-change: width;
}

.flr-wordmark {
  display: flex;
  gap: 0.22em;
  align-items: baseline;
  overflow: visible;
}

/* Each word clips its chars from below */
.flr-word {
  display: inline-flex;
  overflow: hidden;       /* clips the chars sliding up */
  padding-bottom: 0.05em; /* prevent clipping descenders */
}
.flr-word--italic { font-style: italic; }

.flr-char {
  font-family: var(--font-serif);
  font-size: clamp(60px, 10vw, 148px);
  font-weight: 200;
  line-height: 0.92;
  display: inline-block;
  transform: translateY(110%);  /* GSAP slides up to 0 */
  will-change: transform;
}
/* "Berlin" = DARK */
#flr-berlin .flr-char  { color: var(--fg); text-shadow: none; }
/* "Rooftop" = GOLD */
#flr-rooftop .flr-char { color: var(--gold); text-shadow: none; font-style: normal; }

.flr-sub {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 9px;
  letter-spacing: 0.58em;
  text-transform: uppercase;
  color: rgba(39,39,39,0.5);
  opacity: 0;
  transform: translateY(10px);
  will-change: opacity, transform;
}
.flr-sub-line {
  height: 1px;
  width: 0;
  background: rgba(39,39,39,0.2);
  will-change: width;
}

/* flr-char mobile size handled in main responsive section */

/* Label bottom-left on image */
.flip-label {
  position: absolute;
  bottom: 44px;
  left: 56px;
  z-index: 2;
}
.flip-label-tag {
  font-size: 9px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(242,237,228,0.55);
}

/* Scroll hint */
.flip-scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s var(--ease) 1.4s;
}
.flip-hero-ready .flip-scroll-hint { opacity: 1; }

.flip-scroll-hint span {
  writing-mode: vertical-lr;
  font-size: 8px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(242,237,228,0.4);
}
.flip-scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, rgba(242,237,228,0.6), transparent);
  animation: flipScrollLine 1.8s ease-in-out infinite;
}
@keyframes flipScrollLine {
  0%, 100% { transform: scaleY(1); opacity: 0.6; }
  50%  { transform: scaleY(0.4); opacity: 0.2; }
}

/* Short spacer — drives 2-3s video scroll */
.flip-scroll-zone {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 150vh;
  pointer-events: none;
}

/* flip hero mobile rules consolidated in main responsive section */

/* Custom Brand Cards for Projects */
/* Custom Brand Cards for Projects */
.brand-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 24px; margin: 0 auto; width: 100%; max-width: 100%; padding: 0 40px; margin-top: 80px; text-align: left;
}
.brand-card {
  width: 100% !important; position: relative; aspect-ratio: 1 / 1.1;
  border-radius: 16px; overflow: hidden; transform: none !important; margin: 0;
}
.brand-card.bc-offset { transform: none; margin: 0; }
.bc-img { width: 100%; height: 100%; overflow: hidden; border-radius: 16px; margin: 0; }
.bc-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.bc-info {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 40px 30px 30px;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: white; pointer-events: none; text-align: left;
}
.bc-info h3 { font-size: 22px; margin-bottom: 4px; font-weight: 500; letter-spacing: 0.05em; color: white; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.bc-info span { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.8); text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.brand-card {
}

/* ==================== 1 MILLION BUDGET EFFECTS ==================== */
.reveal-img-wrap {
  overflow: hidden;
  position: relative;
}
.reveal-img-wrap img { transform: scale(1.1); }
.split-text-line {
  overflow: hidden;
}
.split-text-inner {
  display: inline-block;
  transform: translateY(110%);
}
.magnetic {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.cursor.active {
  transform: scale(3);
  
  background: white;
  border-color: transparent;
}

.efs-body { max-width: 800px; font-size: 18px; line-height: 1.8; color: var(--fg); opacity: 0.8; margin: 20px auto 0 auto; text-align: center; }

.section-title { text-align: center; width: 100%; }

.section-tag { text-align: center; width: 100%; margin: 0 auto 20px auto; }

.kontakt-text { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }

#k-title { text-align: center !important; margin: 0 auto 40px auto; width: 100%; display: block; }

.kontakt-info { display: flex; flex-direction: column; align-items: center; text-align: center; }

.kontakt-socials { display: flex; flex-direction: row !important; justify-content: center; gap: 40px !important; width: 100%; margin-top: 40px; }

/* =========================================
   LUXURY LIGHT THEME (AWWWARDS STYLE)
========================================= */

.lux-title-large {
  font-family: var(--font-cormo);
  font-size: 52px;
  line-height: 1.1;
  text-transform: uppercase;
  color: #111;
  font-weight: 200;
  letter-spacing: -0.02em;
}
.lux-title-massive {
  font-family: var(--font-cormo);
  font-size: 10vw;
  line-height: 1;
  text-transform: uppercase;
  color: white;
  font-weight: 200;
  letter-spacing: 0.05em;
  text-align: center;
}
.lux-text-body {
  font-size: 15px;
  color: #555;
  line-height: 1.8;
  max-width: 500px;
  font-family: var(--font-inter);
  font-weight: 200;
}
.lux-btn {
  display: inline-block;
  margin-top: 40px;
  padding: 16px 36px;
  border: 1px solid #111;
  color: #111;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.15em;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}
.lux-btn:hover {
  background: #111;
  color: #fff;
}
.lux-section-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  margin-bottom: 40px;
  color: #111;
  font-weight: 400;
}

/* Grid Layouts */
.lux-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.lux-card {
  position: relative;
}
.lux-card-img-wrap {
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  margin-bottom: 25px;
}
.lux-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}
.lux-card:hover .lux-card-img {
  transform: scale(1.05);
}
.lux-card-title {
  font-size: 15px;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.15em;
  color: #111;
  font-weight: 400;
  line-height: 1.4;
}
.lux-card-subtitle {
  font-size: 10px;
  color: #888;
  letter-spacing: 0.1em;
  display: block;
  margin-top: 5px;
}

/* Parallax Wrappers */
.lux-parallax-wrap {
  overflow: hidden;
}
.lux-img-hover-wrap {
  overflow: hidden;
  border-radius: 4px;
}
.lux-img-hover-wrap img {
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lux-img-hover-wrap:hover img {
  transform: scale(1.05);
}

/* Key Facts */
.lux-stat-block {
  display: flex;
  flex-direction: column;
}
.lux-stat-num {
  font-family: var(--font-cormo);
  font-size: 72px;
  line-height: 1;
  color: #fff;
  font-weight: 200;
  margin-bottom: 10px;
}
.lux-stat-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.5);
}

/* =========================================
   EXTREME LUXURY UPGRADE (LIGHT THEME)
========================================= */

/* Film Grain Overlay */
.grain-overlay {
  position: fixed;
  top: -150%;
  left: -50%;
  width: 300%;
  height: 300%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.08;
  background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22/%3E%3C/svg%3E');
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -25%); }
  40% { transform: translate(-5%, 25%); }
  50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, 0%); }
  70% { transform: translate(0%, 15%); }
  80% { transform: translate(3%, 35%); }
  90% { transform: translate(-10%, 10%); }
}

/* Background Canvas */
.lux-canvas-bg {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;
  background: #fafafa;
}

/* Curtain Reveals */
.lux-curtain-wrap {
  position: relative;
  overflow: hidden;
}
.lux-curtain {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: #fafafa;
  z-index: 10;
  transform-origin: top center;
}
.lux-curtain-img {
  transform: scale(1.2);
}

/* Text Splitting */
.split-word {
  display: inline-block;
  /* overflow:hidden removed - was clipping char animations */
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.split-char {
  display: inline-block;
  /* transform removed - was hiding text from old animation system */
}

/* Magnetic Buttons & Nav */
.magnetic {
  display: inline-block;
}
.nav-link.magnetic:hover {
  color: #000;
}

/* =========================================
   EXTREME LUXURY CURSOR (LIGHT THEME)
========================================= */
body, a, button {
  cursor: none !important;
}

.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  
}
.cursor-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: #000000;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), clip-path 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s;
  clip-path: circle(50% at 50% 50%);
}

.cursor-follower {
  position: fixed; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid #fff; pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%); transition: width 0.35s var(--ease), height 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
  display: flex; justify-content: center; align-items: center;
  background: rgba(255,255,255,0);
  backdrop-filter: blur(0px);
  
}

/* Hover States */
.cursor-follower.active {
  width: 80px; height: 80px;
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}


@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.cursor { margin-top: -6px; margin-left: -6px; }
.cursor-follower {
  position: fixed; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid #fff; pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%); transition: width 0.35s var(--ease), height 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
  display: flex; justify-content: center; align-items: center;
  background: rgba(255,255,255,0);
  backdrop-filter: blur(0px);
  
}

/* =========================================
   CLEANUP & LAYOUT UTILITIES
========================================= */

/* Hero Video Header */
.lux-video-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lux-video-hero video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.lux-video-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%);
  z-index: 2;
}
.lux-video-hero .lux-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 40px;
}
.lux-video-hero .lux-title-massive {
  color: #fff;
}

/* Global Section Centering */
.lux-section, .lux-custom-video-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Sections & Spacing */
.lux-section-pad {
  padding: 150px 60px;
}
.lux-section-pad-top {
  padding-top: 150px;
}
.lux-section-pad-bot {
  padding-bottom: 150px;
}
.lux-bg-dark {
  background: #111;
  color: #fff;
}
.lux-bg-light {
  background: #f4f4f4;
  color: #111;
}

/* Layout Utilities */
.lux-flex-between {
  display: flex;
  flex-direction: row; /* Ensure row direction for sections that use this */
  justify-content: space-between;
  align-items: center;
  gap: 80px;
}
.lux-flex-reverse {
  flex-direction: row-reverse;
}
.lux-col-40 {
  width: 40%;
}
.lux-col-50 {
  width: 50%;
}
.lux-col-60 {
  width: 60%;
}

/* Typography Overrides for Dark Backgrounds */
.lux-bg-dark .lux-section-label {
  color: #fff;
}

/* Footer Grid */
.lux-footer {
  background: #111;
  color: #fff;
  padding: 100px 60px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.lux-footer h4 {
  color: white;
  margin-bottom: 20px;
}
.lux-footer p {
  line-height: 1.8;
  color: #999;
}
.lux-footer a {
  color: #999;
  text-decoration: none;
}
.lux-footer-col {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* =========================================
   NEXT-LEVEL MICRO-INTERACTIONS
========================================= */

/* 1. Preloader */
.lux-preloader {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Outfit', sans-serif;
}
.lux-preloader-text {
  font-size: 14px;
  letter-spacing: 0.3em;
  font-weight: 200;
  text-transform: uppercase;
  overflow: hidden;
}
.lux-preloader-text span {
  display: inline-block;
  transform: translateY(100%);
}

/* 2. Smart Header (Nav Hide/Show) */
.nav {
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background 0.5s, padding 0.4s;
  will-change: transform;
}
.nav.nav-hidden {
  transform: translateY(-100%);
}
.nav.scrolled {
  background: var(--theme-bg, #ffffff) !important;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* 3. Scroll Progress Indicator */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(0,0,0,0.05);
  z-index: 100000;
  transform-origin: 0% 50%;
  pointer-events: none;
}
.scroll-progress-fill {
  width: 100%;
  height: 100%;
  background: #000;
  transform: scaleX(0);
  transform-origin: 0% 50%;
  will-change: transform;
}

/* 4. Inner-Image Parallax tweaks */
.lux-card-img-wrap, .lux-img-hover-wrap {
  overflow: hidden;
  position: relative;
  backface-visibility: hidden;
  transform: translateZ(0);
}
/* Ensure the image is taller than the container to allow for parallax panning */
.lux-parallax-img {
  height: 130% !important;
  top: -15% !important;
  position: absolute;
  left: 0;
  width: 100%;
  object-fit: cover;
  will-change: transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* =========================================
   MOBILE OPTIMIZATION & UX POLISH
========================================= */

/* Hamburger Button */
.lux-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 10000;
  position: relative;
}
.lux-hamburger span {
  display: block;
  width: 24px;
  height: 1px;
  background: #111;
  margin: 6px 0;
  transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.lux-hamburger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.lux-hamburger.active span:nth-child(2) {
  opacity: 0;
}
.lux-hamburger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Menu Overlay */
.lux-mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.98);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  backdrop-filter: blur(10px);
}
.lux-mobile-menu.active {
  opacity: 1;
  pointer-events: auto;
}
.lux-mobile-link {
  font-size: 32px;
  font-family: 'Cormorant Garamond', serif;
  color: #111;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.lux-mobile-menu.active .lux-mobile-link {
  opacity: 1;
  transform: translateY(0);
}

/* Touch Device Cursor Override */
@media (hover: none) and (pointer: coarse) {
  body, a, button {
    cursor: auto !important;
  }
  .cursor, .cursor-follower {
  position: fixed; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid #fff; pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%); transition: width 0.35s var(--ease), height 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
  display: flex; justify-content: center; align-items: center;
  background: rgba(255,255,255,0);
  backdrop-filter: blur(0px);
  
}
}

/* Responsive Overrides */
@media (max-width: 1024px) {
  .nav-center-links { display: none !important; }
  .lux-hamburger { display: block; }
  
  .lux-flex-between {
    flex-direction: column;
    gap: 50px;
    align-items: flex-start;
  }
  .lux-col-40, .lux-col-50, .lux-col-60 {
    width: 100%;
  }
  .lux-section-pad {
    padding: 100px 30px;
  }
  .lux-footer {
    flex-direction: column;
    gap: 50px;
    padding: 80px 30px;
  }
  .lux-title-massive {
    font-size: clamp(40px, 12vw, 120px);
  }
  .lux-grid-3 {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
@media (max-width: 768px) {
  .lux-video-hero .lux-hero-content {
    left: 30px !important;
    bottom: 40px !important;
    padding: 0;
  }
}

/* ========== MINIMAP STYLES ========== */
.berlin-map-wrap {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  margin-top: 100px;
  margin-bottom: 50px;
}
.berlin-map-svg {
  background: transparent;
  width: 100%;
  height: auto;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.05);
}
.berlin-border {
  fill: rgba(0,0,0,0.03);
  stroke: rgba(0,0,0,0.15);
  stroke-width: 0.8;
}
.sbahn-ring {
  fill: none;
  stroke: rgba(0,0,0,0.08);
  stroke-width: 0.8;
  stroke-dasharray: 6,4;
}
.spree-river {
  fill: none;
  stroke: rgba(80,120,160,0.25);
  stroke-width: 3;
  stroke-linecap: round;
}
.map-district-label {
  font-family: 'Inter', sans-serif; font-size: 8px;
  fill: rgba(0,0,0,0.3); letter-spacing: 0.1em; text-transform: uppercase;
  pointer-events: none;
}
.map-mitte-label {
  font-family: 'Inter', sans-serif; font-size: 7px;
  fill: rgba(0,0,0,0.4); letter-spacing: 0.2em; text-transform: uppercase;
  pointer-events: none;
}
.mitte-cross { stroke: rgba(0,0,0,0.2); stroke-width: 0.8; }

.map-loc { opacity: 0; cursor: pointer; } 
.map-loc .loc-pulse-ring {
  fill: none;
  stroke: rgba(201,169,110,0.5);
  stroke-width: 0.5;
  animation: pulseRing 2.5s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
}
.map-loc .loc-pulse-ring.r2 { animation-delay: 1.25s; }
.map-loc .loc-core { filter: url(#dotGlow); transition: r 0.3s; }
.map-loc .loc-inner { pointer-events: none; }
.map-loc:hover .loc-core { r: 10; fill: #111; }
.map-loc .loc-map-label {
  font-family: 'Inter', sans-serif; font-size: 10px; fill: #111;
  letter-spacing: 0.1em; opacity: 0; transition: opacity 0.3s;
  pointer-events: none; text-transform: uppercase; font-weight: 500;
}
.map-loc .loc-map-num {
  font-family: 'Inter', sans-serif; font-size: 10px; fill: rgba(0,0,0,0.5);
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.map-loc:hover .loc-map-label,
.map-loc:hover .loc-map-num,
.map-loc.active .loc-map-label,
.map-loc.active .loc-map-num { opacity: 1; }
.map-loc.active .loc-core { r: 10; fill: #111; }

@keyframes pulseRing {
  0% { r: 7; opacity: 1; stroke-width: 1.5; }
  100% { r: 35; opacity: 0; stroke-width: 0.1; }
}

@media (max-width: 768px) {
  .berlin-map-wrap { padding: 0; overflow: hidden; }
  .berlin-map-svg {
  background: transparent; transform: scale(2.8); transform-origin: 48% 48%; }
  .loc-core { r: 12 !important; }
  .loc-inner { r: 5 !important; }
  .loc-pulse-ring { r: 30 !important; }
  .map-loc .loc-pulse-ring { stroke-width: 2 !important; }
  .loc-map-label { font-size: 8px !important; opacity: 1 !important; }
  .loc-map-num { opacity: 0 !important; }
}



/* Marquee Section */
.lux-marquee-section {
  padding: 80px 0;
  background: var(--bg-color);
  overflow: hidden;
  border-top: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.lux-marquee-container {
  display: flex;
  white-space: nowrap;
  font-family: var(--font-cormo);
  font-size: clamp(50px, 8vw, 110px);
  font-weight: 200;
  color: var(--fg);
  text-transform: uppercase;
}
.lux-marquee-content {
  display: inline-block;
  animation: marquee 25s linear infinite;
  padding-right: 50px;
}
.lux-marquee-content span {
  color: var(--gold);
  font-style: italic;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}




/* Project Modal */
.project-modal {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 100000; display: none; align-items: center; justify-content: center;
}
.pm-bg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.8); backdrop-filter: blur(10px);
  opacity: 0;
}
.pm-content {
  position: relative; z-index: 1; width: 90%; max-width: 1000px;
  background: var(--bg-color); display: flex;
  transform: translateY(50px); opacity: 0;
  box-shadow: 0 40px 100px rgba(0,0,0,0.5);
}
.pm-close {
  position: absolute; top: 20px; right: 20px; background: none; border: none;
  font-size: 24px; color: var(--fg); cursor: pointer; z-index: 10;
}
.pm-image-wrap {
  width: 50%; aspect-ratio: 4/5; overflow: hidden;
}
.pm-image-wrap img {
  width: 100%; height: 100%; object-fit: cover;
}
.pm-info {
  width: 50%; padding: 60px; display: flex; flex-direction: column; justify-content: center;
}
.pm-badge {
  display: inline-block; padding: 6px 12px; border: 1px solid var(--gold); color: var(--gold);
  font-size: 10px; text-transform: uppercase; margin-bottom: 20px; align-self: flex-start;
}
.pm-title {
  font-family: var(--font-cormo); font-size: 40px; font-weight: 200; margin-bottom: 10px;
}
.pm-subtitle {
  font-size: 12px; text-transform: uppercase; opacity: 0.7; margin-bottom: 40px;
}
.pm-stats {
  display: flex; gap: 40px; margin-bottom: 40px;
}
@media (max-width: 768px) {
  .pm-content { flex-direction: column; }
  .pm-image-wrap { width: 100%; height: 250px; }
  .pm-info { width: 100%; padding: 30px; }
}

/* Ticker Section */
.lux-ticker-section {
  padding: 10px 0; border-top: 1px solid rgba(0,0,0,0.1); border-bottom: 1px solid rgba(0,0,0,0.1);
  overflow: hidden; background: transparent;
}
.lux-ticker-wrap { display: flex; white-space: nowrap; }
.lux-ticker-content {
  display: inline-flex; align-items: center; animation: marquee 20s linear infinite; padding-right: 40px;
}
.lux-ticker-content span {
  font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg);
}
.tk-dot {
  display: inline-block; width: 4px; height: 4px; background: var(--gold); border-radius: 50%;
  margin: 0 40px;
}

/* Morphing Cursor CSS */
.cursor-dot {
  display: flex; justify-content: center; align-items: center;
}

.cursor-dot.view-mode {
  width: 80px !important; height: 80px !important; background: rgba(0,0,0,0.2) !important; border: 1px solid rgba(0,0,0,0.1); backdrop-filter: blur(4px);
}
.cursor-dot.view-mode 
.cursor-dot.magnetic-mode {
  width: 0px !important; height: 0px !important; opacity: 0;
}




/* ================= V2 WOW CSS ================= */
.cursor {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
}
.cursor-dot {
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: -6px; left: -6px;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cursor-ring {
  width: 40px;
  height: 40px;
  border: 1px solid #fff;
  border-radius: 50%;
  position: absolute;
  top: -20px; left: -20px;
  transition: width 0.3s, height 0.3s, top 0.3s, left 0.3s, background 0.3s;
}

/* Hover States */
.cursor-dot.magnetic-mode { transform: scale(0); }
.cursor-ring.magnetic-mode { width: 80px; height: 80px; top: -40px; left: -40px; background: rgba(255,255,255,0.1); }
.cursor-dot.view-mode { transform: scale(0); }
.cursor-ring.view-mode {
  width: 100px; height: 100px; top: -50px; left: -50px;
  background: #fff; mix-blend-mode: normal;
}
.cursor-ring.view-mode::after {
  content: 'VIEW'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); color: #000; font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
}

/* Page Transition Overlay */
.page-transition {
  position: fixed; top: 100%; left: 0; width: 100%; height: 100vh; background: #111; z-index: 10000; pointer-events: none;
}

/* V2 Fullscreen Menu */
.lux-v2-menu {
  position: fixed; inset: 0; background: #111; z-index: 8000; display: flex; align-items: center; justify-content: center;
  pointer-events: none; clip-path: circle(0% at 100% 0%); transition: clip-path 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}
.lux-v2-menu.active { clip-path: circle(150% at 100% 0%); pointer-events: auto; }
.v2-menu-links { display: flex; flex-direction: column; gap: 20px; text-align: center; }
.v2-menu-link {
  font-family: 'Cormorant Garamond', serif; font-size: 8vw; color: #fff; text-decoration: none; text-transform: uppercase;
  line-height: 1; overflow: hidden; position: relative;
}
.v2-menu-link span {
  display: inline-block; transform: translateY(100%) rotate(5deg); transform-origin: left top; transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}
.lux-v2-menu.active .v2-menu-link span { transform: translateY(0) rotate(0); }
.v2-menu-link:hover { color: var(--gold); }

/* V2 Typography Hover Reveal Gallery */
.v2-projects-gallery {
  position: relative; width: 100%; min-height: 100vh; background: #000; color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 100px 0; overflow: hidden;
}
.v2-project-bg-layer {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; background-size: cover; background-position: center; opacity: 0; transition: opacity 0.8s ease, transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1); transform: scale(1.1);
}
.v2-project-bg-layer.active { opacity: 0.6; transform: scale(1); }
.v2-project-list { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 40px; text-align: center; }
.v2-project-item {
  font-family: 'Inter', sans-serif; font-size: 8vw; font-weight: 800; text-transform: uppercase; line-height: 0.9; cursor: pointer; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.5); transition: -webkit-text-fill-color 0.4s ease, -webkit-text-stroke 0.4s ease, transform 0.4s ease;
}
.v2-project-item:hover { -webkit-text-fill-color: #fff; -webkit-text-stroke: 1px transparent; transform: skewX(-5deg); }
.v2-project-item.dimmed { opacity: 0.2; }


/* ================= V2 THEME & FONT ENGINE ================= */
@font-face {
  font-family: 'Bruna Grotesk';
  src: url('media/bruna-light-refined-v880.woff2') format('woff2'); font-display: swap;
  font-weight: 300;
  font-style: normal;
}

/* Apply Bruna Grotesk globally */
body, h1, h2, h3, h4, h5, h6, p, .lux-title-massive, .lux-title-large, .lux-section-label, .lux-card-title, .nav-link, .lux-btn, .v2-menu-link, .v2-project-item, .lux-text-body {
  font-family: 'Bruna Grotesk', sans-serif !important;
}

/* Theme Engine Variables */
:root {
  --theme-bg: #ffffff;
  --theme-text: #111111;
  --theme-btn-border: #111111;
}

body.theme-grey {
  --theme-bg: #c9c9c9;
  --theme-text: #111111;
  --theme-btn-border: #111111;
}

body.theme-dark {
  --theme-bg: #111111;
  --theme-text: #C5A059; /* Richer, deeper Gold, less yellow */
  --theme-btn-border: #C5A059;
  --gold: #C5A059; /* Override global gold for dark theme */
}

/* Apply Theme Variables smoothly */
body {
  background-color: var(--theme-bg) !important;
  color: var(--theme-text) !important;
  transition: background-color 0.8s ease, color 0.8s ease;
}

h1, h2, h3, p, .lux-title-massive, .lux-title-large, .lux-section-label, .lux-card-title, .lux-text-body, .lux-stat-num, .lux-stat-label {
  color: var(--theme-text) !important;
  transition: color 0.8s ease;
}

.lux-btn {
  border-color: var(--theme-btn-border) !important;
  color: var(--theme-text) !important;
  transition: color 0.4s ease, border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
}

.lux-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(to right, transparent, rgba(198, 168, 124, 0.6), transparent);
  transform: skewX(-20deg);
  transition: none;
  z-index: 1;
}

.lux-btn:hover {
  background: var(--gold) !important;
  color: #000 !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 25px rgba(198, 168, 124, 0.4);
}

.lux-btn:hover::after {
  left: 200%;
  transition: left 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.nav-link {
  color: var(--theme-text) !important;
  transition: color 0.4s ease, text-shadow 0.4s ease;
}
.nav-link:hover, .lux-mobile-link:hover {
  color: var(--gold) !important;
  text-shadow: 0 0 15px rgba(198, 168, 124, 0.5);
}

/* Adjust v2 menu background for dark theme */
body.theme-dark .lux-v2-menu {
  background: #000 !important;
}
body.theme-dark .v2-menu-link {
  color: var(--theme-text) !important;
}

/* Theme Switcher Button Styling */
.theme-switch {
  cursor: pointer;
}


/* ================= V2 CINEMATIC HERO & CUSTOM VIDEO ================= */
.hero-layers { position: absolute; inset: 0; z-index: -1; }
.hero-layer { position: absolute; inset: 0; background-size: cover; background-position: center; clip-path: inset(0 0 0 0); transform: scale(1); z-index: 1; opacity: 0; }
.hero-layer.active { opacity: 1; z-index: 2; }
.hero-layer.animating { z-index: 3; opacity: 1; }

.lux-video-wrapper { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #000; cursor: none; }
.lux-custom-video { width: 100%; height: 100%; object-fit: cover; }
.lux-video-ui { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 40px; transition: opacity 0.4s; opacity: 1; pointer-events: none; }
.lux-video-wrapper:hover .lux-video-ui { opacity: 1; }
.lux-video-ui.playing { opacity: 0; }
.lux-video-ui.playing.paused { opacity: 1; }

.lux-play-btn { margin: auto; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; pointer-events: auto; color: #fff; border: 1px solid rgba(255,255,255,0.3); transition: transform 0.3s; }
.lux-play-btn:hover { transform: scale(1.1); }
.lux-play-btn svg { margin-left: 5px; }

.lux-video-controls { display: flex; align-items: center; gap: 30px; width: 100%; pointer-events: auto; }
.lux-progress-bar { flex: 1; height: 4px; background: rgba(255,255,255,0.2); cursor: pointer; overflow: hidden; }
.lux-progress-filled { height: 100%; background: #D4AF37; width: 0%; pointer-events: none; }
.lux-fullscreen-btn { cursor: pointer; color: #fff; }


/* ================= V2 ROTARY, FOOTER & FULLSCREEN IMAGES ================= */


/* Rotary Dial Animation */
.theme-rotary-dial svg {
  transition: filter 0.3s ease;
}
.theme-rotary-dial:hover svg {
  filter: drop-shadow(0 0 10px var(--gold));
}

/* Compact footer: brand, office and navigation share one clear row. */
.lux-footer {
  display: block;
  padding: 36px 5% 20px;
  background: #111;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-family: 'Bruna Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: #eee;
  box-shadow: none;
}
.lux-footer-top, .lux-footer-bottom {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
}
.lux-footer-top {
  display: grid;
  grid-template-columns: 160px minmax(190px, 1fr) auto;
  align-items: start;
  gap: 32px;
}
.lux-footer-logo { display: inline-flex; align-items: center; min-height: 40px; }
.lux-footer .lux-footer-logo .logo-svg { display: block; width: 136px; height: auto; fill: #fff !important; }
.lux-footer-office { display: grid; gap: 6px; font-size: 14px; line-height: 1.55; font-style: normal; }
.lux-footer .lux-footer-hours { color: #a8a8a8 !important; font-size: 13px; }
.lux-footer-nav { display: grid; grid-template-columns: repeat(2, auto); gap: 8px 28px; }
.lux-footer-nav a, .lux-footer-legal a { display: inline-flex; align-items: center; min-height: 24px; font-size: 14px; line-height: 1.5; text-decoration: none; }
.lux-footer a:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.lux-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid rgba(255,255,255,0.14); margin-top: 26px; padding-top: 14px; text-align: left; }
.lux-footer .lux-footer-bottom p { margin: 0; color: #a8a8a8 !important; font-size: 12px; line-height: 1.6; }
.lux-footer-legal { display: flex; gap: 24px; }
.lux-footer .lux-footer-legal a { color: #bdbdbd !important; font-size: 13px; }
@media (max-width: 760px) {
  .lux-footer { padding: 28px 24px 18px; }
  .lux-footer-top { grid-template-columns: 112px minmax(0,1fr); gap: 22px; }
  .lux-footer .lux-footer-logo .logo-svg { width: 108px; }
  .lux-footer-office { font-size: 14px; gap: 5px; }
  .lux-footer .lux-footer-hours { font-size: 12px; }
  .lux-footer-nav { grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0 16px; }
  .lux-footer-nav a { min-height: 40px; }
  .lux-footer-bottom { margin-top: 18px; gap: 10px; flex-wrap: wrap; }
  .lux-footer-legal { gap: 20px; }
  .lux-footer-legal a { min-height: 32px; }
}

/* Fix Text Color for Header, Footer, and Dark Sections across ALL themes */
.lux-video-hero h1, .lux-video-hero h2, .lux-video-hero h3, .lux-video-hero p, .lux-video-hero .lux-title-massive, .lux-video-hero .lux-title-large, .lux-video-hero span,
.lux-bg-dark h1, .lux-bg-dark h2, .lux-bg-dark h3, .lux-bg-dark p, .lux-bg-dark .lux-stat-num, .lux-bg-dark .lux-stat-label, .lux-bg-dark span,
.lux-footer h1, .lux-footer h2, .lux-footer h3, .lux-footer h4, .lux-footer p, .lux-footer span {
  color: #ffffff !important;
}
.lux-footer a {
  color: #ffffff !important;
}
.lux-footer a:hover {
  color: var(--gold) !important;
}

/* Explicit Logo Colors requested by user */
body.theme-dark .logo-svg { fill: #ffffff !important; }
body.theme-light .logo-svg { fill: #fdfdfd !important; } /* 'hell' */
body.theme-grey .logo-svg { fill: #f0f0f0 !important; } /* 'hell' */

/* Ensure logo remains visible when scrolled */
body.theme-light .nav.scrolled .logo-svg { fill: #111111 !important; }
body.theme-grey .nav.scrolled .logo-svg { fill: #111111 !important; }
body.theme-dark .nav.scrolled .logo-svg { fill: #ffffff !important; }

/* Media stays visible by default; experience.js animates its containing column. */

@keyframes spinPulse {
  0% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 5px rgba(197, 160, 89, 0.2)); }
  50% { transform: rotate(180deg) scale(1.15); filter: drop-shadow(0 0 15px rgba(197, 160, 89, 0.8)); }
  100% { transform: rotate(360deg) scale(1); filter: drop-shadow(0 0 5px rgba(197, 160, 89, 0.2)); }
}


/* Keep navigation artwork legible on the solid header in every theme. */
#nav .logo-svg {
  fill: #111111 !important;
}
body.theme-dark #nav .logo-svg {
  fill: #ffffff !important;
}
#nav .lux-hamburger span {
  background: var(--theme-text, #111111);
}


/* Shared content and navigation refinements. */
body { font-weight: 300; }
.lux-text-body { font-size: 16px; line-height: 1.75; }
.lux-text-body a { color: inherit; text-underline-offset: 4px; }
.lux-btn { min-height: 48px; font-size: 13px; letter-spacing: 0.1em; }
.lux-section-label { font-size: 14px; letter-spacing: 0.16em; }
.lux-hamburger { width: 44px; height: 44px; padding: 10px; }
.lux-hamburger span { margin: 6px 0; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.menu-open, .modal-open { overflow: hidden; }
.lux-mobile-menu {
  top: 76px;
  height: calc(100dvh - 76px);
  bottom: auto;
  padding: 28px 24px max(24px, env(safe-area-inset-bottom));
  gap: 24px;
  justify-content: flex-start;
  align-items: stretch;
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  background: var(--theme-bg);
  color: var(--theme-text);
  backdrop-filter: none;
  transition: opacity 0.2s, visibility 0.2s;
}
.lux-mobile-menu.active { visibility: visible; }
.mobile-menu-links { display: flex; flex-direction: column; gap: 8px; }
.lux-mobile-link {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-family: 'Bruna Grotesk', sans-serif;
  font-size: clamp(24px, 6vw, 30px);
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--theme-text);
  opacity: 1;
  transform: none;
}
.mobile-menu-settings { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 18px; border-top: 1px solid currentColor; margin-top: 8px; }
.mobile-menu-settings button { appearance: none; border: 0; background: none; color: var(--theme-text); font: inherit; min-width: 48px; min-height: 48px; cursor: pointer; }
.mobile-menu-settings .lang-switch { font-size: 16px; letter-spacing: 0.08em; }
.lang-switch [aria-current] { text-decoration: underline; text-underline-offset: 5px; }
.home-facts { position: relative; overflow: hidden; }
.home-facts > :not(.facts-map) { position: relative; z-index: 1; }
.facts-map { position: absolute; right: -4%; bottom: 0; height: 100%; opacity: 0.07; pointer-events: none; }
.facts-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 48px; }
.facts-grid .lux-stat-block { display: block; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.25); min-width: 0; }
.facts-grid .lux-stat-num { font-size: clamp(40px,4.5vw,64px); letter-spacing: -0.03em; line-height: 1.1; white-space: nowrap; }
.facts-grid .stat-unit { font-size: 0.4em; letter-spacing: 0; }
.facts-grid .lux-stat-label { font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; max-width: 24ch; }
.projects-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 64px; }
.projects-heading { margin: 32px 0 48px; }
.projects-grid .lux-card { min-width: 0; cursor: pointer; }
.contact-details { align-items: start; }
.contact-visual { margin: 0 !important; padding: 64px 0 0; }
.legal-content { padding: 148px 5% 72px; }
.legal-copy { width: 100%; max-width: 840px; margin: auto; text-align: left; }
.legal-copy h1 { font-size: clamp(32px,5vw,48px); line-height: 1.15; margin-bottom: 36px; }
.legal-copy h3 { font-size: 22px; line-height: 1.35; margin: 28px 0 12px; }
.legal-copy p { font-size: 16px; line-height: 1.8; margin-bottom: 18px; }
.legal-copy a { color: inherit; overflow-wrap: anywhere; text-underline-offset: 4px; }
.legal-copy h3, .legal-copy p { overflow-wrap: anywhere; hyphens: auto; }
.pm-content { background: var(--theme-bg); color: var(--theme-text); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; }
.pm-close { position: absolute; width: 44px; height: 44px; top: 12px; right: 12px; display: grid; place-items: center; background: var(--theme-bg); color: var(--theme-text); border-radius: 50%; }
.pm-info { flex-shrink: 0; }
.pm-image-wrap { flex-shrink: 0; }
.pm-subtitle, .pm-badge { font-size: 14px; }
.pm-title { line-height: 1.15; overflow-wrap: anywhere; }
.pm-stats { flex-wrap: wrap; gap: 24px; }
.lux-fullscreen-btn { min-width: 44px; min-height: 44px; display: grid; place-items: center; }

@media (max-width: 1024px) {
  body, a, button { cursor: auto !important; }
  #cursor, .cursor, .cursor-follower, .grain-overlay { display: none !important; }
  .nav, .nav.scrolled { padding: 12px 24px; min-height: 76px; }
  .lux-video-hero { height: clamp(280px,48svh,460px) !important; margin-top: 76px; }
  .lux-video-hero .lux-hero-content { left: 24px !important; right: 24px; bottom: 28px !important; padding: 0; }
  .lux-video-hero .lux-title-massive { font-size: clamp(30px,7.3vw,56px); text-align: left; line-height: 1.1; letter-spacing: 0.02em; overflow-wrap: anywhere; }
  .page-index .lux-video-hero { height: auto !important; min-height: 260px; aspect-ratio: 4 / 3; max-height: 520px; }
  .hero-layers { z-index: 0; }
  .lux-section-pad { padding: 64px 24px; }
  .lux-flex-between { gap: 32px; }
  .lux-flex-between[style*="margin-bottom: 150px"] { margin-bottom: 64px !important; }
  .lux-col-40, .lux-col-50, .lux-col-60, .lux-col-100 { width: 100%; min-width: 0; }
  .lux-title-large { font-size: clamp(30px,7.5vw,42px) !important; line-height: 1.15; letter-spacing: -0.02em; hyphens: auto; overflow-wrap: anywhere; }
  .lux-text-body { max-width: none; font-size: 16px; }
  .lux-card-title { font-size: clamp(21px,5.4vw,28px); line-height: 1.3; overflow-wrap: anywhere; hyphens: auto; }
  .lux-card-subtitle { font-size: 13px; line-height: 1.5; letter-spacing: 0.05em; }
  .lux-btn { max-width: 100%; padding: 14px 24px; margin-top: 24px; text-align: center; }
  .lux-img-hover-wrap { width: 100% !important; }
  .lux-img-hover-wrap[style*="height: 600px"] { height: auto !important; aspect-ratio: 4 / 5; }
  .media-pair { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px !important; }
  .media-pair > .lux-img-hover-wrap { width: 100% !important; margin-top: 0 !important; }
  .lux-img-hover-wrap img, .lux-img-hover-wrap video { display: block; width: 100%; height: 100%; object-fit: cover; }
  .lux-custom-video-section { margin-top: 0 !important; padding-top: 8px; padding-bottom: 64px; }
  .lux-video-ui { padding: 16px; }
  .lux-play-btn { width: 64px; height: 64px; }
  .lux-play-btn svg { width: 28px; height: 28px; }
  .lux-video-controls { gap: 16px; }
  .facts-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 24px; }
  .facts-grid .lux-stat-block:last-child { grid-column: 1 / -1; }
  .facts-grid .lux-stat-num { font-size: 44px; }
  .home-facts .lux-section-label { margin-bottom: 28px; }
  .application-section { gap: 28px; }
  .application-section .lux-section-label { margin-bottom: 16px !important; }
  .application-section .lux-text-body { margin-bottom: 0 !important; }
  .application-section .lux-btn { margin-top: 24px; }
  .page-projects > .lux-section:first-of-type { padding-top: 64px; }
  .projects-heading { margin: 0 0 32px; }
  .projects-grid { gap: 40px; }
  .contact-details { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px 24px !important; margin-bottom: 40px !important; }
  .contact-details .lux-section-label { margin-bottom: 20px; }
  .contact-details .lux-text-body { overflow-wrap: anywhere; }
  .contact-details a[rel] { font-size: 14px !important; color: var(--theme-text) !important; }
  .contact-visual { padding: 24px 0 0 !important; gap: 0; }
  .legal-content { padding: 116px 24px 56px; }
  .legal-copy h3 { font-size: 21px; }
  .pm-content { width: calc(100% - 32px); max-height: calc(100dvh - 32px); }
  .pm-info { padding: 24px; }
  .pm-image-wrap { height: 220px; }
  .pm-title { font-size: 30px; }
  .pm-subtitle, .pm-stats { margin-bottom: 20px; }
  .pm-info .lux-btn { margin-top: 8px !important; }
}
@media (max-width: 600px) {
  .projects-grid, .contact-details { grid-template-columns: minmax(0,1fr); }
  .berlin-map-wrap { padding: 0 24px; margin-top: 0; }
  .map-labels-row { flex-wrap: wrap; gap: 16px; }
}
@media (max-height: 600px) and (max-width: 1024px) {
  .lux-mobile-menu { padding-top: 12px; gap: 8px; }
  .mobile-menu-links { gap: 0; }
  .lux-mobile-link { min-height: 40px; font-size: 24px; }
  .mobile-menu-settings { padding-top: 8px; margin-top: 0; }
}
@media (max-width: 1024px), (prefers-reduced-motion: reduce) {
  .char { display: inline !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .lux-section, .lux-flex-between, .lux-bg-dark, .lux-img-hover-wrap, .lux-card, .lux-col-40, .lux-col-50, .lux-col-60, .lux-parallax-img,
  .lux-fade-up, .lux-fade-up-delay, .lux-custom-video-section,
  .lux-title-large, .lux-title-massive, .lux-section-label, .lux-text-body, .lux-stat-label, .lux-card-title, .lux-card-subtitle {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
  .lux-parallax-img, .lux-img-hover-wrap, .lux-card { animation: none !important; transition: none !important; }
}

.email-address {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 0.96em;
  font-weight: 300;
  letter-spacing: 0.01em;
  text-decoration: none;
  overflow-wrap: anywhere;
}
#kontakt, #bewerbungen, #bewerbung { scroll-margin-top: 104px; }

.v2-projects-gallery { min-height: 620px; padding: 72px 24px; isolation: isolate; }
.v2-projects-gallery::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.25); z-index: 1; pointer-events: none; }
.v2-project-list { width: 100%; max-width: 1200px; gap: 20px; }
.v2-project-item { appearance: none; border: 0; background: none; padding: 8px 16px; font-size: clamp(32px,6vw,78px); font-weight: 300; font-family: 'Bruna Grotesk', sans-serif; color: #fff; line-height: 1.15; -webkit-text-stroke: 0; -webkit-text-fill-color: #fff; transition: opacity .3s; transform: none !important; }
.v2-project-item.selected { opacity: 1; }
.v2-project-item.dimmed { opacity: .62; }
.v2-project-item:hover { transform: none; }
.v2-project-bg-layer.active { opacity: .85; transform: scale(1); }
@media (max-width: 760px) {
 .v2-projects-gallery { min-height: 440px; padding: 48px 16px; }
 .v2-project-list { gap: 16px; }
 .v2-project-item { font-size: clamp(25px,7.6vw,40px); min-height: 48px; letter-spacing: .02em; }
}

/* Compact facts and a clean contact ending. */
.home-facts.lux-section-pad { padding: 36px 60px; }
.home-facts .lux-section-label { margin: 0 0 20px; }
.home-facts .facts-map { display: none; }
.facts-grid { gap: 36px; }
.facts-grid .lux-stat-block { padding-top: 14px; margin: 0; }
.facts-grid .lux-stat-num { font-size: clamp(34px,3.5vw,48px); margin: 0 0 8px; }
.facts-grid .lux-stat-label { margin: 0; }
.contact-invitation { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; border-top: 1px solid var(--theme-border); padding: 44px 0 0; text-align: left; }
.contact-invitation h2 { font-size: clamp(28px,3vw,40px); font-weight: 300; margin: 0 0 16px; letter-spacing: -.02em; }
.contact-invitation p { font-size: 17px; line-height: 1.8; max-width: 44ch; margin: 0; }
.contact-invitation-details { display: flex; flex-direction: column; gap: 12px; justify-self: end; }
.contact-phone { font-size: clamp(20px,2.4vw,30px); font-weight: 300; white-space: nowrap; }
.contact-invitation-details > span:last-child { font-size: 13px; opacity: .7; }
.contact-invitation .email-address { font-size: 20px; }
.page-contact .contact-details { margin-bottom: 48px !important; }
.page-contact .lux-section { padding-top: 64px; padding-bottom: 64px; }

/* A scrollable, accessible project view with complete copy and image controls. */
.project-modal { height: 100dvh; padding: 24px; }
.project-modal .pm-bg { opacity: 1; background: rgba(0,0,0,.7); backdrop-filter: blur(5px); }
.pm-content { display: block; width: 100%; max-width: 1120px; max-height: calc(100dvh - 48px); transform: none; opacity: 1; background: var(--theme-bg); border-radius: 2px; scrollbar-gutter: stable; }
.pm-toolbar { position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 8px 32px; background: var(--theme-bg); border-bottom: 1px solid var(--theme-border); }
.pm-toolbar > span { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.pm-toolbar .pm-close { position: static; display: grid; place-items: center; width: 44px; height: 44px; background: transparent; color: var(--theme-text); font: 22px Arial,sans-serif; }
.pm-heading { padding: 32px 40px 28px; }
.pm-heading .pm-title { margin: 0; font-family: 'Bruna Grotesk',sans-serif; font-size: clamp(28px,3.2vw,42px); line-height: 1.2; font-weight: 300; letter-spacing: -.02em; }
.pm-heading .pm-subtitle { margin: 0 0 10px; font-size: 12px; line-height: 1.5; letter-spacing: .05em; }
.pm-overview { display: grid; grid-template-columns: 1.35fr 1fr; gap: 32px; padding: 0 40px 32px; align-items: start; }
.pm-gallery { min-width: 0; }
.pm-image-wrap { width: 100%; height: auto; aspect-ratio: 4/3; background: rgba(128,128,128,.07); }
.pm-image-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* The Hannover source includes a white presentation frame. */
.pm-image-wrap img[src*="image-75e709bfc3-lite.webp"] { transform: scale(1.22); }
.pm-gallery-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 13px; }
.pm-gallery-controls button { width: 44px; height: 44px; border: 1px solid var(--theme-border); background: transparent; color: var(--theme-text); font-size: 23px; }
.pm-gallery-controls button:disabled { opacity: .25; cursor: default; }
.pm-thumbnails { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding: 3px; }
.pm-thumbnails button { flex: 0 0 70px; width: 70px; height: 54px; padding: 0; border: 2px solid transparent; background: transparent; opacity: .55; }
.pm-thumbnails button[aria-pressed="true"] { border-color: var(--theme-text); opacity: 1; }
.pm-thumbnails img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pm-facts { margin: 0; font-size: 15px; line-height: 1.5; }
.pm-facts > div { padding: 10px 0; border-bottom: 1px solid var(--theme-border); }
.pm-facts > div:first-child { padding-top: 0; }
.pm-facts dt { font-size: 11px; opacity: .65; margin-bottom: 3px; }
.pm-facts dd { margin: 0; overflow-wrap: anywhere; }
.pm-description { padding: 0 40px 36px; max-width: 860px; }
.pm-description p { font-size: 17px; line-height: 1.8; margin: 0 0 20px; }
.pm-description h3 { font-size: 25px; line-height: 1.35; font-weight: 300; margin: 32px 0 20px; }
.pm-contact { margin: 0 40px 40px; padding-top: 30px; border-top: 1px solid var(--theme-border); display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.pm-contact h3 { font-size: 24px; font-weight: 300; margin: 0 0 12px; }
.pm-contact p { font-size: 15px; line-height: 1.6; margin: 0 0 20px; }
.pm-contact .lux-btn { font-size: 12px; }
.lux-card[data-idx]:focus-visible, .v2-project-item:focus-visible, .pm-content button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.projects-grid .lux-card-img-wrap { aspect-ratio: 4/3 !important; }
.projects-grid .lux-card-img { transform: none !important; }
.projects-grid .lux-card-title { text-align: left; font-size: 19px; line-height: 1.45; }
.projects-grid .lux-card-subtitle { display: inline-block; margin-top: 5px; }
@media (max-width: 1024px) {
 .home-facts.lux-section-pad { padding: 28px 24px; }
 .home-facts .lux-section-label { margin-bottom: 16px; }
 .facts-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
 .facts-grid .lux-stat-block:last-child { grid-column: auto; }
 .facts-grid .lux-stat-num { font-size: clamp(23px,5.6vw,42px); margin-bottom: 6px; }
 .facts-grid .lux-stat-label { font-size: 12px; line-height: 1.4; }
 .facts-grid .stat-unit { font-size: .45em; }
 .contact-invitation { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; }
 .contact-invitation-details { justify-self: start; }
 .page-contact .lux-section { padding: 48px 24px; }
}
@media (max-width: 700px) {
 .project-modal { padding: 10px; }
 .pm-content { width: 100%; max-height: calc(100dvh - 20px); }
 .pm-toolbar { padding: 6px 16px; }
 .pm-heading { padding: 24px 20px; }
 .pm-overview { grid-template-columns: 1fr; padding: 0 20px 28px; gap: 28px; }
 .pm-image-wrap { height: auto; aspect-ratio: 4/3; }
 .pm-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
 .pm-facts > div:first-child { padding-top: 10px; }
 .pm-description { padding: 0 20px 12px; }
 .pm-description p { font-size: 16px; line-height: 1.75; }
 .pm-contact { margin: 0 20px 24px; grid-template-columns: 1fr; gap: 20px; }
 .pm-contact .lux-btn { margin: 0; }
}
.pm-thumbnails { scrollbar-width: none; }
.pm-thumbnails::-webkit-scrollbar { display: none; }
.pm-content::-webkit-scrollbar { width: 4px; }
.pm-content::-webkit-scrollbar-thumb { background: #a59468; }
/* Content determines section height; avoid empty full-screen bands. */
.lux-section, .lux-custom-video-section { min-height: 0; }
.home-facts { height: auto; }
.contact-phone, a[href^="tel:"] { color: inherit; text-decoration: none; }
a[href^="tel:"]:hover { text-decoration: underline; text-underline-offset: 4px; }
.email-address { font-weight: 200 !important; }
.facts-grid .lux-stat-label { hyphens: auto; overflow-wrap: anywhere; }
.lux-play-btn, .lux-fullscreen-btn { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
@media (min-width: 1025px) {
 .lux-section-pad:not(.home-facts) { padding-top: 96px; padding-bottom: 96px; }
}
@media (max-width: 700px) {
 .facts-grid { grid-template-columns: 1fr 1fr 1.5fr; }
 .facts-grid .lux-stat-num { font-size: clamp(22px,5.6vw,34px); }
 .lux-custom-video-section .lux-video-ui { display: none; }
}
#nav { gap: 32px; }
#nav .nav-logo { flex-shrink: 0; }
#nav .nav-center-links { gap: clamp(16px,1.7vw,28px); align-items: center; white-space: nowrap; }
#nav .nav-center-links > * { flex-shrink: 0; }
@media (min-width: 1025px) and (max-width: 1190px) {
 #nav { padding-left: 32px; padding-right: 32px; gap: 24px; }
 #nav .nav-center-links { gap: 16px; }
 #nav .nav-center-links .theme-switch, #nav .nav-center-links .lang-switch { margin-left: 0 !important; }
}

/* Fixed vector arrows: identical on desktop, Android and iOS, without emoji fonts. */
:root{--ui-arrow-mask:url('media/arrow-up-right.svg')}
.ui-arrow{display:inline-block;width:1em;height:1em;flex-shrink:0;vertical-align:middle;background:currentColor;-webkit-mask:var(--ui-arrow-mask) center/contain no-repeat;mask:var(--ui-arrow-mask) center/contain no-repeat}
.ui-arrow-right{transform:rotate(45deg)}
.ui-arrow-left{transform:rotate(225deg)}

/* Project media, with an accessible fallback for entries without photography. */
.pm-image-caption{font-size:12px;line-height:1.5;margin:12px 0 0;opacity:.75}
.pm-image-caption[hidden]{display:none}
.v2-project-bg-layer--text-only{background:linear-gradient(125deg,#121411 0%,#353a30 56%,#827351 140%)}
.pm-gallery[hidden]{display:none!important}
.pm-overview--text-only{display:block}
.pm-overview--text-only .pm-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pm-overview--text-only .pm-facts>div{min-width:0;padding:10px 0}
.pm-overview--text-only .pm-facts dd{overflow-wrap:anywhere}
.editorial .project-name{line-height:1.18;overflow:visible}
@media(max-width:700px){.pm-overview--text-only .pm-facts{grid-template-columns:1fr;gap:0}}

/* Approved bilingual copy, September 2026. */
.section-copy-lead{font-size:1.12em;line-height:1.45}
.pm-project-section + .pm-project-section{margin-top:40px;padding-top:28px;border-top:1px solid var(--theme-border)}
.pm-description .pm-project-label{font-size:12px;letter-spacing:.08em;margin:0 0 10px}
.pm-project-section h3{margin-top:0}