/* Studio licensed display font - Fb MatadorNarrowHeb (FontBit) */
@font-face{
font-family:'FbMatadorNarrow';
font-weight:400;
font-style:normal;
font-display:swap;
src:url('clients/ramot-yam-akko/assets/fonts/FbMatadorNarrowHeb-Regular.woff2') format('woff2');
}
@font-face{
font-family:'FbMatadorNarrow';
font-weight:500;
font-style:normal;
font-display:swap;
src:url('clients/ramot-yam-akko/assets/fonts/FbMatadorNarrowHeb-Medium.woff2') format('woff2');
}
@font-face{
font-family:'FbMatadorNarrow';
font-weight:700;
font-style:normal;
font-display:swap;
src:url('clients/ramot-yam-akko/assets/fonts/FbMatadorNarrowHeb-Bold.woff2') format('woff2');
}
@font-face{
font-family:'FbMatadorNarrow';
font-weight:900;
font-style:normal;
font-display:swap;
src:url('clients/ramot-yam-akko/assets/fonts/FbMatadorNarrowHeb-Black.woff2') format('woff2');
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;}
html,body{overscroll-behavior:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
img,svg,video{max-width:100%;display:block;}
input,button,textarea,select{font:inherit;color:inherit;}
:root{
--c-black:#0a0a0a;
--c-nav-bg:#000;
--c-yellow:#FFC40C; /* Studio brand yellow */
--c-yellow-lt:#ffd54a;
--c-cream:rgba(236,232,221,0.54); /* Studio canvas bg */
--c-cream-solid:#ECE8DD;
--fc:'FbMatadorNarrow','Heebo',sans-serif; /* Studio licensed display font */
--fb:'Assistant',sans-serif; /* Body - matches Figma exactly */
--spring:cubic-bezier(0.16,1,0.3,1);
--form-h:96px;
}
html{scroll-behavior:smooth;scroll-snap-type:y mandatory;scroll-padding-top:70px;scroll-padding-bottom:70px;}
body{font-family:var(--fb);background:#F4F1E5;color:#0a0a0a;line-height:1.55;overflow-x:hidden;padding-bottom:var(--form-h);}
.hero,.frame,.s-lake,.s-map,.s-plots,.s-mapsec,.s-neighborhood,.s-park,.s-distances,.s-companies,footer{scroll-snap-align:start;scroll-snap-stop:always;}
@media (max-width:600px){
html{scroll-snap-type:none;scroll-behavior:auto;}
.hero,.frame,.s-lake,.s-map,.s-plots,.s-mapsec,.s-neighborhood,.s-park,.s-distances,.s-companies,footer{scroll-snap-align:none;}
}
main > section + section{margin-top:100px;}
main > .hero + .s-lake{margin-top:0;}
main > .s-lake + .s-plots{margin-top:0;}
main > .s-neighborhood + .s-park{margin-top:150px;}
main > .s-park + .s-distances{margin-top:110px;}
main > .s-distances + .s-companies{margin-top:300px;}
main > .s-companies + footer{margin-top:140px;}
img,video,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit;}
*:focus-visible{outline:3px solid var(--c-yellow);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}}
/* ═══════════════════════════════════════════════════════════════
MOBILE CANVAS — Figma 1:1 iPhone 17 frame (402×3028)
Each section is its own absolute canvas, scaled via transform
═══════════════════════════════════════════════════════════════ */
.m-wrap{display:none;}
@media (max-width:600px){
.top-nav{display:none!important;}
.desktop-only{display:none!important;}
.m-wrap{display:block;}
/* Ensure only ONE bottom form bar shows on mobile (drawer, not desktop sticky) */
.bottom-form{display:none!important;}
}
.m-wrap [class*="-canvas"] > *{position:absolute;}
/* Header — fixed/sticky on top, scrolls with page (402×86 baseline) */
.m-header{
position:fixed;
top:0;
left:0;
right:0;
z-index:50;
width:100%;
height:86px;
overflow:hidden;
background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.m-header-canvas{
position:relative;
width:402px;
height:86px;
margin:0 auto;
transform-origin:top left;
}
@media (max-width:402px){
.m-header{height:calc(100vw * 86 / 402);}
.m-header-canvas{transform:scale(calc(100vw / 402));}
}
/* Push first section down so it doesn't slide under the fixed header */
.m-wrap{padding-top:86px;}
@media (max-width:402px){
.m-wrap{padding-top:calc(100vw * 86 / 402);}
}
/* Section 1: Hero (402×210) — image-86 to image-296 in figma frame */
.m-hero{position:relative;width:100%;height:210px;overflow:hidden;background:#000;}
.m-hero-canvas{
position:relative;
width:402px;
height:210px;
margin:0 auto;
transform-origin:top left;
}
@media (max-width:402px){
.m-hero{height:calc(100vw * 210 / 402);}
.m-hero-canvas{transform:scale(calc(100vw / 402));}
}
.m-hero-bg{position:absolute;top:0;left:0;width:402px;height:210px;object-fit:cover;}
.m-hero-stamp{
border-radius:50%;
background:transparent;
border:1px solid #000;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
font-family:'FbMatadorNarrow','Heebo',sans-serif;
font-weight:700;
font-size:12px;
line-height:0.86;
letter-spacing:-0.24px;
color:#000;
box-sizing:border-box;
}
.m-hero-stamp p{margin:0;}
.m-hero-pill-black{
background:#000;
border-radius:0;
display:flex;
align-items:center;
justify-content:center;
font-family:'FbMatadorNarrow','Heebo',sans-serif;
font-weight:700;
line-height:1;
color:#FFC40C;
white-space:nowrap;
}
.m-hero-pill-yellow{
background:#FFC40C;
border-radius:0;
display:flex;
align-items:center;
justify-content:center;
font-family:'FbMatadorNarrow','Heebo',sans-serif;
font-weight:700;
line-height:1;
color:#000;
white-space:nowrap;
}
.m-hero-pill-yellow .currency{font-size:11.706px;margin:0 .1em;}
.m-hero-pill-yellow bdi{font-family:inherit;direction:ltr;unicode-bidi:isolate;}
/* Section 2: Lake (402×311) — full-bleed aqua park video */
.m-lake{position:relative;width:100%;height:311px;overflow:hidden;background:#000;}
.m-lake-canvas{
position:relative;
width:402px;
height:311px;
margin:0 auto;
transform-origin:top left;
}
@media (max-width:402px){
.m-lake{height:calc(100vw * 311 / 402);}
.m-lake-canvas{transform:scale(calc(100vw / 402));}
}
.m-lake-video{position:absolute;top:0;left:0;width:402px;height:311px;object-fit:cover;}
/* Section 3: Plots — kids running (402×262) */
.m-plots{position:relative;width:100%;height:262px;overflow:hidden;}
.m-plots-canvas{
position:relative;
width:402px;
height:262px;
margin:0 auto;
transform-origin:top left;
}
@media (max-width:402px){
.m-plots{height:calc(100vw * 262 / 402);}
.m-plots-canvas{transform:scale(calc(100vw / 402));}
}
.m-plots-bg{position:absolute;top:0;left:0;width:402px;height:262px;object-fit:cover;object-position:center 35%;}
.m-plots-strip{background:#000;}
.m-plots-headline{
margin:0;
font-family:'FbMatadorNarrow','Heebo',sans-serif;
font-weight:700;
font-size:30.84px;
line-height:1;
color:#FFC40C;
text-align:right;
white-space:nowrap;
display:flex;
align-items:center;
justify-content:flex-start;
direction:rtl;
}
.m-plots-body{
font-family:'Assistant',sans-serif;
font-size:12px;
line-height:14px;
letter-spacing:-0.48px;
color:#000;
text-align:justify;
}
.m-plots-body p{margin:0;}
.m-plots-body p.b{font-weight:700;}
.m-plots-stat{
background:#FFC40C;
border:2.304px solid #000;
border-radius:1.728px;
font-family:'FbMatadorNarrow','Heebo',sans-serif;
}
.m-plots-stat .num{
position:absolute;
top:2.59px;
right:0;
width:100%;
text-align:center;
font-weight:700;
font-size:24.477px;
line-height:1;
color:#000;
white-space:nowrap;
}
.m-plots-stat--text .num{font-size:13px;line-height:1.1;white-space:normal;top:1px;font-weight:900;}
.m-plots-stat .num .cur{font-size:8.639px;vertical-align:0.45em;}
.m-plots-stat .num bdi{font-family:inherit;direction:ltr;unicode-bidi:isolate;}
.m-plots-stat .lbl{
position:absolute;
top:31.9px;
right:0;
width:100%;
text-align:center;
font-weight:700;
font-size:7.775px;
line-height:1;
color:#000;
white-space:nowrap;
}
.m-h-logo{display:block;width:100%;height:100%;object-fit:contain;}
.m-h-sep{background:#000;}
.m-h-pill{background:#FFC40C;border-radius:9999px;}
.m-h-link{
font-family:'Assistant',sans-serif;
font-size:14px;
font-weight:400;
line-height:20px;
letter-spacing:-0.28px;
color:#000;
text-decoration:none;
white-space:nowrap;
z-index:1;
}
.m-h-link::before{
content:'';
position:absolute;
inset:-3px -10px;
background:#FFC40C;
border-radius:9999px;
z-index:-1;
opacity:0;
transition:opacity .25s ease;
}
.m-h-link.active::before{opacity:1;}
/* Section 4: Neighborhood — Ramot Yam (402×425) */
.m-neigh{position:relative;width:100%;height:425px;overflow:hidden;}
.m-neigh-canvas{
position:relative;
width:402px;
height:425px;
margin:0 auto;
transform-origin:top left;
}
@media (max-width:402px){
.m-neigh{height:calc(100vw * 425 / 402);}
.m-neigh-canvas{transform:scale(calc(100vw / 402));}
}
.m-neigh-strip{background:#000;}
.m-neigh-headline{
margin:0;
font-family:'FbMatadorNarrow','Heebo',sans-serif;
font-weight:700;
font-size:30px;
line-height:1;
color:#FFC40C;
text-align:right;
white-space:nowrap;
display:flex;
align-items:center;
justify-content:flex-start;
direction:rtl;
}
.m-neigh-body{
font-family:'Assistant',sans-serif;
font-size:12px;
line-height:14px;
letter-spacing:-0.72px;
color:#000;
text-align:justify;
direction:rtl;
}
.m-neigh-photo{
display:block;
object-fit:cover;
}
/* Section 5: Park — פארק העסקים (402×475) */
.m-park{position:relative;width:100%;height:475px;overflow:hidden;}
.m-park-canvas{
position:relative;
width:402px;
height:475px;
margin:0 auto;
transform-origin:top left;
}
@media (max-width:402px){
.m-park{height:calc(100vw * 475 / 402);}
.m-park-canvas{transform:scale(calc(100vw / 402));}
}
.m-park-strip{background:#000;}
.m-park-headline{
margin:0;
font-family:'FbMatadorNarrow','Heebo',sans-serif;
font-weight:700;
font-size:30px;
line-height:1;
color:#FFC40C;
text-align:right;
white-space:nowrap;
display:flex;
align-items:center;
justify-content:flex-start;
direction:rtl;
}
.m-park-body{
font-family:'Assistant',sans-serif;
font-size:12px;
line-height:normal;
letter-spacing:-0.36px;
color:#000;
text-align:justify;
direction:rtl;
}
.m-park-photo{
display:block;
object-fit:cover;
}
/* Section 6: Mapsec — Map + 2 PDF buttons + lawyer info (402×274) */
.m-mapsec{position:relative;width:100%;height:274px;overflow:hidden;background:#F4F1E5;}
.m-mapsec-canvas{
position:relative;
width:402px;
height:274px;
margin:0 auto;
transform-origin:top left;
}
@media (max-width:402px){
.m-mapsec{height:calc(100vw * 274 / 402);}
.m-mapsec-canvas{transform:scale(calc(100vw / 402));}
}
.m-mapsec-map{display:block;object-fit:cover;}
.m-mapsec-strip{background:#000;}
.m-mapsec-headline{
margin:0;
font-family:'FbMatadorNarrow','Heebo',sans-serif;
font-weight:700;
font-size:30px;
line-height:1;
color:#FFC40C;
text-align:right;
white-space:nowrap;
display:flex;
align-items:center;
justify-content:flex-start;
direction:rtl;
}
.m-mapsec-pdf{
position:absolute;z-index:10;pointer-events:auto;
background:#FFC40C;
border-radius:9999px;
border:none;
font-family:'Assistant',sans-serif;
font-weight:700;
font-size:8.187px;
letter-spacing:-0.1637px;
color:#000;
display:flex;
align-items:center;
justify-content:center;
gap:3px;
cursor:pointer;
text-decoration:none;
box-shadow:-1.949px 2.339px 2.32px rgba(0,0,0,0.12);
padding:0 6px;
direction:rtl;
white-space:nowrap;
}
.m-mapsec-pdf svg{flex-shrink:0;width:7.5px;height:7.5px;}
.m-mapsec-lawyer-top{
font-family:'Assistant',sans-serif;
font-size:10px;
letter-spacing:-0.3px;
color:#000;
text-align:right;
direction:rtl;
line-height:1.25;
}
.m-mapsec-lawyer-top b{font-weight:700;display:block;}
.m-mapsec-lawyer-text{
font-family:'Assistant',sans-serif;
font-size:10px;
letter-spacing:-0.3px;
color:#000;
text-align:right;
white-space:nowrap;
line-height:1;
display:flex;
align-items:center;
justify-content:flex-end;
direction:rtl;
}
.m-mapsec-icon{
background:#000;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
}
.m-mapsec-icon svg{width:8.86px;height:8.86px;display:block;}
/* Section 7: Distances — כל הדרכים מובילות (402×343) */
.m-dist{position:relative;width:100%;height:343px;overflow:hidden;background:#F4F1E5;}
.m-dist-canvas{
position:relative;
width:402px;
height:343px;
margin:0 auto;
transform-origin:top left;
}
@media (max-width:402px){
.m-dist{height:calc(100vw * 343 / 402);}
.m-dist-canvas{transform:scale(calc(100vw / 402));}
}
.m-dist-strip{background:#000;}
.m-dist-headline{
margin:0;
font-family:'FbMatadorNarrow','Heebo',sans-serif;
font-weight:700;
font-size:30px;
line-height:1;
color:#FFC40C;
text-align:right;
white-space:nowrap;
display:flex;
align-items:center;
justify-content:flex-start;
direction:rtl;
}
.m-dist-arrow{display:block;pointer-events:none;}
.m-dist-icon{display:block;object-fit:contain;}
.m-dist-text{
font-family:'Assistant',sans-serif;
text-align:center;
direction:rtl;
line-height:1.15;
color:#000;
}
.m-dist-text b{display:block;font-weight:700;font-size:12px;}
.m-dist-text span{display:block;font-weight:400;font-size:10px;}
.m-dist-badge{
background:#FFC40C;
display:flex;
align-items:center;
justify-content:center;
font-family:'Assistant','Heebo',sans-serif;
font-weight:700;
font-size:8.816px;
color:#000;
transform:rotate(-15deg);
white-space:nowrap;
}
/* Section 8: Companies — היזמים (402×493) */
.m-comp{position:relative;width:100%;height:493px;overflow:hidden;background:#F4F1E5;}
.m-comp-canvas{
position:relative;
width:402px;
height:493px;
margin:0 auto;
transform-origin:top left;
}
@media (max-width:402px){
.m-comp{height:calc(100vw * 493 / 402);}
.m-comp-canvas{transform:scale(calc(100vw / 402));}
}
.m-comp-line{background:#000;height:1px;}
.m-comp-banner{display:block;object-fit:cover;}
.m-comp-strip{background:#000;}
.m-comp-title{
margin:0;
font-family:'FbMatadorNarrow','Heebo',sans-serif;
font-weight:700;
font-size:25px;
line-height:1;
color:#FFC40C;
text-align:right;
white-space:nowrap;
display:flex;
align-items:center;
justify-content:flex-start;
direction:rtl;
}
.m-comp-subtitle{
font-family:'FbMatadorNarrow','Heebo',sans-serif;
font-weight:700;
font-size:12.999px;
line-height:1.1;
color:#000;
text-align:right;
direction:rtl;
}
.m-comp-body{
font-family:'Assistant',sans-serif;
font-size:10px;
line-height:12px;
letter-spacing:-0.3px;
color:#000;
text-align:justify;
direction:rtl;
}
.m-comp-body p{margin:0;}
.m-comp-body p.bold{font-weight:700;}
.m-comp-body p.gap{height:6px;}
.m-comp-logo{display:block;object-fit:contain;}
/* ═══════════════════════════════════════════
MOBILE SCROLL ANIMATIONS — mirrors desktop reveal patterns
═══════════════════════════════════════════ */
/* All sections start hidden, fade in on .in-view (replays each entry) */
.m-hero,.m-lake,.m-plots,.m-neigh,.m-park,.m-mapsec,.m-dist,.m-comp{
opacity:0;transition:opacity 0s;
}
.m-hero.in-view,.m-lake.in-view,.m-plots.in-view,.m-neigh.in-view,
.m-park.in-view,.m-mapsec.in-view,.m-dist.in-view,.m-comp.in-view{
opacity:1;transition:opacity .6s ease-out;
}
/* Headlines + black strips slide in from right together */
.m-plots-headline,.m-neigh-headline,.m-park-headline,
.m-mapsec-headline,.m-dist-headline,.m-comp-title,.m-comp-subtitle,
.m-plots-strip,.m-neigh-strip,.m-park-strip,
.m-mapsec-strip,.m-dist-strip,.m-comp-strip{
opacity:0;transform:translateX(60px);transition:none;
}
.in-view .m-plots-headline,.in-view .m-neigh-headline,.in-view .m-park-headline,
.in-view .m-mapsec-headline,.in-view .m-dist-headline,.in-view .m-comp-title,.in-view .m-comp-subtitle,
.in-view .m-plots-strip,.in-view .m-neigh-strip,.in-view .m-park-strip,
.in-view .m-mapsec-strip,.in-view .m-dist-strip,.in-view .m-comp-strip{
transition:opacity .9s cubic-bezier(0.16,1,0.3,1) .35s,
transform .9s cubic-bezier(0.16,1,0.3,1) .35s;
}
.m-plots.in-view .m-plots-headline,
.m-plots.in-view .m-plots-strip,
.m-neigh.in-view .m-neigh-headline,
.m-neigh.in-view .m-neigh-strip,
.m-park.in-view .m-park-headline,
.m-park.in-view .m-park-strip,
.m-mapsec.in-view .m-mapsec-headline,
.m-mapsec.in-view .m-mapsec-strip,
.m-dist.in-view .m-dist-headline,
.m-dist.in-view .m-dist-strip,
.m-comp.in-view .m-comp-title,
.m-comp.in-view .m-comp-subtitle,
.m-comp.in-view .m-comp-strip{opacity:1;transform:translateX(0);}
/* Stagger 2nd/3rd headlines + their strips */
.m-plots-headline + .m-plots-headline,
.m-neigh-headline + .m-neigh-headline,
.m-park-headline + .m-park-headline,
.m-mapsec-headline + .m-mapsec-headline,
.m-plots-strip + .m-plots-strip,
.m-neigh-strip + .m-neigh-strip,
.m-park-strip + .m-park-strip,
.m-mapsec-strip + .m-mapsec-strip{transition-delay:.5s;}
.m-neigh-headline + .m-neigh-headline + .m-neigh-headline,
.m-neigh-strip + .m-neigh-strip + .m-neigh-strip{transition-delay:.65s;}
.m-comp-subtitle{transition-delay:.5s;}
/* Body paragraphs fade in */
.m-plots-body,.m-neigh-body,.m-park-body,.m-comp-body{
opacity:0;transition:none;
}
.in-view .m-plots-body,.in-view .m-neigh-body,.in-view .m-park-body,.in-view .m-comp-body{
transition:opacity 1s ease-out .85s;
}
.m-plots.in-view .m-plots-body,
.m-neigh.in-view .m-neigh-body,
.m-park.in-view .m-park-body,
.m-comp.in-view .m-comp-body{opacity:1;}
/* Lifestyle/park photos staggered fade with non-uniform delays */
.m-neigh-photo,.m-park-photo{
opacity:0;transition:none;
}
.in-view .m-neigh-photo,.in-view .m-park-photo{transition:opacity 1.1s ease-out;}
.m-neigh.in-view .m-neigh-photo:nth-of-type(1){opacity:1;transition-delay:.30s;}
.m-neigh.in-view .m-neigh-photo:nth-of-type(2){opacity:1;transition-delay:.55s;}
.m-neigh.in-view .m-neigh-photo:nth-of-type(3){opacity:1;transition-delay:.42s;}
.m-neigh.in-view .m-neigh-photo:nth-of-type(4){opacity:1;transition-delay:.68s;}
.m-park.in-view .m-park-photo:nth-of-type(1){opacity:1;transition-delay:.32s;}
.m-park.in-view .m-park-photo:nth-of-type(2){opacity:1;transition-delay:.58s;}
.m-park.in-view .m-park-photo:nth-of-type(3){opacity:1;transition-delay:.40s;}
.m-park.in-view .m-park-photo:nth-of-type(4){opacity:1;transition-delay:.65s;}
/* Plots stat boxes pop-in */
.m-plots-stat{
opacity:0;transform:translateY(40px);transition:none;
}
.m-plots-stat .num,.m-plots-stat .lbl{
opacity:0;transition:none;
}
.in-view .m-plots-stat{transition:opacity .7s cubic-bezier(0.16,1,0.3,1),transform .7s cubic-bezier(0.16,1,0.3,1);}
.in-view .m-plots-stat .num,.in-view .m-plots-stat .lbl{transition:opacity .6s ease-out;}
.m-plots.in-view .m-plots-stat{opacity:1;transform:translateY(0);}
.m-plots.in-view .m-plots-stat .num,
.m-plots.in-view .m-plots-stat .lbl{opacity:1;}
.m-plots.in-view .m-plots-stat:nth-of-type(4){transition-delay:.85s;}
.m-plots.in-view .m-plots-stat:nth-of-type(4) .num,
.m-plots.in-view .m-plots-stat:nth-of-type(4) .lbl{transition-delay:1.15s;}
.m-plots.in-view .m-plots-stat.m-plots-stat--text{transition-delay:1.0s;}
.m-plots.in-view .m-plots-stat.m-plots-stat--text .num,
.m-plots.in-view .m-plots-stat.m-plots-stat--text .lbl{transition-delay:1.30s;}
.m-plots.in-view .m-plots-stat:nth-of-type(6){transition-delay:1.15s;}
.m-plots.in-view .m-plots-stat:nth-of-type(6) .num,
.m-plots.in-view .m-plots-stat:nth-of-type(6) .lbl{transition-delay:1.45s;}
/* Mapsec image + PDF buttons */
.m-mapsec-map{opacity:0;transition:none;}
.in-view .m-mapsec-map{transition:opacity 1s ease-out;}
.m-mapsec.in-view .m-mapsec-map{opacity:1;}
.m-mapsec-pdf{
opacity:0;transform:translateX(40px);
transition:opacity .7s cubic-bezier(0.16,1,0.3,1),transform .7s cubic-bezier(0.16,1,0.3,1);
}
.m-mapsec.in-view .m-mapsec-pdf{opacity:1;transform:translateX(0);}
.m-mapsec.in-view .m-mapsec-pdf:nth-of-type(1){transition-delay:.7s;}
.m-mapsec.in-view .m-mapsec-pdf:nth-of-type(2){transition-delay:.9s;}
.m-mapsec-lawyer-top,.m-mapsec-lawyer-text,.m-mapsec-icon{
opacity:0;transition:opacity .8s ease-out;
}
.m-mapsec.in-view .m-mapsec-lawyer-top{opacity:1;transition-delay:1.1s;}
.m-mapsec.in-view .m-mapsec-lawyer-text,.m-mapsec.in-view .m-mapsec-icon{opacity:1;transition-delay:1.3s;}
/* m-dist: yellow "עתידי" badges fade in AFTER all icons + texts already appeared */
.m-dist-badge{opacity:0;transition:none;}
.in-view .m-dist-badge{transition:opacity .6s ease-out;}
.m-dist.in-view .m-dist-badge{opacity:1;transition-delay:1.6s;}
/* Distance arrows draw via clip-path inset (matches desktop SVG draw) */
.m-dist-arrow{
clip-path:inset(0 100% 0 0);transition:none;
}
.in-view .m-dist-arrow{transition:clip-path 1.6s cubic-bezier(0.4,0,0.2,1) .4s;}
.m-dist-arrow:nth-of-type(2){clip-path:inset(0 0 0 100%);}
.m-dist.in-view .m-dist-arrow{clip-path:inset(0);}
/* Distance icons + texts staggered (right-to-left, like desktop circles) */
.m-dist-icon,.m-dist-text,.m-dist-badge{
opacity:0;transform:translateY(10px);transition:none;
}
.in-view .m-dist-icon,.in-view .m-dist-text,.in-view .m-dist-badge{
transition:opacity .55s ease-out,transform .55s cubic-bezier(0.16,1,0.3,1);
}
.m-dist.in-view .m-dist-icon,
.m-dist.in-view .m-dist-text,
.m-dist.in-view .m-dist-badge{opacity:1;transform:translateY(0);}
/* Row 1 (right→left): icon 1,2,3. Row 2 (right→left): icon 4,5,6.
Icons are ![]()
#3..#8 (after the 2 decorative arrows). Texts are #2,3,4,6,7,9
(badges occupy div #5 and #8 — animated separately, after icons). */
.m-dist.in-view .m-dist-icon:nth-of-type(3){transition-delay:.30s;} /* icon 1 */
.m-dist.in-view .m-dist-text:nth-of-type(2){transition-delay:.35s;} /* text 1 */
.m-dist.in-view .m-dist-icon:nth-of-type(4){transition-delay:.50s;} /* icon 2 */
.m-dist.in-view .m-dist-text:nth-of-type(3){transition-delay:.55s;} /* text 2 */
.m-dist.in-view .m-dist-icon:nth-of-type(5){transition-delay:.70s;} /* icon 3 */
.m-dist.in-view .m-dist-text:nth-of-type(4){transition-delay:.75s;} /* text 3 */
.m-dist.in-view .m-dist-icon:nth-of-type(6){transition-delay:.90s;} /* icon 4 */
.m-dist.in-view .m-dist-text:nth-of-type(6){transition-delay:.95s;} /* text 4 */
.m-dist.in-view .m-dist-icon:nth-of-type(7){transition-delay:1.10s;} /* icon 5 */
.m-dist.in-view .m-dist-text:nth-of-type(7){transition-delay:1.15s;} /* text 5 */
.m-dist.in-view .m-dist-icon:nth-of-type(8){transition-delay:1.30s;} /* icon 6 */
.m-dist.in-view .m-dist-text:nth-of-type(9){transition-delay:1.35s;} /* text 6 */
/* Companies: banners + logos + lines reveal */
.m-comp-banner,.m-comp-line{
opacity:0;transition:opacity .8s ease-out;
}
.m-comp-logo{
opacity:0;transform:translateX(60px);transition:none;
}
.in-view .m-comp-logo{
transition:opacity .9s cubic-bezier(0.16,1,0.3,1),
transform .9s cubic-bezier(0.16,1,0.3,1);
}
.m-comp.in-view .m-comp-logo{opacity:1;transform:translateX(0);}
.m-comp.in-view .m-comp-line{opacity:1;}
.m-comp.in-view .m-comp-line:nth-of-type(1){transition-delay:.1s;}
.m-comp.in-view .m-comp-line:nth-of-type(2){transition-delay:1.4s;}
.m-comp.in-view .m-comp-banner{opacity:1;}
.m-comp.in-view .m-comp-banner:nth-of-type(1){transition-delay:.4s;}
.m-comp.in-view .m-comp-banner:nth-of-type(2){transition-delay:.55s;}
.m-comp.in-view .m-comp-logo:nth-of-type(3){transition-delay:1.0s;}
.m-comp.in-view .m-comp-logo:nth-of-type(4){transition-delay:1.6s;}
/* Reduce motion: skip everything */
@media (prefers-reduced-motion: reduce){
.m-hero,.m-lake,.m-plots,.m-neigh,.m-park,.m-mapsec,.m-dist,.m-comp,
.m-plots-headline,.m-neigh-headline,.m-park-headline,
.m-mapsec-headline,.m-dist-headline,.m-comp-title,.m-comp-subtitle,
.m-plots-strip,.m-neigh-strip,.m-park-strip,
.m-mapsec-strip,.m-dist-strip,.m-comp-strip,
.m-plots-body,.m-neigh-body,.m-park-body,.m-comp-body,
.m-neigh-photo,.m-park-photo,.m-plots-stat,
.m-mapsec-map,.m-mapsec-pdf,.m-mapsec-lawyer-top,.m-mapsec-lawyer-text,.m-mapsec-icon,
.m-dist-arrow,.m-dist-icon,.m-dist-text,.m-dist-badge,
.m-comp-banner,.m-comp-logo,.m-comp-line{
opacity:1!important;transform:none!important;clip-path:none!important;
transition:none!important;animation:none!important;
}
}
/* ═══════════════════════════════════════════════════════════════
MOBILE FULL-SCREEN SNAP — sections 4-8 each take full viewport
Canvas content stays 1:1 Figma, centered with fit-contain scale
═══════════════════════════════════════════════════════════════ */
@media (max-width:600px){
/* CRITICAL: Allow headline/strip text to wrap on narrow screens.
Without this, white-space:nowrap text overflows boxes and clips. */
.m-hero-headline,.m-plots-headline,.m-neigh-headline,.m-park-headline,
.m-mapsec-headline,.m-dist-headline,.m-comp-title,.m-comp-subtitle{
white-space:normal!important;
word-break:break-word;
overflow-wrap:break-word;
}
/* scroll-snap engine on root + offset for fixed mobile header */
html{
scroll-snap-type:y mandatory;
scroll-padding-top:86px;
}
/* HERO — responsive % positioning inside aspect-ratio canvas.
Canvas locks to 414/700 ratio: % values stay proportional on every phone.
Editor's "% Resp" toggle outputs the right format. */
.m-hero{
width:100%;
aspect-ratio:414 / 700;
height:auto !important;
min-height:0 !important;max-height:none !important;
scroll-snap-align:start;scroll-snap-stop:always;
position:relative;overflow:hidden;background:#000;
container-type:inline-size;container-name:hero;
}
.m-hero > .m-hero-bg{
position:absolute!important;top:0!important;left:0!important;
width:100%!important;height:100%!important;
object-fit:cover!important;z-index:0;
}
.m-hero .m-hero-canvas{
z-index:1;
position:absolute!important;inset:0!important;
width:100%!important;height:100%!important;
transform:none!important;
}
.m-hero .m-hero-stamp{display:none!important;}
.m-hero .m-hero-stamp-img{
position:absolute;z-index:4;
top:15.92%;left:5.64%;right:auto;bottom:auto;
transform:rotate(-15deg);
width:36%;height:auto;aspect-ratio:1;
object-fit:contain;filter:invert(1);mix-blend-mode:screen;
}
.m-hero .m-hero-strip{
position:absolute;background:#000;z-index:2;border-radius:0;
}
.m-hero .m-hero-strip-1,.m-hero .m-hero-strip-2{display:none!important;}
.m-hero .m-hero-headline-1,.m-hero .m-hero-headline-2{background:#000!important;}
.m-hero .m-hero-headline{
position:absolute;z-index:3;margin:0;
font-family:'FbMatadorNarrow','Heebo',sans-serif;
font-weight:700;color:#FFC40C;background:transparent;
text-align:center;direction:rtl;
white-space:nowrap;line-height:1!important;
padding:0 12px;
width:max-content!important;max-width:95%!important;
height:auto!important;min-height:0!important;
display:flex;align-items:center;justify-content:center;
}
.m-hero .m-hero-headline-1{top:3.06%;left:20.74%;font-size:12.70cqw;}
.m-hero .m-hero-headline-2{top:10.03%;left:44.40%;font-size:12.70cqw;}
.m-hero .m-hero-strip-3{display:none!important;}
.m-hero .m-hero-headline-3{
color:#000!important;background:#FFC40C!important;
top:74.70%;left:5.41%;
font-size:9.22cqw;line-height:1.2;text-align:center;
white-space:nowrap!important;
max-width:none!important;
}
.m-hero .m-hero-headline-3 bdi{font-family:inherit;direction:ltr;unicode-bidi:isolate;}
/* Hero animations — match other sections */
.m-hero .m-hero-strip,.m-hero .m-hero-headline{
opacity:0;transform:translateX(60px);transition:none;
}
.m-hero.in-view .m-hero-strip,.m-hero.in-view .m-hero-headline{
transition:opacity .9s cubic-bezier(0.16,1,0.3,1) .35s,
transform .9s cubic-bezier(0.16,1,0.3,1) .35s;
opacity:1;transform:translateX(0);
}
.m-hero.in-view .m-hero-strip-2,.m-hero.in-view .m-hero-headline-2{transition-delay:.55s;}
.m-hero.in-view .m-hero-strip-3{transition-delay:1.1s;transform:translateY(0);}
.m-hero .m-hero-strip-3{transform:translateY(40px);}
.m-hero.in-view .m-hero-headline-3{transition-delay:1.25s;transform:translateY(0);}
.m-hero .m-hero-headline-3{transform:translateY(40px);}
/* Stamp pop-in */
.m-hero .m-hero-stamp-img{
opacity:0;transform:rotate(-15deg) scale(.3);transition:none;
}
.m-hero.in-view .m-hero-stamp-img{
transition:opacity .7s cubic-bezier(.5,-0.6,.3,1.7) 1.5s,
transform .7s cubic-bezier(.5,-0.6,.3,1.7) 1.5s;
opacity:1;transform:rotate(-15deg) scale(1);
}
/* Hide old yellow pill if any */
.m-hero .m-hero-pill-yellow{display:none!important;}
/* Yellow price bar — full bottom, mixed sizes */
.m-hero .m-hero-pill-yellow{
left:0!important;right:0!important;top:auto!important;bottom:0!important;
width:100%!important;height:auto!important;
padding:14px 16px 18px!important;
font-size:32px!important;
justify-content:center!important;
border-radius:0!important;
}
.m-hero .m-hero-pill-yellow .currency{font-size:18px!important;}
/* Section 2: lake video full-screen */
.m-lake{
height:calc(100svh - 86px) !important;
min-height:580px !important;max-height:900px !important;
scroll-snap-align:start;scroll-snap-stop:always;
position:relative;overflow:hidden;background:#000;
}
.m-lake .m-lake-canvas{
position:absolute!important;inset:0!important;
width:100%!important;height:100%!important;
transform:none!important;
}
.m-lake .m-lake-video{
position:absolute!important;top:0!important;left:0!important;
width:100%!important;height:100%!important;
object-fit:cover!important;
}
/* Sections 3-8: snap stops, height = visible viewport with safety bounds.
min-height: prevents content cutoff on small phones (iPhone SE etc).
max-height: prevents huge empty space on very tall phones (Pro Max). */
.m-plots,.m-neigh,.m-park,.m-mapsec,.m-dist,.m-comp{
height:calc(100svh - 86px) !important;
min-height:580px !important;
max-height:900px !important;
scroll-snap-align:start;
scroll-snap-stop:always;
position:relative;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
}
/* Footer is a snap target too — otherwise mandatory snap bounces back from last section */
footer{scroll-snap-align:start!important;scroll-snap-stop:always!important;}
/* Canvas: center via flex + scale around center (fit-contain) */
.m-neigh-canvas,.m-park-canvas,.m-mapsec-canvas,
.m-dist-canvas,.m-comp-canvas{
margin:0 !important;
transform-origin:center center !important;
flex-shrink:0;
}
/* Canvas scale: NEVER exceed viewport width (no horizontal clipping).
min() ensures canvas fits exactly inside viewport on phones,
capped at 1.5 for very wide displays (tablets). */
.m-neigh-canvas,.m-park-canvas,.m-mapsec-canvas,
.m-comp-canvas{
transform:scale(min(calc((100vw - 24px) / 402), 1.4)) !important;
}
/* Plots: fill section with bg image, content scales to viewport width */
.m-plots{background:#000;}
.m-plots .m-plots-bg{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center bottom!important;
z-index:0;
}
.m-plots{
aspect-ratio:402 / 523!important;
height:auto!important;min-height:0!important;max-height:none!important;
display:block!important;
container-type:inline-size;container-name:plots;
}
.m-plots-canvas{
position:absolute!important;inset:0!important;
width:100%!important;height:100%!important;
transform:none!important;margin:0!important;
z-index:1;
}
/* Section 7 (Distances): 6 cards full width — fit viewport, capped */
.m-dist-canvas{
transform:scale(min(calc((100vw - 24px) / 402), 1.05)) !important;
}
/* ─── Photos at 0.5× size with tight positioning (no gaps) ─── */
/* Section 3: Plots — full-screen with new bg image + content positioned (edited via position editor) */
.m-plots .m-plots-strip:nth-of-type(1){left:20.16%!important;top:3.81%!important;width:74.85%!important;height:9.50%!important;}
.m-plots .m-plots-strip:nth-of-type(2){left:9.90%!important;top:13.27%!important;width:76.29%!important;height:8.36%!important;}
.m-plots .m-plots-headline{width:max-content!important;max-width:95%!important;white-space:nowrap!important;}
.m-plots h2.m-plots-headline{left:20.22%!important;top:3.32%!important;height:10.61%!important;font-size:13.58cqw!important;}
.m-plots span.m-plots-headline{left:8.86%!important;top:12.27%!important;height:10.73%!important;font-size:13.58cqw!important;}
.m-plots .m-plots-body{left:5.60%!important;right:auto!important;top:21.71%!important;width:89.40%!important;height:36.90%!important;font-size:3.5cqw!important;line-height:0.95!important;}
.m-plots .m-plots-body p{margin:0 0 3px!important;}
.m-plots .m-plots-body p:last-child{margin-bottom:0!important;}
.m-plots .m-plots-stat:nth-of-type(4),
.m-plots .m-plots-stat.m-plots-stat--text,
.m-plots .m-plots-stat:nth-of-type(6){
width:29.85%!important;height:11.85%!important;top:78%!important;border-width:4px!important;border-radius:8px!important;
}
.m-plots .m-plots-stat:nth-of-type(4){left:3.48%!important;}
.m-plots .m-plots-stat.m-plots-stat--text{left:36.82%!important;}
.m-plots .m-plots-stat:nth-of-type(6){left:70.15%!important;}
.m-plots .m-plots-stat .num{font-size:9.45cqw!important;top:-3px!important;}
.m-plots .m-plots-stat .num .cur{font-size:3.73cqw!important;}
.m-plots .m-plots-stat.m-plots-stat--text .num{font-size:6.22cqw!important;line-height:1.05!important;top:-2px!important;}
.m-plots .m-plots-stat .lbl{font-size:4.98cqw!important;top:34px!important;}
@media (min-width:425px){
.m-plots .m-plots-stat .lbl{top:40px!important;}
}
/* Section 4: Neighborhood — aspect-ratio on SECTION (same as hero) */
.m-neigh{
aspect-ratio:402 / 541;
height:auto!important;min-height:0!important;max-height:none!important;
display:block!important;
container-type:inline-size;container-name:neigh;
}
.m-neigh-canvas{
position:absolute!important;inset:0!important;
width:100%!important;height:100%!important;
transform:none!important;margin:0!important;
}
.m-neigh .m-neigh-strip:nth-of-type(1){left:58.91%!important;top:0.48%!important;width:34.33%!important;height:7.69%!important;}
.m-neigh .m-neigh-strip:nth-of-type(2){left:4.56%!important;top:6.33%!important;width:92.84%!important;height:9.17%!important;}
.m-neigh .m-neigh-strip:nth-of-type(3){left:33.69%!important;top:12.10%!important;width:59.18%!important;height:8.72%!important;}
.m-neigh .m-neigh-headline{width:max-content!important;max-width:95%!important;white-space:nowrap!important;}
.m-neigh h2.m-neigh-headline{left:57.06%!important;top:-1.43%!important;height:9.74%!important;font-size:12.26cqw!important;}
.m-neigh span.m-neigh-headline:nth-of-type(1){left:5.66%!important;top:4.71%!important;height:9.74%!important;font-size:12.26cqw!important;}
.m-neigh span.m-neigh-headline:nth-of-type(2){left:35.16%!important;top:10.29%!important;height:9.74%!important;font-size:12.26cqw!important;}
.m-neigh .m-neigh-body{left:7.19%!important;right:auto!important;top:26.25%!important;width:90%!important;height:34.40%!important;font-size:16px!important;line-height:1.2!important;}
.m-neigh .m-neigh-body p{margin:0 0 3px!important;}
.m-neigh .m-neigh-body p:last-child{margin-bottom:0!important;}
.m-neigh .m-neigh-photo:nth-of-type(1){left:1.44%!important;top:45.15%!important;width:32.34%!important;height:48.74%!important;}
.m-neigh .m-neigh-photo:nth-of-type(2){left:34.59%!important;top:45.45%!important;width:65.92%!important;height:26.06%!important;}
.m-neigh .m-neigh-photo:nth-of-type(3){left:33.58%!important;top:79.21%!important;width:31.59%!important;height:20.76%!important;}
.m-neigh .m-neigh-photo:nth-of-type(4){left:65.92%!important;top:79.19%!important;width:33.58%!important;height:20.76%!important;}
/* Section 5: Park — aspect-ratio + cqw responsive */
.m-park{
aspect-ratio:402 / 566!important;
height:auto!important;min-height:0!important;max-height:none!important;
display:block!important;
container-type:inline-size;container-name:park;
}
.m-park-canvas{
position:absolute!important;inset:0!important;
width:100%!important;height:100%!important;
transform:none!important;margin:0!important;
}
.m-park .m-park-strip:nth-of-type(1){left:28.66%!important;top:0.87%!important;width:73.08%!important;height:7.72%!important;}
.m-park .m-park-strip:nth-of-type(2){left:0.50%!important;top:8.22%!important;width:83.46%!important;height:8.92%!important;}
.m-park .m-park-headline{width:max-content!important;max-width:95%!important;white-space:nowrap!important;}
.m-park h2.m-park-headline{left:30.60%!important;top:0%!important;height:9.66%!important;font-size:12.76cqw!important;}
.m-park span.m-park-headline{left:0.50%!important;top:7.88%!important;height:9.66%!important;font-size:12.76cqw!important;}
.m-park .m-park-body{left:5%!important;right:auto!important;top:21%!important;width:90%!important;height:18.87%!important;font-size:4.2cqw!important;line-height:1.2!important;}
.m-park .m-park-body p{margin:0 0 3px!important;}
.m-park .m-park-body p:last-child{margin-bottom:0!important;}
.m-park .m-park-photo:nth-of-type(1){left:3.31%!important;top:51.11%!important;width:46.74%!important;height:32.35%!important;}
.m-park .m-park-photo:nth-of-type(2){left:52.16%!important;top:51.20%!important;width:46.77%!important;height:16.59%!important;}
.m-park .m-park-photo:nth-of-type(3){left:52.44%!important;top:69.19%!important;width:46.49%!important;height:31.08%!important;}
.m-park .m-park-photo:nth-of-type(4){left:3.33%!important;top:85.16%!important;width:46.74%!important;height:14.88%!important;}
/* Section 6: Mapsec — aspect-ratio + cqw responsive */
.m-mapsec{
aspect-ratio:402 / 516!important;
height:auto!important;min-height:0!important;max-height:none!important;
display:block!important;
container-type:inline-size;container-name:mapsec;
}
.m-mapsec-canvas{
position:absolute!important;inset:0!important;
width:100%!important;height:100%!important;
transform:none!important;margin:0!important;
}
.m-mapsec .m-mapsec-map{left:5.08%!important;top:23.01%!important;width:54.46%!important;height:63.03%!important;}
.m-mapsec .m-mapsec-strip:nth-of-type(1){left:42.04%!important;top:0%!important;width:37.69%!important;height:8.18%!important;}
.m-mapsec .m-mapsec-strip:nth-of-type(2){left:19.35%!important;top:7.91%!important;width:56.09%!important;height:7.69%!important;}
.m-mapsec .m-mapsec-headline{width:max-content!important;max-width:95%!important;white-space:nowrap!important;}
.m-mapsec h2.m-mapsec-headline{left:42.74%!important;top:0.14%!important;height:8.02%!important;font-size:13.71cqw!important;}
.m-mapsec span.m-mapsec-headline{left:19.33%!important;top:7.93%!important;height:7.85%!important;font-size:13.56cqw!important;}
.m-mapsec .m-mapsec-pdf:nth-of-type(1){left:65.04%!important;top:47.45%!important;width:32.40%!important;height:5.36%!important;font-size:2.5cqw!important;letter-spacing:-0.12px!important;}
.m-mapsec .m-mapsec-pdf:nth-of-type(2){left:71.52%!important;top:53.38%!important;width:25.92%!important;height:5.36%!important;font-size:2.5cqw!important;letter-spacing:-0.12px!important;}
.m-mapsec .m-mapsec-pdf svg{width:2cqw!important;height:2cqw!important;}
.m-mapsec .m-mapsec-lawyer-top{left:52.12%!important;top:60.69%!important;width:44.88%!important;height:7.03%!important;font-size:3.00cqw!important;letter-spacing:-0.22px!important;line-height:1.25!important;}
.m-mapsec .m-mapsec-lawyer-text:nth-of-type(4){left:73.66%!important;top:67.16%!important;width:19.10%!important;height:6.94%!important;font-size:3.66cqw!important;letter-spacing:-0.22px!important;}
.m-mapsec .m-mapsec-icon:nth-of-type(5){left:93.20%!important;top:69.01%!important;width:4.18%!important;height:3.33%!important;}
.m-mapsec .m-mapsec-lawyer-text:nth-of-type(6){left:61.28%!important;top:73.56%!important;width:31.32%!important;height:6.18%!important;font-size:3.36cqw!important;letter-spacing:-0.22px!important;}
.m-mapsec .m-mapsec-icon:nth-of-type(7){left:93.14%!important;top:75.23%!important;width:4.18%!important;height:3.26%!important;}
.m-mapsec .m-mapsec-icon svg{width:100%!important;height:100%!important;}
/* Section 7: Distances — clean grid: headline + 2 rows × 3 columns */
.m-dist{
aspect-ratio:402 / 360!important;
height:auto!important;min-height:0!important;max-height:none!important;
display:block!important;
container-type:inline-size;container-name:dist;
}
.m-dist-canvas{
position:absolute!important;inset:0!important;
width:100%!important;height:100%!important;
transform:none!important;margin:0!important;
}
/* Decorative arrows (kept positioned roughly as before) */
.m-dist .m-dist-arrow:nth-of-type(1){left:-44%!important;top:0%!important;width:64.22%!important;height:23.58%!important;}
.m-dist .m-dist-arrow:nth-of-type(2){left:77.86%!important;top:0.25%!important;width:54.24%!important;height:19.72%!important;}
/* Headline strip */
.m-dist .m-dist-strip{left:15.5%!important;top:2%!important;width:69%!important;height:10%!important;}
.m-dist .m-dist-headline{width:max-content!important;max-width:95%!important;white-space:nowrap!important;}
.m-dist h2.m-dist-headline{left:20%!important;top:0%!important;height:13%!important;font-size:12cqw!important;}
/* Icons — square guaranteed by width=height in cqw (same unit). No aspect-ratio override. */
/* Row 1 — top icons: same top:21%, columns 8/41/73% */
/* Book container is 1.18× bigger to compensate for SVG inner padding.
Left/top adjusted so center matches other icons in the row. */
.m-dist .m-dist-icon:nth-of-type(3){left:73%!important;top:21%!important;width:18cqw!important;height:18cqw!important;font-size:5cqw!important;}
.m-dist .m-dist-icon:nth-of-type(4){left:41%!important;top:21%!important;width:18cqw!important;height:18cqw!important;font-size:5cqw!important;}
.m-dist .m-dist-icon:nth-of-type(5){left:8%!important;top:21%!important;width:18cqw!important;height:18cqw!important;font-size:5cqw!important;}
/* Row 1 text labels below icons */
.m-dist .m-dist-text:nth-of-type(2){left:67%!important;top:42%!important;width:32%!important;height:8%!important;font-size:5cqw!important;}
.m-dist .m-dist-text:nth-of-type(3){left:35%!important;top:42%!important;width:32%!important;height:8%!important;font-size:5cqw!important;}
.m-dist .m-dist-text:nth-of-type(4){left:2%!important;top:42%!important;width:32%!important;height:8%!important;font-size:5cqw!important;}
/* Row 1 badge (futuristic - on left icon) */
.m-dist .m-dist-badge:nth-of-type(5){left:8.12%!important;top:38.08%!important;width:5.94%!important;height:3.35%!important;font-size:2.05cqw!important;}
/* Row 2 — bottom icons: same top:62%, same columns */
.m-dist .m-dist-icon:nth-of-type(6){left:73%!important;top:54%!important;width:18cqw!important;height:18cqw!important;font-size:5cqw!important;}
.m-dist .m-dist-icon:nth-of-type(7){left:41%!important;top:54%!important;width:18cqw!important;height:18cqw!important;font-size:5cqw!important;}
.m-dist .m-dist-icon:nth-of-type(8){left:8%!important;top:54%!important;width:18cqw!important;height:18cqw!important;font-size:5cqw!important;}
/* Row 2 text labels */
.m-dist .m-dist-text:nth-of-type(6){left:67%!important;top:75%!important;width:32%!important;height:8%!important;font-size:5cqw!important;}
.m-dist .m-dist-text:nth-of-type(7){left:35%!important;top:75%!important;width:32%!important;height:8%!important;font-size:5cqw!important;}
.m-dist .m-dist-text:nth-of-type(9){left:2%!important;top:75%!important;width:32%!important;height:8%!important;font-size:5cqw!important;}
/* Row 2 badge (futuristic - on middle icon) */
.m-dist .m-dist-badge:nth-of-type(8){left:41.04%!important;top:70.95%!important;width:5.94%!important;height:3.35%!important;font-size:2.05cqw!important;}
/* Section 8: Companies — aspect-ratio + cqw responsive */
.m-comp{
aspect-ratio:402 / 676!important;
height:auto!important;min-height:0!important;max-height:none!important;
display:block!important;
container-type:inline-size;container-name:comp;
}
.m-comp-canvas{
position:absolute!important;inset:0!important;
width:100%!important;height:100%!important;
transform:none!important;margin:0!important;
}
.m-comp .m-comp-line:nth-of-type(1){left:0.65%!important;top:10.28%!important;}
.m-comp .m-comp-banner:nth-of-type(1){left:0.70%!important;top:0.46%!important;width:31.82%!important;height:8.64%!important;font-size:5.40cqw!important;}
.m-comp .m-comp-banner:nth-of-type(2){left:34.13%!important;top:0.49%!important;width:31.39%!important;height:8.82%!important;font-size:5.75cqw!important;}
.m-comp .m-comp-strip{left:67.16%!important;top:0.59%!important;width:30.70%!important;height:3.91%!important;font-size:5.00cqw!important;}
.m-comp .m-comp-title,.m-comp .m-comp-subtitle{width:max-content!important;max-width:95%!important;white-space:nowrap!important;}
.m-comp h2.m-comp-title{left:69.18%!important;top:0.01%!important;height:5.03%!important;font-size:7.84cqw!important;}
.m-comp .m-comp-subtitle{left:67.41%!important;top:4.69%!important;height:5.22%!important;font-size:4.08cqw!important;}
.m-comp .m-comp-logo:nth-of-type(3){left:68.28%!important;top:9.45%!important;width:30.07%!important;height:6.98%!important;font-size:11.87cqw!important;}
.m-comp .m-comp-body:nth-of-type(4){left:1.80%!important;right:auto!important;top:11.00%!important;width:64.52%!important;height:47.71%!important;font-size:11.25px!important;line-height:1.2!important;}
.m-comp .m-comp-line:nth-of-type(5){left:1.22%!important;top:55.50%!important;}
.m-comp .m-comp-logo:nth-of-type(4){left:70.36%!important;top:55.34%!important;width:29.14%!important;height:8.59%!important;font-size:16.97cqw!important;}
.m-comp .m-comp-body:nth-of-type(6){left:1.16%!important;right:auto!important;top:56.57%!important;width:66.70%!important;height:33.17%!important;font-size:11.25px!important;line-height:1.2!important;}
.m-comp .m-comp-body p{margin:0 0 3px!important;}
.m-comp .m-comp-body p:last-child{margin-bottom:0!important;}
/* Header — aspect-ratio + cqw responsive (same technique as hero) */
.m-header{
aspect-ratio:402 / 86;height:auto!important;
container-type:inline-size;container-name:hdr;
}
.m-header-canvas{
position:absolute!important;inset:0!important;
width:100%!important;height:100%!important;
transform:none!important;margin:0!important;
}
.m-wrap{padding-top:calc(100vw * 86 / 402)!important;}
.m-header .m-h-logo-link{width:auto!important;height:auto!important;}
.m-header .m-h-logo-link.m-h-logo-link-1{left:27.64%!important;top:15.12%!important;width:16.92%!important;height:30.23%!important;}
.m-header .m-h-logo-link.m-h-logo-link-2{left:43.78%!important;top:11.63%!important;width:32.34%!important;height:34.88%!important;}
.m-header .m-h-sep{left:45.77%!important;top:15.12%!important;width:0.5%!important;height:26.74%!important;}
.m-header .m-h-link{font-size:3.48cqw!important;line-height:1!important;}
.m-header .m-h-link:nth-of-type(3){left:11.72%!important;top:55.81%!important;}
.m-header .m-h-link:nth-of-type(4){left:30.87%!important;top:55.81%!important;}
.m-header .m-h-link:nth-of-type(5){left:51.77%!important;top:55.81%!important;}
.m-header .m-h-link:nth-of-type(6){left:73.66%!important;top:55.81%!important;}
}
/* On tiny screens header itself is scaled */
@media (max-width:402px){
html{scroll-padding-top:calc(100vw * 86 / 402);}
.m-neigh,.m-park,.m-mapsec,.m-dist,.m-comp{
height:calc(100svh - (100vw * 86 / 402)) !important;
}
}
/* Per-breakpoint overrides */
@media (max-width:320px){
.m-neigh .m-neigh-strip:nth-of-type(1){left:58.84%!important;width:34.03%!important;height:6.06%!important;}
.m-neigh .m-neigh-strip:nth-of-type(2){left:4.50%!important;width:93.19%!important;top:6.33%!important;height:6.49%!important;}
.m-neigh .m-neigh-strip:nth-of-type(3){left:33.63%!important;width:59.53%!important;top:12.10%!important;height:5.73%!important;}
.m-neigh h2.m-neigh-headline{left:57.00%!important;width:36.12%!important;top:-1.43%!important;height:10.09%!important;}
.m-neigh span.m-neigh-headline:nth-of-type(1){left:5.59%!important;top:4.71%!important;}
.m-neigh span.m-neigh-headline:nth-of-type(2){left:35.09%!important;top:10.29%!important;}
.m-neigh .m-neigh-body{left:7.13%!important;top:17.91%!important;font-size:16px!important;}
.m-neigh .m-neigh-photo:nth-of-type(1){left:1.38%!important;top:45.15%!important;}
.m-neigh .m-neigh-photo:nth-of-type(2){left:34.50%!important;top:45.45%!important;}
.m-neigh .m-neigh-photo:nth-of-type(3){left:34.50%!important;top:73.02%!important;}
.m-neigh .m-neigh-photo:nth-of-type(4){left:66.81%!important;top:73.03%!important;}
}
@media (min-width:320px){
.m-mapsec .m-mapsec-map{left:10.1px!important;width:186.3px!important;top:125.4px!important;height:273.1px!important;font-size:10.3px!important;}
.m-mapsec .m-mapsec-strip:nth-of-type(1){width:120.6px!important;top:8.2px!important;height:34.7px!important;}
.m-mapsec .m-mapsec-strip:nth-of-type(2){left:62.1px!important;width:179.2px!important;top:39.1px!important;height:35.7px!important;}
.m-mapsec span.m-mapsec-headline{left:64.1px!important;top:32.4px!important;}
.m-mapsec .m-mapsec-pdf:nth-of-type(1){left:214.7px!important;top:202.1px!important;}
.m-mapsec .m-mapsec-pdf:nth-of-type(2){left:234.6px!important;top:239.2px!important;}
.m-mapsec .m-mapsec-lawyer-top{left:168.6px!important;width:148.9px!important;top:285.9px!important;height:44.2px!important;font-size:11.5px!important;}
.m-neigh .m-neigh-strip:nth-of-type(1){left:204.5px!important;width:95px!important;top:22px!important;height:33.3px!important;font-size:14px!important;}
.m-neigh .m-neigh-strip:nth-of-type(2){left:52.8px!important;width:260.3px!important;top:54.2px!important;height:35.7px!important;font-size:14px!important;}
.m-neigh .m-neigh-strip:nth-of-type(3){left:134.1px!important;width:166.3px!important;top:85.9px!important;height:31.5px!important;font-size:14px!important;}
.m-neigh h2.m-neigh-headline{left:199.3px!important;width:100.9px!important;top:11.5px!important;height:55.5px!important;font-size:34.2px!important;}
.m-neigh span.m-neigh-headline:nth-of-type(1){left:57.9px!important;width:255.7px!important;top:45.3px!important;height:53.6px!important;font-size:34.2px!important;}
.m-neigh span.m-neigh-headline:nth-of-type(2){left:138.2px!important;width:162.8px!important;top:76px!important;height:53.6px!important;font-size:34.2px!important;}
.m-mapsec .m-mapsec-lawyer-text:nth-of-type(4){left:236.1px!important;top:319.6px!important;}
.m-mapsec .m-mapsec-icon:nth-of-type(5){left:298.6px!important;top:331.2px!important;}
.m-mapsec .m-mapsec-lawyer-text:nth-of-type(6){left:196.5px!important;top:359.9px!important;}
.m-mapsec .m-mapsec-icon:nth-of-type(7){left:298.5px!important;top:370.5px!important;}
.m-park .m-park-strip:nth-of-type(1){left:83.8px!important;width:233.9px!important;top:5.7px!important;height:33.9px!important;}
.m-park .m-park-strip:nth-of-type(2){left:2.6px!important;width:265px!important;top:35px!important;height:31.3px!important;}
.m-park h2.m-park-headline{left:87px!important;top:-7.2px!important;}
.m-park span.m-park-headline{left:5.5px!important;top:20.7px!important;}
.m-park .m-park-body{left:16.5px!important;width:296.8px!important;top:69.9px!important;height:222.3px!important;font-size:19px!important;}
.m-park .m-park-photo:nth-of-type(1){left:10.6px!important;top:276.9px!important;}
.m-park .m-park-photo:nth-of-type(2){left:166.9px!important;top:277.5px!important;}
.m-park .m-park-photo:nth-of-type(3){left:167.8px!important;top:390.9px!important;}
.m-park .m-park-photo:nth-of-type(4){left:10.6px!important;top:491.6px!important;}
.m-dist .m-dist-arrow:nth-of-type(1){left:-120.5px!important;width:196.7px!important;top:10.9px!important;height:47.3px!important;}
.m-dist .m-dist-arrow:nth-of-type(2){left:259.9px!important;width:156.5px!important;top:19.6px!important;height:50.4px!important;}
.m-dist .m-dist-strip{left:60px!important;width:210.3px!important;top:23.8px!important;height:32.2px!important;}
.m-dist h2.m-dist-headline{left:63.2px!important;top:-0.6px!important;}
.m-dist .m-dist-icon:nth-of-type(3){left:233.2px!important;width:65px!important;top:128.8px!important;height:65px!important;}
.m-dist .m-dist-text:nth-of-type(2){left:211.7px!important;top:203.1px!important;}
.m-dist .m-dist-text:nth-of-type(3){left:109.3px!important;top:203px!important;}
.m-dist .m-dist-text:nth-of-type(4){left:3.7px!important;top:203.1px!important;}
.m-dist .m-dist-badge:nth-of-type(5){left:23.2px!important;top:178.4px!important;}
.m-dist .m-dist-icon:nth-of-type(6){left:232.5px!important;top:252.2px!important;}
.m-dist .m-dist-text:nth-of-type(6){left:211.7px!important;top:325px!important;}
.m-dist .m-dist-icon:nth-of-type(7){left:130.4px!important;top:252.3px!important;}
.m-dist .m-dist-text:nth-of-type(7){left:109.3px!important;top:325px!important;}
.m-dist .m-dist-badge:nth-of-type(8){left:128.6px!important;top:299.5px!important;}
.m-dist .m-dist-icon:nth-of-type(8){left:24.8px!important;top:252.3px!important;}
.m-dist .m-dist-text:nth-of-type(9){left:3.7px!important;top:325px!important;}
.m-comp h2.m-comp-title{left:218.6px!important;top:0.7px!important;}
.m-comp .m-comp-logo:nth-of-type(3){left:220.1px!important;top:53.2px!important;}
.m-comp .m-comp-body:nth-of-type(4){left:7.5px!important;width:209.6px!important;top:68.2px!important;height:301px!important;font-size:10px!important;}
.m-comp .m-comp-body:nth-of-type(6){left:3.3px!important;top:362.8px!important;font-size:10.5px!important;}
.m-plots .m-plots-body{left:19.9px!important;top:91.6px!important;}
.m-plots{left:-1.5px!important;top:23px!important;}
}
@media (min-width:375px){
.m-mapsec .m-mapsec-strip:nth-of-type(1){width:143.2px!important;top:6.9px!important;height:38.6px!important;}
.m-mapsec .m-mapsec-strip:nth-of-type(2){width:210.9px!important;top:37.6px!important;height:37.7px!important;}
.m-mapsec h2.m-mapsec-headline{left:160.3px!important;top:0.3px!important;}
.m-mapsec span.m-mapsec-headline{left:64px!important;top:32.4px!important;}
.m-mapsec .m-mapsec-pdf:nth-of-type(1){left:211.6px!important;top:215.3px!important;}
.m-mapsec .m-mapsec-pdf:nth-of-type(2){left:233.3px!important;top:252.4px!important;}
.m-mapsec .m-mapsec-lawyer-top{left:179.8px!important;top:290px!important;}
.m-mapsec .m-mapsec-lawyer-text:nth-of-type(4){left:245.2px!important;top:316.6px!important;}
.m-mapsec .m-mapsec-icon:nth-of-type(5){left:316.9px!important;top:328.1px!important;}
.m-mapsec .m-mapsec-lawyer-text:nth-of-type(6){left:199.3px!important;top:353.4px!important;}
.m-mapsec .m-mapsec-icon:nth-of-type(7){left:316.7px!important;top:363.8px!important;}
.m-park .m-park-strip:nth-of-type(1){left:89.8px!important;width:267px!important;top:3.7px!important;height:34.9px!important;}
.m-park .m-park-strip:nth-of-type(2){left:10.1px!important;width:309.1px!important;top:36.5px!important;height:36.2px!important;}
.m-park h2.m-park-headline{left:93px!important;top:-9.2px!important;}
.m-park span.m-park-headline{left:12.9px!important;top:25.9px!important;}
.m-park .m-park-body{left:51.4px!important;width:305.9px!important;top:69.1px!important;height:221.3px!important;}
.m-park .m-park-photo:nth-of-type(1){left:4.6px!important;top:275.9px!important;}
.m-park .m-park-photo:nth-of-type(2){left:186.6px!important;top:277.6px!important;}
.m-park .m-park-photo:nth-of-type(3){left:185.7px!important;width:175.1px!important;top:383.9px!important;height:193.4px!important;}
.m-park .m-park-photo:nth-of-type(4){left:4.7px!important;top:484.5px!important;}
.m-neigh .m-neigh-strip:nth-of-type(1){left:257.7px!important;width:99px!important;top:25.8px!important;height:28.9px!important;}
.m-neigh .m-neigh-strip:nth-of-type(2){left:88.8px!important;width:261.8px!important;top:50.9px!important;height:32px!important;}
.m-neigh .m-neigh-strip:nth-of-type(3){left:198.1px!important;width:170px!important;top:81.9px!important;height:29.1px!important;}
.m-neigh h2.m-neigh-headline{left:254.7px!important;top:12.5px!important;}
.m-neigh span.m-neigh-headline:nth-of-type(1){left:94.2px!important;top:41.1px!important;}
.m-neigh span.m-neigh-headline:nth-of-type(2){left:204.1px!important;top:68.7px!important;}
.m-neigh .m-neigh-body{left:27.8px!important;top:112.7px!important;font-size:17px!important;}
.m-neigh .m-neigh-photo:nth-of-type(1){left:5.7px!important;width:121.4px!important;top:279.2px!important;height:295.4px!important;}
.m-neigh .m-neigh-photo:nth-of-type(3){left:127.5px!important;top:445.9px!important;}
.m-neigh .m-neigh-photo:nth-of-type(4){left:248.8px!important;top:445.8px!important;}
.m-plots .m-plots-body{left:20.3px!important;top:110.4px!important;}
.m-dist .m-dist-arrow:nth-of-type(1){left:-118.7px!important;top:12.3px!important;}
.m-dist .m-dist-arrow:nth-of-type(2){left:302.6px!important;top:26px!important;}
.m-dist .m-dist-strip{width:244.6px!important;top:22.9px!important;height:33.9px!important;}
.m-dist .m-dist-icon:nth-of-type(3){left:270px!important;width:73.3px!important;top:128.3px!important;height:74.8px!important;}
.m-dist .m-dist-text:nth-of-type(2){left:246.3px!important;top:203.2px!important;}
.m-dist .m-dist-icon:nth-of-type(4){left:161.2px!important;top:130.6px!important;}
.m-dist .m-dist-text:nth-of-type(3){left:138.5px!important;top:203.7px!important;}
.m-dist .m-dist-icon:nth-of-type(5){left:43px!important;top:131.3px!important;}
.m-dist .m-dist-text:nth-of-type(4){left:13.3px!important;top:204.5px!important;}
.m-dist .m-dist-badge:nth-of-type(5){left:36.2px!important;top:179.8px!important;}
.m-dist .m-dist-icon:nth-of-type(6){left:272.3px!important;top:253.5px!important;}
.m-dist .m-dist-text:nth-of-type(6){left:242.4px!important;top:324.8px!important;}
.m-dist .m-dist-icon:nth-of-type(7){left:159.6px!important;top:253px!important;}
.m-dist .m-dist-text:nth-of-type(7){left:130px!important;top:325.6px!important;}
.m-dist .m-dist-badge:nth-of-type(8){left:157.8px!important;top:300.1px!important;}
.m-dist .m-dist-icon:nth-of-type(8){left:37.8px!important;top:253.7px!important;}
.m-dist .m-dist-text:nth-of-type(9){left:10px!important;top:326.4px!important;}
.m-comp h2.m-comp-title{left:254.1px!important;top:1px!important;}
.m-comp .m-comp-logo:nth-of-type(3){left:260.9px!important;top:54.1px!important;}
.m-comp .m-comp-body:nth-of-type(4){width:249.7px!important;height:273.6px!important;}
.m-comp .m-comp-logo:nth-of-type(4){left:270.8px!important;top:342.6px!important;}
.m-comp .m-comp-body:nth-of-type(6){width:252.3px!important;height:267.1px!important;}
}
@media (min-width:412px){
.m-mapsec .m-mapsec-map{left:5.2px!important;width:196px!important;top:118.3px!important;height:287.4px!important;font-size:10.8px!important;}
.m-mapsec .m-mapsec-strip:nth-of-type(1){left:154.1px!important;width:162.3px!important;top:0.5px!important;height:45px!important;}
.m-mapsec .m-mapsec-strip:nth-of-type(2){left:62.4px!important;width:228.4px!important;top:40.2px!important;height:44.2px!important;}
.m-mapsec span.m-mapsec-headline{left:63.8px!important;top:40.3px!important;}
.m-mapsec .m-mapsec-pdf:nth-of-type(1){left:218.5px!important;width:170.5px!important;top:171.3px!important;height:36.2px!important;font-size:13.2px!important;}
.m-mapsec .m-mapsec-pdf:nth-of-type(2){left:253px!important;width:136.4px!important;top:218.9px!important;height:36.2px!important;font-size:13.2px!important;}
.m-mapsec .m-mapsec-lawyer-top{left:178px!important;width:209.8px!important;top:266.6px!important;height:56.4px!important;font-size:15.5px!important;}
.m-mapsec .m-mapsec-lawyer-text:nth-of-type(4){left:263.5px!important;width:100.5px!important;top:301.7px!important;height:46.9px!important;font-size:19.3px!important;}
.m-mapsec .m-mapsec-icon:nth-of-type(5){left:366.4px!important;width:22px!important;top:315.6px!important;height:22.5px!important;font-size:20.4px!important;}
.m-mapsec .m-mapsec-lawyer-text:nth-of-type(6){left:202.6px!important;width:164.8px!important;top:349.5px!important;height:41.7px!important;font-size:17.7px!important;}
.m-mapsec .m-mapsec-icon:nth-of-type(7){left:368px!important;width:22px!important;top:361px!important;height:22px!important;font-size:20.4px!important;}
.m-neigh .m-neigh-strip:nth-of-type(1){left:253.2px!important;top:3.5px!important;}
.m-neigh .m-neigh-strip:nth-of-type(2){left:60.3px!important;width:335.5px!important;top:34.1px!important;height:36.9px!important;}
.m-neigh .m-neigh-strip:nth-of-type(3){left:166.3px!important;width:215px!important;top:66.8px!important;height:33.9px!important;}
.m-neigh h2.m-neigh-headline{left:259.9px!important;width:120.2px!important;top:-2.7px!important;height:47.7px!important;font-size:44.6px!important;}
.m-neigh span.m-neigh-headline:nth-of-type(1){left:96.6px!important;width:300.6px!important;top:34.5px!important;height:36px!important;font-size:44.6px!important;}
.m-neigh span.m-neigh-headline:nth-of-type(2){left:171.4px!important;width:210.9px!important;top:60.5px!important;height:47.7px!important;font-size:44.6px!important;}
.m-neigh .m-neigh-body{left:23.5px!important;top:101.1px!important;}
.m-neigh .m-neigh-photo:nth-of-type(3){left:144.7px!important;top:404.1px!important;}
.m-neigh .m-neigh-photo:nth-of-type(4){left:277.6px!important;top:404.3px!important;}
.m-park .m-park-strip:nth-of-type(1){left:103.3px!important;width:293.7px!important;top:4.6px!important;height:33.9px!important;}
.m-park .m-park-strip:nth-of-type(2){left:23.7px!important;width:339.5px!important;top:37.4px!important;height:37.1px!important;}
.m-park h2.m-park-headline{left:106.6px!important;top:-8.3px!important;}
.m-park span.m-park-headline{left:26.4px!important;top:26.8px!important;}
.m-park .m-park-body{left:57.8px!important;top:69px!important;}
.m-park .m-park-photo:nth-of-type(2){left:203.5px!important;top:275px!important;}
.m-park .m-park-photo:nth-of-type(3){left:204.5px!important;width:190.6px!important;top:375.7px!important;height:193.4px!important;}
.m-park .m-park-photo:nth-of-type(4){left:7.2px!important;width:190.7px!important;top:472.7px!important;height:97.9px!important;}
.m-dist .m-dist-arrow:nth-of-type(1){left:-126.7px!important;width:210.1px!important;top:8.9px!important;height:59.4px!important;}
.m-dist .m-dist-arrow:nth-of-type(2){left:302.4px!important;width:156.7px!important;top:21.9px!important;height:54.5px!important;}
.m-dist .m-dist-strip{left:62.8px!important;width:262.2px!important;top:21.7px!important;height:39.1px!important;}
.m-dist h2.m-dist-headline{left:62.4px!important;top:16.5px!important;}
.m-dist .m-dist-icon:nth-of-type(3){left:271.2px!important;width:77.3px!important;top:126.7px!important;height:79.2px!important;}
.m-dist .m-dist-text:nth-of-type(3){left:132.4px!important;top:203.7px!important;}
.m-dist .m-dist-text:nth-of-type(4){left:12px!important;top:204.5px!important;}
.m-dist .m-dist-text:nth-of-type(6){left:242.6px!important;top:330px!important;}
.m-dist .m-dist-text:nth-of-type(7){left:130.6px!important;top:330.2px!important;}
.m-dist .m-dist-text:nth-of-type(9){left:10.5px!important;top:330.5px!important;}
.m-comp h2.m-comp-title{left:279.6px!important;top:-0.1px!important;}
.m-comp .m-comp-logo:nth-of-type(3){left:264.1px!important;top:60.6px!important;}
.m-comp .m-comp-body:nth-of-type(4){left:10.1px!important;width:248.8px!important;top:73.7px!important;height:308.3px!important;font-size:11.5px!important;}
.m-comp .m-comp-logo:nth-of-type(4){left:271.3px!important;top:381px!important;}
.m-comp .m-comp-body:nth-of-type(6){left:4.8px!important;top:391.8px!important;font-size:11.5px!important;}
.m-plots span.m-plots-headline{left:43.4px!important;top:64.9px!important;}
.m-plots{left:0px!important;top:30.1px!important;}
}
@media (min-width:412px){
.m-neigh .m-neigh-strip:nth-of-type(1){left:256.3px!important;width:120.5px!important;top:35.5px!important;height:28.6px!important;}
.m-neigh .m-neigh-strip:nth-of-type(2){left:63.4px!important;top:62.8px!important;}
.m-neigh .m-neigh-strip:nth-of-type(3){left:169.4px!important;top:95.5px!important;}
.m-neigh h2.m-neigh-headline{left:259.3px!important;top:27.2px!important;}
.m-neigh span.m-neigh-headline:nth-of-type(1){left:99.7px!important;top:63.2px!important;}
.m-neigh span.m-neigh-headline:nth-of-type(2){left:174.5px!important;top:89.2px!important;}
.m-neigh .m-neigh-body{left:26.5px!important;top:129.8px!important;}
.m-neigh .m-neigh-photo:nth-of-type(1){left:26.9px!important;width:117.3px!important;top:276.2px!important;height:266.8px!important;}
.m-neigh .m-neigh-photo:nth-of-type(2){left:150.2px!important;width:258.1px!important;top:278px!important;height:145.6px!important;}
.m-neigh .m-neigh-photo:nth-of-type(3){left:149.6px!important;width:120.7px!important;top:430.9px!important;height:114.7px!important;}
.m-neigh .m-neigh-photo:nth-of-type(4){left:273.8px!important;width:132.8px!important;top:430.2px!important;height:115px!important;}
.m-plots .m-plots-body{left:20.3px!important;top:119px!important;}
}
@media (min-width:425px){
.m-park .m-park-strip:nth-of-type(1){left:103.8px!important;width:304.2px!important;top:18px!important;height:38.3px!important;}
.m-park .m-park-strip:nth-of-type(2){left:10.1px!important;width:348.9px!important;top:55.2px!important;height:40.5px!important;}
.m-park h2.m-park-headline{left:106.6px!important;top:8px!important;}
.m-park span.m-park-headline{left:12.9px!important;top:46.5px!important;}
.m-park .m-park-body{left:12.6px!important;width:393.6px!important;top:94.5px!important;height:224.3px!important;}
.m-park .m-park-photo:nth-of-type(2){left:208px!important;width:198.5px!important;top:275.1px!important;height:102.5px!important;}
.m-park .m-park-photo:nth-of-type(3){left:207.2px!important;width:197.7px!important;top:381.3px!important;height:193.4px!important;}
.m-park .m-park-photo:nth-of-type(4){left:4.7px!important;width:198.2px!important;top:472.7px!important;height:101.2px!important;}
.m-neigh .m-neigh-strip:nth-of-type(1){left:240.8px!important;width:142.2px!important;top:12.4px!important;height:41.6px!important;}
.m-neigh .m-neigh-strip:nth-of-type(2){left:18.3px!important;width:387.7px!important;top:49.9px!important;height:40.7px!important;}
.m-neigh .m-neigh-strip:nth-of-type(3){left:130.3px!important;width:247.6px!important;top:86.5px!important;height:43px!important;}
.m-neigh h2.m-neigh-headline{left:235.7px!important;width:150.2px!important;top:3.7px!important;height:60.7px!important;}
.m-neigh span.m-neigh-headline:nth-of-type(1){left:68.4px!important;top:49.4px!important;}
.m-neigh span.m-neigh-headline:nth-of-type(2){left:133.1px!important;top:80.2px!important;}
.m-neigh .m-neigh-body{left:27.4px!important;top:124.1px!important;font-size:16.5px!important;}
.m-neigh .m-neigh-photo:nth-of-type(1){width:137.7px!important;top:264.5px!important;height:272.4px!important;}
.m-neigh .m-neigh-photo:nth-of-type(2){left:149px!important;top:264.6px!important;}
.m-neigh .m-neigh-photo:nth-of-type(3){left:147.4px!important;top:416.4px!important;}
.m-neigh .m-neigh-photo:nth-of-type(4){left:284.4px!important;top:417.8px!important;}
.m-dist .m-dist-arrow:nth-of-type(1){left:-137px!important;width:206.2px!important;top:15.4px!important;height:56.4px!important;}
.m-dist .m-dist-arrow:nth-of-type(2){left:340.3px!important;width:174.7px!important;top:15.6px!important;height:55.3px!important;}
.m-dist .m-dist-strip{left:67.8px!important;width:275.9px!important;top:19.6px!important;height:41.1px!important;}
.m-dist h2.m-dist-headline{left:71px!important;top:16.6px!important;}
.m-dist .m-dist-icon:nth-of-type(3){left:278.8px!important;width:83.8px!important;top:96.6px!important;height:83.2px!important;}
.m-dist .m-dist-text:nth-of-type(2){left:254.2px!important;top:176.4px!important;}
.m-dist .m-dist-icon:nth-of-type(4){left:170.3px!important;top:100.2px!important;}
.m-dist .m-dist-text:nth-of-type(3){left:141.1px!important;top:176.3px!important;}
.m-dist .m-dist-icon:nth-of-type(5){left:49px!important;top:100.3px!important;}
.m-dist .m-dist-text:nth-of-type(4){left:17.1px!important;top:178px!important;}
.m-dist .m-dist-badge:nth-of-type(5){left:42.5px!important;top:149px!important;}
.m-dist .m-dist-icon:nth-of-type(6){left:283.5px!important;top:224.3px!important;}
.m-dist .m-dist-text:nth-of-type(6){left:254.1px!important;top:303.3px!important;}
.m-dist .m-dist-icon:nth-of-type(7){left:168.7px!important;top:225.4px!important;}
.m-dist .m-dist-text:nth-of-type(7){left:135.6px!important;top:302.8px!important;}
.m-dist .m-dist-badge:nth-of-type(8){left:168.6px!important;top:289.6px!important;}
.m-dist .m-dist-icon:nth-of-type(8){left:44px!important;top:222.9px!important;}
.m-dist .m-dist-text:nth-of-type(9){left:16.2px!important;top:303.2px!important;}
.m-comp h2.m-comp-title{left:288.2px!important;top:0.7px!important;}
.m-comp .m-comp-subtitle{left:291.8px!important;top:34.1px!important;}
.m-comp .m-comp-logo:nth-of-type(3){left:287px!important;top:65.8px!important;}
.m-comp .m-comp-body:nth-of-type(4){left:8.2px!important;width:274.2px!important;top:77px!important;height:320.3px!important;font-size:12.5px!important;}
.m-comp .m-comp-logo:nth-of-type(4){left:299.3px!important;top:393.3px!important;}
.m-comp .m-comp-body:nth-of-type(6){left:4.8px!important;width:278.3px!important;top:403.4px!important;height:267.9px!important;font-size:12.5px!important;}
}
@media (min-width:320px) and (max-width:374px){
.m-mapsec .m-mapsec-map{left:3.6px!important;width:181.3px!important;top:127.7px!important;height:265.9px!important;font-size:10.1px!important;}
.m-mapsec .m-mapsec-strip:nth-of-type(1){left:154.5px!important;width:121.9px!important;top:21.5px!important;height:31.8px!important;}
.m-mapsec .m-mapsec-strip:nth-of-type(2){left:78.2px!important;width:183.8px!important;top:50.5px!important;height:32.3px!important;}
.m-mapsec h2.m-mapsec-headline{left:158.2px!important;width:120.8px!important;top:15.2px!important;height:46.9px!important;}
.m-mapsec span.m-mapsec-headline{left:82.4px!important;top:42.5px!important;}
.m-mapsec .m-mapsec-pdf:nth-of-type(1){left:214.8px!important;top:220.2px!important;}
.m-mapsec .m-mapsec-pdf:nth-of-type(2){left:234.7px!important;top:257.3px!important;}
.m-mapsec .m-mapsec-lawyer-top{left:148.4px!important;top:289.4px!important;}
.m-mapsec .m-mapsec-lawyer-text:nth-of-type(4){left:243px!important;top:311.5px!important;}
.m-mapsec .m-mapsec-icon:nth-of-type(5){left:307.9px!important;top:323.9px!important;}
.m-mapsec .m-mapsec-lawyer-text:nth-of-type(6){left:205.1px!important;top:352.8px!important;}
.m-mapsec .m-mapsec-icon:nth-of-type(7){left:307.8px!important;top:362.5px!important;}
.m-plots .m-plots-stat .lbl{top:26px!important;}
}
@media (min-width:425px){
.m-mapsec .m-mapsec-pdf:nth-of-type(1){left:260.8px!important;top:245.3px!important;}
.m-mapsec .m-mapsec-pdf:nth-of-type(2){left:288.1px!important;top:282.3px!important;}
.m-mapsec .m-mapsec-lawyer-top{left:201.7px!important;width:192.6px!important;top:315.8px!important;height:42.8px!important;font-size:14.5px!important;}
.m-mapsec .m-mapsec-lawyer-text:nth-of-type(3){left:289.6px!important;width:123.1px!important;top:370.8px!important;height:12.4px!important;font-size:16.5px!important;}
.m-mapsec .m-mapsec-icon:nth-of-type(4){left:378.1px!important;top:369.7px!important;}
.m-mapsec .m-mapsec-lawyer-text:nth-of-type(4){left:231.4px!important;top:383.7px!important;}
.m-mapsec .m-mapsec-icon:nth-of-type(5){left:377.5px!important;top:396.5px!important;}
.m-mapsec .m-mapsec-map{left:6.8px!important;width:230.8px!important;top:96.5px!important;height:338.3px!important;font-size:12.8px!important;}
.m-mapsec .m-mapsec-strip:nth-of-type(1){left:152px!important;width:164.7px!important;top:10.7px!important;height:45px!important;}
.m-mapsec .m-mapsec-strip:nth-of-type(2){left:63px!important;width:240.9px!important;top:53.9px!important;height:40.3px!important;}
.m-mapsec h2.m-mapsec-headline{left:158.5px!important;top:11.1px!important;}
.m-mapsec span.m-mapsec-headline{left:67.2px!important;top:53.3px!important;}
.m-mapsec .m-mapsec-pdf:nth-of-type(1){left:254px!important;top:212.4px!important;}
.m-mapsec .m-mapsec-pdf:nth-of-type(2){left:281.3px!important;top:249.5px!important;}
.m-mapsec .m-mapsec-lawyer-top{left:217px!important;width:170.5px!important;top:282.9px!important;height:43.7px!important;font-size:13px!important;}
.m-mapsec .m-mapsec-lawyer-text:nth-of-type(4){left:289.8px!important;top:313.8px!important;}
.m-mapsec .m-mapsec-icon:nth-of-type(5){left:372.5px!important;top:325px!important;}
.m-mapsec .m-mapsec-lawyer-text:nth-of-type(6){left:240.9px!important;top:350.5px!important;}
.m-mapsec .m-mapsec-icon:nth-of-type(7){left:372.3px!important;top:360.7px!important;}
.m-mapsec .m-mapsec-map{left:4.9px!important;top:96.5px!important;}
.m-mapsec .m-mapsec-pdf:nth-of-type(1){left:239.2px!important;top:193.1px!important;}
.m-mapsec .m-mapsec-pdf:nth-of-type(2){left:271.8px!important;top:232.6px!important;}
.m-mapsec .m-mapsec-lawyer-top{left:235.1px!important;top:282.9px!important;}
.m-mapsec .m-mapsec-lawyer-text:nth-of-type(4){left:279.5px!important;top:308.9px!important;}
.m-mapsec .m-mapsec-icon:nth-of-type(5){left:384.6px!important;top:321.9px!important;}
.m-mapsec .m-mapsec-lawyer-text:nth-of-type(6){left:223.1px!important;top:348px!important;}
.m-mapsec .m-mapsec-icon:nth-of-type(7){left:384.5px!important;top:360.2px!important;}
.m-neigh .m-neigh-strip:nth-of-type(1){left:265.1px!important;width:124.2px!important;top:34.7px!important;height:38.8px!important;}
.m-neigh .m-neigh-strip:nth-of-type(2){left:29.3px!important;width:337px!important;top:71px!important;height:32.6px!important;}
.m-neigh .m-neigh-strip:nth-of-type(3){left:198.9px!important;width:213.3px!important;top:102.3px!important;height:34.4px!important;}
.m-neigh h2.m-neigh-headline{left:242.1px!important;top:23.5px!important;}
.m-neigh span.m-neigh-headline:nth-of-type(1){left:65.3px!important;top:70.5px!important;}
.m-neigh span.m-neigh-headline:nth-of-type(2){left:201.9px!important;top:95.7px!important;}
.m-neigh .m-neigh-body{left:28.6px!important;top:144.5px!important;}
.m-neigh .m-neigh-photo:nth-of-type(1){left:25.6px!important;top:292.7px!important;}
.m-neigh .m-neigh-photo:nth-of-type(2){left:171.6px!important;width:244.3px!important;top:290.8px!important;height:153.7px!important;}
.m-neigh .m-neigh-photo:nth-of-type(3){left:171.5px!important;width:110.6px!important;top:447.6px!important;height:115.2px!important;}
.m-neigh .m-neigh-photo:nth-of-type(4){left:288.6px!important;width:123px!important;top:447.1px!important;height:115.8px!important;}
}
/* ═══════════════════════════════════════════
FRAME SECTIONS — each studio frame as a full-width image
(Cropped: top nav bar removed since we have our own fixed nav)
═══════════════════════════════════════════ */
.frame{
position:relative;
width:100%;
display:block;
background:#000;
line-height:0;
}
.frame img{
width:100%;
height:auto;
display:block;
}
/* Frames are cropped to 8000x4000 ratio (2:1) */
/* ═══════════════════════════════════════════
FIXED TOP NAVIGATION BAR
═══════════════════════════════════════════ */
.top-nav{
position:fixed;
top:0;left:0;right:0;
z-index:500;
background:#000;
height:54px;
display:flex;align-items:center;justify-content:space-between;
padding:0 28px 0 32px;
}
.top-nav-logos{
display:flex;align-items:center;
height:100%;
flex-shrink:0;
}
.top-nav-logos img{
height:34px;
width:auto;
}
.top-nav-links{
display:flex;align-items:center;gap:0;
font-family:var(--fb);
font-size:15px;
font-weight:400;
color:#fff;
}
.top-nav-links a{
padding:0 14px;
color:#fff;
transition:color .2s;
white-space:nowrap;
}
.top-nav-links a:hover,
.top-nav-links a.active{color:var(--c-yellow);}
.top-nav-links .sep{
color:var(--c-yellow);
font-weight:300;
display:inline-block;
}
/* ═══════════════════════════════════════════
HERO - Split layout with framed video
═══════════════════════════════════════════ */
.hero{
position:relative;
min-height:100vh;
background:transparent;
overflow:hidden;
color:#fff;
padding:0;
display:flex;flex-direction:column;
opacity:0;
transition:opacity .6s ease-out;
}
.hero.in-view{opacity:1;}
.hero-inner{
position:relative;
flex:1;min-height:100vh;
width:100%;
display:grid;
grid-template-rows:1fr auto;
gap:0;
}
.hero-text{
position:absolute;z-index:2;
top:80px;
right:56px;
bottom:auto;left:auto;
display:block;
padding:0;
background:none;
}
.hero-text-l{display:flex;flex-direction:column;align-items:flex-end;position:relative;z-index:1;}
.hero-text-r{display:none;}
.hero-logos{
position:absolute;top:42px;left:80px;z-index:3;
display:flex;align-items:center;gap:22px;
opacity:0;animation:fadeUp .7s var(--spring) .2s forwards;
}
.hero-logos img{
height:52px;width:auto;
filter:brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.4));
opacity:.95;
}
/* Outline CTA button */
.hero-cta{
align-self:flex-start;
display:inline-flex;align-items:center;gap:14px;
padding:16px 32px;
background:var(--c-yellow);
color:var(--c-black);
border:2px solid var(--c-black);
font-family:var(--fc);
font-size:17px;font-weight:400;letter-spacing:.01em;
text-decoration:none;
margin-bottom:14px;
box-shadow:4px 4px 0 var(--c-black),0 12px 32px rgba(245,196,0,.35);
transition:transform .25s var(--spring),box-shadow .25s var(--spring),background .25s;
opacity:0;animation:fadeUp .7s var(--spring) 1s forwards;
cursor:pointer;
}
.hero-cta:hover{
background:var(--c-yellow-lt);
transform:translate(-2px,-2px);
box-shadow:6px 6px 0 var(--c-black),0 16px 40px rgba(245,196,0,.45);
}
.hero-cta::after{
content:'';width:9px;height:9px;
border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
transform:rotate(135deg);margin-right:-4px;
}
/* Bottom event bar */
.hero-event{
position:relative;
display:inline-flex;align-items:center;gap:0;
padding:16px 26px;padding-left:60px;
background:rgba(253,246,232,.08);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
border:1px solid rgba(253,246,232,.22);
border-radius:14px;
opacity:0;animation:fadeUp .7s var(--spring) 1.4s forwards;
align-self:flex-start;
max-width:100%;
}
.hero-event-time,
.hero-event-date{
font-family:var(--fb);
font-size:clamp(1.4rem, 1.8vw, 1.9rem);
font-weight:700;color:#fdf6e8;
letter-spacing:-0.02em;line-height:1;
direction:ltr;unicode-bidi:isolate;
}
.hero-event-div{
width:1px;height:32px;margin:0 18px;
background:rgba(253,246,232,.35);
}
/* Circular yellow badge overlapping bottom bar */
.hero-badge-circle{
position:absolute;
top:50%;left:-22px;
width:88px;height:88px;
background:#f5c400;
border-radius:50%;
display:flex;flex-direction:column;align-items:center;justify-content:center;
color:#0f2416;
text-align:center;
padding:0 8px;line-height:1.08;
box-shadow:0 12px 32px rgba(245,196,0,.32), 0 0 0 4px rgba(245,196,0,.12);
transform:translateY(-50%) rotate(-8deg);
animation:badgeFloat 4s ease-in-out infinite alternate,fadeUp .7s var(--spring) 1.6s backwards;
}
.hero-badge-circle .big{
font-family:var(--fb);font-weight:700;
font-size:1.05rem;letter-spacing:-0.02em;
}
.hero-badge-circle .sm{
font-family:var(--fb);font-weight:700;
font-size:.56rem;margin-top:2px;
}
@keyframes badgeFloat{
0%{transform:translateY(-50%) rotate(-8deg);}
100%{transform:translateY(calc(-50% - 4px)) rotate(-5deg);}
}
/* Countdown line */
.hero-countdown{
display:flex;align-items:center;gap:8px;margin-top:10px;
font-family:var(--fb);font-size:11px;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;
color:#f5c400;
opacity:0;animation:fadeUp .6s var(--spring) 1.8s forwards;
}
.hero-countdown .dot{
width:6px;height:6px;border-radius:50%;background:#f5c400;
box-shadow:0 0 0 0 rgba(245,196,0,.6);
animation:pulseDot 1.8s ease-in-out infinite;
}
@keyframes pulseDot{
0%,100%{box-shadow:0 0 0 0 rgba(245,196,0,.6);}
50%{box-shadow:0 0 0 6px rgba(245,196,0,0);}
}
.hero-badge{
align-self:flex-start;
display:inline-flex;align-items:center;gap:10px;
background:#f5c400;color:#07120a;
font-size:12px;font-weight:700;letter-spacing:.08em;
padding:9px 18px;border-radius:2px;
margin-bottom:26px;
opacity:0;animation:fadeUp .7s var(--spring) .3s forwards;
box-shadow:0 12px 32px rgba(245,196,0,.25);
}
.hero-badge::before{
content:'';width:6px;height:6px;border-radius:50%;
background:#07120a;
animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{
0%,100%{transform:scale(1);opacity:1;}
50%{transform:scale(1.6);opacity:.4;}
}
/* Video disclaimer — "illustration only" notice for any video on the page */
.video-disclaimer{
position:absolute;
bottom:36px;left:18px;
z-index:10;
font-family:var(--fb);
font-size:11px;
font-weight:500;
letter-spacing:.02em;
color:rgba(253,246,232,.95);
padding:5px 11px 6px;
background:rgba(7,18,10,.78);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
border-radius:3px;
pointer-events:none;
direction:rtl;
}
/* Hero variant — positioned absolute to .hero-inner (like the title); scrolls with the hero
naturally, so it's visible while the hero is in view and flows off-screen with it. */
.video-disclaimer-fixed{
position:absolute;
bottom:114px;left:14px;
z-index:5;
}
.m-disclaimer{
position:absolute;
bottom:34px;left:12px;
}
.m-hero .m-disclaimer{bottom:64px;}
.m-disclaimer{
z-index:20;
font-family:'Assistant',sans-serif;
font-size:10px;font-weight:500;letter-spacing:.02em;
color:rgba(253,246,232,.95);
padding:4px 9px 5px;
background:rgba(7,18,10,.7);
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
border-radius:3px;
pointer-events:none;direction:rtl;
}
/* Video — normal scroll, no fixed parallax */
.hero-media{
position:absolute;z-index:0;
inset:0;
width:100%;height:100%;
overflow:hidden;
opacity:0;transform:scale(1.02);
animation:mediaReveal 1.4s cubic-bezier(.22,1,.36,1) forwards;
}
.hero-media::before{
content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(180deg,rgba(7,18,10,.35) 0%,transparent 20%,transparent 60%,rgba(7,18,10,.55) 100%);
}
/* NOTE: legacy decorative layers (hero-ambient/orbs, hero-flourish, hero-birds, hero-leaves)
were removed — they were defined but never used in HTML. Cleaned up 2026-04-24 during
frontend-design pass. */
.hero-media::before{content:none;}
.hero-media::after{
content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(180deg, transparent 0%, transparent 55%, rgba(7,18,10,.35) 100%);
border-radius:inherit;
}
.hero-video{
position:absolute;inset:0;z-index:1;
width:100%;height:100%;
object-fit:cover;
transform:scale(1.05);
animation:kenBurns 20s ease-in-out infinite alternate;
}
.hero-media-tag{
position:absolute;top:28px;right:28px;z-index:4;
display:flex;align-items:center;gap:8px;
background:rgba(7,18,10,.65);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
padding:8px 14px;border-radius:100px;
font-size:11px;font-weight:700;letter-spacing:.14em;
color:rgba(255,255,255,.85);text-transform:uppercase;
border:1px solid rgba(245,196,0,.2);
}
.hero-media-tag::before{
content:'';width:7px;height:7px;border-radius:50%;
background:#f5c400;box-shadow:0 0 10px rgba(245,196,0,.8);
animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes mediaReveal{
to{opacity:1;transform:scale(1);}
}
@keyframes kenBurns{
0%{transform:scale(1.05) translate(0,0);}
100%{transform:scale(1.12) translate(-2%,-1%);}
}
@keyframes videoFadeIn{to{opacity:1;}}
.hero-kicker{
position:absolute;top:54px;right:64px;z-index:3;
display:inline-flex;align-items:center;gap:14px;
font-family:var(--fc);
font-size:13px;font-weight:400;letter-spacing:.14em;
color:var(--c-white);
background:var(--c-black);
padding:8px 16px;
text-shadow:none;
border:1.5px solid rgba(245,196,0,.55);
opacity:0;animation:fadeUp .7s var(--spring) .5s forwards;
}
/* ═══════ CAMPAIGN HERO STYLE (black+yellow blocks) ═══════ */
.hero-campaign-wrap{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:0;
}
.hero-headline-img{
display:block;
width:clamp(420px, 52vw, 720px);
height:auto;
max-width:100%;
opacity:0;animation:blockIn .8s var(--spring) .55s forwards;
filter:drop-shadow(0 6px 24px rgba(0,0,0,.25));
}
/* Figma 1:1 — מתאים ל-.s-plots-h-text (זהה בעיצוב לכותרת המגרשים) */
.hero-headline{
display:inline-flex;
align-items:center;
justify-content:center;
background:#000;
color:#FFC40C;
font-family:'FbMatadorNarrow','Heebo',sans-serif;
font-weight:700;
font-size:clamp(40px, 5.3vw, 75.85px);
line-height:1;
height:0.923em; /* 70/75.85 — אותה פרופורציה כמו ב-Figma */
padding:0 0.237em; /* ~18/75.85 — ריווח אופקי יחסי לפונט */
margin:0;
white-space:nowrap;
overflow:visible;
filter:drop-shadow(0 6px 18px rgba(0,0,0,.3));
opacity:0;
transform:translateY(24px) scaleX(.92);
transition:opacity .8s var(--spring) .85s, transform .8s var(--spring) .85s;
}
.hero-headline + .hero-headline{align-self:center;transition-delay:1.65s;}
.hero.in-view .hero-headline{opacity:1;transform:translateY(0) scaleX(1);}
/* Figma 1:1 — 2:367 yellow bar + 2:369 mixed-size text */
.hero-bottom-bar{
position:absolute;
bottom:calc(var(--form-h) + 86px);
right:56px;
z-index:4;
display:inline-flex;
align-items:baseline;
background:var(--c-yellow);
color:#000;
font-family:'FbMatadorNarrow','Heebo',sans-serif;
font-weight:700;
padding:8px 24px 14px;
white-space:nowrap;
box-shadow:0 8px 24px rgba(0,0,0,.25);
opacity:0;
transform:translateY(20px);
transition:opacity .8s var(--spring) 1.5s, transform .8s var(--spring) 1.5s;
}
.hero.in-view .hero-bottom-bar{opacity:1;transform:translateY(0);}
.hero-bottom-bar .big{font-size:clamp(26px, 4.7vw, 67.352px);line-height:1;}
.hero-bottom-bar .small{font-size:clamp(16px, 2.83vw, 40.766px);line-height:1;}
.hero-bottom-bar bdi{font-family:inherit;direction:ltr;unicode-bidi:isolate;}
.visually-hidden{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.hero-price-pill{
display:inline-flex;align-items:center;gap:.35em;
margin-top:0;
background:var(--c-yellow);
color:var(--c-black);
font-family:var(--fc);
font-weight:700;
font-size:inherit;
padding:2px 10px 5px;
line-height:1;letter-spacing:-0.01em;
opacity:0;animation:blockIn .7s var(--spring) .85s forwards;
}
.hero-price-pill bdi{direction:ltr;unicode-bidi:isolate;}
.hero-stamp-img{
position:absolute;z-index:4;
top:50%;left:16px;
transform:translateY(-50%) rotate(-15deg) scale(.6);
width:200px;height:200px;
object-fit:contain;
filter:invert(1);
mix-blend-mode:screen;
opacity:0;
transition:opacity .6s cubic-bezier(.5,-0.6,.3,1.7) 2.4s, transform .6s cubic-bezier(.5,-0.6,.3,1.7) 2.4s;
}
.hero.in-view .hero-stamp-img{opacity:1;transform:translateY(-50%) rotate(-15deg) scale(1);}
.hero-bottom-bar-img{
position:absolute;
bottom:calc(var(--form-h) + 36px);
right:56px;
z-index:4;
display:block;
width:clamp(420px, 52vw, 720px);
height:auto;
max-width:calc(100% - 80px);
opacity:0;
animation:fadeUp .8s var(--spring) 1.2s forwards;
filter:drop-shadow(0 6px 24px rgba(0,0,0,.25));
}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
@keyframes blockIn{
from{opacity:0;transform:translateY(24px) scaleX(.92);}
to{opacity:1;transform:translateY(0) scaleX(1);}
}
@keyframes stampIn{
from{opacity:0;transform:translateY(-50%) rotate(-20deg) scale(.4);}
to{opacity:1;transform:translateY(-50%) rotate(-15deg) scale(1);}
}
.hero-title{
font-family:var(--fb);
font-weight:700;
color:#fff;
letter-spacing:-0.045em;
line-height:.92;
margin-bottom:0;
position:relative;
}
.hero-title .line{
display:flex;flex-wrap:nowrap;
gap:0 .22em;
white-space:nowrap;
}
.hero-title .line-big{
font-size:clamp(2.4rem, 4.4vw, 4.6rem);
font-weight:700;
letter-spacing:-0.045em;
line-height:.92;
color:#fff;
text-shadow:0 3px 20px rgba(0,0,0,.5);
}
.hero-title .line-tag{
display:inline-block;
font-size:11px;
font-weight:700;
letter-spacing:.32em;
text-transform:uppercase;
color:rgba(255,255,255,.65);
margin:18px 0 20px;
padding-bottom:14px;
border-bottom:1px solid rgba(245,196,0,.35);
max-width:260px;
}
.hero-title .line-italic{
font-family:'Fraunces',serif;
font-style:italic;
font-weight:700;
font-size:clamp(2.2rem, 4vw, 4.2rem);
letter-spacing:-0.035em;
line-height:.96;
margin-top:0;
color:#f5c400;
}
.hero-title .line-italic .w .i{
background:none;-webkit-text-fill-color:inherit;color:#f5c400;
filter:drop-shadow(0 4px 20px rgba(245,196,0,.25));
}
.hero-title .w{
display:inline-flex;
overflow:hidden;
padding:.15em .08em .22em;
line-height:1;
margin:-.12em -.06em -.18em;
}
.hero-title .w .i{
display:inline-block;
transform:translateY(110%);
animation:wordReveal 1.15s cubic-bezier(.22,1,.36,1) forwards;
text-shadow:0 8px 40px rgba(0,0,0,.55);
}
.hero-title .line-big .w .i{animation-delay:.45s;}
.hero-title .line-italic .w .i{
background:linear-gradient(135deg,#ffe87a 0%,#f5c400 45%,#d4a820 100%);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
filter:drop-shadow(0 6px 28px rgba(245,196,0,.3));
text-shadow:none;
animation:wordReveal 1.2s cubic-bezier(.22,1,.36,1) forwards, goldGlow 3.5s ease-in-out 2s infinite;
}
.hero-title .line-italic .w:nth-child(1) .i{animation-delay:.95s, 2s;}
.hero-title .line-italic .w:nth-child(2) .i{animation-delay:1.08s, 2.15s;}
@keyframes wordReveal{
from{transform:translateY(110%);}
to{transform:translateY(0);}
}
@keyframes goldGlow{
0%,100%{filter:drop-shadow(0 6px 28px rgba(245,196,0,.3));}
50%{filter:drop-shadow(0 8px 40px rgba(245,196,0,.55));}
}
.hero-sub{
font-size:clamp(1rem, 1.4vw, 1.3rem);
font-weight:500;
color:rgba(255,255,255,.88);
margin-bottom:30px;
max-width:640px;
line-height:1.45;
opacity:0;animation:fadeUp .75s var(--spring) 1.35s forwards;
}
.hero-meta{
display:flex;align-items:flex-end;gap:40px;
padding-top:22px;
border-top:1px solid rgba(255,255,255,.18);
opacity:0;animation:fadeUp .7s var(--spring) 1.55s forwards;
flex-wrap:wrap;
}
.hero-meta-item{display:flex;flex-direction:column;gap:6px;}
.hero-meta-lbl{
font-size:11px;font-weight:700;letter-spacing:.2em;
color:rgba(255,255,255,.5);text-transform:uppercase;
}
.hero-meta-val{
font-family:var(--fd);
font-size:clamp(2rem, 3.2vw, 3rem);
font-weight:700;color:#fff;
letter-spacing:-0.028em;line-height:1;
direction:ltr;unicode-bidi:isolate;
}
.hero-meta-val.accent{
color:#f5c400;
filter:drop-shadow(0 4px 20px rgba(245,196,0,.2));
}
.scroll-ind{
position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
z-index:4;display:flex;flex-direction:column;align-items:center;gap:8px;
color:rgba(255,255,255,.85);font-size:10px;letter-spacing:.22em;
text-transform:uppercase;font-weight:700;
text-shadow:0 1px 4px rgba(0,0,0,.6);
opacity:0;animation:fadeUp .5s var(--spring) 2.1s forwards;
}
.scroll-ind-line{
width:1px;height:44px;background:rgba(255,255,255,.4);
transform-origin:top;animation:grow-line 1.8s var(--spring) 2.3s infinite;
}
@keyframes grow-line{0%{transform:scaleY(0);}50%{transform:scaleY(1);}100%{transform:scaleY(0);}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
@keyframes heroLine{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:none;}}
@keyframes slideUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
/* ═══════════════════════════════════════════
SECTION SHARED
═══════════════════════════════════════════ */
.sec{padding:88px 64px;}
.sec-in{max-width:1000px;margin:0 auto;}
/* Campaign-style section label: black pill with yellow text */
.sec-label{
display:inline-flex;align-items:center;gap:10px;
font-family:var(--fb);
font-size:13px;font-weight:700;letter-spacing:normal;
color:var(--c-yellow);
background:var(--c-black);
padding:10px 18px 11px;
margin-bottom:22px;
opacity:0;transform:translateY(12px);
transition:opacity .6s var(--spring),transform .6s var(--spring);
}
.sec-label.in{opacity:1;transform:none;}
.sec-num{
opacity:.7;font-size:12px;letter-spacing:normal;font-weight:500;
color:var(--c-white);
margin-right:4px;
}
/* Campaign-style section title: Rubik Black on light bg */
.sec-h2{
font-family:var(--fc);
font-size:clamp(2.6rem,6.2vw,5rem);
font-weight:700;
line-height:.96;
letter-spacing:-0.015em;
margin-bottom:28px;
color:var(--c-black);
}
.sec-h2 em{
font-family:var(--fc);
font-style:normal;
font-weight:700;
color:var(--c-yellow);
letter-spacing:inherit;
background:var(--c-black);
padding:2px 14px 4px;
display:inline-block;
box-shadow:4px 4px 0 rgba(0,0,0,.15);
}
/* Inverted (for dark sections: gallery, lake) */
.sec-h2-inv{color:#fff;}
.sec-label-inv{color:var(--c-yellow);background:var(--c-black);}
.sec-h2-inv em{color:var(--c-yellow);background:var(--c-black);}
/* ═══════════════════════════════════════════
CTA BANNER — floating pill that follows on scroll, scrolls to map on click
═══════════════════════════════════════════ */
.cta-banner{
position:fixed;
bottom:calc(var(--form-h) + 20px); /* sit above the sticky bottom form */
right:24px; /* visual right side */
z-index:401; /* above the bottom form (z-index:400) */
display:inline-flex;
align-items:center;
gap:12px;
background:#FFC40C;
color:#000;
text-decoration:none;
padding:14px 24px;
font-family:'FbMatadorNarrow','Heebo',sans-serif;
font-weight:700;
font-size:30px;
letter-spacing:-0.4px;
line-height:1;
border-radius:9999px;
cursor:pointer;
border:none;
white-space:nowrap;
box-shadow:0 12px 28px rgba(0,0,0,.22), 0 4px 10px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.05);
transition:background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease, opacity .3s ease;
}
.cta-banner:hover,
.cta-banner:focus-visible{
background:#000;
color:#FFC40C;
transform:translateY(-2px);
box-shadow:0 16px 36px rgba(0,0,0,.32), 0 6px 14px rgba(0,0,0,.18);
outline:none;
}
.cta-banner .arrow{
display:inline-block;
font-size:.95em;
line-height:1;
transition:transform .25s ease;
}
.cta-banner:hover .arrow,
.cta-banner:focus-visible .arrow{transform:translateX(-6px);}
/* Hide when already on the destination section so it doesn't overlap content */
.cta-banner.is-hidden{
opacity:0;
pointer-events:none;
transform:translateY(20px);
}
@media (max-width:600px){
.cta-banner{font-size:22px;padding:14px 22px;right:14px;bottom:calc(var(--form-h) - 36px);}
}
/* ═══════════════════════════════════════════
SECTION TRANSITIONS — sections scroll OVER fixed hero video
═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
LAKE VIDEO SECTION (replaces frame 02 placeholder)
═══════════════════════════════════════════ */
.s-lake{
position:relative;
width:100%;
background:#000;
min-height:100vh;
aspect-ratio:1920/1080;
overflow:hidden;
scroll-margin-top:-130px;
}
.s-lake video{
position:absolute;inset:0;
width:100%;height:100%;
object-fit:cover;
z-index:0;
}
.s-lake::before{
content:'';
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.05) 50%,rgba(0,0,0,.55) 100%);
z-index:1;
}
.s-lake-content{
position:absolute;z-index:4;
bottom:64px;right:64px;
text-align:right;color:#fdf6e8;
max-width:480px;
pointer-events:none;
}
.s-lake-kicker{
display:inline-flex;align-items:center;gap:12px;
font-size:11px;font-weight:700;letter-spacing:.3em;
text-transform:uppercase;color:rgba(253,246,232,.82);
margin-bottom:18px;
}
.s-lake-kicker::after{
content:'';display:block;width:42px;height:1px;background:rgba(255,255,255,.45);
}
.s-lake-title{
font-family:var(--fc);
font-size:clamp(2.2rem,4.4vw,4rem);
font-weight:400;line-height:1;letter-spacing:-0.01em;
margin-bottom:18px;
text-shadow:0 4px 24px rgba(0,0,0,.55);
}
.s-lake-title em{
font-family:var(--fc);font-style:normal;font-weight:400;
color:var(--c-black);background:var(--c-yellow);
padding:0 12px 2px;display:inline-block;
letter-spacing:inherit;
box-shadow:3px 3px 0 rgba(0,0,0,.3);
}
.s-lake-sub{
font-size:clamp(.95rem,1.1vw,1.12rem);
font-weight:500;max-width:440px;
color:rgba(253,246,232,.9);line-height:1.55;
text-shadow:0 2px 12px rgba(0,0,0,.5);
}
@media (max-width:600px){
.s-lake-content{bottom:80px;right:24px;left:24px;max-width:none;}
.s-lake-sub{max-width:none;}
}
/* ═══════════════════════════════════════════
MAP SECTION (frame 07) — interactive download buttons overlay
═══════════════════════════════════════════ */
.s-map{
position:relative;
width:100%;
background:#000;
overflow:hidden;
line-height:0;
}
.s-map > img{
width:100%;
height:auto;
display:block;
}
.s-map-buttons{
position:absolute;
top:55%;
right:14%;
z-index:5;
display:flex;flex-direction:column;
gap:14px;
align-items:flex-start;
}
.btn-dl{
display:inline-flex;align-items:center;gap:14px;
background:var(--c-yellow);
color:var(--c-black);
font-family:var(--fc);
font-size:clamp(1rem,1.4vw,1.4rem);
font-weight:700;
letter-spacing:.005em;
padding:.7em 1.5em;
border:2px solid var(--c-black);
cursor:pointer;
transition:transform .25s var(--spring),box-shadow .25s var(--spring),background .25s;
text-decoration:none;
white-space:nowrap;
line-height:1.2;
}
.btn-dl:hover{
background:var(--c-yellow-lt);
transform:translate(-2px,-2px);
box-shadow:5px 5px 0 var(--c-black);
}
.btn-dl svg{width:1.3em;height:1.3em;flex-shrink:0;}
/* White separator between sections */
.section-separator{
width:100%;
height:60px;
background:#fff;
}
/* ═══════════════════════════════════════════
PLACEHOLDER for missing frames (03 & 06)
═══════════════════════════════════════════ */
.frame-placeholder{
width:100%;
aspect-ratio:2/1;
background:#fdf6e8;
display:flex;align-items:center;justify-content:center;flex-direction:column;
border-top:1px dashed #ccc;
border-bottom:1px dashed #ccc;
font-family:var(--fc);
font-size:1.6rem;
color:#666;
text-align:center;
padding:32px;
gap:14px;
}
.frame-placeholder small{
font-size:.8rem;
font-family:'Heebo',sans-serif;
color:#999;
font-weight:400;
}
/* ═══════════════════════════════════════════
STICKY BOTTOM FORM
═══════════════════════════════════════════ */
.bottom-form{
position:fixed;bottom:0;left:0;right:0;
z-index:400;
background:var(--c-black);
height:var(--form-h);
display:flex;align-items:center;
padding:0 32px;
gap:20px;
border-top:2px solid var(--c-yellow);
}
.bf-text{
font-family:'Assistant',sans-serif;
font-weight:800;
font-size:1.4rem;
line-height:1;
color:#fff;
background:transparent;
padding:0;
white-space:nowrap;
display:inline-flex;
align-items:center;
letter-spacing:.02em;
}
.bf-fields{flex:1;display:flex;gap:8px;align-items:center;}
.bf-input{
flex:1;
padding:9px 14px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.16);
color:#fff;
font-family:var(--fb);font-size:14px;
min-width:0;
}
.bf-input:focus{outline:none;border-color:var(--c-yellow);background:rgba(255,255,255,.12);}
.bf-input::placeholder{color:rgba(255,255,255,.5);}
.bf-input[dir="ltr"]:placeholder-shown{text-align:right;direction:rtl;}
@media (max-width:600px){
.bf-input,.bf-mob-input,input[type="text"],input[type="tel"],input[type="email"]{font-size:16px!important;}
}
.bf-consent{
display:flex;align-items:center;gap:6px;
font-size:11px;color:rgba(255,255,255,.6);flex-shrink:0;
}
.bf-consent input[type=checkbox]{width:13px;height:13px;}
.bf-consent a{color:var(--c-yellow);text-decoration:underline;}
.btn-send{
background:var(--c-yellow);
color:var(--c-black);
font-family:var(--fb);font-size:1.05rem;font-weight:800;
letter-spacing:.05em;
padding:9px 26px;
border:2px solid var(--c-black);
transition:transform .2s var(--spring),box-shadow .2s var(--spring);
flex-shrink:0;
}
.btn-send:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--c-yellow);}
.bf-hp{position:absolute;left:-9999px;}
.bf-success{
display:none;align-items:center;gap:14px;
color:var(--c-yellow);
font-family:'Assistant',sans-serif;
font-weight:800;
font-size:1.6rem;
letter-spacing:.02em;
flex:1;justify-content:center;
text-align:center;
}
.bf-success svg{width:32px;height:32px;}
.bf-success.show{display:flex;}
@media (max-width:600px){
.bf-mobile-toggle .bf-success{
font-family:'FbMatadorNarrow','Heebo',sans-serif;
font-weight:700;font-size:28px;letter-spacing:-.01em;
padding:18px 8px;color:var(--c-yellow);
flex-direction:row;
}
.bf-mobile-toggle .bf-success svg{width:36px;height:36px;flex-shrink:0;}
}
.bottom-form:has(.bf-success.show) .bf-text{display:none;}
/* ─── Toast notification (elegant alerts) ─── */
.toast{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%, -50%) scale(.85);
z-index:11500;
display:flex;
flex-direction:column;
align-items:center;
gap:18px;
background:#000;
color:#FFC40C;
font-family:'Assistant',sans-serif;
font-weight:800;
font-size:1.7rem;
line-height:1.25;
padding:38px 56px 42px;
border:3px solid #FFC40C;
box-shadow:0 24px 64px rgba(0,0,0,.55), 0 0 0 100vw rgba(0,0,0,.45);
cursor:pointer;
opacity:0;
transition:transform .45s cubic-bezier(0.16,1,0.3,1), opacity .35s ease-out;
max-width:min(520px, 90vw);
text-align:center;
}
.toast.show{
transform:translate(-50%, -50%) scale(1);
opacity:1;
}
.toast svg{width:48px;height:48px;flex-shrink:0;stroke:#FFC40C;stroke-width:2;}
.bf-input.invalid,.bf-mob-input.invalid{
border-color:#ff6b6b!important;
background:rgba(255,107,107,.08)!important;
animation:shakeX .35s ease-in-out;
}
@keyframes shakeX{
0%,100%{transform:translateX(0);}
25%{transform:translateX(-4px);}
75%{transform:translateX(4px);}
}
@media (prefers-reduced-motion:reduce){
.toast{transition:opacity .2s;}
.bf-input.invalid,.bf-mob-input.invalid{animation:none;}
}
/* ═══════════════════════════════════════════
MOBILE DRAWER FORM (collapsible)
═══════════════════════════════════════════ */
.bf-mobile-toggle{
display:none;
position:fixed;bottom:0;left:0;right:0;z-index:500;
background:#0e0e0e;padding:18px 22px 16px;
flex-direction:column;gap:14px;
box-shadow:0 -4px 24px rgba(0,0,0,.45);
border-top:2px solid var(--c-yellow);
}
.bf-mobile-cta{
display:flex;align-items:center;justify-content:space-between;
gap:12px;
cursor:pointer;
}
.bf-mobile-cta-titles{
display:flex;align-items:center;gap:14px;flex-wrap:wrap;
flex:1;min-width:0;
}
.bf-mobile-cta-main{
font-family:var(--fc);font-size:1.45rem;font-weight:400;
color:#fff;letter-spacing:.005em;line-height:1.05;
}
.bf-mobile-cta-pill{
display:inline-block;
font-family:var(--fc);font-size:15px;font-weight:800;
background:var(--c-yellow);color:var(--c-black);
letter-spacing:.1em;
padding:5px 13px 6px;
transform:rotate(-3deg);
box-shadow:2px 2px 0 rgba(0,0,0,.4);
white-space:nowrap;
}
.bf-mobile-cta-arrow{transition:transform .3s;flex-shrink:0;}
.bf-mobile-toggle.open .bf-mobile-cta-arrow{transform:rotate(180deg);}
.bf-mobile-body{display:none;padding-top:10px;border-top:1px solid rgba(255,255,255,.12);}
.bf-mobile-toggle.open .bf-mobile-body{display:block;}
.bf-mobile-row{display:flex;gap:10px;margin-bottom:10px;}
.bf-mobile-row .bf-input{flex:1;}
/* ═══════════════════════════════════════════
FOOTER
═══════════════════════════════════════════ */
footer{
background:#ede8dc;color:rgba(0,0,0,.72);
border-top:1px solid rgba(0,0,0,.1);
padding:28px 64px;text-align:center;font-size:13px;line-height:1.9;
}
footer a{color:var(--c-black);text-decoration:underline;text-underline-offset:3px;}
footer a:hover{opacity:.7;}
.ft-credit{
margin-top:14px;
font-size:11px;
color:rgba(0,0,0,.62);
letter-spacing:.04em;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
flex-wrap:wrap;
}
.ft-spin{
direction:ltr;
display:inline-flex;align-items:center;gap:1px;
font-family:var(--fc);
font-size:14px;
font-weight:700;
color:rgba(0,0,0,.65);
letter-spacing:.02em;
line-height:1;
text-transform:lowercase;
position:relative;
top:1px;
}
.ft-spin i{
width:3px;height:3px;
border-radius:50%;
background:#1faec4;
display:inline-block;
margin:0 1px;
}
/* ═══════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════ */
.nav-burger{display:none;}
@media (max-width:600px){
:root{--form-h:114px;}
body{padding-bottom:var(--form-h);}
/* HERO MOBILE */
.hero{min-height:100vh;}
.hero-inner{min-height:100vh;}
.hero-stamp-img{width:28vw;height:28vw;left:8px;top:40%;}
.hero-text{top:12%;right:5%;max-width:90%;}
.hero-headline-img{width:min(86vw, 460px);}
.hero-bottom-bar-img{
bottom:calc(var(--form-h) + 16px);
right:5%;
width:min(86vw, 460px);
max-width:90vw;
}
/* TOP NAV MOBILE */
.top-nav{height:48px;padding:0 16px;}
.top-nav-logos img{height:30px;}
.top-nav-links{display:none;}
.top-nav-links.open{
display:flex;
position:absolute;top:100%;left:0;right:0;
flex-direction:column;
background:#000;
padding:14px 0;
z-index:10;
}
.top-nav-links.open a{padding:12px 24px;font-size:16px;}
.top-nav-links.open .sep{display:none;}
.nav-burger{
display:flex;
width:36px;height:36px;
flex-direction:column;justify-content:center;align-items:center;gap:5px;
cursor:pointer;
}
.nav-burger span{
display:block;width:22px;height:2px;background:#fff;
transition:transform .25s var(--spring),opacity .2s;
}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
/* FRAMES MOBILE — keep native aspect ratio so all baked-in text stays visible. */
.frame{aspect-ratio:auto;background:#0a0a0a;}
.frame img{width:100%;height:auto;object-fit:contain;}
/* LAKE MOBILE */
.s-lake{min-height:auto;aspect-ratio:9/14;}
.s-lake-content{bottom:48px;right:20px;left:20px;max-width:none;}
.s-lake-content h2{font-size:clamp(1.4rem,6.4vw,2.4rem);}
.s-lake-content p{font-size:clamp(.95rem,3.4vw,1.15rem);}
/* MAP MOBILE */
.s-map{background:#fff;}
.s-map > img{width:100%;height:auto;object-fit:contain;}
.s-map-buttons{
position:relative;top:auto;bottom:auto;right:auto;left:auto;
transform:none;
width:90%;
margin:16px auto 24px;
align-items:stretch;
}
.btn-dl{width:100%;justify-content:center;font-size:.95rem;padding:.6em 1em;}
/* Hide desktop sticky form, show mobile drawer */
.bottom-form{display:none;}
.bf-mobile-toggle{display:flex;}
.scroll-ind{display:none;}
}
/* ═══════════════════════════════════════════════════════════════════
STUDIO V2 — Decomposed Figma sections
Design: yellow #FFC40C + black + Assistant body + Heebo 900 display
═══════════════════════════════════════════════════════════════════ */
/* Reusable: Yellow text on black bar - the studio's signature headline */
.sx-headline{
display:inline-block;
background:var(--c-black);
color:var(--c-yellow);
font-family:var(--fc);
font-weight:700;
font-size:clamp(36px, 5.3vw, 75.85px);
line-height:1;
padding:4px 18px 10px;
margin:0;
max-width:100%;
width:fit-content;
}
/* When explicit width/height is set inline (Figma-exact dimensions), center text and allow overflow */
.sx-headline[style*="width"]{
display:inline-flex;
align-items:center;
justify-content:center;
padding:0;
overflow:visible;
}
.sx-headline-stack{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:0;
}
/* Body paragraph - Assistant 22px / 1.32 */
.sx-body{
font-family:var(--fb);
font-weight:400;
font-size:clamp(15px, 1.5vw, 22px);
line-height:1.32;
color:var(--c-black);
letter-spacing:-0.04em;
text-align:right;
}
.sx-body strong{font-weight:700;letter-spacing:-0.03em;}
.sx-body.justified{text-align:justify;}
/* Section wrapper: inner padding consistent with Figma 70px from edge */
.sx-section{
position:relative;
background:#F4F1E5;
padding:64px 70px;
}
.sx-section-inner{
max-width:1280px;
margin:0 auto;
position:relative;
}
/* ─── HERO SECTION (rewritten) ─── */
.s-hero{
position:relative;
min-height:100vh;
background:#000;
overflow:hidden;
}
.s-hero-bg{
position:absolute;
inset:0;
z-index:0;
}
.s-hero-bg::after{
content:'';
position:absolute;inset:0;
background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.0) 30%, rgba(0,0,0,.0) 60%, rgba(0,0,0,.4) 100%);
z-index:1;
}
.s-hero-bg img,
.s-hero-bg video{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.s-hero-stamp{
position:absolute;
left:32px;
top:50%;
transform:translateY(-50%) rotate(-7deg);
width:130px;height:130px;
border:4px solid #fff;
border-radius:50%;
display:flex;
align-items:center;justify-content:center;
z-index:5;
background:rgba(0,0,0,.05);
backdrop-filter:blur(2px);
}
.s-hero-stamp span{
font-family:var(--fc);
font-weight:900;
font-size:18px;
color:#fff;
text-align:center;
line-height:.95;
letter-spacing:-0.02em;
padding:0 6px;
}
.s-hero-text{
position:absolute;
top:96px;
right:56px;
z-index:4;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:6px;
}
.s-hero-text .sx-headline{
font-size:clamp(40px, 5.3vw, 75.85px);
}
.s-hero-bottom{
position:absolute;
bottom:calc(var(--form-h) + 36px);
right:56px;
z-index:4;
display:inline-block;
background:var(--c-yellow);
color:var(--c-black);
font-family:var(--fc);
font-weight:900;
font-size:clamp(28px, 4.5vw, 67px);
line-height:1;
letter-spacing:-0.025em;
padding:14px 22px 18px;
white-space:nowrap;
box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.s-hero-bottom bdi{font-family:var(--fc);direction:ltr;unicode-bidi:isolate;}
.s-hero-bottom .small{font-size:.6em;vertical-align:middle;margin:0 .15em;}
/* ─── PLOTS / RUNNING GIRLS SECTION ─── */
/* ============================================
PLOTS SECTION — Figma 1:1 absolute canvas
Desktop frame: 1440 × 798 (exact Figma coords)
Below 1440 viewport: scale entire canvas proportionally
============================================ */
.s-plots{
position:relative;
width:100%;
height:798px;
background:#F4F1E5;
overflow:hidden;
scroll-margin-top:-15px;
opacity:0;
transition:opacity .6s ease-out;
}
.s-plots.in-view{opacity:1;}
.s-plots-canvas{
position:relative;
width:1440px;
height:798px;
margin:0 auto;
transform-origin:top left;
}
@media (max-width:1440px){
.s-plots{
height:calc(100vw * 798 / 1440);
}
.s-plots-canvas{
transform:scale(calc(100vw / 1440));
margin:0;
}
}
/* Background image — fills entire section, full viewport width */
.s-plots-bg-img{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
object-fit:cover;
display:block;
z-index:0;
}
/* Headline = text with black background, auto-sizes to text width */
.s-plots-h-text{
position:absolute;
font-family:'FbMatadorNarrow','Heebo',sans-serif;
font-weight:700;
font-size:75.85px;
line-height:1;
color:#FFC40C;
background:#000;
display:flex;
align-items:center;
justify-content:center;
padding:0;
margin:0;
z-index:2;
white-space:nowrap;
overflow:visible;
}
/* Body paragraph (Figma 2:388: 649,205 / 721x116) - Assistant 22px, mixed weights */
.s-plots-body-text{
position:absolute;
left:649px;
top:205px;
width:721px;
font-family:'Assistant',sans-serif;
font-size:22px;
line-height:1.2;
color:#000;
font-weight:400;
letter-spacing:-0.03em;
text-align:right;
margin:0;
z-index:2;
}
/* Yellow stat boxes — text centered horizontally and stacked vertically */
.s-plots-stat{
position:absolute;
height:124px;
background:#FFC40C;
border:8px solid #000;
border-radius:6px;
font-family:'FbMatadorNarrow','Heebo',sans-serif;
font-weight:700;
color:#000;
z-index:2;
box-sizing:border-box;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:4px 8px;
text-align:center;
gap:0;
}
.s-plots-stat .num{
font-size:85px;
line-height:1;
font-weight:700;
white-space:nowrap;
margin:0 0 -4px;
}
.s-plots-stat--text .num{font-size:48px;line-height:1.05;white-space:normal;font-weight:900;}
.s-plots-stat .num .currency{
font-size:30px;
display:inline-block;
vertical-align:bottom;
margin-bottom:6px;
}
.s-plots-stat .lbl{
font-size:27px;
line-height:1;
font-weight:700;
white-space:nowrap;
margin:0;
}
/* ─── PLOTS animations ─── */
.s-plots-h-text{
opacity:0;
transform:translateX(120px);
transition:opacity .9s cubic-bezier(0.16,1,0.3,1) .3s, transform .9s cubic-bezier(0.16,1,0.3,1) .3s;
}
.s-plots-h-text:nth-of-type(2){transition-delay:.45s;}
.s-plots.in-view .s-plots-h-text{opacity:1;transform:translateX(0);}
.s-plots-body-text{
opacity:0;
transition:opacity 1s ease-out .75s;
}
.s-plots.in-view .s-plots-body-text{opacity:1;}
.s-plots-stat{
opacity:0;
transform:translateY(40px);
transition:opacity .8s cubic-bezier(0.16,1,0.3,1), transform .8s cubic-bezier(0.16,1,0.3,1), box-shadow .35s ease-out;
cursor:default;
}
.s-plots.in-view .s-plots-stat{opacity:1;transform:translateY(0);}
.s-plots.in-view .s-plots-stat:nth-of-type(1){transition-delay:.95s, .95s, 0s;}
.s-plots.in-view .s-plots-stat:nth-of-type(2){transition-delay:1.10s, 1.10s, 0s;}
.s-plots.in-view .s-plots-stat:nth-of-type(3){transition-delay:1.25s, 1.25s, 0s;}
.s-plots.in-view .s-plots-stat:hover{
transform:translateY(0) scale(1.06);
box-shadow:0 14px 32px rgba(0,0,0,.18);
transition:transform .35s cubic-bezier(0.16,1,0.3,1), box-shadow .35s ease-out;
}
@media (prefers-reduced-motion:reduce){
.s-plots-h-text,.s-plots-body-text{opacity:1!important;transform:none!important;transition:none!important;}
.s-plots-stat{opacity:1!important;transform:none!important;transition:none!important;}
.s-plots-stat:hover{transform:none!important;}
}
/* ─── MAP / TENDER SECTION ─── */
.s-mapsec{
position:relative;
width:100%;
height:846px;
background:#F4F1E5;
overflow:hidden;
opacity:0;
transition:opacity .6s ease-out;
}
.s-mapsec.in-view{opacity:1;}
.s-mapsec-canvas{
position:relative;
width:1440px;
height:846px;
margin:0 auto;
transform-origin:top left;
}
@media (max-width:1440px){
.s-mapsec{height:calc(100vw * 846 / 1440);}
.s-mapsec-canvas{transform:scale(calc(100vw / 1440));margin:0;}
}
.s-mapsec-image{
position:absolute;
left:190px;
top:0;
width:481px;
height:677px;
z-index:1;
opacity:0;
transition:opacity 1.1s ease-out .55s, transform .35s ease-out;
cursor:zoom-in;
}
.s-mapsec.in-view .s-mapsec-image{opacity:1;}
.s-mapsec.in-view .s-mapsec-image:hover{transform:scale(1.015);}
/* ─── MAP LIGHTBOX ─── */
.map-lightbox{
position:fixed;inset:0;z-index:11000;
background:rgba(0,0,0,.94);
display:flex;align-items:center;justify-content:center;
opacity:0;pointer-events:none;
transition:opacity .35s ease-out;
}
.map-lightbox.open{opacity:1;pointer-events:auto;}
.map-lightbox-close{
position:absolute;top:16px;left:16px;z-index:3;
width:48px;height:48px;
background:rgba(255,255,255,.08);color:#fff;
border:1px solid rgba(255,255,255,.25);
font-family:'Assistant',sans-serif;
font-size:28px;font-weight:300;line-height:1;
cursor:pointer;
transition:background .2s,color .2s,border-color .2s;
}
.map-lightbox-close:hover{background:#FFC40C;color:#000;border-color:#FFC40C;}
.map-lightbox-controls{
position:absolute;bottom:24px;left:50%;
transform:translateX(-50%);
display:flex;gap:6px;z-index:3;
}
.map-lightbox-btn{
background:rgba(255,255,255,.08);color:#fff;
border:1px solid rgba(255,255,255,.25);
padding:10px 16px;font-size:18px;font-weight:700;
font-family:'Assistant',sans-serif;
cursor:pointer;
transition:background .2s,color .2s,border-color .2s;
min-width:54px;line-height:1;
}
.map-lightbox-btn:hover{background:#FFC40C;color:#000;border-color:#FFC40C;}
#map-zoom-reset{font-size:14px;letter-spacing:.05em;}
.map-lightbox-stage{
width:100%;height:100%;
overflow:hidden;
display:flex;align-items:center;justify-content:center;
cursor:grab;touch-action:none;
}
.map-lightbox-stage.dragging{cursor:grabbing;}
.map-lightbox-stage img{
max-width:92vw;max-height:88vh;
object-fit:contain;
transform-origin:center center;
transition:transform .25s ease-out;
user-select:none;
-webkit-user-drag:none;
pointer-events:none;
}
.map-lightbox-stage.zooming img{transition:none;}
@media (max-width:600px){
.map-lightbox-controls{bottom:14px;}
.map-lightbox-close{top:10px;left:10px;width:42px;height:42px;font-size:24px;}
.map-lightbox-btn{padding:8px 12px;font-size:16px;min-width:46px;}
}
.s-mapsec-image img{
width:481px;
height:677px;
object-fit:cover;
display:block;
border-radius:4px;
box-shadow:0 14px 40px rgba(0,0,0,.08);
}
.s-mapsec-headline{
position:absolute;
background:#000;
color:#FFC40C;
font-family:'FbMatadorNarrow','Heebo',sans-serif;
font-weight:700;
font-size:75.85px;
line-height:1;
display:flex;
align-items:center;
justify-content:center;
padding:0;
margin:0;
z-index:2;
white-space:nowrap;
overflow:visible;
opacity:0;
transform:translateX(100px);
transition:opacity .9s cubic-bezier(0.16,1,0.3,1) .35s, transform .9s cubic-bezier(0.16,1,0.3,1) .35s;
}
.s-mapsec-headline + .s-mapsec-headline{transition-delay:.5s;}
.s-mapsec.in-view .s-mapsec-headline{opacity:1;transform:translateX(0);}
.s-mapsec-btn{
position:absolute;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
background:var(--c-yellow);
color:var(--c-black);
font-family:var(--fb);
font-weight:700;
font-size:21px;
letter-spacing:-0.02em;
border-radius:200px;
text-decoration:none;
transition:transform .25s var(--spring), box-shadow .25s;
box-shadow:-5px 6px 12px rgba(0,0,0,.12);
white-space:nowrap;
flex-direction:row-reverse;
box-sizing:border-box;
z-index:10;pointer-events:auto;
}
.s-mapsec-btn svg{width:20px;height:20px;flex-shrink:0;}
/* Contact info (Group 67 from Figma) */
.s-mapsec-contact{position:absolute;inset:0;z-index:3;}
.s-mapsec-contact-title{
position:absolute;
font-family:'Assistant',sans-serif;
font-size:16px;
letter-spacing:-0.03em;
color:#000;
text-align:right;
line-height:1.32;
display:flex;flex-direction:column;
direction:rtl;
}
.s-mapsec-contact-title strong{font-weight:700;}
.s-mapsec-contact-title span{font-weight:400;}
.s-mapsec-contact-text,.s-mapsec-contact-row{
position:absolute;
font-family:'Assistant',sans-serif;
font-size:16px;
letter-spacing:-0.03em;
color:#000;
font-weight:400;
text-align:right;
white-space:nowrap;
height:21px;line-height:21px;
}
.s-mapsec-contact-row{
text-decoration:none;
cursor:pointer;
transition:color .25s;
}
.s-mapsec-contact-row:hover{color:#FFC40C;text-shadow:0 0 0 #000;}
.s-mapsec-contact-row bdi{direction:ltr;unicode-bidi:isolate;}
.s-mapsec-contact-icon{
position:absolute;
width:28px;height:28px;
background:#000;
border-radius:50%;
display:flex;align-items:center;justify-content:center;
color:#fff;
text-decoration:none;
transition:background .25s,transform .25s var(--spring);
}
.s-mapsec-contact-icon:not(.static):hover{background:var(--c-yellow);color:#000;transform:scale(1.08);}
.s-mapsec-contact-icon svg{width:16px;height:16px;}
.s-mapsec-btn{
opacity:0;
transform:translateX(80px);
}
.s-mapsec.in-view .s-mapsec-btn{
animation:mapBtnEnter .8s cubic-bezier(0.16,1,0.3,1) .75s forwards;
}
.s-mapsec.in-view .s-mapsec-btn:nth-of-type(2){animation-delay:.9s;}
@keyframes mapBtnEnter{
from{opacity:0;transform:translateX(80px);}
to{opacity:1;transform:translateX(0);}
}
.s-mapsec-btn:hover{
transform:translateY(-2px);
box-shadow:-7px 9px 18px rgba(0,0,0,.18);
}
@media (prefers-reduced-motion:reduce){
.s-mapsec,.s-mapsec-image,.s-mapsec-headline,.s-mapsec-btn{opacity:1!important;transform:none!important;transition:none!important;animation:none!important;}
}
/* ─── NEIGHBORHOOD (רמות ים) — lifestyle photos + headlines ─── */
.s-neighborhood{
position:relative;
width:100%;
height:573px;
background:#F4F1E5;
overflow:hidden;
opacity:0;
transition:opacity .6s ease-out;
}
.s-neighborhood.in-view{opacity:1;}
.s-neighborhood-canvas{
position:relative;
width:1440px;
height:573px;
margin:0 auto;
transform-origin:top left;
}
@media (max-width:1440px){
.s-neighborhood{height:calc(100vw * 573 / 1440);}
.s-neighborhood-canvas{transform:scale(calc(100vw / 1440));margin:0;}
}
.s-nb-photo{
position:absolute;
object-fit:cover;
display:block;
border-radius:2px;
z-index:1;
opacity:0;
transition:opacity 1.1s ease-out;
}
.s-neighborhood.in-view .s-nb-photo{opacity:1;}
.s-neighborhood.in-view .s-nb-photo:nth-of-type(1){transition-delay:.30s;}
.s-neighborhood.in-view .s-nb-photo:nth-of-type(2){transition-delay:.55s;}
.s-neighborhood.in-view .s-nb-photo:nth-of-type(3){transition-delay:.42s;}
.s-neighborhood.in-view .s-nb-photo:nth-of-type(4){transition-delay:.68s;}
.s-neighborhood.in-view .s-nb-photo:nth-of-type(5){transition-delay:.49s;}
.s-nb-headline{
position:absolute;
background:#000;
color:#FFC40C;
font-family:'FbMatadorNarrow','Heebo',sans-serif;
font-weight:700;
font-size:75.85px;
line-height:1;
display:flex;
align-items:center;
justify-content:center;
padding:0;
margin:0;
z-index:3;
white-space:nowrap;
overflow:visible;
opacity:0;
transform:translateX(100px);
transition:opacity .9s cubic-bezier(0.16,1,0.3,1) .45s, transform .9s cubic-bezier(0.16,1,0.3,1) .45s;
}
.s-nb-headline + .s-nb-headline{transition-delay:.6s;}
.s-nb-headline + .s-nb-headline + .s-nb-headline{transition-delay:.75s;}
.s-neighborhood.in-view .s-nb-headline{opacity:1;transform:translateX(0);}
.s-nb-body{
position:absolute;
font-family:'Assistant',sans-serif;
font-weight:400;
font-size:22px;
line-height:1.2;
letter-spacing:-0.04em;
color:#000;
text-align:justify;
margin:0;
z-index:2;
direction:rtl;
opacity:0;
transition:opacity 1s ease-out .9s;
}
.s-neighborhood.in-view .s-nb-body{opacity:1;}
@media (prefers-reduced-motion:reduce){
.s-nb-photo,.s-nb-headline,.s-nb-body{opacity:1!important;transform:none!important;transition:none!important;}
.hero,.s-plots,.s-neighborhood{opacity:1!important;transition:none!important;}
}
@keyframes fadeInUp{
from{opacity:0;transform:translateY(18px);}
to{opacity:1;transform:none;}
}
/* ─── PARK SECTION (פארק העסקים) — same pattern ─── */
/* ─── PARK SECTION (פארק העסקים) — absolute canvas 1440×611 ─── */
.s-park{
position:relative;
width:100%;
height:611px;
background:#F4F1E5;
overflow:hidden;
opacity:0;
transition:opacity .6s ease-out;
}
.s-park.in-view{opacity:1;}
.s-park-canvas{
position:relative;
width:1440px;
height:611px;
margin:0 auto;
transform-origin:top left;
}
@media (max-width:1440px){
.s-park{height:calc(100vw * 611 / 1440);}
.s-park-canvas{transform:scale(calc(100vw / 1440));margin:0;}
}
.s-park-photo{
position:absolute;
object-fit:cover;
display:block;
border-radius:2px;
z-index:1;
opacity:0;
transition:opacity 1.1s ease-out;
}
.s-park.in-view .s-park-photo{opacity:1;}
.s-park.in-view .s-park-photo:nth-of-type(1){transition-delay:.32s;}
.s-park.in-view .s-park-photo:nth-of-type(2){transition-delay:.58s;}
.s-park.in-view .s-park-photo:nth-of-type(3){transition-delay:.40s;}
.s-park.in-view .s-park-photo:nth-of-type(4){transition-delay:.65s;}
.s-park.in-view .s-park-photo:nth-of-type(5){transition-delay:.48s;}
.s-park-headline{
position:absolute;
background:#000;
color:#FFC40C;
font-family:'FbMatadorNarrow','Heebo',sans-serif;
font-weight:700;
font-size:75.85px;
line-height:1;
display:flex;
align-items:center;
justify-content:center;
padding:0;margin:0;
z-index:3;
white-space:nowrap;
overflow:visible;
opacity:0;
transform:translateX(100px);
transition:opacity .9s cubic-bezier(0.16,1,0.3,1) .45s, transform .9s cubic-bezier(0.16,1,0.3,1) .45s;
}
.s-park-headline + .s-park-headline{transition-delay:.6s;}
.s-park.in-view .s-park-headline{opacity:1;transform:translateX(0);}
.s-park-body{
position:absolute;
font-family:'Assistant',sans-serif;
font-weight:400;
font-size:22px;
line-height:1.2;
letter-spacing:-0.04em;
color:#000;
text-align:justify;
margin:0;
z-index:2;
direction:rtl;
opacity:0;
transition:opacity 1s ease-out .85s;
}
.s-park.in-view .s-park-body{opacity:1;}
@media (prefers-reduced-motion:reduce){
.s-park,.s-park-photo,.s-park-headline,.s-park-body{opacity:1!important;transform:none!important;transition:none!important;}
}
/* ─── DISTANCES (כל הדרכים מובילות) — absolute canvas 1440×487 ─── */
.s-distances{
position:relative;
width:100%;
height:487px;
background:#F4F1E5;
overflow:hidden;
opacity:0;
transition:opacity .6s ease-out;
}
.s-distances.in-view{opacity:1;}
.s-distances-canvas{
position:relative;
width:1440px;
height:487px;
margin:0 auto;
transform-origin:top left;
}
@media (max-width:1440px){
.s-distances{height:calc(100vw * 487 / 1440);}
.s-distances-canvas{transform:scale(calc(100vw / 1440));margin:0;}
}
.s-dist-headline{
position:absolute;
background:#000;
color:#FFC40C;
font-family:'FbMatadorNarrow','Heebo',sans-serif;
font-weight:700;
font-size:75.85px;
line-height:1;
display:flex;
align-items:center;
justify-content:center;
padding:0;margin:0;
z-index:3;
white-space:nowrap;
overflow:visible;
opacity:0;
transform:translateX(100px);
transition:opacity .9s cubic-bezier(0.16,1,0.3,1) .35s, transform .9s cubic-bezier(0.16,1,0.3,1) .35s;
}
.s-distances.in-view .s-dist-headline{opacity:1;transform:translateX(0);}
@media (prefers-reduced-motion:reduce){
.s-dist-headline{opacity:1!important;transform:none!important;transition:none!important;}
}
.s-dist-line{
position:absolute;
background:#000;
z-index:1;
}
.s-dist-arrow{
position:absolute;
pointer-events:none;
z-index:0;
clip-path:inset(0 100% 0 0);
transition:clip-path 1.8s cubic-bezier(0.4,0,0.2,1) .3s;
}
.s-dist-arrow:nth-of-type(2){
clip-path:inset(0 0 0 100%);
transition-delay:.3s;
}
.s-distances.in-view .s-dist-arrow{clip-path:inset(0);}
@media (prefers-reduced-motion:reduce){
.s-dist-arrow{clip-path:none!important;transition:none!important;}
}
.s-dist-card{
position:absolute;
z-index:2;
}
.s-dist-card .dist-circle{
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width:40.58px;height:40.58px;
background:#fff;
border:4.32px solid var(--c-black);
border-radius:50%;
z-index:2;
transition:background-color .4s ease-out;
}
.s-distances.in-view .s-dist-card .dist-circle{background:var(--c-yellow);}
.s-distances.in-view .s-dist-card:nth-of-type(6) .dist-circle{transition-delay:.55s;}
.s-distances.in-view .s-dist-card:nth-of-type(5) .dist-circle{transition-delay:.75s;}
.s-distances.in-view .s-dist-card:nth-of-type(4) .dist-circle{transition-delay:.95s;}
.s-distances.in-view .s-dist-card:nth-of-type(3) .dist-circle{transition-delay:1.15s;}
.s-distances.in-view .s-dist-card:nth-of-type(2) .dist-circle{transition-delay:1.35s;}
.s-distances.in-view .s-dist-card:nth-of-type(1) .dist-circle{transition-delay:1.55s;}
@media (prefers-reduced-motion:reduce){
.s-dist-card .dist-circle{background:var(--c-yellow)!important;transition:none!important;}
}
.s-dist-card .dist-icon{
position:absolute;
top:74px;
left:50%;
transform:translateX(-50%);
width:106px;height:106px;
object-fit:contain;
z-index:1;
transition:transform .35s cubic-bezier(0.16,1,0.3,1);
cursor:pointer;
}
.s-dist-card .dist-icon:hover{
transform:translateX(-50%) scale(1.18);
}
@media (prefers-reduced-motion:reduce){
.s-dist-card .dist-icon{transition:none!important;}
.s-dist-card .dist-icon:hover{transform:translateX(-50%)!important;}
}
.s-dist-card .dist-tag{
position:absolute;
top:170px;
left:8px;
background:var(--c-yellow);
font-family:var(--fb),sans-serif;
font-weight:700;
font-size:14px;
color:var(--c-black);
padding:5px 12px;
transform:rotate(-15deg);
white-space:nowrap;
z-index:3;
}
.s-dist-card .dist-text{
position:absolute;
top:221px;
left:0;
right:0;
text-align:center;
font-family:var(--fb),sans-serif;
font-size:18px;
line-height:1.2;
color:var(--c-black);
}
.s-dist-card .dist-text strong{
font-weight:700;
display:block;
margin-bottom:4px;
}
/* ─── COMPANIES (היזמים) — absolute canvas 1440×923 ─── */
.s-companies{
position:relative;
width:100%;
height:923px;
background:#F4F1E5;
overflow:hidden;
opacity:0;
transition:opacity .6s ease-out;
}
.s-companies.in-view{opacity:1;}
.s-companies-canvas{
position:relative;
width:1440px;
height:923px;
margin:0 auto;
transform-origin:top left;
}
@media (max-width:1440px){
.s-companies{height:calc(100vw * 923 / 1440);}
.s-companies-canvas{transform:scale(calc(100vw / 1440));margin:0;}
}
.s-comp-banner{
position:absolute;
object-fit:cover;
display:block;
z-index:2;
opacity:0;
transition:opacity 1s ease-out;
}
.s-comp-banner:nth-of-type(1){transition-delay:.3s;}
.s-comp-banner:nth-of-type(2){transition-delay:.5s;}
.s-companies.in-view .s-comp-banner{opacity:1;}
.s-comp-headline{
position:absolute;
background:#000;
color:#FFC40C;
font-family:'FbMatadorNarrow','Heebo',sans-serif;
font-weight:700;
font-size:75.85px;
line-height:1;
display:flex;
align-items:center;
justify-content:center;
padding:0;margin:0;
z-index:3;
white-space:nowrap;
overflow:visible;
opacity:0;
transform:translateX(100px);
transition:opacity .9s cubic-bezier(0.16,1,0.3,1) .45s, transform .9s cubic-bezier(0.16,1,0.3,1) .45s;
}
.s-companies.in-view .s-comp-headline{opacity:1;transform:translateX(0);}
.s-comp-tagline{
position:absolute;
font-family:'FbMatadorNarrow','Heebo',sans-serif;
font-weight:700;
font-size:45.531px;
line-height:1.08;
color:#000;
text-align:right;
margin:0;
z-index:2;
direction:rtl;
opacity:0;
transform:translateX(80px);
transition:opacity .9s cubic-bezier(0.16,1,0.3,1) .65s, transform .9s cubic-bezier(0.16,1,0.3,1) .65s;
}
.s-companies.in-view .s-comp-tagline{opacity:1;transform:translateX(0);}
.s-comp-logo-wrap{
position:absolute;
display:block;
overflow:hidden;
z-index:2;
opacity:0;
transition:opacity .9s ease-out .9s;
}
.s-companies.in-view .s-comp-logo-wrap{opacity:1;}
.s-comp-logo-wrap::after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(110deg, transparent 25%, rgba(255,255,255,.85) 50%, transparent 75%);
transform:translateX(-150%);
pointer-events:none;
mix-blend-mode:overlay;
}
.s-companies.in-view .s-comp-logo-wrap::after{
animation:logoBrush 1.4s cubic-bezier(0.4,0,0.2,1) forwards;
animation-delay:2.0s;
}
.s-companies.in-view .s-comp-logo-wrap:nth-of-type(2)::after{
animation-delay:2.25s;
}
@keyframes logoBrush{
0%{transform:translateX(-150%);}
100%{transform:translateX(150%);}
}
.s-comp-logo-mid{
width:100%;
height:100%;
object-fit:contain;
display:block;
}
.s-comp-divider{
position:absolute;
background:#000;
z-index:1;
}
.s-comp-body{
position:absolute;
font-family:'Assistant',sans-serif;
font-weight:400;
font-size:22px;
line-height:1.227;
letter-spacing:-0.03em;
color:#000;
text-align:justify;
margin:0;
z-index:2;
direction:rtl;
opacity:0;
transition:opacity 1s ease-out 1.1s;
}
.s-companies.in-view .s-comp-body{opacity:1;}
@media (prefers-reduced-motion:reduce){
.s-comp-banner,.s-comp-headline,.s-comp-tagline,.s-comp-logo-wrap,.s-comp-body,.s-companies{opacity:1!important;transform:none!important;transition:none!important;}
.s-comp-logo-wrap::after{animation:none!important;}
}
.s-comp-body strong{
display:block;
font-weight:700;
margin-top:14px;
margin-bottom:2px;
letter-spacing:-0.022em;
}
/* ═══ MOBILE RESPONSIVE — V2 sections ═══ */
@media (max-width:900px){
.sx-section{padding:40px 20px;}
.sx-headline{font-size:clamp(26px, 7vw, 48px);padding:6px 14px 10px;white-space:normal;}
.s-plots{min-height:auto;}
.s-plots-content{padding:32px 20px;min-height:auto;}
.s-plots-content .sx-body{max-width:100%;font-size:16px;margin-top:12px;}
.s-plots-stats{justify-content:center;margin-top:32px;}
.sx-stat{flex:1 1 calc(50% - 4px);min-width:auto;padding:10px 14px 12px;border-width:5px;}
.sx-stat-num{font-size:clamp(28px, 7vw, 42px);}
.sx-stat-label{font-size:13px;}
/* All V2 sections use absolute canvas pattern — auto-scale via transform on .*-canvas */
.s-hero-stamp{width:96px;height:96px;left:12px;border-width:3px;}
.s-hero-stamp span{font-size:13px;}
.s-hero-text{top:80px;right:20px;}
.s-hero-bottom{right:20px;font-size:clamp(20px, 5vw, 32px);padding:10px 16px 14px;}
}
/* ═══ ESSENTIALS CSS VARIABLES — customize per project ═══ */
.essentials-scope{
--acc: #f5c400;
--acc-soft: rgba(245,196,0,.14);
--ess-ease: cubic-bezier(.16,1,.3,1);
}
/* ═══ GLOBAL FOCUS + REDUCED MOTION ═══ */
*:focus-visible{
outline:2px solid #f5c400;
outline-offset:3px;
border-radius:2px;
}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.01ms!important;
animation-iteration-count:1!important;
transition-duration:.01ms!important;
scroll-behavior:auto!important;
}
.blur-reveal{filter:none!important}
}
/* ═══ CINEMATIC BLUR-FOCUS REVEAL (optional, opt-in utility) ═══
Add `.blur-reveal` to any hero element or background layer.
On load, it starts out-of-focus and sharpens over 2.4s.
Auto-activated by essentials JS — no extra code needed. */
.blur-reveal{
filter:blur(14px);
transition:filter 2.4s cubic-bezier(.22,.6,.36,1);
}
.blur-reveal.in-focus{filter:blur(0)}
/* ═══ CONSENT CHECKBOX (drop into your form) ═══ */
.ess-consent{
display:flex;gap:10px;align-items:flex-start;
font-size:.78rem;line-height:1.55;
color:rgba(255,255,255,.7);
cursor:pointer;margin-top:6px;
font-family:'Heebo',sans-serif;font-weight:300;
}
.ess-consent input[type=checkbox]{
appearance:none;-webkit-appearance:none;
width:15px;height:15px;flex-shrink:0;margin-top:3px;
border:1px solid rgba(255,255,255,.4);
background:transparent;cursor:pointer;
position:relative;
transition:border-color .25s,background .25s;
}
.ess-consent input[type=checkbox]:checked{
border-color:#f5c400;
background:#f5c400;
}
.ess-consent input[type=checkbox]:checked::after{
content:'';position:absolute;
left:4px;top:1px;width:4px;height:9px;
border:solid #fff;border-width:0 1.5px 1.5px 0;
transform:rotate(45deg);
}
.ess-consent a{color:#f5c400;text-decoration:underline;text-underline-offset:3px}
/* ═══ ACCESSIBILITY BUTTON (bottom-left) ═══ */
#a11y-btn{
position:fixed;bottom:calc(var(--form-h, 92px) + 18px);left:20px;z-index:9999;
width:48px;height:48px;border-radius:50%;
background:rgba(10,20,32,.95);
border:1.5px solid #f5c400;
cursor:pointer;
display:flex;align-items:center;justify-content:center;
box-shadow:0 10px 28px rgba(0,0,0,.5);
transition:transform .35s var(--ess-ease),background .3s;
animation:a11y-pulse 3.5s ease-in-out infinite;
}
#a11y-btn:hover{transform:scale(1.07);background:#f5c400}
#a11y-btn svg{width:24px;height:24px;fill:#f5c400;transition:fill .3s}
#a11y-btn:hover svg{fill:#0a1420}
@keyframes a11y-pulse{
0%,100%{box-shadow:0 10px 28px rgba(0,0,0,.5),0 0 0 0 rgba(245,196,0,.14)}
50%{box-shadow:0 10px 28px rgba(0,0,0,.5),0 0 0 14px transparent}
}
/* ═══ A11Y PANEL ═══ */
#a11y-panel{
position:fixed;bottom:calc(var(--form-h, 92px) + 78px);left:20px;z-index:9998;
width:min(360px,calc(100vw - 48px));
max-height:calc(100vh - 140px);
background:linear-gradient(180deg,rgba(10,20,32,.98) 0%,rgba(5,15,25,.98) 100%);
backdrop-filter:blur(24px);
border:1px solid rgba(245,196,0,.14);
box-shadow:0 24px 80px rgba(0,0,0,.7);
overflow:hidden;
opacity:0;pointer-events:none;
transform:translateY(18px) scale(.97);
transform-origin:bottom left;
transition:opacity .4s var(--ess-ease),transform .45s var(--ess-ease);
}
#a11y-panel.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.a11y-head{
padding:20px 22px 16px;
border-bottom:1px solid rgba(255,255,255,.08);
display:flex;align-items:center;justify-content:space-between;
}
.a11y-title{
font-family:'Assistant',sans-serif;font-weight:500;
font-size:.98rem;color:#fff;
}
.a11y-title-sub{
display:block;
font-family:'Assistant',sans-serif;font-weight:500;
font-size:.66rem;color:#f5c400;letter-spacing:.2em;
text-transform:uppercase;margin-top:3px;direction:ltr;
}
.a11y-close{
width:30px;height:30px;border-radius:50%;
border:1px solid rgba(255,255,255,.12);
background:transparent;cursor:pointer;
color:rgba(255,255,255,.55);
display:flex;align-items:center;justify-content:center;
transition:color .25s,border-color .25s,background .25s;
font-family:inherit;
}
.a11y-close:hover{color:#f5c400;border-color:#f5c400;background:rgba(245,196,0,.14)}
.a11y-close svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.8;fill:none}
.a11y-body{
padding:16px 18px;overflow-y:auto;max-height:calc(100vh - 280px);
scrollbar-width:thin;scrollbar-color:rgba(245,196,0,.14) transparent;
}
.a11y-body::-webkit-scrollbar{width:4px}
.a11y-body::-webkit-scrollbar-thumb{background:rgba(245,196,0,.14)}
.a11y-section{margin-bottom:16px}
.a11y-section-title{
font-family:'Assistant',sans-serif;font-weight:500;
font-size:.66rem;letter-spacing:.22em;color:#f5c400;
text-transform:uppercase;margin-bottom:8px;padding:0 4px;direction:ltr;text-align:left;
}
.a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a11y-grid.full{grid-template-columns:1fr}
.a11y-opt{
display:flex;align-items:center;gap:10px;padding:10px 13px;
background:rgba(255,255,255,.02);
border:1px solid rgba(255,255,255,.06);
cursor:pointer;
font-family:'Assistant',sans-serif;font-size:.82rem;font-weight:400;
color:rgba(255,255,255,.75);
transition:background .25s,border-color .25s,color .25s;
text-align:right;
}
.a11y-opt:hover{background:rgba(245,196,0,.14);border-color:#f5c400;color:#fff}
.a11y-opt.active{background:rgba(245,196,0,.14);border-color:#f5c400;color:#f5c400}
.a11y-opt svg{width:15px;height:15px;flex-shrink:0;stroke:currentColor;stroke-width:1.4;fill:none}
.a11y-opt-label{flex:1}
.a11y-foot{
padding:14px 18px;border-top:1px solid rgba(255,255,255,.08);
display:flex;gap:10px;align-items:center;justify-content:space-between;
}
.a11y-reset{
flex:1;padding:10px;
background:transparent;
border:1px solid rgba(255,255,255,.12);
color:rgba(255,255,255,.65);
font-family:'Assistant',sans-serif;font-size:.78rem;font-weight:500;letter-spacing:.05em;
cursor:pointer;
transition:color .25s,border-color .25s;
}
.a11y-reset:hover{color:#f5c400;border-color:#f5c400}
.a11y-statement{
font-family:'Assistant',sans-serif;font-weight:500;
font-size:.74rem;color:rgba(255,255,255,.55);
text-decoration:none;transition:color .25s;direction:ltr;letter-spacing:.05em;
}
.a11y-statement:hover{color:#f5c400}
/* ═══ A11Y STATE CLASSES ═══ */
@media (max-width:600px){
#a11y-btn{bottom:calc(var(--mobile-bar-h, 78px) + 14px);width:44px;height:44px;}
#a11y-btn svg{width:22px;height:22px;}
#a11y-panel{bottom:calc(var(--mobile-bar-h, 78px) + 70px);}
/* hide a11y button while the mobile lead form is expanded so it doesn't overlap inputs */
body:has(.bf-mobile-toggle.open) #a11y-btn,
body:has(.bf-mobile-toggle.open) #a11y-panel{
opacity:0;pointer-events:none;transform:translateY(20px);
transition:opacity .3s ease,transform .3s ease;
}
}
html.a11y-contrast{filter:contrast(1.5) saturate(1.3) brightness(1.08)}
html.a11y-invert{filter:invert(1) hue-rotate(180deg)}
html.a11y-invert img,html.a11y-invert video,html.a11y-invert canvas,html.a11y-invert svg{filter:invert(1) hue-rotate(180deg)}
html.a11y-gray{filter:grayscale(1) contrast(1.1)}
html.a11y-big-text{zoom:1.18}
html.a11y-bigger-text{zoom:1.38}
body.a11y-spacing *,body.a11y-spacing *::before,body.a11y-spacing *::after{
letter-spacing:.08em!important;word-spacing:.15em!important;line-height:1.9!important;
}
body.a11y-links a{
text-decoration:underline!important;text-underline-offset:4px;
text-decoration-thickness:2px;text-decoration-color:#f5c400!important;
background:rgba(245,196,0,.14)!important;padding:2px 4px!important;
}
body.a11y-no-anim *,body.a11y-no-anim *::before,body.a11y-no-anim *::after{
animation:none!important;animation-duration:0s!important;
transition-duration:0s!important;
}
body.a11y-readable *{
font-family:Arial,sans-serif!important;font-style:normal!important;letter-spacing:normal!important;
}
body.a11y-readable h1,body.a11y-readable h2,body.a11y-readable h3{font-weight:700!important}
/* ═══ SHARED DIALOG ═══ */
.ess-dialog{
position:fixed;inset:0;z-index:10000;
background:rgba(10,12,8,.78);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
display:flex;align-items:center;justify-content:center;padding:24px;
opacity:0;pointer-events:none;transition:opacity .4s var(--ess-ease);
}
.ess-dialog.open{opacity:1;pointer-events:auto}
.ess-dialog-content{
background:#FFFDF7;color:#0a0a0a;
padding:56px 52px 44px;max-width:760px;width:100%;
max-height:85vh;overflow-y:auto;position:relative;
transform:translateY(16px) scale(.98);
transition:transform .5s var(--ess-ease);
border-top:6px solid #FFC40C;
box-shadow:0 24px 80px rgba(0,0,0,.32);
}
.ess-dialog.open .ess-dialog-content{transform:translateY(0) scale(1)}
.ess-dialog-content h2{
font-family:'Assistant',sans-serif;font-weight:700;
font-size:2.2rem;color:#0a0a0a;letter-spacing:-.02em;margin-bottom:6px;line-height:1.15;
}
.ess-dialog-eyebrow{
display:inline-block;
font-family:'Assistant',sans-serif;font-weight:700;
font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
color:#0a0a0a;margin-bottom:18px;
background:#FFC40C;padding:4px 10px 5px;
}
.ess-dialog-mark{width:48px;height:2px;background:#0a0a0a;margin:24px 0 22px}
.ess-dialog-content h3{
font-family:'Assistant',sans-serif;font-weight:700;
font-size:1.05rem;color:#0a0a0a;letter-spacing:0;
margin-top:24px;margin-bottom:8px;
}
.ess-dialog-content p,.ess-dialog-content li{
font-family:'Assistant',sans-serif;font-weight:400;
font-size:1.02rem;color:#1a1a1a;
line-height:1.7;margin-bottom:8px;
}
.ess-dialog-content ul{padding-right:22px;margin-bottom:12px}
.ess-dialog-content strong{font-weight:700;color:#0a0a0a}
.ess-dialog-content a{color:#0a0a0a;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;font-weight:600;}
.ess-dialog-content a:hover{background:#FFC40C;text-decoration:none;}
.ess-dialog-close{
position:absolute;top:18px;left:18px;
padding:9px 14px;border-radius:0;
font-family:'Assistant',sans-serif;font-weight:700;
font-size:.74rem;letter-spacing:.18em;
color:#0a0a0a;
border:2px solid #0a0a0a;
background:transparent;cursor:pointer;
transition:background .25s,color .25s;direction:ltr;
}
.ess-dialog-close:hover{background:#0a0a0a;color:#FFC40C;}
.ess-qual-label{
display:block;margin-bottom:6px;
font-family:'Heebo',sans-serif;font-weight:300;
font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;
color:rgba(255,255,255,.72);
}