/* ═══════════════ alfa — fonts ═══════════════ */
@font-face{font-family:'Almoni';src:url('assets/web/fonts/AlmoniNeueDL40AAA-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Almoni';src:url('assets/web/fonts/AlmoniNeueDL40AAA-Medium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'Almoni';src:url('assets/web/fonts/AlmoniNeueDL40AAA-D-Bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:'AlmoniTzar';src:url('assets/web/fonts/AlmoniTzarAAA-Light.otf') format('opentype');font-weight:300;font-display:swap}
@font-face{font-family:'Galyon';src:url('assets/web/fonts/Galyon-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'HelvPDF';src:url('assets/web/fonts/Helvetica-Bold.ttf') format('truetype');font-weight:700;font-display:swap}  /* exact Latin display face used in the PDF */
@font-face{font-family:'HelvPDF';src:url('assets/web/fonts/Helvetica.ttf') format('truetype');font-weight:400;font-display:swap}      /* regular weight — "life style", small Latin */

/* ═══════════════ design tokens (two-tone — color comes only from photos) ═══════════════ */
:root{
  --ink:#0a0a0a;          /* warm near-black ground */
  --ink2:#141414;         /* elevated dark tier */
  --paper:#ffffff;        /* white ink + inverted sections */
  --paper2:#f4f1ec;       /* warm off-white panels */
  --muted:#c9c9c9;        /* secondary text on dark */
  --muted-d:#6b6b6b;      /* secondary text on light */
  --line:#2a2a2a;         /* hairline on dark */
  --line-l:#d8d8d8;       /* hairline on light */
  --hdr-h:clamp(64px,7vw,116px);
  --pad:clamp(1.4rem,5vw,5.5rem);   /* section side padding */
  --e:cubic-bezier(.16,1,.3,1);
  /* display wordmark font (PDF: Helvetica Bold) */
  --display:'HelvPDF','Helvetica Neue',Archivo,Helvetica,Arial,sans-serif;
  --he:'Almoni','Heebo','Assistant',sans-serif;
  --he-narrow:'AlmoniTzar','Assistant',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--he);background:var(--ink);color:var(--paper);line-height:1.55;overflow-x:hidden;font-weight:400;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
bdi,.ltr{unicode-bidi:isolate;direction:ltr}

/* ═══════════════ reusable systems (the "contract" for every section) ═══════════════ */
/* every full screen → .sec ; dark by default, .sec--paper inverts to white */
.sec{position:relative;width:100%;min-height:100svh;padding:calc(var(--hdr-h) + 3vh) var(--pad) 5vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
/* section-by-section scroll — each .sec snaps to fill the screen (every section is exactly 100svh). Desktop only; on mobile sections stack & scroll freely. */
@media(min-width:769px){
  html{scroll-snap-type:y mandatory}
  .sec{scroll-snap-align:start}
}
.sec--paper{background:var(--paper);color:var(--ink)}
.sec--flush{padding:0;min-height:100svh}                 /* full-bleed photo sections */
/* giant Latin display wordmark (URBAN / DESIGN / 1000 / MΛP / life style zone) */
.wm{font-family:var(--display);font-weight:700;line-height:.82;letter-spacing:-.02em;text-transform:uppercase;color:var(--paper)}
.wm--outline{color:transparent;-webkit-text-stroke:2px var(--paper);text-stroke:2px var(--paper)}
.script{font-family:'Galyon',serif;font-weight:400;text-transform:none;letter-spacing:0}
/* scattered photo tile (inspiration-board collage) */
.tile{position:absolute;overflow:hidden;background:var(--ink2)}
.tile img{width:100%;height:100%;object-fit:cover}
.bw{filter:grayscale(1)}
/* full-bleed helper */
.bleed{width:100vw;margin-inline:calc(50% - 50vw)}
/* small Hebrew section kicker */
.kicker{font-family:var(--he);font-weight:500;font-size:clamp(.95rem,1.3vw,1.15rem);letter-spacing:.02em}

/* ═══════════════ reveal (single IO; transform+opacity only) ═══════════════ */
.js [data-rv]{opacity:0;transform:translateY(40px);transition:opacity .9s var(--e),transform 1s var(--e)}
.js [data-rv].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js [data-rv]{opacity:1!important;transform:none!important;transition:none}}

/* ═══════════════ S1 — header / nav ═══════════════ */
.hdr{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--hdr-h);display:flex;align-items:center;justify-content:space-between;direction:ltr;  /* physical: logo+phone LEFT, nav RIGHT (PDF); text re-set rtl below */
  padding:0 var(--pad);background:var(--paper);border-bottom:1px solid var(--ink);transition:background .3s ease,color .3s ease,border-color .3s ease}
.hdr__l{display:flex;align-items:center;gap:clamp(.55rem,1.1vw,1.4rem)}
.hdr__logo{display:flex;align-items:center;color:var(--ink)}
.hdr__logo img{height:clamp(36px,3.1vw,68px);width:auto;display:block}
.hdr.on-dark .hdr__logo img{filter:invert(1)}   /* PDF logo is black → white over dark sections */
.hdr__logo .a{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,2.5vw,2.5rem);line-height:.8;letter-spacing:-.03em}
.hdr__logo .badge{font-family:var(--he-narrow);font-weight:300;font-size:clamp(.5rem,.62vw,.66rem);line-height:1.05;text-align:center;margin-bottom:.2em}
.hdr__logo .city{font-family:var(--he);font-weight:500;font-size:clamp(.62rem,.78vw,.84rem);letter-spacing:.04em;align-self:flex-end;margin-bottom:.15em}
.hdr__div{width:1px;height:clamp(26px,3vw,42px);background:var(--ink);opacity:.4}
.hdr__devlogos{display:flex;align-items:center;gap:clamp(.4rem,.8vw,.95rem)}   /* עמרם אברהם + שי חי logos in the top bar, next to the phone */
.hdr__devlogos img{height:clamp(17px,1.65vw,32px);width:auto;display:block}   /* both dev logos share ONE height rule (equal size — ego parity between the two clients) */
.hdr__devlogos img[src*="shihai"]{height:clamp(20px,1.95vw,38px)}   /* שי חי gets a touch more height (~19%) — it's the narrower lockup so equal height reads as smaller; this balances it and gives שי חי the slight edge Omri asked for */
.hdr__phone{display:flex;align-items:center;gap:.4rem;font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,1.95vw,2.4rem);color:var(--ink)}   /* enlarged *3384 (scales down with viewport so it never collides with the nav) */
.hdr__phone svg{width:.85em;height:.85em;fill:var(--ink)}
.hdr__nav{display:flex;align-items:center;gap:clamp(.42rem,.82vw,1.15rem);direction:rtl;font-family:var(--he);font-weight:500;font-size:clamp(.92rem,1.05vw,1.3rem);color:var(--ink)}   /* Omri: nav titles — scale down with viewport to avoid colliding with the שי חי logo */
.hdr__nav a{position:relative;padding:.2em 0;white-space:nowrap;opacity:.78;transition:opacity .2s ease}
.hdr__nav a:hover,.hdr__nav a.active{opacity:1}
.hdr__nav a.active::after{content:"";position:absolute;inset:auto 0 -.2em 0;height:2px;background:var(--ink)}
.hdr__burger{display:none}
/* header over a dark section → invert to dark/white */
.hdr.on-dark{background:transparent;border-color:transparent;color:var(--paper)}
.hdr.on-dark .hdr__logo,.hdr.on-dark .hdr__phone,.hdr.on-dark .hdr__nav{color:var(--paper)}
.hdr.on-dark .hdr__phone svg{fill:var(--paper)}
.hdr.on-dark .hdr__div{background:var(--paper)}
.hdr.on-dark .hdr__nav a.active::after{background:var(--paper)}

@media(max-width:960px){
  /* ── header collapses to the burger below 960px (where the 10-link nav can no longer clear the שי חי logo); content sections keep their own 768px breakpoint ── */
  /* ── mobile menu: the nav becomes a full-screen dark overlay toggled by the burger ── */
  .hdr__nav{position:fixed;inset:0;z-index:90;
    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:clamp(14px,3.6vh,26px);
    padding:calc(var(--hdr-h) + 4vh) clamp(28px,8vw,44px) 8vh;
    direction:rtl;background:rgba(10,10,9,.985);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .42s var(--e),transform .42s var(--e),visibility .42s}
  .hdr__nav a{font-family:var(--he);font-weight:500;font-size:clamp(1.55rem,7vw,2.1rem);line-height:1.1;letter-spacing:-.01em;color:#fff;opacity:.8;padding:.08em 0}
  .hdr__nav a.active{opacity:1}
  .hdr__nav a::after{display:none}
  html.menu-open .hdr__nav{opacity:1;visibility:visible;transform:none}
  html.menu-open{overflow:hidden}
  /* header turns white-on-dark while the menu is open */
  .hdr__l{position:relative;z-index:110}
  .hdr__devlogos{display:none}   /* desktop-only addition — keep mobile header compact */
  .hdr__phone{font-size:1.1rem}   /* restore original mobile phone size (desktop got enlarged) */
  /* the desktop reorder (logo·phone·│·logos) must not change mobile — restore original logo·│·phone */
  .hdr__l>.hdr__logo{order:0}.hdr__l>.hdr__div{order:1}.hdr__l>.hdr__phone{order:2}.hdr__l>.hdr__devlogos{order:3}
  html.menu-open .hdr{background:transparent}
  html.menu-open .hdr__logo img{filter:invert(1)}
  html.menu-open .hdr__phone,html.menu-open .hdr__phone *{color:#fff;fill:#fff}
  html.menu-open .hdr__div{background:rgba(255,255,255,.4)}
  .hdr__burger{display:flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;position:relative;z-index:120}
  .hdr__burger span{width:26px;height:2px;background:var(--ink);transition:transform .3s var(--e),opacity .3s var(--e),background .3s}
  .hdr.on-dark .hdr__burger span{background:var(--paper)}
  html.menu-open .hdr__burger span{background:#fff}
  html.menu-open .hdr__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  html.menu-open .hdr__burger span:nth-child(2){opacity:0}
  html.menu-open .hdr__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hdr__l{gap:.7rem}
}

/* === urban (מתחם האלף) === */
/* 16:9 stage — matches the PDF slide; every element placed by exact % from the PDF's own clip-rectangles */
#alef.sec{padding:var(--hdr-h) 0 0;min-height:100svh;display:flex;align-items:center;justify-content:center;background:var(--ink)}  /* slide centered vertically + horizontally below the nav */
/* stage fits the space below the nav (letterboxed), and is a container so every child scales to the stage, not the viewport */
.s-urban{position:relative;width:min(100vw, calc((100svh - var(--hdr-h)) * 16 / 9));aspect-ratio:16/9;background:var(--ink);overflow:hidden;isolation:isolate;container-type:size}
.s-urban__copy{position:absolute;inset:0;z-index:9;direction:rtl}
/* headline top-right (PDF y8.7%), paragraph far below (PDF y38.3%) — exact text positions */
.s-urban__title{position:absolute;top:7.6%;right:9%;width:38%;text-align:right;font-family:var(--he);font-weight:500;color:var(--paper);font-size:1.95cqw;line-height:1.10;transform:scale(1.2);transform-origin:top right}  /* PDF size 1.95cqw, scaled +20%; leading 1.32 pre-divided by 1.2 → effective line spacing = PDF, glyphs +20% */
.s-urban__title bdi{font-family:var(--display);font-weight:700}
.s-urban__rule{position:absolute;top:20.5%;right:9%;width:30%;height:1px;background:#fff}
.s-urban__rule2{position:absolute;top:49.17%;right:4.5%;width:25%;height:1px;background:#fff}  /* on the flowers-photo top edge; indented right to match PDF (right edge 95.5%) */
/* ── entrance: staggered, via @keyframes (plays reliably on scroll-in, unlike transitions which can skip the first paint). Scaled title/body RISE via an inner .u-ent wrapper so the +20% transform:scale is untouched; rules DRAW via scaleX (RTL) ── */
@keyframes uEntRise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:translateY(0)}}
@keyframes uRuleDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* ── hero choreography (Omri): 1)images slide in-from-edge  2)headline writes itself  3)english writes  4)paragraph R→L  5)lines draw (last) ── */
@keyframes uWriteRtl{from{clip-path:inset(0 0 0 100%);opacity:.35}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes uWriteLtr{from{clip-path:inset(0 100% 0 0);opacity:.35}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes uSlideRtl{from{opacity:0;transform:translateX(64px)}to{opacity:1;transform:none}}
@keyframes uTileL{from{opacity:0;transform:translateX(-90px) scale(.92)}to{opacity:1;transform:none}}
@keyframes uTileR{from{opacity:0;transform:translateX(90px) scale(.92)}to{opacity:1;transform:none}}
@keyframes uTileB{from{opacity:0;transform:translateY(90px) scale(.92)}to{opacity:1;transform:none}}
.js #alef .s-urban__copy[data-rv]{opacity:1;transform:none;transition:none}
/* 1 · IMAGES — slide in from the nearest screen edge, staggered (var --d) */
.js #alef .u-tile{opacity:0;transition:none}
.js #alef .u-cafe.in,.js #alef .u-wine.in,.js #alef .u-woman.in{animation:uTileL .8s var(--e) var(--d,0s) both}
.js #alef .u-man.in{animation:uTileB .8s var(--e) var(--d,0s) both}
.js #alef .u-botanic.in{animation:uTileR .85s var(--e) var(--d,0s) both}
/* 2 · HEADLINE — writes itself (soft masked wipe, right→left for Hebrew) */
.js #alef .s-urban__title .u-ent{display:block;opacity:1;clip-path:inset(0 0 0 100%)}
.js #alef .s-urban__copy.in .s-urban__title .u-ent{animation:uWriteRtl 1.15s var(--e) .55s both}
/* 3 · ENGLISH "life style" — writes itself (left→right) */
.js #alef .u-life__t{opacity:1;clip-path:inset(0 100% 0 0)}
.js #alef .u-life.in .u-life__t{animation:uWriteLtr .9s var(--e) .45s both}
/* 4 · PARAGRAPH — enters right→left */
.js #alef .s-urban__body .u-ent{display:block;opacity:0}
.js #alef .s-urban__copy.in .s-urban__body .u-ent{animation:uSlideRtl .9s var(--e) 2.0s both}
/* 5 · LINES — draw themselves (last) */
.js #alef .s-urban__rule,.js #alef .s-urban__rule2{transform:scaleX(0);transform-origin:right center}
.js #alef .u-life__rule{transform:scaleX(0);transform-origin:left center}
.js #alef .s-urban__copy.in .s-urban__rule{animation:uRuleDraw .7s var(--e) 2.65s both}
.js #alef .s-urban__copy.in .s-urban__rule2{animation:uRuleDraw .7s var(--e) 2.85s both}
.js #alef .u-life.in .u-life__rule{animation:uRuleDraw .7s var(--e) .85s both}
@media(prefers-reduced-motion:reduce){.js #alef .u-ent,.js #alef .u-tile,.js #alef .u-life__t{opacity:1!important;animation:none!important;-webkit-mask:none!important;mask:none!important;transform:none!important}.js #alef .s-urban__rule,.js #alef .s-urban__rule2,.js #alef .u-life__rule{transform:scaleX(1);animation:none}}
.s-urban__body{position:absolute;top:37.6%;right:9%;width:40.2%;text-align:justify;font-family:var(--he);font-weight:700;color:var(--paper);font-size:.9345cqw;line-height:1.062;transform:scale(1.2);transform-origin:top right}  /* font .9345cqw = true PDF size (width-ratio measured p2; old 1.0cqw was 7% too big → wrapped early); base lh 1.062 → effective leading 1.19cqw = PDF pitch; scale(1.2) = glyphs +20% */
.u-tiles{display:contents}   /* transparent on desktop → tiles stay direct children for absolute placement; becomes a grid on mobile */
.s-urban .u-tile{position:absolute;overflow:hidden;background:var(--ink2);box-shadow:0 18px 44px -18px rgba(0,0,0,.75)}
.s-urban .u-tile img{width:100%;height:100%;object-fit:cover;display:block}
.s-urban .u-tile.bw img{filter:grayscale(1) contrast(1.04)}
/* exact positions from PDF clip-rectangles (page 1920×1080) */
.u-cafe   {left:9.17%;  top:11.11%; width:28.28%; height:29.72%; z-index:3}
.u-wine   {left:9.17%;  top:42.96%; width:10.10%; height:14.35%; z-index:3}
.u-woman  {left:0%;     top:59.07%; width:16.51%; height:30.19%; z-index:3}
.u-man    {left:17.66%; top:80.19%; width:16.77%; height:19.81%; z-index:3}
.u-botanic{left:50%;    top:49.17%; width:40.99%; height:19.81%; z-index:4}
.u-botanic img{object-position:56% center;filter:brightness(1.16) contrast(1.02)}  /* frame the bright gypsophila behind the α */
/* the brand α logo as a large outline watermark over the cafe photo (from the PDF) */
.u-watermark{position:absolute;left:1.5%;top:23%;width:25%;height:auto;z-index:5;pointer-events:none;overflow:visible}
/* giant URBAN band — spans wide, interlocks the collage */
/* wordmark — each letter absolutely placed at its exact PDF x; α outline fills the B→N gap */
.u-word{position:absolute;inset:0;z-index:6;pointer-events:none}
.u-letters{position:absolute;left:17.67%;top:52.83%;width:65.39%;z-index:6}  /* exact URBN letter vectors extracted from the PDF (true 1:1 shapes + spacing) */
.u-a{position:absolute;left:54%;top:52.3%;width:17%;z-index:6;color:var(--paper);transition:opacity .9s var(--e) .3s,transform 1.1s var(--e) .3s}
.u-a svg{width:100%;height:auto;display:block}
[data-rv].u-a{opacity:0;transform:scale(.5) rotate(-10deg)}
[data-rv].u-a.in{opacity:1;transform:none}
.u-life{position:absolute;inset:0;z-index:8;direction:ltr;pointer-events:none}
.u-life__rule{position:absolute;left:38%;top:84.5%;width:23.5%;height:1px;background:#fff}
.u-life__t{position:absolute;left:62.8%;top:77%;font-family:'HelvPDF','Helvetica Neue',Arial,sans-serif;font-weight:400;font-size:5.1cqw;color:var(--paper);line-height:1}
@media(max-width:768px){
  /* ── #alef mobile: editorial vertical stack — eyebrow(α+lifestyle) → title → rule → body → 2-col tiles ── */
  #alef.sec{min-height:auto;height:auto;padding:0;display:block}
  .s-urban{position:relative;width:100%;aspect-ratio:auto;min-height:auto;height:auto;container-type:normal;overflow:visible;display:flex;flex-direction:column;background:var(--ink);
    padding:calc(var(--hdr-h) + clamp(40px,10vw,60px)) clamp(20px,5.5vw,28px) clamp(52px,13vw,76px)}
  /* copy block — un-absolute, drop the +20% scale; eyebrow→heading tight pair */
  .s-urban__copy{position:static;inset:auto;width:auto;order:2;direction:rtl;margin-top:clamp(38px,9.5vw,56px)}
  .s-urban__title{position:static;inset:auto;width:auto;text-align:right;
    font-family:var(--he);font-weight:600;font-size:clamp(1.6rem,6.8vw,2.3rem);line-height:1.12;letter-spacing:-.015em;transform:none}
  .s-urban__title .u-ent{display:block}
  .s-urban__body{position:static;inset:auto;width:auto;margin-top:clamp(14px,3.5vw,22px);text-align:right;
    font-family:var(--he);font-weight:400;font-size:clamp(1.02rem,4.2vw,1.14rem);line-height:1.62;color:rgba(255,255,255,.72);transform:none}
  .s-urban__rule{position:static;inset:auto;display:block;width:56px;height:1px;background:rgba(255,255,255,.18);margin:clamp(14px,3.5vw,22px) 0 0 auto;transform:none!important}
  .s-urban__rule2{display:none}
  /* the 5 photo tiles → 2-col editorial grid */
  .u-tiles{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,2.4vw,12px);order:3;margin-top:clamp(38px,9.5vw,56px)}
  .u-tiles .u-botanic{grid-column:1/-1;aspect-ratio:16/10}   /* wide flowers tile spans full width → no orphan in the 2-col grid */
  .s-urban .u-tile{position:static;inset:auto;width:auto;height:auto;aspect-ratio:1;border-radius:3px;box-shadow:none}
  .s-urban .u-tile img{width:100%;height:100%;object-fit:cover}
  /* eyebrow row — α brand glyph + "life style" tracked label, centered above the title */
  .u-word{position:static;inset:auto;order:1;pointer-events:none;text-align:center}
  .u-letters,.u-watermark{display:none}   /* hide URBAN svg + ghost watermark */
  .u-a{position:static;inset:auto;display:block;width:clamp(48px,15vw,68px);margin:0 auto;color:var(--paper);transform:none!important;opacity:1!important}
  .u-a svg{width:100%;height:auto;margin:0 auto}
  /* "life style" eyebrow — tracked label with its hairline, sits right under the α */
  .u-life{position:static;inset:auto;order:1;direction:ltr;display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2.6vw,14px);margin-top:clamp(14px,3.5vw,22px);transform:none}
  .u-life__rule{position:static;inset:auto;width:56px;height:1px;background:rgba(255,255,255,.18);transform:none}
  .u-life__t{position:static;inset:auto;font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72);text-align:center}
}

/* === numbers === */
.s-num{display:flex;flex-direction:column;width:100%}

/* ---------- BAND 1 — white hero ---------- */
.s-num__hero{
  position:relative;
  background:var(--paper);
  color:var(--ink);
  padding:clamp(3.2rem,7vw,7rem) var(--pad) clamp(2rem,4vw,3.4rem);
  overflow:hidden;
}
.s-num__kicker{
  position:absolute;
  top:clamp(2.4rem,5vw,4.2rem);
  inset-inline-start:clamp(1.4rem,3vw,3rem);
  display:flex;align-items:center;gap:.8rem;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  transform-origin:center;
}
.s-num__kicker-txt{
  font-family:var(--he-narrow,var(--he));
  font-weight:700;
  font-size:clamp(1.05rem,1.9vw,1.6rem);
  letter-spacing:.06em;
  color:var(--ink);
  white-space:nowrap;
}
.s-num__kicker-line{
  width:1.5px;height:clamp(2.4rem,5vw,4.6rem);
  background:var(--ink);
}

.s-num__thousand{
  width:min(100%,1180px);
  margin-inline:auto;
}
.s-num__svg{display:block;width:100%;height:auto}
.s-num__fill{filter:grayscale(1) contrast(1.04) brightness(.98)}

.s-num__rule{
  display:block;
  height:1px;
  width:100%;
  margin-top:clamp(1.6rem,3.5vw,3rem);
  background:var(--line-l);
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform 1s var(--e,cubic-bezier(.16,1,.3,1)) .15s;
}
.s-num__rule.is-rv,.s-num__rule[data-rv].rv-in{transform:scaleX(1)}

/* ---------- BAND 2 — near-black stats strip ---------- */
.s-num__strip{
  background:var(--ink);
  color:var(--paper);
  padding:clamp(2.6rem,5vw,4.4rem) var(--pad) clamp(2.8rem,5.5vw,4.6rem);
}
.s-num__row{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  direction:rtl;
}
.s-num__col{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:.2rem clamp(.5rem,1.2vw,1.4rem);
  min-width:0;
}
.s-num__col + .s-num__col::before{
  content:"";
  position:absolute;
  inset-inline-end:0;
  top:50%;transform:translateY(-50%);
  width:1px;height:78%;
  background:#888;
  opacity:.45;
}
.s-num__ico{
  display:block;
  width:clamp(28px,2.4vw,40px);
  height:clamp(28px,2.4vw,40px);
  margin-bottom:clamp(.9rem,1.8vw,1.5rem);
}
.s-num__ico svg{width:100%;height:100%;stroke-linecap:round;stroke-linejoin:round}
.s-num__val{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.32em;
  font-family:var(--display,"Archivo",sans-serif);
  font-weight:700;
  font-size:clamp(1.5rem,3vw,2.75rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--paper);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.s-num__unit{
  font-family:var(--he-narrow,var(--he));
  font-weight:400;
  font-size:clamp(.62rem,1vw,.86rem);
  letter-spacing:0;
  color:var(--muted);
}
.s-num__lbl{
  margin-top:clamp(.7rem,1.4vw,1.15rem);
  font-family:var(--he);
  font-weight:400;
  font-size:clamp(.72rem,1.05vw,1rem);
  line-height:1.3;
  color:var(--muted);
}

/* hospital descriptor — no number */
.s-num__col--hospital{justify-content:flex-start}
.s-num__hosp{
  margin:0;
  font-family:var(--he);
  font-weight:400;
  font-size:clamp(.62rem,.92vw,.86rem);
  line-height:1.5;
  color:var(--muted);
}
.s-num__hosp-paren{color:var(--muted-d)}

/* reveal entrance (paired with global IO; safe fallback if data-rv unused) */
[data-rv].s-num__thousand,[data-rv].s-num__kicker,[data-rv].s-num__row{will-change:transform,opacity}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .s-num__row{grid-template-columns:repeat(2,1fr);gap:clamp(2rem,6vw,2.6rem) 0;direction:rtl}
  .s-num__col + .s-num__col::before{display:none}
  .s-num__col{
    padding:1.4rem 1rem 0;
    border-top:1px solid rgba(136,136,136,.32);
  }
  .s-num__col--hospital{
    grid-column:1 / -1;
    border-top:none;
    padding-top:0;
    margin-bottom:.4rem;
  }
  .s-num__hosp{text-align:center}
  .s-num__kicker{
    position:static;
    writing-mode:horizontal-tb;
    transform:none;
    flex-direction:row-reverse;
    justify-content:flex-start;
    margin-bottom:1.4rem;
  }
  .s-num__kicker-line{width:clamp(2rem,8vw,3rem);height:1.5px}
}
@media (max-width:460px){
  .s-num__val{font-size:clamp(1.4rem,7vw,2rem)}
}
/* === project-hero === */
/* ===== S4 · project-intro-hero ===== */
.s-proj{
  position:relative;
  width:100%;
  padding:clamp(2.4rem,5vw,4.2rem) clamp(1.6rem,5vw,4rem) clamp(2.6rem,5vw,4.4rem);
  background:var(--ink);
  box-sizing:border-box;
}

/* --- hero photo frame --- */
.s-proj__frame{
  position:relative;
  margin:0;
  width:100%;
  aspect-ratio:1 / 1;
  max-height:82svh;
  overflow:hidden;
  background:var(--ink2);
}
@media (min-width:760px){
  .s-proj__frame{ aspect-ratio:16 / 13; }
}

.s-proj__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:72% 50%;
  transform:scale(1.06);
  transform-origin:72% 40%;
  will-change:transform;
  transition:transform 1.1s var(--e);
}
[data-rv].is-visible .s-proj__img,
[data-rv].is-visible.s-proj__frame .s-proj__img{ transform:scale(1); }

/* subtle vignette so the lockup reads over the sky */
.s-proj__scrim{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(8,8,8,.42) 0%, rgba(8,8,8,.12) 34%, transparent 60%),
    linear-gradient(180deg, rgba(8,8,8,.20) 0%, transparent 22%);
}

/* --- alfa. lockup over the sky (upper-left in RTL the brand sits left) --- */
.s-proj__lockup{
  position:absolute;
  top:clamp(1.4rem,3.4vw,3rem);
  left:clamp(1.6rem,3.6vw,3.2rem);
  z-index:2;
  text-align:left;
  direction:ltr;
  color:var(--paper);
}
.s-proj__wordmark{
  display:flex;
  align-items:flex-start;
  gap:clamp(.5rem,1vw,.85rem);
}
.s-proj__alfa{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(3.1rem,7vw,6.4rem);
  line-height:.78;
  letter-spacing:-.04em;
  color:var(--paper);
  display:inline-flex;
  align-items:baseline;
}
.s-proj__dot{
  color:var(--paper);
  margin-left:.01em;
}
.s-proj__badge{
  font-family:var(--he-narrow,var(--he));
  font-weight:400;
  font-size:clamp(.62rem,1.1vw,.86rem);
  letter-spacing:.02em;
  line-height:1.1;
  color:var(--paper);
  white-space:nowrap;
  margin-top:.45em;
  opacity:.92;
  direction:rtl;
}
.s-proj__sub{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  margin-top:clamp(.2rem,.7vw,.5rem);
  width:clamp(3.1rem,7vw,6.4rem);
}
.s-proj__city{
  font-family:var(--he);
  font-weight:500;
  font-size:clamp(.72rem,1.25vw,1rem);
  letter-spacing:.06em;
  color:var(--paper);
  direction:rtl;
  white-space:nowrap;
}
.s-proj__rule{
  flex:1;
  height:1px;
  background:rgba(255,255,255,.7);
}

/* --- footer: hairline tick + justified body --- */
.s-proj__foot{
  margin-top:clamp(1.5rem,3vw,2.6rem);
}
.s-proj__lead{
  color:var(--line-l);
  opacity:.55;
  margin-bottom:clamp(.9rem,1.8vw,1.4rem);
  height:8px;
}
.s-proj__lead svg{ display:block; }
.s-proj__body{
  margin:0;
  margin-inline-start:auto;
  max-width:none;
  font-family:var(--he);
  font-weight:400;
  font-size:clamp(.82rem,1.05vw,1.02rem);
  line-height:1.85;
  letter-spacing:.005em;
  color:var(--muted);
  text-align:justify;
  text-justify:inter-character;
}
.s-proj__body bdi{ direction:ltr; unicode-bidi:isolate; }

/* --- reveal staging --- */
[data-rv]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--e), transform .7s var(--e);
}
[data-rv].is-visible{ opacity:1; transform:none; }
.s-proj__foot[data-rv]{ transition-delay:.12s; }
.s-proj__lockup[data-rv]{ transition-delay:.22s; transform:translateY(12px); }

@media (prefers-reduced-motion:reduce){
  .s-proj__img{ transition:none; transform:none; }
  [data-rv]{ opacity:1; transform:none; transition:none; }
}

/* --- responsive: mobile keeps lockup over sky but smaller --- */
@media (max-width:560px){
  .s-proj__frame{ aspect-ratio:4 / 5; }
  .s-proj__img{ object-position:68% 45%; }
  .s-proj__body{ font-size:.86rem; line-height:1.78; }
}
/* aerial: see canonical 16:9 stage rule under "#aerial.sec" below (the framed render there is now a crossfade gallery with side arrows; layout unchanged) */

/* === lifestyle-zone === */
/* ═══════════════ S6 · life_ / style / zone — amenities + collage ═══════════════ */
/* PDF: icon grid LEFT · giant wordmark CENTER-bottom · photo collage RIGHT.
   Grid placement is forced LTR (icons=visual-left) while inner text stays RTL. */
#lz{width:100%;flex:1;display:flex;align-items:stretch}
#lz .lz__grid{
  direction:ltr;
  width:100%;
  display:grid;
  grid-template-columns:minmax(210px,26%) 1fr;
  grid-template-rows:auto 1fr;
  grid-template-areas:
    "icons collage"
    "icons word";
  column-gap:clamp(1rem,2.6vw,2.8rem);
  row-gap:clamp(1rem,2.6vh,2.2rem);
}

/* ── (A) amenity icon grid — visual LEFT column ── */
#lz .lz__amenities{grid-area:icons;direction:rtl;display:flex;align-items:center}
#lz .lz__icons{
  list-style:none;width:100%;
  display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
}
#lz .lz__cell{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;gap:.55rem;
  padding:clamp(.9rem,1.9vh,1.5rem) .4rem;
  border-bottom:1px solid var(--line);
  transition:background .35s var(--e);
}
#lz .lz__cell:nth-child(odd){border-inline-start:1px solid var(--line)}
#lz .lz__ico{
  width:clamp(34px,2.7vw,46px);height:clamp(34px,2.7vw,46px);
  fill:none;stroke:var(--paper);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .4s var(--e),opacity .3s ease;opacity:.92;
}
#lz .lz__lbl{
  font-family:var(--he);font-weight:500;
  font-size:clamp(.66rem,.82vw,.86rem);line-height:1.22;
  color:var(--muted);max-width:15ch;transition:color .3s ease;
}
#lz .lz__cell:hover{background:rgba(255,255,255,.035)}
#lz .lz__cell:hover .lz__ico{transform:translateY(-3px) scale(1.04);opacity:1}
#lz .lz__cell:hover .lz__lbl{color:var(--paper)}

/* ── (B) giant wordmark — center-bottom black panel ── */
#lz .lz__wm{
  grid-area:word;direction:ltr;align-self:end;justify-self:start;
  display:flex;flex-direction:column;line-height:.86;
  padding-bottom:clamp(.2rem,1.4vh,1rem);
  position:relative;z-index:3;pointer-events:none;
}
#lz .lz__wm-line{
  font-family:var(--display);font-weight:800;text-transform:lowercase;
  color:var(--paper);letter-spacing:-.045em;
  font-size:clamp(3.4rem,9.2vw,10rem);
}
#lz .lz__us{opacity:.85;margin-inline-start:.01em}
#lz .lz__wm-zone{position:relative;width:max-content}
#lz .lz__wm-zone::after{
  content:"";position:absolute;left:0;bottom:.06em;
  width:42%;height:clamp(5px,.5vw,9px);background:var(--paper);
}

/* ── (C) collage — visual RIGHT photo column ── */
#lz .lz__collage{
  grid-area:collage;direction:ltr;position:relative;min-height:clamp(320px,46vh,600px);
  overflow:visible;
}
#lz .lz__t{position:absolute;overflow:hidden;background:var(--ink2);will-change:transform}
#lz .lz__t img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--e),filter .6s ease;}
#lz .lz__t:hover img{transform:scale(1.05)}

#lz .lz__t--ferns{left:0;top:0;width:34%;height:58%}
#lz .lz__t--yoga{left:35%;top:0;width:65%;height:40%}
#lz .lz__t--pull{left:19%;top:41%;width:52%;height:59%}
#lz .lz__t--bloom{right:0;bottom:0;width:28%;height:38%}

/* light-grey filler blocks (PDF: empty #d9d9d9 panels for rhythm) */
#lz .lz__fill{position:absolute;background:#d9d9d9}
#lz .lz__fill--a{left:0;top:59%;width:18%;height:18%}
#lz .lz__fill--b{right:0;top:41%;width:31%;height:20%}

/* ghost α watermark bleeding off top-right */
#lz .lz__alpha{
  position:absolute;top:-14%;right:-3%;z-index:2;
  font-family:var(--display);font-weight:700;font-style:italic;
  font-size:clamp(9rem,26vw,30rem);line-height:.7;
  color:#cfcfcf;opacity:.32;pointer-events:none;user-select:none;
}

/* reveal flavor — wordmark lines rise as a group */
.js #lz .lz__wm[data-rv]{opacity:0;transform:translateY(40px)}
.js #lz .lz__wm[data-rv].in{opacity:1;transform:none}

@media(max-width:880px){
  #lz .lz__grid{
    grid-template-columns:1fr;grid-template-rows:auto auto auto;
    grid-template-areas:"collage" "word" "icons";
    row-gap:clamp(1.4rem,4vh,2.4rem);
  }
  #lz .lz__collage{min-height:60vh}
  #lz .lz__wm{align-self:start}
  #lz .lz__icons{grid-template-columns:1fr 1fr}
  #lz .lz__alpha{font-size:38vw;top:-9%}
}
@media(max-width:480px){
  #lz .lz__wm-line{font-size:clamp(3rem,18vw,5rem)}
  #lz .lz__lbl{font-size:.74rem}
}
/* === location-map === */
/* ═══════════════ S7 · location-map (MΛP) — scoped under #location ═══════════════ */
#location{padding:0;min-height:100svh;display:block;overflow:hidden;background:var(--ink)}
#location .s-map{
  position:relative;width:100%;min-height:100svh;
  display:grid;grid-template-columns:1fr clamp(220px,24vw,380px);
  align-items:stretch;
}

/* --- map plate: bleeds top/left/bottom, color is the only light --- */
#location .s-map__plate{
  position:relative;margin:0;overflow:hidden;background:var(--ink);
  /* tiny black inset on the inner (right) edge so the plate kisses the rail, bleeds the other 3 */
}
#location .s-map__plate img{
  width:100%;height:100%;min-height:100svh;object-fit:cover;object-position:right center;
  transform:scale(1.03);transition:transform 1.2s var(--e),opacity 1.1s var(--e)}
#location .s-map__plate.in img{transform:scale(1)}
/* soft seam from map into the black rail so the join reads intentional, not a hard cut */
#location .s-map__plate::after{
  content:"";position:absolute;inset:0 0 0 auto;width:9%;pointer-events:none;
  background:linear-gradient(to left,var(--ink),rgba(10,10,10,0))}

/* --- black right rail --- */
#location .s-map__rail{
  position:relative;background:var(--ink);
  display:flex;flex-direction:column;align-items:flex-end;
  padding:calc(var(--hdr-h) + 4vh) clamp(1rem,2vw,2.2rem) clamp(2rem,5vh,4rem);
  gap:clamp(1.4rem,3vh,3rem);
}
/* hairline across the top of the rail */
#location .s-map__rule{
  width:100%;height:1px;background:var(--paper);opacity:.85;
  transform-origin:right center;transform:scaleX(0);transition:transform .9s var(--e) .1s}
#location .s-map__rule.in{transform:scaleX(1)}

/* --- giant vertical MΛP wordmark (reads bottom-to-top, angular Λ for A) --- */
#location .s-map__wm{
  flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  width:100%;margin:0;overflow:hidden}
#location .s-map__wm .wm{
  display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg);
  font-weight:800;
  font-size:clamp(5.5rem,16vw,17rem);
  line-height:.78;letter-spacing:-.04em;
  color:var(--paper)}
#location .s-map__wm .lam{
  display:inline-block;font-weight:800;
  /* nudge the lambda so the apex aligns with the M/P stems on the vertical axis */
  margin-block:-.02em}
/* reveal: slide up along the rotated axis */
#location .js .s-map__wm{transition:none}
#location .s-map__wm[data-rv]{opacity:0;transform:translateY(48px)}
#location .s-map__wm[data-rv].in{opacity:1;transform:none}

/* --- justified accessibility body, bottom-right --- */
#location .s-map__body{
  width:100%;max-width:34ch;
  font-family:var(--he);font-weight:400;
  font-size:clamp(.82rem,1.05vw,1.02rem);line-height:1.7;
  color:var(--muted);text-align:justify;text-align-last:right}

/* ═══════════════ responsive — stack map over rail, MΛP goes horizontal ═══════════════ */
@media(max-width:880px){
  #location .s-map{grid-template-columns:1fr;grid-template-rows:auto auto}
  #location .s-map__plate{min-height:54svh}
  #location .s-map__plate img{min-height:54svh;object-position:center}
  #location .s-map__plate::after{inset:auto 0 0 0;width:auto;height:14%;
    background:linear-gradient(to bottom,rgba(10,10,10,0),var(--ink))}
  #location .s-map__rail{align-items:center;text-align:center;
    padding:clamp(2rem,6vh,3.5rem) var(--pad) clamp(2.4rem,7vh,4rem);gap:clamp(1.2rem,4vh,2.2rem)}
  #location .s-map__wm{flex:0 0 auto}
  #location .s-map__wm .wm{writing-mode:horizontal-tb;transform:none;
    font-size:clamp(4.5rem,30vw,11rem)}
  #location .s-map__body{max-width:42ch;text-align-last:center;margin-inline:auto}
}

/* === design === */
#design.sec{padding:0;justify-content:flex-start;min-height:100svh;overflow:hidden}
#design .s8{position:relative;width:100%;min-height:100svh;display:block}

#design .s8-bg{position:absolute;inset:0;height:100%;z-index:0}
#design .s8-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;
  transform:scale(1.06);transition:transform 1.4s var(--e)}
#design.in .s8-bg img,#design .in .s8-bg img{transform:scale(1)}
#design .s8-glow{position:absolute;inset:0;
  background:radial-gradient(60% 50% at 78% 38%,rgba(201,163,106,.22),transparent 70%);
  mix-blend-mode:screen;pointer-events:none}
#design .s8-vignette{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,11,11,.72) 0%,rgba(11,11,11,.28) 38%,rgba(11,11,11,0) 60%),
            linear-gradient(0deg,rgba(11,11,11,.55),rgba(11,11,11,0) 45%)}
#design .s8-arc{position:absolute;right:0;bottom:0;width:62vw;height:96%;max-width:820px;pointer-events:none}

#design .s8-marks{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
#design .s8-wm{position:absolute;line-height:.78;letter-spacing:-.04em;white-space:nowrap}
#design .s8-wm--solid{color:var(--paper);font-size:clamp(3.4rem,10.5vw,11rem);top:clamp(2.2rem,9vh,8rem);right:var(--pad);
  text-shadow:0 2px 28px rgba(0,0,0,.45)}
#design .s8-wm--g1{-webkit-text-stroke:1.5px rgba(255,255,255,.46);font-size:clamp(2.6rem,8vw,8.4rem);top:clamp(11rem,26vh,20rem);right:calc(var(--pad) - .4vw)}
#design .s8-wm--g2{-webkit-text-stroke:1.4px rgba(255,255,255,.30);font-size:clamp(2.3rem,7vw,7.2rem);top:clamp(17rem,38vh,29rem);right:calc(var(--pad) + 1.2vw)}
#design .s8-wm--g3{-webkit-text-stroke:1.3px rgba(255,255,255,.20);font-size:clamp(2rem,6.2vw,6.4rem);top:clamp(23rem,50vh,38rem);right:calc(var(--pad) + 2.8vw)}
#design .s8-wm--g4{-webkit-text-stroke:1.2px rgba(255,255,255,.13);font-size:clamp(1.8rem,5.6vw,5.7rem);top:clamp(29rem,62vh,47rem);right:calc(var(--pad) + 4.6vw)}
#design .s8-wm--g5{-webkit-text-stroke:1.1px rgba(255,255,255,.09);font-size:clamp(1.6rem,5vw,5.1rem);top:clamp(35rem,74vh,56rem);right:calc(var(--pad) + 6.6vw)}

#design .s8-panel{position:relative;z-index:2;background:var(--paper2);color:var(--ink);
  width:clamp(300px,56%,720px);margin-top:0;
  padding:clamp(1.8rem,3.4vw,3.4rem) clamp(1.6rem,3vw,3rem) clamp(1.8rem,3.4vw,3.2rem);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.55)}
#design .s8-body{font-family:var(--he);font-weight:400;color:#1d1d1b;
  font-size:clamp(.86rem,1.04vw,1.05rem);line-height:1.78;text-align:justify;letter-spacing:.005em;margin:0}
#design .s8-rule{display:block;height:1px;background:#c7c2b8;width:0;margin:clamp(1.2rem,2.2vw,2rem) 0 clamp(1rem,1.8vw,1.6rem);
  transition:width 1s var(--e) .25s}
#design.in .s8-rule,#design .s8-panel.in .s8-rule{width:100%}
#design .s8-headline{font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:clamp(1.3rem,2.6vw,2.5rem);letter-spacing:-.02em;line-height:1.04;margin:0;text-align:left}
#design .s8-headline-em{font-weight:700}

@media(max-width:760px){
  #design .s8{min-height:auto}
  #design .s8-panel{width:100%;margin-top:clamp(3.5rem,52vw,17rem)}
  #design .s8-wm--solid{font-size:clamp(2.8rem,16vw,5rem);top:1.4rem}
  #design .s8-wm--g1{font-size:clamp(2.3rem,13vw,4rem);top:6.4rem}
  #design .s8-wm--g2{font-size:clamp(2rem,11vw,3.4rem);top:11rem;right:calc(var(--pad) + 2vw)}
  #design .s8-wm--g3,#design .s8-wm--g4,#design .s8-wm--g5{display:none}
  #design .s8-arc{width:90vw;opacity:.7}
  #design .s8-vignette{background:linear-gradient(0deg,rgba(11,11,11,.55),rgba(11,11,11,0) 55%)}
}
/* === tech-spec === */
.s-tech{
  position:relative;
  background:#111110;
  min-height:100svh;
  padding:clamp(64px,8vh,120px) var(--pad) clamp(40px,5vh,72px);
  overflow:clip;
  color:var(--muted);
}
/* ghost α top-left */
.s-tech__wm{
  position:absolute;
  top:clamp(28px,4vh,56px);
  left:var(--pad);
  font-size:clamp(40px,5vw,72px);
  line-height:.8;
  color:var(--paper);
  pointer-events:none;
  z-index:5;
}
/* corner accent: dark vanity + wood, bleeds off top-right edge */
.s-tech__accent--top{
  position:absolute;
  top:0;
  right:0;
  width:clamp(150px,17vw,300px);
  aspect-ratio:1/1;
  overflow:hidden;
  z-index:1;
  opacity:.9;
  -webkit-mask-image:linear-gradient(225deg,#000 35%,transparent 78%);
          mask-image:linear-gradient(225deg,#000 35%,transparent 78%);
}
.s-tech__accent--top img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.82) contrast(1.05);
}

/* MAIN GRID — RTL: text right, hero center, rail left edge (visual far-right in flow) */
.s-tech__grid{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr) clamp(118px,11vw,168px);
  gap:clamp(28px,4vw,72px);
  align-items:start;
  max-width:1480px;
  margin:0 auto;
}

/* ---- TEXT BAND ---- */
.s-tech__text{
  display:flex;
  flex-direction:column;
  gap:clamp(20px,2.4vw,34px);
  padding-top:clamp(8px,3vh,40px);
}
.spec-block__head{
  font-family:var(--he);
  font-weight:700;
  color:var(--paper);
  font-size:clamp(19px,1.55vw,25px);
  letter-spacing:-.01em;
  margin:0 0 clamp(10px,1vw,15px);
  line-height:1;
}
.spec-list{
  list-style:none;
  margin:0;padding:0;
  display:flex;flex-direction:column;
  gap:clamp(5px,.55vw,9px);
}
.spec-list--ruled{
  padding-bottom:clamp(14px,1.6vw,22px);
  border-bottom:1px solid var(--line);
}
.spec-list li{
  font-family:var(--he);
  font-weight:400;
  font-size:clamp(13px,1.02vw,15.5px);
  line-height:1.42;
  color:var(--muted);
  display:flex;
  gap:.5em;
  align-items:baseline;
}
.spec-list .b{
  font-style:normal;
  color:var(--paper);
  opacity:.55;
  flex:0 0 auto;
  font-weight:400;
  transform:translateY(.04em);
}

/* ---- CENTER HERO ---- */
.s-tech__hero{
  margin:0;
  position:relative;
  align-self:stretch;
  aspect-ratio:9/16;
  max-height:88svh;
  overflow:hidden;
}
.s-tech__hero img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.05);
  transition:transform 1.2s var(--e);
  filter:brightness(.97);
}
.s-tech__hero.is-in img{transform:scale(1);}

/* ---- BADGE RAIL ---- */
.s-tech__rail{
  display:flex;
  flex-direction:column;
  gap:clamp(12px,1.4vw,20px);
  padding-top:clamp(4px,2vh,28px);
}
.apt-badge{
  background:var(--paper);
  color:var(--ink);
  border-radius:14px;
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:clamp(8px,.7vw,12px);
  padding:clamp(12px,1.1vw,18px) clamp(13px,1.1vw,18px);
  min-height:clamp(78px,8vw,108px);
  transition:transform .4s var(--e), box-shadow .4s var(--e);
  will-change:transform;
}
.apt-badge:hover{
  transform:translateX(-6px);
  box-shadow:-14px 14px 38px rgba(0,0,0,.55);
}
.apt-badge__num{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(34px,3.6vw,52px);
  line-height:.82;
  letter-spacing:-.04em;
  color:var(--ink);
  justify-self:start;
}
.apt-badge__div{
  width:1px;
  align-self:stretch;
  margin:clamp(4px,.5vw,8px) 0;
  background:var(--line-l);
}
.apt-badge__label{
  font-family:var(--he-narrow,var(--he));
  font-weight:700;
  font-size:clamp(12px,1vw,15px);
  line-height:1.05;
  color:var(--ink);
  text-align:right;
  letter-spacing:-.01em;
  white-space:nowrap;
}

/* ---- LEGAL ---- */
.s-tech__legal{
  position:relative;
  z-index:3;
  max-width:1480px;
  margin:clamp(26px,3.5vh,52px) auto 0;
  font-family:var(--he);
  font-weight:400;
  font-size:clamp(8.5px,.72vw,10.5px);
  line-height:1.55;
  color:var(--muted-d);
  text-align:right;
}

/* reveal defaults (IO toggles .is-in globally) */
.s-tech [data-rv]{opacity:0;transform:translateY(14px);transition:opacity .6s var(--e),transform .6s var(--e);}
.s-tech [data-rv].is-in{opacity:1;transform:none;}
.s-tech .apt-badge[data-rv]{transform:translateX(28px);}
.s-tech .apt-badge[data-rv].is-in{transform:none;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .s-tech__grid{
    grid-template-columns:1fr;
    gap:clamp(28px,5vw,44px);
  }
  .s-tech__hero{
    aspect-ratio:4/5;
    max-height:70svh;
    order:-1;
  }
  .s-tech__rail{
    flex-direction:row;
    flex-wrap:wrap;
    gap:12px;
  }
  .apt-badge{
    flex:1 1 calc(50% - 6px);
    min-height:84px;
  }
  .s-tech__accent--top{width:120px;}
}
@media (max-width:560px){
  .s-tech{padding-top:clamp(76px,12vh,110px);}
  .spec-list li{font-size:13.5px;}
  .apt-badge{flex:1 1 calc(50% - 6px);}
  .apt-badge__num{font-size:38px;}
}
@media (prefers-reduced-motion:reduce){
  .s-tech [data-rv],
  .s-tech .apt-badge[data-rv]{opacity:1;transform:none;transition:none;}
  .s-tech__hero img{transform:none;transition:none;}
}
/* === developers === */
/* ════════ S10 · developers-about-companies — scoped under #developers ════════ */
#developers.sec{padding:0;min-height:100svh;display:block;justify-content:initial;background:var(--ink)}
.s-dev{display:flex;flex-direction:column;width:100%;min-height:100svh}

/* ── TOP: black hero ── */
.s-dev__hero{
  position:relative;
  background:var(--ink);
  flex:0 0 auto;
  min-height:clamp(360px,48svh,560px);
  padding:calc(var(--hdr-h) + 2vh) var(--pad) clamp(2rem,5vh,4.5rem);
  overflow:hidden;
  display:flex;align-items:center;
}

/* giant ghost wordmark, bleeds off top-left */
.s-dev__ghost{
  position:absolute;
  top:-.16em;left:-.04em;
  z-index:0;
  font-size:clamp(11rem,30vw,30rem);
  line-height:.82;
  color:#1d1d21;
  letter-spacing:-.04em;
  text-transform:lowercase;
  pointer-events:none;
  user-select:none;
  will-change:transform;
}
.s-dev__dot{color:#26262b}

/* B&W construction photo — upper/right area (RTL visual right) */
.s-dev__photo{
  position:absolute;
  top:0;bottom:0;
  inset-inline-end:0;
  width:min(62%,860px);
  z-index:1;
  overflow:hidden;
}
.s-dev__photo img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 30%;
  filter:grayscale(1) contrast(1.05) brightness(.94);
  transform:scale(1.04);
  transition:transform 9s linear;
}
.s-dev:hover .s-dev__photo img{transform:scale(1.09)}
/* fade the photo into black on its inner (left) edge */
.s-dev__photo-fade{
  position:absolute;inset:0;
  background:linear-gradient(to left,
    rgba(0,0,0,0) 32%,
    rgba(0,0,0,.55) 62%,
    rgba(0,0,0,.92) 86%,
    #000 100%);
}

/* heading */
.s-dev__title{
  position:relative;z-index:2;
  font-family:var(--display);
  font-weight:700;
  color:var(--paper);
  font-size:clamp(2.6rem,6.6vw,5.4rem);
  line-height:.96;
  letter-spacing:-.025em;
  text-transform:none;
}
.s-dev__title-line{display:block}

/* ── BOTTOM: white credit panel ── */
.s-dev__panel{
  position:relative;
  flex:1 1 auto;
  background:var(--paper);
  color:var(--ink);
  padding:clamp(2.6rem,6vw,5rem) var(--pad) clamp(3rem,6vw,5.5rem);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,6vw,6rem);
  align-content:start;
}

/* thin vertical center divider */
.s-dev__divider{
  position:absolute;
  top:clamp(2.6rem,6vw,5rem);
  bottom:clamp(3rem,6vw,5.5rem);
  left:50%;
  width:1px;
  background:var(--line-l);
  transform-origin:top;
  transform:scaleY(0);
  transition:transform 1.1s var(--e) .15s;
}
.s-dev__divider.in{transform:scaleY(1)}

.s-dev__col{
  text-align:center;
  display:flex;flex-direction:column;
  align-items:center;
}

/* brand mark + name */
.s-dev__brand{
  display:flex;flex-direction:column;align-items:center;
  gap:.55rem;
  margin-bottom:clamp(1.4rem,3vw,2.4rem);
  color:var(--ink);
}
.s-dev__mark{display:block;line-height:0;color:#1a1a1a}
.s-dev__mark svg{width:clamp(34px,3.4vw,42px);height:auto}
.s-dev__name{
  font-family:var(--he);
  font-weight:700;
  font-size:clamp(1.4rem,2.4vw,2rem);
  letter-spacing:-.01em;
  line-height:1.1;
  display:flex;flex-direction:column;align-items:center;
}
.s-dev__name-sub{
  font-family:var(--he-narrow);
  font-weight:300;
  font-size:.56em;
  letter-spacing:.34em;
  color:var(--muted-d);
  margin-top:.3em;
  text-transform:none;
}

/* copy */
.s-dev__lead{
  font-family:var(--he);
  font-weight:500;
  color:var(--ink);
  font-size:clamp(.96rem,1.18vw,1.08rem);
  line-height:1.62;
  max-width:46ch;
  margin:0 auto;
}
.s-dev__sub{
  font-family:var(--he);
  font-weight:700;
  color:var(--ink);
  font-size:clamp(1.02rem,1.35vw,1.22rem);
  letter-spacing:-.005em;
  margin:clamp(1.5rem,3vw,2.3rem) 0 .55rem;
}
.s-dev__body{
  font-family:var(--he);
  font-weight:400;
  color:var(--muted-d);
  font-size:clamp(.9rem,1.08vw,1rem);
  line-height:1.66;
  max-width:50ch;
  margin:.5rem auto 0;
}
.s-dev__body:first-of-type{margin-top:.2rem}
.s-dev__col bdi{font-weight:600;color:var(--ink)}

/* ── responsive ── */
@media(max-width:860px){
  .s-dev__hero{min-height:clamp(300px,42svh,420px)}
  .s-dev__photo{width:min(72%,520px)}
  .s-dev__panel{
    grid-template-columns:1fr;
    gap:0;
    padding-top:clamp(2.4rem,8vw,3.4rem);
  }
  .s-dev__divider{
    top:auto;bottom:auto;
    left:var(--pad);right:var(--pad);
    width:auto;height:1px;
    top:50%;
    transform-origin:left;
    transform:scaleX(0);
  }
  .s-dev__divider.in{transform:scaleX(1)}
  .s-dev__col:first-of-type{padding-bottom:clamp(2.2rem,7vw,3rem)}
  .s-dev__col:last-of-type{padding-top:clamp(2.2rem,7vw,3rem)}
}
@media(max-width:520px){
  .s-dev__ghost{font-size:42vw}
  .s-dev__photo{width:78%}
  .s-dev__title{font-size:clamp(2.2rem,11vw,3.2rem)}
}
@media(prefers-reduced-motion:reduce){
  .s-dev__photo img{transition:none;transform:none}
  .s-dev:hover .s-dev__photo img{transform:none}
  .s-dev__divider{transition:none}
}
/* === contact === */

.lead-fab{position:fixed;bottom:24px;right:24px;z-index:85;display:inline-flex;align-items:center;gap:7px;padding:12px 16px;border-radius:999px;background:var(--ink);color:#fff;border:1px solid rgba(255,255,255,.22);font-family:var(--he);font-weight:600;font-size:clamp(.81rem,.92vw,.95rem);letter-spacing:.01em;text-decoration:none;box-shadow:0 14px 34px -12px rgba(0,0,0,.6);cursor:pointer;transition:transform .3s var(--e),opacity .3s var(--e),visibility .3s,background-color .25s var(--e),box-shadow .3s var(--e)}   /* bottom-right, level with the a11y button (bottom-left 24px); sized ~10% smaller */
.lead-fab:hover{background:#222;box-shadow:0 18px 44px -12px rgba(0,0,0,.66);transform:translateY(-2px)}
.lead-fab:active{transform:translateY(0)}
.lead-fab:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lead-fab svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.lead-fab.is-hidden{opacity:0;visibility:hidden;transform:translateY(26px);pointer-events:none}
@media(max-width:768px){
  .lead-fab{bottom:calc(env(safe-area-inset-bottom,0px) + 18px);right:16px;padding:10px 14px;font-size:.85rem;box-shadow:0 10px 26px -8px rgba(0,0,0,.6)}
}

#intro.sec{padding:0;height:100svh;min-height:100svh;overflow:hidden;background:#0a0a0a;display:block;position:relative}
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;z-index:0}
/* subtle top scrim so the fixed header stays legible over bright frames */
#intro.sec::before{content:"";position:absolute;left:0;top:0;width:100%;height:24%;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.32),rgba(0,0,0,0))}
/* scroll cue */
.hero-scroll{position:absolute;left:50%;bottom:3.2vh;transform:translateX(-50%);z-index:2;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;opacity:.9;transition:opacity .25s var(--e)}
.hero-scroll:hover{opacity:1}
.hero-scroll:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hero-scroll__chev{width:13px;height:13px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px;animation:heroBob 1.8s ease-in-out infinite}
@keyframes heroBob{0%,100%{transform:rotate(45deg) translateY(0)}50%{transform:rotate(45deg) translateY(4px)}}
@media(prefers-reduced-motion:reduce){.hero-scroll__chev{animation:none}}
/* mute / unmute toggle over the hero film */
.hero-mute{position:absolute;bottom:3.4vh;right:2.2vw;z-index:4;width:clamp(46px,3.3vw,58px);height:clamp(46px,3.3vw,58px);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;background:rgba(12,12,10,.42);border:1px solid rgba(255,255,255,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .25s var(--e),transform .2s var(--e),border-color .25s var(--e)}
.hero-mute:hover{background:rgba(12,12,10,.64);border-color:#fff;transform:scale(1.06)}
.hero-mute:active{transform:scale(.95)}
.hero-mute:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hero-mute svg{width:46%;height:46%;display:block;fill:currentColor}
.hero-mute .ic-on{display:none}.hero-mute .ic-off{display:block}
.hero-mute:not(.is-muted) .ic-on{display:block}.hero-mute:not(.is-muted) .ic-off{display:none}
/* while muted, a soft pulsing ring invites the click to turn sound on */
.hero-mute.is-muted::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid rgba(255,255,255,.65);animation:heroMutePulse 2.2s var(--e) infinite;pointer-events:none}
@keyframes heroMutePulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}
@media(prefers-reduced-motion:reduce){.hero-mute.is-muted::after{animation:none}}
/* DESKTOP ONLY — hidden on mobile (mobile keeps the existing #alef hero) */
#intro-m{display:none}   /* mobile-only hero video — hidden on desktop */
@media(max-width:768px){
  #intro{display:none!important}
  /* mobile hero: landscape video (hero.mp4) fills the phone WIDTH at its natural 16:9 height;
     the section hugs the video (height:auto) so #alef follows immediately with no tall gap */
  #intro-m.sec{display:block;padding:var(--hdr-h) 0 0;height:auto;min-height:0;overflow:hidden;background:#0a0a0a;position:relative}   /* padding-top = nav height so the fixed white header doesn't cover the video's top */
  #intro-m .hero-vid{position:static;width:100%;height:auto;object-fit:contain;display:block;z-index:0}
  #intro-m::before{content:"";position:absolute;left:0;top:0;width:100%;height:22%;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.34),rgba(0,0,0,0))}
}

/* === numbers (1000 במספרים) — 16:9 stage, every element by exact % from PDF page 3 === */
#numbers.sec{padding:0;height:100svh;min-height:100svh;display:flex;align-items:center;justify-content:center;background:var(--paper)}   /*@fb one viewport, no internal scroll*/
.s-numbers{position:relative;width:100vw;aspect-ratio:16/9;background:var(--paper);overflow:hidden;isolation:isolate;container-type:size}   /*@fb full-bleed: bottom black strip →edge-to-edge*/

/* vertical "במספרים" — right side, reads bottom-to-top (PDF x10.9–18.2%, y32.7–58.7%) */
/* "במספרים" — exact vertical text extracted from the PDF (pixel-1:1, no font guessing) at the exact bbox */
.s-numbers__kicker{position:absolute;left:10.91%;top:32.74%;width:7.26%;height:25.98%;z-index:3}
.s-numbers__kicker img{width:100%;height:100%;object-fit:fill;display:block}

/* the 1000 lockup spans the page top (over the whole 1920×1080 frame; black strip overlays bottom) */
.s-numbers__lock{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none}
.s-numbers__lock>svg{display:block;width:100%;height:100%}
.s-numbers__lock .num-fill{filter:grayscale(.12) contrast(1.02)}

/* black strip — exact top edge at 62.59% of the stage */
.s-numbers__strip{position:absolute;left:0;right:0;top:62.59%;bottom:0;background:var(--ink);color:var(--paper);z-index:2}
.s-numbers__row{position:absolute;inset:0;margin:0;padding:0;list-style:none;direction:rtl}
/* live horizontal stats strip (desktop) — replaces baked numbers-strip.png so numbers can count up (@fb live counter) */
.ns-live{position:absolute;inset:0;display:flex;direction:ltr;align-items:center;justify-content:space-between;padding:0 2.5%;list-style:none}   /* Omri: hospital removed → 6 stats, equal-width cells */
.nl-cell{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:0 .5cqw}   /* equal-width cells → each number centered in its cell, so the boundary divider sits exactly midway between two numbers */
.nl-cell--hosp{flex:1.35;transform:translateY(.78cqw)}   /* lower the hospital icon 15px so it sits on the same line as the other icons (Omri) */
.nl-lbl--hosp{font-weight:500;font-size:.8cqw;color:rgba(255,255,255,.82);line-height:1.34;max-width:22ch;margin-top:.5cqw}
.nl-cell:not(:last-child)::after{content:"";position:absolute;right:0;top:24%;height:42%;width:1px;background:rgba(255,255,255,.36)}
.nl-ico{height:3.0cqw;width:auto;object-fit:contain;display:block;margin-bottom:.55cqw;opacity:.94}
.nl-num{font-family:var(--display);font-weight:300;font-size:3.85cqw;line-height:.92;letter-spacing:-.01em;color:#fff;direction:ltr;font-variant-numeric:tabular-nums}
.nl-figure{position:relative;display:inline-block;line-height:.92}   /* width = number only → number stays centered under the icon; label row unchanged */
.nl-unit{position:absolute;bottom:.15cqw;left:0;transform:translateX(-100%);margin-left:-.25cqw;font-family:var(--he);font-weight:400;font-size:.72cqw;line-height:1.06;color:rgba(255,255,255,.6);direction:rtl;text-align:right;white-space:nowrap}   /* small annotation at the number's lower-left (like the baked design) — doesn't shift the number */
.nl-lbl{font-family:var(--he);font-weight:400;font-size:1.02cqw;color:rgba(255,255,255,.74);direction:rtl;text-align:center;line-height:1.25;margin-top:.5cqw;max-width:15ch}
/* bold hospital descriptor — real text overlaid on the strip image (Omri: make it bold); dark cover hides the regular baked text */
.s-numbers__hosp-b{display:none}  /* hospital descriptor now lives inside the live strip's hospital cell (.nl-lbl--hosp) */

/* each column centered on its PDF x-center (--cx); number baseline sits ~y80% of the page */
.s-numbers__col{
  position:absolute;top:0;bottom:0;left:var(--cx);width:13%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
/* hairline divider on the LEFT edge of each col (RTL: between this col and the next) — skip first (rightmost) */
.s-numbers__col:not(.s-numbers__col--hosp)::before{
  content:"";position:absolute;right:auto;left:-0.5%;top:30%;height:34%;width:1px;background:#7d7d7d;opacity:.55;
}
/* icon row — sits within strip top area (PDF y~69–75%) */
.s-numbers__ico{position:absolute;top:18%;left:50%;transform:translateX(-50%);width:3.0cqw;height:auto;display:block}
.s-numbers__ico svg{width:100%;height:auto;display:block;stroke-linecap:round;stroke-linejoin:round}
/* number — thin Helvetica (extracted PDF Latin face); PDF y~77.8–85.6% */
.s-numbers__val{
  position:absolute;top:41%;left:50%;transform:translateX(-50%);
  display:flex;align-items:baseline;justify-content:center;gap:.2em;
  font-family:'HelvPDF','Helvetica Neue',Arial,sans-serif;font-weight:400;
  font-size:4.35cqw;line-height:1;letter-spacing:-.025em;color:#f3f3f3;white-space:nowrap;
  font-variant-numeric:tabular-nums;direction:ltr;
}
.s-numbers__unit{font-family:var(--he);font-weight:400;font-size:.82cqw;letter-spacing:0;color:#bdbdbd;align-self:flex-start;margin-top:.15em}
.ns-stats{display:none}   /* mobile-only live vertical stats (shown ≤768px); desktop keeps the baked strip */
/* label under number (PDF y85.7–91.1%) */
.s-numbers__lbl{
  position:absolute;top:61%;left:50%;transform:translateX(-50%);
  font-family:var(--he);font-weight:400;font-size:2.45cqw;line-height:1.25;color:#dcdcdc;white-space:nowrap;
}
/* hospital descriptor — no number, multi-line block (far right, no count) */
.s-numbers__col--hosp{align-items:flex-end;width:11%}
.s-numbers__col--hosp .s-numbers__ico{top:14%}
.s-numbers__hosp{
  position:absolute;top:50%;left:50%;transform:translateX(-50%);
  margin:0;font-family:var(--he);font-weight:400;font-size:0.95cqw;line-height:1.32;color:#cfcfcf;
  text-align:center;white-space:nowrap;
}
.s-numbers__hosp-p{color:#8c8c8c}
/* ---- reveal / count-up entrance (RONIT: build while scrolling into view) ---- */
.js .s-numbers__lock[data-rv]{opacity:0;transform:translateY(40px)}
.js .s-numbers__lock[data-rv].in{opacity:1;transform:none}
.js .s-numbers__kicker[data-rv]{opacity:0;transform:translateY(24px)}
.js .s-numbers__kicker[data-rv].in{opacity:1;transform:none}
.js .s-numbers__row[data-rv]{opacity:0;transform:translateY(28px)}
.js .s-numbers__row[data-rv].in{opacity:1;transform:none;transition-delay:.1s}
.js .s-numbers__hosp-b[data-rv]{opacity:0;transform:translateY(28px)}
.js .s-numbers__hosp-b[data-rv].in{opacity:1;transform:none;transition-delay:.1s}   /* "שלוחה קדמית" label — joins the strip's entrance, same rise+delay so it stays glued */
@media (max-width:560px){ .s-numbers__hosp{font-size:1.18cqw} }
@media(max-width:768px){
  /* ── #numbers mobile: eyebrow → compact 1000 lockup → full-bleed dark stats ribbon → hospital note ── */
  #numbers.sec{min-height:auto;height:auto;padding:0;display:block;background:var(--paper)}
  .s-numbers{position:relative;width:100%;aspect-ratio:auto;min-height:auto;height:auto;container-type:normal;overflow:visible;display:flex;flex-direction:column;background:var(--paper);
    padding:calc(var(--hdr-h) + clamp(40px,10vw,60px)) clamp(20px,5.5vw,28px) 0}
  /* "במספרים" eyebrow — system eyebrow spec, centered */
  .s-numbers__kicker{position:relative;left:auto;top:auto;width:auto;height:auto;order:1;align-self:center;margin:0;transform:none!important;opacity:1!important;
    font-family:var(--he);font-weight:600;font-size:.72rem;letter-spacing:.1em;color:#6a6a6a}
  .s-numbers__kicker img{display:none}                 /* the vertical wordmark img reads sideways/mirrored when rotated → clean text eyebrow instead */
  .s-numbers__kicker::after{content:"במספרים"}
  /* the 1000 lockup — KILL THE VOID: crop the 1920×1080 svg to its real content box (x130-1810, y160-770 ≈ 1680×610, ~2.75/1) */
  .s-numbers__lock{position:relative;left:auto;top:auto;order:2;margin:clamp(14px,3.5vw,22px) calc(50% - 50vw) 0;
    width:auto;height:auto;aspect-ratio:1810/740;overflow:hidden;transform:none!important;opacity:1!important}   /* FULL-BLEED (100vw); crop window x63-1873 → 1000 shifted clearly right (left ~40px, right ~15px), nothing cut */
  .s-numbers__lock>svg{display:block;height:auto;aspect-ratio:auto;
    width:106%;                  /* 1920/1810 → 1000 a touch smaller to make room to shift right */
    margin-left:-3.5%;           /* window starts at viewBox x63 → ~40px clear space left of the "1" */
    margin-top:0}                /* top flush at viewBox y0 (ring top, like desktop); empty bottom clipped */
  /* stats strip — full-bleed dark band with internal breathing so it reads as a designed stats ribbon */
  .s-numbers__strip{position:relative;left:auto;right:auto;top:auto;bottom:auto;order:3;width:auto;
    margin:clamp(38px,9.5vw,56px) calc(50% - 50vw) 0;padding:clamp(24px,6vw,36px) 0;background:var(--ink)}   /* full-bleed: width:auto + symmetric negative margin (no 100vw) */
  .s-numbers__row{position:relative;inset:auto;width:100%}
  .s-numbers__strip-img{position:relative;inset:auto;width:100%;height:auto;object-fit:contain;display:block}
  /* hospital note — continuous black band, separated from the strip by a right-aligned hairline */
  .s-numbers__hosp-b{position:relative;left:auto;top:auto;width:auto;height:auto;order:4;margin:0 calc(50% - 50vw);
    padding:clamp(28px,7vw,40px) clamp(20px,5.5vw,28px) clamp(52px,13vw,76px);background:var(--ink);
    font-family:var(--he);font-weight:400;font-size:clamp(1.02rem,4.2vw,1.14rem);line-height:1.5;color:rgba(255,255,255,.72);
    text-align:center;align-items:center;justify-content:center;transform:none!important;opacity:1!important}
  /* ── replace the baked horizontal strip + old hospital block with a big VERTICAL stat list ── */
  .s-numbers__strip,.s-numbers__hosp-b{display:none!important}
  .ns-stats{order:3;display:flex;flex-direction:column;align-items:center;text-align:center;direction:rtl;
    gap:clamp(58px,15vw,90px);width:auto;margin:clamp(40px,10vw,56px) calc(50% - 50vw) 0;
    padding:clamp(60px,16vw,92px) clamp(20px,5.5vw,28px) clamp(72px,18vw,104px);background:var(--ink)}
  .ns-stat{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,3.5vw,18px);max-width:22ch}
  .ns-stat__ico{height:clamp(44px,12vw,58px);width:auto;object-fit:contain;opacity:.92;margin-bottom:clamp(2px,1vw,6px)}   /* original icons cropped from the desktop strip (white-on-transparent) */
  .ns-stat__num{font-family:var(--display);font-weight:700;font-size:clamp(3.4rem,18vw,5.4rem);line-height:.9;letter-spacing:-.02em;color:#fff;direction:rtl}   /* RTL: the <bdi> number sits right, the Hebrew unit flows to its left → "1.7 מיליון מ\"ר" reads correctly */
  .ns-stat__unit{display:block;margin-top:.12em;font-family:var(--he);font-weight:400;font-size:.26em;letter-spacing:0;color:rgba(255,255,255,.66)}   /* unit on its own line under the number → consistent + unambiguous RTL */
  .ns-stat__lbl{font-family:var(--he);font-weight:400;font-size:clamp(1.05rem,4.6vw,1.35rem);line-height:1.4;color:rgba(255,255,255,.72)}
  .ns-stat__lbl--lg{font-weight:600;font-size:clamp(1.3rem,5.6vw,1.7rem);color:#fff;margin-top:.1em}
}

/* ═══ NUMBERS · desktop FLOW rebuild (2026-07-20) ═══
   White area [vertical "במספרים" + 1000 lockup] over black [6-stat strip].
   Real flex column — fills ANY desktop width, no letterbox/side-crop, one screen.
   Scoped >=769px; the mobile stack (<=768px) is self-contained and untouched. */
@media(min-width:769px){
  #numbers.sec{padding:0;min-height:100svh;height:auto;display:block;overflow:visible;background:var(--paper);scroll-snap-align:start}
  .s-numbers{position:relative;width:100%;aspect-ratio:auto;container-type:normal;min-height:100svh;overflow:hidden;background:var(--paper);
    display:flex;flex-direction:column}

  /* vertical "במספרים" label — exact x (10.91%); height-sized, aspect preserved (no smear) */
  .s-numbers__kicker{position:absolute;left:10.91%;top:22%;right:auto;inset-inline-start:auto;width:auto;height:26%;z-index:3;
    transform:none!important;opacity:1!important}
  .s-numbers__kicker img{width:auto;height:100%;object-fit:contain}

  /* 1000 lockup — fills the white area above the strip; svg centred on its CONTENT (not the 16:9 box) & cropped */
  .s-numbers__lock{position:relative;inset:auto;flex:1 1 auto;min-height:0;transform:none!important;opacity:1!important;
    overflow:hidden;padding:calc(var(--hdr-h) + 1vh) 0 0}
  .s-numbers__lock>svg{position:absolute;left:47.4%;top:calc(50% + var(--hdr-h)/2);transform:translate(-50%,-50%);
    width:min(74%,1420px);height:auto;max-height:none;display:block}

  /* black stats strip — bottom band, full-bleed width, ~37% height */
  .s-numbers__strip{position:relative;inset:auto;flex:0 0 auto;width:100%;height:auto;min-height:36svh;background:var(--ink)}
  .s-numbers__strip .ns-live{position:relative;inset:auto;width:100%;height:100%;min-height:36svh}
}

/* === project-hero (S4 · הדמיית הפרויקט — בין ערביים) ============================
   URBAN method: one 16:9 cqw stage, every element absolutely positioned by exact %
   measured from PDF p.4. Brand lockup = EXTRACTED PDF VECTOR (assets/web/project-hero-lockup.svg),
   not a font. */
#project.sec{padding:var(--hdr-h) 0 0;min-height:100svh;display:flex;align-items:center;justify-content:center;background:var(--ink)}
.s-project-hero{position:relative;width:min(100vw, calc((100svh - var(--hdr-h)) * 16 / 9));aspect-ratio:16/9;background:var(--ink);overflow:hidden;isolation:isolate;container-type:size}

/* dusk render / hero-video — PDF clip rect x6.98–93.02%, y13.89–83.85% */
.ph-frame{position:absolute;left:4%;top:10%;width:92%;height:71.5%;margin:0;overflow:hidden;background:var(--ink2);z-index:1}  /* enlarged per Omri (was 6.98/13.89/86.04/69.96); bottom 81.5% leaves a gap before the paragraph (83.95%) */
.ph-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.ph-media--poster{z-index:0}
.ph-frame video.ph-media{z-index:1}

/* brand lockup — extracted vector. bbox x10.224–26.982%, y20.185% (PDF) */
.ph-lockup{position:absolute;left:10.224%;top:20.185%;width:16.758%;height:auto;z-index:4;display:block;pointer-events:none}

/* body paragraph (white, justified) — block x35.66–93.04%, y84.79% (PDF) */
.ph-body{position:absolute;right:4%;top:84.2%;width:62%;margin:0;z-index:3;font-family:var(--he);font-weight:400;color:var(--paper);font-size:.98cqw;line-height:1.34;letter-spacing:normal;text-align:justify;direction:rtl}  /* PDF p3: AlmoniNeueDL Regular 18.8pt=.98cqw, box confined to RIGHT (x34-96%, ~PDF x35.4-93) so justified L1-2 fill & the rule fills the empty LEFT gap; weight 400 (was 700 bold → spilled over the rule); width 62% (>PDF 57.6% because our copy keeps "פרויקט" not "מתחם") → 3 lines */
.ph-body .p120r{transform:none;display:block}  /* project paragraph: no +20% scale — glyphs sit at true PDF size so the box stays confined to the right & never overruns the rule */
/* +20% body scale via inner wrapper (keeps the element's reveal transform intact; scales text composition from the right anchor) */
.p120r{display:block;transform:scale(1.2);transform-origin:top right}
@media(max-width:768px){.p120r{transform:none}}   /* mobile: the desktop +20%-scale trick is off — text uses its mobile clamp() size, no scale/shift */
@media(max-width:768px){body{overflow-x:clip}}   /* safety net: no sideways scroll/cut from any full-bleed 100vw rounding (clip ≠ hidden → no scroll-container side-effects) */
.ph-body bdi{direction:ltr;unicode-bidi:isolate}

/* white rule under the left of the photo — x6.96–34.59%, y91.19% (PDF) */
.ph-rule{position:absolute;left:4%;top:90.7%;width:29%;height:2px;background:#fff;z-index:3;transform-origin:left center}  /* fills the empty LEFT gap beside the paragraph's LAST line: image-left (4%) → just before paragraph-left (34%), aligned to line-3 baseline (~90.7%); 2px = PDF stroke 2.38px. Never overlaps the paragraph (which is confined to x34-96%) */

/* --- reveal staging (force-reveal classes: in / is-in / is-visible) --- */
.js [data-rv].ph-frame,.js [data-rv].ph-lockup,.js [data-rv].ph-body,.js [data-rv].ph-rule{opacity:0}
.js [data-rv].ph-frame{transform:none;transition:opacity 1s var(--e)}
.js [data-rv].ph-frame .ph-media{transform:scale(1.06);transition:transform 1.3s var(--e)}
.js [data-rv].ph-frame.in .ph-media,.js [data-rv].ph-frame.is-in .ph-media,.js [data-rv].ph-frame.is-visible .ph-media{transform:none}
.js [data-rv].ph-lockup{transform:translateY(1.2cqw) scale(.985);transition:opacity .9s var(--e) .15s,transform 1s var(--e) .15s}
.js [data-rv].ph-body{transform:translateY(1.4cqw);transition:opacity .8s var(--e) .25s,transform .9s var(--e) .25s}
.js [data-rv].ph-rule{transform:scaleX(0);transition:opacity .5s var(--e) .3s,transform .9s var(--e) .35s}
.js [data-rv].ph-frame.in,.js [data-rv].ph-frame.is-in,.js [data-rv].ph-frame.is-visible,
.js [data-rv].ph-lockup.in,.js [data-rv].ph-lockup.is-in,.js [data-rv].ph-lockup.is-visible,
.js [data-rv].ph-body.in,.js [data-rv].ph-body.is-in,.js [data-rv].ph-body.is-visible,
.js [data-rv].ph-rule.in,.js [data-rv].ph-rule.is-in,.js [data-rv].ph-rule.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js [data-rv].ph-frame,.js [data-rv].ph-lockup,.js [data-rv].ph-body,.js [data-rv].ph-rule{opacity:1!important;transform:none!important;transition:none}
  .ph-frame .ph-media{transform:none!important}
}

/* --- mobile: editorial vertical stack — eyebrow → hero render (lockup overlaid) → body → rule --- */
@media (max-width:768px){
  #project.sec{min-height:auto;height:auto;padding:0;display:block}
  .s-project-hero{position:relative;width:100%;aspect-ratio:auto;min-height:auto;height:auto;container-type:normal;overflow:visible;display:flex;flex-direction:column;background:var(--ink);
    padding:calc(var(--hdr-h) + clamp(40px,10vw,60px)) clamp(20px,5.5vw,28px) clamp(52px,13vw,76px)}
  /* hero render frame — feature 4/5, un-absolute, clean crop */
  .ph-frame{position:relative;left:auto;top:auto;width:100%;height:auto;margin:0;aspect-ratio:4/5;border-radius:3px;order:2;margin-top:clamp(14px,3.5vw,22px)}
  /* duplicate brand lockup hidden on mobile — the fixed header already carries the alfa mark */
  .ph-lockup{display:none}
  /* body paragraph — un-absolute, system body type, no +20% scale */
  .ph-body{position:static;right:auto;top:auto;width:auto;margin:0;margin-top:clamp(38px,9.5vw,56px);order:3;
    font-family:var(--he);font-weight:400;font-size:clamp(1.02rem,4.2vw,1.14rem);line-height:1.62;letter-spacing:0;color:rgba(255,255,255,.72);text-align:right;transform:none}
  .p120r{transform:none}
  /* white hairline rule — right-aligned, system length */
  .ph-rule{position:static;left:auto;top:auto;display:block;width:56px;height:1px;background:rgba(255,255,255,.18);order:4;margin:clamp(14px,3.5vw,22px) 0 0 auto;transform:none!important}
}

/* ═══ PROJECT · desktop FLOW rebuild (2026-07-20) ═══
   [media frame + alfa lockup overlay] over [rule (left) + paragraph (right)].
   Real grid — fills ANY desktop width, no letterbox/side-crop, one screen.
   >=769px only; the mobile stack (<=768px) is self-contained and untouched. */
@media(min-width:769px){
  #project.sec{padding:0;min-height:100svh;height:auto;display:block;overflow:visible;background:var(--ink);scroll-snap-align:start}
  .s-project-hero{position:relative;width:100%;max-width:none;aspect-ratio:auto;container-type:normal;overflow:hidden;
    background:var(--ink);min-height:100svh;direction:ltr;
    display:grid;
    grid-template-columns:7% 24% 62% 7%;   /* paragraph 62% -> 3 lines like the shipped PDF layout (their Hebrew copy needs 62% to stay 3 lines); frame 86% fits one screen */
    /* flexible top+bottom rows centre the [frame + gap + text] group vertically;
       text sits directly under the frame (small fixed gap), not pinned to the bottom */
    grid-template-rows:minmax(calc(var(--hdr-h) + 1.5vh),1fr) auto clamp(.8rem,2vh,2rem) auto minmax(1.5vh,1fr);
  }
  /* media frame — spans 4%..96%, wide 2.29:1 (PDF), holds the render/video */
  .ph-frame{grid-column:2 / 4;grid-row:2;position:relative;inset:auto;width:auto;height:auto;margin:0;
    aspect-ratio:2.29;overflow:hidden;background:var(--ink2);z-index:1}
  .ph-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  /* alfa lockup — overlaid on the frame, top-left (exact PDF offsets, relative to the frame cell) */
  .ph-lockup{grid-column:2 / 4;grid-row:2;position:relative;inset:auto;z-index:4;align-self:start;justify-self:start;
    width:18.2%;height:auto;margin:6% 0 0 6.85%;transform:none}
  /* paragraph — right column (34%..96%), justified rtl */
  .ph-body{grid-column:3;grid-row:4;position:relative;inset:auto;width:auto;margin:0;direction:rtl;text-align:justify;
    font-family:var(--he);font-weight:400;color:var(--paper);font-size:clamp(.82rem,.95vw,1.05rem);line-height:1.5;letter-spacing:normal}
  .ph-body .p120r{transform:none;display:block}
  /* white rule — left area, aligned to the paragraph's baseline band */
  .ph-rule{grid-column:2;grid-row:4;position:relative;inset:auto;align-self:end;justify-self:start;
    width:92%;height:2px;background:#fff;margin:0 0 .5em;transform:none!important;transform-origin:left center}
}

/* === s-aerial (תצלום אוויר / פארק האלף) — PDF page 5 layout untouched; only the card's image became a gallery === */
#aerial.sec{padding:var(--hdr-h) 0 0;min-height:100svh;display:flex;align-items:center;justify-content:center;background:var(--paper)}  /* slide sits BELOW the fixed nav, centered; page-5 margin is WHITE */
.s-aerial{position:relative;width:min(100vw, calc((100svh - var(--hdr-h)) * 16 / 9));aspect-ratio:16/9;background:var(--paper);overflow:hidden;isolation:isolate;container-type:size}
/* giant brand α glyph — W-peak (top) + left-edge notch bleed past the photo card into the white margin */
.s-aerial__glyph{position:absolute;inset:0;z-index:2;pointer-events:none}
.s-aerial__glyph img{width:100%;height:100%;object-fit:fill;display:block}
/* the render card — exact PDF clip-rect (page 1920×1080: x134..1786 y99.67..980) */
.s-aerial__card{position:absolute;left:6.98%;top:9.23%;width:86.04%;height:81.51%;z-index:4;overflow:hidden;background:var(--ink2);box-shadow:0 22px 60px -26px rgba(0,0,0,.5)}
/* gallery frames crossfade inside the card (was a single static frame) */
.s-aerial__frame{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--e);will-change:opacity}
.s-aerial__frame.is-on{opacity:1}
.s-aerial__frame img{width:100%;height:100%;object-fit:cover;display:block}
/* the only addition: prev/next arrows on the card sides — prev right & points right (RTL back), next left & points left (RTL forward) */
.s-aerial__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:3.4cqw;height:3.4cqw;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(10,10,10,.3);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .3s var(--e),color .3s var(--e),border-color .3s var(--e),transform .3s var(--e)}
.s-aerial__nav svg{width:42%;height:42%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.s-aerial__nav:hover{background:rgba(255,255,255,.95);color:#0a0a0a;border-color:#fff;transform:translateY(-50%) scale(1.08)}
.s-aerial__nav:focus-visible{outline:2px solid #fff;outline-offset:3px}
.s-aerial__nav:active{transform:translateY(-50%) scale(.95)}
.s-aerial__nav--prev{right:2cqw}
.s-aerial__nav--next{left:2cqw}
/* mobile-only eyebrow + heading lead — hidden on desktop so the PDF-exact layout stays byte-identical */
.s-aerial__head{display:none}
@media(max-width:768px){
  /* ── #aerial mobile: editorial — eyebrow → heading → full-width gallery card (4:3) ── */
  #aerial.sec{min-height:auto;height:auto;padding:0;display:block;background:var(--paper)}
  .s-aerial{position:relative;width:100%;aspect-ratio:auto;min-height:auto;height:auto;container-type:normal;overflow:visible;display:flex;flex-direction:column;background:var(--paper);
    padding:calc(var(--hdr-h) + clamp(40px,10vw,60px)) clamp(20px,5.5vw,28px) clamp(52px,13vw,76px)}
  .s-aerial__glyph{display:none}   /* hide the bleeding α glyph on mobile */
  /* eyebrow + heading block (mobile only) */
  .s-aerial__head{display:block;order:1;direction:rtl;text-align:right}
  .s-aerial__eyebrow{display:block;font-family:var(--he);font-weight:600;font-size:.72rem;letter-spacing:.1em;color:#6a6a6a}
  .s-aerial__heading{display:block;margin-top:clamp(14px,3.5vw,22px);font-family:var(--he);font-weight:600;
    font-size:clamp(1.6rem,6.8vw,2.3rem);line-height:1.12;letter-spacing:-.015em;color:#111}
  /* gallery card — full-width gallery 4/3, un-absolute */
  .s-aerial__card{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:4/3;border-radius:3px;order:2;margin-top:clamp(38px,9.5vw,56px);box-shadow:0 22px 60px -30px rgba(0,0,0,.45)}
  /* arrows — sized to viewport, sit inside the card */
  .s-aerial__nav{width:11vw;height:11vw;background:rgba(10,10,10,.4)}
  .s-aerial__nav--prev{right:clamp(10px,3vw,14px)}
  .s-aerial__nav--next{left:clamp(10px,3vw,14px)}
  .s-aerial__nav svg{width:40%;height:40%}
}

.gal-lb{position:fixed;inset:0;z-index:200;background:rgba(8,8,8,.96);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s var(--e),visibility .3s}
.gal-lb.is-open{opacity:1;visibility:visible}
.gal-lb__img{max-width:94vw;max-height:88vh;object-fit:contain;box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.gal-lb__close{position:absolute;top:3vh;left:3vw;width:48px;height:48px;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:rgba(0,0,0,.3);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .25s var(--e),color .25s var(--e),transform .3s var(--e)}
.gal-lb__close:hover{background:#fff;color:#111;transform:rotate(90deg)}
.gal-lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(0,0,0,.3);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .25s var(--e),color .25s var(--e)}
.gal-lb__nav:hover{background:#fff;color:#111}
.gal-lb__nav svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}   /* SVG chevrons — no RTL bidi-mirror */
.gal-lb__prev{right:3vw}.gal-lb__next{left:3vw}
.gal-lb__close:focus-visible,.gal-lb__nav:focus-visible{outline:2px solid #fff;outline-offset:3px}
#aerialGal .s-aerial__frame img{cursor:zoom-in}

/* ═══════════════ S6 · life_ / style / zone — amenities + collage (16:9 cqw stage, PDF-exact) ═══════════════ */
/* Built on the URBAN gold-standard pattern: 16:9 container-type:size stage, every element absolutely placed by % from the PDF page-6 clip-rectangles; all font-sizes in cqw. */
#wellness.sec{padding:0;height:100svh;min-height:100svh;display:flex;align-items:center;justify-content:center;background:var(--ink)}   /*@fb one viewport, no internal scroll*/
.s-lifestyle-zone{position:relative;width:100vw;aspect-ratio:16/9;background:var(--ink);overflow:hidden;isolation:isolate;container-type:size;direction:ltr}   /*@fb full-bleed: images→right edge, white→left edge (no side black bars)*/

/* ── photos (PDF clip-rects, page 1920×1080 → %) ── */
.s-lifestyle-zone .lz2-ph{position:absolute;overflow:hidden;background:var(--ink2);z-index:3}
.s-lifestyle-zone .lz2-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--e)}
.lz2-ferns {left:30.11%; top:0;       width:26.44%; height:40.31%}   /* clip-3 */
.lz2-yoga  {left:56.55%; top:0;       width:43.45%; height:40.31%;z-index:4}   /* clip-0 — yoga woman, full top-right */
.lz2-yoga img{object-position:42% 42%}
.lz2-pull  {left:56.55%; top:39.65%;  width:21.73%; height:60.35%}   /* clip-2 — pull-up man */
.lz2-pull img{object-position:50% center}
.lz2-bloom {left:78.28%; top:68.70%;  width:21.72%; height:31.30%}   /* clip-4 — gypsophila */
.lz2-bloom img{object-position:center 30%}

/* ── light-grey filler panels (#d9d9d9) — PDF rhythm blocks ── */
.s-lifestyle-zone .lz2-fill{position:absolute;background:#d9d9d9;z-index:2}
.lz2-fill--tr {left:90.75%; top:0;      width:9.25%;  height:2.8%}    /* tiny top-right corner accent */
.lz2-fill--mid{left:78.28%; top:40.31%; width:21.72%; height:28.39%} /* big mid-right block between yoga & bloom */

/* ── white amenity icon panel — visual LEFT third ── */
.s-lifestyle-zone .lz2-amen{position:absolute;left:0;top:0;width:30.11%;height:100%;background:#fff;z-index:6;direction:rtl}
.s-lifestyle-zone .lz2-amen > *{transform:translateY(5cqh)}   /* nudge icons + baked-label image down together so the top row clears the fixed header (client: top icons slightly cut). 5cqh = same px offset for the tall image AND the short icons → they stay aligned; white panel bg stays full-height so no gap shows */
.s-lifestyle-zone .lz2-amen-img{width:100%;height:100%;object-fit:fill;object-position:center;display:block}  /* base panel = labels+rules only (icons painted out); the 10 icons overlay as self-drawing SVGs. object-fit:FILL (not cover) so the baked labels map 1:1 to the panel box — identical coordinate space as the %-positioned icons → they never drift/overlap across screen sizes or browsers (img ratio .534 ≈ panel .535, stretch is imperceptible) */
/* amenity icons — extracted from PDF p6 vectors (potrace), solid; staggered fade-in (one after another) on reveal */
.s-lifestyle-zone .lz-ico{position:absolute;z-index:7;overflow:visible}
.s-lifestyle-zone .lz-ico path{fill:#100f0d;stroke:none}
.js .s-lifestyle-zone .lz-ico{opacity:0}   /* opacity-only reveal (no translateY) — icons stay locked in their baked slots so they never slide over a label mid-animation */
.js .s-lifestyle-zone .lz2-amen.is-drawn .lz-ico{opacity:1;transition:opacity .45s var(--e) var(--d,0s)}
@media(prefers-reduced-motion:reduce){.js .s-lifestyle-zone .lz-ico{opacity:1;transition:none}}   /* (no transform:none here — it would cancel the 5cqh shift and desync the icons from the labels) */
.s-lifestyle-zone .lz2-icons{list-style:none;margin:0;padding:7.5% 0 5%;width:100%;height:100%;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,1fr)}
.s-lifestyle-zone .lz2-cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  text-align:center;gap:.9cqh;padding:0 .3cqw 1.4cqh;border-top:.09cqw solid #111}
.s-lifestyle-zone .lz2-ico{width:5.6cqw;height:5.6cqw;display:block;
  fill:none;stroke:#111;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .55s var(--e),opacity .45s ease}
.s-lifestyle-zone .lz2-lbl{font-family:var(--he);font-weight:500;font-size:.92cqw;line-height:1.18;color:#111;max-width:15ch}
/* RONIT NOTE — amenity icons gently animate on reveal (staggered rise + fade, transform/opacity only, spring easing) */
.js .s-lifestyle-zone [data-rv].lz2-cell .lz2-ico{opacity:0;transform:translateY(14%) scale(.82)}
.js .s-lifestyle-zone [data-rv].lz2-cell.in .lz2-ico{opacity:1;transform:none;
  transition:opacity .6s var(--e) var(--d,0s),transform .7s var(--e) var(--d,0s)}
.s-lifestyle-zone .lz2-cell:hover .lz2-ico{transform:translateY(-4%) scale(1.05)}

/* ── black wordmark panel + giant "life_ style zone" (HelvPDF, white) ── */
.s-lifestyle-zone .lz2-wmpanel{position:absolute;left:30.11%;top:40.31%;width:26.44%;height:59.69%;background:var(--ink);z-index:5;overflow:hidden}   /* clip the α ghost to the panel (PDF: α is cut at panel right edge, never spills onto photos) */
.s-lifestyle-zone .lz2-wm-img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
  /* life-style-zone: 3 word-bands animate in one-by-one (blur-in), then a line draws itself (Omri) */
  .s-lifestyle-zone .lz2-wmpanel{position:absolute}   /* positioning context for the live wordmark */
  .s-lifestyle-zone .lz2-word{position:absolute;left:11.4%;margin:0;font-family:'HelvPDF',Helvetica,Arial,sans-serif;font-weight:700;font-size:6.92cqw;line-height:.82;letter-spacing:-.01em;color:#fff;z-index:2;white-space:nowrap;will-change:transform,opacity,filter}   /* PDF p5: embedded HelvPDF (exact PDF Helvetica-Bold) 132.8pt = 6.92cqw, near-zero tracking */
  .s-lifestyle-zone .lz2-word--life{top:19.0%}
  .s-lifestyle-zone .lz2-word--style{top:39.2%}
  .s-lifestyle-zone .lz2-word--zone{top:59.0%}
  .s-lifestyle-zone .lz2-wm-us{position:absolute;left:50%;top:35.2%;width:19.5%;height:.11cqw;background:#fff;transform:scaleX(0);transform-origin:left center;z-index:2}   /* the "_" after life — PDF panel% x50-69.5 y35.5, 2px */
  .s-lifestyle-zone .lz2-wm-seal{position:absolute;left:11.6%;top:79.8%;width:57.9%;height:.11cqw;background:#fff;transform:scaleX(0);transform-origin:left center;z-index:2}   /* underline under zone — PDF panel% x11.6-69.5 y79.8, 2px */
  .s-lifestyle-zone .lz2-wm-ghost{position:absolute;top:-4%;right:-16%;width:92%;height:auto;color:#171717;z-index:1;pointer-events:none}   /* half-α silhouette, tone-on-tone — large bowl in upper panel, clipped at right (PDF panel% x~25-100 y~3-52) */
  .s-lifestyle-zone .lz2-wm-ghost path{fill:#171717}
  @keyframes lzWordIn{from{opacity:0;filter:blur(11px);transform:translateY(-22px)}60%{opacity:1;filter:blur(2px)}to{opacity:1;filter:blur(0);transform:none}}
  @keyframes lzSealDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .js .s-lifestyle-zone .lz2-wmpanel[data-rv]{opacity:1!important;transform:none!important;transition:none}
  .js .s-lifestyle-zone .lz2-word{opacity:0}
  .js .s-lifestyle-zone .lz2-wmpanel.in .lz2-word--life{animation:lzWordIn .62s var(--e) .12s both}
  .js .s-lifestyle-zone .lz2-wmpanel.in .lz2-word--style{animation:lzWordIn .62s var(--e) .4s both}
  .js .s-lifestyle-zone .lz2-wmpanel.in .lz2-word--zone{animation:lzWordIn .62s var(--e) .68s both}
  .js .s-lifestyle-zone .lz2-wm-us{transform:scaleX(0)}
  .js .s-lifestyle-zone .lz2-wmpanel.in .lz2-wm-us{animation:lzSealDraw .5s var(--e) .96s both}
  .js .s-lifestyle-zone .lz2-wmpanel.in .lz2-wm-seal{animation:lzSealDraw .6s var(--e) 1.06s both}
  @media(prefers-reduced-motion:reduce){.js .s-lifestyle-zone .lz2-word{opacity:1;animation:none;filter:none;transform:none}.js .s-lifestyle-zone .lz2-wm-us,.js .s-lifestyle-zone .lz2-wm-seal{transform:scaleX(1);animation:none}}
.s-lifestyle-zone .lz2-wm{position:absolute;inset:0;z-index:7;direction:ltr;pointer-events:none;
  font-family:'HelvPDF','Helvetica Neue',Arial,sans-serif;font-weight:700;color:var(--paper);
  font-size:7.1cqw;line-height:1;letter-spacing:-.01em}
.s-lifestyle-zone .lz2-wm span{position:absolute;left:33.2%;display:block;white-space:nowrap}
.s-lifestyle-zone .lz2-wm .lz2-l1{top:50.3%}  /* life — PDF cap-top 52% */
.s-lifestyle-zone .lz2-wm .lz2-l2{top:62.4%}  /* style — PDF cap-top 64% */
.s-lifestyle-zone .lz2-wm .lz2-l3{top:74.1%}  /* zone — PDF cap-top 78% */
.s-lifestyle-zone .lz2-us{opacity:.92}

/* ── ghost α watermark bleeding over the top-right (extracted PDF α vector) ── */
.s-lifestyle-zone .lz2-alpha{position:absolute;right:-1%;top:7%;width:27%;height:auto;z-index:5;
  color:#eaeaea;opacity:.52;pointer-events:none;mix-blend-mode:soft-light}
.s-lifestyle-zone .lz2-alpha svg{width:100%;height:auto;display:block}

/* RONIT NOTE — wordmark lines rise as a group on reveal */
.js .s-lifestyle-zone [data-rv].lz2-wm{opacity:0;transform:translateY(6%)}
.js .s-lifestyle-zone [data-rv].lz2-wm.in{opacity:1;transform:none;transition:opacity .8s var(--e) .15s,transform .9s var(--e) .15s}

.lz2-photos{display:contents}   /* desktop: transparent — the 4 photo figures stay absolutely positioned in the stage */
.s-lifestyle-zone .lz2-head{display:contents}   /* desktop: transparent wrapper — wordmark panel keeps its absolute placement (≥769px byte-identical) */
.s-lifestyle-zone .lz2-eyebrow{display:none}   /* mobile-only eyebrow — hidden on desktop */
@media(max-width:768px){
  /* ── #wellness mobile: eyebrow → wordmark heading → 4 photos 2-col grid → amenity panel — all on system tokens ── */
  #wellness.sec{min-height:auto;height:auto;padding:0;display:block}
  .s-lifestyle-zone{position:relative;width:100%;aspect-ratio:auto;min-height:auto;height:auto;container-type:normal;overflow:visible;
    display:flex;flex-direction:column;background:var(--ink);direction:ltr;
    padding:calc(var(--hdr-h) + clamp(40px,10vw,60px)) clamp(20px,5.5vw,28px) clamp(52px,13vw,76px);
    gap:clamp(38px,9.5vw,56px)}
  /* hide filler blocks + ghost alpha */
  .s-lifestyle-zone .lz2-fill,.s-lifestyle-zone .lz2-alpha{display:none}
  /* head group: eyebrow + wordmark as a tight pair at the top */
  .s-lifestyle-zone .lz2-head{display:flex;flex-direction:column;align-items:center;
    order:1;gap:clamp(14px,3.5vw,22px)}   /* Omri: title bigger + centered on mobile */
  .s-lifestyle-zone .lz2-eyebrow{display:block;margin:0;direction:rtl;
    font-family:var(--he);font-weight:600;font-size:.72rem;letter-spacing:.1em;color:rgba(255,255,255,.72)}
  /* "life style zone" wordmark — LIVE text (shared markup). Panel becomes its own size-container with the desktop panel's aspect ratio, so the same %/cqw layout reproduces at mobile scale. Section bg is already var(--ink), so the tone-on-tone α ghost overflows seamlessly. */
  .s-lifestyle-zone .lz2-wmpanel{position:relative;left:auto;top:auto;width:100%;max-width:350px;aspect-ratio:63/80;height:auto;margin:0 auto;background:transparent;container-type:size}
  .s-lifestyle-zone .lz2-word{font-size:26.2cqw;left:0;right:0;width:100%;text-align:center}   /* center the words on mobile */
  .s-lifestyle-zone .lz2-wm-us{left:52%;width:26%}      /* underscore — centered after 'life' */
  .s-lifestyle-zone .lz2-wm-seal{left:28%;width:44%}    /* underline — centered under 'zone' (left/width only, keeps scaleX draw) */
  .s-lifestyle-zone .lz2-wm-ghost{left:50%;right:auto;transform:translateX(-50%);width:106%}   /* α ghost centered behind */
  /* 4 lifestyle photos → real 2-col grid (wrapped in .lz2-photos) */
  .s-lifestyle-zone .lz2-photos{order:2;display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2.6vw,14px);margin-top:0}
  .s-lifestyle-zone .lz2-ph{position:relative;left:auto!important;top:auto!important;width:auto!important;height:auto!important;margin:0!important;aspect-ratio:1;border-radius:3px;overflow:hidden}
  .s-lifestyle-zone .lz2-ph img{width:100%;height:100%;object-fit:cover}
  /* amenity icon panel — full-width, aspect-locked so the 10 %-positioned icons stay aligned over the base image */
  .s-lifestyle-zone .lz2-amen{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:0.5353;order:3;margin-top:0;background:#fff;border-radius:3px;overflow:hidden}
  .s-lifestyle-zone .lz2-amen > *{transform:none}   /* mobile thumbnail is in flow (not under the fixed header) — no shift needed */
  .s-lifestyle-zone .lz2-amen-img{width:100%;height:100%;object-fit:cover}
  .s-lifestyle-zone .lz2-lbl{font-size:2.4vw}
}

/* === location-map === */
/* ═══════════════ S7 · location-map (MΛP) — 16:9 cqw stage, every element placed by exact % from the PDF (page 7) ═══════════════ */
/* slide sits BELOW the fixed nav, centered in the rest — same pattern as #alef (urban) */
#location.sec{padding:0;height:100svh;min-height:100svh;display:flex;align-items:center;justify-content:center;background:var(--ink);overflow:hidden}   /*@fb one viewport, no internal scroll*/
/* letterboxed 16:9 stage; container so every child scales to the stage width (cqw), not the viewport */
.s-location-map{position:relative;width:100vw;aspect-ratio:16/9;background:var(--paper);overflow:hidden;isolation:isolate;container-type:size}   /*@fb full-bleed: white map area →right edge (no side black bar)*/

/* --- map plate: fills x[0–76.68%], full height (company logos removed per client note) --- */
.s-location-map .lm-plate{position:absolute;left:0;top:0;width:76.68%;height:100%;overflow:hidden;background:var(--ink);z-index:1}
.s-location-map .lm-plate img{width:100%;height:100%;object-fit:cover;object-position:left center;display:block;
  transform:scale(1.03);transition:transform 1.2s var(--e),opacity 1.1s var(--e)}
.s-location-map .lm-plate.in img,.s-location-map .lm-plate.is-in img,.s-location-map .lm-plate.is-visible img{transform:scale(1)}

/* --- white right rail: x[76.68%–100%] --- */
.s-location-map .lm-rail{position:absolute;right:0;top:0;width:23.32%;height:100%;background:var(--paper);z-index:2}

/* --- giant vertical MΛP wordmark (extracted PDF vectors, angular Λ for A) — x[79.01–86.20%] y[35.83–72.50%] --- */
.s-location-map .lm-wm{position:absolute;left:79.01%;top:35.83%;width:7.19%;height:36.67%;z-index:4;color:#252423;
  transition:opacity 1s var(--e) .15s,transform 1s var(--e) .15s}
.s-location-map .lm-wm img{width:100%;height:100%;display:block}
.s-location-map .lm-wm[data-rv]{opacity:0;transform:translateY(3%)}
.s-location-map .lm-wm[data-rv].in,.s-location-map .lm-wm[data-rv].is-in,.s-location-map .lm-wm[data-rv].is-visible{opacity:1;transform:none}

/* --- thin vertical rule: x≈87.72%, y[23.37–72.47%] --- */
.s-location-map .lm-rule{position:absolute;left:87.72%;top:23.37%;width:.085%;min-width:1px;height:49.10%;background:#252423;z-index:3;
  transform-origin:top center;transform:scaleY(0);transition:transform 1s var(--e) .25s}
.s-location-map .lm-rule[data-rv].in,.s-location-map .lm-rule[data-rv].is-in,.s-location-map .lm-rule[data-rv].is-visible{transform:scaleY(1)}

/* --- justified RTL accessibility body — x[79.06–96.56%] y top 76.10% --- */
.s-location-map .lm-body{position:absolute;right:1.4%;top:76.10%;width:17.50%;z-index:4;direction:rtl;  /* shifted right from PDF 3.44%: the +20% (p120r) widened it to ~21% & it spilled left onto the map (boundary 76.68%); right:1.4% keeps its left edge inside the white rail */
  font-family:var(--he);font-weight:700;color:#100e0d;
  font-size:.885cqw;line-height:1.2167;text-align:justify;text-align-last:right}  /* leading 1.46 pre-divided by 1.2 → after .p120r scale(1.2) effective line spacing = PDF, glyphs +20% */
.s-location-map .lm-body bdi{font-family:var(--he)}

/* mobile-only editorial heading group — hidden on desktop (keeps ≥769px byte-identical) */
.s-location-map .lm-head{display:none}

/* ═══ LOCATION · desktop FLOW rebuild (2026-07-20) ═══
   Fill the viewport exactly — map plate (cover, left 76.68%) + white rail (right
   23.32%) with the vertical MΛP wordmark, rule & body. No 16:9 lock, so no
   letterbox/side-crop at any desktop aspect. >=881px only; the 769-880 legacy
   stack and the <=768 mobile stack are untouched. */
@media(min-width:881px){
  #location.sec{padding:0;height:100svh;min-height:100svh;display:block;overflow:hidden;background:var(--ink);scroll-snap-align:start}
  .s-location-map{position:relative;width:100%;height:100svh;aspect-ratio:auto;transform:none;overflow:hidden}
  .s-location-map .lm-wm img{object-fit:contain}   /* keep the vertical wordmark undistorted at any aspect */
}

/* ═══════════════ responsive — desktop ≥881px keeps the cqw stage (unchanged) ═══════════════ */

/* mobile (≤768px): rebuilt as one editorial block — eyebrow → heading → hairline → map → body, all on system tokens */
@media(max-width:768px){
  #location.sec{min-height:auto;height:auto;padding:0;overflow:visible;background:var(--ink)}
  .s-location-map{
    width:100%;height:auto;aspect-ratio:auto;container-type:normal;overflow:visible;background:var(--ink);
    display:flex;flex-direction:column;
    padding:calc(var(--hdr-h) + clamp(40px,10vw,60px)) clamp(20px,5.5vw,28px) clamp(52px,13vw,76px);
    gap:clamp(38px,9.5vw,56px)}

  /* heading group: eyebrow → heading → hairline, right-aligned RTL */
  .s-location-map .lm-head{display:flex;flex-direction:column;align-items:flex-end;text-align:right;
    direction:rtl;gap:clamp(14px,3.5vw,22px);order:1;margin:0}
  .s-location-map .lm-eyebrow{font-family:var(--he);font-weight:600;font-size:.72rem;
    letter-spacing:.1em;color:rgba(255,255,255,.72);text-transform:none}
  .s-location-map .lm-title{font-family:var(--he);font-weight:600;
    font-size:clamp(1.6rem,6.8vw,2.3rem);line-height:1.12;letter-spacing:-.015em;
    color:#fff;margin:0}
  /* brand hairline under the heading, right-aligned ~60px */
  .s-location-map .lm-head::after{content:"";display:block;width:60px;height:1px;
    background:rgba(255,255,255,.18);margin-top:clamp(4px,1.5vw,8px)}

  /* map plate: full-bleed banner, object-fit cover, top scrim so the dark bg meets it cleanly */
  .s-location-map .lm-plate{position:relative;order:2;margin:0;
    width:100%;height:auto;aspect-ratio:15/11;overflow:hidden;background:var(--ink2);
    border-radius:4px;border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 50px -28px rgba(0,0,0,.7)}   /* aspect = the map's exact 2400×1760 (=15/11) → cover shows the FULL map, no crop */
  .s-location-map .lm-plate img{position:static;width:100%;height:100%;aspect-ratio:auto;
    object-fit:cover;object-position:center;transform:none}

  /* hide desktop-only chrome on mobile */
  .s-location-map .lm-rail{display:none}
  .s-location-map .lm-wm{display:none}
  .s-location-map .lm-rule{display:none}

  /* body: RTL ragged (no justify), system body type, muted on dark, capped measure, right-aligned */
  .s-location-map .lm-body{position:static;order:3;right:auto;top:auto;width:100%;
    margin:0;align-self:stretch;direction:rtl;
    font-family:var(--he);font-weight:400;color:rgba(255,255,255,.72);
    font-size:clamp(1.02rem,4.2vw,1.14rem);line-height:1.62;
    text-align:right;text-align-last:right}   /* Omri: paragraph on the RIGHT (was flex-end=left) */
  .s-location-map .lm-body .p120r{transform:none}
}

/* legacy 880px stack (desktop tablet range 769–880) — keep behaviour for that band only */
@media(min-width:769px) and (max-width:880px){
  #location.sec{min-height:auto;padding-bottom:6vh}
  .s-location-map{width:100%;height:auto;aspect-ratio:auto;container-type:normal;overflow:visible;background:var(--paper)}
  .s-location-map .lm-plate{position:relative;width:100%;height:auto;aspect-ratio:1107/780}
  .s-location-map .lm-plate img{position:relative;height:auto;aspect-ratio:1107/780;object-position:center}
  .s-location-map .lm-rail{position:relative;width:100%;height:auto;padding:clamp(2rem,6vh,3.5rem) var(--pad) clamp(2rem,6vh,3.5rem);
    display:flex;flex-direction:column;align-items:center;gap:clamp(1.4rem,4vh,2.4rem)}
  .s-location-map .lm-wm{display:none}
  .s-location-map .lm-rule{display:none}
  .s-location-map .lm-body{position:relative;right:auto;top:auto;width:min(46ch,90%);font-size:clamp(.82rem,3.4vw,1rem);text-align-last:center}
}

/* === design (PDF p8) — 16:9 cqw stage, PDF-parity === */
#design.sec{padding:0;height:100svh;min-height:100svh;display:flex;align-items:center;justify-content:center;background:var(--ink);overflow:hidden}   /*@fb one viewport, no internal scroll*/
.s-design{position:relative;width:100vw;aspect-ratio:16/9;background:var(--ink);overflow:hidden;isolation:isolate;container-type:size;transform:translateY(35px)}   /*@fb full-bleed + nudged down 35px (Omri: content lower, image bottom crops clean)*/
/* background photo fills the stage */
.s-design__bg{position:absolute;inset:0;z-index:0}
.s-design__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.s-design.in .s-design__bg img,.in .s-design__bg img{transform:scale(1)}
/* DESIGN wordmarks (right column) — extracted PDF vector */
.s-design__wm{position:absolute;z-index:2;left:66.6%;width:26.8%;height:auto;pointer-events:none;opacity:.4;display:block}   /* hollow DESIGN wordmarks down the RIGHT edge (PDF p7, x66.6%), evenly ~25% apart; the solid white one is dropped */
.s-design__wm--g0{top:-6.8%}
.s-design__wm--g1{top:20.3%}
.s-design__wm--g2{top:45.1%}
.s-design__wm--g3{top:70.0%}
.s-design__wm--g4{top:94.8%}
/* staggered vertical reveal of the hollow DESIGN stack (Omri) */
.s-design__wms{position:absolute;inset:0;z-index:2;pointer-events:none}
@keyframes dwmRise{from{opacity:0;transform:translateY(58px)}to{opacity:.4;transform:none}}
.js #design .s-design__wms[data-rv]{opacity:1;transform:none;transition:none}   /* wrapper itself stays put; only the words animate */
.js #design .s-design__wm{opacity:0;transform:translateY(58px);will-change:transform,opacity}
.js #design .s-design__wms.in .s-design__wm{animation:dwmRise .8s var(--e) both}
.js #design .s-design__wms.in .s-design__wm--g0{animation-delay:.1s}
.js #design .s-design__wms.in .s-design__wm--g1{animation-delay:.24s}
.js #design .s-design__wms.in .s-design__wm--g2{animation-delay:.38s}
.js #design .s-design__wms.in .s-design__wm--g3{animation-delay:.52s}
.js #design .s-design__wms.in .s-design__wm--g4{animation-delay:.66s}
@media(prefers-reduced-motion:reduce){.js #design .s-design__wm{opacity:.4!important;animation:none!important;transform:none!important}}
/* white editorial panel — top-left */
.s-design__panel{display:none}   /* Omri: drop the white panel — text sits white directly on the image */
.s-design__copy{position:absolute;inset:0;z-index:4}
/* readability scrim behind the top-left copy (subtle, only where the text sits) */
.s-design__copy::before{content:"";position:absolute;left:0;top:0;width:52%;height:44%;z-index:-1;pointer-events:none;background:linear-gradient(105deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.34) 46%,rgba(0,0,0,0) 78%)}
.s-design__body{position:absolute;top:10.9%;left:6.15%;width:36.95%;text-align:justify;direction:rtl;
  font-family:var(--he);font-weight:400;color:#fff;font-size:.91cqw;line-height:1.31;text-shadow:0 1px 10px rgba(0,0,0,.5)}  /* Omri: white on image (was dark on white panel); 5 lines AlmoniNeueDL Regular */
.s-design__body bdi{font-family:inherit;font-weight:400}
.s-design__rule{position:absolute;top:24.7%;left:0;width:43.08%;height:.14cqw;background:rgba(255,255,255,.6)}  /* white hairline on the image */
.s-design__headline{position:absolute;top:26.9%;left:5.68%;white-space:nowrap;text-align:left;direction:ltr;
  font-family:var(--display);font-weight:700;color:#fff;font-size:2.56cqw;letter-spacing:-.018em;line-height:1;text-shadow:0 2px 16px rgba(0,0,0,.55)}
.s-design__headline .em{font-weight:700}
/* #design entrance (Omri): paragraph slides in from LEFT → rule draws itself → english headline word-reveal (SplitText-style) */
@keyframes dsSlideL{from{opacity:0;transform:translateX(-48px)}to{opacity:1;transform:none}}
@keyframes dsWordUp{from{opacity:0;transform:translateY(22px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.js #design .s-design__copy[data-rv]{opacity:1!important;transform:none!important;transition:none}
.js #design .s-design__body{opacity:0}
.js #design .s-design__rule{transform:scaleX(0);transform-origin:left center}
.js #design .s-design__headline .dsw{display:inline-block;opacity:0;will-change:transform,opacity,filter}
.js #design .s-design__copy.in .s-design__body{animation:dsSlideL .85s var(--e) .12s both}
.js #design .s-design__copy.in .s-design__rule{animation:uRuleDraw .68s var(--e) .82s both}
.js #design .s-design__copy.in .s-design__headline .dsw{animation:dsWordUp .55s var(--e) both;animation-delay:calc(1.18s + var(--wi,0) * .1s)}
@media(prefers-reduced-motion:reduce){.js #design .s-design__body,.js #design .s-design__headline .dsw{opacity:1!important;animation:none!important;transform:none!important;filter:none!important}.js #design .s-design__rule{transform:scaleX(1);animation:none}}

/* ═══ DESIGN · desktop FLOW rebuild (2026-07-20) ═══
   Fill the viewport exactly — kitchen photo (cover) + %-placed live copy (left) +
   SVG DESIGN wordmarks (right). No fixed-aspect baked image, so no 16:9 lock, no
   letterbox/side-crop. >=769px only; <=768 mobile stack untouched. */
@media(min-width:769px){
  #design.sec{padding:0;height:100svh;min-height:100svh;display:block;overflow:hidden;background:var(--ink);scroll-snap-align:start}
  .s-design{position:relative;width:100%;height:100svh;aspect-ratio:auto;overflow:hidden}   /* keeps base transform:translateY(35px) for header clearance */
}
@media(max-width:768px){
  /* ── #design mobile (design-system rebuild): full-bleed kitchen banner → eyebrow → headline → hairline → body. Light text on the dark section bg; ghost wordmarks + white panel dropped. ── */
  #design.sec{min-height:auto;height:auto;padding:0;display:block;overflow:visible;background:var(--ink)}
  .s-design{position:relative;width:100%;aspect-ratio:auto;min-height:auto;height:auto;container-type:normal;overflow:visible;display:flex;flex-direction:column;background:var(--ink)}
  /* baked DESIGN watermark/ghosts are part of the bg composite — drop the live svg wordmarks for a clean editorial stack */
  .s-design__wm,.s-design__wms{display:none}
  /* bg composite → full-bleed banner. Crop to the clean KITCHEN photo only (bottom band) so the baked-in DESIGN wordmark + duplicate paragraph are out of frame — the live eyebrow/headline/body carry the text below. */
  .s-design__bg{position:relative;inset:auto;order:1;width:auto;margin-inline:calc(50% - 50vw);height:auto;aspect-ratio:2/1;overflow:hidden;background:url('assets/web/design-mobile-banner.png') center/cover no-repeat,var(--ink)}
  /* hide the desktop baked-text composite img on mobile — the clean kitchen crop is painted as the frame bg */
  .s-design__bg img{display:none}
  /* drop the white panel — section bg is dark, text inverts to light */
  .s-design__panel{display:none}
  /* copy stack below the banner — shared spacing tokens */
  .s-design__copy{position:relative;inset:auto;order:2;display:flex;flex-direction:column;align-items:flex-end;gap:clamp(14px,3.5vw,22px);padding:clamp(40px,10vw,60px) clamp(20px,5.5vw,28px) clamp(52px,13vw,76px)}
  .s-design__headline{position:static;inset:auto;order:1;white-space:normal;text-align:right;direction:ltr;color:#fff;font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,6.8vw,2.3rem);line-height:1.12;letter-spacing:-.015em;margin:0;align-self:flex-end}
  .s-design__headline .em{font-weight:700}
  /* hairline rule — thin, right-aligned, brand width */
  .s-design__rule{position:static;inset:auto;order:2;width:60px;height:1px;background:rgba(255,255,255,.18);margin:clamp(6px,1.5vw,10px) 0;align-self:flex-end;transform:none!important}
  /* body copy */
  .s-design__body{position:static;inset:auto;width:auto;order:3;text-align:right;direction:rtl;color:rgba(255,255,255,.72);font-family:var(--he);font-weight:400;font-size:clamp(1.02rem,4.2vw,1.14rem);line-height:1.62;letter-spacing:0;transform:none!important}
  .s-design__body bdi{font-weight:400}
}

/* === tech-spec (מפרט טכני · PDF p9) — 16:9 cqw stage, every element % from the PDF === */
#apartments.sec{position:relative;padding:var(--hdr-h) 0 0;min-height:100svh;display:flex;align-items:center;justify-content:center;background:var(--paper)}   /* section bg WHITE so it blends seamlessly with the white side panels (.s-tech-spec__panel--l/r sit at the stage edges) → white reads full-viewport-width, dark image center stays via the stage. Matches PDF p8 (white sides, dark center) */
#apartments.sec::after{content:"";position:absolute;top:0;bottom:0;right:0;width:calc((100vw - min(100vw, (100svh - var(--hdr-h)) * 16 / 9)) / 2 + 2px);background:#111110;z-index:0;pointer-events:none}   /* Omri: paint the RIGHT side-gap black so the dark stage reads full-bleed to the right screen edge (the left gap stays white to match the spec panel) */
.s-tech-spec{position:relative;z-index:1;width:min(100vw, calc((100svh - var(--hdr-h)) * 16 / 9));aspect-ratio:16/9;background:#111110;overflow:hidden;isolation:isolate;container-type:size;direction:rtl}   /* stage 16:9 below header; z-index:1 keeps it above the right-gap ::after */
/* white side panels (PDF: left 0–39.17%, right 86.98–100%) */
.s-tech-spec__panel{position:absolute;top:0;bottom:0;background:#fff;z-index:1}
.s-tech-spec__panel--l{left:0;width:39.17%}
.s-tech-spec__panel--r{display:none}
/* brand α — extracted PDF vector, black, top-left (x3.52% y5.82%, w4.08%) */
.s-tech-spec__alpha{position:absolute;left:3.52%;top:5.82%;width:4.08%;height:auto;z-index:6}
.s-tech-spec__alpha img{width:100%;height:auto;display:block}
/* horizontal rule (PDF y16.76%) — only on the dark band; two segments */
.s-tech-spec__rule{position:absolute;top:16.76%;height:.18%;background:#fff;z-index:4}
.s-tech-spec__rule--mid{right:39.84%;width:17.09%}
.s-tech-spec__rule--side{right:13.02%;width:21.04%}
/* ---- SPEC TEXT (dark, right-aligned at x36.5%, on the white left panel) ---- */
.s-tech-spec__spec{position:absolute;inset:0;z-index:3;text-align:right;direction:rtl;color:#111110}
.ts-block{position:absolute;right:63.5%;width:28.5%}
.ts-spec-title{position:absolute;right:63.5%;top:.4%;width:28.5%;margin:0;font-family:var(--he);font-weight:700;font-size:1.72cqw;color:#111110;text-align:right;letter-spacing:-.01em;line-height:1;padding-bottom:.55cqw;border-bottom:1px solid rgba(17,17,16,.18)}   /* Omri: section title above the spec blocks */
.ts-block__head{font-family:var(--he);font-weight:700;color:#111110;font-size:1.95cqw;line-height:1;margin:0 0 .4cqw}  /* enlarged ~+26% per Omri (was 1.55cqw) */
.ts-list{list-style:none;margin:0;padding:0}
.ts-list li{font-family:var(--he);font-weight:700;color:#111110;font-size:1.07cqw;line-height:1.12;white-space:nowrap}  /* glyphs ~+30% (was .82cqw); line-height tightened from 1.43 to fit one screen */
.ts-list li .b{font-style:normal;margin-inline-start:.28em}
.ts-block--building{top:4.4%}
.ts-block--apt{top:31.5%}
.ts-block--kitchen{top:60.7%}
.ts-block--finish{top:75.0%}
/* ---- CENTER PHOTOS (x43.12–60.21%, exact clip-rects) ---- */
.s-tech-spec__photo{position:absolute;overflow:hidden;background:#0a0a0a;z-index:3}
.s-tech-spec__photo img{width:100%;height:100%;object-fit:cover;display:block}
.ts-ph-vanity {left:49%;top:0%;     width:17.09%;height:10.56%}
.ts-ph-vanity img{object-position:center 30%}
.ts-ph-shower {left:49%;top:23.24%; width:17.09%;height:53.70%}
.ts-ph-cook   {left:49%;top:89.63%; width:17.09%;height:10.37%}
.ts-ph-cook img{object-position:center 35%}
/* ---- PLANS RAIL (replaces the 4 badges): vertical-scroll list of 13 plan buttons + up/down arrows; click opens the floor plan in a lightbox. Same look as the old badges — white box, black text, same font ---- */
.ts-plans{position:absolute;left:82%;width:17.12%;top:19%;height:64%;z-index:5;direction:rtl;display:flex;flex-direction:column;gap:.8cqh}
.ts-plans__arrow{flex:0 0 auto;height:3cqh;border:0;background:transparent;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity .25s var(--e),transform .25s var(--e)}
.ts-plans__arrow svg{width:2cqw;height:auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ts-plans__arrow:hover:not(:disabled){transform:scale(1.18)}
.ts-plans__arrow:disabled{opacity:.22;cursor:default}
.ts-plans__arrow:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ts-plans__vp{flex:1 1 auto;overflow:hidden;position:relative}
.ts-plans__track{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;gap:1.1cqh;transition:transform .45s var(--e)}
.ts-plan{flex:0 0 auto;height:11.5cqh;background:#fff;color:#111110;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25cqh;font-family:var(--he);text-align:center;padding:0 .5cqw;transition:transform .28s var(--e),box-shadow .28s var(--e)}
.ts-plan__rooms{font-weight:700;font-size:1.46cqw;line-height:1.05;white-space:nowrap}   /* enlarged (Omri) */
.ts-plan__model{font-weight:400;font-size:1.18cqw;line-height:1.05;color:#3a3a3a;white-space:nowrap;direction:rtl}  /* "בניין G-H" — Hebrew label + English building letters render RTL; enlarged (Omri) */
.ts-plan:hover{transform:scale(1.04);box-shadow:0 10px 26px -12px rgba(0,0,0,.6);z-index:1}
.ts-plan:active{transform:scale(.99)}
.ts-plan:focus-visible{outline:2px solid #111;outline-offset:-3px}
/* lightbox — full floor plan on click */
.ts-lb{position:fixed;inset:0;z-index:200;background:rgba(8,8,8,.94);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s var(--e),visibility .3s}
.ts-lb.is-open{opacity:1;visibility:visible}
.ts-lb__img{max-width:92vw;max-height:86vh;object-fit:contain;background:#fff;box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.ts-lb__close{position:absolute;top:3vh;left:3vw;width:48px;height:48px;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:rgba(0,0,0,.3);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .25s var(--e),color .25s var(--e),transform .3s var(--e)}
.ts-lb__close:hover{background:#fff;color:#111;transform:rotate(90deg)}
.ts-lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(0,0,0,.3);color:#fff;font-size:30px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .25s var(--e),color .25s var(--e)}
.ts-lb__nav svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}   /* SVG chevrons (not ›/‹ text — those bidi-mirror in RTL and point the wrong way) */
.ts-lb__nav:hover{background:#fff;color:#111}
.ts-lb__prev{right:3vw}.ts-lb__next{left:3vw}
.ts-lb__cap{position:absolute;bottom:2.6vh;left:0;right:0;text-align:center;color:#fff;font-family:var(--he);font-weight:500;font-size:clamp(.95rem,1.5vw,1.2rem);direction:rtl}
.ts-lb__close:focus-visible,.ts-lb__nav:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* (mobile plans-rail reflow consolidated into the #apartments mobile block below) */
/* ---- LEGAL (bottom-left, dark on white panel, tiny — RONIT note) ---- */
.s-tech-spec__legal{position:absolute;right:62%;top:93%;width:36%;z-index:4;direction:rtl;text-align:justify;font-family:var(--he-narrow);font-weight:300;font-size:.5cqw;line-height:1.5;color:#939392}  /* widened 22%→36% (fills the white panel) so the dense disclaimer spreads over more width = fewer lines, more readable */
/* reveal */
.s-tech-spec [data-rv]{opacity:0;transform:translateY(1.4cqw);transition:opacity .6s var(--e),transform .6s var(--e)}
.s-tech-spec [data-rv].in,.s-tech-spec [data-rv].is-in,.s-tech-spec [data-rv].is-visible{opacity:1;transform:none}
.s-tech-spec .s-tech-spec__badge[data-rv]{transform:translateX(-2cqw)}
.s-tech-spec .s-tech-spec__badge[data-rv].in,.s-tech-spec .s-tech-spec__badge[data-rv].is-in,.s-tech-spec .s-tech-spec__badge[data-rv].is-visible{transform:none}
/* mobile: let the slide stack readably — flow tall, NOT a 16:9 stage */
@media(max-width:768px){
  /* ── #apartments mobile: α → 4 spec blocks → 3 photos → 13 plan buttons → legal ── */
  /* ── #apartments mobile (design-system rebuild): α brand + eyebrow → 4 spec blocks → 3 photos → plan grid → legal. Long section → clean, consistent editorial rhythm; light text on dark. Plan-rail/lightbox JS & .ts-plan untouched. ── */
  /* the collapse was caused by #apartments.sec keeping display:flex + align/justify-center while aspect-ratio went auto → the single stage child got centered to its (zero-ish) intrinsic height. Force block flow. */
  #apartments.sec{min-height:auto;height:auto;padding:0;display:block;background:var(--ink)}
  .s-tech-spec{position:relative;width:100%;aspect-ratio:auto;min-height:auto;height:auto;container-type:normal;overflow:visible;display:flex;flex-direction:column;background:var(--ink);direction:rtl;padding:calc(var(--hdr-h) + clamp(40px,10vw,60px)) clamp(20px,5.5vw,28px) clamp(52px,13vw,76px);gap:clamp(38px,9.5vw,56px)}
  .s-tech-spec__panel--l,.s-tech-spec__panel--r,.s-tech-spec__rule{display:none}
  /* α brand mark — small, top-right */
  .s-tech-spec__alpha{position:relative;left:auto;top:auto;order:1;display:block;width:clamp(34px,10vw,46px);height:auto;margin:0;z-index:1}
  /* spec container — un-absolute, block flow; vertical rhythm between the 4 blocks */
  .s-tech-spec__spec{position:relative!important;inset:auto!important;order:2;display:flex;flex-direction:column;gap:clamp(16px,4vw,24px);width:auto;text-align:right;color:#fff}
  .ts-spec-title{display:none}   /* desktop-only heading — mobile keeps its own accordion layout */
  /* 4 spec blocks — un-absolute, full width, light text */
  .ts-block{position:relative!important;right:auto!important;left:auto!important;top:auto!important;width:auto!important;margin:0}
  /* spec blocks = ACCORDION on mobile: head is the toggle, list collapses (like bat-galim) */
  .ts-block__head{font-family:var(--he);font-weight:600;font-size:clamp(1.35rem,5.6vw,1.75rem);line-height:1.2;letter-spacing:-.015em;color:#fff;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.6em;padding-bottom:clamp(12px,3vw,16px);border-bottom:1px solid rgba(255,255,255,.16);-webkit-tap-highlight-color:transparent}
  .ts-block__head::after{content:"+";font-weight:300;font-size:.95em;color:rgba(255,255,255,.55);line-height:1;transition:transform .35s var(--e)}
  .ts-block.is-open .ts-block__head::after{transform:rotate(45deg)}   /* + → × when open */
  .ts-list{display:flex;flex-direction:column;gap:.55em;max-height:0;overflow:hidden;opacity:0;padding-top:0;transition:max-height .45s var(--e),opacity .35s var(--e),padding-top .45s var(--e)}
  .ts-block.is-open .ts-list{max-height:820px;opacity:1;padding-top:clamp(14px,3.5vw,20px)}
  .ts-list li{font-family:var(--he);font-weight:400;font-size:clamp(1.02rem,4.2vw,1.14rem);line-height:1.5;white-space:normal!important;color:rgba(255,255,255,.72);margin:0;padding-right:1.2em;position:relative}
  .ts-list li .b{position:absolute;right:0;top:0;margin:0;color:rgba(255,255,255,.4);font-weight:600}
  /* 3 photos — full-bleed banners, consistent aspect, clean radius */
  .s-tech-spec__photo{position:relative!important;left:auto!important;top:auto!important;order:3;width:auto!important;height:auto!important;margin-inline:calc(50% - 50vw);aspect-ratio:16/10;border-radius:0;overflow:hidden}
  .s-tech-spec__photo img{width:100%;height:100%;object-fit:cover}
  /* plans rail → horizontal SWIPE row of buttons (full-bleed, snap) */
  .ts-plans{position:static!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;order:4;display:block;margin:0 calc(50% - 50vw);padding:0;z-index:auto}
  .ts-plans__arrow{display:none}
  .ts-plans__vp{position:static!important;overflow-x:auto!important;overflow-y:hidden!important;height:auto!important;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none}
  .ts-plans__vp::-webkit-scrollbar{display:none}
  .ts-plans__track{position:static!important;transform:none!important;display:flex!important;flex-direction:row;flex-wrap:nowrap;gap:clamp(10px,3vw,14px);padding:0 clamp(20px,5.5vw,28px)}   /* side padding → first/last card inset, not flush to screen edge */
  /* the JS triples the 15 buttons (infinite-loop rail) — on mobile show only the original 15 (clones hidden; click/lightbox keys off data-img) */
  .ts-plans__track .ts-plan:nth-child(n+16){display:none!important}
  .ts-plan{height:auto!important;flex:0 0 auto!important;width:clamp(138px,40vw,162px);scroll-snap-align:start;padding:clamp(18px,4.6vw,24px) clamp(10px,3vw,16px);gap:.45em;background:#fff;color:#111;border-radius:3px}
  .ts-plan__rooms{font-family:var(--he);font-weight:600;font-size:clamp(1rem,4vw,1.1rem);line-height:1.1;color:#111}
  .ts-plan__model{font-family:var(--he);font-weight:400;font-size:clamp(.82rem,3.2vw,.92rem);line-height:1.1;color:#6a6a6a}
  /* legal — small muted, design-system small */
  .s-tech-spec__legal{position:relative!important;left:auto!important;right:auto!important;top:auto!important;width:auto!important;order:5;margin:0;padding:0;font-family:var(--he-narrow);font-weight:300;font-size:.8rem;line-height:1.5;color:rgba(255,255,255,.5);text-align:justify}
  /* lightbox controls stay reachable */
  .ts-lb__close,.ts-lb__nav{width:42px;height:42px}
  .ts-lb__nav{font-size:24px}.ts-lb__close{font-size:22px}
}

/* === developers (S10) — 16:9 PDF-parity stage, every element placed by exact % measured from p-10 === */
#developers.sec{padding:0;height:100svh;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--ink)}   /*@fb full-bleed one viewport — top image + white panel edge-to-edge*/
/* letterboxed 16:9 stage, container so every child scales to the stage (cqw) */
.s-developers{position:relative;width:100vw;aspect-ratio:16/9;background:var(--ink);overflow:hidden;isolation:isolate;container-type:size;direction:rtl}   /*@fb full-bleed: top image + white panel edge-to-edge, no dark side bars*/

/* TOP HERO — black, ends at 44.44% */
.s-developers .dv-hero{position:absolute;left:0;top:0;width:100%;height:44.44%;background:var(--ink);z-index:1;overflow:hidden}
.s-developers .dv-photo{position:absolute;left:33.9%;top:0;width:66.1%;height:100%;overflow:hidden;z-index:1}
.s-developers .dv-photo img{width:100%;height:100%;object-fit:cover;object-position:center center;filter:grayscale(1) contrast(1.04) brightness(.97);transform:scale(1);transition:transform 9s linear}
.s-developers:hover .dv-photo img{transform:scale(1.05)}
.s-developers .dv-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,#000 0%,rgba(0,0,0,.92) 6%,rgba(0,0,0,.42) 16%,rgba(0,0,0,0) 30%);pointer-events:none}
.s-developers .dv-ghost{position:absolute;left:-1cqw;bottom:-9%;z-index:2;direction:ltr;font-family:var(--display);font-weight:700;font-size:37cqw;line-height:.8;letter-spacing:-.05em;text-transform:lowercase;color:#191919;pointer-events:none;user-select:none;white-space:nowrap}
.s-developers .dv-ghost .dv-dot{color:#26262b}
.s-developers .dv-title{position:absolute;left:7.8%;top:14.4%;z-index:3;direction:ltr;text-align:left;font-family:var(--display);font-weight:700;color:var(--paper);font-size:3.85cqw;line-height:1.18;letter-spacing:-.02em}
.s-developers .dv-title span{display:block}
.s-developers .dv-title .dv-eyebrow,.s-developers .dv-title .dv-heading-he{display:none}

/* BOTTOM PANEL — white, 44.44%..100% */
.s-developers .dv-panel{position:absolute;left:0;top:44.44%;width:100%;height:55.56%;background:var(--paper);color:var(--ink);z-index:1}
.s-developers .dv-divider{position:absolute;left:50%;top:58.1%;width:1px;height:28.7%;background:#0a0a0a;z-index:4;transform-origin:top;transform:scaleY(0);transition:transform 1.1s var(--e) .2s}
.s-developers .dv-divider.in{transform:scaleY(1)}

/* logos — exact transparent crops extracted straight from the PDF (RONIT note) */
.s-developers .dv-logo{position:absolute;z-index:5;height:auto;display:block}
.s-developers .dv-logo--amram{left:80.5%;top:50.7%;width:11.0%}
.s-developers .dv-logo--shihai{left:40.0%;top:48.9%;width:8.48%}

/* text columns — everything right-aligned within its column */
.s-developers .dv-col{position:absolute;z-index:4;direction:rtl;text-align:right}
.s-developers .dv-col--right{left:52.2%;top:56.8%;width:39.3%}
.s-developers .dv-col--left {left:7.8%; top:56.8%;width:39.0%}
.s-developers .dv-lead{font-family:var(--he);font-weight:700;color:#3a3a3a;font-size:.90cqw;line-height:1.5;margin:0}   /* Omri: same as body text — no subheading emphasis */
.s-developers .dv-sub{font-family:var(--he);font-weight:700;color:#0a0a0a;font-size:.96cqw;line-height:1.2;margin:.82cqw 0 .2cqw}
.s-developers .dv-body{font-family:var(--he);font-weight:700;color:#3a3a3a;font-size:.90cqw;line-height:1.5;margin:0}  /* size == lead so line-wrapping tracks the PDF exactly (reverted a +20% enlargement that pushed cities to 3 lines & "בקרוב" to 2) */
.s-developers .dv-col bdi{font-weight:600;color:#0a0a0a}

/* mobile fallback — stack, drop the absolute 16:9 stage */
@media(max-width:768px){
  #developers.sec{padding:0;display:block;min-height:auto;height:auto;overflow:visible}   /* reset the desktop full-bleed (height:100svh/overflow:hidden) so the mobile stacked column isn't clipped */
  /* one editorial column on the system frame */
  .s-developers{position:static;width:100%;aspect-ratio:auto;container-type:normal;overflow:visible;background:var(--paper);
    display:flex;flex-direction:column;
    padding:calc(var(--hdr-h) + clamp(40px,10vw,60px)) clamp(20px,5.5vw,28px) clamp(52px,13vw,76px)}

  /* (1) HERO — full content-width banner photo with scrim; ghost watermark contained inside */
  .s-developers .dv-hero{position:relative;height:auto;min-height:0;padding:0;order:0;
    width:100%;aspect-ratio:16/10;border-radius:3px;overflow:hidden;background:var(--ink)}
  .s-developers .dv-photo{position:absolute;inset:0;left:0;top:0;width:100%;height:100%}
  .s-developers .dv-photo img{filter:grayscale(1) contrast(1.04) brightness(.9)}
  .s-developers .dv-photo::after{background:linear-gradient(to top,rgba(0,0,0,.6),transparent 55%)}
  .s-developers .dv-ghost{left:auto;right:.04em;bottom:-.06em;font-size:34vw;color:rgba(255,255,255,.10);z-index:2}
  .s-developers .dv-ghost .dv-dot{color:rgba(255,255,255,.16)}

  /* (2) eyebrow + Hebrew heading + Latin display line — 14-22px off the photo */
  .s-developers .dv-title{position:relative;left:auto;top:auto;order:1;direction:ltr;text-align:right;
    margin-top:clamp(14px,3.5vw,22px);color:var(--ink);font-family:var(--he)}
  .s-developers .dv-title .dv-eyebrow{display:block;direction:rtl;font-family:var(--he);font-weight:600;font-size:.72rem;letter-spacing:.1em;color:#6a6a6a;margin-bottom:clamp(14px,3.5vw,22px)}
  .s-developers .dv-title .dv-heading-he{display:block;direction:rtl;font-family:var(--he);font-weight:600;font-size:clamp(1.6rem,6.8vw,2.3rem);line-height:1.12;letter-spacing:-.015em;color:#111}
  /* original English title "Building the future" — now the section heading on mobile (the invented Hebrew heading was removed) */
  .s-developers .dv-title span[dir="ltr"]{display:inline;direction:ltr;font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,6.4vw,2.1rem);line-height:1.12;letter-spacing:-.01em;text-transform:none;color:inherit}
  .s-developers .dv-title span[dir="ltr"]:first-of-type{margin-top:clamp(8px,2vw,12px)}
  .s-developers .dv-title span[dir="ltr"]:first-of-type:after{content:"\00a0"}

  /* hidden desktop scaffolding */
  .s-developers .dv-panel{display:none}
  .s-developers .dv-divider{display:none}

  /* (3) two labeled developer blocks: logo paired with its own text */
  .s-developers .dv-logo{position:relative;left:auto;top:auto;width:auto;height:auto;max-height:46px;margin:0 0 clamp(14px,3.5vw,22px) auto;object-fit:contain;object-position:right center}
  .s-developers .dv-logo--amram{order:2;margin-top:clamp(38px,9.5vw,56px)}
  .s-developers .dv-logo--shihai{order:4;display:block;width:100%;height:auto;max-height:60px;object-fit:contain;object-position:right center;box-sizing:content-box;
    margin:clamp(52px,13vw,76px) 0 clamp(14px,3.5vw,22px);padding-top:clamp(40px,10vw,54px);border-top:1px solid rgba(0,0,0,.2)}   /* enlarged + full-width divider above = clear break between the Amram block and the Shi-Hai block */

  .s-developers .dv-col{position:relative;left:auto;top:auto;width:auto;padding:0;direction:rtl;text-align:right}
  .s-developers .dv-col--right{order:3}                 /* Amram text */
  .s-developers .dv-col--left{order:5;position:relative}   /* separation now lives above the Shi-Hai logo (order:4) */

  /* (4) type & rhythm */
  .s-developers .dv-lead{font-family:var(--he);font-weight:400;font-size:clamp(1.02rem,4.2vw,1.14rem);line-height:1.62;color:#6a6a6a;margin:0 0 clamp(14px,3.5vw,22px)}
  .s-developers .dv-sub{font-family:var(--he);font-weight:600;font-size:1.2rem;line-height:1.25;color:#111;margin:clamp(22px,5.5vw,30px) 0 clamp(8px,2vw,12px)}
  .s-developers .dv-body{font-family:var(--he);font-weight:400;font-size:clamp(1.02rem,4.2vw,1.14rem);line-height:1.62;color:#6a6a6a;margin:0}
  .s-developers .dv-body[style]{margin-top:clamp(8px,2vw,12px)!important}
  .s-developers .dv-col bdi{font-weight:600;color:#111}
}
@media(prefers-reduced-motion:reduce){
  .s-developers .dv-photo img{transition:none;transform:none}
  .s-developers:hover .dv-photo img{transform:none}
  .s-developers .dv-divider{transition:none}
}

/* ═══ DEVELOPERS · desktop FLOW rebuild (2026-07-20) ═══
   Replaces the fixed 16:9 canvas with a real grid so it fills ANY desktop
   aspect ratio — no letterbox bands, no side-crop. Scoped to >=769px only;
   the mobile stack (<=768px) is fully self-contained and untouched.
   Layout: [hero band] over [white panel: 2 logos + 2 text columns + divider]. */
@media(min-width:769px){
  #developers.sec{padding:0;min-height:100svh;height:auto;display:block;overflow:visible;background:var(--ink);scroll-snap-align:start}
  /* exact PDF geometry: side margins 7.8%, two 39% columns, ~5.4% centre gap,
     black hero / white panel split at 44.44%. direction:ltr for physical grid
     placement; each text column carries its own rtl. */
  .s-developers{
    position:relative;width:100%;max-width:none;aspect-ratio:auto;container-type:normal;
    overflow:hidden;background:var(--paper);min-height:100svh;direction:ltr;
    display:grid;
    grid-template-columns:7.8% 39% 5.4% 39.3% 8.5%;   /* margin · leftCol · gap · rightCol · margin */
    grid-template-rows:clamp(300px,44svh,480px) auto 1fr;
  }

  /* white panel behind the lower two rows, full-bleed width */
  .s-developers .dv-panel{grid-column:1 / -1;grid-row:2 / 4;background:var(--paper);z-index:0;
    position:relative;display:block;width:auto;height:auto;top:auto;left:auto}

  /* ── HERO band (black) — title left @7.8%, photo right 66.1%, ghost behind ── */
  .s-developers .dv-hero{grid-column:1 / -1;grid-row:1;position:relative;direction:ltr;background:var(--ink);
    overflow:hidden;z-index:1;width:auto;height:auto;aspect-ratio:auto;padding:0}
  .s-developers .dv-photo{position:absolute;top:0;bottom:0;right:0;left:auto;width:66.1%;height:100%;aspect-ratio:auto;z-index:1}
  .s-developers .dv-photo img{width:100%;height:100%}
  .s-developers .dv-photo::after{content:"";position:absolute;inset:0;
    background:linear-gradient(to left,rgba(0,0,0,0) 30%,rgba(0,0,0,.55) 62%,rgba(0,0,0,.92) 86%,#000 100%)}
  .s-developers .dv-ghost{position:absolute;left:-1%;right:auto;bottom:-9%;z-index:0;direction:ltr;
    font-size:clamp(12rem,32vw,34rem);line-height:.8;color:#191919;white-space:nowrap;letter-spacing:-.05em}
  .s-developers .dv-title{grid-column:1 / -1;grid-row:1;position:relative;inset:auto;z-index:2;direction:ltr;text-align:left;
    align-self:center;justify-self:start;margin-left:7.8%;
    font-family:var(--display);font-weight:700;color:var(--paper);
    font-size:clamp(2.6rem,5vw,5rem);line-height:1.1;letter-spacing:-.025em}

  /* ── LOGOS — right-aligned to their column's right edge (matches the rtl text) ── */
  .s-developers .dv-logo{position:relative;inset:auto;z-index:2;height:auto;object-fit:contain;
    align-self:end;justify-self:end;margin:0 0 clamp(.9rem,1.6vw,1.4rem);padding-top:clamp(1.2rem,3.4vw,3.4rem)}
  .s-developers .dv-logo--amram{grid-column:4;grid-row:2;width:clamp(150px,11vw,224px)}
  .s-developers .dv-logo--shihai{grid-column:2;grid-row:2;width:clamp(116px,8.5vw,176px)}

  /* ── TEXT COLUMNS — fill their 39% track, rtl right-aligned ── */
  .s-developers .dv-col{position:relative;inset:auto;z-index:2;width:auto;direction:rtl;text-align:right;
    align-self:start;padding-bottom:clamp(1.8rem,3.4vw,3rem)}
  .s-developers .dv-col--right{grid-column:4;grid-row:3}
  .s-developers .dv-col--left {grid-column:2;grid-row:3}
  .s-developers .dv-lead{font-family:var(--he);font-weight:400;color:#3a3a3a;font-size:clamp(.84rem,.9vw,1rem);line-height:1.45;margin:0}
  .s-developers .dv-sub{font-family:var(--he);font-weight:700;color:#0a0a0a;font-size:clamp(.98rem,1.08vw,1.16rem);line-height:1.2;margin:clamp(.7rem,1.1vw,1.1rem) 0 .2rem}
  .s-developers .dv-body{font-family:var(--he);font-weight:400;color:#3a3a3a;font-size:clamp(.84rem,.9vw,1rem);line-height:1.45;margin:0}
  .s-developers .dv-body[style]{margin-top:.5rem!important}
  .s-developers .dv-col bdi{font-weight:600;color:#0a0a0a}
}

/* === contact === */
/* ═══ S11 · contact (white/inverted bookend) — 16:9 cqw stage; every element placed by exact % from the PDF teardown ═══ */
#contact.sec{padding:var(--hdr-h) 0 0;min-height:100svh;display:flex;align-items:center;justify-content:center;background:var(--paper);color:var(--ink)}
.s-contact{position:relative;width:min(100vw, calc((100svh - var(--hdr-h)) * 16 / 9));aspect-ratio:16/9;background:var(--paper);overflow:visible;isolation:isolate;container-type:size;direction:rtl}   /* overflow visible so the footer band can break out to full viewport width; #contact.sec clips at 100vw. Form/photo stay in the 16:9 stage (only the footer stretches, per Omri) */
.s-contact__head{display:none}

/* — RIGHT · sunset photo (PDF clip-rect: x34.90–92.03% · y11.87–79.60%) — */
.s-contact__media{position:absolute;left:34.90%;top:11.87%;width:57.13%;height:67.73%;overflow:hidden;background:var(--ink);z-index:2}
.s-contact__photo{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;transform:scale(1.04);opacity:0;transition:transform 1.1s var(--e),opacity .9s var(--e)}
.s-contact__media.in .s-contact__photo,.s-contact__media.is-in .s-contact__photo,.s-contact__media.is-visible .s-contact__photo{transform:scale(1);opacity:1}
/* huge white vertical "alfa." wordmark — EXTRACTED glyph vectors from the PDF (not a font) — placed by % of the STAGE */
.s-contact__vwm{position:absolute;left:79.03%;top:10.69%;width:19.01%;z-index:3;pointer-events:none;opacity:0;transition:opacity 1s var(--e) .25s}
.s-contact__vwm img{width:100%;height:auto;display:block}
.s-contact__vwm.in,.s-contact__vwm.is-in,.s-contact__vwm.is-visible{opacity:1}

/* — LEFT · lead form — every control absolutely placed at PDF % — */
.cf{position:absolute;inset:0;width:auto;max-width:none;margin:0;z-index:4;direction:rtl}
.cf__field{position:absolute;left:11.04%;width:18.65%;height:5.72%}
.cf__field input{width:100%;height:100%;border:1px solid var(--line-l);border-radius:6px;background:var(--paper);color:var(--ink);font-family:var(--he);font-weight:400;font-size:1.18cqw;text-align:right;padding:0 1.1cqw;transition:border-color .2s var(--e),box-shadow .25s var(--e)}
.cf__field input::placeholder{color:#3a3a3a;opacity:1}
.cf__field input:focus-visible,.cf__field input:focus{outline:none;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.cf__field.err input{border-color:#b23b3b;box-shadow:inset 0 0 0 1px #b23b3b}
.cf__field--name{top:22.92%}.cf__field--phone{top:30.73%}.cf__field--email{top:38.55%}.cf__field--msg{top:46.37%}
/* שלח — black CTA centered under fields: x15.83–23.92% · y54.91–60.00% */
.cf__submit{position:absolute;left:15.83%;top:49.32%;width:8.09%;height:5.09%;z-index:5;border:1px solid var(--ink);border-radius:6px;background:var(--ink);color:var(--paper);cursor:pointer;font-family:var(--he);font-weight:600;font-size:1.45cqw;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;transition:transform .28s var(--e),background-color .25s var(--e),color .25s var(--e),box-shadow .28s var(--e)}
.cf__submit:hover{background:#222;transform:translateY(-1px)}.cf__submit:active{transform:translateY(0)}
.cf__submit:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.cf__submit:disabled{opacity:.55;cursor:default;transform:none}
/* consent (RONIT: required) — small, tucked just under the CTA */
.cf__consent{position:absolute;left:11.04%;top:55.32%;width:19%;z-index:5;display:flex;align-items:center;gap:.4cqw;font-family:var(--he);font-weight:400;font-size:.72cqw;color:#8a8a8a;line-height:1.25}
.cf__consent input{accent-color:var(--ink);width:.95cqw;height:.95cqw;margin:0;flex:none;cursor:pointer}
.cf__consent a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.cf__consent.err{color:#b23b3b}
/* per-field error notes — pop in under the field / consent when missing or invalid */
.cf__err{position:absolute;top:100%;right:0;margin-top:.5cqh;z-index:6;font-family:var(--he);font-weight:500;font-size:.62cqw;color:#b23b3b;line-height:1.15;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(-3px);transition:opacity .22s var(--e),transform .22s var(--e)}
.cf__field.err .cf__err,.cf__consent.err .cf__err{opacity:1;transform:none}
/* inline success */
.cf__ok{position:absolute;left:11.04%;top:54.5%;width:20%;z-index:6;font-family:var(--he);font-weight:500;color:#1d6b2a;font-size:1.1cqw;line-height:1.4;background:var(--paper)}
/* phone block: icon + *3384 (right) + 3-line address (left) — target y63.60–67.51% */
.cf__phone{position:absolute;left:11.04%;top:66.8%;z-index:4;display:inline-flex;align-items:center;gap:.35cqw;color:var(--ink)}   /* left edge aligned to the field column (11.04%); nudged down from the consent checkbox */
.cf__phone-ico{width:1.25cqw;height:1.25cqw;fill:var(--ink);flex:none;transform:scaleX(-1)}
.cf__phone-num{font-family:var(--display);font-weight:700;font-size:2.35cqw;letter-spacing:-.01em;line-height:1;border-bottom:1.5px solid transparent;transition:border-color .2s var(--e)}
.cf__phone:hover .cf__phone-num{border-bottom-color:var(--ink)}
.cf__addr{position:absolute;left:auto;right:70.31%;top:66.8%;width:12%;z-index:4;font-style:normal;text-align:right;font-family:var(--he);font-weight:400;color:#222;font-size:.82cqw;line-height:1.4}   /* right edge aligned to the field column; top matched to phone, nudged down from consent */
/* legal — centered band: target y88.80–90.36% x28.65–71.30% */
.s-contact__legal{position:absolute;left:28.65%;top:88.0%;width:42.65%;z-index:4;text-align:center;font-family:'Assistant',var(--he);font-weight:400;color:#3a3a3a;font-size:.86cqw;line-height:1.5}
/* full-width black footer band: y92.31–100% — centered (per PDF) */
.s-foot{position:absolute;left:calc(50% - 50vw);top:92.31%;width:100vw;height:7.69%;z-index:5;background:#0a0a0a;color:var(--paper);display:flex;align-items:center;justify-content:center}   /* credit band (s·p·i·n) spans full viewport width, breaking out of the 16:9 stage; #contact.sec (overflow:hidden) clips it at 100vw so no h-scroll */
.s-foot__inner{display:flex;align-items:center;justify-content:center;gap:1.1cqw;direction:rtl}
.s-foot__rights{font-family:'Assistant',var(--he);font-weight:400;font-size:1.05cqw;letter-spacing:.01em;color:#e8e8e8;white-space:nowrap}
.s-foot__credit{font-family:var(--display);font-weight:700;font-size:1.05cqw;letter-spacing:.16em;color:var(--paper);text-transform:lowercase;opacity:.95;white-space:nowrap;transition:opacity .2s var(--e),transform .25s var(--e)}
.s-foot__credit:hover{opacity:1;transform:translateY(-1px)}.s-foot__credit:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.s-foot__year{font-family:'Assistant',var(--he);font-weight:400;font-size:1.05cqw;color:#e8e8e8}
.s-foot__sep{color:rgba(255,255,255,.3);font-size:1.05cqw}
.s-foot__legal{font-family:'Assistant',var(--he);font-weight:400;font-size:.92cqw;color:#bdbdbd;text-decoration:none;transition:color .25s var(--e)}
.s-foot__legal:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.s-foot__legal:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
/* responsive — stack on small screens */
@media(max-width:768px){
  #contact.sec{min-height:auto;padding:0;display:block}
  /* one editorial column on the system frame */
  .s-contact{min-height:auto;aspect-ratio:auto;height:auto;container-type:normal;overflow:visible;
    display:flex;flex-direction:column;direction:rtl;
    padding:calc(var(--hdr-h) + clamp(40px,10vw,60px)) clamp(20px,5.5vw,28px) clamp(52px,13vw,76px)}

  /* (1) eyebrow + heading */
  .s-contact__head{display:block;order:0;text-align:right;margin-bottom:clamp(38px,9.5vw,56px)}
  .s-contact__eyebrow{display:block;font-family:var(--he);font-weight:600;font-size:.72rem;letter-spacing:.1em;color:#6a6a6a;margin-bottom:clamp(14px,3.5vw,22px)}
  .s-contact__h{margin:0;font-family:var(--he);font-weight:600;font-size:clamp(1.6rem,6.8vw,2.3rem);line-height:1.12;letter-spacing:-.015em;color:#111}

  /* (2) photo — controlled aspect, 3px radius, scrim; wordmark contained on it */
  .s-contact__media{position:relative;left:auto;top:auto;width:100%;height:auto;min-height:0;aspect-ratio:4/5;margin:0;order:1;border-radius:3px;overflow:hidden}
  .s-contact__media:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 55%)}
  .s-contact__vwm{position:absolute;left:auto;right:clamp(16px,5vw,26px);top:auto;bottom:clamp(16px,5vw,26px);width:auto;height:clamp(120px,34vw,180px);z-index:3;opacity:.92}
  .s-contact__vwm img{width:auto;height:100%}

  /* (3) form — right-aligned editorial, tight field gap */
  .cf{position:relative;inset:auto;max-width:none;margin:0;padding:0;order:2;margin-top:clamp(38px,9.5vw,56px);display:flex;flex-direction:column;direction:rtl}
  .cf__field{position:relative;left:auto;top:auto;width:100%;height:auto;margin:0 0 14px;order:0}
  .cf__field input{height:54px;font-size:16px;padding:0 1.1rem;text-align:right;border-radius:3px}
  .cf__field input::placeholder{text-align:right}
  .cf__err{position:static;display:none;white-space:normal;font-size:.8rem;margin-top:.4rem;transform:none;opacity:1;text-align:right}
  .cf__field.err .cf__err,.cf__consent.err .cf__err{display:block}
  .cf__submit{position:relative;left:auto;top:auto;width:100%;min-width:0;height:54px;font-size:1.05rem;margin:clamp(6px,1.5vw,10px) 0 0;order:1;border-radius:3px}

  /* consent right under the submit */
  .cf__consent{position:relative;left:auto;top:auto;width:auto;order:2;margin:clamp(14px,3.5vw,22px) 0 0;display:flex;align-items:flex-start;gap:.5rem;text-align:right;font-family:var(--he);font-weight:400;font-size:.8rem;line-height:1.5;color:#6a6a6a}
  .cf__consent input{width:16px;height:16px;margin-top:.15rem;flex:none}
  .cf__ok{position:relative;left:auto;top:auto;width:auto;order:2;font-size:1rem;text-align:right;margin:1rem 0 0}

  /* (4) grouped contact details — phone + address, right-aligned, with hairline above */
  .cf__phone{position:relative;left:auto;top:auto;order:3;margin:clamp(38px,9.5vw,56px) 0 0;padding-top:clamp(22px,5.5vw,30px);display:inline-flex;align-self:flex-start;align-items:center;gap:.55rem}
  .cf__phone:before{content:"";position:absolute;top:0;right:0;width:60px;height:1px;background:rgba(0,0,0,.12)}
  .cf__phone-ico{width:22px;height:22px}
  .cf__phone-num{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,7vw,1.7rem);line-height:1}
  .cf__addr{position:relative;left:auto;right:auto;top:auto;width:auto;order:4;align-self:flex-start;margin:clamp(10px,2.5vw,16px) 0 0;text-align:right;font-family:var(--he);font-weight:400;font-size:.8rem;line-height:1.5;color:#6a6a6a}   /* Omri: address on the RIGHT, directly under the phone (right:auto resets the desktop right:70.31% that was shifting it off-screen) */

  /* (5) legal — small muted */
  .s-contact__legal{position:relative;left:auto;top:auto;width:auto;order:3;margin:clamp(38px,9.5vw,56px) 0 0;text-align:right;font-family:'Assistant',var(--he);font-weight:400;font-size:.8rem;line-height:1.5;color:#6a6a6a}

  /* (6) footer — full-bleed black band */
  .s-foot{position:relative;left:auto;top:auto;width:auto;height:auto;order:4;
    margin:clamp(38px,9.5vw,56px) calc(50% - 50vw) calc(0px - clamp(52px,13vw,76px));
    padding:1.4rem clamp(20px,5.5vw,28px);background:#0a0a0a}
  .s-foot__inner{flex-wrap:wrap;gap:.5rem .9rem;justify-content:center}
  .s-foot__rights,.s-foot__credit,.s-foot__year,.s-foot__sep,.s-foot__legal{font-size:.82rem}
}

/* ═══ ACCESSIBILITY BUTTON (bottom-left) ═══ */
#a11y-btn{
  position:fixed;bottom:24px;left:24px;z-index:9999;
  width:52px;height:52px;border-radius:50%;
  background:rgba(10,20,32,.95);
  border:1.5px solid #b9985b;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px rgba(0,0,0,.5);
  transition:transform .35s var(--e),background .3s;
  animation:a11y-pulse 3.5s ease-in-out infinite;
}
#a11y-btn:hover{transform:scale(1.07);background:#b9985b}
#a11y-btn svg{width:24px;height:24px;fill:#b9985b;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(185,152,91,.16)}
  50%{box-shadow:0 10px 28px rgba(0,0,0,.5),0 0 0 14px transparent}
}

/* ═══ A11Y PANEL ═══ */
#a11y-panel{
  position:fixed;bottom:92px;left:24px;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(185,152,91,.16);
  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(--e),transform .45s var(--e);
}
#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:var(--he);font-weight:400;
  font-size:.95rem;color:#fff;
}
.a11y-title-sub{
  display:block;
  font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:.65rem;color:#b9985b;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:#b9985b;border-color:#b9985b;background:rgba(185,152,91,.16)}
.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(185,152,91,.16) transparent;
}
.a11y-body::-webkit-scrollbar{width:4px}
.a11y-body::-webkit-scrollbar-thumb{background:rgba(185,152,91,.16)}
.a11y-section{margin-bottom:16px}
.a11y-section-title{
  font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:.62rem;letter-spacing:.22em;color:#b9985b;
  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:var(--he);font-size:.76rem;font-weight:300;
  color:rgba(255,255,255,.7);
  transition:background .25s,border-color .25s,color .25s;
  text-align:right;
}
.a11y-opt:hover{background:rgba(185,152,91,.16);border-color:#b9985b;color:#fff}
.a11y-opt.active{background:rgba(185,152,91,.16);border-color:#b9985b;color:#b9985b}
.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,.6);
  font-family:var(--he);font-size:.72rem;font-weight:400;letter-spacing:.05em;
  cursor:pointer;
  transition:color .25s,border-color .25s;
}
.a11y-reset:hover{color:#b9985b;border-color:#b9985b}
.a11y-statement{
  font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:.7rem;color:rgba(255,255,255,.45);
  text-decoration:none;transition:color .25s;direction:ltr;letter-spacing:.05em;
}
.a11y-statement:hover{color:#b9985b}

/* ═══ A11Y STATE CLASSES ═══ */
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:#b9985b!important;
  background:rgba(185,152,91,.16)!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(0,10,18,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;pointer-events:none;transition:opacity .4s var(--e);
}
.ess-dialog.open{opacity:1;pointer-events:auto}
.ess-dialog-content{
  background:#F8F5EF;color:#001625;
  padding:48px 44px 40px;max-width:720px;width:100%;
  max-height:85vh;overflow-y:auto;position:relative;
  transform:translateY(16px) scale(.98);
  transition:transform .5s var(--e);
}
.ess-dialog.open .ess-dialog-content{transform:translateY(0) scale(1)}
.ess-dialog-content h2{
  font-family:'Fraunces',serif;font-weight:300;font-style:italic;
  font-size:2rem;color:#001625;letter-spacing:-.015em;margin-bottom:8px;
}
.ess-dialog-eyebrow{
  display:block;
  font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;
  color:#b9985b;margin-bottom:14px;
}
.ess-dialog-mark{width:60px;height:1px;background:#b9985b;margin:22px 0 20px}
.ess-dialog-content h3{
  font-family:var(--he);font-weight:400;
  font-size:.92rem;color:#001625;letter-spacing:.04em;
  margin-top:22px;margin-bottom:8px;text-transform:uppercase;
}
.ess-dialog-content p,.ess-dialog-content li{
  font-family:var(--he);font-weight:300;
  font-size:.92rem;color:rgba(0,22,37,.72);
  line-height:1.75;margin-bottom:6px;
}
.ess-dialog-content ul{padding-right:20px;margin-bottom:10px}
.ess-dialog-content strong{font-weight:500;color:#001625}
.ess-dialog-content a{color:#b9985b;text-decoration:underline;text-underline-offset:3px}
.ess-dialog-close{
  position:absolute;top:20px;left:20px;
  padding:8px 16px;border-radius:100px;
  font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:.68rem;letter-spacing:.22em;
  color:rgba(0,22,37,.6);
  border:1px solid rgba(0,22,37,.18);
  background:transparent;cursor:pointer;
  transition:border-color .3s,color .3s,background .3s;direction:ltr;
}
.ess-dialog-close:hover{border-color:#b9985b;color:#b9985b;background:rgba(185,152,91,.16)}

/* DESIGN — paragraph → rule → headline, staggered (body/headline not scaled → direct rise). Reuses uEntRise/uRuleDraw keyframes from URBAN. */
.js #design .s-design__copy[data-rv]{opacity:1;transform:none;transition:none}
.js #design .s-design__body,.js #design .s-design__headline{opacity:0}
.js #design .s-design__rule{transform:scaleX(0);transform-origin:right center}
.js #design .s-design__copy.in .s-design__body{animation:uEntRise .8s var(--e) .25s both}
.js #design .s-design__copy.in .s-design__rule{animation:uRuleDraw .7s var(--e) .55s both}
.js #design .s-design__copy.in .s-design__headline{animation:uEntRise .8s var(--e) .68s both}
@media(prefers-reduced-motion:reduce){.js #design .s-design__body,.js #design .s-design__headline{opacity:1;animation:none}.js #design .s-design__rule{transform:scaleX(1);animation:none}}
/* APARTMENTS — the 4 spec blocks cascade in (overrides the quick section transition with a staggered keyframe) */
.js #apartments .ts-block[data-rv].in{animation:uEntRise .7s var(--e) both}
.js #apartments .ts-block--building[data-rv].in{animation-delay:.2s}
.js #apartments .ts-block--apt[data-rv].in{animation-delay:.32s}
.js #apartments .ts-block--kitchen[data-rv].in{animation-delay:.44s}
.js #apartments .ts-block--finish[data-rv].in{animation-delay:.56s}
@media(prefers-reduced-motion:reduce){.js #apartments .ts-block[data-rv].in{animation:none}}

/* button — ink circle, white icon, paper ring (reads over both dark & white sections) */
#a11y-btn{background:#0f0f0e;border-color:rgba(255,255,255,.55);box-shadow:0 12px 34px -10px rgba(0,0,0,.7)}
#a11y-btn svg{fill:#fff}
#a11y-btn:hover{background:#fff;border-color:#fff}
#a11y-btn:hover svg{fill:#0a0a0a}
@keyframes a11y-pulse{0%,100%{box-shadow:0 12px 34px -10px rgba(0,0,0,.7),0 0 0 0 rgba(255,255,255,.18)}50%{box-shadow:0 12px 34px -10px rgba(0,0,0,.7),0 0 0 13px rgba(255,255,255,0)}}
/* panel — warm alfa ink, white hairlines + white accents */
#a11y-panel{background:linear-gradient(180deg,#171513 0%,#0c0b0a 100%);border-color:rgba(255,255,255,.12)}
.a11y-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}
.a11y-title-sub{font-family:var(--display);font-style:normal;color:rgba(255,255,255,.5);letter-spacing:.22em}
.a11y-section-title{font-family:var(--he);font-style:normal;color:rgba(255,255,255,.48)}
.a11y-opt:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.42);color:#fff}
.a11y-opt.active{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.a11y-close:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.1)}
.a11y-reset:hover{color:#fff;border-color:#fff}
.a11y-statement{font-family:var(--he);font-style:normal}
.a11y-statement:hover{color:#fff}
/* dialogs — dark luxury card, Almoni body + HelvPDF eyebrow, thin white rule */
.ess-dialog{background:rgba(8,8,8,.92)}
.ess-dialog-content{background:#121211;color:#dcdcdc;border:1px solid rgba(255,255,255,.1)}
.ess-dialog-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}
.ess-dialog-content h2{font-family:var(--he);font-style:normal;font-weight:700;color:#fff;letter-spacing:-.01em;font-size:2.1rem}
.ess-dialog-eyebrow{font-family:var(--display);font-style:normal;color:rgba(255,255,255,.5);letter-spacing:.28em}
.ess-dialog-mark{background:rgba(255,255,255,.55)}
.ess-dialog-content h3{font-family:var(--he);color:#fff}
.ess-dialog-content p,.ess-dialog-content li{font-family:var(--he);color:rgba(255,255,255,.7)}
.ess-dialog-content strong{color:#fff}
.ess-dialog-content a{color:#fff;text-decoration-color:rgba(255,255,255,.55)}
.ess-dialog-close{font-family:var(--display);font-style:normal;color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.22)}
.ess-dialog-close:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.1)}

#cf-success{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;
  background:radial-gradient(130% 130% at 50% 28%,rgba(22,22,21,.94),rgba(7,7,7,.985));
  -webkit-backdrop-filter:blur(9px) saturate(.85);backdrop-filter:blur(9px) saturate(.85);
  opacity:0;transition:opacity .5s var(--e)}
#cf-success.show{opacity:1}
#cf-success[hidden]{display:none}
.cf-success__close{position:absolute;top:clamp(18px,3vw,40px);left:clamp(18px,3vw,40px);z-index:2;cursor:pointer;
  width:clamp(44px,3.4vw,56px);height:clamp(44px,3.4vw,56px);border-radius:50%;
  background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:transform .4s var(--e),background-color .3s var(--e),border-color .3s var(--e)}
.cf-success__close:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:rotate(90deg)}
.cf-success__close:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cf-success__close svg{width:40%;height:40%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cf-success__inner{max-width:min(92vw,860px);padding:2rem;color:#fff;
  opacity:0;transform:translateY(26px) scale(.975);transition:opacity .75s var(--e) .1s,transform .75s var(--e) .1s}
#cf-success.show .cf-success__inner{opacity:1;transform:none}
.cf-success__mark{display:block;width:clamp(72px,7.5vw,116px);margin:0 auto clamp(1.5rem,2.6vw,2.7rem)}
.cf-success__mark svg{width:100%;height:auto;display:block;overflow:visible}
.cf-success__mark circle{fill:none;stroke:rgba(255,255,255,.9);stroke-width:2;stroke-dasharray:233;stroke-dashoffset:233;transform:rotate(-90deg);transform-origin:50% 50%}
.cf-success__mark path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:49;stroke-dashoffset:49}
#cf-success.show .cf-success__mark circle{animation:cfDraw .8s var(--e) .25s forwards}
#cf-success.show .cf-success__mark path{animation:cfDraw .45s var(--e) .9s forwards}
@keyframes cfDraw{to{stroke-dashoffset:0}}
.cf-success__h{margin:0;font-family:var(--he);font-weight:700;letter-spacing:-.02em;line-height:1.04;font-size:clamp(2.1rem,6vw,4.8rem)}
.cf-success__p{margin:clamp(.7rem,1.5vw,1.3rem) 0 0;font-family:var(--he);font-weight:300;color:rgba(255,255,255,.82);letter-spacing:.01em;font-size:clamp(1.05rem,2.4vw,1.95rem)}
.cf-success__rule{display:block;width:clamp(54px,6vw,100px);height:1px;background:rgba(255,255,255,.45);margin:clamp(1.7rem,3vw,2.9rem) auto clamp(1rem,1.7vw,1.5rem)}
.cf-success__brand{font-family:var(--display);font-weight:700;letter-spacing:.02em;color:rgba(255,255,255,.92);font-size:clamp(1.2rem,2.4vw,1.95rem)}
@media(prefers-reduced-motion:reduce){#cf-success,.cf-success__inner{transition:none}.cf-success__mark circle,.cf-success__mark path{animation:none;stroke-dashoffset:0}}

.map-lb{position:fixed;inset:0;z-index:10001;background:rgba(8,8,8,.96);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s var(--e),visibility .3s;overflow:hidden;touch-action:none}
.map-lb.is-open{opacity:1;visibility:visible}
.map-lb__img{max-width:96vw;max-height:90vh;object-fit:contain;transform-origin:center center;will-change:transform;cursor:zoom-in;user-select:none;-webkit-user-select:none}
.map-lb__close{position:absolute;top:16px;left:16px;z-index:2;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.35);color:#fff;font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .25s,color .25s,transform .3s var(--e)}
.map-lb__close:hover{background:#fff;color:#111;transform:rotate(90deg)}
.map-lb__hint{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:0;right:0;text-align:center;color:rgba(255,255,255,.6);font-family:var(--he);font-size:.85rem;letter-spacing:.02em;pointer-events:none}
html.lb-lock{overflow:hidden}
.s-location-map .lm-plate{cursor:zoom-in}

.wa-fab{position:fixed;left:24px;bottom:84px;z-index:86;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#25D366;color:#fff;box-shadow:0 8px 22px -6px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.28);cursor:pointer;text-decoration:none;transition:transform .25s var(--e),box-shadow .25s var(--e)}
.wa-fab:hover{transform:scale(1.07);box-shadow:0 12px 28px -6px rgba(0,0,0,.55)}
.wa-fab:active{transform:scale(.96)}
.wa-fab:focus-visible{outline:2px solid #fff;outline-offset:3px}
.wa-fab svg{width:58%;height:58%;fill:#fff;display:block}
@media(max-width:768px){.wa-fab{width:52px;height:52px;left:24px;bottom:calc(env(safe-area-inset-bottom,0px) + 84px)}}

/* ============================================================
   DESKTOP LETTERBOX FILL — responsive fix (Omri, 2026-07-20)
   Fills the vertical dead-space on non-16:9 desktop screens
   (1440x900, MacBook 1512x982, ...) by sizing each 16:9 stage
   to COVER its section box and letting the section clip the
   horizontal overflow. aspect-ratio:16/9 is preserved on every
   stage, so children stay pixel-proportional (zero distortion).
   Scoped to >=769px: mobile is untouched.
   ============================================================ */
@media(min-width:769px){
  /* full-bleed stages (section = height:100svh, no header offset):
     cover by the larger of viewport-width or height-derived-width.
     No explicit height -> inherited aspect-ratio:16/9 derives it, so
     wide/ultrawide screens still cover by width (crop top/bottom). */
  /* (design was migrated to Flow above — fills the viewport, photo covers, no crop) */
  /* location + design -> Flow (fill the viewport).
     wellness -> FILL the viewport exactly (no gaps, no photo-crop). The 16:9
     collage stretches to the viewport aspect; icons stay aligned to their baked
     labels (both scale together). Zero distortion at 16:9; mild at 4:3. */
  .s-lifestyle-zone{width:100%;height:100svh;aspect-ratio:auto;max-width:none}
  /* numbers -> its own Flow block (flex column) fills the viewport; no contain cap
     here (that left side-bands on wide screens). */

  /* anchor the side-crop onto the harmless edge (max/min keep it 0 on wide screens) */

  /* contained stages (section has padding-top:var(--hdr-h)):
     fill the below-nav area exactly; drop the min(100vw,...) cap.
     Height-fit is kept on wide screens (intentional side panels stay). */
  /* contact: width capped (no side-clip — was overflowing/clipping the form),
     HEIGHT fills the below-nav area so the footer band reaches the very bottom, no
     gaps. Form inputs/photo stretch cleanly; white side-margins on ultra-wide blend
     with the --paper bg; the footer still breaks out to 100vw. */
  .s-contact{width:min(100vw, calc((100svh - var(--hdr-h)) * 16 / 9));
    height:calc(100svh - var(--hdr-h));aspect-ratio:auto}
  /* alef (urban): width capped (no side-clip — was overflowing/clipping the collage),
     HEIGHT fills the below-nav area so no gaps. Cover photos + live text stretch
     cleanly; dark side-margins on ultra-wide blend with the --ink bg. */
  .s-urban{width:min(100vw, calc((100svh - var(--hdr-h)) * 16 / 9));
    height:calc(100svh - var(--hdr-h));aspect-ratio:auto}
  /* aerial: width capped (no side-clip), HEIGHT fills the below-nav area so the
     gallery card reaches top & bottom — no white gaps. The decorative α glyph
     stretches imperceptibly; the card photo is object-fit:cover. */
  .s-aerial{width:min(100vw, calc((100svh - var(--hdr-h)) * 16 / 9));
    height:calc(100svh - var(--hdr-h));aspect-ratio:auto}
  /* tech-spec (apartments): width stays capped (no side-clip / text stays sized),
     but HEIGHT fills the below-nav area so the dark stage reaches top & bottom —
     no white gaps around it. The 16:9 %-layout stretches vertically (blocks just
     get more breathing room; no overlap). (Omri: remove top/bottom gaps) */
  .s-tech-spec{width:min(100vw, calc((100svh - var(--hdr-h)) * 16 / 9));
    height:calc(100svh - var(--hdr-h));aspect-ratio:auto}
}

#cookie-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:9998;max-width:min(680px,92vw);display:flex;gap:14px;align-items:center;background:#111110;color:#f4efe7;border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:12px 16px;box-shadow:0 16px 40px -12px rgba(0,0,0,.6);font-family:'Assistant',sans-serif;font-size:.86rem;line-height:1.4;direction:rtl}
#cookie-bar[hidden]{display:none}
#cookie-bar p{margin:0;flex:1}
#cookie-bar a{color:#d8c08a;text-decoration:underline}
#cookie-bar .cbtn{border:0;border-radius:9px;padding:8px 15px;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap;transition:transform .2s,opacity .2s}
#cookie-bar .cbtn:hover{transform:translateY(-1px)}
#cookie-bar .cbtn--ok{background:#d8c08a;color:#111110}
#cookie-bar .cbtn--no{background:transparent;color:#f4efe7;border:1px solid rgba(255,255,255,.32)}
@media(max-width:560px){#cookie-bar{flex-wrap:wrap;bottom:12px;gap:8px}#cookie-bar p{flex-basis:100%}#cookie-bar .cbtn{flex:1}}