/* =========================================================================
   מתחם ברגר 2-4-6, ירושלים — קבוצת תדהר–מבנים
   Cinematic interactive presentation · architectural-luxury aesthetic
   ========================================================================= */

:root{
  --ink:#08160f;
  --forest:#143d2e;
  --forest-2:#1c5340;
  --emerald:#2f8a63;
  --emerald-bright:#4cbb8c;
  --gold:#c6a564;
  --gold-bright:#e6c98a;
  --bone:#f5f2ea;
  --bone-2:#ece8dd;
  --mist:#e7ece6;
  --coral:#e0867b;
  --sky:#90bfe2;
  --paper:#16241d;          /* dark text on light scenes */
  --paper-dim:#5a6b62;
  --line:rgba(20,61,46,.14);

  --serif:'Frank Ruhl Libre', Georgia, serif;
  --sans:'Assistant', system-ui, sans-serif;

  --ease:cubic-bezier(.16,.84,.3,1);
  --pad: clamp(22px, 5vw, 110px);
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  scroll-snap-type:y mandatory;}
body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--bone);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
b{font-weight:800}

/* ---------- text helpers ---------- */
.text-emerald{color:var(--emerald)}
.dim{opacity:.62; font-weight:400; font-size:.82em}

.eyebrow{
  font-family:var(--sans);
  font-weight:700;
  letter-spacing:.22em;
  font-size:clamp(.62rem,1.1vw,.82rem);
  text-transform:none;
  color:var(--gold-bright);
  display:inline-block;
  margin-bottom:1.1rem;
}
.eyebrow--dark{color:var(--emerald)}
.eyebrow::before{content:""; display:inline-block; width:30px; height:1px; background:currentColor; vertical-align:middle; margin-inline-start:0; margin-inline-end:12px; opacity:.7}

.scene__title{
  font-family:var(--serif);
  font-weight:700;
  line-height:1.06;
  font-size:clamp(1.9rem, 4.6vw, 3.7rem);
  letter-spacing:-.01em;
}
.is-light .scene__title{color:var(--forest)}
.scene__title.big{font-size:clamp(2.4rem,6vw,5rem)}
.scene__note{
  margin-top:1.1rem; max-width:46ch;
  font-size:clamp(.95rem,1.5vw,1.18rem);
  opacity:.82; font-weight:400;
}
.is-light .scene__note{color:var(--paper-dim); opacity:1}
.scene__head{margin-bottom:clamp(1.6rem,4vh,3rem)}

/* =========================================================================
   SCENE SCAFFOLD
   ========================================================================= */
.scene{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  isolation:isolate;
}
.scene__inner{
  position:relative; z-index:3;
  width:100%; max-width:1280px;
  margin-inline:auto;
  padding:clamp(70px,9vh,110px) var(--pad);
}
.is-light{background:var(--bone); color:var(--paper)}
.is-light.alt{background:var(--bone-2)}
.is-dark{background:var(--ink); color:var(--bone)}

.scene__bg-solid{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(47,138,99,.16), transparent 55%),
    radial-gradient(110% 100% at 0% 100%, rgba(20,61,46,.55), transparent 60%),
    linear-gradient(160deg,#0c2117,#06120c);
}

/* background image + Ken Burns */
.kenburns{
  position:absolute; inset:-5%; z-index:0;
  background-size:cover; background-position:center;
  transform:scale(1.06);
  will-change:transform;
}
.scene.is-active .kenburns{animation:kb 20s linear forwards}
.scene.is-active .kenburns--soft{animation:kb 26s linear forwards}
.scene.is-active .kenburns--zoom{animation:kbzoom 22s ease-out forwards}
@keyframes kb{from{transform:scale(1.06)} to{transform:scale(1.18)}}
@keyframes kbzoom{from{transform:scale(1.02)} to{transform:scale(1.32)}}

/* scrims */
.scene__scrim{position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(6,16,11,.86) 0%, rgba(6,16,11,.45) 45%, rgba(6,16,11,.55) 100%);}
.scene__scrim--hero{background:
  radial-gradient(120% 95% at 70% 35%, rgba(6,16,11,.18), transparent 55%),
  linear-gradient(0deg, rgba(6,16,11,.92), rgba(6,16,11,.3) 55%, rgba(6,16,11,.6));}
.scene__scrim--right{background:linear-gradient(-90deg, rgba(6,16,11,.95) 12%, rgba(6,16,11,.7) 45%, rgba(6,16,11,.2) 100%);}
.scene__scrim--bottom{background:linear-gradient(0deg, rgba(6,16,11,.95) 4%, rgba(6,16,11,.2) 42%, rgba(6,16,11,.55) 100%);}
.scene__scrim--soft{background:linear-gradient(0deg, rgba(6,16,11,.8), rgba(6,16,11,.2) 50%, rgba(6,16,11,.5));}

/* decorative brand shapes */
.shape{position:absolute; z-index:2; pointer-events:none;
  width:clamp(120px,15vw,260px); aspect-ratio:1/1.12;
  clip-path:polygon(8% 0,100% 6%,92% 100%,0 94%);
  opacity:.5; filter:blur(.3px); mix-blend-mode:screen;}
.is-light .shape{mix-blend-mode:multiply; opacity:.3}
.shape--sky{background:var(--sky); top:9%; inset-inline-start:6%}
.shape--gold{background:var(--gold); bottom:12%; inset-inline-end:9%; width:clamp(90px,11vw,190px)}
.shape--coral{background:var(--coral); top:16%; inset-inline-end:16%; width:clamp(70px,8vw,140px)}
.shape--emerald{background:var(--emerald)}
.shape--bg{top:-6%; inset-inline-end:-5%; width:46vw; opacity:.22}
.shape--bg2{bottom:-10%; inset-inline-start:-6%; width:38vw; opacity:.16}

/* reveal animation */
.reveal{opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.scene.is-active .reveal{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.10s}
.reveal[data-d="2"]{transition-delay:.22s}
.reveal[data-d="3"]{transition-delay:.34s}
.reveal[data-d="4"]{transition-delay:.46s}
.reveal[data-d="5"]{transition-delay:.58s}
.reveal[data-d="6"]{transition-delay:.70s}
.reveal[data-d="7"]{transition-delay:.82s}
.reveal[data-d="8"]{transition-delay:.94s}

/* =========================================================================
   FIXED UI
   ========================================================================= */
.loader{position:fixed; inset:0; z-index:200; background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  transition:opacity .8s ease, visibility .8s}
.loader.done{opacity:0; visibility:hidden}
.loader__mark{position:relative; width:90px; height:96px}
.loader__shape{position:absolute; width:46px; height:52px; clip-path:polygon(8% 0,100% 6%,92% 100%,0 94%);
  animation:loadpulse 1.4s var(--ease) infinite alternate}
.loader__shape.s1{background:var(--sky); left:0; top:14px; animation-delay:0s}
.loader__shape.s2{background:var(--emerald); left:24px; top:0; animation-delay:.18s}
.loader__shape.s3{background:var(--gold); left:48px; top:20px; animation-delay:.36s}
@keyframes loadpulse{from{transform:translateY(6px); opacity:.55} to{transform:translateY(-6px); opacity:1}}
.loader__word{font-family:var(--serif); font-weight:900; font-size:2.2rem; color:var(--bone); letter-spacing:.04em}

.topbar{position:fixed; top:0; inset-inline:0; z-index:90;
  display:flex; align-items:center; gap:18px;
  padding:16px clamp(18px,4vw,46px);
  pointer-events:none}
.topbar__logo{height:30px; width:auto}
.topbar__logo--light{display:none}
body.theme-dark .topbar__logo--dark{display:none}
body.theme-dark .topbar__logo--light{display:block}
.topbar__progress{flex:1; height:2px; background:rgba(120,130,120,.28); border-radius:2px; overflow:hidden; max-width:none}
.topbar__bar{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--emerald-bright)); transition:width .25s linear}

/* side rail dots */
.rail{position:fixed; inset-inline-end:clamp(10px,1.6vw,26px); top:50%; transform:translateY(-50%);
  z-index:90; display:flex; flex-direction:column; gap:11px}
.rail__dot{width:9px; height:9px; border-radius:50%; border:1.5px solid currentColor; opacity:.4;
  background:transparent; cursor:pointer; transition:.3s; color:var(--forest)}
body.theme-dark .rail__dot{color:var(--bone)}
.rail__dot:hover{opacity:.8; transform:scale(1.2)}
.rail__dot.is-on{opacity:1; background:var(--gold); border-color:var(--gold); transform:scale(1.25)}

.counter{position:fixed; inset-inline-start:clamp(16px,3vw,40px); bottom:clamp(16px,3vh,34px); z-index:90;
  font-weight:700; font-size:.9rem; letter-spacing:.08em; color:var(--forest); opacity:.85; font-variant-numeric:tabular-nums}
body.theme-dark .counter{color:var(--bone)}
.counter__sep{margin:0 6px; opacity:.5}
#counterTotal{opacity:.5}

.navbtn{position:fixed; top:50%; transform:translateY(-50%); z-index:90;
  width:54px; height:54px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:rgba(8,22,15,.32); color:#fff; font-size:2rem; line-height:1; cursor:pointer;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:grid; place-items:center; transition:.25s; opacity:.55}
.navbtn:hover{opacity:1; background:var(--forest)}
body.theme-light .navbtn{border-color:var(--line); background:rgba(255,255,255,.5); color:var(--forest)}
.navbtn--prev{inset-inline-start:clamp(10px,1.5vw,22px)}     /* prev = visually start side */
.navbtn--next{inset-inline-start:auto; inset-inline-end:clamp(54px,5vw,80px)}
.navbtn--prev{transform:translateY(-50%) scaleX(-1)}         /* arrow points correctly for RTL flow */
.navbtn--next{transform:translateY(-50%) scaleX(-1)}
@media (pointer:coarse){.navbtn{display:none}}

.scrollhint{position:fixed; inset-inline:0; bottom:22px; z-index:80; text-align:center;
  font-size:.78rem; letter-spacing:.18em; color:#fff; opacity:.8;
  display:flex; flex-direction:column; align-items:center; gap:4px; transition:opacity .5s; pointer-events:none}
.scrollhint.hide{opacity:0}
.scrollhint__arrow{font-size:1.4rem; animation:bob 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)}}

/* =========================================================================
   01 · HERO
   ========================================================================= */
.hero__inner{text-align:center; display:flex; flex-direction:column; align-items:center}
.hero__title{font-family:var(--serif); font-weight:900; line-height:1;
  font-size:clamp(2.8rem,8.4vw,7rem); letter-spacing:-.01em; text-shadow:0 4px 40px rgba(0,0,0,.35)}
.hero__nums{display:inline-block; color:var(--gold-bright); font-weight:700; direction:ltr; unicode-bidi:isolate}
.hero__sub{margin-top:1.4rem; font-size:clamp(1rem,2vw,1.5rem); font-weight:300; letter-spacing:.12em; opacity:.92}
.hero__logos{margin-top:clamp(2.4rem,6vh,4rem)}
.hero__logos img{height:clamp(34px,4.5vw,52px); width:auto; opacity:.95}

/* =========================================================================
   02 · NUMBERS
   ========================================================================= */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.6vw,22px)}
.stats--row{grid-template-columns:repeat(4,1fr); max-width:1000px}
.stat{position:relative; padding:clamp(18px,2.4vw,32px) clamp(14px,2vw,26px);
  background:rgba(255,255,255,.6); border:1px solid var(--line); border-radius:14px;
  display:flex; flex-direction:column; gap:.5rem; min-height:120px; justify-content:center;
  box-shadow:0 18px 40px -30px rgba(20,61,46,.5)}
.is-dark .stat{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); box-shadow:none}
.stat__num{font-family:var(--sans); font-weight:800; font-size:clamp(1.9rem,3.8vw,3.2rem);
  line-height:1; color:var(--forest); font-variant-numeric:tabular-nums}
.is-dark .stat__num{color:var(--bone)}
.stat__hash{color:var(--gold)}
.stat__label{font-size:clamp(.72rem,1.1vw,.92rem); font-weight:600; opacity:.72; line-height:1.25}
.stat--accent{background:linear-gradient(150deg,var(--forest),var(--forest-2)); border:none; color:#fff}
.stat--accent .stat__num{color:var(--gold-bright)}
.stat--accent .stat__label{opacity:.92; color:#fff}

/* =========================================================================
   SPLIT layout (statement / lists / value)
   ========================================================================= */
.split{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,70px); align-items:center}
.split--reverse{grid-template-columns:.85fr 1.15fr}
.split__media{align-self:stretch; min-height:50vh; border-radius:18px; background-size:cover; background-position:center;
  box-shadow:0 40px 80px -50px rgba(0,0,0,.6)}

/* statement */
.statement__title{font-family:var(--serif); font-weight:700; line-height:1.07;
  font-size:clamp(2.1rem,5.2vw,4.4rem); text-shadow:0 4px 30px rgba(0,0,0,.4)}
.ticks{list-style:none; display:flex; flex-direction:column; gap:clamp(12px,2vh,20px)}
.ticks li{position:relative; padding-inline-start:30px; font-size:clamp(.98rem,1.5vw,1.22rem); line-height:1.4}
.ticks li::before{content:""; position:absolute; inset-inline-start:0; top:.45em;
  width:11px; height:11px; background:var(--gold); clip-path:polygon(8% 0,100% 6%,92% 100%,0 94%)}
.is-light .ticks li b{color:var(--forest)}

/* =========================================================================
   04 · FINANCIAL CHART
   ========================================================================= */
.chart{display:flex; align-items:flex-end; gap:clamp(6px,1.4vw,20px); height:min(48vh,440px); margin-top:1rem}
.bar{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:8px}
.bar__col{width:100%; max-width:74px; margin-inline:auto; height:0; border-radius:8px 8px 0 0;
  background:linear-gradient(180deg,#cdd8d0,#aebcb3); transition:height 1.1s var(--ease); align-self:center}
.bar__val{font-weight:800; font-size:clamp(.7rem,1.2vw,1rem); color:var(--paper-dim); opacity:0; transition:opacity .6s ease .5s; font-variant-numeric:tabular-nums}
.bar__name{font-size:clamp(.66rem,1vw,.86rem); font-weight:600; text-align:center; opacity:.78; line-height:1.15; min-height:2.4em}
.scene.is-active .bar__col{height:calc(var(--v) / 85 * 100%)}
.scene.is-active .bar__val{opacity:1}
.bar--hl .bar__col{background:linear-gradient(180deg,var(--gold-bright),var(--gold)); box-shadow:0 14px 30px -12px rgba(198,165,100,.7)}
.bar--hl .bar__val{color:var(--forest); font-size:clamp(.85rem,1.5vw,1.25rem)}
.bar--hl .bar__name{opacity:1; color:var(--forest); font-weight:800}
.bar:nth-child(1) .bar__col{transition-delay:.1s}
.bar:nth-child(n+2) .bar__col{transition-delay:.25s}

/* =========================================================================
   05 · NPS
   ========================================================================= */
.nps{text-align:center; display:flex; flex-direction:column; align-items:center}
.nps__hero{margin:1rem 0 .4rem}
.nps__num{font-family:var(--serif); font-weight:900; line-height:.9;
  font-size:clamp(6rem,22vw,18rem);
  background:linear-gradient(160deg,var(--gold-bright),var(--emerald-bright));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  display:inline-block}
.nps__cap{font-size:clamp(.95rem,1.6vw,1.25rem); font-weight:600; opacity:.85; margin-top:-.4em}
.nps__lede{font-size:clamp(1.05rem,2vw,1.6rem); font-weight:300; margin:1.4rem 0 2.4rem; max-width:30ch}
.nps__lede b{color:var(--gold-bright); font-weight:800}
.nps__compare{width:min(560px,90%); display:flex; flex-direction:column; gap:14px}
.cbar{position:relative; height:46px; border-radius:10px; background:rgba(255,255,255,.07); overflow:hidden; display:flex; align-items:center}
.cbar__fill{position:absolute; inset-inline-start:0; top:0; height:100%; width:0; border-radius:10px;
  background:rgba(255,255,255,.14); transition:width 1.3s var(--ease) .3s}
.cbar--hl .cbar__fill{background:linear-gradient(90deg,var(--emerald),var(--gold))}
.scene.is-active .cbar__fill{width:var(--w)}
.cbar__lab{position:relative; z-index:2; padding-inline:18px; font-weight:600; font-size:1rem}
.cbar__lab b{font-weight:800; margin-inline-start:6px}

/* =========================================================================
   06 · VALUE pricecards
   ========================================================================= */
.pricecards{display:flex; flex-direction:column; gap:14px}
.pcard{background:rgba(255,255,255,.65); border:1px solid var(--line); border-radius:14px;
  padding:clamp(14px,2vw,22px) clamp(18px,2.4vw,28px); display:flex; flex-direction:column; gap:2px}
.pcard__name{font-weight:700; opacity:.7; font-size:.9rem}
.pcard__big{font-family:var(--sans); font-weight:800; font-size:clamp(1.6rem,3.4vw,2.6rem); color:var(--paper); font-variant-numeric:tabular-nums}
.pcard__unit{font-size:.78rem; opacity:.55; font-weight:600}
.pcard--hl{background:linear-gradient(150deg,var(--forest),var(--forest-2)); border:none; color:#fff; transform:scale(1.04)}
.pcard--hl .pcard__name{opacity:.9}
.pcard--hl .pcard__big{color:var(--gold-bright)}
.pcard--hl .pcard__unit{opacity:.8}

/* =========================================================================
   07 / 12 · GALLERY
   ========================================================================= */
.scene--gallery{align-items:flex-end}
.gallery__stage{position:absolute; inset:0; z-index:0}
.gslide{position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.08); transition:opacity 1.3s var(--ease), transform 7s linear}
.gslide.is-on{opacity:1; transform:scale(1)}
.gallery__inner{padding-bottom:clamp(70px,10vh,120px)}
.gallery__cap{margin-top:.6rem; font-size:clamp(.95rem,1.6vw,1.2rem); opacity:.85; font-weight:300}
.gallery__dots{display:flex; gap:9px; margin-top:1.6rem}
.gdot{width:30px; height:3px; border-radius:3px; background:rgba(255,255,255,.3); cursor:pointer; transition:.3s}
.gdot.is-on{background:var(--gold); width:46px}

/* =========================================================================
   08 · URBAN RENEWAL CARDS
   ========================================================================= */
.rcards{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,22px)}
.rcard{border-radius:16px; overflow:hidden; background:#fff; border:1px solid var(--line);
  box-shadow:0 24px 50px -36px rgba(20,61,46,.55); transition:transform .5s var(--ease), box-shadow .5s}
.rcard:hover{transform:translateY(-8px); box-shadow:0 34px 60px -34px rgba(20,61,46,.6)}
.rcard__img{height:clamp(150px,22vh,230px); background-size:cover; background-position:center}
.rcard__body{padding:18px 20px 22px}
.rcard__body h3{font-family:var(--serif); font-weight:700; color:var(--forest); font-size:1.25rem; line-height:1.1}
.rcard__body p{font-size:.86rem; opacity:.6; font-weight:600; margin-top:2px}
.rcard__stat{display:inline-block; margin-top:12px; font-weight:800; color:var(--emerald); font-size:1.05rem}

/* =========================================================================
   10 · PROJECT REVEAL
   ========================================================================= */
.reveal-inner{text-align:center; display:flex; flex-direction:column; align-items:center}
.reveal-title{font-family:var(--serif); font-weight:900; line-height:1;
  font-size:clamp(2.6rem,7.6vw,6.2rem); text-shadow:0 6px 40px rgba(0,0,0,.45)}
.reveal-sub{margin-top:1.4rem; font-size:clamp(1rem,1.9vw,1.45rem); font-weight:300; letter-spacing:.06em;
  color:var(--gold-bright)}

/* =========================================================================
   11 · MAP / LOCATION
   ========================================================================= */
.scene--map{align-items:flex-end}
.map__img{position:absolute; inset:-5%; z-index:0; background-size:cover; background-position:center}
.map__inner{padding-bottom:clamp(60px,9vh,110px)}
.map__list{list-style:none; display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:1.2rem; max-width:760px}
.map__list li{position:relative; padding-inline-start:22px; font-size:clamp(.92rem,1.4vw,1.12rem); opacity:.92}
.map__list li::before{content:""; position:absolute; inset-inline-start:0; top:.5em; width:9px; height:9px; border-radius:50%; background:var(--gold)}
.map__list b{color:var(--gold-bright)}
.map__pin{position:absolute; z-index:3; top:42%; inset-inline-start:50%; transform:translate(50%,-50%);
  display:flex; flex-direction:column; align-items:center}
.map__dot{width:18px; height:18px; border-radius:50%; background:var(--gold); border:3px solid #fff; box-shadow:0 4px 16px rgba(0,0,0,.5)}
.map__ping{position:absolute; top:0; width:18px; height:18px; border-radius:50%; background:var(--gold); opacity:.6}
.scene.is-active .map__ping{animation:ping 2s ease-out infinite}
@keyframes ping{0%{transform:scale(1); opacity:.6} 100%{transform:scale(4.5); opacity:0}}
.map__pinlabel{margin-top:8px; background:var(--forest); color:#fff; font-weight:700; font-size:.8rem; padding:4px 12px; border-radius:20px; white-space:nowrap; box-shadow:0 6px 16px rgba(0,0,0,.4)}

/* =========================================================================
   13 · OFFER  /  16 · SPEC
   ========================================================================= */
.scene--offer, .scene--spec{align-items:center}
.offer__inner{max-width:1180px}
.offer__title{font-family:var(--serif); font-weight:900; font-size:clamp(2.4rem,6vw,4.6rem); line-height:1;
  text-shadow:0 4px 30px rgba(0,0,0,.4)}
.offer__grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,2vw,26px); margin-top:clamp(1.5rem,4vh,2.6rem); max-width:880px}
.offercard{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:16px;
  padding:clamp(18px,2.4vw,30px); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; flex-direction:column; gap:.6rem}
.offercard__big{font-family:var(--serif); font-weight:900; font-size:clamp(2rem,4.4vw,3.4rem); color:var(--gold-bright); line-height:1}
.offercard__ico{font-size:clamp(2rem,4vw,3rem); color:var(--gold-bright); line-height:1}
.offercard p{font-size:clamp(.92rem,1.4vw,1.12rem); line-height:1.4; opacity:.94}

.specs{list-style:none; display:flex; flex-direction:column; gap:clamp(12px,2vh,20px); margin-top:1.4rem; max-width:620px}
.specs li{display:flex; align-items:center; gap:18px; font-size:clamp(1rem,1.7vw,1.35rem); font-weight:600}
.specs__ico{flex:none; width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:var(--gold-bright); font-size:1.5rem}
.specs b{color:var(--gold-bright)}

/* =========================================================================
   17 · TIMELINE
   ========================================================================= */
.timeline{position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:14px;
  margin-top:clamp(2rem,6vh,4rem); padding-top:42px}
.tl__track{position:absolute; top:48px; inset-inline:4%; height:3px; background:var(--line); border-radius:3px}
.tl__line{position:absolute; top:48px; inset-inline-end:4%; height:3px; width:0; border-radius:3px;
  background:linear-gradient(90deg,var(--emerald),var(--gold)); transition:width 1.8s var(--ease) .3s}
.scene.is-active .tl__line{width:92%}
.tstep{position:relative; text-align:center; padding-top:18px}
.tstep__dot{position:absolute; top:-8px; inset-inline-start:50%; transform:translateX(50%);
  width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--emerald); z-index:2}
.tstep:last-child .tstep__dot{border-color:var(--gold); background:var(--gold)}
.tstep__date{display:block; font-weight:800; color:var(--emerald); font-size:clamp(.8rem,1.2vw,1rem); margin-bottom:6px}
.tstep:last-child .tstep__date{color:var(--gold)}
.tstep p{font-size:clamp(.78rem,1.1vw,.98rem); line-height:1.3; opacity:.82}

/* =========================================================================
   18 · WHY
   ========================================================================= */
.why__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.8vw,22px)}
.why__chip{padding:clamp(20px,2.6vw,34px); border-radius:16px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13);
  display:flex; flex-direction:column; gap:6px; transition:transform .4s var(--ease)}
.why__chip:hover{transform:translateY(-6px)}
.why__chip span{font-family:var(--serif); font-weight:700; font-size:clamp(1.2rem,2.2vw,1.7rem); color:var(--gold-bright)}
.why__chip small{font-size:.92rem; opacity:.72; font-weight:600}

/* =========================================================================
   19 · CLOSING
   ========================================================================= */
.scene--closing{text-align:center}
.closing__inner{display:flex; flex-direction:column; align-items:center}
.closing__title{font-family:var(--serif); font-weight:900; line-height:1.05;
  font-size:clamp(2.2rem,6vw,5rem); text-shadow:0 6px 40px rgba(0,0,0,.45)}
.closing__thanks{font-family:var(--serif); font-style:italic; font-weight:500; color:var(--gold-bright);
  font-size:clamp(1.4rem,3vw,2.4rem); margin-top:1rem}
.cta{margin-top:clamp(2rem,5vh,3.4rem); display:inline-flex; flex-direction:column; align-items:center; gap:4px;
  text-decoration:none; color:#fff; background:linear-gradient(150deg,var(--forest),var(--forest-2));
  border:1px solid rgba(255,255,255,.16); border-radius:18px; padding:18px 44px; transition:.3s;
  box-shadow:0 24px 50px -28px rgba(0,0,0,.7)}
.cta:hover{transform:translateY(-4px); box-shadow:0 30px 60px -28px rgba(198,165,100,.6)}
.cta__label{font-size:.82rem; letter-spacing:.18em; opacity:.85}
.cta__phone{font-family:var(--sans); font-weight:800; font-size:clamp(1.4rem,2.6vw,2rem); letter-spacing:.04em; color:var(--gold-bright)}
.closing__inner .hero__logos{margin-top:clamp(2rem,5vh,3.4rem)}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1024px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats--row{grid-template-columns:repeat(2,1fr)}
  .rcards{grid-template-columns:repeat(2,1fr)}
  .why__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  :root{--pad:22px}
  .scene{min-height:100svh}
  .scene__inner{padding-block:62px}
  .scene__head{margin-bottom:1.1rem}
  .eyebrow{margin-bottom:.7rem}
  .split, .split--reverse{grid-template-columns:1fr; gap:18px}
  .split__media{min-height:26vh; order:-1}
  .split__side{order:0}
  .offer__grid{grid-template-columns:1fr; gap:10px}
  .offercard{padding:14px 16px; gap:.35rem}
  .chart{height:44vh; gap:4px}
  .bar__col{max-width:40px}
  .bar__name{font-size:.6rem; min-height:2.8em}
  .bar__val{font-size:.62rem}
  .timeline{grid-template-columns:1fr; padding-top:0; gap:0; margin-top:1rem}
  .tl__track,.tl__line{display:none}
  .tstep{text-align:start; padding:11px 0; padding-inline-start:26px; border-inline-start:2px solid var(--line)}
  .tstep__dot{inset-inline-start:-9px; transform:none; top:14px}
  .ticks{gap:10px}
  .specs{gap:12px}
  .specs__ico{width:44px; height:44px; font-size:1.2rem}
  .why__grid{grid-template-columns:1fr 1fr; gap:10px}
  .why__chip{padding:16px}
  .navbtn{display:none}
  .rail{inset-inline-end:8px}
  .shape--bg,.shape--bg2{opacity:.12}
  .map__list{gap:8px 16px}
  .eyebrow::before{width:18px; margin-inline-end:8px}
  .rcards{grid-template-columns:1fr 1fr; gap:10px}
  .rcard__img{height:15vh}
  .rcard__body{padding:10px 14px 12px}
  .rcard__body h3{font-size:1.05rem}
  .scene__title.big{font-size:1.9rem}
  .scene--value .scene__note{font-size:.9rem}
  .pricecards{gap:9px}
  .pcard{padding:11px 16px}
  .pcard__big{font-size:1.5rem}
}
@media (max-width:430px){
  .stats{grid-template-columns:1fr 1fr; gap:8px}
  .stat{min-height:84px; padding:12px}
  .stat__num{font-size:1.8rem}
  .stat__label{font-size:.7rem}
  .why__grid{grid-template-columns:1fr 1fr}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important; transition-duration:.2s !important}
  .reveal{opacity:1; transform:none}
}

/* =========================================================================
   V2 · BUILDING EMPHASIS + EXTRA ANIMATIONS
   ========================================================================= */

/* headline mask reveal (text slides up from behind a clip) */
.mask{overflow:hidden; display:block; padding-bottom:.1em}
.mask>span{display:block; transform:translateY(120%); transition:transform 1.05s var(--ease)}
.scene.is-active .mask>span{transform:translateY(0)}

/* clip-path image wipe reveal */
.clip-img{clip-path:inset(0 0 100% 0 round 16px); transition:clip-path 1.2s var(--ease)}
.scene.is-active .clip-img{clip-path:inset(0 0 0 0 round 16px)}

/* light sweep across cinematic backgrounds */
.shine .kenburns::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.16) 48%, transparent 64%);
  transform:translateX(-130%)}
.scene.shine.is-active .kenburns::after{animation:sweep 2.8s ease .55s 1}
@keyframes sweep{to{transform:translateX(130%)}}

/* building "rises" into frame */
.scene.is-active .kenburns--rise{animation:kbrise 10s var(--ease) forwards}
@keyframes kbrise{from{transform:scale(1.18) translateY(3.5%)} to{transform:scale(1.05) translateY(0)}}

/* 13 · FACADE DETAIL */
.scene--detail{align-items:flex-end}
.detail__media{position:absolute; inset:0; z-index:0; background-size:cover; background-position:center}
.detail__inner{padding-bottom:clamp(60px,9vh,110px); max-width:780px}

/* 14 · BIG STATEMENT (towers) */
.scene--bigstate{align-items:center; text-align:center}
.bigstate__inner{max-width:1100px; margin-inline:auto; display:flex; flex-direction:column; align-items:center}
.big-statement{font-family:var(--serif); font-weight:900; line-height:1.03;
  font-size:clamp(2.3rem,6.6vw,5.6rem); text-shadow:0 6px 50px rgba(0,0,0,.5)}
.bigstate__inner>p{margin-top:1.3rem; font-size:clamp(1rem,1.9vw,1.4rem); font-weight:300; max-width:38ch; opacity:.93}

/* reduced motion: neutralize the new reveals */
@media (prefers-reduced-motion:reduce){
  .mask>span{transform:none !important}
  .clip-img{clip-path:none !important}
  .shine .kenburns::after{display:none}
}