/* ============================================================
   Die Immo-Seite — PlanVision3D
   Premium dark-editorial design system. Token-based.
   ============================================================ */

/* ---- Fonts: self-hostless, premium grotesk via Google (display+body) + mono ---- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;450;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* palette */
  --ink:        #0d1014;   /* base dark */
  --ink-2:      #121821;   /* raised dark panel */
  --ink-3:      #1a2230;   /* hairline / border on dark */
  --paper:      #f4f1ec;   /* warm light section */
  --paper-2:    #ebe6dd;
  --fog:        #c9ccd2;   /* body text on dark — WCAG AA (~9:1 on --ink) */
  --fog-2:      #8b95a1;   /* labels/eyebrows on dark — still ≥4.5:1 */
  --ink-text:   #3d3933;   /* body text on light sections — AA */
  --line-light: #d4cdc0;
  --white:      #f7f6f3;
  --accent:     #FF5011;   /* PlanVision3D orange — ONLY accent */
  --accent-d:   #e0440c;
  --ink-soft:   #2a3340;

  /* type */
  --f-display: 'Space Grotesk', system-ui, sans-serif;
  --f-body:    'Inter', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* type scale (fluid) */
  --t-hero:  clamp(2.05rem, 1.1rem + 4.6vw, 6rem);
  --t-h2:    clamp(2rem, 1.3rem + 2.8vw, 3.4rem);
  --t-h3:    clamp(1.3rem, 1.05rem + 1vw, 1.7rem);
  --t-lead:  clamp(1.05rem, 0.98rem + 0.45vw, 1.3rem);
  --t-body:  1.0625rem;
  --t-sm:    0.875rem;
  --t-eyebrow: 0.75rem;

  /* spacing */
  --pad-x: clamp(1.25rem, 0.5rem + 3vw, 5rem);
  --sec-y: clamp(4.5rem, 3rem + 6vw, 9rem);
  --maxw: 1280px;

  --radius: 4px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--ink); color:var(--white);
  font-family:var(--f-body); font-size:var(--t-body); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:600; line-height:1.04; letter-spacing:-0.02em; margin:0; }
p{ margin:0; }
strong{ color:var(--white); font-weight:600; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad-x); }
.eyebrow{
  font-family:var(--f-mono); font-size:var(--t-eyebrow); letter-spacing:0.22em;
  text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:.6rem;
}
.eyebrow::before{ content:""; width:1.6rem; height:1px; background:var(--accent); display:inline-block; }
.eyebrow--center::before{ display:none; }

.muted{ color:var(--fog); }
.lead{ font-size:var(--t-lead); color:var(--fog); line-height:1.6; max-width:62ch; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; cursor:pointer;
  font-family:var(--f-display); font-weight:600; font-size:0.82rem;
  letter-spacing:0.05em; text-transform:uppercase;
  padding:1rem 1.6rem; border-radius:2px; border:1px solid transparent;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn svg{ width:1em; height:1em; }
.btn--primary{ background:var(--accent); color:#fff; }
.btn--primary:hover{ background:var(--accent-d); transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:var(--white); border-color:var(--ink-3); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn--lighton{ border-color:rgba(13,16,20,.2); color:var(--ink); }
.btn--lighton:hover{ border-color:var(--ink); }
.btn--lg{ padding:1.15rem 2rem; font-size:0.9rem; }

.arrow{ transition:transform .25s ease; }
.btn:hover .arrow, a:hover .arrow{ transform:translateX(3px); }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(13,16,20,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ink-3);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.nav__logo img{ height:30px; width:auto; }
.nav__links{ display:flex; gap:2rem; align-items:center; list-style:none; margin:0; padding:0; }
.nav__links a{ font-size:0.92rem; color:var(--fog); letter-spacing:.01em; transition:color .2s; }
.nav__links a:hover, .nav__links a.is-active{ color:var(--white); }
.nav__cta{ display:flex; align-items:center; gap:1.2rem; }
.nav__cta .btn{ padding:.7rem 1.1rem; font-size:0.72rem; }
.nav__burger{ display:none; background:none; border:0; color:var(--white); cursor:pointer; padding:.4rem; }
.nav__burger svg{ width:26px; height:26px; }

/* ---------- sections ---------- */
section{ position:relative; }
.sec{ padding-block:var(--sec-y); }
.sec--light{ background:var(--paper); color:var(--ink); }
.sec--light h1,.sec--light h2,.sec--light h3{ color:var(--ink); }
.sec--light .lead,.sec--light .muted{ color:var(--ink-text); }
.sec--light .eyebrow{ color:var(--accent-d); }
.sec--paper2{ background:var(--paper-2); color:var(--ink); }
.sec-head{ max-width:760px; margin-bottom:clamp(2.4rem,4vw,3.6rem); }
.sec-head h2{ font-size:var(--t-h2); margin:1.1rem 0 .9rem; }

/* ---------- HERO (type-only, progressive) ---------- */
.hero{ position:relative; padding-top:clamp(4rem,7vw,8rem); padding-bottom:clamp(3rem,6vw,6rem); overflow:hidden; }
.hero__glow{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(48% 42% at 50% 20%, rgba(255,80,17,.12), transparent 68%);
}
.hero__inner{ position:relative; z-index:1; text-align:center; padding-top:clamp(2rem,5vw,4.5rem); }
.hero h1{
  font-size:var(--t-hero); font-weight:700; letter-spacing:-0.03em;
  max-width:16ch; margin:1.4rem auto 0; line-height:1.02;
  overflow-wrap:break-word; word-break:normal;
}
.hero--typeonly{ padding-bottom:clamp(4rem,7vw,7rem); }
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero__sub{ font-size:var(--t-lead); color:var(--fog); max-width:48ch; margin:1.6rem auto 0; }
.hero__cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2.4rem; }
.hero__meta{ margin-top:3.2rem; display:flex; gap:2.4rem; justify-content:center; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fog-2); }
.hero__meta span{ display:inline-flex; align-items:center; gap:.5rem; }
.hero__meta span::before{ content:""; width:6px; height:6px; background:var(--accent); border-radius:50%; }

/* delayed media reveal */
.reveal-media{ margin-top:clamp(3rem,6vw,6rem); }
.reveal-media__frame{
  position:relative; border:1px solid var(--ink-3); background:var(--ink-2);
  overflow:hidden; border-radius:var(--radius);
  opacity:0; transform:translateY(36px) scale(.985);
  transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
}
.reveal-media__frame.in{ opacity:1; transform:none; }
.reveal-media__frame img{ width:100%; height:auto; aspect-ratio:16/8; object-fit:cover; }
.reveal-media__cap{
  position:absolute; left:0; bottom:0; padding:1.4rem 1.6rem;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--white); background:linear-gradient(0deg, rgba(13,16,20,.85), transparent);
  width:100%; }
@media (prefers-reduced-motion: reduce){
  .reveal-media__frame{ opacity:1; transform:none; }
}

/* ---------- logo wall ---------- */
.logowall{ padding-block:clamp(2.6rem,4vw,4rem); border-block:1px solid var(--ink-3); background:#0a0d11; }
.logowall__label{ text-align:center; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fog-2); margin-bottom:clamp(1.6rem,3vw,2.4rem); }
.logogrid{ display:grid; grid-template-columns:repeat(6,1fr); gap:0;
  border:1px solid var(--ink-3); border-radius:var(--radius); overflow:hidden; }
.logogrid__cell{ display:flex; align-items:center; justify-content:center;
  min-height:88px; padding:1.1rem 1.3rem;
  border-right:1px solid var(--ink-3); border-bottom:1px solid var(--ink-3); }
.logogrid img{ max-height:52px; height:auto; width:auto; max-width:100%; object-fit:contain;
  /* white SVGs on dark — keep white, just modulate presence */
  opacity:.8; transition:opacity .3s ease, transform .3s ease; }
.logogrid__cell:hover img{ opacity:1; transform:scale(1.04); }

/* ---------- challenge / numbered rows ---------- */
.rows{ border-top:1px solid var(--ink-3); }
.row{ display:grid; grid-template-columns:auto 1fr 2fr; gap:clamp(1rem,4vw,4rem);
  align-items:start; padding-block:clamp(2rem,4vw,3.2rem); border-bottom:1px solid var(--ink-3); }
.sec--light .rows,.sec--light .row{ border-color:var(--line-light); }
.row__num{ font-family:var(--f-mono); font-size:.9rem; color:var(--accent); padding-top:.4rem; }
.row__title{ font-family:var(--f-display); font-size:var(--t-h3); font-weight:600; letter-spacing:-0.01em; }
.row__body{ color:var(--fog); }
.sec--light .row__body{ color:var(--ink-text); }

/* ---------- two-measure split ---------- */
.split{ display:grid; grid-template-columns:7fr 5fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.split--rev{ grid-template-columns:5fr 7fr; }
.split__media{ border:1px solid var(--ink-3); border-radius:var(--radius); overflow:hidden; background:var(--ink-2); }
.sec--light .split__media{ border-color:var(--line-light); background:#fff; }
.split__media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.measure-card{ background:var(--ink-2); border:1px solid var(--ink-3); border-radius:var(--radius); padding:clamp(1.6rem,3vw,2.6rem); }
.sec--light .measure-card{ background:#fff; border-color:var(--line-light); }
.measure-card__no{ font-family:var(--f-mono); color:var(--accent); font-size:.8rem; letter-spacing:.14em; }

/* ---------- feature list (wohnungsfinder) ---------- */
.featgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border:1px solid var(--ink-3); border-radius:var(--radius); overflow:hidden; }
.sec--light .featgrid{ border-color:var(--line-light); }
.feat{ padding:clamp(1.6rem,3vw,2.4rem); border-right:1px solid var(--ink-3); border-bottom:1px solid var(--ink-3); }
.sec--light .feat{ border-color:var(--line-light); }
.feat__icon{ width:34px; height:34px; color:var(--accent); margin-bottom:1.1rem; }
.feat h3{ font-size:1.18rem; margin-bottom:.55rem; }
.feat p{ color:var(--fog); font-size:.98rem; }
.sec--light .feat p{ color:var(--ink-text); }

/* ---------- compare table (premium, high-contrast) ---------- */
.compare-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line-light); border-radius:var(--radius); background:#fff; }
.sec--paper2 .compare-scroll{ border-color:#cfc7b8; }
.compare{ width:100%; min-width:640px; border-collapse:collapse; font-size:1rem; }
.compare th,.compare td{ text-align:left; padding:1.25rem 1.4rem; border-bottom:1px solid var(--line-light); vertical-align:top; }
.compare tr:last-child th,.compare tr:last-child td{ border-bottom:0; }
.compare thead th{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-text); padding-top:1.4rem; padding-bottom:1.4rem; }
.compare thead th.col-crit{ color:var(--fog-2); }
.compare thead th.col-old{ color:var(--ink-text); }
.compare thead th.col-win{ color:var(--accent-d); border-bottom:2px solid var(--accent); }
.compare tbody th{ font-family:var(--f-display); font-weight:600; font-size:1.02rem; color:var(--ink); width:24%; }
.compare td.col-old{ color:var(--ink-text); width:34%; }
.compare td.col-win{ color:var(--ink); font-weight:500; background:rgba(255,80,17,.035); width:42%; box-shadow:inset 3px 0 0 var(--accent); }
.compare td.col-win b{ font-weight:600; color:var(--accent-d); }
.compare .ic{ display:inline-flex; width:1.05em; height:1.05em; margin-right:.5rem; vertical-align:-2px; }
.compare .ic--old{ color:#b9b1a3; }
.compare .ic--win{ color:var(--accent); }

/* ---------- animated project loops ---------- */
.projloop-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-bottom:1.5rem; }
/* asymmetric: one wide hero loop + two stacked supports */
.projloop-asym{ display:grid; grid-template-columns:7fr 5fr; gap:1.5rem; }
.projloop-asym__main{ }
.projloop-asym__side{ display:grid; grid-template-rows:1fr 1fr; gap:1.5rem; }
.projloop-asym .projloop{ aspect-ratio:auto; height:100%; }
.projloop-asym__main .projloop{ min-height:360px; }
@media (max-width:880px){ .projloop-asym{ grid-template-columns:1fr; } .projloop-asym__side{ grid-template-rows:none; grid-template-columns:1fr 1fr; } .projloop-asym .projloop{ aspect-ratio:16/10; min-height:0; } }
@media (max-width:560px){ .projloop-asym__side{ grid-template-columns:1fr; } }
.projloop{ position:relative; border:1px solid var(--ink-3); border-radius:var(--radius); overflow:hidden;
  background:#000; aspect-ratio:16/10; }
.sec--light .projloop{ border-color:var(--line-light); }
.projloop video{ width:100%; height:100%; object-fit:cover; display:block; }
.projloop__cap{ position:absolute; left:0; right:0; bottom:0; padding:1.5rem 1.1rem .9rem;
  background:linear-gradient(0deg,rgba(8,10,13,.9),transparent); pointer-events:none; }
.projloop__cap span{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.projloop__cap b{ display:block; font-family:var(--f-display); font-size:1.05rem; color:#fff; margin-top:.15rem; }
@media (max-width:880px){ .projloop-grid{ grid-template-columns:1fr; } }

/* ---------- project cards ---------- */
.proj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.proj{ border:1px solid var(--ink-3); border-radius:var(--radius); overflow:hidden; background:var(--ink-2);
  transition:border-color .3s, transform .3s; }
.sec--light .proj{ border-color:var(--line-light); background:#fff; }
.proj:hover{ border-color:var(--accent); transform:translateY(-3px); }
.proj img{ aspect-ratio:4/3; object-fit:cover; width:100%; }
.proj__body{ padding:1.2rem 1.3rem 1.5rem; }
.proj__tag{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.proj h3{ font-size:1.15rem; margin:.5rem 0 .3rem; }
.proj p{ color:var(--fog); font-size:.92rem; }
.sec--light .proj p{ color:var(--ink-text); }

/* ---------- testimonial video ---------- */
.video-block{ display:grid; grid-template-columns:5fr 7fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
.video-frame{ position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--ink-3); aspect-ratio:16/10; background:#000; }
.video-frame img,.video-frame video{ width:100%; height:100%; object-fit:cover; }
.video-frame__play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(13,16,20,.28); border:0; cursor:pointer; color:#fff; }
.video-frame__play span{ width:74px; height:74px; border-radius:50%; background:var(--accent);
  display:grid; place-items:center; box-shadow:0 12px 40px rgba(255,80,17,.35); transition:transform .25s; }
.video-frame__play:hover span{ transform:scale(1.06); }
.video-frame__play svg{ width:26px; height:26px; margin-left:4px; }

/* ---------- CTA band (contained, ink + orange hairline) ---------- */
.cta-band{ background:#0a0d11; color:#fff; border-block:1px solid var(--ink-3); }
.cta-band .wrap{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  padding-block:clamp(3rem,5vw,4.5rem); position:relative; }
.cta-band .wrap::before{ content:""; position:absolute; left:var(--pad-x); top:0; width:48px; height:3px; background:var(--accent); }
.cta-band h2{ color:#fff; font-size:var(--t-h2); max-width:18ch; }

/* ---------- footer ---------- */
.site-footer{ background:#090b0e; border-top:1px solid var(--ink-3); padding-block:clamp(3rem,5vw,4.5rem) 2rem; }
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:2.5rem; }
.foot-grid img{ height:30px; margin-bottom:1.2rem; }
.foot-col h4{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fog-2); margin-bottom:1.1rem; }
.foot-col a, .foot-col p{ display:block; color:var(--fog); font-size:.92rem; margin-bottom:.55rem; transition:color .2s; }
.foot-col a:hover{ color:var(--accent); }
.foot-bottom{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--ink-3); font-size:.82rem; color:var(--fog-2); }
.foot-bottom a{ color:var(--fog-2); }

/* ---------- generic page hero ---------- */
.phero{ padding-top:clamp(3.5rem,6vw,6rem); padding-bottom:clamp(2.5rem,4vw,4rem); }
.phero h1{ font-size:clamp(2.4rem,1.6rem + 3.6vw,4.6rem); max-width:18ch; margin-top:1.2rem; letter-spacing:-0.03em; }
.phero .lead{ margin-top:1.4rem; }

/* ---------- forms ---------- */
.formcard{ background:var(--ink-2); border:1px solid var(--ink-3); border-radius:var(--radius); padding:clamp(1.6rem,3vw,2.6rem); }
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-size:.8rem; letter-spacing:.04em; color:var(--fog); margin-bottom:.45rem; text-transform:uppercase; font-family:var(--f-mono); }
.field input,.field textarea,.field select{
  width:100%; background:var(--ink); border:1px solid var(--ink-3); color:var(--white);
  padding:.85rem 1rem; border-radius:var(--radius); font-family:var(--f-body); font-size:1rem; transition:border-color .2s; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--accent); }
.field textarea{ min-height:120px; resize:vertical; }
.field--hp{ position:absolute; left:-9999px; }
/* light-section form (kontakt) — 2px hairline, editorial */
.form--light input,.form--light textarea{ background:#faf8f4; color:var(--ink); border:1px solid var(--line-light); border-radius:2px; }
.form--light label{ color:var(--ink-text); }
.form--light input:focus,.form--light textarea:focus{ border-color:var(--accent); }
/* ink contact card on light section */
.contact-card{ background:var(--ink); border:1px solid var(--ink-3); border-radius:var(--radius); padding:clamp(1.6rem,3vw,2.2rem); color:var(--white); }
.contact-card .row-item{ display:block; padding:1.1rem 0; border-bottom:1px solid var(--ink-3); }
.contact-card .row-item:first-child{ padding-top:0; }
.contact-card .row-item:last-child{ border-bottom:0; padding-bottom:0; }
.contact-card .k{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fog-2); display:block; margin-bottom:.4rem; }
.contact-card .v{ font-family:var(--f-mono); font-size:1rem; color:var(--white); }
.contact-card a.v:hover{ color:var(--accent); }
.contact-card .v--addr{ font-family:var(--f-body); color:var(--fog); line-height:1.5; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.form-note{ font-size:.8rem; color:var(--fog-2); margin-top:.4rem; }
.form-status{ margin-top:1rem; font-size:.95rem; min-height:1.2em; }
.form-status.err{ color:#ff7a5c; }
.form-status.ok{ color:#6ee7a8; }

/* ---------- booking widget ---------- */
.booker{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.booker__panel{ background:var(--ink-2); border:1px solid var(--ink-3); border-radius:var(--radius); padding:1.5rem; }
.booker__panel h3{ font-size:1.1rem; margin-bottom:1.1rem; }
.daypills,.slotpills{ display:flex; flex-wrap:wrap; gap:.6rem; }
.pill{ background:var(--ink); border:1px solid var(--ink-3); color:var(--white); padding:.6rem .85rem;
  border-radius:var(--radius); cursor:pointer; font-size:.85rem; font-family:var(--f-mono); transition:all .2s; }
.pill:hover{ border-color:var(--accent); }
.pill.sel{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pill .wd{ display:block; font-size:.62rem; letter-spacing:.1em; color:var(--fog); margin-bottom:.15rem; }
.pill.sel .wd{ color:rgba(255,255,255,.8); }
.booking-success{ text-align:center; padding:2rem 1rem; }
.booking-success .check{ width:64px; height:64px; border-radius:50%; background:var(--accent); display:grid; place-items:center; margin:0 auto 1.2rem; }
.booking-success .check svg{ width:30px; height:30px; color:#fff; }

/* ---------- vr viewer ---------- */
.vr-frame{ width:100%; aspect-ratio:16/9; border:1px solid var(--ink-3); border-radius:var(--radius); overflow:hidden; background:#000; }
.vr-frame iframe, .vr-frame > div{ width:100%; height:100%; border:0; }

/* ---------- legal pages ---------- */
.legal{ max-width:760px; }
.legal h2{ font-size:1.5rem; margin:2.4rem 0 .8rem; }
.legal h3{ font-size:1.15rem; margin:1.6rem 0 .5rem; }
.legal p, .legal li{ color:var(--fog); margin-bottom:.7rem; }
.legal a{ color:var(--accent); }
.legal strong{ color:var(--white); }

/* ============================================================
   REVIEWS — Google-Rezensionen (echte Einzelstimmen)
   ============================================================ */
.reviews-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  margin-bottom:clamp(2rem,4vw,3rem); }
.reviews-head .sec-head{ margin-bottom:0; }
.gmark{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--f-mono); font-size:.78rem;
  letter-spacing:.04em; color:var(--fog); border:1px solid var(--ink-3); border-radius:2px; padding:.55rem .85rem; transition:border-color .2s,color .2s; }
.gmark:hover{ border-color:var(--accent); color:var(--white); }
.gmark svg{ width:18px; height:18px; }
.review-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--ink-3);
  border:1px solid var(--ink-3); border-radius:var(--radius); overflow:hidden; }
.review{ background:var(--ink-2); padding:clamp(1.5rem,2.4vw,2rem); display:flex; flex-direction:column; gap:1rem; }
.review__stars{ display:flex; gap:2px; color:#e0a83a; }
.review__stars svg{ width:15px; height:15px; }
.review__text{ color:var(--white); font-size:1rem; line-height:1.6; flex:1; }
.review__who{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding-top:.4rem; border-top:1px solid var(--ink-3); }
.review__name{ font-family:var(--f-display); font-weight:600; font-size:.95rem; color:var(--white); }
.review__g{ width:18px; height:18px; opacity:.85; flex:0 0 auto; }
.sec--light .review-grid,.sec--light .review{ background:#fff; }
.sec--light .review-grid{ background:var(--line-light); border-color:var(--line-light); }
.sec--light .review__text{ color:var(--ink); }
.sec--light .review__name{ color:var(--ink); }
.sec--light .review__who{ border-top-color:var(--line-light); }
.sec--light .gmark{ border-color:var(--line-light); color:var(--ink-text); }

/* ---------- video gallery (muted project loops + click-to-play testimonials) ---------- */
.vid-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.vid-card{ position:relative; border:1px solid var(--ink-3); border-radius:var(--radius); overflow:hidden;
  background:#000; aspect-ratio:9/13; }
.sec--light .vid-card{ border-color:var(--line-light); }
.vid-card video{ width:100%; height:100%; object-fit:cover; display:block; }
.vid-card__label{ position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1.1rem .9rem;
  background:linear-gradient(0deg,rgba(8,10,13,.92),transparent); pointer-events:none; }
.vid-card__label b{ display:block; font-family:var(--f-display); font-size:1rem; color:#fff; }
.vid-card__label span{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.vid-card__play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(13,16,20,.32); border:0; cursor:pointer; color:#fff; transition:background .2s; }
.vid-card__play:hover{ background:rgba(13,16,20,.18); }
.vid-card__play span{ width:58px; height:58px; border-radius:50%; background:var(--accent); display:grid; place-items:center;
  box-shadow:0 10px 34px rgba(255,80,17,.4); transition:transform .25s; }
.vid-card__play:hover span{ transform:scale(1.07); }
.vid-card__play svg{ width:22px; height:22px; margin-left:3px; }

/* ============================================================
   INTERACTIVE APARTMENT FINDER (USP demo)
   ============================================================ */
.finder{ display:grid; grid-template-columns:7fr 5fr; gap:clamp(1.2rem,2.5vw,2rem); align-items:stretch; }
.finder__stage{ position:relative; border:1px solid var(--ink-3); border-radius:var(--radius); overflow:hidden;
  background:#0a0d11; min-height:420px; }
.sec--light .finder__stage{ border-color:var(--line-light); }
.finder__img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/3; }
.finder__svg{ position:absolute; inset:0; width:100%; height:100%; }
.finder__floor{ fill:rgba(255,80,17,.0); stroke:rgba(255,255,255,.0); stroke-width:2; cursor:pointer;
  transition:fill .2s ease, stroke .2s ease; }
.finder__floor:hover{ fill:rgba(255,80,17,.28); stroke:#fff; }
.finder__floor.act{ fill:rgba(255,80,17,.42); stroke:#fff; stroke-width:2.5; }
.finder__floor:focus{ outline:none; fill:rgba(255,80,17,.3); stroke:#fff; }
.finder__tag{ position:absolute; transform:translate(-50%,-50%); pointer-events:none;
  background:var(--ink); border:1px solid var(--accent); color:#fff; border-radius:2px;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; padding:.32rem .55rem; white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.5); }
.finder__hint{ position:absolute; left:1rem; bottom:1rem; font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--fog); background:rgba(10,13,17,.78);
  padding:.5rem .8rem; border:1px solid var(--ink-3); border-radius:2px; pointer-events:none; }
.finder__panel{ border:1px solid var(--ink-3); border-radius:var(--radius); background:var(--ink-2);
  padding:clamp(1.4rem,2.5vw,2rem); display:flex; flex-direction:column; }
.sec--light .finder__panel{ border-color:var(--line-light); background:#fff; }
.finder__list{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.4rem; }
.unit-btn{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.9rem; width:100%;
  background:var(--ink); border:1px solid var(--ink-3); color:var(--white); padding:.85rem 1rem;
  border-radius:2px; cursor:pointer; text-align:left; font-family:var(--f-body); transition:border-color .2s, background .2s; }
.sec--light .unit-btn{ background:#faf8f4; border-color:var(--line-light); color:var(--ink); }
.unit-btn:hover{ border-color:var(--accent); }
.unit-btn.act{ border-color:var(--accent); background:rgba(255,80,17,.1); }
.unit-btn__et{ font-family:var(--f-mono); font-size:.72rem; color:var(--accent); }
.unit-btn__meta{ display:flex; flex-direction:column; }
.unit-btn__meta b{ font-family:var(--f-display); font-size:1rem; font-weight:600; }
.unit-btn__meta span{ font-size:.82rem; color:var(--fog); }
.sec--light .unit-btn__meta span{ color:var(--ink-text); }
.unit-status{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.28rem .5rem; border-radius:2px; }
.unit-status--free{ color:#6ee7a8; border:1px solid rgba(110,231,168,.35); }
.unit-status--res{ color:#f5a623; border:1px solid rgba(245,166,35,.35); }
.unit-status--sold{ color:var(--fog-2); border:1px solid var(--ink-3); }
.finder__plan{ margin-top:auto; border-top:1px solid var(--ink-3); padding-top:1.3rem; }
.sec--light .finder__plan{ border-top-color:var(--line-light); }
.finder__plan-img{ width:100%; aspect-ratio:4/3; object-fit:contain; background:#fff; border:1px solid var(--ink-3);
  border-radius:2px; margin-bottom:1rem; }
.sec--light .finder__plan-img{ border-color:var(--line-light); }
.finder__plan h4{ font-family:var(--f-display); font-size:1.15rem; margin-bottom:.3rem; }
.finder__plan .det{ display:flex; gap:1.4rem; flex-wrap:wrap; font-family:var(--f-mono); font-size:.78rem; color:var(--fog); margin-bottom:1rem; }
.sec--light .finder__plan .det{ color:var(--ink-text); }
.finder__plan .det b{ color:var(--accent); font-weight:500; }
.finder__empty{ color:var(--fog); font-size:.95rem; }

/* ---------- redesigned booking widget ---------- */
.book{ border:1px solid var(--ink-3); border-radius:var(--radius); background:var(--ink-2); overflow:hidden; }
.book__steps{ display:flex; border-bottom:1px solid var(--ink-3); }
.book__step{ flex:1; display:flex; align-items:center; gap:.6rem; padding:1rem 1.2rem;
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--fog-2);
  border-right:1px solid var(--ink-3); }
.book__step:last-child{ border-right:0; }
.book__step .n{ width:24px; height:24px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--ink-3); font-size:.74rem; }
.book__step.is-active{ color:var(--white); }
.book__step.is-active .n{ background:var(--accent); border-color:var(--accent); color:#fff; }
.book__step.is-done .n{ background:rgba(255,80,17,.15); border-color:var(--accent); color:var(--accent); }
.book__body{ padding:clamp(1.4rem,2.6vw,2.2rem); }
.book__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3vw,2.4rem); }
.book__col h4{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fog); margin-bottom:1rem; }
.daypills{ display:flex; flex-wrap:wrap; gap:.55rem; }
.slotpills{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:.55rem; }
.pill{ background:var(--ink); border:1px solid var(--ink-3); color:var(--white); padding:.7rem .6rem; min-height:48px;
  border-radius:2px; cursor:pointer; font-size:.85rem; font-family:var(--f-mono); transition:all .18s; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.pill:hover{ border-color:var(--accent); }
.pill.sel{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pill .wd{ display:block; font-size:.62rem; letter-spacing:.1em; color:var(--fog); margin-bottom:.15rem; }
.pill.sel .wd{ color:rgba(255,255,255,.85); }
.book__summary{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin:0 0 1.4rem;
  font-family:var(--f-mono); font-size:.82rem; color:var(--accent);
  border:1px dashed rgba(255,80,17,.4); border-radius:2px; padding:.8rem 1rem; }
.book__summary svg{ width:16px; height:16px; }
.book__reassure{ display:flex; flex-wrap:wrap; gap:.5rem .65rem; margin-top:1.4rem; }
.book__reassure span{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.05em; color:var(--fog);
  border:1px solid var(--ink-3); border-radius:2px; padding:.4rem .65rem; display:inline-flex; align-items:center; gap:.45rem; }
.book__reassure span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); }
.book__next{ margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--ink-3); }
.book__next h4{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fog); margin-bottom:.8rem; }
.book__next ol{ margin:0; padding-left:1.1rem; color:var(--fog); font-size:.92rem; }
.book__next li{ margin-bottom:.4rem; }
.book__empty{ color:var(--fog); font-family:var(--f-mono); font-size:.85rem; }
.booking-success{ text-align:center; padding:2.5rem 1rem; }
.booking-success .check{ width:64px; height:64px; border-radius:50%; background:var(--accent); display:grid; place-items:center; margin:0 auto 1.2rem; }
.booking-success .check svg{ width:30px; height:30px; color:#fff; }

/* ---------- reveal on scroll util ---------- */
.r-up{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.r-up.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .r-up{ opacity:1; transform:none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .review-grid{ grid-template-columns:repeat(2,1fr); }
  .vid-gallery{ grid-template-columns:repeat(3,1fr); }
  .logogrid{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width: 880px){
  .nav__links{ display:none; }
  .nav__burger{ display:inline-flex; }
  .nav__cta .btn{ display:none; }
  .nav.open .nav__links{
    display:flex; position:absolute; top:74px; left:0; right:0; flex-direction:column;
    background:var(--ink-2); border-bottom:1px solid var(--ink-3); padding:1.2rem var(--pad-x); gap:1.1rem; }
  .split,.split--rev,.video-block,.finder{ grid-template-columns:1fr; }
  .split--rev .split__media{ order:-1; }
  .featgrid{ grid-template-columns:1fr; }
  .feat{ border-right:0; }
  .proj-grid{ grid-template-columns:1fr 1fr; }
  .row{ grid-template-columns:auto 1fr; }
  .row__body{ grid-column:1 / -1; }
  .book__cols{ grid-template-columns:1fr; }
  .book__steps{ overflow-x:auto; }
  .finder__stage{ min-height:300px; }
}
@media (max-width: 640px){
  .review-grid{ grid-template-columns:1fr; }
  .vid-gallery{ grid-template-columns:1fr; }
  .vid-card{ aspect-ratio:16/11; }
  .logogrid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 560px){
  .proj-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .cta-band .wrap{ flex-direction:column; align-items:flex-start; }
  .hero__meta{ gap:1.1rem; }
  .foot-grid{ grid-template-columns:1fr; }
  .book__step{ font-size:.66rem; padding:.85rem .7rem; }
  .book__step .lbl{ display:none; }
  .slotpills{ grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); }
}