/* ===== FONTS (self-hosted, extracted from IDML) ===== */
@font-face{font-family:'Maple';src:url('assets/fonts/FbMaple-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Oron';src:url('assets/fonts/OronMFO-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Assistant';src:url('assets/fonts/Assistant-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Assistant';src:url('assets/fonts/Assistant-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Assistant';src:url('assets/fonts/Assistant-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Spoiler';src:url('assets/fonts/FbSpoilerPas-Regular.woff2') format('woff2');font-weight:400;font-display:swap}

/* ===== TOKENS (sampled from the PDF export for exact match) ===== */
:root{
  --navy:#1F264E; --cream:#FAF3EB; --brown:#322512; --white:#fff;
  --he:'Assistant',system-ui,sans-serif;
  --display:'Maple',serif; --script:'Oron',serif;
  --e:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--he);color:var(--brown);background:var(--cream);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
input{font:inherit}
::selection{background:var(--navy);color:var(--cream)}

/* ===== STAGE: faithful proportional reproduction of each 1920x1080 InDesign page ===== */
.stg{position:relative;width:100%;aspect-ratio:1920/1080;container-type:size;overflow:hidden;background:var(--cream)}
/* Snapping is switched on only once the page has finished loading (html.snap-on).
   While the hero film and the images are still arriving the sections keep changing
   height, and a mandatory snap resolved against that moving layout leaves the first
   screen 39-77px down — measured on a cold load at 1920 and 1440. */
@media(min-width:769px){html.snap-on{scroll-snap-type:y mandatory}.stg{scroll-snap-align:start}}
.stg>*{position:absolute}
.stg>.t{margin:0}
.stg>img{object-fit:cover;z-index:1}
.stg>.sh{z-index:2}
.stg>.t{z-index:3}
.stg>.plogo{z-index:4}
.stg>.lockup{display:flex;flex-direction:column;align-items:stretch;z-index:3;gap:.5cqw}
.lockup .lk{width:100%}

/* ===== SCROLL REVEAL — "Quiet Rise" (transform+opacity only) ===== */
:root{--rv-e:cubic-bezier(.22,1,.36,1)}
/* only hide when JS is on (no-JS/SEO always shows content) */
html.js .rv{opacity:var(--rv-o,0);
  transition:opacity var(--rvd,1s) var(--rv-e),transform var(--rvd,1s) var(--rv-e)}
html.js .rv-up{transform:translateY(22px)}
html.js .rv-soft{transform:translateY(13px)}
html.js .rv-hero{transform:translateY(28px);--rvd:1.3s}
html.js .rv-img{transform:scale(1.05);--rvd:1.1s}
html.js .rv-tile{transform:translateY(12px) scale(1.04);--rvd:.9s}
html.js .rv-render{transform:scale(1.06);--rvd:1.3s}
html.js .rv-sq{transform:translateY(12px) scale(.96)}
html.js .rv-fade{transform:none}
/* ══ entrance vocabulary — ported from clients/alfa ══
   alfa drives entrances with @keyframes + animation-delay:var(--d), NOT transitions.
   The base .rv above is transition-driven; these variants override with an animation on
   .in, and the observer JS feeds each element its --d. Keyframes are used because a
   transition can skip its first frame and snap straight to the end state.
   Rules DRAW themselves (scaleX/scaleY), Hebrew copy WRITES itself in from the right
   (clip-path, matching reading direction), headings arrive word by word. */
@keyframes rvWriteRtl{from{clip-path:inset(0 0 0 100%);opacity:.35}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes rvDrawX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rvDrawY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rvSlideRtl{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}}
@keyframes rvWordUp{from{opacity:0;transform:translateY(20px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes rvOpen{from{opacity:0;transform:scale(1.045)}to{opacity:1;transform:none}}

/* kicker (Choose your / Collecting / International) — slides in from the reading origin */
html.js .rv-kick{transform:translateX(48px)}
html.js .rv-kick.in{animation:rvSlideRtl .85s var(--rv-e) var(--d,0s) both}

/* big Maple headings — word-by-word; .rvw spans are created by the splitter below */
html.js .rv-head{--rv-o:1;transform:none}
html.js .rv-head .rvw{display:inline-block;opacity:0;will-change:transform,opacity,filter}
html.js .rv-head.in .rvw{animation:rvWordUp .62s var(--rv-e) both;
  animation-delay:calc(var(--d,0s) + var(--wi,0) * .11s)}
/* no splitter (no JS / single text node) → the block still rises as one */
html.js .rv-head.in:not(:has(.rvw)){animation:rvWordUp .7s var(--rv-e) var(--d,0s) both}

/* Hebrew body copy — writes itself in from the right */
html.js .rv-write{--rv-o:1;transform:none}
html.js .rv-write.in{animation:rvWriteRtl 1.05s var(--rv-e) var(--d,0s) both}

/* rules draw themselves */
html.js .rv-rule{--rv-o:1;transform:scaleX(0);transform-origin:right center}
html.js .rv-rule.in{animation:rvDrawX .8s var(--rv-e) var(--d,0s) both}
html.js .rv-vrule{--rv-o:1;transform:scaleY(0);transform-origin:top center}
html.js .rv-vrule.in{animation:rvDrawY .85s var(--rv-e) var(--d,0s) both}

/* galleries open from the container (never .pgal-img — its opacity drives the crossfade) */
html.js .rv-gal{transform:scale(1.045)}
html.js .rv-gal.in{animation:rvOpen 1.2s var(--rv-e) var(--d,0s) both}
html.js .rv.in{opacity:1;transform:none}
/* de-collide measuring guard: neutralize reveal so true geometry is measured */
html.js.rv-measuring .rv,html.js .rv-measuring .rv{opacity:1!important;transform:none!important;transition:none!important;animation:none!important;clip-path:none!important}
@media(prefers-reduced-motion:reduce){
  html.js .rv{opacity:1!important;transform:none!important;transition:none!important;
    animation:none!important;clip-path:none!important}
  html.js .rv .rvw{opacity:1!important;transform:none!important;animation:none!important;filter:none!important}
}

/* ===== HERO ===== */
#hero{background:var(--cream)}
.hero__logo{left:5.5%;top:3.6%;width:10%;height:auto;aspect-ratio:auto!important;object-fit:contain!important}
.hero__phone{left:16%;top:3.35%;display:flex;align-items:center;gap:.4vw;
  font-family:'Assistant';font-weight:700;font-size:1.8cqw;color:#000;direction:ltr}
.hero__phone svg{width:2.2cqw;height:auto;fill:#000}
.hero__nav{left:60%;top:7.4%;width:36%;display:flex;justify-content:flex-start;gap:1.4cqw;
  direction:rtl;font-family:'Assistant';font-weight:600;font-size:1.35cqw;color:#000}
.hero__nav a{position:relative;white-space:nowrap;padding-block:.2em}
.hero__nav a::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;height:1.5px;background:var(--navy);transform:scaleX(0);transform-origin:inline-end;transition:transform .3s var(--e)}
.hero__nav a:hover::after,.hero__nav a:focus-visible::after{transform:scaleX(1);transform-origin:inline-start}
.hero__nav .sep{opacity:.34;font-weight:400}
.hero__rule{left:2.7%;top:12.2%;width:93.2%;height:1.5px;background:rgba(0,0,0,.9);border-radius:2px}
.hero__video{left:0;top:12.4%;width:100%;height:87.6%;overflow:hidden;background:var(--navy)}
.hero__video video,.hero__video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* scrim removed (Omri, 31/07): the navy wash — rgba(31,38,78,.18) to .42 — was tinting the
   whole hero film blue and dark. The film now carries its own scrim behind the burned-in
   titles, so the page-level one was doubling up. Kept as an empty element so the z-order
   of .hero__vid / .hero-mute below it is unchanged. */
.hero__scrim{position:absolute;inset:0;background:none}
/* mobile-only chrome — the fixed bar and its burger must not exist on the 1920 stage */
.nav__toggle,.navbar-m,.cta-pill,.ct-tel-m,.sxn-div,.nav-tel{display:none}   /* mobile-only chrome */

/* ===== DESKTOP FIXED NAVBAR =====
   Logo + phone + links are pulled out of the hero stage's absolute-positioned layout
   (.stg#hero>.site-nav beats .stg>*{position:absolute} on specificity) and pinned to the
   viewport at the smallest height that still fits the logo and phone without cropping
   or distorting them, so the bar stays visible above every section instead of scrolling
   away with the hero. #content gets matching top margin so the very first section starts
   right where the bar ends — no overlap, nothing hidden underneath it. */
@media(min-width:769px){
  :root{--nav-h:clamp(58px,5.2vw,76px)}
  html{scroll-padding-top:var(--nav-h)}  /* #anchor links land below the fixed bar */
  #content{margin-top:var(--nav-h)}

  .stg#hero>.site-nav{
    position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:100;
    background:var(--cream);box-shadow:0 1px 0 rgba(0,0,0,.08)
  }
  .stg#hero>.site-nav .hero__logo{
    position:absolute;left:6%;top:50%;transform:translateY(-50%);
    width:auto;height:56%;max-height:40px
  }
  .stg#hero>.site-nav .hero__phone{
    position:absolute;left:21%;top:50%;transform:translateY(-50%);
    font-size:2.5rem;gap:.4rem
  }
  .stg#hero>.site-nav .hero__phone svg{width:1.05rem;height:1.05rem}
  .stg#hero>.site-nav .hero__nav{
    position:absolute;left:52vw;top:50%;transform:translateY(-50%);
    width:44vw;font-size:.95rem;gap:1vw
  }

  /* Projects submenu — hover/focus reveals 3 direct project links under "פרויקטים" */
  .hero__nav .nav-drop{position:relative;display:inline-flex;align-items:center}
  .hero__nav .nav-drop__menu{
    position:absolute;top:100%;right:0;margin-top:.7em;padding:.4em 0;min-width:150px;
    background:var(--cream);border-radius:8px;box-shadow:0 12px 28px -10px rgba(0,0,0,.28);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .2s var(--e),transform .2s var(--e),visibility .2s;
    z-index:110
  }
  .hero__nav .nav-drop:hover .nav-drop__menu,
  .hero__nav .nav-drop:focus-within .nav-drop__menu{
    opacity:1;visibility:visible;transform:translateY(0)
  }
  .hero__nav .nav-drop__menu a{
    display:block;padding:.55em 1.1em;white-space:nowrap;font-weight:500
  }
  .hero__nav .nav-drop__menu a:hover,
  .hero__nav .nav-drop__menu a:focus-visible{background:rgba(31,38,78,.07)}

  /* the hairline that used to sit under the in-stage nav row is redundant now the bar
     has its own bottom edge, and would otherwise land oddly close beneath it */
  .hero__rule{display:none}
  /* the video no longer needs to leave room at the top of the stage for an in-flow
     nav row, since that row now floats above as a fixed bar */
  .hero__video{top:0!important;height:100%!important}
}
/* display:contents removes the wrapper from layout entirely, so the images keep behaving
   as direct children of the stage and their absolute desktop positions still apply. */
/* ══ company profile grid (from eilat_website_hevra.idml) ══
   The cells are absolutely placed per the IDML, so the grid wrapper must not create a
   layout of its own on the stage — it only exists so the mobile rules have one handle. */
/* ══ company profile — two strips that never stop ══
   Ported from the client marquee on pages/spin.html: the row is written twice and the
   track travels exactly -50%, so the second copy is under the cursor at the moment the
   first one runs out and the seam is unreachable. The two rows travel opposite ways. */
.hv-grid{position:absolute;inset-inline:0;top:20.8%;height:31%;overflow:hidden;
  display:flex;flex-direction:column;gap:1.6%;direction:ltr}
.hv-strip{overflow:hidden;flex:1 1 0;min-height:0}
.hv-track{display:flex;gap:.55cqw;height:100%;width:max-content;will-change:transform}
.hv-strip--a .hv-track{animation:hvA 54s linear infinite}
.hv-strip--b .hv-track{animation:hvB 66s linear infinite}
/* four copies, travel 50% → one period is two copies, which is always wider than the
   viewport. At two copies and -50% the period was a single copy (~1470px) and the tail
   of the strip came into view on a 1920 screen — measured, visible as bare navy. */
@keyframes hvA{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes hvB{from{transform:translateX(-50%)}to{transform:translateX(0)}}
/* let a visitor stop a card they want to read */
.hv-grid:hover .hv-track{animation-play-state:paused}
/* Uniform cards. The IDML widths ranged 7.2%–15.8%, and carried straight into a moving
   strip they truncated four captions ("CENTRAL BOUTIQE - …") and cropped every photo to
   56% of its source. In a marquee nobody reads the varied widths as intentional — they
   read a cut-off name as broken. One ratio, wide enough for the longest caption (209px)
   and showing far more of each render. */
.hv-cell{position:relative;margin:0;overflow:hidden;height:100%;
  aspect-ratio:1.62;min-width:14.2cqw;flex:0 0 auto}
.hv-cell .hv-img{width:100%;height:100%;object-fit:cover;display:block}
@media(prefers-reduced-motion:reduce){.hv-track{animation:none!important}}
/* caption bar sits inside the frame, along its top edge — matches the IDML placement */
.hv-cell figcaption{position:absolute;inset-block-start:0;inset-inline:0;
  background:#1F264E;color:#FAF3EB;font-family:'Assistant',sans-serif;font-weight:600;
  font-size:.62cqw;line-height:1.9;letter-spacing:.01em;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:.45cqw}
.spec-rail,.intro-band{display:contents}
/* display:contents removes the wrapper from LAYOUT, but not from selector matching:
   ".stg > *" stops matching anything the mobile JS moved inside one, so on a
   mobile-first load resized past the breakpoint the wrapped images and the intro
   lockup all fell back to position:static and the stage layout collapsed. Repeat
   the stage rules one level deeper. (Measured: 10 elements lost position:absolute.) */
.spec-rail>*,.intro-band>*{position:absolute}
.spec-rail>img{object-fit:cover;z-index:1}
.intro-band>.t{margin:0;z-index:3}
.spec-rail__hint{display:none}
.hero__ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;
  color:var(--cream);text-align:center}
.hero__ph b{font-family:'Spoiler',serif;font-weight:400;font-size:3.4cqw;letter-spacing:.02em}
.hero__ph small{font-family:'Assistant';font-weight:500;font-size:1cqw;letter-spacing:.22em;opacity:.8}
/* hero film + mute toggle (ported from clients/alfa) */
.hero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero__video .hero__scrim{z-index:1}
.hero-mute{position:absolute;bottom:4.2%;left:2.4%;z-index:4;width:clamp(44px,3.2cqw,58px);height:clamp(44px,3.2cqw,58px);
  border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;
  background:rgba(31,38,78,.46);border:1px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .25s ease,transform .2s ease,border-color .25s ease}
.hero-mute:hover{background:rgba(31,38,78,.7);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 ease-out 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}}

/* ===== CONTACT (real form at IDML coords) ===== */
#contact #leadForm{position:absolute;inset:0;z-index:2}
#contact input{position:absolute;height:6.8%;background:var(--cream);border:1px solid #000;border-radius:.42cqw;
  padding:0 1.4cqw;font-family:'Assistant';font-weight:500;font-size:1.46cqw;color:#000;text-align:right;direction:rtl}
#contact input::placeholder{color:#000;opacity:1}
#contact input:focus-visible{outline:none;border-color:var(--navy);border-width:1.5px}
.ct-name{left:8.3%;top:26.5%;width:22.3%}
.ct-phone{left:8.3%;top:35.9%;width:22.3%}
.ct-email{left:8.3%;top:45.2%;width:22.3%}
.ct-send{position:absolute;left:14.6%;top:55.5%;width:9.7%;height:6.2%;background:var(--navy);color:#fff;border-radius:.36cqw;
  font-family:'Assistant';font-weight:600;font-size:1.55cqw;transition:transform .2s var(--e),filter .2s var(--e)}
.ct-send:hover{transform:translateY(-2px);filter:brightness(1.12)}
.ct-consent{position:absolute;left:8.3%;top:63%;width:22.3%;display:flex;gap:.5cqw;align-items:flex-start;
  font-family:'Assistant';font-weight:500;font-size:.82cqw;color:#000;direction:rtl;line-height:1.35}
.ct-consent a{text-decoration:underline}
.ct-consent input{position:static!important;flex:0 0 auto;width:1.15cqw!important;height:1.15cqw!important;min-width:15px;min-height:15px;margin:.12cqw 0 0!important;padding:0!important;accent-color:#1F264E;cursor:pointer}
.ct-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-msg{position:absolute;left:8.3%;top:62.5%;width:22.3%;font-family:'Assistant';font-weight:600;font-size:1cqw;color:#0a7d55;direction:rtl}
.ct-msg:empty{display:none}
.ct-fe{position:absolute;display:none;left:8.3%;width:22.3%;font-family:'Assistant';font-weight:600;font-size:.72cqw;color:#c0392b;direction:rtl;line-height:1.2}
.ct-fe.show{display:block}
.ct-fe-name{top:33.5%}.ct-fe-phone{top:42.9%}.ct-fe-email{top:52.2%}.ct-fe-consent{top:67.2%}
#contact input.err{border-color:#c0392b!important;border-width:1.5px}
.ct-consent.err{color:#c0392b}.ct-consent.err input{outline:1.5px solid #c0392b}


/* contact collage grid (matches PDF) */
.ct-collage{position:absolute;left:47.5%;top:16.5%;width:46.5%;height:67%;display:grid;
  grid-template-columns:1fr 1fr 1fr;grid-template-rows:1.1fr 1fr;gap:.7cqw;direction:ltr;z-index:1}
.ct-collage img{width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;border-radius:2px}
/* developer collage grid (compass full-height, top-aligned with crane) */
.dev-collage{position:absolute;left:42%;top:11%;width:52%;height:41%;display:grid;
  grid-template-columns:1fr 1fr .6fr;grid-template-rows:1.35fr 1fr;gap:.7cqw;direction:ltr;z-index:1}
.dev-collage img{width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;border-radius:2px}

/* ===== MOBILE: reflow stages into a readable vertical stack ===== */
@media(max-width:768px){
  .stg{aspect-ratio:auto;height:auto;container-type:normal;display:flex;flex-direction:column;
    gap:.5rem;padding:1.4rem 1.1rem 2rem}
  .stg>*{position:static!important;left:auto!important;top:auto!important;right:auto!important;
    width:100%!important;height:auto!important;transform:none!important}
  .stg>.sh{display:none!important}
  .ct-collage,.dev-collage{position:static!important;width:100%!important;height:auto!important;left:auto!important;top:auto!important;grid-template-rows:auto!important;gap:.4rem!important;margin-block:.6rem}
  .ct-collage img,.dev-collage img{aspect-ratio:4/3;height:auto!important}
  .stg>img{aspect-ratio:16/10;border-radius:4px;order:0}

  /* ── render galleries ──
     .pgal sizes itself from position:absolute + inset:0. The blanket
     .stg>*{position:static} above kills that, its absolutely-positioned .pgal-img
     children then contribute no height, and the whole section collapsed to 54px —
     the three render sections were effectively blank on every phone.
     Give it back a positioning context and an explicit ratio (renders are ~1.7-2.0). */
  /* ══ apartment rail — horizontal, swipeable (Omri, 31/07) ══
     The six apartment groups are four separate absolutely-positioned elements each
     (.sh square, .t-xl code, .t-sm label, .apt-hit button), grouped only by a shared
     left%. On mobile JS clones them into real cards; the originals stay hidden. */
  .aptrail{display:flex!important;gap:10px;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    /* 21px end-padding so the first and last card sit on the same inset as the copy
       instead of bleeding into the screen edge */
    padding:2px 21px 12px;margin:6px 0 1.1rem;width:100%!important;order:1;
    scroll-padding-inline:21px;scrollbar-width:none;box-sizing:border-box}
  .aptrail::-webkit-scrollbar{display:none}
  .aptcard{scroll-snap-align:center;flex:0 0 40%;min-width:132px;background:#1F264E;color:#FAF3EB;
    border:0;border-radius:6px;padding:14px 8px 11px;display:flex;flex-direction:column;
    align-items:center;gap:6px;cursor:pointer;font-family:inherit;
    transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s ease}
  .aptcard:active{transform:scale(.96)}
  .aptcard:focus-visible{outline:2px solid #1F264E;outline-offset:2px}
  .aptcard__code{font-family:'Maple',serif;font-size:1.85rem;line-height:1;direction:ltr}
  .aptcard__label{font-family:'Assistant',sans-serif;font-weight:500;font-size:.78rem;
    line-height:1.25;text-align:center;opacity:.92;direction:rtl}
  .aptcard__mag{width:15px;height:15px;opacity:.75;margin-top:1px}
  .aptrail__hint{font-family:'Assistant',sans-serif;font-size:.75rem;color:#1F264E;opacity:.6;
    text-align:center;margin:-.7rem 0 1rem;order:1}

  /* ══ technical spec — accordion, all closed ══ */
  /* the originals that the rail replaces */
  .stg>.t.t-xl{display:none!important}
  .stg>.t.t-sm.rv-fade{display:none!important}
  .stg>.apt-hit,.stg>.vdiv{display:none!important}
  .stg>.speccol{order:2;width:calc(100% - 42px)!important;margin:0 21px 8px!important;
    border-bottom:1px solid rgba(31,38,78,.18);padding:0!important}
  /* centred and larger (Omri, 01/08). Symmetric padding keeps the text optically centred —
     the chevron is absolute so it does not pull the label off-centre. */
  .speccol .spec-h{position:relative;cursor:pointer;padding:15px 30px!important;margin:0!important;
    font-size:1.22rem!important;line-height:1.3!important;text-align:center!important;
    font-weight:700!important;user-select:none;display:block}
  .speccol .spec-h::after{content:"";position:absolute;left:8px;top:50%;width:9px;height:9px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:translateY(-70%) rotate(45deg);transition:transform .25s cubic-bezier(.22,1,.36,1)}
  .speccol.is-open .spec-h::after{transform:translateY(-30%) rotate(225deg)}
  .speccol .spec-body{display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .32s cubic-bezier(.22,1,.36,1)}
  .speccol.is-open .spec-body{grid-template-rows:1fr}
  .speccol .spec-body>div{overflow:hidden;min-height:0}   /* min-height:0 — grid items default to auto and refuse to collapse below content height */
  .speccol .spec-li{font-size:.92rem!important;line-height:1.5!important;margin-block:.28em!important}
  /* padding must sit on the last bullet, not the grid item — on the item it survives the
     0fr collapse and every closed row stays 12px tall */
  .speccol .spec-body .spec-li:last-child{padding-bottom:12px}
  @media(prefers-reduced-motion:reduce){
    .speccol .spec-body,.speccol .spec-h::after{transition:none}
  }

  /* ══ mobile typography + rhythm, matched to clients/alfa ══
     Measured on alfa: 21px side inset, body 16.38px/26.53 right-aligned,
     small print 12.8px/19.2. eilat was running text edge-to-edge at a larger
     size with 8px gaps, which is what made it feel cramped and unfinished. */
  .stg{padding:0 0 26px!important;gap:0!important}
  .stg>.t{padding-inline:21px!important;box-sizing:border-box!important;
    margin-block:0 14px!important;text-align:right!important}
  .stg>.t.t-sm{font-size:1.024rem!important;line-height:1.62!important;
    color:inherit;text-align:right!important;text-align-last:auto!important}
  .stg>.t.t-md{font-size:1.15rem!important;line-height:1.55!important}
  .stg>.t.t-lg{font-size:1.6rem!important;line-height:1.2!important;margin-block:6px 12px!important}
  /* English display type stays big and dramatic, like alfa's DESIGN */
  .stg>.t.t-xl,.stg>h2[lang=en]{font-size:2.9rem!important;line-height:1.02!important;
    padding-inline:21px!important;margin-block:2px 10px!important}
  /* the eyebrow above each display heading ("Choose your", "Building the", "Collecting")
     is a div[lang=en], not an h2 — it needs its own rule or it renders at 14px */
  .stg>div[lang=en]{font-size:1.15rem!important;line-height:1.3!important;
    padding-inline:21px!important;margin-block:14px 0!important;opacity:.9}
  .stg>[lang=en].rv-kick{padding-inline:21px!important;margin-block:16px 0!important}

  /* ── project intros on mobile: logo first, then the copy ──
     The English lockup (Choose your / URBAN STYLE, Collecting / NEW Moments,
     International / living experience) is a print device sized for the 1920 stage —
     on a phone it eats a screen before the reader reaches a single fact. Dropped here,
     kept on desktop. The vertical rule is decorative and has nothing to divide once
     the lockup is gone. (Omri, 01/08) */
  #ap-intro>[lang=en], #tg-intro>[lang=en], #ar-intro>[lang=en],
  #ap-intro>.vrule, #tg-intro>.vrule, #ar-intro>.vrule{display:none!important}
  #ap-intro, #tg-intro, #ar-intro{display:flex!important;flex-direction:column!important;
    padding-block:28px 30px!important}
  #ap-intro>.plogo, #tg-intro>.plogo, #ar-intro>.plogo{order:0!important;
    margin:0 auto 20px!important;width:62%!important}
  #ap-intro>.t, #tg-intro>.t, #ar-intro>.t{order:1!important}
  /* (the divider baked into logo-terragolf.webp was cropped out of the asset instead —
     the page already draws that rule as a .vrule element, so it was a duplicate) */

  /* ══ developer on mobile: logo, then the copy ══
     "Building the / future" is a print lockup; on a phone it lands between the body copy
     and the logo and reads as a stray fragment. Hidden here, kept on desktop. */
  #developer>[lang=en]{display:none!important}
  #developer{display:flex!important;flex-direction:column!important}
  #developer>.plogo{order:0!important;margin:6px auto 20px!important;width:64%!important}
  #developer>.t{order:1!important}
  #developer>.dev-collage{order:2!important}

  /* ══ contact form — glass card, after clients/bat-galim ══
     bat-galim: rounded card over the section, translucent fields (rgba(255,255,255,.1)),
     1px hairline border, 11px radius, 50px tall, 16px right-aligned text, big gold CTA. */
  /* mobile only — desktop keeps every tile. Hiding, not deleting: an earlier pass
     removed these from the DOM and stripped them off the desktop layout too. */
  #contact>.ct-collage{display:none!important}
  #developer .dev-collage img[src*="1380163520"],
  #developer .dev-collage img[data-src*="1380163520"]{display:none!important}
  /* width must be calc(100% - 2*margin): the generic .stg>*{width:100%!important} forces
     390px, and a plain margin then pushes the box off-centre by exactly the margin. */
  #contact form{padding:22px 18px 20px!important;margin:0 auto!important;
    width:calc(100% - 32px)!important;max-width:calc(100% - 32px)!important;
    box-sizing:border-box!important;display:flex!important;flex-direction:column;gap:10px;
    background:rgba(31,38,78,.055);border:1px solid rgba(31,38,78,.14);
    border-radius:20px;box-shadow:0 18px 46px -26px rgba(31,38,78,.45)}
  #contact form::before{content:"השאירו פרטים ונחזור אליכם";display:block;
    font-family:'Assistant',sans-serif;font-weight:600;font-size:1.42rem;line-height:1.25;
    color:#1F264E;text-align:center;margin:0 0 4px}
  /* ::before is order 0 and ::after order 0 too, so the sub-line must sit AFTER the
     title in flex order — order:-1 put it above the heading. */
  #contact form::after{content:"קולקציית מגורי היוקרה של אילת";display:block;
    font-family:'Assistant',sans-serif;font-weight:500;font-size:.9rem;color:#1F264E;
    opacity:.62;text-align:center;order:-1;margin:-2px 0 10px}
  #contact form::before{order:-2}
  #contact form input:not([type=checkbox]){font-size:1rem!important;padding:14px 15px!important;
    height:50px!important;min-height:50px!important;box-sizing:border-box!important;
    background:rgba(255,255,255,.72)!important;color:#1F264E!important;
    border:1px solid rgba(31,38,78,.18)!important;border-radius:11px!important;
    margin:0!important;text-align:right!important}
  #contact input::placeholder{color:rgba(31,38,78,.5);opacity:1}
  #contact input:focus{outline:none;border-color:#1F264E!important;
    background:#fff!important;box-shadow:0 0 0 3px rgba(31,38,78,.12)}
  #contact input.err{border-color:#c0392b!important}
  #contact .ct-send{font-size:1.14rem!important;font-weight:700!important;
    height:56px!important;min-height:56px!important;border-radius:12px!important;
    background:#d8c08a!important;color:#1F264E!important;border:0!important;
    margin:6px 0 0!important;letter-spacing:.02em;width:100%!important;
    box-shadow:0 10px 26px -12px rgba(216,192,138,.9)}
  #contact .ct-send:active{transform:scale(.985)}
  #contact .ct-consent{padding:0!important;font-size:.86rem!important;line-height:1.5!important;
    gap:.55rem!important;align-items:flex-start!important;margin:8px 0 0!important;
    color:#1F264E!important}
  #contact .ct-consent input[type=checkbox]{width:19px!important;height:19px!important;
    min-width:19px;flex:0 0 19px!important;margin:.12rem 0 0!important}
  /* the sales-office line sat outside the card, full-bleed, and read as orphaned.
     Match the card's width and give it the card's footer treatment. */
  /* No negative margin. The -20px pull used to fake continuity made the footer ride 20px
     up into the form, and the consent row's last line landed 6px inside it — the overlap
     Omri spotted. The two panels are already seamless (form has no bottom edge), so they
     just need to sit flush at gap 0. */
  #contact>.t.t-md{width:calc(100% - 32px)!important;margin:0 auto!important;
    padding:16px 18px 18px!important;box-sizing:border-box!important;
    background:rgba(31,38,78,.055);border:1px solid rgba(31,38,78,.14);border-top:0!important;
    border-radius:0 0 20px 20px;
    text-align:center!important;font-size:.95rem!important;line-height:1.6!important;
    color:#1F264E!important}
  .ct-tel-m{display:inline-block!important}
  #contact>.t.t-md a{color:#1F264E;font-weight:600;text-decoration:none;
    border-bottom:1px solid rgba(31,38,78,.35)}
  /* one continuous card: drop the form's bottom edge so the footer does not read as a
     separate panel stuck underneath it */
  #contact form{border-radius:20px 20px 0 0;border-bottom:0!important;padding-bottom:18px!important}
  #contact>.t.t-md{border-top:0!important}
  #contact>.t:not(.t-md){padding-inline:21px!important;margin-top:16px!important}

  /* ── collages: an even 2-up grid with the same inset, instead of loose tiles ── */
  .stg>.dev-collage,.stg>.ct-collage{position:relative!important;display:grid!important;
    grid-template-columns:1fr 1fr;gap:8px;width:calc(100% - 42px)!important;
    max-width:calc(100% - 42px)!important;height:auto!important;
    margin:4px auto 18px!important;order:3}
  .dev-collage>*,.ct-collage>*{position:relative!important;inset:auto!important;
    width:100%!important;height:auto!important;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
  /* let the first tile span both columns so the grid has a focal point */
  .dev-collage>*:first-child,.ct-collage>*:first-child{grid-column:1 / -1;aspect-ratio:16/9}
  /* disclaimers read as small print, not body copy */
  .stg>.t.rv-write,.stg>.t[style*="0.446cqw"]{font-size:.8rem!important;line-height:1.5!important;
    opacity:.72;margin-block:10px 4px!important}
  /* images get the same inset and real breathing room */
  .stg>img{margin:0 21px 16px!important;width:calc(100% - 42px)!important}
  .stg>.plogo{margin:8px auto 18px!important;width:56%!important;height:auto!important}

  .stg>.pgal{position:relative!important;width:100%!important;height:auto!important;
    aspect-ratio:16/9;border-radius:4px;overflow:hidden;order:0}
  .pgal-arrow{width:40px;height:40px}
  .pgal-prev{right:10px}
  .pgal-next{left:10px}
  .pgal-dots{bottom:10px}
  /* :not([lang=en]) is load-bearing — this rule used to force direction:rtl onto the English
     Maple headings too, which reverses their WORD order: "URBAN STYLE" rendered as
     "STYLE URBAN", "NEW Moments" as "Moments NEW", "living experience" as "experience living".
     Only the Hebrew copy may be flipped to RTL here. */
  .stg>.t:not([lang=en]){white-space:normal!important;column-count:1!important;text-align:right!important;
    direction:rtl!important;height:auto!important;letter-spacing:0!important}
  .stg>.t[lang=en]{white-space:normal!important;height:auto!important;direction:ltr!important}
  .stg>.t.t-xl{font-size:2.2rem!important;line-height:1.05!important;font-family:'Maple',serif}
  .stg>.t.t-lg{font-size:1.5rem!important;line-height:1.1!important}
  .stg>.t.t-md{font-size:1.02rem!important;line-height:1.5!important}
  .stg>.t.t-sm{font-size:1.3rem!important;line-height:1.45!important}
  /* kickers and the intro eyebrow are sized in cqw for the 1920 stage; on a 390px
     container that collapses (measured 5.3px on the intro line, 8.8-10.3px on the
     Oron kickers). Pin them to rem on mobile. */
  .stg>.t.rv-kick{font-size:1rem!important;letter-spacing:.04em!important}
  /* #intro IS the .stg, so it must be `.stg#intro > .t`, not `#intro .stg > .t` */
  .stg#intro>.t:not([lang=en]):not(.t-sm):not(.t-md):not(.t-lg):not(.t-xl){font-size:1rem!important}
  /* the "NATURE" line is a <b> at 1.5em of a cqw-sized parent — pin the parent, not the child */
  /* "There is no better designer than NATURE" — parent is .t.rv-up at 1.5cqw, which on a
     390px container is ~5.9px, so its 1.5em <b> lands at 8.8px. Pin the parent. */
  .stg>.t.rv-up:not([lang=en]){font-size:1.15rem!important;line-height:1.3!important}
  .stg>.lockup{position:static!important;width:100%!important;left:auto!important;top:auto!important;gap:.2rem!important;margin-block:.4rem}
  .lockup .lk{text-align:right!important}
  .lockup .lk[style*='Maple']{font-size:2.2rem!important;line-height:1.05!important}
  .lockup .lk[style*='Oron']{font-size:1.3rem!important}
  /* hero mobile */
  #hero{padding:0}
  .hero__rule{display:none!important}
  /* relative (not static) — .hero__vid / .hero__scrim / .hero-mute are absolutely positioned inside */
  /* 16:9 like the film, edge to edge. The portrait 4:5 cut is retired (kept in
     assets/_unused) — the served mobile file is the 1280x720 landscape encode, so the
     frame fits exactly and nothing is cropped. Height follows width, so the hero grows
     with the screen: 219px at 390, 241px at 428, 432px at 768. */
  .hero__video{position:relative!important;aspect-ratio:16/9;height:auto!important;
    width:100%!important;max-width:none!important;margin-inline:0!important;border-radius:0}
  /* the hero is ~200px tall on a phone, where a fixed 44px disc reads as a fifth of its
     height. Scale the disc with the viewport — but keep a full 44px tap target under it
     via a transparent ::before, so shrinking the visual does not shrink the hit area. */
  .hero-mute{bottom:10px;left:10px;
    width:clamp(30px,8vw,40px)!important;height:clamp(30px,8vw,40px)!important}
  .hero-mute::before{content:"";position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%}
  .hero__ph b{font-size:1.5rem!important}.hero__ph small{font-size:.7rem!important}
  /* contact mobile: real stacked form */
  #contact{padding-bottom:2.4rem}
  /* :not([type=checkbox]) matters — this made the consent checkbox 355px wide, which shoved
     the "אני מאשר/ת" text and the privacy link 31px off the left edge of the screen. */
  #contact input:not([type=checkbox]){position:static!important;width:100%!important;height:auto!important;padding:.85rem 1rem!important;
    font-size:1rem!important;border-radius:8px!important;margin-block-end:.7rem;order:0}
  .ct-send{position:static!important;width:100%!important;height:auto!important;padding:.9rem!important;font-size:1.05rem!important;border-radius:8px!important;margin-block-end:.7rem}
  .ct-consent{position:static!important;width:100%!important;font-size:.8rem!important;margin-block-end:.9rem}
  .ct-consent{gap:.55rem!important;align-items:flex-start}
  .ct-consent input[type=checkbox]{width:17px!important;height:17px!important;min-width:17px;
    flex:0 0 17px!important;margin:.15rem 0 0!important;padding:0!important}
  .ct-fe{position:static!important;width:100%!important;margin:-.5rem 0 .6rem!important;font-size:.82rem!important}
  .ct-msg{position:static!important;width:100%!important;font-size:.95rem!important}

  /* ══ rhythm: let the imagery breathe full-bleed ══
     Everything was inset a uniform 21px, which reads flat over a 10,000px scroll.
     alfa alternates: copy inset, imagery edge-to-edge. Renders and the hero film are
     the moments worth running full width. */
  .stg>.pgal{width:100vw!important;max-width:100%!important;margin-inline:0!important;
    border-radius:0!important;aspect-ratio:4/3!important}
  #ap-render,#tg-render,#ar-render{padding:0!important}

  /* section rhythm — navy project blocks get air, cream spec blocks stay tight */
  /* padding-block alone left padding-inline at 0, so the body copy in all three
     project intros ran edge to edge and the first and last letter of every line
     touched the screen. 21px matches the inset the rest of the page uses. */
  #ap-intro,#tg-intro,#ar-intro{padding:34px 21px 36px!important}
  #ap-spec,#tg-spec,#ar-spec{padding-block:26px 30px!important}
  #developer{padding-block:32px 30px!important}
  #contact{padding-block:30px 34px!important}
  #intro,#location{padding-block:26px 28px!important}

  /* collage tiles read better full-bleed too, with a hairline gap */
  /* width:100% + margin does not inset — the generic .stg>*{width:100%!important} keeps the
     box at full viewport width and the margin then just shifts it off-centre (measured
     L=-21/R=21). Subtract the inset from the width and centre with auto. Same fix as the
     contact form. */
  .stg>.dev-collage{width:calc(100% - 42px)!important;max-width:calc(100% - 42px)!important;
    margin-inline:auto!important}

  /* ══ animated section dividers ══
     Each project announcement is the one cream→navy transition on the page, so the
     divider does the handover: it starts on cream and lands in the navy section.
     Seamless loops are done by drawing every path TWICE, 800px apart, inside an
     800-wide viewBox and translating by -50% — no gap when it wraps.
     Motion is transform-only. */
  /* Omri, 03/08: the animated sea / sand / fish dividers are off on mobile.
     The markup and the rest of these rules stay so it is a one-line revert —
     flip this back to display:block!important. */
  .sxn-div{display:none!important}
  .sxn-div svg{display:block;width:100%;height:82px}
  .sxn-div svg>g{will-change:transform}

  /* 1 — waves, into AQUA PORT. Three layers, turquoise surf grading down into the
     navy the section itself sits on, so the band still hands over to #1F264E. */
  .sxn-div--waves .wv-3 path{fill:#7FD4D0}
  .sxn-div--waves .wv-2 path{fill:#35A8AE}
  .sxn-div--waves .wv-1 path{fill:#1F6E7E}
  .sxn-div--waves .wv-3{opacity:.85;animation:sxnDrift 19s linear infinite}
  .sxn-div--waves .wv-2{opacity:.92;animation:sxnDrift 13s linear infinite reverse}
  .sxn-div--waves .wv-1{opacity:1;  animation:sxnDrift  9s linear infinite}

  /* 2 — sand, into TERRA & GOLF. Earth-toned band, parasols and castles drifting slowly. */
  /* a summer promenade: turquoise shallows behind, warm sand in front, striped parasols */
  .sxn-div--sand{background:var(--cream,#FAF3EB)}
  .sxn-div--sand .sd-sea path{fill:#5EC8C8;opacity:.9}
  .sxn-div--sand .sd-sea{animation:sxnDrift 21s linear infinite}
  .sxn-div--sand .sd-far path{fill:#E7C98F}
  .sxn-div--sand .sd-far{animation:sxnDrift 26s linear infinite}
  .sxn-div--sand .sd-props{animation:sxnFloat 7s ease-in-out infinite}
  .sxn-div--sand .sd-solid{fill:#D9AF6A}
  .sxn-div--sand .sd-solid-d{fill:#C4954E}
  .sxn-div--sand .sd-pole{stroke:#8a6a3a;stroke-width:2;opacity:.9;stroke-linecap:round}
  .sxn-div--sand .sd-shade{fill:#E4674A}
  .sxn-div--sand .sd-shade-alt{fill:#F2F0EA}
  .sxn-div--sand .sd-flag{fill:#E4674A}
  .sxn-div--sand .sd-ball{fill:#E4674A}
  .sxn-div--sand .sd-ball-w{fill:#F7F4EE}

  /* 3 — shallow water with a small school, into AQUA RESORT */
  .sxn-div--fish .fs-water path{fill:#2FA3AC}
  .sxn-div--fish .fs-water{animation:sxnDrift 16s linear infinite}
  .sxn-div--fish .fs-deep path{fill:#1F6E7E}
  .sxn-div--fish .fs-deep{animation:sxnDrift 23s linear infinite reverse}
  /* the school swims INSIDE the water band, so it has to contrast with the water, not the
     page. (First pass made them #1F264E — navy on navy, animating but invisible.) */
  .sxn-div--fish .fsh{fill:#FAF3EB;opacity:.9}
  .sxn-div--fish .fsh-a{--y:68px;animation:sxnSwim 11s linear infinite;         transform:translate(-40px,68px)}
  .sxn-div--fish .fsh-b{--y:76px;animation:sxnSwim 14s linear infinite -3s;     transform:translate(-40px,76px)}
  .sxn-div--fish .fsh-c{--y:62px;animation:sxnSwim  9s linear infinite -6s;     transform:translate(-40px,62px)}
  .sxn-div--fish .fsh-d{--y:82px;animation:sxnSwim 13s linear infinite -9s;     transform:translate(-40px,82px)}

  @keyframes sxnDrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes sxnFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
  @keyframes sxnSwim{from{transform:translate(-40px,var(--y,70px))}to{transform:translate(840px,var(--y,70px))}}
  @media(prefers-reduced-motion:reduce){
    .sxn-div svg *{animation:none!important}
  }

  /* ══ spec section title — centred, framed by a rule above and below ══
     All three spec sections already carry this heading in the same slot; on mobile it
     was left-aligned and floating with nothing to anchor it. */
  /* the ט.ל.ח footnote is a legal tail, not an intro — on desktop it sits in a
     corner, in the mobile stack it landed above the heading and read as its rule */
  #ap-spec>.t.rv-write, #tg-spec>.t.rv-write, #ar-spec>.t.rv-write:not(.speccol){order:9!important}
  /* photos read as a closing gallery — keep them after the accordions in every spec
     section (source order put the rail before them in tg/ar, after them in ap).
     Scoped: intro/location rails must stay where the DOM puts them. */
  #ap-spec>.spec-rail,#tg-spec>.spec-rail,#ar-spec>.spec-rail,
  #ap-spec>.spec-rail__hint,#tg-spec>.spec-rail__hint,#ar-spec>.spec-rail__hint{order:8!important}

  #ap-spec>.t.t-md, #tg-spec>.t.t-md, #ar-spec>.t.t-md{
    order:0!important;
    width:calc(100% - 42px)!important;max-width:calc(100% - 42px)!important;
    margin:6px auto 14px!important;padding:13px 0 14px!important;
    box-sizing:border-box!important;
    text-align:center!important;text-align-last:center!important;
    font-size:1.35rem!important;line-height:1.3!important;font-weight:700!important;
    letter-spacing:.005em;color:#1F264E!important;
    border-top:1px solid rgba(31,38,78,.28);
    border-bottom:1px solid rgba(31,38,78,.28)}

  /* ══ intro lockup band ══
     On the stage this copy is cream sitting on a navy .sh panel that covers the right
     third of the section. Mobile hides every .sh, so the three lines were cream on the
     cream section background — measured contrast 1.00, i.e. the headline of the first
     content section was invisible on every phone. Re-create the navy field as a band. */
  .intro-band{display:block!important;position:static!important;box-sizing:border-box;
    width:100vw!important;margin:18px 0 0 calc(50% - 50vw)!important;
    padding:38px 24px 44px;background:#1F264E;order:0}
  .intro-band>*{position:static!important;left:auto!important;top:auto!important;
    right:auto!important;width:100%!important;height:auto!important;transform:none!important;
    white-space:normal!important;text-align:center!important}
  .intro-band>.rv-soft{font-size:.95rem!important;line-height:1.45!important;
    letter-spacing:.01em;opacity:.92}
  .intro-band>.rv-kick{font-size:1.15rem!important;line-height:1.2!important;
    letter-spacing:.16em!important;margin-top:16px!important}
  .intro-band>.rv-head{font-size:3.4rem!important;line-height:.95!important;
    letter-spacing:.02em;margin-top:2px!important}

  /* the map carries the three project markers — cropping it to 16/10 like a photo
     cut roughly a fifth of its height away. Let it keep its own proportions. */
  #location>img.loc-map{aspect-ratio:auto!important;object-fit:contain!important;
    height:auto!important;border-radius:0!important}

    /* ══ company grid → one swipeable rail ══
     14 absolutely-placed cells cannot survive a phone. Same treatment as the spec photos:
     the wrapper becomes a real flex rail and the cells give up their coordinates. */
  /* the phone keeps a hand-driven rail — an autoplaying marquee on a touch screen
     fights the finger and cannot be read */
  .hv-grid{position:static!important;inset:auto!important;height:auto!important;
    display:block!important;overflow:visible!important;order:0;margin:6px 0 2px}
  .hv-strip{overflow-x:auto!important;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:2px 21px 10px;scroll-padding-inline:21px;scrollbar-width:none}
  .hv-strip::-webkit-scrollbar{display:none}
  .hv-track{animation:none!important;gap:10px;height:auto}
  .hv-cell{flex:0 0 68vw!important;width:68vw!important;height:auto!important;
    aspect-ratio:16/11!important;scroll-snap-align:center;border-radius:6px}
  .hv-cell figcaption{font-size:.74rem;line-height:2.1;padding-inline:8px}
  #developer{padding:30px 0 34px!important}
  #developer>.t{padding-inline:21px!important;box-sizing:border-box}

/* ══ spec photo rail — horizontal, swipeable ══ */
  .spec-rail{display:flex!important;gap:10px;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:0 21px 10px;margin:2px 0 0;width:100%!important;box-sizing:border-box;
    scroll-padding-inline:21px;scrollbar-width:none;order:0}
  .spec-rail::-webkit-scrollbar{display:none}
  /* the base sheet gives .spec-rail>* position:absolute so the desktop stage still
     works through the wrapper — it has to be handed back to normal flow here or the
     rail images stack on top of each other and the rail stops scrolling. */
  .spec-rail>img{position:static!important;flex:0 0 78%!important;width:78%!important;max-width:78%!important;
    height:auto!important;aspect-ratio:16/10;object-fit:cover;border-radius:6px;
    scroll-snap-align:center;margin:0!important}
  /* the base sheet hides this so it cannot appear on the 1920 stage; it has to be
     switched back ON here or the hint never renders at all (it never did). */
  .spec-rail__hint{display:block!important;font-family:'Assistant',sans-serif;font-size:.75rem;
    color:#1F264E;opacity:.55;text-align:center;margin:0 0 14px;order:0}

  /* ══ sticky CTA pill (after clients/alfa: 127x43, radius 999, fixed bottom-right) ══ */
  .cta-pill{display:inline-flex!important;position:fixed;right:16px;bottom:16px;z-index:85;
    align-items:center;gap:.42rem;padding:0 16px;height:44px;border-radius:999px;
    background:#1F264E;color:#FAF3EB;text-decoration:none;
    font-family:'Assistant',sans-serif;font-weight:600;font-size:.87rem;letter-spacing:.01em;
    box-shadow:0 10px 26px -8px rgba(31,38,78,.62);
    transition:transform .2s cubic-bezier(.22,1,.36,1),opacity .3s ease}
  .cta-pill svg{width:16px;height:16px;fill:currentColor;flex:0 0 16px}
  .cta-pill:active{transform:scale(.95)}
  .cta-pill:focus-visible{outline:2px solid #1F264E;outline-offset:3px}
  /* fades out once the form itself is on screen — no point pointing at what you can see */
  .cta-pill.is-hidden{opacity:0;pointer-events:none;transform:translateY(8px)}
  /* alfa separates them: CTA pill bottom-right, the round fabs bottom-LEFT. With all
     three on the right the pill (z 85) sat under the a11y button (z 9999) — measured
     overlap. Move the fabs across; the a11y panel has to follow its button. */
  .wa-fab{right:auto!important;left:16px!important;bottom:78px!important}
  #a11y-btn{right:auto!important;left:16px!important;bottom:16px!important}
  #a11y-panel{right:auto!important;left:16px!important;bottom:74px!important;
    max-width:calc(100vw - 32px)!important}
  @media(prefers-reduced-motion:reduce){.cta-pill{transition:none}}

  /* ══ mobile header — one fixed bar, modelled on clients/alfa ══
     LAST in the media query on purpose: the header elements are direct children of
     .stg, so the generic .stg>* {position:static;width:100%} and .stg>img {width:calc(100%-42px)}
     rules above have equal specificity and would win on source order.
     Was: phone on its own line, five nav links wrapped, then a near-full-width logo —
     roughly 330px of chrome before the film started. alfa does it in a 64px bar:
     small logo, phone, burger. Links move into a drawer. */
  .hero__logo,.hero__phone,.hero__nav{position:fixed!important;z-index:80}
  /* the desktop-only wrapper must not create its own box on mobile — .stg .hero__logo
     etc. below use a descendant (not child) selector so they still match through it */
  .stg>.site-nav{display:contents}
  .stg .hero__logo{z-index:80!important;top:0!important;right:14px!important;left:auto!important;
    width:96px!important;height:52px!important;aspect-ratio:auto!important;
    object-fit:contain!important;object-position:right center;margin:0!important;
    padding:8px 0!important;order:unset!important}
  .stg .hero__phone{z-index:80!important;top:0!important;right:122px!important;left:auto!important;width:auto!important;
    height:52px!important;display:flex!important;align-items:center;justify-content:flex-start!important;
    font-size:1.06rem!important;margin:0!important;order:unset!important;
    color:#1F264E!important;gap:.32rem}
  .hero__phone svg{width:.95rem!important;height:.95rem!important}

  /* the bar itself */
  .stg>.navbar-m{display:block!important;position:fixed!important;inset:0 0 auto 0!important;
    width:100%!important;height:52px!important;z-index:78;
    background:var(--cream,#FAF3EB);border-bottom:1px solid rgba(31,38,78,.12);
    box-shadow:0 2px 14px -8px rgba(31,38,78,.35)}
  .stg>.nav__toggle{display:flex!important;position:fixed!important;top:0!important;left:10px!important;
    right:auto!important;z-index:81;width:52px!important;height:52px!important;
    align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer}
  .nav__toggle span{display:block;position:relative;width:22px;height:2px;background:#1F264E;
    transition:transform .3s cubic-bezier(.22,1,.36,1),background .2s}
  .nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;left:0;
    width:22px;height:2px;background:#1F264E;
    transition:transform .3s cubic-bezier(.22,1,.36,1),top .3s cubic-bezier(.22,1,.36,1)}
  .nav__toggle span::before{top:-7px}
  .nav__toggle span::after{top:7px}
  .nav__toggle[aria-expanded=true] span{background:transparent}
  .nav__toggle[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
  .nav__toggle[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}

  /* ══ mobile menu ══
     The previous version centred five identical words on a flat navy field: 276px of
     dead space above them, the Amram mark and the phone number both swallowed by the
     overlay, and the floating WhatsApp / accessibility / CTA buttons punching through
     from underneath. Rebuilt as three bands — mark, list, call — so the panel closes a
     lead instead of only navigating. */
  .stg .hero__nav{
    z-index:120!important;position:fixed!important;
    inset:0!important;top:0!important;right:0!important;left:0!important;bottom:0!important;
    width:100%!important;height:100svh!important;max-height:none!important;
    display:flex!important;flex-direction:column!important;
    align-items:stretch!important;justify-content:center!important;
    gap:0!important;order:unset!important;
    /* warm glow off the top-right corner — the flat fill read as a placeholder */
    background:
      radial-gradient(120% 68% at 88% 0%, rgba(216,192,138,.16) 0%, rgba(216,192,138,0) 62%),
      radial-gradient(90% 55% at 8% 100%, rgba(127,212,208,.10) 0%, rgba(127,212,208,0) 70%),
      #1F264E !important;
    /* extra bottom padding biases the centred group upward — dead centre put the
       logo 300px below the close button, which read as a void */
    padding:calc(52px + 18px) 26px calc(86px + env(safe-area-inset-bottom,0px))!important;
    margin:0!important;border:0!important;
    opacity:0;visibility:hidden;overflow-y:auto;overscroll-behavior:contain;
    counter-reset:navi;
    transition:opacity .34s cubic-bezier(.22,1,.36,1),visibility .34s}
  .hero__nav.is-open{opacity:1!important;visibility:visible!important}

  /* the brand mark, in its light cut — the overlay hides the header logo */
  .stg .hero__nav::before{
    content:"";flex:0 0 auto;width:148px;height:44px;margin:2px auto 26px;
    background:url(assets/img/logo-amram-light.webp) center/contain no-repeat;opacity:.95}

  .hero__nav a:not(.nav-tel){
    display:flex!important;align-items:center;justify-content:space-between;
    font-family:'Assistant',sans-serif;font-weight:600;
    font-size:clamp(1.45rem,6vw,1.85rem)!important;line-height:1.1;letter-spacing:-.015em;
    color:#FAF3EB!important;opacity:1;
    padding:.62em .1em!important;text-align:right!important;text-decoration:none;
    border:0!important;border-bottom:1px solid rgba(250,243,235,.14)!important}
  /* ::after, not ::before — in RTL the pseudo element at the END lands on the left,
     which is where the index belongs opposite the label */
  /* the base sheet uses this same pseudo element for the desktop hover underline
     (absolute, 1.5px tall, scaleX(0)) — every one of those has to be undone or the
     index renders as an invisible hairline */
  .hero__nav a:not(.nav-tel)::after{
    counter-increment:navi;content:"0" counter(navi);
    position:static!important;inset:auto!important;
    width:auto!important;height:auto!important;background:none!important;
    transform:none!important;transition:none!important;
    font-family:'Maple',serif;font-weight:400;font-size:.62em;
    color:#d8c08a;opacity:.75;letter-spacing:.04em;direction:ltr}
  .hero__nav a:not(.nav-tel):active{background:rgba(250,243,235,.06)}
  .hero__nav a:not(.nav-tel):focus-visible{outline:2px solid #d8c08a;outline-offset:3px}

  /* call button — pinned to the foot, margin-top:auto eats the leftover height so the
     list never floats in the middle of an empty screen */
  .hero__nav .nav-tel{
    display:inline-flex!important;align-items:center;justify-content:center;gap:.5rem;
    margin:34px auto 0!important;padding:.78rem 1.6rem!important;
    border:1px solid rgba(250,243,235,.38)!important;border-radius:999px;
    background:rgba(250,243,235,.05);
    font-family:'Assistant',sans-serif;font-weight:600;font-size:1.05rem;
    color:#FAF3EB!important;text-decoration:none;letter-spacing:.01em}
  .hero__nav .nav-tel svg{width:17px;height:17px;fill:currentColor;flex:0 0 17px}
  .hero__nav .nav-tel bdi{direction:ltr}
  .hero__nav .nav-tel:active{background:rgba(250,243,235,.12)}
  .hero__nav .sep{display:none!important}

  /* Projects submenu inside the mobile drawer — no hover on touch, so it's just
     shown inline as smaller indented rows under "פרויקטים" */
  .hero__nav .nav-drop{display:flex!important;flex-direction:column!important;
    border-bottom:0!important}
  .hero__nav .nav-drop>a{border-bottom:1px solid rgba(250,243,235,.14)!important}
  .hero__nav .nav-drop__menu{
    display:flex!important;flex-direction:column!important;
    padding-inline-end:1.2em!important;margin:0 0 .3em!important
  }
  .hero__nav .nav-drop__menu a{
    font-size:clamp(1.02rem,4.2vw,1.2rem)!important;font-weight:500!important;
    color:rgba(250,243,235,.78)!important;
    padding:.5em .1em!important;border-bottom:1px solid rgba(250,243,235,.08)!important}

  /* entrance — @keyframes, not transitions: a transition on an element that was
     visibility:hidden skips its first frame and the row snaps straight to the end state */
  @keyframes navRowIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .hero__nav.is-open::before,
  .hero__nav.is-open a{animation:navRowIn .44s cubic-bezier(.22,1,.36,1) both}
  .hero__nav.is-open::before        {animation-delay:.04s}
  .hero__nav.is-open a:nth-of-type(1){animation-delay:.10s}
  .hero__nav.is-open a:nth-of-type(2){animation-delay:.16s}
  .hero__nav.is-open a:nth-of-type(3){animation-delay:.22s}
  .hero__nav.is-open a:nth-of-type(4){animation-delay:.28s}
  .hero__nav.is-open a:nth-of-type(5){animation-delay:.34s}
  .hero__nav.is-open a.nav-tel      {animation-delay:.42s}

  .nav__toggle{z-index:130!important}
  .nav__toggle[aria-expanded=true] span::before,.nav__toggle[aria-expanded=true] span::after{background:#FAF3EB!important}
  html.menu-open{overflow:hidden!important}
  /* these sit on their own fixed layers and were showing through the panel */
  html.menu-open .wa-fab,html.menu-open #a11y-btn,html.menu-open .cta-pill,
  html.menu-open #a11y-panel,html.menu-open .navbar-m{
    opacity:0!important;pointer-events:none!important;visibility:hidden!important}
  @media(prefers-reduced-motion:reduce){
    .hero__nav,.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{transition:none}
    .hero__nav.is-open::before,.hero__nav.is-open a{animation:none}
  }
  /* the film starts under the bar */
  #hero{padding-top:52px!important}

}

.speccol .spec-h{font-weight:700;margin-bottom:.1em;margin-top:.45em}.speccol .spec-li{padding-inline-start:.95em;text-indent:-.95em;margin-block:0}.speccol .spec-li::before{content:"\2022";font-size:.68em;vertical-align:.14em;margin-inline-end:.5em}

.pgal{position:absolute;inset:0;overflow:hidden}
.pgal-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .6s cubic-bezier(.16,1,.3,1);cursor:zoom-in}
.pgal-img.is-active{opacity:1;pointer-events:auto}
.pgal-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:clamp(38px,3.2vw,54px);height:clamp(38px,3.2vw,54px);border:0;border-radius:50%;background:rgba(17,20,40,.42);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s,transform .25s}
.pgal-arrow{background:rgba(17,20,40,.62);box-shadow:0 4px 18px rgba(0,0,0,.34);
  border:1.5px solid rgba(255,255,255,.5)}
.pgal-arrow:hover{background:rgba(17,20,40,.88);transform:translateY(-50%) scale(1.07);border-color:#fff}
/* Rotem, 04/08: "לא הייתי שמה לב שזה גלריה". The arrows sat at 42% opacity over bright
   renders and the dots were 8px on a busy image — nothing announced a gallery at all.
   This badge names it and counts, so the page reads as 1 of 6 rather than one photo. */
.pgal-badge{position:absolute;z-index:3;top:3.2%;inset-inline-start:2.4%;
  display:flex;align-items:center;gap:.5em;pointer-events:none;
  background:rgba(17,20,40,.62);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.26);border-radius:999px;
  padding:.42em .95em;color:#fff;font-family:'Assistant',sans-serif;
  font-weight:600;font-size:clamp(.72rem,.95cqw,.92rem);letter-spacing:.01em;
  text-shadow:0 1px 3px rgba(0,0,0,.4)}
.pgal-badge svg{width:1.05em;height:1.05em;fill:currentColor;opacity:.9}
.pgal-badge b{font-weight:700;font-variant-numeric:tabular-nums;direction:ltr}
.pgal-badge .sep{opacity:.5}
.pgal-arrow svg{width:44%;height:44%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pgal-prev{right:2.2%}.pgal-next{left:2.2%}
.pgal-dots{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:8px}
/* the dots needed a plate of their own — white on a bright render is invisible */
.pgal-dots{background:rgba(17,20,40,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:7px 11px;border-radius:999px;gap:7px;align-items:center}
.pgal-dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.5);cursor:pointer;padding:0;transition:background .25s,width .25s}
.pgal-dots button:hover{background:rgba(255,255,255,.8)}
.pgal-dots button.is-on{background:#fff;width:24px;border-radius:5px}
#pgal-lb{position:fixed;inset:0;z-index:10000;background:rgba(8,10,22,.94);display:none;align-items:center;justify-content:center}
#pgal-lb.open{display:flex}
#pgal-lb .lb-img{max-width:92vw;max-height:88vh;object-fit:contain;box-shadow:0 24px 70px rgba(0,0,0,.55);transition:transform .25s ease;transform-origin:center;cursor:zoom-in;will-change:transform}
#pgal-lb .lb-img.zoomed{cursor:zoom-out;transition:transform-origin .05s linear}
#pgal-lb.single .lb-nav{display:none}
#pgal-lb .lb-hint{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-family:'Assistant',sans-serif;font-size:.8rem;color:rgba(255,255,255,.82);background:rgba(31,38,78,.7);padding:6px 14px;border-radius:999px;pointer-events:none;display:flex;align-items:center;gap:6px}
#pgal-lb.zoomed-on .lb-hint{opacity:0}
#pgal-lb .lb-btn{position:absolute;border:0;background:rgba(255,255,255,.13);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .25s}
#pgal-lb .lb-btn:hover{background:rgba(255,255,255,.26)}
#pgal-lb .lb-close{top:22px;left:22px;width:44px;height:44px}
#pgal-lb .lb-nav{top:50%;transform:translateY(-50%);width:54px;height:54px}
#pgal-lb .lb-prev{right:26px}#pgal-lb .lb-next{left:26px}
#pgal-lb .lb-btn svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:768px){.pgal-arrow{width:40px;height:40px}#pgal-lb .lb-nav{width:44px;height:44px}
  .pgal-badge{font-size:.72rem;padding:.38em .8em;top:10px;inset-inline-start:10px}}
/* clickable apartment-type boxes → open floor plan */
.apt-hit{position:absolute;top:11.11%;height:22.4%;cursor:pointer;background:transparent;border:0;padding:0;border-radius:.6cqw;z-index:6;transition:background .2s}
.apt-hit:hover,.apt-hit:focus-visible{background:rgba(255,255,255,.10);outline:none}
.apt-hit .apt-mag{position:absolute;top:.7cqw;right:.7cqw;width:1.5cqw;height:1.5cqw;border-radius:50%;background:rgba(250,243,235,.92);display:flex;align-items:center;justify-content:center;opacity:.72;transition:opacity .2s,transform .2s}
.apt-hit:hover .apt-mag,.apt-hit:focus-visible .apt-mag{opacity:1;transform:scale(1.12)}
.apt-hit .apt-mag svg{width:64%;height:64%;fill:none;stroke:#1F264E;stroke-width:2.2;stroke-linecap:round}
@media(max-width:768px){.apt-hit{display:none}}

/* Almoni Tzar DL 4.0 Light — the family Amram's designer uses in the brochures.
   DL is the dual-language cut: the plain "Almoni Tzar AAA" file they also sent carries
   ZERO Latin glyphs, so AQUA PORT / CHOOSE YOUR STYLE fell back to a serif mid-sentence.
   Only Light (300) was supplied; Regular has been requested. Because Almoni sets 33%
   narrower than Assistant, every Hebrew block is scaled up to keep the mass the design
   was built around — measured, not guessed. */
@font-face{font-family:'Almoni';src:url(assets/fonts/AlmoniTzarDL-Light.woff2) format('woff2');font-weight:300;font-display:swap}

.lead-dock{
  --accent:#1F264E; --accent-ink:#FAF3EB; --tint:rgba(31,38,78,.06);
  /* visual LEFT: in RTL inset-inline-start resolves to the right edge, which is where
     the WhatsApp and accessibility buttons already sit — measured overlap on both. */
  position:fixed;z-index:90;inset-inline-end:22px;bottom:22px;
  direction:rtl;font-family:'Assistant',sans-serif;
  transition:opacity .3s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1)}

/* resting state — a pill. The panel only exists once it is asked for. */
.lead-dock__pill{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  padding:0 18px;height:46px;border:0;border-radius:999px;
  background:var(--accent);color:var(--accent-ink);
  font-family:inherit;font-weight:700;font-size:.95rem;letter-spacing:.01em;
  box-shadow:0 12px 30px -10px rgba(31,38,78,.55),0 2px 6px rgba(31,38,78,.16);
  transition:background .5s cubic-bezier(.22,1,.36,1),color .5s,transform .18s,filter .2s}
.lead-dock__pill svg{width:18px;height:18px;fill:currentColor;flex:0 0 18px}
.lead-dock__pill:hover{filter:brightness(1.08)}
.lead-dock__pill:active{transform:scale(.96)}
.lead-dock__panel{
  width:288px;background:#FAF3EB;border-radius:14px;overflow:hidden;position:relative;
  border:1px solid rgba(31,38,78,.14);
  box-shadow:0 18px 44px -14px rgba(31,38,78,.42),0 2px 8px rgba(31,38,78,.10)}
.lead-dock.is-collapsed .lead-dock__panel{display:none}
.lead-dock:not(.is-collapsed) .lead-dock__pill{display:none}
.lead-dock__bar{height:4px;background:var(--accent);transition:background .5s cubic-bezier(.22,1,.36,1)}
.lead-dock__in{padding:13px 15px 14px}
/* pointer-events:none — this label spans the full panel width, so its box sat on top
   of the close button and swallowed the clicks. Measured: only a 6px sliver of the ×
   was actually hittable; the centre resolved to #dockEyebrow. */
.lead-dock__eyebrow{font-size:.66rem;font-weight:600;letter-spacing:.13em;
  color:var(--accent);opacity:.9;margin-bottom:1px;transition:color .5s;min-height:1em;
  pointer-events:none}
.lead-dock__title{pointer-events:none}
.lead-dock__title{font-size:1.02rem;font-weight:700;color:#1F264E;line-height:1.2;margin-bottom:9px}
.lead-dock input[type=text],.lead-dock input[type=tel]{
  width:100%;box-sizing:border-box;margin-bottom:7px;padding:.56rem .7rem;
  border:1px solid rgba(31,38,78,.22);border-radius:8px;background:#fff;
  font-family:inherit;font-size:.92rem;color:#1F264E;transition:border-color .2s}
.lead-dock input::placeholder{color:rgba(31,38,78,.45)}
.lead-dock input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--tint)}
.lead-dock input.err{border-color:#c0392b;background:#fff6f5}
.lead-dock__fe{display:none;font-size:.72rem;color:#c0392b;margin:-4px 0 6px}
.lead-dock__fe.show{display:block}
/* RTL: the box belongs to the LEFT of its label */
.lead-dock__consent{display:flex;flex-direction:row-reverse;justify-content:flex-end;
  align-items:center;gap:.45rem;font-size:.72rem;line-height:1.35;color:#1F264E;
  margin:2px 0 9px;cursor:pointer}
.lead-dock__consent input{width:15px;height:15px;min-width:15px;margin:0;accent-color:var(--accent);cursor:pointer}
.lead-dock__consent.err{color:#c0392b}
.lead-dock__consent a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.lead-dock__send{width:100%;padding:.62rem;border:0;border-radius:8px;cursor:pointer;
  background:var(--accent);color:var(--accent-ink);
  font-family:inherit;font-weight:700;font-size:.93rem;
  transition:background .5s cubic-bezier(.22,1,.36,1),transform .16s,filter .2s}
.lead-dock__send:hover{filter:brightness(1.08)}
.lead-dock__send:active{transform:scale(.97)}
.lead-dock__send:disabled{opacity:.55;cursor:default}
.lead-dock__msg{font-size:.76rem;line-height:1.4;margin:8px 0 0;min-height:1px}
.lead-dock__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* the sales office moved here when the foot section was removed */
.lead-dock__office{margin-top:10px;padding-top:9px;border-top:1px solid rgba(31,38,78,.13);
  display:flex;align-items:center;gap:.5rem;justify-content:space-between;
  font-size:.7rem;line-height:1.35;color:rgba(31,38,78,.72)}
.lead-dock__office a{display:inline-flex;align-items:center;gap:.28rem;flex:0 0 auto;
  color:var(--accent);font-weight:700;font-size:.82rem;text-decoration:none;
  transition:color .5s,filter .2s}
.lead-dock__office a:hover{filter:brightness(1.15);text-decoration:underline}
.lead-dock__office a svg{width:13px;height:13px;fill:currentColor}
.lead-dock__office bdi{direction:ltr}
.lead-dock__close{position:absolute;z-index:3;inset-block-start:2px;inset-inline-end:2px;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border:0;background:none;cursor:pointer;color:#1F264E;opacity:.45;
  font-size:1.3rem;line-height:1;padding:0;border-radius:50%}
/* the disc stays visually small; the tap target does not */
.lead-dock__close::before{content:"";position:absolute;inset:7px;border-radius:50%;
  transition:background .2s}
.lead-dock__close:hover{opacity:.85}
.lead-dock__close:hover::before{background:rgba(31,38,78,.09)}
.lead-dock__close:active::before{background:rgba(31,38,78,.16)}
.lead-dock.is-away{opacity:0;pointer-events:none;transform:translateY(14px) scale(.97)}
/* the film owns the top of the page — the dock joins at the first project (page 4) */
.lead-dock.is-early{opacity:0;pointer-events:none;transform:translateY(16px) scale(.96)}
/* the keyboard covers anything docked to the bottom; --kb is published from the
   VisualViewport so the panel rides above it instead of behind it */
.lead-dock{margin-bottom:var(--kb,0px)}
html.menu-open .lead-dock{opacity:0;pointer-events:none;visibility:hidden}

/* mobile: dock to the foot, full width, and get out of the fabs' way */
@media(max-width:768px){
  /* collapsed, the pill hugs one corner; expanded, the panel spans the width */
  .lead-dock{inset-inline-end:12px!important;inset-inline-start:auto!important;bottom:12px}
  .lead-dock:not(.is-collapsed){inset-inline:12px!important}
  .lead-dock__panel{width:auto;border-radius:13px}
  .lead-dock__in{padding:11px 13px 12px}
  .lead-dock__title{font-size:.98rem;margin-bottom:8px}
  /* two fields side by side — a stacked form eats a third of a phone screen */
  .lead-dock__fields{display:flex;gap:7px}
  .lead-dock__fields>*{flex:1;min-width:0}
  /* 16px is not a style choice — Safari on iOS zooms the page into any focused input
     below it, and there is no way back out except a manual pinch. Anything smaller
     here breaks the whole page the moment someone taps a field. */
  .lead-dock input[type=text],.lead-dock input[type=tel]{margin-bottom:5px;font-size:16px}
  .lead-dock__consent{font-size:.7rem;margin:1px 0 8px}
  /* stack the fabs directly above the dock. Parking them at the top of the screen
     instead put them straight over the body copy — measured on the TERRA intro. The
     offset reads the dock's real height (--dock-h), which grows with error messages. */
  /* fabs keep the right edge, the dock keeps the left. --dock-h is only non-zero
     while the panel is open, when it does span the full width. */
  .wa-fab{inset-inline-end:auto!important;inset-inline-start:12px!important;
    bottom:calc(var(--dock-h,0px) + 22px)!important}
  #a11y-btn{inset-inline-end:auto!important;inset-inline-start:12px!important;
    bottom:calc(var(--dock-h,0px) + 78px)!important}
  #a11y-panel{inset-inline-end:auto!important;inset-inline-start:12px!important;
    bottom:calc(var(--dock-h,0px) + 134px)!important;max-width:calc(100vw - 24px)!important}
  /* the sticky pill pointed at a form that no longer exists */
  .cta-pill{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .lead-dock,.lead-dock__bar,.lead-dock__send,.lead-dock__eyebrow{transition:none}
}

:root{--acc:#C3A55F;--acc-soft:rgba(195,165,95,.15);--ess-e:cubic-bezier(.22,1,.36,1)}
/* global focus indicator (keyboard nav) — visible on navy AND cream */
*:focus-visible{outline:2px solid #C3A55F;outline-offset:2px;box-shadow:0 0 0 5px rgba(31,38,78,.55);border-radius:2px}
/* skip link */
.ess-skip{position:fixed;top:-60px;inset-inline-start:12px;z-index:10001;background:var(--navy);color:#fff;
  padding:10px 18px;border-radius:0 0 6px 6px;font-family:'Assistant';font-weight:600;font-size:.95rem;
  transition:top .25s var(--ess-e)}
.ess-skip:focus{top:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ── a11y state classes ── */
html.a11y-contrast{filter:contrast(1.45) saturate(1.2)}
html.a11y-gray{filter:grayscale(1) contrast(1.08)}
html.a11y-big-text{zoom:1.15}
html.a11y-bigger-text{zoom:1.32}
/* allow horizontal scroll when zoomed so nothing is clipped by body overflow-x:hidden */
html.a11y-big-text body,html.a11y-bigger-text body{overflow-x:auto!important}
body.a11y-spacing *,body.a11y-spacing *::before,body.a11y-spacing *::after{
  letter-spacing:.06em!important;word-spacing:.14em!important;line-height:1.85!important}
body.a11y-links a{text-decoration:underline!important;text-underline-offset:4px;text-decoration-thickness:2px;
  text-decoration-color:var(--acc)!important;background:var(--acc-soft)!important;padding:1px 4px!important;border-radius:3px}
body.a11y-no-anim *,body.a11y-no-anim *::before,body.a11y-no-anim *::after{
  animation:none!important;transition-duration:0s!important;scroll-behavior:auto!important}
body.a11y-no-anim .rv{opacity:1!important;transform:none!important;animation:none!important;clip-path:none!important}
body.a11y-no-anim .rv .rvw{opacity:1!important;transform:none!important;animation:none!important;filter:none!important}   /* content always visible when motion is off */
body.a11y-readable .t,body.a11y-readable .lk,body.a11y-readable p,body.a11y-readable li,body.a11y-readable input,
body.a11y-readable button,body.a11y-readable .hero__nav,body.a11y-readable a{
  font-family:'Assistant',Arial,sans-serif!important;font-style:normal!important;letter-spacing:normal!important}
body.a11y-readable .lk{font-weight:700!important}

/* ── accessibility button (bottom-inline-start) ── */
#a11y-btn{position:fixed;bottom:22px;inset-inline-start:22px;z-index:9999;width:52px;height:52px;border-radius:50%;
  background:var(--navy);border:1.5px solid var(--acc);cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px rgba(0,0,0,.4);transition:transform .3s var(--ess-e),background .3s var(--ess-e);
  animation:a11y-pulse 4s ease-in-out infinite}
#a11y-btn:hover,#a11y-btn:focus-visible{transform:scale(1.08);background:var(--acc)}
#a11y-btn svg{width:26px;height:26px;fill:var(--acc);transition:fill .3s}
#a11y-btn:hover svg,#a11y-btn:focus-visible svg{fill:var(--navy)}
@keyframes a11y-pulse{0%,100%{box-shadow:0 12px 30px rgba(0,0,0,.4),0 0 0 0 var(--acc-soft)}50%{box-shadow:0 12px 30px rgba(0,0,0,.4),0 0 0 12px transparent}}

/* ── a11y panel ── */
#a11y-panel{position:fixed;bottom:86px;inset-inline-start:22px;z-index:9998;width:min(340px,calc(100vw - 44px));
  background:var(--navy);border:1px solid var(--acc-soft);box-shadow:0 24px 70px rgba(0,0,0,.6);border-radius:10px;overflow:hidden;
  opacity:0;pointer-events:none;transform:translateY(16px) scale(.97);transform-origin:bottom left;
  transition:opacity .35s var(--ess-e),transform .4s var(--ess-e);visibility:hidden}
#a11y-panel.open{opacity:1;pointer-events:auto;transform:none;visibility:visible}
.a11y-head{padding:18px 20px 14px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between}
.a11y-title{font-family:'Assistant';font-weight:700;font-size:1.05rem;color:#fff}
.a11y-title-sub{display:block;font-family:'Maple',serif;font-style:italic;font-size:.62rem;color:var(--acc);letter-spacing:.24em;text-transform:uppercase;margin-top:2px;direction:ltr}
.a11y-close{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:transparent;cursor:pointer;color:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;transition:.25s}
.a11y-close:hover,.a11y-close:focus-visible{color:var(--acc);border-color:var(--acc);background:var(--acc-soft)}
.a11y-close svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none}
.a11y-body{padding:14px 16px}
.a11y-section{margin-bottom:14px}
.a11y-section:last-child{margin-bottom:0}
.a11y-section-title{font-family:'Maple',serif;font-style:italic;font-size:.6rem;letter-spacing:.2em;color:var(--acc);text-transform:uppercase;margin-bottom:7px;padding-inline:4px;direction:ltr}
.a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.a11y-grid.full{grid-template-columns:1fr}
.a11y-opt{display:flex;align-items:center;gap:9px;padding:10px 12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:6px;cursor:pointer;font-family:'Assistant';font-size:.82rem;font-weight:500;color:rgba(255,255,255,.78);transition:.22s;text-align:start}
.a11y-opt:hover,.a11y-opt:focus-visible{background:var(--acc-soft);border-color:var(--acc);color:#fff}
.a11y-opt.active{background:var(--acc-soft);border-color:var(--acc);color:var(--acc)}
.a11y-opt svg{width:16px;height:16px;flex-shrink:0;stroke:currentColor;stroke-width:1.5;fill:none}
.a11y-opt-label{flex:1}
.a11y-foot{padding:13px 16px;border-top:1px solid rgba(255,255,255,.1);display:flex;gap:10px;align-items:center;justify-content:space-between}
.a11y-reset{flex:1;padding:9px;background:transparent;border:1px solid rgba(255,255,255,.16);border-radius:6px;color:rgba(255,255,255,.65);font-family:'Assistant';font-size:.8rem;font-weight:500;cursor:pointer;transition:.25s}
.a11y-reset:hover,.a11y-reset:focus-visible{color:var(--acc);border-color:var(--acc)}
.a11y-statement{font-family:'Maple',serif;font-style:italic;font-size:.78rem;color:rgba(255,255,255,.85);text-decoration:none;transition:.25s;direction:ltr}
.a11y-statement:hover,.a11y-statement:focus-visible{color:var(--acc)}

/* ── shared dialog ── */
.ess-dialog{position:fixed;inset:0;z-index:10000;background:rgba(15,20,40,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .35s var(--ess-e)}
.ess-dialog.open{opacity:1;pointer-events:auto;visibility:visible}
.ess-dialog-content{background:var(--cream);color:var(--navy);padding:44px 40px 36px;max-width:700px;width:100%;max-height:86vh;overflow-y:auto;position:relative;border-radius:6px;transform:translateY(14px) scale(.985);transition:transform .45s var(--ess-e)}
.ess-dialog.open .ess-dialog-content{transform:none}
.ess-dialog-content h2{font-family:'Maple',serif;font-weight:400;font-size:2.1rem;color:var(--navy);margin-bottom:6px}
.ess-dialog-eyebrow{display:block;font-family:'Maple',serif;font-style:italic;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:#8a6d1f;margin-bottom:12px;direction:ltr}
.ess-dialog-mark{width:56px;height:2px;background:var(--acc);margin:18px 0 18px;border-radius:2px}
.ess-dialog-content h3{font-family:'Assistant';font-weight:700;font-size:1.02rem;color:var(--navy);margin-top:20px;margin-bottom:6px}
.ess-dialog-content p,.ess-dialog-content li{font-family:'Assistant';font-weight:500;font-size:.98rem;color:#4a4636;line-height:1.7;margin-bottom:5px}
.ess-dialog-content ul{padding-inline-start:20px;margin-bottom:9px}
.ess-dialog-content strong{font-weight:700;color:var(--navy)}
.ess-dialog-content a{color:#9c7d33;text-decoration:underline;text-underline-offset:3px}
.ess-dialog-close{position:absolute;top:18px;inset-inline-start:18px;padding:8px 15px;border-radius:100px;font-family:'Maple',serif;font-style:italic;font-size:.7rem;letter-spacing:.18em;color:rgba(31,38,78,.6);border:1px solid rgba(31,38,78,.2);background:transparent;cursor:pointer;transition:.28s;direction:ltr}
.ess-dialog-close:hover,.ess-dialog-close:focus-visible{border-color:var(--acc);color:#9c7d33;background:var(--acc-soft)}
@media(prefers-reduced-motion:reduce){#a11y-btn{animation:none}.ess-dialog,.ess-dialog-content,#a11y-panel{transition:none}}

#cookie-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:9999;max-width:min(700px,92vw);display:flex;gap:14px;align-items:center;background:#1F264E;color:#FAF3EB;border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:12px 16px;box-shadow:0 16px 44px -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;cursor:pointer}
#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:#1F264E}
#cookie-bar .cbtn--no{background:transparent;color:#FAF3EB;border:1px solid rgba(255,255,255,.34)}
@media(max-width:560px){#cookie-bar{flex-wrap:wrap;bottom:12px;gap:8px}#cookie-bar p{flex-basis:100%}#cookie-bar .cbtn{flex:1}}

.wa-fab{position:fixed;right:22px;bottom:86px;z-index:9997;
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#25D366;color:#fff;border:none;cursor:pointer;
  box-shadow:0 6px 18px -4px rgba(37,211,102,.5), 0 2px 6px rgba(0,0,0,.2);
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
  -webkit-tap-highlight-color:transparent}
.wa-fab:hover{transform:scale(1.08);box-shadow:0 10px 26px -4px rgba(37,211,102,.62), 0 3px 8px rgba(0,0,0,.24)}
.wa-fab:active{transform:scale(.94)}
.wa-fab:focus-visible{outline:2px solid #fff;outline-offset:3px}
.wa-fab svg{width:60%;height:60%;display:block;fill:currentColor}
/* gentle pulse to draw the eye, once the number is set */
.wa-fab.is-live::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(37,211,102,.7);animation:waPulse 2.6s cubic-bezier(.22,1,.36,1) infinite;pointer-events:none}
@keyframes waPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
@media(prefers-reduced-motion:reduce){.wa-fab.is-live::after{animation:none}.wa-fab{transition:none}}
/* awaiting a number → muted, so it never looks live before it is */
.wa-fab.is-pending{background:#8fbfa3;box-shadow:0 4px 12px -4px rgba(0,0,0,.28);cursor:default}
.wa-fab.is-pending:hover{transform:none}
/* NO mobile size/offset override on purpose: the button must stay the same 52px at
   right:22 as #a11y-btn so the two read as one vertical stack (12px gap). An earlier
   50px/right:18 override left them misaligned by 5px with only a 4px gap. */