/* ---------------------------------------------------------------------------
Fonturi gazduite local. Geist si Geist Mono sunt fisiere VARIABILE, deci un
singur fisier per subset acopera toate greutatile (400, 500, 600).
Nu se mai incarca nimic de pe fonts.googleapis.com / fonts.gstatic.com.
--------------------------------------------------------------------------- */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/geist-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/geist-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/geist-mono-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/geist-mono-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* ============ tokens ============ */
:root{
--ink:#111111;
--ink-soft:#3d3d3d;
--muted:#8f8b85;
--white:#ffffff;
--cream:#F7F3EC;
--cream-pill:#EFE9DE;
--dark:#0F0F0F;
--line:rgba(17,17,17,.14);
--pad:32px;
--maxw:1600px; /* latimea maxima a continutului (2026-09-29: 1280 -> 1440 -> 1600) */
--radius:16px;
--radius-lg:24px;
/* glass: just the blur and a faint hairline - no tint wash over the fill */
--glass-edge:rgba(255,255,255,.12);
--glass-blur:blur(20px) saturate(150%);
--sans:"Geist","Geist Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
--mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--white);font-size:16px;line-height:1.5}
img{display:block;max-width:100%}
/* .menu si .lease isi seteaza display:flex / display:grid, ceea ce bate regula
implicita a browserului pentru [hidden]. Fara aceasta linie raman doua
overlay-uri invizibile, pe tot ecranul, care inghit toate clickurile. */
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
ul,ol,dl,dd,figure,p,h1,h2,h3{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ============ typography ============ */
.t-72{font-size:72px;line-height:1.02;letter-spacing:-.035em;font-weight:400}
.t-64{font-size:64px;line-height:1.06;letter-spacing:-.03em;font-weight:400}
.t-52{font-size:52px;line-height:1.08;letter-spacing:-.03em;font-weight:400}
.t-48{font-size:48px;line-height:1.18;letter-spacing:-.025em;font-weight:400}
.t-48-tight{font-size:48px;line-height:1.12;letter-spacing:-.03em;font-weight:400}
.t-40{font-size:40px;line-height:1.1;letter-spacing:-.025em;font-weight:400}
.t-32{font-size:32px;line-height:1.28;letter-spacing:-.02em;font-weight:400}
.t-24{font-size:24px;letter-spacing:-.01em}
.t-20{font-size:20px;line-height:1.3;letter-spacing:-.01em;font-weight:400}
.t-20-mark{font-size:20px;letter-spacing:-.01em}
.t-body{font-size:16px;line-height:1.5}
.t-body-tight{font-size:16px;line-height:1.5}
.t-meta{font-size:13px;line-height:1.4;color:var(--muted)}
.section-label{font-family:var(--mono);font-size:14px;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;text-wrap:balance}
.section-label--lg{font-size:14px}
/* ============ layout ============ */
.container{width:100%;max-width:var(--maxw);margin-inline:auto}
.container--padded{padding-inline:var(--pad)}
.container--full{max-width:none}
/* ============ eyebrow ============ */
.eyebrow{display:inline-flex;align-self:flex-start;justify-self:start;align-items:center;gap:8px;padding:9px 14px;border-radius:8px;background:var(--cream-pill);color:var(--ink)}
.eyebrow__dot{width:6px;height:6px;background:currentColor;display:block}
.eyebrow--glass{background:rgba(255,255,255,.14);color:#fff;border:1px solid var(--glass-edge);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
/* ============ buttons ============ */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:12px;padding:6px 20px 6px 6px;border-radius:10px;font-family:var(--mono);font-size:14px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:transform .3s ease,opacity .3s ease}
.btn__icon{display:grid;place-items:center;width:32px;height:32px;border-radius:6px}
.btn--light{background:#fff;color:var(--ink)}
.btn--light .btn__icon{background:var(--ink);color:#fff}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark .btn__icon{background:#fff;color:var(--ink)}
/* nav pill: the dark fill wipes up from the bottom edge, and the white
background left showing around it reads as the outline */
.btn--pill{padding:13px 20px;border-radius:10px;background:#fff;color:var(--ink);overflow:hidden;transition:color .3s ease-in-out}
.btn--pill::before{content:"";position:absolute;z-index:-1;inset:2px;border-radius:8px;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .3s ease-in-out}
.btn--pill:hover,.btn--pill:focus-visible{color:#fff}
.btn--pill:hover::before,.btn--pill:focus-visible::before{transform:scaleY(1)}
/* --- hover: 3D pop-out + fill expansion ------------------------------------
Applies to any button that carries both an icon block and a label. The gate
is :has(), so this needs no JavaScript. Nothing changes the button's size:
the 2px edge is an inset outline, and the offset shadow paints outside. */
.btn{--btn-edge:var(--ink);--btn-label-hover:var(--ink)}
.btn--light{--btn-edge:#fff;--btn-label-hover:#fff}
.btn--dark{--btn-edge:var(--ink);--btn-label-hover:var(--ink)}
.btn:has(.btn__icon):has(.btn__label){
overflow:hidden;min-height:44px;padding:6px 20px 6px 50px;gap:0;
outline:2px solid transparent;outline-offset:-2px;
transition:outline-color .3s ease-in-out;
}
/* no offset shadow: it shares the button's own background colour, so it read
as a second outline behind the button rather than as a shadow */
.btn:has(.btn__icon):has(.btn__label):hover,
.btn:has(.btn__icon):has(.btn__label):focus-visible{
outline-color:var(--btn-edge);
}
/* the block: a 32px square at rest, the whole button inside the edge on hover */
.btn:has(.btn__label) .btn__icon{
position:absolute;z-index:0;
left:6px;top:6px;bottom:6px;right:calc(100% - 38px);width:auto;height:auto;
display:flex;align-items:center;justify-content:flex-end;padding-right:8px;
border-radius:6px;
transition:left .3s ease-in-out,right .3s ease-in-out,top .3s ease-in-out,bottom .3s ease-in-out;
}
.btn:has(.btn__label):hover .btn__icon,
.btn:has(.btn__label):focus-visible .btn__icon{left:2px;top:2px;bottom:2px;right:2px}
.btn:has(.btn__label) .btn__icon svg{flex:none}
/* the label rides above the block, slides into the arrow's old place */
.btn:has(.btn__icon) .btn__label{
position:relative;z-index:1;
transition:transform .3s ease-in-out,color .3s ease-in-out;
}
.btn:has(.btn__icon):hover .btn__label,
.btn:has(.btn__icon):focus-visible .btn__label{
transform:translateX(-36px);color:var(--btn-label-hover);
}
@media (prefers-reduced-motion:reduce){
.btn,.btn .btn__icon,.btn .btn__label{transition-duration:.01ms}
}
/* ============ logo ============ */
.logo{display:inline-flex;align-items:center;gap:10px}
.logo__mark{flex:none}
.logo__img{height:30px;width:auto;flex:none}
/* ============ nav ============ */
.nav-wrap{position:absolute;inset:0 0 auto 0;z-index:20;padding-top:24px}
.nav{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:9px 9px 9px 20px;border-radius:14px;background:rgba(16,16,16,.42);border:1px solid var(--glass-edge);color:#fff}
/* blur-ul barei sta pe ::before, nu pe .nav: un element cu backdrop-filter devine „backdrop root”, iar
mega-meniurile din el n-ar mai vedea pagina prin sticla lor (2026-09-14) */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.nav .logo{justify-self:start}
.nav__links{display:flex;align-items:center;gap:40px;line-height:1;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.nav__cta{grid-column:3;justify-self:end}
/* butonul Inquire a fost scos din bara (2026-09-28); fara el bara ar scadea de la 62.8px la 50px.
Pastreaza inaltimea de dinainte (pill 44.8 + padding 2x9) doar pe desktop; pe mobil butonul era oricum ascuns. */
@media (min-width:861px){.nav{min-height:62.8px}}
.nav__link{display:flex;align-items:center;font-size:14px;line-height:1}
.nav__link--soon{opacity:.4;cursor:default}
.nav__link{opacity:.9;transition:opacity .25s ease}
.nav__link:hover{opacity:1}
.link-roll{position:relative;display:inline-block;overflow:hidden;vertical-align:top}
.link-roll span{display:block;transition:transform .4s cubic-bezier(.6,.05,.1,1)}
.link-roll span+span{position:absolute;inset:0;transform:translateY(110%)}
.link-roll:hover span{transform:translateY(-110%)}
.link-roll:hover span+span{transform:translateY(0)}
/* ============ hero ============ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;color:#fff;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-1}
.hero__bg-video,.hero__bg-img{width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 35%,rgba(0,0,0,.15) 60%,rgba(0,0,0,.6) 100%)}
.hero__inner{display:flex;flex-direction:column;justify-content:space-between;flex:1;padding-block:140px 40px}
.hero__intro{display:flex;flex-direction:column;align-items:flex-start;gap:28px;max-width:900px}
.hero__heading{display:flex;flex-direction:column;gap:16px}
.hero__eyebrow{opacity:.85}
.hero__title{max-width:14ch}
.hero__lead{max-width:44ch;opacity:.9;text-wrap:balance}
.hero__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-top:120px}
.hero__stats{display:flex;gap:72px}
.hero__stat-value{display:flex;align-items:flex-start;gap:6px}
.hero__stat-label{opacity:.85;margin-top:4px}
.stat-number{position:relative;display:inline-block;font-weight:400;letter-spacing:-.03em}
.stat-number__ghost{visibility:hidden}
.stat-number__live{position:absolute;inset:0}
.hero__cards{display:flex;gap:16px}
.hero__card{width:262px}
/* ============ project card ============ */
.project-card{border-radius:14px;overflow:hidden;background:rgba(18,18,18,.55);border:1px solid var(--glass-edge);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);padding:8px}
.project-card__media{position:relative;overflow:hidden;border-radius:9px;aspect-ratio:4/3}
.project-card__img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.project-card:hover .project-card__img{transform:scale(1.05)}
.project-card__footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 8px 8px}
.project-card__location{margin-top:4px;color:rgba(255,255,255,.6)}
.project-card__arrow{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.25);flex:none}
.project-card--lg .project-card__media{aspect-ratio:4/5}
.project-card--lg .project-card__footer{padding:18px 10px 10px}
/* ============ about ============ */
.about{background:#fff;padding-block:120px 0;overflow:hidden}
.about__head{display:flex;align-items:flex-start;justify-content:space-between;gap:60px;flex-wrap:wrap}
.about__intro{display:flex;flex-direction:column;gap:22px;max-width:640px}
.about__statement{max-width:24ch}
.about__meta{display:flex;align-items:center;gap:20px;padding-top:44px}
.about__rule{display:block;width:120px;height:1px;background:var(--line)}
.about__images{margin-top:64px;padding-bottom:120px}
.about__track{display:flex;width:max-content;gap:24px;animation:marquee 40s linear infinite}
.about__group{display:flex;gap:24px}
.about__figure{width:34vw;max-width:460px;aspect-ratio:3/2;border-radius:14px;overflow:hidden;flex:none}
.about__img{width:100%;height:100%;object-fit:cover}
@keyframes marquee{to{transform:translateX(calc(-50% - 12px))}}
/* galerie cu derulare continua, folosita pe paginile secundare */
.reel{overflow:hidden;margin-top:0}
.reel__track{display:flex;width:max-content;gap:24px;animation:marquee 64s linear infinite}
.reel__group{display:flex;gap:24px}
.reel__figure{position:relative;width:38vw;max-width:520px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;flex:none;margin:0;background:var(--line)}
.reel__figure img{width:100%;height:100%;object-fit:cover;display:block}
.reel__cap{position:absolute;left:16px;bottom:14px;z-index:1;font-size:11px;letter-spacing:.12em;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.65)}
.reel:hover .reel__track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.reel__track{animation:none}.reel{overflow-x:auto}}
/* ============ services ============ */
.services{background:#fff;padding-block:40px 130px}
.services--reasons{padding-block:120px 130px}
.services__head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.services__intro{display:flex;flex-direction:column;gap:22px}
.services__title{max-width:16ch}
.services__body{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);gap:64px;margin-top:56px;align-items:start}
.services__figure{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:588/510;background:#eee}
.services__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease,transform .8s ease;transform:scale(1.05)}
.services__img[data-active]{opacity:1;transform:scale(1)}
/* Cele patru texte stau suprapuse in aceeasi celula de grid, nu absolut.
Asa inaltimea containerului vine din textul cel mai lung la latimea curenta,
nu dintr-un min-height fix care lasa gol sau strange prea tare. */
.services__leads{position:relative;margin-top:22px;display:grid}
.services__lead{grid-area:1 / 1;margin:0;opacity:0;pointer-events:none;transition:opacity .45s ease;max-width:56ch;color:var(--ink-soft)}
.services__lead[data-active]{opacity:1;pointer-events:auto}
.services__list{display:flex;flex-direction:column}
.services__item{display:flex;align-items:baseline;gap:28px;width:100%;text-align:left;padding-block:18px;color:var(--muted);transition:color .35s ease}
.services__item[aria-pressed="true"]{color:var(--ink)}
.services__number{font-family:var(--sans);font-size:16px}
.services__name{letter-spacing:-.025em}
/* ============ projects ============ */
.projects{background:var(--dark);color:#fff;padding-block:120px}
.projects__heading{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.projects__title{max-width:16ch}
.projects__inner{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:end}
.projects__heading{grid-column:1/-1;margin-bottom:32px}
/* ============ success ============ */
.success{background:#fff;padding-block:120px}
.success__head{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr);gap:40px}
.success__title{max-width:22ch}
.success__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:96px}
.success__stat-value{display:flex;align-items:flex-start;gap:6px}
.success__stat-text{margin-top:18px;max-width:26ch;color:var(--ink-soft)}
.success__figure{margin-top:64px;border-radius:16px;overflow:hidden;width:100%;height:512px}
.success__img{width:100%;height:100%;object-fit:cover}
/* ============ blog ============ */
.blog{background:var(--cream);padding-block:110px}
.blog__head{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.blog__title{max-width:16ch}
/* two flex rows stacked = a 3x2 grid, and each row keeps the width-expansion
hover; on mobile the rows flatten into one snapping carousel */
.blog__grid{margin-top:64px;display:flex;flex-direction:column;gap:24px}
.blog__row{display:flex;gap:24px;aspect-ratio:1216/487}
.blog-card{position:relative;isolation:isolate;flex:1 1 0;min-width:0;height:100%;border-radius:14px;overflow:hidden;padding:22px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;transition:flex-grow .75s cubic-bezier(.65,0,.35,1)}
.blog__row:hover .blog-card{flex-grow:.9}
.blog__row .blog-card:hover{flex-grow:1.35}
.blog-card__media{position:absolute;inset:0;z-index:-1}
.blog-card__img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.blog-card:hover .blog-card__img{transform:scale(1.04)}
.blog-card__scrim{position:absolute;inset:0}
.blog-card__scrim--vertical{background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55))}
.blog-card__scrim--diagonal{background:linear-gradient(160deg,rgba(0,0,0,.1),rgba(0,0,0,.6))}
.blog-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.blog-card__date{display:inline-flex;padding:8px 12px;border-radius:8px;background:rgba(255,255,255,.16);border:1px solid var(--glass-edge);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
/* the square spins a quarter turn on hover and, being square, lands looking
exactly as it started; the arrow counter-rotates so it never moves */
.blog-card__arrow{display:grid;place-items:center;width:44px;height:44px;border-radius:9px;background:#fff;color:var(--ink);flex:none;transition:transform .45s cubic-bezier(.33,1,.68,1)}
.blog-card__arrow svg{transition:transform .45s cubic-bezier(.33,1,.68,1)}
.blog-card:hover .blog-card__arrow{transform:rotate(90deg)}
.blog-card:hover .blog-card__arrow svg{transform:rotate(-90deg)}
.blog-card__title{max-width:14ch}
.blog-card__link{position:absolute;inset:0}
/* ============ cta ============ */
.cta{position:relative;color:#fff;isolation:isolate;overflow:hidden}
.cta__bg{position:absolute;inset:0;z-index:-1}
.cta__bg-img,.cta__bg-video{width:100%;height:100%;object-fit:cover}
.cta__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.15))}
.cta__inner{padding-block:150px}
.cta__content{display:flex;flex-direction:column;align-items:flex-start;gap:36px}
.cta__heading{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.cta__title{max-width:16ch}
/* ============ footer ============ */
.footer{background:var(--dark);color:#fff;padding:110px 0 0;overflow:hidden}
.footer__inner,.footer__brokers,.footer__legal,.footer__wordmark{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.footer__inner{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:40px}
.footer__brand{display:flex;flex-direction:column;gap:28px;max-width:420px}
.footer__blurb{color:rgba(255,255,255,.72)}
.footer__column{display:flex;flex-direction:column;gap:22px}
.footer__column-title{color:#fff}
.footer__column-list{display:flex;flex-direction:column;gap:16px}
.footer__link{color:rgba(255,255,255,.75);transition:color .25s ease}
a.footer__link:hover{color:#fff}
.footer__link--soon{color:rgba(255,255,255,.32);cursor:default}
.footer__brokers{margin-top:64px;padding-top:28px;border-top:1px solid rgba(255,255,255,.14)}
.footer__brokers-title{color:rgba(255,255,255,.72)}
.footer__brokers-list{margin-top:22px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.footer__broker{display:flex;flex-direction:column;gap:3px;min-width:0}
.footer__broker-name{color:#fff}
.footer__broker-line{font-size:14px;color:rgba(255,255,255,.7);overflow-wrap:anywhere;transition:color .25s ease}
.footer__broker-line:hover{color:#fff}
.footer__legal{margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px 40px;align-items:start}
.footer__utility{display:flex;flex-wrap:wrap;gap:12px 26px}
.footer__legal-hq{color:rgba(255,255,255,.6);font-style:normal;display:flex;flex-direction:column;gap:6px;text-align:right}
.footer__legal-text{grid-column:1/-1;color:rgba(255,255,255,.42);font-size:11px;line-height:1.5}
.footer__wordmark{margin-top:40px;font-size:min(18vw,258px);line-height:.78;letter-spacing:-.05em;font-weight:400;white-space:nowrap;text-align:center;translate:0 12%}
/* ============ nav burger + mobile menu ============ */
.nav-wrap--solid{position:relative;inset:auto;padding-block:22px 30px;background:linear-gradient(180deg,var(--cream) 0%,rgba(247,243,236,.45) 58%,rgba(247,243,236,0) 100%)}
.nav-wrap--solid .nav{background:rgba(16,16,16,.94);border-color:rgba(255,255,255,.10);box-shadow:0 10px 30px rgba(17,17,17,.10)}
/* Header sticky (2026-09-14). site.js muta .nav-wrap si .menu direct in (hero-urile au
isolation:isolate, iar un fixed ramas in ele ar fi acoperit de sectiunile de dedesubt) si
pune .is-fixed. Pe paginile cu bara solida un .nav-spacer tine locul in flux. Fara JS bara
ramane ca inainte, doar sus. */
.nav-wrap.is-fixed{position:fixed;inset:0 0 auto 0;z-index:50;padding-block:24px 0;background:none;pointer-events:none;transition:padding-top .35s ease}
.nav-wrap.is-fixed .nav{pointer-events:auto;transition:background-color .35s ease,box-shadow .35s ease}
.nav-wrap.is-scrolled{padding-top:12px}
.nav-wrap.is-scrolled .nav{background:rgba(16,16,16,.86);box-shadow:0 10px 30px rgba(17,17,17,.16)}
.nav-spacer{display:block}
/* ancorele (#leasing, #plan...) nu mai cad sub bara */
[id]{scroll-margin-top:96px}
/* bottom sheet-ul hartii pe telefon acopera tot ecranul: bara nu sta peste scrim */
@media (max-width:860px){ body:has(.mpx__scrim:not([hidden])) .nav-wrap.is-fixed{opacity:0;visibility:hidden} }
.nav__burger{display:none;grid-column:3;justify-self:end;width:38px;height:38px;border-radius:8px;background:rgba(255,255,255,.16);color:#fff;place-items:center}
.nav__burger-bars{display:block;width:16px}
.nav__burger-bars i{display:block;height:1.5px;background:currentColor;border-radius:1px}
.nav__burger-bars i+i{margin-top:4px}
/* ---- meniul de mobil (v2, 2026-09-28): cerc din burger, randuri pe rand, grupuri acordeon ---- */
.menu{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;color:#fff;background:#0f100e;
--ease:cubic-bezier(.7,0,.2,1);clip-path:circle(0 at var(--ox,calc(100% - 40px)) var(--oy,40px));transition:clip-path .55s var(--ease)}
.menu[data-open]{clip-path:circle(160vmax at var(--ox,calc(100% - 40px)) var(--oy,40px));transition-duration:.75s}
.menu__glow{position:fixed;inset:0;pointer-events:none;background:radial-gradient(90% 55% at 100% 0%,rgba(94,114,72,.34),transparent 70%),radial-gradient(70% 45% at 0% 100%,rgba(94,114,72,.16),transparent 70%)}
.menu__bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:24px;flex:none}
.menu__close{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;flex:none;
transform:rotate(-90deg) scale(.6);opacity:0;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .3s,background .2s}
.menu[data-open] .menu__close{transform:none;opacity:1;transition-delay:.25s}
.menu__close:active{background:rgba(255,255,255,.22)}
.menu__body{position:relative;flex:1;display:flex;flex-direction:column;gap:36px;padding-bottom:40px}
.menu__groups{margin:0;padding:0;list-style:none;border-bottom:1px solid rgba(255,255,255,.1)}
.menu__group{border-top:1px solid rgba(255,255,255,.1);opacity:0;transform:translateY(26px);transition:opacity .3s,transform .3s}
.menu[data-open] .menu__group,.menu[data-open] .menu__foot{opacity:1;transform:none;transition:opacity .55s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.22s + var(--i) * 70ms)}
.menu__row{width:100%;display:flex;align-items:center;gap:14px;padding:18px 0;border:0;background:none;color:#fff;font:inherit;font-size:32px;line-height:1.1;letter-spacing:-.03em;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.menu__row-n{align-self:flex-start;margin-top:5px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.4)}
.menu__row-label{flex:1;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.menu__row:active .menu__row-label{transform:translateX(4px)}
.menu__plus{position:relative;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);flex:none;transition:background .3s,transform .45s cubic-bezier(.2,.7,.2,1)}
.menu__plus::before,.menu__plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:#fff;border-radius:2px;transition:background .3s}
.menu__plus::after{transform:rotate(90deg)}
.menu__row-go{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);flex:none;transition:background .3s,transform .35s}
.menu__row:active .menu__row-go{transform:translateX(3px)}
.menu__row--soon{color:rgba(255,255,255,.3);cursor:default}
.menu__row em,.menu__link em{font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.3)}
.menu__group.is-open .menu__plus{transform:rotate(135deg);background:#fff}
.menu__group.is-open .menu__plus::before,.menu__group.is-open .menu__plus::after{background:#111}
.menu__row[aria-current] .menu__row-go{background:#5E7248}
.menu__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.menu__group.is-open .menu__panel{grid-template-rows:1fr}
.menu__list{overflow:hidden;margin:0;padding:0 0 0 25px;list-style:none;min-height:0}
.menu__list li:last-child{padding-bottom:16px}
.menu__link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;font-size:19px;letter-spacing:-.01em;color:rgba(255,255,255,.72);text-decoration:none;
opacity:0;transform:translateX(-10px);transition:opacity .25s,transform .25s,color .2s}
.menu__group.is-open .menu__link{opacity:1;transform:none;transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1),color .2s;transition-delay:calc(.08s + var(--j) * 45ms)}
.menu__link svg{opacity:.35;transform:translateX(-6px);transition:opacity .25s,transform .3s cubic-bezier(.2,.7,.2,1)}
.menu__link:hover,.menu__link:active,.menu__link[aria-current]{color:#fff}
.menu__link:hover svg,.menu__link:active svg{opacity:1;transform:none}
.menu__link[aria-current] span::before{content:"";display:inline-block;width:7px;height:7px;margin:0 10px 2px -17px;border-radius:50%;background:#9DB57F;vertical-align:middle}
.menu__link--soon{color:rgba(255,255,255,.3)}
.menu__foot{display:flex;flex-direction:column;gap:22px;margin-top:auto;opacity:0;transform:translateY(26px);transition:opacity .3s,transform .3s}
.menu__card{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:14px;padding:10px 14px 10px 10px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#fff;text-decoration:none;transition:background .25s,transform .25s}
.menu__card:active{transform:scale(.98);background:rgba(255,255,255,.12)}
.menu__card img{width:64px;height:64px;border-radius:12px;object-fit:cover}
.menu__card-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.menu__card-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#9DB57F}
.menu__card-t{font-size:16px;line-height:1.25}
.menu__card-go{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#111}
.menu__utility{display:flex;flex-wrap:wrap;gap:12px 22px;margin:0;padding:0;list-style:none;color:rgba(255,255,255,.6)}
.menu__utility .is-soon{color:rgba(255,255,255,.28)}
@media (prefers-reduced-motion:reduce){
.menu,.menu[data-open]{clip-path:none;transition:opacity .2s;opacity:0}
.menu[data-open]{opacity:1}
.menu__close,.menu__group,.menu__foot,.menu__link{transform:none!important;transition:none!important;opacity:1!important}
.menu__panel{transition:none}
}
body.is-locked{overflow:hidden}
/* ============ leasing modal ============ */
.lease{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;opacity:0;transition:opacity .28s ease}
.lease[data-open]{opacity:1}
.lease__scrim{position:absolute;inset:0;background:rgba(6,12,15,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lease__panel{position:relative;width:min(600px,100%);max-height:88svh;overflow-y:auto;background:#fff;color:var(--ink);border-radius:16px;padding:32px}
.lease__close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:var(--cream-pill);color:var(--ink)}
.lease__eyebrow{color:var(--muted)}
.lease__title{margin-top:10px;max-width:22ch}
.lease__form{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lease__field{display:flex;flex-direction:column;gap:6px;min-width:0}
.lease__field--wide,.lease__consent,.lease__submit,.lease__status{grid-column:1/-1}
.lease__label{color:var(--muted)}
.lease__label em{font-style:normal;text-transform:none;letter-spacing:0}
.lease__field input,.lease__field textarea{font:inherit;font-size:15px;color:var(--ink);background:var(--cream);border:1px solid transparent;border-radius:9px;padding:11px 13px;width:100%;resize:vertical}
.lease__field input:focus,.lease__field textarea:focus{outline:none;border-color:var(--ink);background:#fff}
.lease__consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--ink-soft)}
.lease__consent input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--ink)}
.lease__submit{justify-self:start;margin-top:4px}
.lease__submit[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.lease__status{font-size:14px;min-height:1.2em;color:var(--ink-soft)}
.lease__status[data-tone="ok"]{color:#3F6B33}
.lease__status[data-tone="err"]{color:#A5382A}
/* ============ reveal ============ */
[data-reveal]{opacity:0;transform:translateY(28px)}
[data-reveal].is-in{opacity:1;transform:none;animation:reveal .8s cubic-bezier(.2,.6,.2,1) backwards}
@keyframes reveal{from{opacity:0;transform:translateY(28px)}}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}[data-reveal].is-in{animation:none}.about__track{animation:none}}
/* ============ responsive ============ */
@media (max-width:1240px){
.footer__inner{grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr))}
.footer__brand{grid-column:1/-1;max-width:560px}
.footer__brokers-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 24px}
}
@media (max-width:1100px){
.t-72{font-size:56px}
.t-64{font-size:48px}
.t-52{font-size:42px}
.t-48,.t-48-tight{font-size:38px}
.t-40{font-size:34px}
.t-32{font-size:28px}
.services__body{grid-template-columns:1fr;gap:44px}
.success__head{grid-template-columns:1fr}
.success__stats{grid-template-columns:repeat(2,1fr);row-gap:48px}
.projects__inner{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
:root{--pad:20px}
.t-72{font-size:40px}
.t-64{font-size:36px}
.t-52{font-size:32px}
.t-48,.t-48-tight{font-size:28px}
.t-40{font-size:26px}
.t-32{font-size:22px}
.nav__links,.nav__cta{display:none}
/* homepage hero carries more than the template's did: taller, and the two
project cards go full width instead of squeezing into two columns */
.hero:not(.hero--page){min-height:130vh}
.hero__inner{padding-block:120px 28px}
.hero__foot{flex-direction:column;align-items:flex-start;gap:32px;margin-top:56px}
.hero__stats{gap:44px}
.hero__stat-label{font-size:14px}
.hero__cards{flex-direction:column;width:100%;max-width:320px;gap:14px}
.hero__card{width:100%;flex:none}
.footer__inner{grid-template-columns:1fr 1fr;gap:32px 20px}
.footer__brand{grid-column:1/-1}
.about__figure{width:80vw}
.blog__grid{flex-direction:row;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);padding-bottom:4px;
scrollbar-width:none}
.blog__grid::-webkit-scrollbar{display:none}
.blog__row{display:contents}
.blog-card{aspect-ratio:4/5;height:auto;flex:0 0 76%;scroll-snap-align:start}
.blog__row:hover .blog-card,.blog__row .blog-card:hover{flex-grow:0}
.projects__inner{grid-template-columns:1fr}
.success__figure{height:320px}
.nav__burger{display:grid}
.footer__brokers-list{grid-template-columns:1fr;gap:18px}
.footer__legal{grid-template-columns:1fr}
.footer__legal-hq{text-align:left}
.lease__form{grid-template-columns:1fr}
.lease__panel{padding:26px 22px}
}
/* ============ page shell (secondary pages) ============ */
.hero--page{min-height:min(76svh,700px)}
.hero--page .hero__inner{justify-content:flex-end;padding-block:170px 64px}
.hero--page .hero__intro{max-width:840px;gap:24px}
.hero--page .hero__title{max-width:18ch}
.hero--page .hero__lead{max-width:52ch}
.hero__crumb{opacity:.7}
.section{padding-block:110px}
.section--tight{padding-block:80px}
/* Doua blocuri pe acelasi fundal deschis, unul dupa altul: padding-ul de jos al
primului se aduna cu cel de sus al celui de-al doilea si iese un gol dublu.
Primul il pierde pe al lui; distanta ramane cea data de padding-ul de sus al
blocului urmator. Blocurile cream si dark schimba fundalul, deci isi pastreaza
padding-ul: acolo golul se vede ca o taietura de culoare, nu ca spatiu mort. */
:is(.section:not(.section--cream):not(.section--dark),.services,.success,.progress):has(+ :is(.section:not(.section--cream):not(.section--dark),.services,.success,.progress)){padding-bottom:0}
.section--cream{background:var(--cream)}
.section--dark{background:var(--dark);color:#fff}
.section__head{display:flex;flex-direction:column;align-items:flex-start;gap:22px;max-width:64ch}
.section__title{max-width:18ch}
.section__lead{margin-top:6px;max-width:62ch;color:var(--ink-soft);text-wrap:balance}
.section--dark .section__lead{color:rgba(255,255,255,.72)}
/* text + media, two columns */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center;margin-top:56px}
/* Marja de sus a blocurilor de mai jos separa blocul de ce vine DEASUPRA lui.
Cand blocul e primul din containerul lui nu are ce separa, dar marja se aduna
peste padding-ul sectiunii si iese un gol de sus mai mare decat cel de jos
(ex. 136 sus fata de 80 jos). Se anuleaza o singura data, la nivel de sistem. */
.container > .split:first-child,
.container > .tiles:first-child,
.container > .route-steps:first-child,
.container > .figures:first-child,
.container > .band-media:first-child,
.container > .progress__grid:first-child,
.container > .qa:first-child,
.container > .uses:first-child,
.container > .plan:first-child,
.container > .spec-wrap:first-child{margin-top:0}
.container > .spec-wrap:first-child > .spec{margin-top:0}
.split--flip .split__media{order:-1}
.split__body{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.split__media{border-radius:14px;overflow:hidden;aspect-ratio:4/3}
.split__media img{width:100%;height:100%;object-fit:cover}
/* labelled drawing */
.plan{margin-top:48px}
.plan__frame{border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.plan__frame img{width:100%;height:auto;display:block}
.plan__caption{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 28px;color:var(--muted)}
/* spec table - lots, suites, figures */
.spec{margin-top:40px;width:100%;border-collapse:collapse}
.spec th,.spec td{text-align:left;padding:14px 20px 14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:400}
.spec td{color:var(--ink-soft)}
.spec td.k{color:var(--ink);font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.spec td.n{color:var(--ink)}
.section--dark .spec th{color:rgba(255,255,255,.55)}
.section--dark .spec td{color:rgba(255,255,255,.72);border-color:rgba(255,255,255,.14)}
.section--dark .spec th{border-color:rgba(255,255,255,.14)}
.section--dark .spec td.k,.section--dark .spec td.n{color:#fff}
.spec-wrap{overflow-x:auto}
.spec{min-width:520px}
/* lots table: lot names read as names, statuses as minimal eyebrows */
.spec--lots th.k{font-family:var(--sans);font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;text-transform:none}
.spec--lots td.n{color:var(--ink-soft)}
.spec--lots td.s{width:1%;white-space:nowrap}
.tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.45}
.tag--live{color:var(--ink)}
.tag--live::before{opacity:1}
.tag--soft{color:var(--muted)}
.section--dark .tag{color:rgba(255,255,255,.58)}
.section--dark .tag--live{color:#fff}
/* big figures, the arena effect read as numbers not rows */
.figures{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:48px 0 0;padding:0;border-top:1px solid var(--line)}
.figure{display:flex;flex-direction:column;gap:14px;padding:28px 28px 4px 0;border-left:1px solid var(--line)}
.figure:first-child{border-left:0;padding-left:0}
.figure:not(:first-child){padding-left:28px}
.figure__value{display:flex;align-items:baseline;gap:2px;margin:0;font-variant-numeric:tabular-nums}
.figure__suffix{font-size:26px;letter-spacing:-.02em;color:var(--muted)}
.figure__label{margin:0;color:var(--ink-soft);text-wrap:pretty}
/* Cifrele din coloana de text a unui .split (Trade Area): randul sta in latimea coloanei
(split__body are align-items:flex-start, deci dl-ul se latea peste diagrama) si cifrele sunt
mai mici, ca 4 valori sa incapa langa diagrama. */
.split__body > .figures{align-self:stretch;min-width:0}
.split__body .figure{padding:22px 16px 4px 0;gap:10px;min-width:0}
.split__body .figure:not(:first-child){padding-left:16px}
.split__body .figure__value .t-52{font-size:clamp(26px,2.2vw,34px);line-height:1.05;letter-spacing:-.025em}
.split__body .figure__label{font-size:14px;line-height:1.35}
.section--dark .figures{border-top-color:rgba(255,255,255,.16)}
.section--dark .figure{border-left-color:rgba(255,255,255,.16)}
.section--dark .figure__label{color:rgba(255,255,255,.68)}
.section--dark .figure__suffix{color:rgba(255,255,255,.5)}
/* route: arena -> plaza -> edge */
.route-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
.route-step{display:flex;flex-direction:column;gap:10px;padding-top:22px;border-top:1px solid var(--line)}
.route-step__label{color:var(--muted)}
/* unitatea mai mica si aliniata sus, exact ca la statisticile din hero
(.hero__stat-value + .hero__stat-suffix) */
.route-step__value{display:flex;align-items:flex-start;gap:5px;letter-spacing:-.02em}
/* prefixul si sufixul lipit (tilda, plus) stau langa numar, fara gap-ul flexului */
.statv{display:inline-flex;align-items:baseline}
.route-step__unit{color:var(--muted)}
.section--dark .route-step__unit{color:rgba(255,255,255,.55)}
.route-step__note{color:var(--ink-soft)}
.section--dark .route-step{border-top-color:rgba(255,255,255,.22)}
.section--dark .route-step__label{color:rgba(255,255,255,.6)}
.section--dark .route-step__note{color:rgba(255,255,255,.66)}
/* simple tile row */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
.tile{display:flex;flex-direction:column;gap:10px;padding-top:22px;border-top:1px solid var(--line)}
.tile__n{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--muted)}
.tile__body{color:var(--ink-soft)}
.section--dark .tile{border-color:rgba(255,255,255,.2)}
.section--dark .tile__body{color:rgba(255,255,255,.7)}
.section--dark .tile__n{color:rgba(255,255,255,.5)}
@media (max-width:1100px){
.split{grid-template-columns:1fr;gap:36px}
.split--flip .split__media{order:0}
.route-steps,.tiles{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
.section{padding-block:76px}
.section--tight{padding-block:56px}
.hero--page .hero__inner{padding-block:140px 44px}
.route-steps,.tiles{grid-template-columns:1fr}
}
/* ============ nav dropdown ============ */
.nav__item{position:relative;display:flex;align-items:center}
.nav__drop{position:absolute;top:100%;left:50%;translate:-50% 0;padding-top:18px;min-width:200px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s ease,transform .22s ease,visibility .22s}
.nav__item--has-drop:hover .nav__drop,.nav__item--has-drop:focus-within .nav__drop{opacity:1;visibility:visible;transform:translateY(0)}
.nav__drop-list{background:rgba(16,16,16,.70);border:1px solid var(--glass-edge);box-shadow:0 18px 40px rgba(0,0,0,.32);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:2px}
.nav__drop-link{display:block;padding:9px 12px;border-radius:7px;font-size:14px;line-height:1.2;color:rgba(255,255,255,.78);white-space:nowrap;transition:background .2s ease,color .2s ease}
.nav__drop-link:hover,.nav__drop-link:focus-visible{background:rgba(255,255,255,.12);color:#fff}
.nav__drop-link.is-current{color:#fff}
.nav__drop-link.is-current::before{content:"";display:inline-block;width:5px;height:5px;background:currentColor;margin-right:8px;vertical-align:2px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
/* ============ hero wordmark (Edge / Echo) ============ */
/* aceeasi scara ca wordmark-ul din footer */
/* Edge / Echo: the name is set like the footer wordmark, only left aligned and
sitting on the bottom edge so the descender clips, with the figures opposite */
.hero__wordmark{font-size:var(--wm,35vw);line-height:.76;letter-spacing:-.055em;font-weight:300;white-space:nowrap;margin-left:-.093em;margin-bottom:calc(var(--wm) * -.02 - 4px);translate:0 0}
.hero__standfirst{opacity:.92;max-width:22ch}
/* ============ on site now (fotografii reale) ============ */
.progress{padding-block:110px}
.progress__head{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:64ch}
.progress__head .eyebrow{align-self:flex-start}
.progress__title{max-width:20ch}
.progress__lead{color:var(--ink-soft);max-width:60ch;text-wrap:balance}
.progress__lead-shot{position:relative;margin:44px 0 0;border-radius:12px;overflow:hidden;background:var(--line)}
.progress__lead-shot img{display:block;width:100%;height:auto;aspect-ratio:239/100;object-fit:cover}
.progress__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:20px 0 0;padding:0;list-style:none}
.progress__figure{position:relative;margin:0;border-radius:12px;overflow:hidden;background:var(--line)}
.progress__figure img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.progress__caption{position:absolute;left:14px;bottom:12px;z-index:1;font-size:11px;letter-spacing:.12em;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.65)}
.progress__lead-shot .progress__caption{left:20px;bottom:18px;font-size:12px}
.band-media{position:relative;margin:56px 0 0;border-radius:12px;overflow:hidden;background:var(--line)}
.band-media img{display:block;width:100%;height:auto;aspect-ratio:239/100;object-fit:cover}
.band-media__caption{position:absolute;left:20px;bottom:18px;z-index:1;font-size:12px;letter-spacing:.12em;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.65)}
/* ============ intrebari frecvente ============ */
/* details/summary, ca sa functioneze fara JS si sa ramana accesibil */
.qa{margin:48px 0 0;border-top:1px solid var(--line)}
.qa__item{border-bottom:1px solid var(--line)}
.qa__q{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;padding:26px 0;cursor:pointer;list-style:none;font-size:22px;line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
.qa__q::-webkit-details-marker{display:none}
.qa__q:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.qa__mark{position:relative;flex:none;width:18px;height:18px;margin-top:6px;transition:transform .35s cubic-bezier(.33,1,.68,1)}
.qa__mark::before,.qa__mark::after{content:"";position:absolute;background:var(--ink)}
.qa__mark::before{left:0;right:0;top:8px;height:1.5px}
.qa__mark::after{top:0;bottom:0;left:8px;width:1.5px;transition:opacity .35s ease}
.qa__item[open] .qa__mark{transform:rotate(180deg)}
.qa__item[open] .qa__mark::after{opacity:0}
.qa__a{padding:0 0 28px;max-width:76ch;color:var(--ink-soft);text-wrap:pretty}
.qa__a p{margin:0 0 14px}
.qa__a p:last-child{margin-bottom:0}
.qa__a a{text-decoration:underline;text-underline-offset:3px}
.section--dark .progress__title,.section--dark .progress__lead{color:#fff}
/* ============ hero rail (secondary pages) ============ */
/* the flat page heroes carried only a title; the rail lands three verified
facts on the bottom edge so each secondary hero opens with its own data */
.hero__rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:0;padding-top:22px;border-top:1px solid var(--glass-edge)}
.hero__rail-item{display:flex;flex-direction:column;gap:7px;min-width:0}
.hero__rail-k{font-family:var(--mono);font-size:11px;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.hero__rail-v{margin:0;font-size:19px;line-height:1.25;letter-spacing:-.01em;text-wrap:pretty}
.hero--page:has(.hero__rail) .hero__inner{flex:1 0 auto;justify-content:space-between;padding-block:168px 44px}
.hero--page:has(.hero__rail) .hero__intro{margin-bottom:48px}
.hero--page:has(.hero__wordmark){--wm:min(35vw,calc(50vw - 240px));min-height:min(100svh,1120px)}
.hero--page:has(.hero__wordmark) .hero__inner{flex:1 0 auto;justify-content:space-between;padding-block:112px 0}
.hero--page:has(.hero__wordmark) .hero__intro{gap:16px;max-width:640px}
/* wordmark + cifre, amandoua aliniate la stanga containerului. Stivuite, pentru ca
la 35vw wordmark-ul depaseste latimea disponibila daca cifrele stau alaturi. */
.hero__foot--wordmark{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-top:0}
.hero__foot--wordmark .hero__stats{padding-bottom:0;flex:none;margin-bottom:calc(var(--wm) * .02)}
@media (max-width:860px){
.hero__heading--wordmark{gap:8px}
/* Pe mobil textul de hero sta in treimea de sus, exact unde gradientul de
desktop e cel mai transparent (15%). Il inchidem in banda aceea, altfel
titlul cade sub pragul de contrast pe imaginile luminoase. */
.hero__scrim{background:linear-gradient(180deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.50) 38%,rgba(0,0,0,.32) 62%,rgba(0,0,0,.62) 100%)}
.progress{padding-block:48px}
.progress__lead-shot{margin-top:26px;border-radius:10px}
.progress__lead-shot img{aspect-ratio:16/9}
.progress__grid{grid-template-columns:1fr;gap:12px;margin-top:12px}
.progress__figure{border-radius:10px}
.progress__caption{left:12px;bottom:10px;font-size:10px}
.progress__lead-shot .progress__caption{left:12px;bottom:10px;font-size:10px}
.band-media{margin-top:32px;border-radius:10px}
.band-media img{aspect-ratio:16/9}
.band-media__caption{left:12px;bottom:10px;font-size:10px}
.qa{margin-top:28px}
.qa__q{font-size:18px;gap:18px;padding:20px 0}
.qa__a{padding-bottom:20px;font-size:15px}
.hero--page:has(.hero__rail) .hero__inner{padding-block:132px 30px}
.hero--page:has(.hero__rail) .hero__intro{margin-bottom:34px}
.hero__rail{grid-template-columns:1fr 1fr;gap:18px 20px;padding-top:16px}
.hero__rail-item:nth-child(n+3){grid-column:1 / -1}
.hero__rail-k{font-size:10px}
.hero__rail-v{font-size:16px}
/* vertical rhythm read off the reference's live mobile build: sections run
around 48-56px, not the 110-130px the desktop uses */
.about{padding-block:56px 0}
.about__head{gap:26px}
.about__intro{gap:20px}
.about__meta{padding-top:0;flex-wrap:wrap;gap:14px 18px}
.about__rule{width:70px}
.about__images{margin-top:40px;padding-bottom:56px}
.about__figure{width:56vw}
.reel__figure{width:74vw}
.reel__track,.reel__group{gap:12px}
.reel__cap{left:12px;bottom:10px;font-size:10px}
.services{padding-block:0 56px}
.services__head{gap:22px}
.services__intro{gap:20px}
.services__body{margin-top:32px;gap:30px}
.services__item{padding-block:12px;gap:22px}
.services__leads{margin-top:18px}
.projects{padding-block:48px}
.projects__heading{align-items:center;text-align:center;gap:18px;margin-bottom:26px}
.projects__heading .eyebrow{align-self:center}
.projects__title{max-width:none}
.success{padding-block:48px}
.success__head{gap:20px}
.success__stats{grid-template-columns:1fr;gap:30px;margin-top:38px}
.success__stat-text{max-width:none;margin-top:10px}
.success__figure{margin-top:34px;height:220px}
.blog{padding-block:48px}
.blog__head{gap:18px}
.blog__grid{margin-top:36px}
.cta__inner{padding-block:64px}
.cta__content{gap:26px}
.cta__heading{gap:18px}
.footer{padding-top:56px}
.footer__brokers{margin-top:40px}
.footer__legal{margin-top:36px}
.footer__wordmark{margin-top:28px}
.section{padding-block:56px}
.section--tight{padding-block:48px}
.section__head{gap:18px}
.tiles,.route-steps{margin-top:34px}
.split{margin-top:34px}
.plan{margin-top:30px}
/* the lead paragraphs are absolutely positioned, so on a phone they used to
run underneath the list below them */
.services--reasons{padding-block:56px}
/* long labels wrap onto a second line instead of being clipped */
.btn:has(.btn__icon):has(.btn__label){white-space:normal;padding-block:10px}
.btn:has(.btn__icon) .btn__label{line-height:1.2}
/* carousel keeps the page gutter on both ends */
.blog__grid{scroll-padding-inline:var(--pad)}
.blog__grid::after{content:"";flex:0 0 4px}
/* footer sitemap: groups need air between them to read as groups */
.footer__inner{gap:38px 20px}
.footer__column{gap:16px}
.footer__column-list{gap:12px}
.footer__column-title{padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.16)}
/* long labels stay on one line at 13px instead of ballooning to two rows */
.btn{font-size:13px}
.btn:has(.btn__icon):has(.btn__label){white-space:normal;padding-block:6px}
/* spec tables stack instead of scrolling off the right edge */
.spec-wrap{overflow:visible}
.spec{min-width:0;margin-top:26px}
.spec thead{display:none}
.spec,.spec tbody,.spec tr,.spec td,.spec tbody th{display:block;width:auto}
.spec tr{padding:16px 0;border-bottom:1px solid var(--line)}
.spec tr:first-child{border-top:1px solid var(--line)}
.spec td,.spec tbody th{border:0;padding:1px 0}
.spec td.k,.spec tbody th.k{font-size:19px;letter-spacing:-.01em;white-space:normal}
.spec td.k + td,.spec tbody th.k + td{margin-top:4px}
.section--dark .spec tr{border-color:rgba(255,255,255,.16)}
.section--dark .spec tr:first-child{border-top-color:rgba(255,255,255,.16)}
.spec--lots td.s{width:auto}
.spec--lots th.k{font-size:19px}
.spec--lots td.s{margin-top:8px}
.figures{grid-template-columns:1fr 1fr;margin-top:34px}
.figure{padding:20px 16px 2px 0;gap:8px}
.figure:not(:first-child){padding-left:16px}
.figure:nth-child(odd){border-left:0;padding-left:0}
.figure:nth-child(n+3){border-top:1px solid var(--line)}
.section--dark .figure:nth-child(n+3){border-top-color:rgba(255,255,255,.16)}
.figure__value{font-size:38px;line-height:1.05;letter-spacing:-.025em}
.figure__suffix{font-size:18px}
.figure__label{font-size:14px;line-height:1.35}
/* Edge / Echo hero holds its shape on a phone */
.hero--page:has(.hero__wordmark){--wm:35vw}
.hero__foot--wordmark{flex-direction:column-reverse;align-items:flex-start;justify-content:flex-end;gap:5vw}
.hero__foot--wordmark .hero__stats{margin-bottom:0}
.hero__foot--wordmark .hero__stats{gap:32px}
.hero--page:has(.hero__wordmark) .hero__inner{padding-block:116px 0}
.hero__wordmark{translate:0 0;line-height:.9;padding-bottom:0;margin-bottom:calc(var(--wm) * -.09 - 4px)}
}
/* ============ in-progress placeholder ============ */
.wip{min-height:62svh;display:flex;align-items:center;padding-block:110px}
.wip__inner{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.wip__title{max-width:16ch}
.wip__note{color:var(--muted);max-width:22ch}
.wip__body{color:var(--ink-soft);max-width:56ch}
.wip .btn-row{margin-top:14px}
/* ============ line breaking ============
balance keeps headings from dropping a single word onto the last line;
pretty does the same for body copy without re-flowing the whole block. */
h1,h2,h3,.hero__title,.blog-card__title,.project-card__title,.wip__title{text-wrap:balance}
p,dd,li,figcaption{text-wrap:pretty}
/* =====================================================================
V3 - 2026-09-11 revision (feedback round on V2)
===================================================================== */
/* ============ footer: Capital City first ============ */
.footer__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.footer__partners{max-width:var(--maxw);margin:64px auto 0;padding-inline:var(--pad);padding-top:28px;border-top:1px solid rgba(255,255,255,.14)}
.footer__partners-line{display:flex;flex-wrap:wrap;align-items:flex-end;gap:22px 64px;margin:0}
.footer__partner{display:flex;flex-direction:column;gap:14px}
/* logourile albe: inaltimea vine din $CC_PARTNERS (echilibrare optica intre ele); aliniate pe centrul unui rand de 34px */
.footer__partner-name:has(.footer__partner-logo){display:flex;align-items:center;height:34px}
.footer__partner-logo{display:block;width:auto;max-width:none;opacity:.92;transition:opacity .25s ease}
a.footer__partner-name:hover .footer__partner-logo{opacity:1}
a.footer__partner-name:has(.footer__partner-logo):hover{text-decoration:none}
.footer__partner-role{color:rgba(255,255,255,.45);font-size:11px}
.footer__partner-name{font-size:22px;letter-spacing:-.02em;color:#fff}
a.footer__partner-name:hover{text-decoration:underline;text-underline-offset:4px}
.footer__legal{grid-template-columns:1fr}
.footer__copy{color:rgba(255,255,255,.5);margin:0}
.footer__disclaimer{color:rgba(255,255,255,.45)}
.footer__disclaimer summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font-size:11px;color:rgba(255,255,255,.5)}
.footer__disclaimer summary::-webkit-details-marker{display:none}
.footer__disclaimer summary::before{content:"+";font-family:var(--mono);width:14px}
.footer__disclaimer[open] summary::before{content:"-"}
.footer__disclaimer .footer__legal-text{margin-top:12px;max-width:110ch}
/* ============ forms ============ */
.lease__context{margin-top:12px;color:var(--ink);padding:9px 12px;border-radius:8px;background:var(--cream-pill);display:inline-block}
.lease__field select{font:inherit;font-size:15px;color:var(--ink);background:var(--cream);border:1px solid transparent;border-radius:9px;padding:11px 13px;width:100%;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.lease__field select:focus{outline:none;border-color:var(--ink);background-color:#fff}
/* ============ video band (Arena Effect) ============ */
.vband{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:var(--dark)}
.vband__bg{position:absolute;inset:0;z-index:-1}
.vband__bg video,.vband__bg img{width:100%;height:100%;object-fit:cover}
.vband__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.25) 50%,rgba(0,0,0,.75) 100%)}
.vband__inner{padding-block:140px 56px;min-height:min(88svh,820px);display:flex;flex-direction:column;justify-content:flex-end;gap:48px}
.vband__head{display:flex;flex-direction:column;align-items:flex-start;gap:22px;max-width:760px}
.vband__lead{color:rgba(255,255,255,.8);max-width:52ch}
.vband .figures{border-top-color:rgba(255,255,255,.22)}
.vband .figure{border-left-color:rgba(255,255,255,.22)}
.vband .figure__label{color:rgba(255,255,255,.72)}
.vband .figure__suffix{color:rgba(255,255,255,.55)}
.vband--tall .vband__inner{min-height:min(100svh,900px)}
/* ============ inventory cards (Leasing) ============ */
.inventory{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:56px}
.inv{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;min-height:460px;padding:28px;border-radius:16px;overflow:hidden;color:#fff;isolation:isolate}
.inv__media{position:absolute;inset:0;z-index:-1}
.inv__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.inv:hover .inv__media img{transform:scale(1.04)}
.inv__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.72) 100%)}
.inv__kicker{color:rgba(255,255,255,.75)}
.inv__title{max-width:12ch}
.inv__sf{display:flex;align-items:flex-start;gap:5px;font-size:40px;letter-spacing:-.03em;line-height:1}
.inv__unit{font-size:15px;line-height:1;letter-spacing:.02em;vertical-align:baseline;margin-top:3px}
.inv__use{color:rgba(255,255,255,.8);max-width:36ch}
.inv__link{position:absolute;inset:0;z-index:1}
.inv .btn-row{position:relative;z-index:2;margin-top:6px}
/* Leasing: titluri pe doua randuri (rupte cu
, fara cuvinte orfane) si o umbra mai
densa sub text, crescuta treptat de la jumatatea cardului. Plaza foloseste .inv neschimbat. */
.inventory--lease .inv__title{max-width:none;text-wrap:wrap}
.inventory--lease .inv__media::after{background:linear-gradient(180deg,rgba(0,0,0,0) 18%,rgba(0,0,0,.36) 42%,rgba(0,0,0,.66) 68%,rgba(0,0,0,.85) 100%)}
.inventory--lease .inv__kicker{color:rgba(255,255,255,.85)}
.inventory--lease .inv__use{color:rgba(255,255,255,.9)}
/* Leasing „Beyond event night": cardurile din inc/dayparts.php cu text de sustinere sub titlu.
Umbra mai densa jos, ca textul mic sa se citeasca. Echo pastreaza cardurile fara text. */
.dayparts--leasing .blog-card__scrim{background:linear-gradient(180deg,rgba(0,0,0,.14) 0%,rgba(0,0,0,.08) 34%,rgba(0,0,0,.5) 62%,rgba(0,0,0,.84) 100%)}
.blog-card__body{display:flex;flex-direction:column;gap:10px}
.blog-card__text{margin:0;max-width:34ch;color:rgba(255,255,255,.9);text-wrap:pretty}
@media (max-width:1100px){ .dayparts--leasing .blog-card__title{font-size:30px} }
/* ============ pathways: show me the space / show me the market ============ */
.pathways{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:56px}
.pathway{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:40px;border-radius:16px;background:var(--cream);color:var(--ink);min-height:300px;justify-content:space-between}
.pathway--dark{background:var(--dark);color:#fff}
.pathway__body{display:flex;flex-direction:column;gap:14px}
.pathway__q{color:var(--muted)}
.pathway--dark .pathway__q{color:rgba(255,255,255,.55)}
.pathway__text{color:var(--ink-soft);max-width:40ch}
.pathway--dark .pathway__text{color:rgba(255,255,255,.72)}
/* ============ compact tiles: two-up ============ */
.tiles--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tiles--4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* ============ photo strip (real photos, captioned) ============ */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.strip--2{grid-template-columns:repeat(2,1fr)}
.strip__figure{position:relative;margin:0;border-radius:12px;overflow:hidden;background:var(--line)}
.strip__figure img{display:block;width:100%;height:100%;aspect-ratio:16/10;object-fit:cover}
.strip__figure--tall img{aspect-ratio:4/5}
.strip__cap{position:absolute;left:14px;bottom:12px;z-index:1;font-size:11px;letter-spacing:.12em;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.65)}
/* ============ infographics ============ */
.viz{margin-top:48px;font-family:var(--sans)}
.viz__title{margin-bottom:22px;color:var(--muted)}
.viz__source{margin-top:18px;max-width:80ch}
.viz__svg{display:block;width:100%;height:auto}
.viz__svg text{font-family:var(--sans);fill:currentColor}
/* bars */
.viz__bars{display:flex;flex-direction:column;gap:18px}
.viz__bar-row{display:grid;grid-template-columns:minmax(120px,.35fr) minmax(0,1fr) auto;align-items:center;gap:18px}
.viz__bar-label{color:var(--ink-soft)}
.viz__bar-track{display:block;height:44px;background:var(--cream-pill);border-radius:8px;overflow:hidden}
.viz__bar{display:block;height:100%;width:var(--w,0%);background:var(--muted);border-radius:8px;transform-origin:left;transform:scaleX(0);transition:transform 1.2s cubic-bezier(.2,.6,.2,1) .2s}
.viz__bar--lead{background:var(--ink)}
.is-in .viz__bar,.viz.is-in .viz__bar{transform:scaleX(1)}
.viz__bar-value{font-size:24px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;min-width:5.5ch;text-align:right}
.viz__callout{margin-top:22px;max-width:52ch;color:var(--ink-soft)}
.viz__callout b{color:var(--ink);font-weight:500}
.section--dark .viz__bar-label,.section--dark .viz__callout{color:rgba(255,255,255,.72)}
.section--dark .viz__bar-track{background:rgba(255,255,255,.12)}
.section--dark .viz__bar{background:rgba(255,255,255,.45)}
.section--dark .viz__bar--lead{background:#fff}
.section--dark .viz__callout b{color:#fff}
/* demand rings */
.viz--demand{max-width:860px;margin-inline:auto}
/* pe telefon diagrama are ~300px: textele din viewBox (800) ajungeau la 5-6px. Mai mari,
fara randul secundar; SVG-ul poate depasi putin viewBox-ul ca sa nu taie etichetele lungi. */
@media (max-width:600px){
.viz--demand .viz__svg{overflow:visible}
.viz--demand .viz__node-label{font-size:25px}
.viz--demand .viz__node-sub{display:none}
.viz--demand .viz__ring-label{font-size:17px}
.viz--demand .viz__svg .viz__core-label{font-size:20px}
}
.viz__ring{fill:none;stroke:currentColor;stroke-opacity:.18;stroke-width:1}
.viz__ring-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;fill-opacity:.55}
.viz__core{fill:currentColor}
.viz__svg .viz__core-label{font-family:var(--mono);font-size:13px;letter-spacing:.1em;fill:var(--white)}
.section--dark .viz__svg .viz__core-label{fill:var(--dark)}
.viz__spoke{stroke:currentColor;stroke-opacity:.25;stroke-width:1}
.viz__node{fill:currentColor}
.viz__node-label{font-size:16px;font-weight:500;letter-spacing:-.01em}
.viz__node-sub{font-size:12.5px;fill-opacity:.6}
/* plaza diagram */
/* day strip */
.viz--day{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;border-top:1px solid var(--line);padding:0;margin-top:48px}
.viz__day{display:flex;flex-direction:column;gap:10px;padding:22px 20px 4px 0;border-left:1px solid var(--line)}
.viz__day:first-child{border-left:0}
.viz__day:not(:first-child){padding-left:20px}
.viz__day-n{font-family:var(--mono);font-size:11px;color:var(--muted)}
.viz__day-k{color:var(--ink)}
.viz__day-v{color:var(--ink-soft);font-size:15px}
.section--dark .viz--day{border-top-color:rgba(255,255,255,.18)}
.section--dark .viz__day{border-left-color:rgba(255,255,255,.18)}
.section--dark .viz__day-k{color:#fff}
.section--dark .viz__day-v{color:rgba(255,255,255,.66)}
.section--dark .viz__day-n{color:rgba(255,255,255,.45)}
/* flow over the plan */
.viz__plan{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff}
.viz__plan img{display:block;width:100%;height:auto;opacity:.55}
.viz__overlay{position:absolute;inset:0;width:100%;height:100%;color:var(--ink)}
.viz__path{fill:none;stroke-width:5;stroke-linecap:round;opacity:.9}
.viz__path--arena{stroke:#B8432E}
.viz__path--walk{stroke:#3F6B33}
.viz__path--arrive{stroke:#1F4E79}
.viz__pin circle{fill:#fff;stroke:currentColor;stroke-width:2}
.viz__pin text{font-size:20px;font-weight:500;paint-order:stroke;stroke:#fff;stroke-width:6px;stroke-linejoin:round}
.viz__pin--park circle{stroke:#1F4E79}
.viz__pin--plaza circle{fill:currentColor}
.viz__legend{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:16px;font-size:14px;color:var(--ink-soft)}
.viz__swatch{display:inline-block;width:22px;height:5px;border-radius:3px;margin-right:9px;vertical-align:middle}
.viz__swatch--arena{background:#B8432E}
.viz__swatch--walk{background:#3F6B33}
.viz__swatch--arrive{background:#1F4E79}
/* walk rows */
.viz--walk{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.viz__walk-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(60px,.6fr) minmax(0,1fr);align-items:center;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
.viz__walk-from{color:var(--ink)}
.viz__walk-line{display:block;height:1px;background:currentColor;opacity:.35;position:relative}
.viz__walk-line::after{content:"";position:absolute;right:-1px;top:-4px;width:9px;height:9px;border-radius:50%;background:currentColor;opacity:1}
.viz__walk-to{display:flex;flex-direction:column;gap:3px}
.viz__walk-to b{font-weight:500;font-size:20px;letter-spacing:-.015em}
.viz__walk-to small{color:var(--muted);font-size:13px}
.section--dark .viz--walk,.section--dark .viz__walk-row{border-color:rgba(255,255,255,.18)}
.section--dark .viz__walk-from{color:#fff}
.section--dark .viz__walk-to small{color:rgba(255,255,255,.55)}
/* access modes */
.viz--access{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.viz__mode{display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.viz__mode .section-label{opacity:.6}
.viz__mode .t-body-tight{opacity:.75}
/* ============ navigable district ============ */
.district{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:28px;margin-top:48px;align-items:start}
.district__stage{position:relative;aspect-ratio:2706/1522;border-radius:16px;overflow:hidden;background:#ECEAE4;isolation:isolate}
.district__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.district__img.is-active{opacity:1}
.district__marker{position:absolute;width:5.5%;aspect-ratio:1;border-radius:50%;border:2px solid var(--ink);translate:-50% -50%;box-shadow:0 0 0 6px rgba(255,255,255,.55);pointer-events:none}
.district__marker::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid var(--ink);opacity:.5;animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.4);opacity:0}}
.district__spot{position:absolute;translate:-50% -50%;display:flex;align-items:center;gap:8px;padding:0;color:var(--ink)}
.district__spot-dot{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);border:1.5px solid var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.04em;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:background .25s ease,color .25s ease,transform .25s ease}
.district__spot-label{position:absolute;left:calc(100% + 10px);top:50%;translate:0 -50%;white-space:nowrap;background:var(--ink);color:#fff;font-size:12px;padding:6px 10px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .2s ease}
.district__spot:hover .district__spot-label,.district__spot:focus-visible .district__spot-label,.district__spot.is-active .district__spot-label{opacity:1}
.district__spot:hover .district__spot-dot,.district__spot.is-active .district__spot-dot{background:var(--ink);color:#fff;transform:scale(1.08)}
.district__spot:focus-visible{outline:none}
.district__spot:focus-visible .district__spot-dot{outline:2px solid var(--ink);outline-offset:3px}
.district__hint{position:absolute;left:18px;bottom:16px;background:rgba(255,255,255,.9);padding:9px 12px;border-radius:8px;color:var(--ink);font-size:11px;margin:0}
.district__side{display:flex;flex-direction:column;gap:22px}
.district__list{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.district__item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:12px 14px;border-radius:10px;border:1px solid var(--line);color:var(--ink);transition:background .2s ease,border-color .2s ease}
.district__item:hover,.district__item.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.district__item.is-active .tag,.district__item:hover .tag{color:rgba(255,255,255,.7)}
.district__item-label{font-size:15px;letter-spacing:-.01em}
.district__panels{position:relative;padding:26px;border-radius:14px;background:var(--cream);min-height:280px}
.district__panel{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.district__kicker{color:var(--muted)}
.district__lead{color:var(--ink-soft);max-width:44ch}
.district__meta{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;width:100%;padding-top:14px;border-top:1px solid var(--line)}
.district__meta dt{color:var(--muted);font-size:11px}
.district__meta dd{margin-top:4px;color:var(--ink)}
.section--dark .district__stage{background:#1a1a1a}
.section--dark .district__item{border-color:rgba(255,255,255,.2);color:#fff}
.section--dark .district__item:hover,.section--dark .district__item.is-active{background:#fff;border-color:#fff;color:var(--ink)}
.section--dark .district__panels{background:rgba(255,255,255,.06)}
.section--dark .district__kicker,.section--dark .district__meta dt{color:rgba(255,255,255,.55)}
.section--dark .district__lead{color:rgba(255,255,255,.75)}
.section--dark .district__meta{border-top-color:rgba(255,255,255,.16)}
.section--dark .district__meta dd{color:#fff}
/* ============ Phase One suite plan ============ */
.plan-x{margin-top:48px}
.plan-x__filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.plan-x__filter{padding:10px 16px;border-radius:999px;border:1px solid var(--line);font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);transition:background .2s ease,color .2s ease,border-color .2s ease}
.plan-x__filter:hover,.plan-x__filter.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.plan-x__body{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(280px,.8fr);gap:24px;align-items:start}
.plan-x__frame{position:relative;z-index:0;isolation:isolate;aspect-ratio:1196/690;overflow:hidden;border-radius:14px;border:1px solid var(--line);background:#fff}
.plan-x__stage{position:absolute;left:0;top:0;width:100%;height:100%}
.plan-x__img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block}
.plan-x__spot{position:absolute;margin:0;padding:0;cursor:pointer;color:var(--ink);background:none;border:0}
.plan-x__spot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.plan-x__spot path,.plan-x__spot circle{fill:#97A97F;fill-opacity:.35;stroke:#5E7248;stroke-width:1.5;transition:fill-opacity .25s ease,stroke-width .25s ease}
.plan-x__spot:hover path,.plan-x__spot:hover circle,.plan-x__spot:focus-visible path,.plan-x__spot:focus-visible circle{fill-opacity:.6}
.plan-x__spot.is-active path,.plan-x__spot.is-active circle{fill:#5E7248;fill-opacity:.85;stroke:#2F3D22;stroke-width:2}
.plan-x__spot--kiosk path,.plan-x__spot--kiosk circle{fill:#D9A441;fill-opacity:.4;stroke:#9A6E1C}
.plan-x__spot--kiosk.is-active circle{fill:#9A6E1C;fill-opacity:.9;stroke:#5C4110}
.plan-x__spot--feature circle{fill:#8f8b85;fill-opacity:.18;stroke:#8f8b85;stroke-dasharray:3 3}
.plan-x__spot--feature.is-active circle{fill-opacity:.4}
.plan-x__spot.is-muted{cursor:pointer}
.plan-x__spot.is-muted path,.plan-x__spot.is-muted circle{fill:#bbb;fill-opacity:.25;stroke:#999}
.plan-x__spot.is-muted .plan-x__tag{opacity:.55}
.plan-x__spot:focus-visible{outline:none}
.plan-x__spot:focus-visible path,.plan-x__spot:focus-visible circle{stroke:var(--ink);stroke-width:3}
.plan-x__tag{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:1px;pointer-events:none;white-space:nowrap;padding:2px 5px;border-radius:5px;background:rgba(255,255,255,.88);box-shadow:0 1px 6px rgba(0,0,0,.12)}
.plan-x__spot--kiosk .plan-x__tag,.plan-x__spot--feature .plan-x__tag{top:100%;translate:-50% 4px;font-size:10px}
.plan-x__spot--feature .plan-x__tag{background:rgba(255,255,255,.7)}
.plan-x__tagid{font-weight:600;font-size:clamp(9px,1.05vw,14px);letter-spacing:-.01em;line-height:1.1;color:var(--ink)}
.plan-x__tagsf{font-style:normal;font-size:clamp(7px,.8vw,11px);color:var(--ink-soft);line-height:1.1}
.plan-x__plus{font-style:normal;color:#5E7248;margin-left:2px}
.plan-x__spot.is-active .plan-x__tagid{color:#fff}
.plan-x__spot.is-active .plan-x__tagsf{color:rgba(255,255,255,.85)}
.plan-x__spot.is-active .plan-x__tag{background:rgba(47,61,34,.92)}
.plan-x__spot.is-active .plan-x__plus{color:#fff}
.plan-x__card{position:sticky;top:20px;border-radius:14px;background:var(--cream);padding:26px;display:flex;flex-direction:column;gap:12px;min-height:320px}
.plan-x__hint{display:flex;flex-direction:column;gap:14px;color:var(--ink-soft)}
.plan-x__hint .section-label{color:var(--muted)}
.plan-x__legend{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--ink-soft);margin-top:6px}
.plan-x__key{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:9px;vertical-align:-2px;border:1.5px solid #5E7248;background:rgba(151,169,127,.45)}
.plan-x__key--kiosk{border-radius:50%;border-color:#9A6E1C;background:rgba(217,164,65,.5)}
.plan-x__key--feature{border-radius:50%;border-color:#8f8b85;border-style:dashed;background:rgba(143,139,133,.2)}
.plan-x__detail{display:flex;flex-direction:column;gap:10px}
.plan-x__lot{color:var(--muted)}
.plan-x__sf{letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.plan-x__breakdown,.plan-x__extra,.plan-x__note{color:var(--ink-soft)}
.plan-x__meta{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--line)}
.plan-x__meta dt{color:var(--muted);font-size:11px}
.plan-x__meta dd{margin-top:4px;color:var(--ink-soft)}
.plan-x__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:8px}
.plan-x__clear{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.section--dark .plan-x__card{background:rgba(255,255,255,.06)}
.section--dark .plan-x__hint,.section--dark .plan-x__breakdown,.section--dark .plan-x__extra,.section--dark .plan-x__note,.section--dark .plan-x__meta dd,.section--dark .plan-x__legend{color:rgba(255,255,255,.75)}
.section--dark .plan-x__meta{border-top-color:rgba(255,255,255,.16)}
.section--dark .plan-x__filter{border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.75)}
.section--dark .plan-x__filter:hover,.section--dark .plan-x__filter.is-active{background:#fff;border-color:#fff;color:var(--ink)}
.section--dark .plan-x__frame{border-color:rgba(255,255,255,.14)}
/* Phones: frame one lot. --fx/--fy/--fw/--fh are that lot's bounding box in
the 1196x690 space, set by site.js, so the suites stay touch-sized. */
@media (max-width:809px){
.plan-x__frame{aspect-ratio:var(--fw,1196) / var(--fh,690)}
.plan-x__stage{width:calc(100% * 1196 / var(--fw,1196));height:calc(100% * 690 / var(--fh,690));left:calc(-100% * var(--fx,0) / var(--fw,1196));top:calc(-100% * var(--fy,0) / var(--fh,690))}
.plan-x__tagid{font-size:clamp(11px,3vw,15px)}
.plan-x__tagsf{font-size:clamp(10px,2.6vw,13px)}
/* Ambele loturi pe telefon (Master Plan, Available Spaces): planul intreg in 350px
inghesuia etichetele una peste alta. Il tinem la 820px si il derulam lateral in
cadru; site.js il centreaza la incarcare. */
.plan-x[data-plan-mode="all"] .plan-x__frame{aspect-ratio:auto;height:calc(820px * 690 / 1196);
overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}
.plan-x[data-plan-mode="all"] .plan-x__frame::-webkit-scrollbar{display:none}
.plan-x[data-plan-mode="all"] .plan-x__stage{width:820px;height:100%;left:0;top:0}
/* A5 e ingusta si inalta: pe telefon eticheta ei urca in partea de sus a formei si pierde
SF-ul, altfel o acopera eticheta lui A6 (suprafata apare oricum in fisa suitei) */
.plan-x:not([data-plan-mode="B"]) [data-plan-spot="A5"] .plan-x__tagsf{display:none}
.plan-x:not([data-plan-mode="B"]) [data-plan-spot="A5"] .plan-x__tag{top:24%}
}
/* ============ misc ============ */
.section__head--wide{max-width:none}
.lead-quiet{color:var(--ink-soft)}
.section--dark .lead-quiet{color:rgba(255,255,255,.72)}
.mt-0{margin-top:0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:56px}
.stack{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.quiet-note{color:var(--muted);font-size:13px}
.hero--video .hero__bg-video{filter:saturate(1.05)}
@media (max-width:1100px){
.district{grid-template-columns:1fr}
.district__list{grid-template-columns:1fr 1fr 1fr}
.plan-x__body{grid-template-columns:1fr}
.plan-x__card{position:static}
.inventory,.pathways,.grid-2,.viz--access{grid-template-columns:1fr}
.viz--day{grid-template-columns:repeat(3,minmax(0,1fr))}
.viz__day:nth-child(4){border-left:0;padding-left:0}
.viz__day:nth-child(n+4){border-top:1px solid var(--line);margin-top:0}
.tiles--4{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
.footer__partners{margin-top:40px}
.footer__partners-line{gap:20px 32px}
.footer__partner-logo{transform:scale(.85);transform-origin:left center}
.footer__partner-name{font-size:18px}
.vband__inner{padding-block:100px 40px;min-height:70svh;gap:30px}
.inv{min-height:360px;padding:20px}
.inv__sf{font-size:32px}
.pathway{padding:26px;min-height:0;gap:22px}
.district__list{grid-template-columns:1fr 1fr}
.district__spot-dot{width:28px;height:28px;font-size:10px}
.district__spot-label{display:none}
.district__panels{padding:20px}
.strip{grid-template-columns:1fr;gap:12px}
.viz--day{grid-template-columns:1fr 1fr}
.viz__day:nth-child(4){border-left:1px solid var(--line);padding-left:20px}
.viz__day:nth-child(odd){border-left:0;padding-left:0}
.viz__day:nth-child(n+3){border-top:1px solid var(--line)}
.viz__bar-row{grid-template-columns:1fr;gap:6px}
.viz__bar-value{text-align:left;font-size:20px}
.viz__bar-track{height:32px}
.viz__walk-row{grid-template-columns:1fr;gap:8px}
.viz__walk-line{display:none}
.viz__pin text{font-size:30px}
.viz__path{stroke-width:8}
.plan-x__filters{margin-bottom:12px}
.plan-x__card{padding:20px;min-height:0}
.tiles--4{grid-template-columns:1fr}
}
/* ============ Toyota Arena calendar (/events) ============
Image-led cards, date badge over the artwork. 3-up, 2-up, 1-up. */
.evlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px;margin-top:48px;padding:0}
.ev{display:flex;flex-direction:column;gap:14px;min-width:0}
.ev__media{position:relative;display:block;aspect-ratio:864/540;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.ev__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.ev:hover .ev__media img{transform:scale(1.04)}
.ev__date{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:64px;height:64px;border-radius:12px;background:rgba(12,12,12,.72);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;line-height:1;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.ev__date b{font-size:26px;font-weight:400;letter-spacing:-.03em}
.ev__date small{margin-top:4px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.ev__body{display:flex;flex-direction:column;gap:5px;min-width:0}
.ev__type{color:rgba(255,255,255,.5);font-size:11px}
.ev__title{color:#fff;text-decoration:none}
.ev__title:hover{text-decoration:underline;text-underline-offset:4px}
.ev__tag{color:rgba(255,255,255,.85)}
.ev__meta{color:rgba(255,255,255,.55)}
.ev__tickets{align-self:flex-start;padding:12px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.35);color:#fff;white-space:nowrap;transition:background .2s ease,color .2s ease}
.ev__tickets:hover{background:#fff;color:var(--ink)}
@media (max-width:1100px){
.evlist{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}
}
@media (max-width:640px){
.evlist{grid-template-columns:1fr;gap:28px}
.ev__date{width:58px;height:58px;top:10px;right:10px}
.ev__date b{font-size:23px}
}
/* ============ 2026-09-12: static plan markers, tall hero ============ */
.plan-x__spot--static{pointer-events:none;cursor:default}
.plan-x__spot--static circle{fill:#8f8b85;fill-opacity:.14;stroke:#8f8b85;stroke-dasharray:3 3}
.plan-x__spot--static .plan-x__tag{background:rgba(255,255,255,.72);box-shadow:none}
.plan-x__spot--static .plan-x__tagid{color:var(--muted);font-weight:500}
.hero--page.hero--tall{min-height:90svh}
/* ============ 2026-09-12: hero cards compact on mobile ============ */
/* The two Phase One cards under the hero stats used to stack as two tall
4:3 tiles and ate most of the first screen. On phones they become compact
rows instead: a thumbnail on the left, text next to it, arrow last.
`display:contents` on the footer hoists text + arrow into the card's own
flex row so the three parts can be ordered independently. */
@media (max-width:860px){
.hero__cards{flex-direction:column;width:100%;max-width:none;gap:10px}
.hero__card{width:100%;flex:none}
.hero__card .project-card--sm{display:flex;align-items:center;gap:12px;padding:10px}
.hero__card .project-card--sm .project-card__footer{display:contents}
.hero__card .project-card--sm .project-card__text{order:2;flex:1 1 auto;min-width:0}
.hero__card .project-card--sm .project-card__media{order:1;flex:none;width:clamp(104px,30%,132px);aspect-ratio:4/3;border-radius:8px}
.hero__card .project-card--sm .project-card__arrow{order:3;width:30px;height:30px}
.hero__card .project-card--sm .project-card__title{font-size:17px}
.hero__card .project-card--sm .project-card__location{margin-top:2px;font-size:12px}
/* the hero no longer needs the extra height the tall cards required */
.hero:not(.hero--page){min-height:112vh}
}
/* ============ 2026-09-12: lot renderings in the district panel and suite card ============ */
.district__panel-img{width:100%;aspect-ratio:16/10;border-radius:10px;overflow:hidden;margin:0 0 4px;background:var(--line)}
.district__panel-img img{width:100%;height:100%;object-fit:cover;display:block}
.plan-x__render{margin:0 0 6px;border-radius:10px;overflow:hidden;background:var(--line)}
.plan-x__render img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.plan-x__render figcaption{padding:6px 0 0}
/* ============ 2026-09-12: master plan map hero (.mpx) ============ */
/* Harta din hero-ul /masterplan/. Imaginea NU se schimba la interactiune —
pinii deschid o fisa peste harta. Vezi inc/masterplan-map.php. */
/* Fundal alb. Harta urca sub antet si iese din alb: sus e spalata si neclara,
coboara treptat in clar. Doua straturi ale aceleiasi imagini (unul blurat, mascat
cu un gradient) + o perdea alba peste. Pinii sunt frati cu .mpx__frame, deci NU
intra in blur — raman clari oriunde cad. */
.mpx{position:relative;display:flex;flex-direction:column;overflow:hidden;color:var(--ink);background:#fff;isolation:isolate}
/* .nav-wrap--solid vine cu un gradient crem; aici fundalul e alb */
.mpx .nav-wrap--solid{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.45) 58%,rgba(255,255,255,0) 100%)}
/* Straturi. .mpx__scroll e `position:relative` dar FARA z-index, deci NU face context
de stivuire — asa descendentii lui se stivuiesc direct in .mpx si pot fi asezati
individual fata de antet:
imaginea (.mpx__frame, z auto) ... sub antet, altfel acopera filtrele
antetul (.mpx__inner, z 2)
pinii (z 2, dar mai jos in DOM) ... peste antet, ca sa ramana clicabili
nav (z 20) ... peste pini
fisele (z 60)
Daca .mpx__scroll primeste vreodata z-index, pinii se inchid in contextul lui si
imaginea urca peste filtre — exact regresia de pe 2026-09-12. */
.mpx__inner{position:relative;z-index:2;display:flex;flex-direction:column;padding-block:28px 0}
/* min-width:0 — fara el, `min-width:auto` de flex-item lasa antetul sa creasca pana
la max-content, iar randul de filtre `nowrap` il umfla peste latimea ecranului in
loc sa se gliseze in interiorul lui */
.mpx__head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
width:100%;min-width:0;max-width:760px;margin-inline:auto}
.mpx__eyebrow{color:var(--muted)}
.mpx__title{max-width:18ch;text-wrap:balance;color:var(--ink)}
.mpx__lead{max-width:56ch;color:var(--ink-soft);text-wrap:pretty}
/* scena = exact proportia imaginii, ca procentele pinilor sa cada pe cladiri */
/* pe toata latimea: fara max-width, fara padding de container, fara colturi rotunjite */
/* Stage urcat sub antet: imaginea incepe in spatele lui, nu sub el.
Cat de sus poate urca o da pinul cel mai de sus — acum `lot-l`, la 32.4% din
inaltimea hartii (inainte era `green` la 13%, scos odata cu alinierea la wireframe,
ceea ce a eliberat mult spatiu). Inaltimea hartii e latimea / 1.5, deci 32.4% = 21.6vw.
Constanta NU mai e data de pinul cel mai de sus, ci de lizibilitatea textului:
antetul sta peste harta, deci harta trebuie sa fie inca spalata in alb acolo unde
cad randurile. 140px aseaza baza antetului pe la 53% din degradeu, adica ~82% alb.
(Limita pinului ar permite 59px, dar atunci prea mult din harta intra sub paragraf
si textul devine greu de citit — verificat pe 2026-09-12.)
Masurata, nu dedusa — daca se schimba antetul sau curba degradeului, remasoar-o.
Urcarea mare e si intentia vizuala: partea alba a degradeului se consuma in spatele
titlului, asa ca sub filtre harta e deja citibila, nu spalata.
O valoare fixa in px NU merge: pe ecrane inguste harta e mai scunda si antetul mai
inalt, deci pinii urca peste filtre. Verificat 880 -> 1440.
⚠ Daca se adauga un lot cu hy mai mic decat 32.4, recalculeaza vw-ul de aici. */
.mpx__scroll{position:relative;margin-top:min(0px,calc(140px - 21.6vw))}
.mpx__stage{position:relative;width:100%;aspect-ratio:1536/1024}
.mpx__frame{position:absolute;inset:0;overflow:hidden}
.mpx__map{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* copia blurata, tinuta doar sus printr-o masca; dedesubt ramane cea clara */
.mpx__map--blur{filter:blur(18px);transform:scale(1.06);
-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.92) 9%,rgba(0,0,0,.45) 19%,rgba(0,0,0,.12) 25%,transparent 30%);
mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.92) 9%,rgba(0,0,0,.45) 19%,rgba(0,0,0,.12) 25%,transparent 30%)}
/* Perdeaua alba: opaca sus, dispare spre baza — harta se materializeaza din pagina.
Banda de mijloc e tinuta sus intentionat (.93 la 54%): antetul sta peste harta, iar
ultimul rand din paragraf cade pe la 62% din degradeu la latimi mari. Cu o curba mai
lina acolo textul ajungea pe 63% alb si devenea greu de citit. */
.mpx__fade{position:absolute;left:0;right:0;top:0;height:34%;pointer-events:none;
background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.99) 34%,rgba(255,255,255,.93) 54%,
rgba(255,255,255,.55) 74%,rgba(255,255,255,.15) 89%,transparent 100%)}
/* pini */
.mpx__pin{--thumb:52px;position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:0;
padding:6px;border:0;background:none;cursor:pointer;z-index:2;transition:opacity .3s ease,transform .3s ease}
/* varful: un patrat alb rotit 45°, pe jumatate ascuns sub cerc — asa citeste a pin.
Doar cele doua muchii vizibile primesc contur. */
.mpx__pin::after{content:'';position:absolute;z-index:-1;
left:calc(6px + var(--thumb) / 2);top:calc(6px + var(--thumb) - 4px);
width:15px;height:15px;transform:translate(-50%,-50%) rotate(45deg);
background:#fff;border-right:1px solid rgba(17,17,17,.14);border-bottom:1px solid rgba(17,17,17,.14);
border-radius:0 0 3px 0;transition:border-color .25s ease}
.mpx__pin.is-active::after{border-color:var(--ink);border-width:2px}
.mpx__pin-thumb{display:block;width:var(--thumb);height:var(--thumb);flex:none;border-radius:999px;overflow:hidden;
border:2px solid rgba(255,255,255,.9);background:#1a1a1a;
/* hairline intunecat: inelul alb singur dispare peste zona spalata in alb */
box-shadow:0 0 0 1px rgba(17,17,17,.14),0 10px 24px rgba(17,17,17,.30);
transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.mpx__pin-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* ce e deschis sau se construieste poarta inel plin; fazele viitoare, unul discret */
.mpx__pin--now .mpx__pin-thumb{border-color:#fff;box-shadow:0 0 0 1px rgba(17,17,17,.18),0 12px 28px rgba(17,17,17,.36)}
.mpx__pin-label{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;margin-left:0;
font-size:13px;line-height:1;color:#fff;border-radius:999px;background:rgba(15,15,15,.72);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
transition:max-width .34s cubic-bezier(.2,.6,.2,1),opacity .24s ease,padding .34s ease,margin .34s ease}
.mpx__pin:hover .mpx__pin-thumb,.mpx__pin:focus-visible .mpx__pin-thumb{transform:scale(1.1);border-color:#fff}
.mpx__pin:hover .mpx__pin-label,.mpx__pin:focus-visible .mpx__pin-label{max-width:220px;opacity:1;margin-left:8px;padding:8px 12px}
/* cand fisa e deschisa ea numeste lotul, deci eticheta pinului ar fi un dublaj
care intra sub card */
.mpx__pin.is-active .mpx__pin-label,.mpx__pin.is-active:hover .mpx__pin-label{max-width:0;opacity:0;padding:0}
.mpx__pin.is-active{z-index:4}
.mpx__pin.is-active .mpx__pin-thumb{border-color:#fff;transform:scale(1.14);box-shadow:0 0 0 2px var(--ink),0 14px 32px rgba(17,17,17,.4)}
.mpx__pin[hidden]{display:none}
.mpx__pin:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:999px}
/* fisa care se deschide peste harta */
/* valul din spatele sheet-ului — doar pe telefon (vezi media query) */
.mpx__scrim{display:none}
.mpx__card{position:absolute;z-index:6;width:296px;padding:8px;border-radius:18px;color:var(--ink);
background:rgba(255,255,255,.96);border:1px solid var(--line);
backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
box-shadow:0 26px 60px rgba(17,17,17,.26);animation:mpx-pop .26s cubic-bezier(.2,.7,.3,1) both}
@keyframes mpx-pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.mpx__close{position:absolute;top:16px;right:16px;z-index:2;display:grid;place-items:center;width:28px;height:28px;border-radius:999px;
border:0;background:rgba(17,17,17,.55);color:#fff;cursor:pointer;transition:background .2s ease}
.mpx__close:hover{background:rgba(17,17,17,.8)}
.mpx__card-media{position:relative;margin:0;border-radius:12px;overflow:hidden;aspect-ratio:16/10}
.mpx__card-media img{width:100%;height:100%;object-fit:cover;display:block}
.mpx__card-badge{position:absolute;left:10px;top:10px;padding:5px 10px;border-radius:999px;
background:rgba(255,255,255,.92);color:var(--ink);font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.mpx__card-badge.is-live{background:var(--ink);color:#fff}
.mpx__card-body{padding:14px 10px 10px}
.mpx__card-title{margin:0}
.mpx__card-district{margin:3px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.07em;
text-transform:uppercase;color:var(--muted)}
.mpx__card-lead{margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--ink-soft)}
/* programul lotului, verbatim din wireframe */
.mpx__card-detail{margin:10px 0 0;padding:9px 11px;border-radius:9px;background:rgba(17,17,17,.05);
font-size:12px;line-height:1.45;color:var(--ink)}
.mpx__card-meta{display:flex;flex-wrap:wrap;gap:16px;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.mpx__card-meta div{min-width:0}
.mpx__card-meta dt{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mpx__card-meta dd{margin:4px 0 0;font-size:13px;line-height:1.35}
.mpx__card-cta{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:11px 16px;border-radius:999px;
background:var(--ink);color:#fff;font-size:13px;line-height:1;transition:opacity .2s ease}
.mpx__card-cta:hover{opacity:.85}
.mpx__card-cta svg{width:13px;height:13px}
/* fara JS: fisele raman in flux, ca o grila lizibila sub harta */
.mpx--no-js .mpx__stage{aspect-ratio:auto}
.mpx--no-js .mpx__frame{position:relative;aspect-ratio:1536/1024}
.mpx--no-js .mpx__pin{display:none}
.mpx--no-js .mpx__card{position:relative;width:auto;margin-top:16px;animation:none}
.mpx--no-js .mpx__close{display:none}
@media (max-width:1100px){
.mpx__card{width:272px}
}
@media (max-width:860px){
.mpx__inner{padding-block:14px 0}
.mpx__head{gap:12px}
.mpx__title{font-size:32px}
/* pe telefon harta e fixa la 760px (H=507), deci si urcarea e fixa: 0.324*507 - 23 - 20 */
.mpx__scroll{margin-top:-77px;overflow-x:auto;overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mpx__scroll::-webkit-scrollbar{display:none}
/* harta ramane mare ca pinii sa nu se suprapuna; utilizatorul o gliseaza */
.mpx__stage{width:760px}
/* pe telefon eticheta nu incape langa pin: raman doar bulinele */
.mpx__pin{--thumb:34px}
.mpx__pin-thumb{border-width:1.5px}
.mpx__pin::after{width:11px;height:11px}
.mpx__pin-label{display:none}
/* Pe telefon fisa devine un bottom sheet propriu-zis: aceeasi inaltime indiferent
ce lot s-a atins, lipit de marginea de jos, cu valul lui.
⚠ Valul NU mai e un ::before al cardului. Era `position:fixed;z-index:-1` in
interiorul cardului, iar in ordinea de desenare un descendent cu z-index negativ
cade PESTE fundalul propriu al elementului si SUB continutul lui — adica exact
peste albul cardului. De aici parea cardul gri/transparent. Acum e .mpx__scrim,
element separat, frate cu harta. */
.mpx__scrim{display:block;position:fixed;inset:0;z-index:59;background:rgba(17,17,17,.45)}
.mpx__scrim[hidden]{display:none}
/* .mpx are isolation:isolate, deci fisa fixa (z 60) ramane inchisa in contextul sectiunii, iar
sectiunile de dupa (aerianul cu chevroane, planul) se desenau peste ea. Cat e deschisa fisa,
ridicam toata sectiunea deasupra restului paginii. */
.mpx:has(.mpx__scrim:not([hidden])){z-index:70}
.mpx__card{position:fixed;left:0;right:0;bottom:0;top:auto !important;width:auto;z-index:60;
display:flex;flex-direction:column;
height:44vh;height:44dvh;min-height:320px;max-height:76dvh;
background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;
padding:0;border:0;border-radius:18px 18px 0 0;overflow:hidden;
box-shadow:0 -10px 40px rgba(17,17,17,.3)}
/* manerul de sheet, peste imagine */
.mpx__card::after{content:'';position:absolute;left:50%;top:9px;z-index:3;
width:38px;height:4px;border-radius:999px;background:rgba(255,255,255,.92);
box-shadow:0 0 0 1px rgba(17,17,17,.12);transform:translateX(-50%)}
.mpx__card-media{flex:none;aspect-ratio:auto;height:118px;border-radius:0}
.mpx__card-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
padding:14px 16px 20px}
.mpx__card-lead{margin-top:5px}
.mpx__card-meta{gap:14px;margin-top:12px;padding-top:12px}
.mpx__card-cta{margin-top:14px;padding:10px 14px}
.mpx__close{top:10px;right:12px}
}
@media (prefers-reduced-motion:reduce){
.mpx__card{animation:none}
.mpx__pin,.mpx__pin-dot,.mpx__pin-label{transition:none}
}
/* ============ 2026-09-12: aer sub harta masterplanului ============ */
/* Harta se termina brusc, cu o muchie dreapta pe toata latimea. Sectiunea care o
urmeaza are nevoie de mai mult aer deasupra decat ritmul obisnuit de sectiune,
altfel se lipeste de ea. Selectorul e pe `+`, deci tine si daca se schimba
sectiunea care vine dupa hero. */
.mpx + .section{padding-top:150px}
/* Harta refolosita in mijlocul paginii (/lease/): fara nav deasupra, deci padding de sectiune */
.mpx--embed .mpx__inner{padding-top:30px}
@media (max-width:1100px){ .mpx--embed .mpx__inner{padding-top:20px} }
@media (max-width:860px){ .mpx--embed .mpx__inner{padding-top:12px} }
/* Pe /lease/ harta sta dupa o sectiune crem: fundal si perdea crem in loc de alb */
.mpx--embed{background:var(--cream)}
/* butoanele peste baza hartii (strada de jos); fisele (z 6) si bottom sheet-ul (z 60) raman deasupra */
.mpx__actions{position:absolute;left:0;right:0;bottom:64px;z-index:5;justify-content:center;padding-inline:var(--pad,24px)}
@media (max-width:860px){ .mpx__actions{bottom:20px;gap:8px} }
.mpx--embed .mpx__fade{background:linear-gradient(180deg,#F7F3EC 0%,rgba(247,243,236,.99) 34%,rgba(247,243,236,.93) 54%,
rgba(247,243,236,.55) 74%,rgba(247,243,236,.15) 89%,rgba(247,243,236,0) 100%)}
@media (max-width:1100px){ .mpx + .section{padding-top:104px} }
@media (max-width:860px){ .mpx + .section{padding-top:76px} }
/* ============ 2026-09-12: titlul benzii video, langa linie ============ */
/* In benzile video erau 96px pana la linia figurilor: 48px gap de flex pe .vband__inner
plus 48px margine pe .figures. Sub linie sunt 28px (padding-ul din .figure), deci
deasupra si dedesubtul liniei se citeau complet diferit. Acum sunt 28px si sus:
48px gap de flex - 20px. Marginea negativa e singurul mod de a anula gap-ul parintelui
doar pentru acest copil, fara sa atingem fratii.
Initial regula era limitata cu :has() la benzile fara paragraf (doar homepage); de pe
2026-09-12 se aplica la toate — homepage, Leasing si Toyota Arena — ca spatiul sa fie
acelasi peste tot. */
.vband__head + .figures{margin-top:-20px}
/* pe telefon gap-ul parintelui e 30px, nu 48, iar sub linie sunt 20px, nu 28 */
@media (max-width:860px){
.vband__head + .figures{margin-top:-10px}
}
/* ============ 2026-09-12: cele 4 dovezi de pe /vision/ ============ */
/* Erau doua tipuri de bloc complet diferite — doua carduri foto cu textul peste
imagine (.inv) si doua blocuri fara container (.tile) — si in ordinea 01, 04, 02, 03.
Acum toate patru au aceeasi carcasa, pe fundal crem ca sa se desprinda de sectiunea
alba, iar ordinea e 01-04. Componenta e noua si folosita doar aici: .inv ramane
neatins pentru /lease/ si /experiences/the-plaza/. */
.proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:56px}
.proof__card{display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:18px;
background:var(--cream)}
.proof__figure{margin-bottom:6px;border-radius:12px;overflow:hidden;aspect-ratio:16/10;background:var(--cream-pill)}
.proof__figure img,.proof__figure video{display:block;width:100%;height:100%;object-fit:cover;
transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.proof__card:hover .proof__figure img{transform:scale(1.04)}
.proof__kicker{color:var(--muted)}
.proof__title{max-width:24ch;text-wrap:balance}
.proof__text{color:var(--ink-soft);max-width:46ch}
/* graficele stau acum intr-un card, nu direct in sectiune: marginea lor de sectiune
(48px) ar rupe ritmul, iar pista barelor era crem — invizibila pe card crem */
.proof__card .viz{margin-top:14px}
.proof__card .viz__bar-track{background:#fff}
@media (max-width:1100px){
.proof{gap:20px}
.proof__card{padding:22px}
}
@media (max-width:860px){
.proof{grid-template-columns:1fr;gap:16px;margin-top:34px}
.proof__card{padding:18px;border-radius:14px}
.proof__figure{aspect-ratio:16/9}
}
/* ============ 2026-09-12: harta Plazei (.pmap) ============ */
/* Teancul Plazei sus, mare; sub el un conector; sub el Edge / Arena / Echo pe un rand;
textul sectiunii vine dedesubt, in pagina. Totul in FLUX — versiunea anterioara punea
nodurile pe coordonate absolute si se suprapuneau peste text la anumite latimi. */
.pmap{margin-top:8px;display:flex;flex-direction:column;align-items:center;overflow-x:clip}
.pmap__top{display:flex;flex-direction:column;align-items:center;gap:16px;width:min(100%,460px)}
/* conectorul: porneste din Plaza si coboara spre centrele celor trei coloane */
.pmap__links{display:block;width:100%;max-width:1000px;height:96px;overflow:visible}
.pmap__line{stroke:var(--line);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:2 7;
vector-effect:non-scaling-stroke;
animation:pmap-flow 2.4s linear infinite;animation-delay:calc(var(--i) * .45s)}
/* offset descrescator -> punctele curg dinspre Plaza spre noduri */
@keyframes pmap-flow{from{stroke-dashoffset:18}to{stroke-dashoffset:0}}
/* randul de trei */
/* gap in PROCENTE, nu px: cu 5% coloanele au 30% fiecare, deci centrele lor cad fix la
15% / 50% / 85% din rand la ORICE latime — si acolo coboara si capetele conectorului
(x=135 / 450 / 765 din 900 in viewBox). Cu gap in px fractiile s-ar schimba cu latimea
si liniile ar cadea alaturi de teancuri. */
.pmap__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5%;
width:100%;max-width:1000px}
.pmap__node{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
/* teancul de fotografii */
.pmap__stack{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
-webkit-tap-highlight-color:transparent}
.pmap__cards{position:relative;display:block;width:100%;aspect-ratio:4/3}
.pmap__card{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
border-radius:14px;background:var(--cream-pill);
box-shadow:0 18px 40px rgba(17,17,17,.16),0 2px 6px rgba(17,17,17,.08);
transform-origin:50% 100%;
/* --p: pozitia in pachet, 0 = in fata. JS o rescrie la fiecare click. */
transform:translate(calc(var(--p) * 9px), calc(var(--p) * -7px)) rotate(calc(var(--p) * 2.4deg)) scale(calc(1 - var(--p) * .04));
opacity:clamp(0,calc(3 - var(--p)),1);
z-index:calc(10 - var(--p));
transition:transform .5s cubic-bezier(.2,.7,.3,1),opacity .4s ease}
.pmap__stack:hover .pmap__card{transform:translate(calc(var(--p) * 12px), calc(var(--p) * -10px)) rotate(calc(var(--p) * 3.2deg)) scale(calc(1 - var(--p) * .04))}
.pmap__stack:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:16px}
.pmap__stack--lg .pmap__card{border-radius:16px}
/* etichete */
.pmap__text{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.pmap__title{font-size:clamp(15px,1.25vw,17px);letter-spacing:-.01em;line-height:1.25}
.pmap__text--core .pmap__title{font-size:clamp(20px,2vw,26px)}
.pmap__logo{width:clamp(96px,9vw,124px);height:auto;display:block}
.pmap__sub{font-family:var(--mono);font-size:clamp(9px,.8vw,10.5px);letter-spacing:.05em;
text-transform:uppercase;color:var(--muted);line-height:1.45;text-wrap:balance}
.pmap__caption{margin-top:26px;color:var(--muted);text-align:center;max-width:60ch}
/* textul sectiunii, deasupra diagramei, centrat */
.pmap-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
max-width:760px;margin:0 auto 52px}
.pmap-head .section__lead{max-width:56ch}
/* .eyebrow are `align-self:flex-start` global, deci ignora centrarea parintelui */
.pmap-head .eyebrow{align-self:center}
@media (max-width:860px){
.pmap{margin-top:0}
.pmap__top{width:100%}
/* Conectorul SVG e desenat pentru layoutul pe trei coloane. Pe telefon, turtit la
56px cu preserveAspectRatio="none", desena linii razlete peste text si imagini —
exact ce se vedea in captura lui Dan. Aici il ascundem si punem in loc o sina
verticala pe stanga, construita din gradiente, cu cate un ciot spre fiecare imagine. */
.pmap__links{display:none}
/* Conectorul SVG e ascuns pe telefon, deci nu mai separa Plaza de rand — legenda
Plazei ajungea lipita de primul nod, iar sina (care urca 30px) trecea pe langa ea.
36px lasa loc si textului, si capatului de sus al sinei. */
.pmap__row{grid-template-columns:1fr;gap:26px;margin-top:36px;padding-left:32px}
.pmap__node{position:relative;flex-direction:row;align-items:flex-start;gap:12px;text-align:left}
/* Cartile din spate sunt impinse la dreapta (9px/carte, 12px la hover), deci ies din
cutia butonului si intrau peste text. Rezervam 26px in dreapta — acopera evantaiul
vizibil (cartile de la p>=3 sunt deja transparente). Latimea totala ramane 130px,
din care 104 imagine. */
.pmap__node .pmap__stack{width:130px;flex:none;padding-right:26px}
/* la fel pentru Plaza, dar simetric, ca imaginea sa ramana centrata in bloc */
.pmap__top .pmap__stack{padding-inline:26px}
/* sina: fiecare nod isi deseneaza bucata lui, deci ramane continua indiferent de
inaltimile lor; primul urca spre Plaza, ultimul se opreste la ciotul lui */
.pmap__node::after{content:'';position:absolute;left:-22px;top:0;bottom:-26px;width:2px;
background-image:linear-gradient(to bottom,var(--line) 0 2px,transparent 2px 9px);
background-size:2px 11px;
animation:pmap-rail 2.4s linear infinite}
.pmap__node:first-child::after{top:-30px}
.pmap__node:last-child::after{bottom:auto;height:41px}
/* ciotul orizontal, la mijlocul imaginii (112px lata, 4:3 -> 84 inalta) */
.pmap__node::before{content:'';position:absolute;left:-22px;top:39px;width:22px;height:2px;
background-image:linear-gradient(to right,var(--line) 0 2px,transparent 2px 9px);
background-size:11px 2px}
@keyframes pmap-rail{from{background-position:0 0}to{background-position:0 11px}}
.pmap__node .pmap__text{align-items:flex-start;padding-top:4px}
.pmap__title{font-size:16px}
.pmap__text--core .pmap__title{font-size:22px}
.pmap__logo{width:114px}
.pmap__caption{margin-top:20px;text-align:left}
.pmap-head{margin:0 0 30px;text-align:left;align-items:flex-start}
.pmap-head .eyebrow{align-self:flex-start}
}
@media (prefers-reduced-motion:reduce){
.pmap__line{animation:none}
.pmap__node::after{animation:none}
.pmap__card{transition:none}
}
/* ============ 2026-09-12: Plaza pe momente ale zilei (.hours) ============ */
/* Inlocuieste grila plata de 6 randari. Trei stari (Day / Evening / After the show),
fiecare cu fraza si cadrele ei. Toate imaginile stau suprapuse in scena si doar cea
activa e opaca — crossfade real, fara reincarcare care clipeste. */
.hours{margin-top:44px}
.hours__bar{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-bottom:24px}
/* segmented control cu pastila care aluneca */
.hours__tabs{position:relative;display:inline-flex;gap:2px;padding:5px;border-radius:999px;
background:rgba(17,17,17,.05);flex:none}
/* Pastila e pozitionata din JS prin left/width (vezi site.js, "plaza hours"): ia exact
offsetLeft/offsetWidth ale tabului activ, deci se potriveste la orice latime si la orice
lungime de eticheta. transform ar fi fost la fel de valid si ceva mai ieftin; left/width
a fost ales doar pentru ca e mai usor de verificat, nu pentru ca transform ar avea vreo
problema. */
.hours__ind{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:999px;background:var(--ink);
transition:left .42s cubic-bezier(.2,.7,.3,1),width .42s cubic-bezier(.2,.7,.3,1)}
.hours__tab{position:relative;z-index:1;padding:10px 18px;border:0;background:none;border-radius:999px;
color:var(--ink-soft);font-family:var(--sans);font-size:15px;line-height:1;cursor:pointer;
white-space:nowrap;transition:color .3s ease}
.hours__tab:hover{color:var(--ink)}
.hours__tab.is-active{color:#fff}
.hours__tab:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.hours__lead{flex:1 1 340px;min-width:0;max-width:56ch;color:var(--ink-soft);
transition:opacity .3s ease,transform .3s ease}
.hours__lead.is-swapping{opacity:0;transform:translateY(5px)}
/* scena */
.hours__stage{margin:0}
.hours__frame{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/9;background:var(--cream-pill)}
.hours__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
opacity:0;transform:scale(1.035);transition:opacity .6s ease,transform 1.1s cubic-bezier(.2,.6,.2,1)}
.hours__shot.is-active{opacity:1;transform:scale(1)}
.hours__cap{position:absolute;left:16px;bottom:14px;z-index:2;padding:9px 14px;border-radius:999px;
background:rgba(17,17,17,.58);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
color:#fff;font-size:13px;line-height:1;transition:opacity .3s ease,transform .3s ease}
.hours__cap.is-swapping{opacity:0;transform:translateY(5px)}
/* miniaturi: se filtreaza dupa starea aleasa */
.hours__thumbs{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.hours__thumb{width:118px;flex:none;padding:0;border:0;background:none;border-radius:11px;overflow:hidden;
cursor:pointer;aspect-ratio:16/10;outline:2px solid transparent;outline-offset:2px;
transition:outline-color .3s ease,transform .3s cubic-bezier(.2,.7,.3,1),opacity .3s ease}
.hours__thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.hours__thumb:hover{transform:translateY(-3px)}
.hours__thumb:hover img{transform:scale(1.07)}
.hours__thumb.is-active{outline-color:var(--ink)}
.hours__thumb[hidden]{display:none}
.hours__thumb:focus-visible{outline-color:var(--ink)}
@media (max-width:860px){
.hours{margin-top:30px}
.hours__bar{gap:14px;margin-bottom:18px}
.hours__tabs{width:100%;justify-content:space-between}
.hours__tab{flex:1 1 auto;padding:10px 8px;font-size:13.5px}
.hours__lead{flex:1 1 100%;font-size:15px}
.hours__frame{border-radius:14px;aspect-ratio:4/3}
.hours__cap{left:10px;bottom:10px;padding:7px 11px;font-size:12px}
.hours__thumbs{gap:8px;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
.hours__thumbs::-webkit-scrollbar{display:none}
.hours__thumb{width:104px;scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){
.hours__ind,.hours__shot,.hours__cap,.hours__lead,.hours__thumb,.hours__thumb img{transition:none}
}
/* ============ 2026-09-12: districtul navigabil pe video (.fly) ============ */
/* Pe /experiences/the-plaza/, sub „Day, evening, and after the show". Sectiunea e inalta
(--fly-travel); scena de 100svh sta lipita (sticky) cat timp se deruleaza prin ea, iar
pozitia in derulare = momentul din video. Comportamentul e in /assets/js/flythrough.js.
Pinii si fisele refolosesc .mpx__pin / .mpx__card de pe masterplan, ca sa arate identic;
aici pinii se misca in fiecare cadru (JS scrie transform-ul), deci tranzitiile .mpx__pin
sunt oprite. Pe telefon fisa e bottom sheet cu val, prin regulile .mpx__card / .mpx__scrim. */
.fly{--fly-travel:720vh;position:relative;height:var(--fly-travel);background:#0f0f0f;color:#fff}
.fly__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0f0f0f;isolation:isolate}
.fly__poster,.fly__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.fly__poster{object-fit:cover}
.fly__canvas{opacity:0;transition:opacity .35s ease}
.fly.is-live .fly__canvas{opacity:1}
/* umbra usoara sus si jos, ca textul din HUD sa ramana lizibil peste orice cadru */
.fly__shade{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(15,15,15,.5) 0%,rgba(15,15,15,0) 30%,rgba(15,15,15,0) 72%,rgba(15,15,15,.55) 100%)}
/* intre capitole scena se intuneca (--fly-dim din JS) si apare titlul capitolului urmator */
.fly__shade::after{content:"";position:absolute;inset:0;background:#0f0f0f;opacity:var(--fly-dim,0)}
/* pini: bulina cu imagine de pe masterplan, cu eticheta mereu vizibila si un inel care pulseaza */
.fly__pins{position:absolute;inset:0;z-index:3;pointer-events:none}
.fly__pin.mpx__pin{left:0;top:0;transform:none;transform-origin:calc(6px + var(--thumb) / 2) 50%;transition:none;opacity:0;visibility:hidden;will-change:transform,opacity}
.fly__pin.is-visible{visibility:visible;pointer-events:auto}
.fly__pin .mpx__pin-label{max-width:260px;opacity:1;margin-left:8px;padding:8px 12px;white-space:nowrap}
.fly__pin.is-active .mpx__pin-label,.fly__pin.is-active:hover .mpx__pin-label{max-width:0;opacity:0;margin-left:0;padding:0}
.fly__pin-pulse{position:absolute;left:calc(6px + var(--thumb) / 2);top:calc(6px + var(--thumb) / 2);width:var(--thumb);height:var(--thumb);
margin:calc(var(--thumb) / -2) 0 0 calc(var(--thumb) / -2);border-radius:999px;border:1.5px solid rgba(255,255,255,.85);
pointer-events:none;animation:fly-pulse 2.6s ease-out infinite}
.fly__pin.is-active .fly__pin-pulse{animation:none;opacity:0}
@keyframes fly-pulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.05);opacity:0}}
/* fisele: asezate de JS langa pin (left/top), ca pe masterplan */
.fly__cards .mpx__card{z-index:6}
.fly__card-link{display:inline-block;margin:12px 0 0 2px;font-size:13px;line-height:1.3;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}
.fly__card-link:hover{color:var(--ink)}
.fly__card-note{margin-top:10px}
/* HUD: intro sus-stanga (dispare dupa primul scroll), bara de progres jos. Fara indiciu de scroll si fara
cronometru — scoase la cererea userului pe 2026-09-12. */
.fly__hud{position:absolute;inset:0;z-index:4;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;
padding:120px var(--pad) 28px}
.fly__intro{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:560px;transition:opacity .5s ease,transform .5s ease}
.fly.is-moving .fly__intro{opacity:0;transform:translateY(-8px)}
.fly__eyebrow{color:rgba(255,255,255,.72)}
.fly__title{color:#fff;max-width:14ch;text-wrap:balance}
/* titlul capitolului: centrat, apare in pauza dintre capitole (opacitatea o scrie JS) */
.fly__chapter{position:absolute;left:50%;top:44%;z-index:4;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
opacity:0;transform:translate(-50%,12px);pointer-events:none;will-change:opacity,transform}
.fly__chapter span:last-child{font-size:clamp(28px,4vw,52px);line-height:1.05;letter-spacing:-.03em;text-wrap:balance;max-width:16ch}
.fly__chapter-n{font-size:12px;font-weight:500;letter-spacing:.14em;color:rgba(255,255,255,.7)}
/* bara de capitole: latimea fiecarui segment = durata capitolului; umplere = progres, linia fina = descarcat */
.fly__chapters{position:absolute;left:var(--pad);right:var(--pad);bottom:22px;z-index:5;display:flex;gap:8px}
.fly__chap{flex:var(--w) 1 0;min-width:0;display:flex;flex-direction:column;gap:9px;padding:10px 0 0;border:0;background:none;color:rgba(255,255,255,.55);
font:inherit;text-align:left;cursor:pointer;transition:color .3s ease}
.fly__chap:hover,.fly__chap.is-active{color:#fff}
.fly__chap:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px}
.fly__chap-bar{position:relative;display:block;height:3px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}
.fly__chap-bar span{position:absolute;inset:0;transform:scaleX(0);transform-origin:0 50%}
.fly__chap-load{background:rgba(255,255,255,.28)}
.fly__chap-bar [data-fly-chap-fill]{z-index:1;background:#fff}
.fly__chap-label{display:flex;gap:8px;overflow:hidden;font-size:12px;line-height:1.2;white-space:nowrap;text-overflow:ellipsis}
.fly__chap-n{opacity:.6;font-variant-numeric:tabular-nums}
/* incarcare / eroare */
/* incarcarea capitolului curent: inel cu procent peste poster */
.fly__loader{position:absolute;right:var(--pad);top:50%;z-index:5;display:flex;align-items:center;gap:10px;transform:translateY(-50%);pointer-events:none;
padding:8px 12px 8px 8px;border-radius:999px;background:rgba(15,15,15,.55);opacity:0;transition:opacity .3s ease}
.fly.is-loading .fly__loader{opacity:1}
.fly__loader-ring{width:28px;height:28px}
.fly__loader-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.fly__loader-ring circle{fill:none;stroke:rgba(255,255,255,.2);stroke-width:3}
.fly__loader-ring .fly__loader-arc{stroke:#fff;stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round;transition:stroke-dashoffset .2s linear}
.fly__loader-pct{font-size:12px;font-variant-numeric:tabular-nums;color:#fff}
.fly.is-error .fly__loader,.fly--no-js .fly__loader{display:none}
.fly__error{display:none;position:absolute;left:50%;top:50%;z-index:5;width:min(90%,420px);transform:translate(-50%,-50%);
text-align:center;color:rgba(255,255,255,.8)}
.fly.is-error .fly__error{display:block}
/* fara JS: posterul la 16/9, fisele in flux dedesubt */
.fly--no-js{height:auto}
.fly--no-js .fly__stage{position:relative;height:auto;aspect-ratio:16/9}
.fly--no-js .fly__pins,.fly--no-js .fly__chapters,.fly--no-js .fly__chapter{display:none}
.fly--no-js .fly__cards{position:relative;z-index:6;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;padding:16px var(--pad)}
.fly--no-js .mpx__card{position:relative;width:auto;animation:none}
.fly--no-js .mpx__close{display:none}
@media (max-width:1100px){ .fly__hud{padding-top:110px} }
@media (max-width:860px){
.fly__hud{padding:100px var(--pad) 22px}
.fly__intro{gap:12px;max-width:420px}
.fly__title{font-size:32px}
.fly__pin.mpx__pin{--thumb:42px}
.fly__pin .mpx__pin-label{display:none}
.fly__chapters{bottom:16px;gap:5px}
.fly__chap-label{display:none}
.fly__chap.is-active .fly__chap-label{display:flex;position:absolute;left:0;bottom:20px}
}
@media (prefers-reduced-motion:reduce){
.fly__pin-pulse{animation:none}
.fly__canvas,.fly__intro{transition:none}
}
/* ============ 2026-09-14: Edge, pozitia pe Plaza (.front) ============ */
/* Vezi inc/edge-front.php. Harta = planul de leasing decupat; suitele Edge desenate
peste el in negru. Animatiile pornesc cand .front primeste .is-live (site.js). */
/* verdele suitelor din planul interactiv (.plan-x__spot: umplere #97A97F, contur #5E7248).
Textul de pe suite e verde inchis, nu alb: alb pe #97A97F are doar 2.5:1; #2F3D22 are 4.6:1. */
.front{--front-green:#97A97F;--front-green-deep:#5E7248;--front-green-ink:#2F3D22}
.front__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:64px;align-items:center}
.front__copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.front__title{max-width:12ch}
.front__lead{color:var(--ink-soft);max-width:46ch;text-wrap:pretty}
.front__points{list-style:none;margin:14px 0 0;padding:0;width:100%;border-top:1px solid var(--line)}
.front__points li{border-bottom:1px solid var(--line)}
.front__point{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 8px;width:100%;
padding:20px 0 22px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.front__num{color:var(--muted);font-size:12px;padding-top:4px;transition:color .4s ease}
.front__ptext{display:flex;flex-direction:column;gap:0}
.front__plabel{font-size:20px;line-height:1.25;letter-spacing:-.015em;color:var(--muted);transition:color .4s ease}
/* corpul argumentului se deschide doar pe cel activ: grid 0fr→1fr anima inaltimea reala */
.front__pbody{display:grid;grid-template-rows:0fr;opacity:0;color:var(--ink-soft);
transition:grid-template-rows .5s cubic-bezier(.2,.7,.3,1),opacity .35s ease,margin .5s cubic-bezier(.2,.7,.3,1)}
.front__pbody > span{overflow:hidden;min-height:0}
.front__point.is-active .front__pbody{grid-template-rows:1fr;opacity:1;margin-top:8px}
.front__point.is-active .front__plabel,.front__point.is-active .front__num,
.front__point:hover .front__plabel{color:var(--ink)}
.front__point:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:6px}
.front__bar{position:absolute;left:0;right:0;bottom:-1px;height:1px;overflow:hidden}
.front__bar i{display:block;height:100%;background:var(--ink);transform-origin:left;transform:scaleX(var(--p,0))}
.front__point:not(.is-active) .front__bar i{transform:scaleX(0)}
/* harta */
.front__map{margin:0;display:flex;flex-direction:column;gap:14px}
.front__frame{position:relative;aspect-ratio:644/428;overflow:hidden;border-radius:var(--radius-lg);
background:#ecebe7;isolation:isolate}
.front__plan{position:absolute;max-width:none;display:block;user-select:none;pointer-events:none}
.front__plan--base{filter:grayscale(1) contrast(.92) brightness(1.05);opacity:.75}
/* culoarea creste din centrul Plazei (57.45% / 50.93% = punctul 466,480 in decupaj) */
.front__plan--color{clip-path:circle(0% at 57.45% 50.93%);
transition:clip-path 1.9s cubic-bezier(.55,0,.2,1) .15s}
.front.is-live .front__plan--color{clip-path:circle(82% at 57.45% 50.93%)}
.front__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.front__suite path{fill:var(--front-green);fill-opacity:0;stroke:var(--front-green-deep);stroke-width:2.2;stroke-linejoin:round;
stroke-dasharray:1 1;stroke-dashoffset:1;
transition:stroke-dashoffset 1.1s cubic-bezier(.6,0,.25,1) calc(.7s + var(--i) * .13s),
fill-opacity .7s ease calc(1.5s + var(--i) * .13s)}
.front.is-live .front__suite path{stroke-dashoffset:0;fill-opacity:1}
.front__chip{position:absolute;z-index:2;transform:translate(-50%,-50%) scale(.6);opacity:0;
display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--front-green-ink);pointer-events:none;white-space:nowrap;
transition:opacity .45s ease calc(1.9s + var(--i) * .13s),transform .6s cubic-bezier(.2,1.4,.4,1) calc(1.9s + var(--i) * .13s)}
.front__chip b{font-weight:500;font-size:clamp(10px,1.05vw,15px);letter-spacing:-.01em;line-height:1}
.front__chip i{font-style:normal;font-family:var(--mono);font-size:clamp(7px,.62vw,9.5px);letter-spacing:.03em;opacity:.85}
.front.is-live .front__chip{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* A5 e prea ingusta pentru suprafata sub ID */
.front__chip:nth-of-type(5) i{display:none}
.front__tag{position:absolute;z-index:2;transform:translate(-50%,-50%) translateY(8px);opacity:0;
padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.86);color:var(--ink);
font-family:var(--mono);font-size:clamp(8px,.72vw,11px);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
box-shadow:0 6px 18px rgba(17,17,17,.12);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
transition:opacity .5s ease 1.2s,transform .6s cubic-bezier(.2,.7,.3,1) 1.2s}
.front.is-live .front__tag{opacity:1;transform:translate(-50%,-50%)}
/* fluxurile spre Plaza: chevroane „vopsite pe jos", apar dupa ce s-a colorat planul */
.front{--front-flow:#3E8ED0}
.front__flows{opacity:0;transition:opacity .9s ease 2.4s}
.front.is-live .front__flows{opacity:1}
.front__flows .flow-chev__shape{fill:var(--front-flow);fill-opacity:.92}
/* unde din centrul Plazei */
.front__sonar circle{fill:none;stroke:var(--front-green-deep);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
.front.is-live .front__sonar circle{animation:front-sonar 4.8s cubic-bezier(.2,.6,.3,1) infinite;animation-delay:calc(2.4s + var(--k) * 1.6s)}
@keyframes front-sonar{0%{transform:scale(.15);opacity:.22}100%{transform:scale(1.9);opacity:0}}
/* straturile argumentelor */
.front__layer{opacity:0;transition:opacity .5s ease}
.front__map[data-mode="fountain"] .front__layer--fountain,
.front__map[data-mode="plaza"] .front__layer--plaza,
.front__map[data-mode="exit"] .front__layer--exit{opacity:1}
.front:not(.is-live) .front__layer{opacity:0}
/* fantana: inel pe Round Bar + doua unde care pleaca din el */
.front__ring{fill:none;stroke:var(--front-green-deep);stroke-width:2.4}
.front__ring-pulse{fill:none;stroke:var(--front-green-deep);stroke-width:1.4;transform-box:fill-box;transform-origin:center;opacity:0}
.front__map[data-mode="fountain"] .front__ring-pulse{animation:front-ring 2.4s cubic-bezier(.2,.6,.3,1) infinite;animation-delay:calc(var(--k) * 1.2s)}
@keyframes front-ring{0%{transform:scale(1);opacity:.65}100%{transform:scale(1.9);opacity:0}}
/* Plaza: linii de privire care curg din suite spre centru */
.front__sight{stroke:var(--front-green-deep);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:3 7;
animation:front-flow 1.4s linear infinite paused}
.front__sight-end{fill:var(--front-green-deep);transform-box:fill-box;transform-origin:center;opacity:0}
.front__map[data-mode="plaza"] .front__sight{animation-play-state:running}
.front__map[data-mode="plaza"] .front__sight-end{animation:front-dot 2.4s ease-in-out infinite;animation-delay:calc(var(--i) * .12s)}
@keyframes front-dot{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1.3)}}
/* iesirea arenei: drumul curge spre A6 */
.front__route{fill:none;stroke:var(--front-green-deep);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:3 9;animation:front-flow 1.3s linear infinite paused}
.front__map[data-mode="exit"] .front__route{animation-play-state:running}
@keyframes front-flow{to{stroke-dashoffset:-24}}
.front__route-start{fill:#fff;stroke:var(--front-green-deep);stroke-width:2}
.front__route-end{fill:var(--front-green-deep);transform-box:fill-box;transform-origin:center}
.front__map[data-mode="exit"] .front__route-end{animation:front-beat 1.6s ease-in-out infinite}
@keyframes front-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.45)}}
.front__legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;color:var(--ink-soft);font-size:14px}
.front__legend span{display:inline-flex;align-items:center;gap:8px}
.front__key{width:12px;height:12px;border-radius:3px;display:inline-block}
.front__key--edge{background:var(--front-green)}
.front__key--plaza{background:#dcc7a6}
/* pe o coloana: titlu → harta → argumente. .front__copy se „dizolva" (display:contents)
ca harta sa poata intra intre lead si lista. */
@media (max-width:1100px){
.front__grid{grid-template-columns:1fr;gap:22px}
.front__copy{display:contents}
.front__copy > .eyebrow{justify-self:start}
.front__title{max-width:none}
.front__map{order:4;margin-top:22px}
.front__points{order:5;margin-top:22px}
}
@media (max-width:860px){
.front__frame{border-radius:var(--radius);margin-inline:calc(var(--pad) * -1 + 12px)}
.front__plabel{font-size:18px}
.front__point{grid-template-columns:34px minmax(0,1fr);padding:16px 0 18px}
.front__chip i{display:none}
.front__tag{padding:4px 8px;letter-spacing:.06em}
}
@media (prefers-reduced-motion:reduce){
.front__plan--color{clip-path:none;transition:none}
.front__suite path{stroke-dashoffset:0;fill-opacity:1;transition:none}
.front__chip,.front__tag{opacity:1;transform:translate(-50%,-50%);transition:none}
.front__sonar{display:none}
.front__flows{transition:none}
.front__layer{transition:none}
.front__route,.front__route-end,.front__ring-pulse,.front__sight{animation:none!important}
.front__sight-end{animation:none!important;opacity:1}
.front__bar{display:none}
}
/* ============ 2026-09-14: Master Plan, fluxurile pe aerian (.mv) ============ */
/* Vezi inc/movement.php. Chevroanele vin din cc_flow_chevrons(). */
.mv{margin:48px 0 0}
.mv__frame{position:relative;aspect-ratio:1625/968;overflow:hidden;border-radius:var(--radius-lg);background:#d9d2c4}
.mv__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%;display:block}
.mv__svg{position:absolute;inset:0;width:100%;height:100%}
/* gradient + stralucire: definite in SVG (#mv-chev-grad, #mv-glow), vezi inc/movement.php */
.mv .flow-chev__shape{fill:url(#mv-chev-grad)}
@media (max-width:860px){
.mv{margin-top:34px}
.mv__frame{aspect-ratio:4/3;border-radius:var(--radius);margin-inline:calc(var(--pad) * -1 + 12px)}
/* cadrul e mai mic: chevronul mai mare, altfel se pierde */
.mv .flow-chev__shape{transform:scale(1.5)}
}
/* 2026-10-05: filmarea cu drona in locul aerianului animat (inc/movement.php). Cadrul ia forma filmului
(1482x620); pe telefon 16:9, decupat central, ca sa nu devina o fasie subtire. */
.mv--video .mv__frame{aspect-ratio:1482/620;background:#0d0e12}
.mv__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:860px){.mv--video .mv__frame{aspect-ratio:16/9}}
/* ============ 2026-09-14: Live, ce ai la cativa pasi (.nearby) ============ */
/* Vezi inc/nearby.php. Porneste de la cardurile .blog-card de pe Echo. */
.nearby{margin-top:40px}
.nearby .blog__row{aspect-ratio:1216/420}
.nearby__scrim{background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.08) 40%,rgba(0,0,0,.72) 100%)}
.nearby__body{display:flex;flex-direction:column;gap:0}
/* .section-label are text-wrap:balance, care reseteaza white-space mostenit: nowrap direct pe ea */
.nearby .blog-card__date,.nearby .blog-card__date .section-label{white-space:nowrap;text-wrap:nowrap;flex:none}
.nearby__title{max-width:12ch}
/* textul se deschide pe cardul activ: grid 0fr→1fr anima inaltimea reala */
.nearby__text{display:grid;grid-template-rows:0fr;opacity:0;color:rgba(255,255,255,.86);max-width:32ch;
transition:grid-template-rows .6s cubic-bezier(.65,0,.35,1),opacity .4s ease,margin .6s cubic-bezier(.65,0,.35,1)}
.nearby__text > span{overflow:hidden;min-height:0}
.nearby__card:hover .nearby__text,.nearby__card:focus-within .nearby__text{grid-template-rows:1fr;opacity:1;margin-top:10px}
.nearby__card:focus-within{outline:2px solid var(--ink);outline-offset:3px}
.nearby .blog-card__link:focus-visible{outline:none}
@media (max-width:1100px){
.nearby .blog__row{aspect-ratio:1216/500}
.nearby__title{font-size:26px}
}
/* telefon + tableta: caruselul din .blog__grid; fara hover, deci textul sta deschis */
@media (max-width:860px){
.nearby{margin-top:28px}
.nearby .blog-card{aspect-ratio:1/1}
.nearby__text{grid-template-rows:1fr;opacity:1;margin-top:8px}
}
@media (hover:none){
.nearby__text{grid-template-rows:1fr;opacity:1;margin-top:8px}
}
/* ============ 2026-09-14: Live, „What does your day feel like?" — 3 variante ============ */
/* A: inc/day-scroll.php (/live/) · B: inc/postcards.php (/dining/) · C: inc/cine.php (hero pe /dining/) */
/* ---------- A: .dayscroll ---------- */
.dayscroll{--sky-top:#F4E3CC;--sky-bot:#FBF6EE;--ink-day:var(--ink);--p:0;position:relative;height:calc(var(--screens) * 90svh + 100svh)}
.dayscroll__stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;color:var(--ink-day);transition:color .6s ease}
.dayscroll.is-dark .dayscroll__stage{--ink-day:#fff}
.dayscroll__sky{position:absolute;inset:0;z-index:-3;background:linear-gradient(180deg,var(--sky-top),var(--sky-bot))}
.dayscroll__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:0;transform:scale(1.06);
transition:opacity 1.2s ease,transform 3s cubic-bezier(.2,.6,.2,1)}
.dayscroll__night{position:absolute;inset:0;z-index:-2;opacity:0;pointer-events:none;
background:linear-gradient(90deg,rgba(6,7,13,.82) 0%,rgba(6,7,13,.55) 45%,rgba(6,7,13,.15) 100%);transition:opacity 1.2s ease}
.dayscroll.is-home .dayscroll__video{opacity:1;transform:scale(1)}
.dayscroll.is-home .dayscroll__night{opacity:1}
/* soarele: un punct mic langa eticheta, care la noapte devine semiluna (o umbra cu culoarea cerului) */
.dayscroll__eyebrow{display:inline-flex;align-items:center;gap:12px}
.dayscroll__orb{position:relative;flex:none;width:10px;height:10px;border-radius:50%;background:#E59A3C;overflow:hidden;
box-shadow:0 0 0 4px rgba(229,154,60,.16);transition:background .8s ease,box-shadow .8s ease}
.dayscroll__orb::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--sky-top);transform:translate(110%,-40%);transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.dayscroll.is-dark .dayscroll__orb{background:#EEF1F8;box-shadow:0 0 0 4px rgba(238,241,248,.1)}
.dayscroll.is-dark .dayscroll__orb::after{transform:translate(38%,-22%)}
.dayscroll.is-home .dayscroll__orb::after{background:rgba(20,22,34,.9)}
.dayscroll__inner{height:100%;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:64px}
.dayscroll__copy{display:flex;flex-direction:column;gap:18px;position:relative}
.dayscroll__eyebrow{opacity:.62}
.dayscroll__clock{font-family:var(--mono);font-size:clamp(56px,7vw,112px);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;font-weight:400}
.dayscroll__lines{position:relative;min-height:calc(52px * 1.08 * 3 + 40px)}
.dayscroll__line{position:absolute;inset:0 auto auto 0;display:flex;flex-direction:column;gap:14px;pointer-events:none}
.dayscroll__label{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.dayscroll__text{max-width:15ch}
.dw{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(.35em);
transition:opacity .5s ease,filter .6s ease,transform .7s cubic-bezier(.2,.7,.3,1);transition-delay:calc(var(--w) * 45ms)}
.dayscroll__line.is-active .dayscroll__label{opacity:.7;transform:none;transition-delay:.05s}
.dayscroll__line.is-active .dw{opacity:1;filter:none;transform:none;transition-delay:calc(120ms + var(--w) * 55ms)}
.dayscroll__line:not(.is-active) .dw{transition-duration:.25s;transition-delay:0s}
/* ecranul final: textul si ceasul se retrag, ramane doar fraza, mare, centrata peste video */
.dayscroll__inner,.dayscroll__ticks{transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.3,1)}
.dayscroll.is-finale .dayscroll__inner{opacity:0;transform:translateY(-24px)}
.dayscroll.is-finale .dayscroll__ticks{opacity:0}
.dayscroll.is-finale .dayscroll__night{background:rgba(6,7,13,.52)}
.dayscroll__finale{position:absolute;inset:0;display:grid;place-items:center;padding:0 var(--pad);pointer-events:none;color:#fff}
.dayscroll__finale-text{margin:0;text-align:center;font-size:clamp(44px,7.4vw,128px);line-height:1.02;letter-spacing:-.04em;font-weight:400;max-width:14ch;
text-shadow:0 2px 40px rgba(0,0,0,.3)}
.dayscroll__finale .dw{transition-duration:.9s,1.1s,1.2s}
.dayscroll.is-finale .dayscroll__finale .dw{opacity:1;filter:none;transform:none;transition-delay:calc(350ms + var(--w) * 120ms)}
.dayscroll:not(.is-finale) .dayscroll__finale .dw{transition-duration:.3s;transition-delay:0s}
.dayscroll__static-end{display:none}
.dayscroll__frame{position:relative;justify-self:end;width:min(100%,440px);aspect-ratio:3/4;max-height:72svh;border-radius:var(--radius-lg);overflow:hidden;
box-shadow:0 40px 90px -30px rgba(40,24,8,.45);transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.7,.3,1)}
.dayscroll__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12);
transition:opacity .9s ease,transform 6s cubic-bezier(.2,.6,.2,1)}
.dayscroll__shot.is-active{opacity:1;transform:scale(1)}
.dayscroll.is-home .dayscroll__frame{opacity:0;transform:scale(.92) translateY(20px)}
.dayscroll__ticks{position:absolute;left:var(--pad);right:var(--pad);bottom:28px;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:8px;list-style:none;margin:0;padding:0}
/* „Scroll": o linie subtire prin care curge un punct, dispare dupa primul pas */
.dayscroll__hint{position:absolute;left:50%;bottom:64px;display:flex;flex-direction:column;align-items:center;gap:10px;transform:translateX(-50%);
transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.dayscroll__hint .section-label{font-size:11px;letter-spacing:.2em;opacity:.7}
.dayscroll__hint-track{position:relative;width:1px;height:38px;overflow:hidden;background:currentColor;opacity:.25}
.dayscroll__hint-track i{position:absolute;left:-1px;top:-12px;width:3px;height:12px;border-radius:2px;background:currentColor;opacity:1;animation:day-hint 1.8s cubic-bezier(.6,0,.3,1) infinite}
.dayscroll__hint-track{opacity:1;background:transparent;box-shadow:inset 1px 0 0 rgba(128,128,128,.35)}
@keyframes day-hint{0%{transform:translateY(0)}70%,100%{transform:translateY(50px)}}
.dayscroll.is-started .dayscroll__hint{opacity:0;transform:translate(-50%,10px)}
@media (prefers-reduced-motion:reduce){ .dayscroll__hint-track i{animation:none;top:13px} }
/* bara de jos se umple continuu (--f pe fiecare segment, din JS), nu pe trepte */
.dayscroll__ticks li{position:relative;height:2px;border-radius:2px}
.dayscroll__ticks li::before{content:"";position:absolute;inset:0;border-radius:2px;background:currentColor;opacity:.18}
.dayscroll__ticks li i{position:absolute;inset:0;border-radius:2px;background:currentColor;transform-origin:left;transform:scaleX(var(--f,0))}
.dayscroll__ticks li span{position:absolute;left:0;top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;opacity:.45;transition:opacity .4s ease}
.dayscroll__ticks li.is-done span{opacity:.9}
/* fara JS / reduced-motion: momentele unul sub altul, fara sticky */
:is(.dayscroll--static,.dayscroll--no-js){height:auto}
:is(.dayscroll--static,.dayscroll--no-js) .dayscroll__stage{position:relative;height:auto;padding-block:90px}
:is(.dayscroll--static,.dayscroll--no-js) .dayscroll__orb,:is(.dayscroll--static,.dayscroll--no-js) .dayscroll__hint,:is(.dayscroll--static,.dayscroll--no-js) .dayscroll__ticks,
:is(.dayscroll--static,.dayscroll--no-js) .dayscroll__clock,:is(.dayscroll--static,.dayscroll--no-js) .dayscroll__frame,:is(.dayscroll--static,.dayscroll--no-js) .dayscroll__video,:is(.dayscroll--static,.dayscroll--no-js) .dayscroll__night{display:none}
:is(.dayscroll--static,.dayscroll--no-js) .dayscroll__inner{display:block}
:is(.dayscroll--static,.dayscroll--no-js) .dayscroll__lines{min-height:0;display:flex;flex-direction:column;gap:40px;margin-top:20px}
:is(.dayscroll--static,.dayscroll--no-js) .dayscroll__line{position:static}
:is(.dayscroll--static,.dayscroll--no-js) .dayscroll__label{opacity:.7;transform:none}
:is(.dayscroll--static,.dayscroll--no-js) .dw{opacity:1;filter:none;transform:none}
:is(.dayscroll--static,.dayscroll--no-js) .dayscroll__finale{display:none}
:is(.dayscroll--static,.dayscroll--no-js) .dayscroll__static-end{display:block;margin-top:56px;padding-top:32px;border-top:1px solid var(--line);max-width:16ch}
@media (max-width:860px){
.dayscroll{height:calc(var(--screens) * 80svh + 100svh)}
.dayscroll__inner{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;gap:18px;padding-top:88px;padding-bottom:104px}
.dayscroll__copy{gap:10px}
.dayscroll__clock{font-size:48px}
.dayscroll__lines{min-height:calc(32px * 1.08 * 3 + 30px)}
.dayscroll__line{gap:8px}
.dayscroll__frame{justify-self:center;align-self:center;width:auto;height:100%;max-height:44svh;aspect-ratio:3/4}
.dayscroll__ticks{bottom:18px}
.dayscroll__finale-text{font-size:56px;line-height:1.04;max-width:9ch}
.dayscroll__hint{bottom:34px}
.dayscroll__hint-track{height:26px}
.dayscroll__ticks li span{display:none}
.dayscroll__night{background:linear-gradient(180deg,rgba(6,7,13,.8) 0%,rgba(6,7,13,.4) 60%,rgba(6,7,13,.6) 100%)}
}
/* ---------- B: .postcards ---------- */
.postcards{overflow:hidden}
.postcards__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.postcards__nav{display:flex;gap:8px;flex:none}
.postcards__btn{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);color:var(--ink);background:#fff;
transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}
.postcards__btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.postcards__btn:active{transform:scale(.94)}
.postcards__btn:disabled{opacity:.35;pointer-events:none}
.postcards__strip{display:flex;gap:18px;margin-top:40px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;cursor:grab;
padding-inline:max(var(--pad),calc((100vw - var(--maxw)) / 2 + var(--pad)));scroll-padding-inline:max(var(--pad),calc((100vw - var(--maxw)) / 2 + var(--pad)));padding-block:18px 26px;user-select:none}
.postcards__strip::-webkit-scrollbar{display:none}
.postcards__strip.is-dragging{cursor:grabbing;scroll-snap-type:none}
.postcards__strip.is-dragging .pcard{pointer-events:none}
.pcard{position:relative;flex:0 0 clamp(230px,22vw,300px);aspect-ratio:3/4;border-radius:18px;overflow:hidden;scroll-snap-align:start;color:#fff;
transform:translateY(0) rotate(0);transition:transform .6s cubic-bezier(.2,.7,.3,1),box-shadow .6s ease;box-shadow:0 10px 30px -18px rgba(17,17,17,.4)}
.pcard:nth-child(odd){transform:rotate(-1.2deg)}
.pcard:nth-child(even){transform:translateY(14px) rotate(1deg)}
.pcard:hover,.pcard.is-playing{transform:translateY(-8px) rotate(0) scale(1.02);box-shadow:0 30px 60px -24px rgba(17,17,17,.55);z-index:1}
.pcard__media{position:absolute;inset:0}
.pcard__img,.pcard__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pcard__img{transition:transform 1.4s cubic-bezier(.2,.6,.2,1)}
.pcard:hover .pcard__img{transform:scale(1.08)}
.pcard__video{opacity:0;transition:opacity .5s ease}
.pcard.is-playing .pcard__video{opacity:1}
.pcard__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 55%,rgba(0,0,0,.7) 100%)}
.pcard__time{position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:999px;
font-family:var(--mono);font-size:12px;letter-spacing:.08em;background:rgba(255,255,255,.16);border:1px solid var(--glass-edge);
backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.pcard__live{width:7px;height:7px;border-radius:50%;background:#ff5a4f;box-shadow:0 0 0 0 rgba(255,90,79,.6)}
.pcard.is-playing .pcard__live{animation:pc-live 1.4s ease-out infinite}
@keyframes pc-live{to{box-shadow:0 0 0 8px rgba(255,90,79,0)}}
.pcard__line{position:absolute;left:18px;right:18px;bottom:18px;font-size:clamp(19px,1.6vw,23px);line-height:1.2;letter-spacing:-.015em;text-wrap:balance;
transform:translateY(6px);transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.pcard:hover .pcard__line{transform:none}
.postcards__progress{height:2px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:6px}
.postcards__progress span{display:block;height:100%;width:100%;background:var(--ink);transform-origin:left;transform:scaleX(var(--pc,0.1))}
@media (max-width:860px){
.postcards__head{align-items:flex-start}
.postcards__nav{display:none}
.postcards__strip{margin-top:26px;gap:14px}
.pcard{flex-basis:66vw}
}
@media (prefers-reduced-motion:reduce){
.pcard,.pcard:nth-child(odd),.pcard:nth-child(even){transform:none;transition:none}
.pcard__img{transition:none}
}
/* ---------- C: .cine ---------- */
.cine{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#0b0b0d;color:#fff;isolation:isolate}
.cine__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.04);transition:transform 8s linear}
.cine.is-playing .cine__video{transform:scale(1)}
.cine__scrim{position:absolute;inset:0;z-index:-1;background:
radial-gradient(ellipse at 50% 60%,rgba(0,0,0,.05) 0%,rgba(0,0,0,.45) 75%),linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.15) 60%,rgba(0,0,0,.6) 100%)}
.cine__inner{height:100%;display:flex;flex-direction:column;justify-content:space-between;padding-block:120px 36px}
.cine__eyebrow{opacity:.8}
.cine__lines{position:relative;flex:1;display:grid;place-items:center;text-align:center}
.cine__line{grid-area:1/1;max-width:18ch;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.cine__line .dw{transition-duration:.9s,1s,1.1s}
.cine__line.is-active .dw{opacity:1;filter:none;transform:none;transition-delay:calc(var(--w) * 90ms)}
.cine__line:not(.is-active) .dw{opacity:0;filter:blur(10px);transform:translateY(-.25em);transition-duration:.45s;transition-delay:0s}
.cine__foot{display:flex;align-items:center;gap:20px}
.cine__chapters{flex:1;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;list-style:none;margin:0;padding:0}
.cine__chapters li{height:2px;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden}
.cine__chapters span{display:block;height:100%;background:#fff;transform-origin:left;transform:scaleX(0)}
.cine__toggle{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.cine__ico--play{display:none}
.cine.is-paused .cine__ico--play{display:block}
.cine.is-paused .cine__ico--pause{display:none}
.cine--hero .cine__inner{padding-top:150px}
.cine--hero .cine__eyebrow{font-weight:400;text-align:center}
@media (max-width:860px){
.cine{height:88svh}
.cine--hero{height:100svh}
.cine--hero .cine__inner{padding-top:120px}
.cine__inner{padding-block:90px 24px}
.cine__line{font-size:36px}
}
/* „Keep scrolling" pe ecranul final al day-scroll: apare dupa fraza, arata ca pagina continua */
.dayscroll__more{position:absolute;left:50%;bottom:56px;margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;
opacity:0;transform:translate(-50%,12px);transition:opacity .6s ease,transform .6s ease}
.dayscroll__more .section-label{font-size:12px;letter-spacing:.2em;opacity:.9}
.dayscroll__more svg{width:22px;height:22px}
.dayscroll__more svg{animation:day-more 1.8s cubic-bezier(.6,0,.3,1) infinite}
@keyframes day-more{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.dayscroll.is-finale .dayscroll__more{opacity:1;transform:translate(-50%,0);transition-delay:1.2s}
@media (max-width:860px){ .dayscroll__more{bottom:32px} }
@media (prefers-reduced-motion:reduce){ .dayscroll__more svg{animation:none} }
/* Hero home: fara poster; pana porneste video-ul fundalul ramane inchis, nu alb */
#hero .hero__bg{background:#0d0e12}
/* Cardurile proiect sunt clicabile pe toata suprafata: linkul din titlu se intinde peste card */
.project-card{position:relative}
.project-card__link{color:inherit;text-decoration:none}
.project-card__link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.project-card:has(.project-card__link){cursor:pointer}
.project-card:has(.project-card__link:hover) .project-card__arrow{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
.project-card__link:focus-visible{outline:none}
.project-card:has(.project-card__link:focus-visible){outline:2px solid #fff;outline-offset:3px}
/* ============ 2026-09-14: nav, chevron pe itemii cu submeniu ============ */
/* Mic si discret: 8x5, mai stins decat textul; se intoarce cand se deschide submeniul. */
.nav__link:has(.nav__chev){gap:7px}
.nav__chev{flex:none;opacity:.55;transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .25s ease}
.nav__item--has-drop:hover .nav__chev,.nav__item--has-drop:focus-within .nav__chev{transform:rotate(180deg);opacity:.9}
@media (prefers-reduced-motion:reduce){ .nav__chev{transition:none} }
/* ============ 2026-09-14: Trade Area, „On the ground" (.places) ============ */
/* Vezi inc/places.php. Lista de tab-uri stanga, scena cu fotografii dreapta. */
.places{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;margin-top:48px;align-items:stretch}
.places__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-self:center;border-top:1px solid var(--line)}
.places__li{border-bottom:1px solid var(--line)}
.places__item{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 40px;align-items:start;gap:0 12px;width:100%;
padding:26px 0 28px;margin:0;border:0;background:none;color:var(--muted);font:inherit;text-align:left;cursor:pointer;
transition:color .35s ease}
.places__item:hover,.places__item.is-active{color:var(--ink)}
.places__item:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:6px}
.places__n{padding-top:12px;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.places__main{min-width:0}
.places__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.places__name{font-size:40px;line-height:1.1;letter-spacing:-.03em}
.places__meta{color:var(--muted)}
.places__item:hover .places__head,.places__item.is-active .places__head{transform:translateX(6px)}
/* randul activ se deschide: grid 0fr -> 1fr anima inaltimea reala */
.places__more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .6s cubic-bezier(.65,0,.35,1),opacity .35s ease}
.places__more-in{overflow:hidden;min-height:0;display:flex;flex-direction:column;gap:8px;padding-left:6px}
.places__item.is-active .places__more{grid-template-rows:1fr;opacity:1;transition-delay:0s,.12s}
.places__stat{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:14px;font-size:22px;letter-spacing:-.02em;color:var(--ink)}
.places__sep{color:var(--muted)}
.places__text{color:var(--ink-soft);max-width:38ch}
.places__arrow{display:grid;place-items:center;width:40px;height:40px;margin-top:4px;border-radius:999px;border:1px solid var(--line);
color:var(--ink);transform:rotate(-45deg);transition:transform .45s cubic-bezier(.2,.7,.3,1),background-color .3s ease,color .3s ease,border-color .3s ease}
.places__item:hover .places__arrow{transform:rotate(0)}
.places__item.is-active .places__arrow{transform:rotate(0);background:var(--ink);border-color:var(--ink);color:#fff}
/* bara de progres a autoplay-ului, pe linia de jos a randului activ */
.places__bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;pointer-events:none}
.places__bar i{display:block;height:100%;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left center}
.places.is-playing .places__item.is-active .places__bar i{animation:places-progress var(--places-dur,6s) linear forwards}
.places.is-paused .places__item.is-active .places__bar i{animation-play-state:paused}
@keyframes places-progress{to{transform:scaleX(1)}}
.places__stage{position:relative;isolation:isolate;overflow:hidden;border-radius:18px;background:var(--cream);aspect-ratio:7/6;min-height:420px}
.places__shot{position:absolute;inset:0;margin:0;z-index:1;clip-path:inset(100% 0 0 0);
transition:clip-path 1s cubic-bezier(.77,0,.18,1)}
.places__shot.is-active{z-index:2;clip-path:inset(0 0 0 0)}
.places__shot.is-prev{z-index:1;clip-path:inset(0 0 0 0);transition:none}
.places__shot img{display:block;width:100%;height:100%;object-fit:cover;
transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.14);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.places__shot.is-active img{transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.04)}
.places__scrim{position:absolute;inset:0;z-index:3;pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 58%,rgba(0,0,0,.55) 100%)}
.places__count{position:absolute;right:20px;top:26px;z-index:4;color:rgba(255,255,255,.8)}
.places__count b{font-weight:400;color:#fff}
.places__caption{position:absolute;left:24px;right:24px;bottom:22px;z-index:4;color:#fff;font-size:28px;line-height:1.1;letter-spacing:-.02em;
transition:opacity .35s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.places__caption.is-out{opacity:0;transform:translateY(10px);transition-duration:.2s}
/* fara JS: lista si prima fotografie, fara stari animate */
.places--no-js .places__more{grid-template-rows:1fr;opacity:1}
.places--no-js .places__shot[hidden]{display:none}
@media (max-width:1100px){
.places{gap:36px}
.places__name{font-size:32px}
}
@media (max-width:860px){
.places{grid-template-columns:1fr;gap:20px;margin-top:32px}
.places__stage{order:-1;aspect-ratio:4/3;min-height:0;border-radius:14px}
.places__item{grid-template-columns:34px minmax(0,1fr) 36px;padding:20px 0 22px}
.places__n{padding-top:8px}
.places__name{font-size:26px}
.places__arrow{width:36px;height:36px;margin-top:0}
.places__stat{font-size:19px;margin-top:10px}
.places__caption{font-size:22px;left:16px;bottom:16px}
.places__count{display:none}
.places__stat{flex-direction:column;align-items:flex-start;gap:2px}
.places__sep{display:none}
}
@media (prefers-reduced-motion:reduce){
.places__shot,.places__shot img,.places__more,.places__head,.places__arrow,.places__caption{transition:none}
.places__item:hover .places__head,.places__item.is-active .places__head{transform:none}
.places__shot img,.places__shot.is-active img{transform:none}
.places__bar{display:none}
}
/* ============ 2026-09-14: Trade Area, harta regionala ca fundal (.rflow + .rmap) ============ */
/* Vezi inc/region-map.php. Harta umple sectiunea; titlul sta peste ea, in stanga.
Planul SVG e inclinat 3D; pinii (.mpx__pin de pe Master Plan) si etichetele sunt HTML drept. */
.rflow{--rm-accent:#97A97F;--rm-deep:#5E7248;--rm-ink:#2F3D22;--rm-light:#C9D6B6;
position:relative;overflow:hidden;isolation:isolate;min-height:max(100svh,760px);display:flex;flex-direction:column;
background:var(--cream);color:var(--ink)}
.rflow__inner{position:relative;z-index:6;flex:1;display:flex;flex-direction:column;justify-content:space-between;
padding-block:120px 28px;pointer-events:none}
.rflow__head{display:flex;flex-direction:column;align-items:flex-start;gap:0;max-width:600px;margin-block:auto}
.rflow__head .eyebrow,.rflow__legend{pointer-events:auto}
/* in sectiunea asta totul e Geist (fara Geist Mono): eyebrow, eticheta pinilor, legenda, chip-uri */
.rflow .section-label{font-family:var(--sans);font-weight:500;letter-spacing:.08em}
.rflow .mpx__pin-label,.rflow .rmap__card{font-family:var(--sans)}
.rflow__info{position:relative;z-index:7;pointer-events:none;margin-top:auto}
.rflow__info[hidden] + .rflow__source{margin-top:auto}
.rflow__title{margin:24px 0 0;font-size:clamp(46px,4.3vw,62px);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
.rflow__lead{margin:22px 0 0;max-width:40ch;color:var(--ink-soft);text-wrap:pretty}
/* legenda: o pastila discreta, cu marcajul Draft la capat */
.rflow__legend{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:30px 0 0;padding:10px 12px 10px 16px;border-radius:999px;
font-family:var(--sans);font-size:13px;color:var(--ink-soft);background:rgba(255,255,255,.62);border:1px solid var(--line);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.rflow__legend-item{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.rflow__legend-sep{width:1px;height:16px;background:var(--line)}
.rflow__legend .rmap__draft{vertical-align:0}
.rflow__key{display:inline-block;width:12px;height:12px;border-radius:999px}
.rflow__key--10{background:rgba(151,169,127,.6)}
.rflow__key--20{background:rgba(151,169,127,.34)}
.rflow__key--30{background:rgba(151,169,127,.16);box-shadow:inset 0 0 0 1px rgba(151,169,127,.4)}
.rflow__source{align-self:flex-end;margin:0;font-size:10px;color:var(--muted)}
/* lizibilitate: umbra din stanga sub titlu + tranzitii sus/jos spre sectiunile vecine */
.rflow::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
background:linear-gradient(90deg,rgba(247,243,236,.96) 0%,rgba(247,243,236,.82) 28%,rgba(247,243,236,0) 54%),
linear-gradient(180deg,#F7F3EC 0%,rgba(247,243,236,0) 18%,rgba(247,243,236,0) 82%,#F7F3EC 100%)}
.rmap{position:absolute;inset:0}
.rmap__stage{position:absolute;inset:0;overflow:hidden;background:radial-gradient(90% 80% at 64% 50%,#EFEBE0 0%,#F4F0E8 60%,#F7F3EC 100%)}
.rmap__plane{position:absolute;inset:-34% -22% -12%;transform-origin:50% 62%;
transform:perspective(1400px) rotateX(var(--rm-tilt,0deg)) rotateZ(var(--rm-rz,0deg)) rotateY(var(--rm-ry,0deg));will-change:transform}
.rmap__svg{display:block;width:100%;height:100%;overflow:visible}
.rmap__anchor{fill:none;stroke:none}
/* izocronele cresc din district la intrarea in ecran */
.rmap__iso path{transform-box:view-box;transform-origin:var(--ox) var(--oy);transform:scale(.08);opacity:0;
transition:transform 1.9s cubic-bezier(.16,.8,.2,1),opacity 1s ease}
.rmap__iso-30{fill:rgba(151,169,127,.14);stroke:rgba(94,114,72,.35);stroke-width:1;stroke-dasharray:4 5;transition-delay:.9s !important}
.rmap__iso-20{fill:rgba(151,169,127,.22);stroke:rgba(94,114,72,.45);stroke-width:1;stroke-dasharray:4 5;transition-delay:.45s !important}
.rmap__iso-10{fill:rgba(151,169,127,.38);stroke:rgba(94,114,72,.75);stroke-width:1.2}
.rmap.is-on .rmap__iso path{transform:none;opacity:1}
.rmap__road{fill:none;stroke:rgba(17,17,17,.16);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.rmap__road--major{stroke:rgba(17,17,17,.58);stroke-width:2.4;transition:stroke .3s ease,stroke-width .3s ease}
.rmap__road--major.is-hot{stroke:var(--rm-deep);stroke-width:4}
.rmap__aerodrome{fill:rgba(17,17,17,.04);stroke:rgba(17,17,17,.16);stroke-width:1}
.rmap__runways{fill:none;stroke:rgba(17,17,17,.55);stroke-width:3}
.rmap__halo{transform-box:fill-box;transform-origin:center;animation:rm-breathe 3.6s ease-in-out infinite}
@keyframes rm-breathe{0%,100%{opacity:.35;transform:scale(.92)}50%{opacity:.75;transform:scale(1.06)}}
.rmap__radar{fill:none;stroke:var(--rm-deep);stroke-width:1.4;transform-box:fill-box;transform-origin:center;opacity:0}
.rmap.is-on .rmap__radar{animation:rm-radar 4.8s cubic-bezier(.2,.6,.3,1) 2.2s infinite}
@keyframes rm-radar{0%{transform:scale(.02);opacity:.9}70%{opacity:.18}100%{transform:scale(1);opacity:0}}
/* etichete si pini HTML */
.rmap__overlay{position:absolute;inset:0;z-index:3;pointer-events:none}
.rmap__overlay > *{position:absolute;left:0;top:0;transform:translate3d(var(--x,-999px),var(--y,-999px),0);will-change:transform}
.rmap__overlay > [data-rm-off]{visibility:hidden}
.rmap__town{margin:-8px 0 0 -50px;width:100px;text-align:center;font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
color:rgba(17,17,17,.42);white-space:nowrap}
.rmap__iso-label{margin:-12px 0 0 8px;padding:4px 9px;border-radius:999px;font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.01em;
color:#fff;background:var(--rm-deep);opacity:0;transition:opacity .6s ease}
.rmap.is-on .rmap__iso-label--10{opacity:1;transition-delay:1.2s}
.rmap.is-on .rmap__iso-label--20{opacity:1;transition-delay:1.6s}
.rmap.is-on .rmap__iso-label--30{opacity:1;transition-delay:2s}
.rmap__shield{margin:-12px 0 0 -22px;min-width:44px;padding:5px 7px;border-radius:7px 7px 12px 12px;text-align:center;font-family:var(--sans);font-size:11px;font-weight:600;
color:#fff;background:var(--rm-deep);border:1.5px solid #fff;box-shadow:0 6px 14px rgba(47,61,34,.25);pointer-events:auto;cursor:default;
transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.rmap__shield:hover{transform:translate3d(var(--x),var(--y),0) scale(1.1)}
/* pinii rotunzi de pe Master Plan; varful pinului cade pe punct */
.rmap__overlay > .rmap__poi.mpx__pin{left:0;top:0;z-index:2;pointer-events:auto;
transform:translate3d(calc(var(--x,-999px) - 6px - var(--thumb) / 2),calc(var(--y,-999px) - var(--thumb) - 13px),0);transition:opacity .4s ease}
.rmap__poi .mpx__pin-thumb{transition:transform .25s ease,box-shadow .25s ease}
.rmap__poi-icon{display:grid !important;place-items:center;background:var(--rm-ink) !important;color:var(--rm-light)}
.rmap__poi-icon svg{width:46%;height:46%}
.rmap__poi--brand .mpx__pin-thumb{box-shadow:0 0 0 3px var(--rm-accent),0 12px 28px rgba(47,61,34,.3)}
.rmap__poi--brand::before{content:"";position:absolute;left:6px;top:6px;width:var(--thumb);height:var(--thumb);border-radius:999px;
border:1.5px solid var(--rm-deep);animation:rm-ping 2.4s cubic-bezier(.2,.7,.3,1) infinite;pointer-events:none}
@keyframes rm-ping{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.8)}}
.rmap__overlay > .rmap__poi[aria-expanded="true"]{z-index:6}
.rmap__poi[aria-expanded="true"] .mpx__pin-thumb{transform:scale(1.12)}
.rmap__poi[aria-expanded="true"] .mpx__pin-label{max-width:0;opacity:0;margin-left:0;padding:0}
.rmap__card{position:absolute;left:calc(6px + var(--thumb) + 10px);top:6px;display:flex;flex-direction:column;align-items:flex-start;gap:5px;
min-width:200px;max-width:250px;padding:11px 13px;border-radius:12px;text-align:left;font-size:12px;line-height:1.4;color:var(--ink-soft);
background:rgba(255,255,255,.96);border:1px solid var(--line);box-shadow:0 14px 34px rgba(17,17,17,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
opacity:0;transform:translateX(-6px);pointer-events:none;transition:opacity .25s ease,transform .3s cubic-bezier(.2,.7,.3,1)}
.rmap__card-name{font-size:15px;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.rmap__poi[aria-expanded="true"] .rmap__card{opacity:1;transform:none}
.rmap__draft{display:inline-block;padding:2px 7px;border-radius:5px;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
color:var(--rm-ink,#2F3D22);background:var(--rm-light,#C9D6B6);vertical-align:2px}
.rmap--no-js .rmap__overlay{display:none}
.rmap--no-js .rmap__iso path{transform:none;opacity:1}
.rmap--no-js .rmap__plane{transform:none;inset:0}
/* tableta landscape: titlul mai ingust, umbra mai lata, harta impinsa spre dreapta (JS) */
@media (max-width:1100px) and (min-width:861px){
.rflow__head{max-width:440px}
.rflow__title{font-size:44px}
.rflow__legend{gap:6px 12px;padding:8px 10px 8px 12px;font-size:12px}
.rflow::before{background:linear-gradient(90deg,rgba(247,243,236,.97) 0%,rgba(247,243,236,.86) 34%,rgba(247,243,236,0) 60%),
linear-gradient(180deg,#F7F3EC 0%,rgba(247,243,236,0) 18%,rgba(247,243,236,0) 82%,#F7F3EC 100%)}
}
/* telefon + tableta portret: titlul sus, harta dedesubt, fisa pinului intr-o bara jos */
@media (max-width:860px){
.rflow{min-height:max(100svh,700px)}
.rflow__inner{padding-block:96px 16px}
.rflow__head{max-width:620px;margin-block:0}
.rflow__title{margin-top:18px;font-size:clamp(34px,7vw,48px)}
.rflow__lead{margin-top:16px;font-size:15px}
.rflow__legend{margin-top:20px;gap:6px 12px;padding:7px 10px 7px 12px;font-size:12px}
.rflow__legend-sep{height:14px}
.rflow::before{background:linear-gradient(180deg,#F7F3EC 0%,rgba(247,243,236,.94) var(--rm-fade,34%),rgba(247,243,236,0) calc(var(--rm-fade,34%) + 16%),rgba(247,243,236,0) 88%,#F7F3EC 100%)}
.rmap__plane{inset:-40% -40% -14%}
.rmap__town{font-size:9px}
.rmap__town--minor{display:none}
.rmap__shield{font-size:10px;min-width:38px;margin:-11px 0 0 -19px;padding:4px 6px}
.rmap__iso-label{font-size:10px;padding:3px 7px}
.rflow .rmap__poi.mpx__pin{--thumb:42px}
.rflow .mpx__pin-thumb{border-width:2px}
.rmap__card{display:none}
.rflow__info{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:auto 0 10px;padding:12px 14px;border-radius:12px;
background:rgba(255,255,255,.94);border:1px solid var(--line);box-shadow:0 12px 30px rgba(17,17,17,.12);font-size:13px;line-height:1.4;color:var(--ink-soft);
animation:rm-info .3s cubic-bezier(.2,.7,.3,1) both}
.rflow__info[hidden]{display:none}
.rflow__info .rmap__card-name{flex-basis:100%;font-size:16px}
.rflow__source{align-self:flex-start;font-size:9px}
}
@keyframes rm-info{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:420px){
.rflow__title{font-size:34px}
.rflow__legend{gap:5px 10px}
.rflow__legend-sep{display:none}
.rflow .rmap__poi.mpx__pin{--thumb:38px}
}
@media (prefers-reduced-motion:reduce){
.rmap__iso path{transition:none}
.rmap__halo,.rmap.is-on .rmap__radar,.rmap__poi--brand::before{animation:none}
}
/* 2026-09-14: miniaturile Plazei (.hours__thumbs) stau in imaginea mare, dreapta jos */
.hours__frame .hours__thumbs{position:absolute;right:14px;bottom:14px;z-index:3;margin:0;gap:8px;flex-wrap:nowrap}
.hours__frame .hours__thumb{width:112px;outline:2px solid rgba(255,255,255,.55);outline-offset:0;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.hours__frame .hours__thumb.is-active,.hours__frame .hours__thumb:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:860px){
.hours__frame .hours__thumbs{right:10px;bottom:10px;gap:6px;margin-inline:0;padding-inline:0;overflow:visible}
.hours__frame .hours__thumb{width:64px}
}
@media (max-width:860px){ .hours__frame .hours__cap{top:10px;bottom:auto} }
/* ============ 2026-09-14: mega-meniuri (inc/mega.php) — Spotlight (Visit, Leasing) / Map (District) ============ */
/* .nav__links e centrat cu transform, deci e containing block pentru panou: panoul se centreaza
pe el (= centrul barei) cu o latime fixa. Doar desktop (>860px). */
@property --mg-sx{syntax:'';inherits:true;initial-value:50%}
@property --mg-sy{syntax:'';inherits:true;initial-value:62%}
@property --mg-z{syntax:'';inherits:true;initial-value:1}
@property --mg-dim{syntax:'';inherits:true;initial-value:.22}
.nav__item--mega{position:static}
.mega{position:absolute;left:50%;top:calc(100% + 34px);z-index:30;width:min(1080px,calc(100vw - 64px));
font-family:var(--sans);font-size:14px;line-height:1.4;letter-spacing:normal;text-transform:none;color:#fff;cursor:auto;
visibility:hidden;transform:translate(-50%,-8px);
transition:transform .45s cubic-bezier(.2,.7,.2,1),visibility 0s linear .24s}
.mega::before{content:"";position:absolute;left:0;right:0;top:-34px;height:36px} /* punte pentru hover intre bara si panou */
.nav__item--mega:hover .mega,.nav__item--mega:focus-within .mega{visibility:visible;transform:translate(-50%,0);transition-delay:0s}
/* trecand de la un meniu la altul, cel vechi dispare instant (panourile sunt translucide, s-ar vedea unul prin altul);
fade-ul lent ramane doar cand mouse-ul paraseste bara de tot */
.nav__links:hover .nav__item--mega:not(:hover) .mega{visibility:hidden;transition:none}
.nav__links:hover .nav__item--mega:not(:hover) .mega__panel{opacity:0;transition:none}
/* sticla: fundal translucid + blur + saturatie, muchie luminoasa sus si reflexie diagonala. Pe Chromium JS adauga
si o distorsiune de lentila la margini (SVG feDisplacementMap in backdrop-filter, vezi site.js „mega glass");
Safari / Firefox raman pe sticla fara distorsiune. */
.mega__panel{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;padding:12px;
background:rgba(18,18,18,.6);border:1px solid rgba(255,255,255,.14);
-webkit-backdrop-filter:blur(34px) saturate(180%);backdrop-filter:blur(34px) saturate(180%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(255,255,255,.06),inset 0 0 30px rgba(255,255,255,.04),0 40px 90px rgba(0,0,0,.32);
opacity:0;transition:opacity .22s ease;will-change:opacity}
.nav__item--mega:hover .mega__panel,.nav__item--mega:focus-within .mega__panel{opacity:1}
.mega__panel::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
background:linear-gradient(135deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.02) 32%,rgba(255,255,255,0) 60%,rgba(255,255,255,.07) 100%)}
.mega a{color:inherit}
.mega__kicker{margin:0 0 10px;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45)}
/* ---- Spotlight (Visit, Leasing) ---- */
.mega--spot .mega__panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:12px;min-height:400px}
.mega__spot-list{display:flex;flex-direction:column;justify-content:center;padding:16px 6px 16px 18px}
.mega__spot-link{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) 34px;align-items:center;column-gap:8px;padding:13px 12px 13px 10px;
border-radius:12px;color:rgba(255,255,255,.5);transition:color .35s ease,background-color .35s ease,opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.mega__spot-link::before{content:"";position:absolute;left:0;top:50%;width:2px;height:0;border-radius:2px;background:#97A97F;transform:translateY(-50%);transition:height .45s cubic-bezier(.2,.7,.2,1)}
.mega__spot-link.is-active{color:#fff;background:rgba(255,255,255,.05)}
.mega__spot-link.is-active::before{height:58%}
.mega__spot-n{align-self:start;padding-top:9px;font-size:11px;font-variant-numeric:tabular-nums;opacity:.55}
.mega__spot-label{display:block;font-size:32px;line-height:1.08;letter-spacing:-.03em;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.mega__spot-link.is-active .mega__spot-label{transform:translateX(4px)}
.mega__spot-desc{display:block;max-height:0;overflow:hidden;opacity:0;padding-left:4px;font-size:13px;color:rgba(255,255,255,.62);
transition:max-height .45s cubic-bezier(.2,.7,.2,1),opacity .3s ease,margin .45s ease}
.mega__spot-link.is-active .mega__spot-desc{max-height:40px;opacity:1;margin-top:5px}
.mega__spot-arrow{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
opacity:0;transform:translateX(-10px) rotate(-45deg);transition:opacity .3s ease,transform .45s cubic-bezier(.2,.7,.2,1),background-color .3s ease}
.mega__spot-link.is-active .mega__spot-arrow{opacity:1;transform:none;background:#97A97F;border-color:#97A97F;color:#1c2414}
.mega__spot-stage{position:relative;overflow:hidden;border-radius:14px;background:#1e1e1e}
.mega__spot-shot{position:absolute;inset:0;margin:0;z-index:1;clip-path:inset(0 0 0 100%);transition:clip-path .85s cubic-bezier(.77,0,.18,1)}
.mega__spot-shot.is-active{z-index:2;clip-path:inset(0)}
.mega__spot-shot.is-prev{z-index:1;clip-path:inset(0);transition:none}
.mega__spot-shot img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.18);transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
.mega__spot-shot.is-active img{transform:scale(1.03)}
.mega__spot-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%)}
.mega__spot-shot figcaption{position:absolute;left:20px;bottom:18px;z-index:1;font-size:24px;letter-spacing:-.02em;opacity:0;transform:translateY(12px);
transition:opacity .4s ease .3s,transform .6s cubic-bezier(.2,.7,.2,1) .3s}
.mega__spot-shot.is-active figcaption{opacity:1;transform:none}
.mega--spot .mega__spot-link{opacity:0;transform:translateY(10px)}
.nav__item--mega:hover .mega--spot .mega__spot-link,.nav__item--mega:focus-within .mega--spot .mega__spot-link{opacity:1;transform:none}
.mega--spot .mega__spot-link:nth-of-type(2){transition-delay:0s,0s,.04s,.04s}
.mega--spot .mega__spot-link:nth-of-type(3){transition-delay:0s,0s,.09s,.09s}
.mega--spot .mega__spot-link:nth-of-type(4){transition-delay:0s,0s,.14s,.14s}
.mega--spot .mega__spot-link:nth-of-type(5){transition-delay:0s,0s,.19s,.19s}
/* ---- Map menu (District) ---- */
.mega--map .mega__panel{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px}
.mega__map{position:relative;overflow:hidden;border-radius:14px;aspect-ratio:3/2;background:#1c1c1c;align-self:center;
clip-path:circle(0% at 50% 60%);transition:clip-path .9s cubic-bezier(.65,0,.35,1),--mg-sx .9s cubic-bezier(.2,.7,.2,1),--mg-sy .9s cubic-bezier(.2,.7,.2,1),--mg-z .9s cubic-bezier(.2,.7,.2,1),--mg-dim .6s ease}
.nav__item--mega:hover .mega__map,.nav__item--mega:focus-within .mega__map{clip-path:circle(80% at 50% 60%)}
.mega__map-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:var(--mg-sx) var(--mg-sy);transform:scale(var(--mg-z))}
.mega__map-shade{position:absolute;inset:0;pointer-events:none;
background:radial-gradient(circle at var(--mg-sx) var(--mg-sy),rgba(8,10,6,0) 0,rgba(8,10,6,0) 9%,rgba(8,10,6,var(--mg-dim)) 30%),linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,0) 30%)}
.mega__map.is-focus{--mg-z:1.45;--mg-dim:.66}
.mega__map-spot,.mega__map-arena{position:absolute;left:calc(var(--mg-sx) + (var(--x) - var(--mg-sx)) * var(--mg-z));top:calc(var(--mg-sy) + (var(--y) - var(--mg-sy)) * var(--mg-z));transform:translate(-50%,-50%)}
.mega__map-spot{display:grid;place-items:center}
.mega__map-spot i{display:block;width:12px;height:12px;border-radius:999px;background:#fff;box-shadow:0 0 0 3px rgba(151,169,127,.9),0 6px 14px rgba(0,0,0,.5);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.mega__map-spot i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:999px;border:1.5px solid #97A97F;opacity:0}
.mega__map-spot b{position:absolute;left:50%;bottom:calc(100% + 8px);padding:6px 10px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap;color:#1c2414;background:#fff;
opacity:0;transform:translate(-50%,6px);transition:opacity .3s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
/* The Plaza sta imediat sub eticheta Toyota Arena: numele ei coboara sub punct */
.mega__map-spot[data-mega-spot="2"] b{bottom:auto;top:calc(100% + 8px);transform:translate(-50%,-6px)}
.mega__map-spot.is-on i{transform:scale(1.35)}
.mega__map-spot.is-on i::after{animation:mg-ping 1.6s cubic-bezier(.2,.7,.3,1) infinite}
.mega__map-spot.is-on b,.mega__map.is-all .mega__map-spot b{opacity:1;transform:translate(-50%,0)}
@keyframes mg-ping{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
.mega__map-arena{padding:4px 8px;border-radius:6px;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.5);
--x:54%;--y:52%;transition:opacity .4s ease}
.mega__map.is-focus .mega__map-arena{opacity:.85}
.mega__map-list{display:flex;flex-direction:column;justify-content:center;padding:14px 12px 14px 8px}
.mega__map-link{display:grid;grid-template-columns:46px minmax(0,1fr) 28px;align-items:center;column-gap:14px;padding:9px 10px;border-radius:12px;
transition:background-color .3s ease}
.mega__map-link:hover,.mega__map-link:focus-visible{background:rgba(255,255,255,.07)}
.mega__map-thumb{width:46px;height:46px;border-radius:999px;overflow:hidden;border:2px solid rgba(255,255,255,.85);background:#2a2a2a;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s ease}
.mega__map-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.mega__map-link:hover .mega__map-thumb{transform:scale(1.08);border-color:#97A97F}
.mega__map-label{display:block;font-size:17px;line-height:1.2;letter-spacing:-.01em}
.mega__map-desc{display:block;margin-top:2px;font-size:12.5px;color:rgba(255,255,255,.55)}
.mega__map-arrow{opacity:0;transform:translateX(-8px);transition:opacity .3s ease,transform .4s cubic-bezier(.2,.7,.2,1);color:#97A97F}
.mega__map-link:hover .mega__map-arrow,.mega__map-link:focus-visible .mega__map-arrow{opacity:1;transform:none}
.mega__map-link[aria-current="page"] .mega__map-label::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-radius:999px;background:#97A97F;vertical-align:3px}
@media (max-width:1100px){
.mega{width:calc(100vw - 48px)}
.mega__spot-label{font-size:26px}
.mega--map .mega__panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.mega__map-desc{display:none}
}
@media (max-width:860px){ .mega{display:none} }
@media (prefers-reduced-motion:reduce){
.mega,.mega *,.mega *::before,.mega *::after{transition-duration:.01ms !important;animation:none !important}
}
/* un singur cadru pe stare: fara miniaturi */
.hours--single .hours__thumbs{display:none}
/* Homepage „Daily rhythm": ora in loc de numar si 3 poze usor rotite care apar deasupra coloanei la hover
(tap pe touch). Intra crescand din blur, ies crescand mai departe si se sting in blur. site.js, „daily rhythm". */
.viz--day-pics{position:relative;z-index:3}
.section:has(.viz--day-pics){overflow-x:clip}
.viz--day-pics .viz__day{position:relative;cursor:default}
.viz--day-pics .viz__day-n{letter-spacing:.02em;color:var(--ink-soft);transition:color .3s ease}
.viz--day-pics .viz__day.is-on .viz__day-n{color:var(--ink)}
.viz__day-pics{--pw:190px;position:absolute;left:50%;bottom:calc(100% + 34px);width:0;height:0;pointer-events:none;transform:translateX(var(--dx,0px))}
.viz__day-pic{position:absolute;left:0;bottom:0;width:var(--pw);max-width:none;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;
box-shadow:0 22px 44px -18px rgba(17,17,17,.45);opacity:0;filter:blur(16px);
transform:translate(calc(-50% + var(--x)),var(--y)) rotate(calc(var(--r) * .4)) scale(.7);
transition:opacity .45s ease,filter .55s ease,transform .75s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--j) * 70ms);will-change:transform,opacity,filter}
.viz__day-pic:nth-child(1){--x:calc(var(--pw) * -.62);--y:18px;z-index:1}
.viz__day-pic:nth-child(2){--x:0px;--y:-14px;z-index:3}
.viz__day-pic:nth-child(3){--x:calc(var(--pw) * .62);--y:26px;z-index:2}
.viz__day.is-on .viz__day-pic{opacity:1;filter:blur(0);transform:translate(calc(-50% + var(--x)),var(--y)) rotate(var(--r)) scale(1)}
.viz__day.is-out .viz__day-pic{opacity:0;filter:blur(16px);transform:translate(calc(-50% + var(--x)),calc(var(--y) - 16px)) rotate(calc(var(--r) * 1.35)) scale(1.18);
transition-duration:.5s,.5s,.65s;transition-timing-function:ease,ease,cubic-bezier(.2,.7,.3,1);transition-delay:calc(var(--j) * 40ms)}
.viz__day.is-reset .viz__day-pic{transition:none}
@media (max-width:860px){ .viz__day-pics{--pw:132px;bottom:calc(100% + 22px)} }
@media (prefers-reduced-motion:reduce){
.viz__day-pic,.viz__day.is-on .viz__day-pic,.viz__day.is-out .viz__day-pic{filter:none;transform:translate(calc(-50% + var(--x)),var(--y)) rotate(var(--r));transition:opacity .3s ease}
}
/* ============ Built by Adept (homepage, deasupra footerului) ============
Filmul e anamorfic, 1920x720 dupa taierea benzilor negre: pe desktop ramane la 8:3, pe
telefon 2:1 (cover, taie putin din laterale) ca banda sa nu ajunga la ~130px inaltime. */
.adept__film{position:relative;margin:44px 0 0;border-radius:12px;overflow:hidden;background:var(--dark)}
.adept__film video{display:block;width:100%;height:auto;aspect-ratio:8/3;object-fit:cover}
@media (max-width:860px){
.adept__film{margin-top:26px;border-radius:10px}
.adept__film video{aspect-ratio:2/1}
}
/* ============ progress: film in locul imaginii mari + grila cu lightbox (/vision/) ============ */
.progress__lead-shot--video{background:var(--dark)}
.progress__lead-shot--video video{display:block;width:100%;height:auto;aspect-ratio:8/3;object-fit:cover}
.progress__zoom{display:block;width:100%;padding:0;border:0;background:none;color:#fff;cursor:zoom-in;position:relative;font:inherit}
.progress__zoom img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.progress__zoom:hover img{transform:scale(1.03)}
.progress__zoom:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:12px}
.progress__zoom-icon{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:36px;height:36px;border-radius:8px;background:rgba(15,15,15,.45);border:1px solid var(--glass-edge);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);opacity:.85;transition:opacity .3s ease,transform .3s ease}
.progress__zoom:hover .progress__zoom-icon,.progress__zoom:focus-visible .progress__zoom-icon{opacity:1;transform:scale(1.06)}
.lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(10,10,10,.94);color:#fff;overflow:hidden}
.lightbox::backdrop{background:transparent}
.lightbox[open]{animation:lightbox-in .25s ease both}
@keyframes lightbox-in{from{opacity:0}to{opacity:1}}
.lightbox__stage{position:absolute;inset:0;display:grid;place-items:center;padding:72px 88px}
.lightbox__img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:10px;opacity:0;transform:scale(.985);transition:opacity .3s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.lightbox__img.is-in{opacity:1;transform:none}
.lightbox__count{position:absolute;left:24px;top:24px;color:rgba(255,255,255,.72)}
.lightbox__btn{position:absolute;display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:10px;border:1px solid var(--glass-edge);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;transition:background .2s ease}
.lightbox__btn:hover{background:rgba(255,255,255,.18)}
.lightbox__btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lightbox__close{right:20px;top:14px}
.lightbox__prev,.lightbox__next{top:50%;margin-top:-24px}
.lightbox__prev{left:20px}
.lightbox__next{right:20px}
.lightbox.is-single .lightbox__prev,.lightbox.is-single .lightbox__next,.lightbox.is-single .lightbox__count{display:none}
@media (max-width:860px){
.progress__lead-shot--video video{aspect-ratio:2/1}
.progress__zoom-icon{width:32px;height:32px;right:10px;bottom:10px}
.lightbox__stage{padding:64px 12px 84px}
.lightbox__prev,.lightbox__next{top:auto;bottom:18px;margin-top:0}
.lightbox__prev{left:auto;right:76px}
.lightbox__count{top:auto;bottom:34px;left:20px}
}
@media (hover:none){.progress__zoom:hover img{transform:none}}
@media (prefers-reduced-motion:reduce){.lightbox[open]{animation:none}.lightbox__img,.progress__zoom img{transition:none}}
/* ===================== 2026-09-17 · sinteza meeting 16 Sep =====================
Tot ce e nou sta aici, la final, ca sa bata regulile mai vechi (fisierul nu e mobile-last). */
/* hero homepage fara statistici si carduri: textul coboara spre baza cadrului */
.hero--welcome .hero__inner{justify-content:flex-end;padding-block:170px 88px}
.hero--welcome .hero__title{max-width:14ch}
.hero--welcome .hero__lead{max-width:48ch}
/* randuri de cifre cu 3 coloane (Residences, At a glance) */
@media (min-width:861px){
.figures--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.figures--3 .figure:nth-child(3n+1){border-left:0;padding-left:0}
.figures--3 .figure:nth-child(n+4){border-top:1px solid var(--line);margin-top:28px}
}
.figures--glance .figure__label{max-width:30ch}
.glance__note{margin-top:32px;max-width:78ch;color:var(--muted,rgba(17,17,17,.6))}
.btn-row--spaced{margin-top:40px}
/* filmul master pe homepage */
.film__frame{position:relative;margin:44px 0 0;border-radius:12px;overflow:hidden;background:var(--dark)}
.film__frame video,.film__frame img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.film__frame img{filter:brightness(.62)}
.film__soon{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;gap:8px;padding:32px;color:#fff}
.film__soon .section-label{color:rgba(255,255,255,.75)}
/* harta masterplanului: TOTI pinii isi tin eticheta mereu vizibila (2026-09-28; inainte doar Phase One
si arena), ca harta sa raspunda singura la „unde ma uit?". Scopul `.mpx__stage >` tine regula doar
pe harta masterplanului: .mpx__pin e refolosit si pe flythrough si pe harta regionala.
Pinul activ isi ascunde in continuare eticheta: fisa deschisa il numeste. */
@media (min-width:861px){
.mpx__stage > .mpx__pin:not(.is-active) .mpx__pin-label{max-width:220px;opacity:1;margin-left:8px;padding:8px 12px}
}
/* Ancora pinului e CENTRUL BULINEI, nu centrul butonului: hx/hy din district-data.php indica
cladirea, iar cu eticheta vizibila translate(-50%) al intregului buton muta bulina spre stanga
cu jumatate din latimea etichetei (~31-50px). 6px = padding-ul butonului. */
.mpx__stage > .mpx__pin{transform:translate(calc(-6px - var(--thumb) / 2),-50%)}
/* eticheta in stanga bulinei ('side'=>'left' in district-data.php); ancora ramane centrul bulinei */
.mpx__stage > .mpx__pin--left{flex-direction:row-reverse;transform:translate(calc(-100% + 6px + var(--thumb) / 2),-50%)}
.mpx__pin--left::after{left:auto;right:calc(6px + var(--thumb) / 2);transform:translate(50%,-50%) rotate(45deg)}
@media (min-width:861px){
.mpx__stage > .mpx__pin--left:not(.is-active) .mpx__pin-label{margin-left:0;margin-right:8px}
}
/* pe desktop ingust (861-1279) grupul C / D / F / G / L se strange: bulinele si etichetele scad putin,
altfel eticheta Lot C atinge pinul Lot L (masurat la 1100). */
@media (min-width:861px) and (max-width:1279px){
.mpx__stage > .mpx__pin{--thumb:44px}
.mpx__stage > .mpx__pin:not(.is-active) .mpx__pin-label{font-size:12px;padding:6px 9px}
.mpx__stage > .mpx__pin:not(.is-active) .mpx__pin-label--logo{padding:5px 9px}
.mpx__pin-label--logo img{height:18px}
}
/* sub 1100 mai strans o treapta (masurat la 870 si 960: C/L si F/G se atingeau) */
@media (min-width:861px) and (max-width:1099px){
.mpx__stage > .mpx__pin{--thumb:36px}
.mpx__stage > .mpx__pin:not(.is-active) .mpx__pin-label{font-size:11px;padding:5px 7px;margin-left:5px}
.mpx__stage > .mpx__pin--left:not(.is-active) .mpx__pin-label{margin-left:0;margin-right:5px}
.mpx__stage > .mpx__pin:not(.is-active) .mpx__pin-label--logo{padding:4px 7px}
.mpx__pin-label--logo img{height:16px}
}
/* Toyota Arena: marca reala in loc de text, pe pastila alba (logoul e negru si rosu) */
.mpx__pin-label--logo{background:rgba(255,255,255,.95)}
.mpx__pin-label--logo img{display:block;height:20px;width:auto}
@media (min-width:861px){
.mpx__stage > .mpx__pin:not(.is-active) .mpx__pin-label--logo{padding:6px 11px}
}
.mpx__card-title--logo img{display:block;height:34px;width:auto;margin:2px 0 4px}
/* fazele de pe /masterplan/ */
.phaselist{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px}
.phaselist__item{display:flex;flex-direction:column;gap:12px;padding-top:22px;border-top:1px solid var(--line)}
.phaselist__k{color:rgba(17,17,17,.55)}
.phaselist__lots{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.phaselist__lots li{font-size:15px;line-height:1.45}
.phaselist__lots b{font-weight:500;margin-right:6px}
.phaselist__lots span{color:rgba(17,17,17,.66)}
@media (max-width:1100px){ .phaselist{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){ .phaselist{grid-template-columns:1fr;gap:28px;margin-top:34px} }
/* lista cu bife (Plaza: ecranele; Retail Leasing) */
.checks{list-style:none;margin:6px 0 4px;padding:0;display:flex;flex-direction:column;gap:12px}
.checks li{position:relative;padding-left:28px;font-size:16px;line-height:1.45}
.checks li::before{content:"";position:absolute;left:0;top:.28em;width:16px;height:16px;border-radius:50%;background:currentColor;opacity:.16}
.checks li::after{content:"";position:absolute;left:5px;top:calc(.28em + 4px);width:6px;height:4px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg)}
.section--dark .figures--3{margin-top:72px}
/* Status pe Edge / Echo (inc/lot-status.php) */
.status{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:48px 0 0;border-top:1px solid var(--line)}
.status__item{display:flex;flex-direction:column;gap:10px;padding:24px 24px 4px 0}
.status__item + .status__item{padding-left:24px;border-left:1px solid var(--line)}
.status__item dt{color:rgba(17,17,17,.55)}
.status__item dd{margin:0}
@media (max-width:860px){
.status{grid-template-columns:1fr 1fr;margin-top:34px}
.status__item:nth-child(odd){padding-left:0;border-left:0}
.status__item:nth-child(n+3){border-top:1px solid var(--line)}
}
/* Sectiunea de leasing: limbaj mai sec, hero mai scund, cifrele imediat sub el */
.hero--lease{min-height:min(58svh,560px)}
.hero--lease .hero__title{max-width:20ch}
/* filmul: textul „Premiering soon” are nevoie de umbra jos */
.film__frame::after{content:"";position:absolute;inset:40% 0 0 0;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55));pointer-events:none}
.film__soon{z-index:1}
.film__frame:has(video)::after{display:none}
/* ============ at a glance: mini-grafice pe fiecare cifra (homepage, inc/glance.php) ============
Directia A, aleasa 2026-09-28. Totul porneste cand site.js pune .is-on pe [data-glance];
intarzierile vin inline din PHP. Fara .is-on (inainte de scroll) desenele sunt goale.
PERFORMANTA (2026-09-28, „se misca super slow si staggered"): tot blocul se termina in ~1s si
tine putine tranzitii simultane. Ferestrele NU mai au tranzitie fiecare (erau 261, cu umbra
luminoasa) — grila se aprinde dintr-un singur clip-path. Scaunele se coloreaza pe randuri (),
nu cerc cu cerc. Nu reintroduce intarzieri per element pe grilele mari. */
.glance{--gl-p1:#5E7248;--gl-light:#C9D6B6;--gl-lit:#D9AE55;--gl-ease:cubic-bezier(.2,.7,.2,1)}
.glance .figure{gap:14px}
.glance__viz{height:76px;display:flex;align-items:flex-end}
.glance__viz--phases{flex-direction:column;align-items:flex-start;justify-content:flex-end}
.glance__key{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:-2px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.glance__key span{display:inline-flex;align-items:center;gap:6px}
.glance__key i{width:8px;height:8px;border-radius:2px;display:block}
.glance .gl-p1{background:var(--gl-p1);fill:var(--gl-p1)}
.glance .gl-muted{background:var(--muted)}
.glance .gl-light{background:var(--gl-light)}
.glance .gl-ink{background:var(--ink);fill:var(--ink)}
.glance .gl-line{background:var(--line)}
/* rezidente */
.gl-dots{display:grid;grid-template-columns:repeat(30,1fr);gap:4px;width:100%;max-width:300px}
.gl-dots b{aspect-ratio:1;border-radius:50%;background:var(--line);transform:scale(0);transition:transform .3s var(--gl-ease)}
.gl-dots b.is-p1{background:var(--gl-p1)}
.glance.is-on .gl-dots b{transform:scale(1)}
/* comercial */
.gl-stack{display:flex;gap:3px;width:100%;max-width:320px;height:22px}
.gl-stack span{height:100%;border-radius:4px;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--gl-ease)}
.glance.is-on .gl-stack span{transform:scaleX(1)}
/* hotel */
.gl-windows{position:relative;display:grid;grid-template-columns:repeat(30,1fr);gap:2px;width:208px;padding:6px;border-radius:6px;background:#fff}
.gl-windows b{aspect-ratio:1;border-radius:1px;background:#ECE7DE}
.gl-windows b.is-lit,.gl-windows b:not(.is-lit).is-flip{background:var(--gl-lit)}
.gl-windows b.is-lit.is-flip{background:#ECE7DE}
/* luminile se aprind de jos in sus, dintr-un singur strat: un capac intunecat care se retrage */
.gl-windows::after{content:"";position:absolute;inset:6px;background:#fff;transform-origin:top;transition:transform .8s var(--gl-ease) .1s}
.glance.is-on .gl-windows::after{transform:scaleY(0)}
/* teatru */
.gl-seats{width:100%;max-width:300px;height:76px;overflow:visible}
.gl-seats__row{fill:var(--line);transition:fill .3s}
.glance.is-on .gl-seats__row{fill:var(--ink)}
.glance.is-on .gl-seats__bb{fill:var(--gl-p1)}
.gl-seats text,.gl-flow text{font-family:var(--mono);font-size:7px;letter-spacing:.06em;fill:var(--muted)}
/* arena -> Plaza */
.gl-flow{width:100%;max-width:320px;height:76px;overflow:visible}
.gl-flow__path{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:3 5}
.gl-flow__plaza{fill:none;stroke:var(--gl-p1);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gl-flow__plaza .gl-flow__fill{fill:var(--gl-p1);fill-opacity:.16}
.gl-flow__water{stroke-width:1.3}
.gl-flow__dots{opacity:0;transition:opacity .6s}
.glance.is-on .gl-flow__dots{opacity:1}
/* faze */
.gl-phases{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;width:100%;max-width:320px}
.gl-phases span{position:relative;height:22px;border-radius:4px;background:var(--line);overflow:hidden}
.gl-phases span::after{content:"";position:absolute;inset:0;background:var(--muted);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--gl-ease) var(--d,0s)}
.gl-phases span:first-child::after{background:var(--gl-p1)}
.glance.is-on .gl-phases span::after{transform:scaleX(1)}
.gl-phases span:first-child::before{content:"";position:absolute;right:5px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#fff;z-index:1;opacity:0}
.glance.is-on .gl-phases span:first-child::before{animation:gl-pulse 1.8s .8s infinite}
@keyframes gl-pulse{0%{opacity:1;transform:scale(1)}70%{opacity:0;transform:scale(2.4)}100%{opacity:0}}
.gl-phases__lbl{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;width:100%;max-width:320px;margin-top:6px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted)}
.gl-phases__lbl .is-p1{color:var(--gl-p1)}
/* pe telefon o coloana: in doua coloane punctele si ferestrele ar fi prea mici */
@media (max-width:860px){
.figures--glance{grid-template-columns:1fr}
.figures--glance .figure{border-left:0;padding:24px 0 8px}
.figures--glance .figure + .figure{border-top:1px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){
.glance *,.glance *::before,.glance *::after{transition:none!important;animation:none!important}
}
/* ============ /the-plaza „The screens": video full-screen derulat pe scroll (2026-09-28) ============
Sectiunea e inalta; scena de 100vh sta lipita cat treci prin ea, iar procentul de derulare =
momentul din video. Posterul (primul cadru) sta sub video pana e gata. Textul, centrat jos. */
.sscroll{position:relative;height:260vh;background:#0d0e12;color:#fff}
.sscroll__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.sscroll__poster,.sscroll__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1 + var(--sp,0) * .12));transform-origin:50% 55%;will-change:transform}
.sscroll__video{opacity:0;transition:opacity .4s ease}
.sscroll.is-ready .sscroll__video{opacity:1}
.sscroll__scrim{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,.16) 44%,rgba(0,0,0,.62) 66%,rgba(0,0,0,.84) 86%,rgba(0,0,0,.9) 100%)}
.sscroll__scrim::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
-webkit-mask-image:linear-gradient(to top,#000 0%,transparent 100%);mask-image:linear-gradient(to top,#000 0%,transparent 100%)}
.sscroll__text{position:absolute;left:0;right:0;bottom:clamp(40px,8vh,88px);display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.sscroll__text .eyebrow{align-self:center}
.sscroll__title{max-width:20ch;text-wrap:balance}
.sscroll__lead{max-width:52ch;color:rgba(255,255,255,.8);text-wrap:balance}
.sscroll__text .btn-row{justify-content:center;margin-top:6px}
/* fara scroll-scrub (reduced motion / fara JS): o singura scena, cu posterul */
.sscroll.is-static{height:auto}
.sscroll.is-static .sscroll__stage{position:relative}
@media (max-width:860px){
.sscroll{height:220vh}
.sscroll__text{bottom:32px;gap:14px}
}
/* ============ bara de navigare: linkurile centrate in grila (2026-09-28; initial la dreapta, recentrate la cererea userului ca mega-meniurile sa cada sub ele) ============
Dupa ce „Inquire" a iesit din bara, dreapta ramasese goala. Inainte .nav__links era centrat cu
position:absolute + left:50%, ceea ce ii limita latimea la jumatatea barei: la ~1100px
„Retail Leasing" se rupea pe doua randuri. Acum linkurile stau in fluxul grilei, in dreapta, si
nu se mai rup niciodata (nowrap). margin-right 11px + padding-ul barei (9px) = 20px, cat are logoul
in stanga.
Mega-meniurile erau centrate pe .nav__links (containing block din cauza transform-ului). Fara el,
containing block devine .nav — tot centrul barei, deci aceeasi pozitie orizontala; pe verticala
top-ul se recalculeaza din inaltimea barei, ca panoul sa se deschida la aceeasi distanta ca inainte
(~10px sub bara, masurat: identic cu inainte). Pe telefon (<=860) nimic nu se schimba: acolo linkurile sunt ascunse. */
@media (min-width:861px){
.nav{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);padding-right:20px}
.nav__links{position:static;transform:none;grid-column:2;justify-self:center;margin-right:0;align-self:stretch;align-items:stretch}
/* 2026-09-28: fiecare item ocupa toata inaltimea barei si puntea acopera tot golul pana la panou (padding-ul barei 9px + 10.5px), ca meniul sa nu se inchida pe drum */
.nav__item{display:flex;align-items:center}
.mega{transition:transform .45s cubic-bezier(.2,.7,.2,1),visibility 0s linear .4s}
.nav__link{white-space:nowrap}
.mega{top:calc(100% + 10.5px)}
.mega::before{top:-22px;height:24px}
}
@media (min-width:861px) and (max-width:1023px){ .nav__links{gap:28px} }
/* filmul: in loc de „Premiering soon", un buton play centrat (decorativ, video-ul inca nu exista) */
.film__soon{inset:0;align-items:center;justify-content:center;padding:0}
.film__frame::after{display:none}
.film__play{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 20px 50px -20px rgba(0,0,0,.6);transition:transform .35s ease,background .35s ease}
.film__play svg{width:34px;height:34px;margin-left:5px;fill:#fff}
.film__frame:hover .film__play{transform:scale(1.06);background:rgba(255,255,255,.24)}
@media (max-width:760px){.film__play{width:68px;height:68px}.film__play svg{width:24px;height:24px;margin-left:4px}}
@media (prefers-reduced-motion:reduce){.film__play{transition:none}}
/* 2026-09-28: titlu centrat (Retail / Residential pe homepage) */
.section__head--center{align-items:center;text-align:center;margin-inline:auto}
.section__head--center .eyebrow{align-self:center}
/* ============ Edge: „Who walks in" (inc/edge-reach.php, 2026-09-28, v2) ============
Asezarea de pe /lease/trade-area/: text + patru cifre mici pe un rand stanga, graficul „flow" dreapta. */
.reach__split{align-items:center}
/* coloane pe masura continutului + spatiul ramas impartit egal (auto + stretch): „384" nu mai ia un sfert din rand */
.figures--sm{grid-template-columns:repeat(4,auto);margin-top:32px}
.figures--sm .figure{padding:20px 14px 2px 0;gap:6px}
.figures--sm .figure:not(:first-child){padding-left:16px}
.figures--sm .t-52{font-size:30px}
.figures--sm .figure__suffix{font-size:15px}
.figures--sm .figure__label{font-size:14px}
@media (min-width:861px) and (max-width:1180px){ .figures--sm .t-52{font-size:24px} .figures--sm .figure__label{font-size:13px} }
@media (max-width:860px){
.figures--sm{grid-template-columns:repeat(2,minmax(0,1fr))}
.figures--sm .figure:nth-child(odd){border-left:0;padding-left:0}
}
.flow{--fl-g:#5E7248;margin:0;min-width:0}
.flow__stage{position:relative;aspect-ratio:720/520}
.flow__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flow__grid-dot{fill:var(--line)}
.flow__wave{fill:none;stroke:var(--fl-g);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
.flow.is-in .flow__wave{animation:flow-wave 4s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes flow-wave{0%{transform:scale(.9);opacity:.55}100%{transform:scale(3.7);opacity:0}}
.flow__path{fill:none;stroke:var(--line);stroke-width:1.2;stroke-dasharray:3 6;transition:stroke .4s,stroke-width .4s}
.flow__dot{fill:var(--fl-g)}
.flow__src{transition:opacity .45s}
.flow.has-active .flow__src{opacity:.28}
.flow.has-active .flow__src.is-active{opacity:1}
.flow__src.is-active .flow__path{stroke:var(--fl-g);stroke-width:1.8;animation:flow-dash 1s linear infinite}
@keyframes flow-dash{to{stroke-dashoffset:-18}}
.flow__core{position:absolute;left:50%;top:50.4%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;
width:25%;aspect-ratio:1;border-radius:50%;background:var(--ink);color:#fff;box-shadow:0 18px 40px -18px rgba(17,17,17,.55)}
.flow__core.is-bump{animation:flow-bump .5s cubic-bezier(.2,.7,.2,1)}
@keyframes flow-bump{40%{transform:translate(-50%,-50%) scale(1.06)}}
.flow__num{font-size:clamp(20px,2.3vw,32px);letter-spacing:-.03em;line-height:1}
.flow__lbl{margin-top:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.flow__pill{position:absolute;transform:translate(-50%,-50%) translateY(8px);display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;
padding:8px 13px 9px 11px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
font:inherit;color:var(--ink);text-align:left;white-space:nowrap;cursor:pointer;opacity:0;
box-shadow:0 10px 26px -18px rgba(17,17,17,.45);transition:opacity .5s ease var(--d,0s),transform .5s cubic-bezier(.2,.7,.2,1) var(--d,0s),background .3s,color .3s,border-color .3s,box-shadow .3s}
.flow.is-in .flow__pill{opacity:1;transform:translate(-50%,-50%)}
.flow__pill i{grid-row:span 2;position:relative;width:8px;height:8px;border-radius:50%;background:var(--fl-g)}
.flow__pill i::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--fl-g);opacity:0}
.flow__pill b{font-weight:500;font-size:14px;line-height:1.2}
.flow__pill span{font-size:11.5px;line-height:1.3;color:var(--muted)}
.flow__pill:hover,.flow__pill:focus-visible{border-color:var(--fl-g)}
.flow__pill:focus-visible{outline:2px solid var(--fl-g);outline-offset:2px}
.flow__pill.is-active{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 14px 30px -14px rgba(17,17,17,.6)}
.flow__pill.is-active span{color:rgba(255,255,255,.72)}
.flow__pill.is-active i{background:#9DB57F}
.flow__pill.is-active i::after{border-color:#9DB57F;animation:flow-ping 1.4s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes flow-ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.8);opacity:0}}
@media (max-width:560px){
.flow__pill{padding:6px 10px 7px 9px}
.flow__pill b{font-size:12px}
.flow__pill span{display:none}
.flow__lbl{font-size:8px}
}
@media (prefers-reduced-motion:reduce){
.flow.is-in .flow__wave{animation:none}
.flow__dot{display:none}
.flow__pill{opacity:1;transform:translate(-50%,-50%);transition:background .3s,color .3s}
.flow__src.is-active .flow__path{animation:none}
.flow__core.is-bump{animation:none}
}
/* cercul din centru: fotografii care se schimba, sub un strat inchis ca cifra sa ramana lizibila */
.flow__core{overflow:hidden;isolation:isolate}
.flow__core-media{position:absolute;inset:0;z-index:-2}
.flow__core-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .9s ease,transform 3.4s ease-out}
.flow__core-media img.is-on{opacity:1;transform:scale(1)}
.flow__core::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(12,12,12,.62) 0%,rgba(12,12,12,.74) 70%,rgba(12,12,12,.86) 100%)}
.flow__num,.flow__lbl{text-shadow:0 1px 12px rgba(0,0,0,.45)}
@media (prefers-reduced-motion:reduce){ .flow__core-media img{transition:none;transform:none} }
/* /lease/: suprafata de retail in hero, dreapta jos, mica si alba (2026-09-28) */
.hero--lease .hero__inner{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:40px}
.hero__stat{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right;color:#fff}
.hero__stat-v{display:flex;align-items:baseline;gap:4px;margin:0;font-variant-numeric:tabular-nums}
.hero__stat-u{font-size:18px;color:rgba(255,255,255,.75)}
.hero__stat-l{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
@media (max-width:860px){ .hero--lease .hero__inner{flex-direction:column;align-items:flex-start;justify-content:flex-end} .hero__stat{align-items:flex-start;text-align:left} }
/* ============ /lease/: colaj pe toata latimea intre „Why" si „Sources of demand" (2026-09-28) ============ */
.collage{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,clamp(150px,15vw,270px));gap:8px;padding:8px;background:var(--cream)}
.collage__tile{position:relative;margin:0;overflow:hidden;border-radius:12px;background:#1c1c1c;
clip-path:inset(100% 0 0 0 round 12px);transition:clip-path 1s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 90ms)}
.collage.is-in .collage__tile{clip-path:inset(0 0 0 0 round 12px)}
.collage__tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.14);
transition:transform 1.6s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 90ms)}
.collage.is-in .collage__tile img{transform:scale(1)}
.collage.is-in .collage__tile:hover img{transform:scale(1.04);transition-duration:.8s;transition-delay:0s}
.collage__tile figcaption{position:absolute;left:12px;bottom:12px;padding:6px 10px;border-radius:999px;background:rgba(16,16,16,.5);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:var(--sans);font-size:13px;line-height:1.2;letter-spacing:0;text-transform:none;color:#fff}
.collage__tile--1{grid-column:1 / 3;grid-row:1 / 3}
.collage__tile--2{grid-column:3;grid-row:1}
.collage__tile--3{grid-column:3;grid-row:2}
.collage__tile--4{grid-column:4 / 6;grid-row:1 / 3}
.collage__tile--5{grid-column:6;grid-row:1}
.collage__tile--6{grid-column:6;grid-row:2}
.collage[data-reveal]{opacity:1;transform:none;animation:none}
@media (max-width:860px){
/* pe telefon: proportii de peisaj (imaginile sunt 3:2 / 16:9), nu randuri fixe care le taiau prea mult */
.collage{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto}
.collage__tile--1,.collage__tile--4{grid-column:span 2;grid-row:auto;aspect-ratio:3 / 2}
.collage__tile--2,.collage__tile--3,.collage__tile--5,.collage__tile--6{grid-column:auto;grid-row:auto;aspect-ratio:4 / 3}
.collage__tile figcaption{left:8px;bottom:8px;padding:5px 9px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){ .collage__tile{clip-path:none;transition:none} .collage__tile img{transform:none;transition:none} }
/* /lease/: fundalul luminos (Round Bar, zi) are nevoie de un strat mai inchis sub text, jos si in stanga */
.hero--lease .hero__scrim{background:linear-gradient(0deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.28) 55%,rgba(0,0,0,.18) 100%),linear-gradient(90deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 60%)}
/* parallax pe mouse (site.js, „mouse parallax"): imaginea se misca invers fata de cursor, cu intarziere.
Marita 8% ca marginile sa nu se vada niciodata. Folosit pe hero-ul /lease/ (2026-09-28). */
[data-mouse-parallax]{overflow:hidden}
[data-mouse-parallax] .hero__bg-img{transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(1.08);will-change:transform}
@media (prefers-reduced-motion:reduce){ [data-mouse-parallax] .hero__bg-img{transform:none} }
/* /lease/, „Sources of demand": etichetele cardurilor in fontul textului, doar prima litera mare (2026-09-28) */
#demand .blog-card__date .section-label{font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none}
/* /lease/, „Sources of demand" pe telefon: carduri unul sub altul, nu carusel (2026-09-28) */
@media (max-width:860px){
.blog__grid.dayparts--leasing{flex-direction:column;gap:14px;overflow:visible;scroll-snap-type:none;margin-inline:0;padding-inline:0}
.dayparts--leasing .blog-card{flex:none;width:100%;aspect-ratio:auto;min-height:clamp(340px,95vw,460px)}
.dayparts--leasing .blog-card__title{font-size:30px}
}
/* ============ homepage „The Vision" pe telefon (2026-09-28): rand swipe-abil, ~1.2 imagini vizibile,
„Phase One / Ontario" sub imagini. Avans automat + swipe manual: site.js, „about swipe". ============ */
.about__meta--below{display:none}
@media (max-width:860px){
.about__head .about__meta{display:none}
.about__images{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
padding-inline:var(--pad);scroll-padding-inline:var(--pad);padding-bottom:0}
.about__images::-webkit-scrollbar{display:none}
.about__track{animation:none;gap:12px;padding-right:var(--pad)}
.about__group{gap:12px}
.about__group[aria-hidden]{display:none}
.about__figure{width:calc((100vw - var(--pad) - 12px) / 1.2);max-width:none;aspect-ratio:4/3;scroll-snap-align:start}
.about__meta--below{display:flex;padding-top:22px;padding-bottom:56px}
}
/* ============ telefon (2026-09-28): „Construction progress" ca slider, pe toate paginile cu inc/progress.php ============ */
.progress__item--m{display:none}
@media (max-width:860px){
.progress__lead-shot:not(.progress__lead-shot--video){display:none}
.progress__lead-shot:not(.progress__lead-shot--video) + .progress__grid{margin-top:26px}
.progress__item--m{display:block}
.progress__grid{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
-webkit-overflow-scrolling:touch;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-inline:var(--pad)}
.progress__grid::-webkit-scrollbar{display:none}
.progress__grid::after{content:"";flex:0 0 calc(var(--pad) - 12px)}
.progress__item{flex:0 0 calc((100vw - var(--pad) - 12px) / 1.2);scroll-snap-align:start}
.progress__figure img{aspect-ratio:4/3}
}
/* ============ telefon (2026-09-28): „At a glance" pe homepage in grila 2 x 2, totul mai mic ============ */
@media (max-width:860px){
.figures--glance{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;border-top:0}
.figures--glance .figure,.figures--glance .figure + .figure{border-left:0;border-top:1px solid var(--line);padding:18px 0 6px;gap:10px}
.glance__viz{height:50px}
.glance .figure__value .t-52{font-size:28px}
.glance .figure__suffix{font-size:15px}
.figures--glance .figure__label{font-size:13px;line-height:1.35}
.glance__key{font-size:9px;letter-spacing:.06em;gap:4px 8px}
.glance__key i{width:6px;height:6px}
.gl-dots{gap:2px}
.gl-stack,.gl-phases span{height:14px}
.gl-windows{width:100%;max-width:170px;padding:4px;gap:1px}
.gl-seats,.gl-flow{height:50px}
.gl-phases__lbl{font-size:9px}
}
/* ============ meeting 30 Sep, aplicat 2026-10-01 ============ */
/* Edge: fara miscare directionala pe harta („ants"). Liniile de privire si drumul de la arena raman,
punctate, dar statice; fantana si undele din Plaza (apa) se misca in continuare. */
.front__sight,.front__route{animation:none}
/* At a glance: comunitatea din jur (gri, nu sunt unitati Capital City) si fazele fara numar */
.gl-dots--near b{background:var(--muted)}
.gl-phases--multi{grid-template-columns:1fr 3fr}
.gl-phases--multi span:last-child::after{background:linear-gradient(90deg,var(--muted) 0,var(--muted) 45%,rgba(0,0,0,0))}
.gl-phases__lbl--multi{grid-template-columns:1fr 3fr;white-space:nowrap}
/* Edge: wordmark-ul de brand (SVG) in locul cuvantului scris in Geist. Latime plina, ca vechiul data-fit;
2026-10-05 (cerut de user): tot g-ul se vede; wordmark-ul urcat, cu un mic spatiu sub coada lui g
(inainte coada era taiata cu margin-bottom:-4%). */
.hero__wordmark.hero__wordmark--brand{font-size:0;line-height:0;letter-spacing:0;margin:0;padding:0;width:100%;translate:none}
.hero__wordmark--brand svg{display:block;width:100%;height:auto;margin-bottom:0}
/* fara data-reveal: pe telefon wordmark-ul sta lipit de marginea de jos, sub linia de 90% a observer-ului,
si nu aparea niciodata. Fiind in hero, apare la incarcare cu aceeasi animatie. */
.hero__wordmark--brand{animation:reveal .8s cubic-bezier(.2,.6,.2,1) .15s backwards}
@media (prefers-reduced-motion:reduce){.hero__wordmark--brand{animation:none}}
.lwm__soft{fill:#efeae6;opacity:.8}
.lwm__solid{fill:#efeae6}
/* /lease/ colaj (2026-10-01): etichetele apar doar la hover, nu stau peste imagini */
.collage__tile figcaption{opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.collage__tile:hover figcaption,.collage__tile:focus-within figcaption{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .collage__tile figcaption{transition:none;transform:none} }
/* 2026-10-05 (cerut de user): pe planul suitelor (Available Spaces, Edge, Echo) suprafata (SF) apare doar la
hover, la focus din tastatura si pe suita selectata, ca etichetele sa nu mai acopere desenul. Pe telefon
(fara hover) se vede dupa tap, pe suita selectata. Suita de sub cursor trece deasupra vecinelor. */
.plan-x__tagsf{display:none}
.plan-x__spot:hover .plan-x__tagsf,.plan-x__spot:focus-visible .plan-x__tagsf,.plan-x__spot.is-active .plan-x__tagsf{display:block}
.plan-x__spot--suite:hover,.plan-x__spot--suite:focus-visible{z-index:1500!important}
/* 2026-10-05: planul suitei in fisa (Edge, din Suite Floorplans ADEPT): intreg, pe alb, fara decupare 16:9 */
.plan-x__render.is-plan{background:#fff;border:1px solid var(--line)}
.plan-x__render.is-plan img{aspect-ratio:auto;object-fit:contain;max-height:300px;width:100%;padding:10px;box-sizing:border-box;background:#fff}
.plan-x__render.is-plan figcaption{padding:6px 10px 8px}
/* ============ 2026-10-05: At a glance, grafice reprezentative (inc/glance.php) ============
Rezidente = cladiri cu ferestre (Phase One verde, restul se aprind auriu si clipesc), comercial = strada
de vitrine cu copertine (culorile legendei), vecinatatea = case gri in jurul blocului verde Capital City.
Totul porneste cu .is-on (site.js); .is-built vine dupa constructie, ca ferestrele care clipesc sa nu
mai astepte intarzierea de la aprindere. Reduced motion: regula generala .glance * de mai sus. */
.glance .gl-lit{background:var(--gl-lit)}
.gl-svg{display:block;height:76px;width:auto;max-width:100%;overflow:visible}
.gl-bld__body{fill:#E6E0D5;transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .6s var(--gl-ease) var(--d,0ms)}
.gl-bld--p1 .gl-bld__body{fill:#DCE4D1}
.glance.is-on .gl-bld__body{transform:scaleY(1)}
.gl-bld__door{fill:#CBC3B5;opacity:0;transition:opacity .3s ease .5s}
.glance.is-on .gl-bld__door{opacity:1}
.gl-w{fill:#F8F5EF;opacity:0;transition:opacity .25s ease var(--d,0ms),fill .4s ease var(--d,0ms)}
.glance.is-on .gl-w{opacity:1}
.glance.is-on .gl-w--p1{fill:var(--gl-p1)}
.glance.is-on .gl-w--later{fill:var(--gl-lit)}
.glance.is-built .gl-w{transition-delay:0s}
.glance.is-built .gl-w--later.is-flip{fill:#F8F5EF}
.gl-ground{stroke:var(--line);stroke-width:1}
.gl-shop{opacity:0;transform:translateY(10px);transition:opacity .4s ease var(--d,0ms),transform .5s var(--gl-ease) var(--d,0ms)}
.glance.is-on .gl-shop{opacity:1;transform:none}
.gl-shop__body{fill:#fff;stroke:#DAD3C7;stroke-width:1}
.gl-shop__glass{fill:#DDE5E7}
.gl-shop__upper{fill:#E9EEF0}
.gl-shop__sign{fill:#EEE9E0}
.gl-shop__door{fill:#C7D1D4}
.gl-shop__awning{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);transition:transform .35s var(--gl-ease) calc(var(--d,0ms) + 350ms)}
.glance.is-on .gl-shop__awning{transform:scaleY(1)}
.gl-shop--p1 .gl-shop__awning{fill:var(--gl-p1)}
.gl-shop--muted .gl-shop__awning{fill:var(--muted)}
.gl-shop--light .gl-shop__awning{fill:var(--gl-light)}
.gl-house{fill:var(--muted);opacity:0;transform-box:fill-box;transform-origin:50% 100%;transform:scale(.2);transition:opacity .3s ease var(--d,0ms),transform .45s var(--gl-ease) var(--d,0ms)}
.glance.is-on .gl-house{opacity:.7;transform:none}
.gl-cc{fill:var(--gl-p1);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.6);transition:opacity .4s ease,transform .5s var(--gl-ease)}
.glance.is-on .gl-cc{opacity:1;transform:none}
.gl-cc__plaza{fill:none;stroke:#fff;stroke-width:1.5;opacity:0;transition:opacity .4s ease .3s}
.glance.is-on .gl-cc__plaza{opacity:.9}
@media (max-width:860px){.gl-svg{height:50px}}
/* ============ 2026-10-06: At a glance, pictograme moderne cu micro-animatii (inc/glance.php) ============
Linie de 1.6 px cu capete rotunjite, cerneala + verdele Phase One. Intrarea porneste cu .is-on; buclele
(punga, tacamurile, steluta, unda razei de mers, undele fantanii) merg doar cat blocul se vede (.is-live). */
.gl-ic{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gl-ic--p1{stroke:var(--gl-p1)}
.gl-accent{fill:var(--gl-p1)}
.gl-com__icon{opacity:0;transform:translateY(6px);transition:opacity .5s ease var(--d,0ms),transform .6s var(--gl-ease) var(--d,0ms)}
.glance.is-on .gl-com__icon{opacity:1;transform:none}
.gl-com__track{fill:rgba(17,17,17,.06)}
.gl-com__seg{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);transition:transform .8s var(--gl-ease) var(--d,0ms)}
.glance.is-on .gl-com__seg{transform:scaleX(1)}
.gl-com__seg--p1{fill:var(--gl-p1)}.gl-com__seg--muted{fill:var(--muted)}.gl-com__seg--light{fill:var(--gl-light)}
.gl-swing{transform-box:fill-box;transform-origin:50% 0;animation:gl-swing 3.2s ease-in-out infinite}
.gl-clink-l,.gl-clink-r{transform-box:fill-box;transform-origin:50% 100%;animation:gl-clink 3.2s ease-in-out infinite}
.gl-clink-r{animation-direction:reverse}
.gl-spark{transform-box:fill-box;transform-origin:center;animation:gl-spark 2.4s ease-in-out infinite}
.gl-spark--2{animation-delay:-1.2s}
@keyframes gl-swing{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes gl-clink{0%,70%,100%{transform:rotate(0)}80%{transform:rotate(7deg)}90%{transform:rotate(-2deg)}}
@keyframes gl-spark{0%,100%{transform:scale(.4) rotate(0);opacity:.2}50%{transform:scale(1) rotate(45deg);opacity:1}}
.gl-near__ring{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:2 4}
.gl-near__pulse{fill:none;stroke:var(--gl-p1);stroke-width:1.4;transform-box:fill-box;transform-origin:center;opacity:0}
.glance.is-on .gl-near__pulse{animation:gl-pulse-ring 3.6s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes gl-pulse-ring{0%{transform:scale(.08);opacity:.9}80%{opacity:.25}100%{transform:scale(1);opacity:0}}
.gl-near__house{fill:var(--muted);opacity:0;transform-box:fill-box;transform-origin:50% 100%;transform:scale(.3);transition:opacity .35s ease var(--d,0ms),transform .45s var(--gl-ease) var(--d,0ms)}
.glance.is-on .gl-near__house{opacity:.5;transform:none;animation:gl-house-lit 3.6s ease-in-out infinite;animation-delay:var(--p,0s)}
@keyframes gl-house-lit{0%,100%{opacity:.45}8%{opacity:1;fill:var(--ink)}30%{opacity:.45}}
.gl-near__shadow{fill:rgba(17,17,17,.12)}
.gl-near__pin{transform-box:fill-box;transform-origin:50% 100%}
.glance.is-on .gl-near__pin{animation:gl-pin 3.6s var(--gl-ease) infinite}
@keyframes gl-pin{0%,100%{transform:translateY(0)}6%{transform:translateY(-3px)}14%{transform:translateY(0)}}
.gl-plz__pave{fill:none;stroke:var(--gl-p1);stroke-opacity:.35;stroke-width:1}
.gl-plz__edge{fill:rgba(94,114,72,.08);stroke:var(--gl-p1);stroke-width:1.6}
.gl-plz__rip{fill:none;stroke:var(--gl-p1);stroke-width:1.2;transform-box:fill-box;transform-origin:center;opacity:0;animation:gl-rip 2.6s ease-out infinite}
.gl-plz__rip--2{animation-delay:-1.3s}
@keyframes gl-rip{0%{transform:scale(.2);opacity:.9}100%{transform:scale(1);opacity:0}}
.gl-plz__jet{fill:var(--gl-p1)}
.glance:not(.is-live) svg *{animation-play-state:paused}
/* 2026-10-06: Plaza pe cardul arenei = punct + unde transparente care cresc si se sting (fara contur) */
.gl-plz__core{fill:var(--gl-p1)}
.gl-plz__wave{fill:var(--gl-p1);transform-box:fill-box;transform-origin:center;opacity:0;animation:gl-wave 3.3s cubic-bezier(.25,.6,.35,1) infinite}
.gl-plz__wave--2{animation-delay:-1.1s}
.gl-plz__wave--3{animation-delay:-2.2s}
@keyframes gl-wave{0%{transform:scale(.18);opacity:.42}100%{transform:scale(1);opacity:0}}
/* ============ 2026-10-07: At a glance v2 — desene de arhitect cu micro-animatii (inc/glance-v2.php) ============
Cerut de user: v1 „not working with the premium feel". Un singur limbaj: linii fine de cerneala, acelasi sol (y=74),
un singur accent (verdele Phase One). Doua straturi de miscare:
- intrarea, o data, cu .is-on: liniile se traseaza, volumele ies din sol; ~1.4s pe card, decalat cu --c (80ms/card);
- bucle mici si lente, doar cat blocul se vede (regula `.glance:not(.is-live) svg *` de mai sus le pune pe pauza):
lifturile din turnuri, oamenii care se plimba in Plaza, reflectorul peste sala, publicul spre Plaza, steagul.
Pietonul de pe planul vecinatatii e SMIL (pauza din site.js, data-glance-flow).
Reduced motion: regula `.glance *` de mai sus -> stare finala, statica.
v1 ramane mai sus (.gl-*) si in inc/glance-v1.php; alegerea e in inc/glance.php (?glance=v1 / v2). */
.gx{--gx-ink:#111;--gx-hair:rgba(17,17,17,.3);--gx-faint:rgba(17,17,17,.075);--gx-p1:#5E7248;--gx-sage:#97A97F;--gx-light:#C9D6B6;
--gx-in:cubic-bezier(.2,.7,.2,1);--gx-line:cubic-bezier(.65,0,.35,1);--gx-sw:1}
.gx-svg{display:block;height:76px;width:auto;max-width:100%;overflow:visible}
.gx-hl{fill:none;stroke:var(--gx-hair);stroke-width:var(--gx-sw);stroke-linecap:round}
.gx-draw{stroke-dasharray:1 1.2;stroke-dashoffset:1.1;transition:stroke-dashoffset .9s var(--gx-line) calc(var(--c,0ms) + var(--d,0ms))}
.gx.is-on .gx-draw{stroke-dashoffset:0}
.gx-fade{opacity:0;transition:opacity .8s ease calc(var(--c,0ms) + var(--d,0ms))}
.gx.is-on .gx-fade{opacity:1}
/* rezidente: turnurile ies din sol (clip static), lifturile urca si coboara */
.gx-tw{transform:translateY(80px);transition:transform 1.05s var(--gx-in) calc(var(--c,0ms) + var(--d,0ms))}
.gx.is-on .gx-tw{transform:none}
.gx-tw__glass{fill:rgba(17,17,17,.035)}
.gx-tw--p1 .gx-tw__glass{fill:rgba(94,114,72,.11)}
.gx-tw__slab{fill:var(--muted)}
.gx-tw--p1 .gx-tw__slab{fill:var(--gx-p1)}
.gx-tw__core{stroke:rgba(17,17,17,.14);stroke-width:var(--gx-sw)}
.gx-tw--p1 .gx-tw__core{stroke:rgba(94,114,72,.35)}
.gx-lift{fill:var(--gx-ink);fill-opacity:.85}
.gx.is-on .gx-lift{animation:gx-lift var(--t,8s) cubic-bezier(.45,0,.25,1) calc(var(--c,0ms) + 1.5s) infinite}
@keyframes gx-lift{0%,12%{transform:translateY(0)}44%,58%{transform:translateY(var(--h,-30px))}90%,100%{transform:translateY(0)}}
/* culorile fazelor (vitrinele din Plaza) */
.gx-seg--p1{fill:var(--gx-p1)}.gx-seg--muted{fill:var(--muted)}.gx-seg--light{fill:var(--gx-light)}
/* vecinatate: strazile apar, casele se aprind de la centru spre margine (2026-10-07: fara cercul razei) */
.gx-grid{fill:none;stroke:var(--gx-faint);stroke-width:var(--gx-sw)}
.gx-cc{fill:var(--gx-p1);transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .6s var(--gx-in) calc(var(--c,0ms) + 100ms)}
.gx.is-on .gx-cc{transform:none}
.gx-home{fill:var(--muted);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0);
transition:opacity .35s ease calc(var(--c,0ms) + var(--d,0ms)),transform .5s var(--gx-in) calc(var(--c,0ms) + var(--d,0ms))}
.gx.is-on .gx-home{opacity:var(--o,1);transform:none}
.gx-trail{fill:none;stroke:var(--gx-p1);stroke-width:calc(var(--gx-sw) * 1.3);stroke-linecap:round;stroke-linejoin:round}
.gx-ping{fill:none;stroke:var(--gx-p1);stroke-width:var(--gx-sw)}
.gx-home-on{fill:var(--gx-p1)}
.gx-walker{fill:var(--gx-ink)}
/* teatru: randurile se ridica de la scena spre spate, apoi un reflector verde trece peste locuri */
.gx-row{fill:var(--gx-ink);fill-opacity:.78;opacity:0;transform-origin:96px 70px;transform:scale(.88);
transition:opacity .5s ease calc(var(--c,0ms) + var(--d,0ms)),transform .9s var(--gx-in) calc(var(--c,0ms) + var(--d,0ms))}
.gx.is-on .gx-row{opacity:1;transform:none}
.gx-stage{fill:var(--gx-p1);transform-box:fill-box;transform-origin:50% 100%;transform:scale(0,0);transition:transform .7s var(--gx-in) var(--c,0ms)}
.gx.is-on .gx-stage{transform:none}
.gx-spotwrap{opacity:0;transition:opacity 1s ease calc(var(--c,0ms) + 1.1s)}
.gx.is-on .gx-spotwrap{opacity:1}
.gx.is-on .gx-spot{animation:gx-spot 7s ease-in-out infinite alternate}
@keyframes gx-spot{from{transform:translateX(-58px)}to{transform:translateX(58px)}}
/* arena: traseele se traseaza din arena spre Plaza, apoi publicul curge pe ele (viteze diferite) */
.gx-flow text{font-family:var(--mono);font-size:7.5px;letter-spacing:.08em;fill:var(--muted)}
.gx-flow__logo{opacity:0;transition:opacity .6s ease var(--c,0ms)}
.gx.is-on .gx-flow__logo{opacity:1}
.gx-run{fill:none;stroke:var(--gx-ink);stroke-opacity:.72;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:.01 13;opacity:0;
transition:opacity .6s ease calc(var(--c,0ms) + .9s)}
.gx-run--p1{stroke:var(--gx-p1);stroke-opacity:1}
.gx.is-on .gx-run{opacity:1;animation:gx-run var(--t,3s) linear var(--o,0s) infinite}
@keyframes gx-run{to{stroke-dashoffset:-26.02}}
.gx-core{fill:var(--gx-p1);transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .6s var(--gx-in) calc(var(--c,0ms) + .8s)}
.gx.is-on .gx-core{transform:none}
.gx-wave{fill:var(--gx-p1);opacity:0;transform-box:fill-box;transform-origin:center}
.gx.is-on .gx-wave{animation:gx-wave 4s cubic-bezier(.25,.6,.35,1) calc(var(--c,0ms) + 1.2s) infinite}
.gx.is-on .gx-wave--2{animation-delay:calc(var(--c,0ms) + 3.2s)}
@keyframes gx-wave{0%{transform:scale(.25);opacity:.35}100%{transform:scale(1);opacity:0}}
/* faze: Phase One creste pana la steag, fazele urmatoare punctat si se pierd spre dreapta, linia lor „curge" */
.gx-p1bar{fill:var(--gx-p1);transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);transition:transform 1s var(--gx-in) calc(var(--c,0ms) + 150ms)}
.gx.is-on .gx-p1bar{transform:none}
.gx-later{opacity:0;transform:translateX(-12px);transition:opacity .8s ease calc(var(--c,0ms) + 500ms),transform 1s var(--gx-in) calc(var(--c,0ms) + 500ms)}
.gx.is-on .gx-later{opacity:1;transform:none}
.gx-track{fill:rgba(17,17,17,.05)}
.gx-future{fill:none;stroke:var(--muted);stroke-width:var(--gx-sw);stroke-dasharray:3 5}
.gx.is-on .gx-future{animation:gx-drift 1.6s linear calc(var(--c,0ms) + 1.2s) infinite}
@keyframes gx-drift{to{stroke-dashoffset:-8}}
.gx-ticks{fill:none;stroke:var(--gx-hair);stroke-width:var(--gx-sw)}
.gx-mark{stroke:var(--gx-ink);stroke-opacity:.55}
.gx-flag{fill:var(--gx-p1);transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);transition:transform .5s var(--gx-in) calc(var(--c,0ms) + 1s)}
.gx.is-on .gx-flag{transform:none;animation:gx-flag 3.2s ease-in-out calc(var(--c,0ms) + 1.6s) infinite}
@keyframes gx-flag{0%,100%{transform:none}50%{transform:skewY(-7deg) scaleX(.9)}}
.gx-shine{transform:translateX(-30px)}
.gx.is-on .gx-shine{animation:gx-shine 5s var(--gx-line) calc(var(--c,0ms) + 1.4s) infinite}
@keyframes gx-shine{0%{transform:translateX(-30px)}30%,100%{transform:translateX(110px)}}
/* comercial (2026-10-07, ales de user dintre trei variante): Plaza in plan; vitrinele se deschid pe rand in ordinea
fazelor, copacii apar, apoi oamenii se plimba incet prin Plaza */
.gx-blk{fill:rgba(17,17,17,.035)}
.gx-bay{transform-box:fill-box;transform-origin:50% 50%;transform:scaleX(0);opacity:0;
transition:transform .5s var(--gx-in) calc(var(--c,0ms) + var(--d,0ms)),opacity .3s ease calc(var(--c,0ms) + var(--d,0ms))}
.gx.is-on .gx-bay{transform:none;opacity:1}
.gx-tree{fill:rgba(151,169,127,.22);stroke:var(--gx-p1);stroke-opacity:.5;stroke-width:var(--gx-sw);transform-box:fill-box;transform-origin:center;transform:scale(0);
transition:transform .6s var(--gx-in) calc(var(--c,0ms) + var(--d,0ms))}
.gx.is-on .gx-tree{transform:none}
.gx-walker2{fill:var(--gx-ink);fill-opacity:.75}
.gx-walker2--p1{fill:var(--gx-p1);fill-opacity:1}
.gx-ppl{opacity:0;transition:opacity .8s ease calc(var(--c,0ms) + 1.1s)}
.gx.is-on .gx-ppl{opacity:1}
.gx.is-on .gx-walker2{animation:gx-stroll var(--t,9s) ease-in-out var(--o,0s) infinite alternate}
@keyframes gx-stroll{from{transform:translateX(0)}to{transform:translateX(var(--dx,60px))}}
@media (max-width:860px){
.gx{--gx-sw:1.7}
.gx-svg{height:50px}
.gx-run{stroke-width:3.4}
.gx-flow text{font-size:11px}
}
.hero--legible .hero__scrim::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.3) 26%,rgba(0,0,0,0) 55%);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 32%,transparent 62%);mask-image:linear-gradient(180deg,#000 0%,#000 32%,transparent 62%)}
.split__media{position:relative}
.cc-tag{position:absolute;top:12px;right:12px;z-index:4;pointer-events:none;padding:5px 9px 4px;border-radius:999px;background:rgba(17,17,17,.36);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-family:var(--mono);font-size:10px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.hero__bg .cc-tag,.sscroll__stage .cc-tag{top:104px;right:24px}
.mpx__card-media .cc-tag{top:auto;bottom:10px;right:10px}
.pcard__media .cc-tag{top:auto;bottom:10px;right:10px;font-size:9px}
@media (max-width:860px){.hero__bg .cc-tag,.sscroll__stage .cc-tag{top:84px;right:16px}.cc-tag{font-size:9px;padding:4px 8px 3px}}
.blog-card__media--plain{background:linear-gradient(165deg,#3b4733 0%,#1f261b 100%)}
.front__map--photo .front__frame{background:#1a1d1c}
.front__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.viz__core--logo{fill:#141716}
.mv-trace{fill:none;stroke:#fff;stroke-opacity:.3;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.mv-streak{fill:none;stroke:#fff;stroke-opacity:.75;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:140px calc(var(--len) * 1px + 140px);stroke-dashoffset:140px;animation:mv-streak var(--t,20s) linear infinite}
@keyframes mv-streak{to{stroke-dashoffset:calc(var(--len) * -1px)}}
@media (prefers-reduced-motion:reduce){.mv-streak{animation:none;opacity:0}}