/*
Theme Name: Elevatevision
Theme URI: https://vision.seganiko.com
Author: Elevate Vision
Description: Custom theme for Elevate Vision - the pixel-perfect static layout ported to WordPress.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: elevatevision
*/

/* =========================================================
   Elevate Vision — full stylesheet (English / LTR)
   Pixel-audited against Figma 167:30 (Dev Mode):
   • section headings  Google Sans Flex 700 / 50px / ls .07em / lh 1.16   [self-hosted, OFL]
   • Hebrew heading     Almoni ML v5 AAA 400 / 30px / ls .04em / lh 1.1    [self-hosted, installed 2026-06-08]
   • menu pill r30 · CTA/submit/active-tab/FAQ-card r23 · social r15
   ========================================================= */

/* ---- Google Sans Flex (Latin headings) — self-hosted, OFL, released by Google 2025-11.
   Variable font, weight axis 200–800. Two subsets so latin-ext glyphs (accents in project
   names) resolve without pulling the whole file. ------------------------------------------ */
@font-face{
  font-family:"Google Sans Flex";
  font-style:normal;font-weight:200 800;font-display:swap;
  src:url("assets/fonts/google-sans-flex.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Google Sans Flex";
  font-style:normal;font-weight:200 800;font-display:swap;
  src:url("assets/fonts/google-sans-flex-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---- Almoni ML v5 AAA (Hebrew headings/body) — LICENSED font by AlefAlefAlef.
   Client-provided webfonts installed 2026-06-08 (woff2 only). Exact family name per Figma.
   Weights: 300 Light, 400 Regular, 600 DemiBold, 700 Bold. ------------------------------------ */
@font-face{
  font-family:"Almoni ML v5 AAA";font-style:normal;font-weight:300;font-display:swap;
  src:url("assets/fonts/almoni-ml-v5-aaa-300.woff2") format("woff2");
}
@font-face{
  font-family:"Almoni ML v5 AAA";font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/fonts/almoni-ml-v5-aaa-400.woff2") format("woff2");
}
@font-face{
  font-family:"Almoni ML v5 AAA";font-style:normal;font-weight:700;font-display:swap;
  src:url("assets/fonts/almoni-ml-v5-aaa-700.woff2") format("woff2");
}

/* Almoni DemiBold (600) — client-provided 2026-06-09 (footer phone/email, node 353:1227). */
@font-face{
  font-family:"Almoni ML v5 AAA";font-style:normal;font-weight:600;font-display:swap;
  src:url("assets/fonts/almoni-ml-v5-aaa-600.woff2") format("woff2");
}

:root{
  --ink:#0a0a0a;
  --white:#fff;
  --cta-a:#0f81b2;
  --cta-b:#7ee1ff;
  --font:"Google Sans Flex","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-he:"Almoni ML v5 AAA","Heebo","Assistant",sans-serif;
  --pad:clamp(22px,3.2vw,60px);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* shared Figma type metrics */
  --h-ls:.07em;          /* section-heading tracking (3.5px @50px) */
  --h-lh:1.16;           /* section-heading line-height (58px @50px) */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--font);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ============================ LOGO ============================ */
/* logo travels with the viewport on scroll (per macro/prototype) — fixed like the menu/burger */
.brand{position:fixed;z-index:30;top:58px;inset-inline-start:var(--pad);display:flex;align-items:center}
/* Figma header logo box = 170×56 (matches the svg's intrinsic width/height attrs) */
.brand img{height:56px;width:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))}

/* ============================ MENU ============================ */
.navbar{
  position:fixed;z-index:50;top:45px;inset-inline-end:var(--pad);
  display:flex;align-items:center;gap:26px;
  height:72px;padding:0 8px 0 34px;
  /* Figma 392:376 — frosted translucent pill (60% white + 10px blur), no drop shadow */
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-radius:30px;
}
.navbar__links{display:flex;align-items:center;gap:30px}
.navbar__links a{
  font-weight:300;font-size:18px;letter-spacing:.36px;color:#000;
  white-space:nowrap;transition:opacity .2s;text-transform:uppercase;text-decoration:none;
}
.navbar__links a:hover{opacity:.55}

.btn-cta{
  display:inline-flex;align-items:center;justify-content:center;
  height:58px;padding:0 26px;border-radius:23px;
  font-weight:700;font-size:18px;letter-spacing:.36px;color:#fff;white-space:nowrap;
  /* Figma 392:378 — cyan→blue, left to right (sampled: #7ee1ff @left, #0f81b2 @right) */
  background:linear-gradient(90deg,var(--cta-b) 0%,var(--cta-a) 100%);
  transition:filter .2s,transform .2s var(--ease);
}
.btn-cta:hover{filter:brightness(1.06);transform:translateY(-1px)}

/* burger (mobile only) */
.burger{position:fixed;z-index:51;top:16px;inset-inline-end:var(--pad);display:none;
  width:46px;height:46px;border-radius:50%;background:rgba(18,18,18,.5);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.55);flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{width:20px;height:2px;background:#fff;transition:transform .3s,opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================ HERO ============================ */
.hero{position:relative;height:100svh;height:100vh;min-height:620px;overflow:hidden;background:#111;color:#fff}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero__shade{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,0) 30%),
            linear-gradient(0deg,rgba(0,0,0,.35),rgba(0,0,0,0) 38%)}
/* hero copy lives in a .wrap so its left edge matches EVERY other section's column.
   (was a separate 11.4vw inset that drifted toward centre on widths below 1920) */
.hero__inner{position:absolute;z-index:2;inset-inline:0;inset-block-end:clamp(48px,14.8vh,165px)}
.hero__title{
  margin:0;font-weight:400;line-height:1.24;letter-spacing:.08em;text-transform:uppercase;
  font-size:clamp(32px,4.4vw,60px);
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}

/* ============================ SHARED CONTAINER ============================ */
/* Figma content column = 1484px wide at x218 (1920 frame). max-width = 1484 + 2×40 padding,
   so after the side padding the inner content is exactly 1484, starting at ~x218. */
.wrap{max-width:1564px;margin-inline:auto;padding-inline:clamp(20px,4vw,40px)}

/* ============================ OUR EXPERTISE ============================ */
.expertise{background:#fff;padding:clamp(64px,11vh,120px) 0 clamp(40px,6vh,64px)}
/* Figma: left heading aligns to the TOP, right Hebrew copy sits at the BOTTOM (baselines meet) */
.expertise__top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px 48px;flex-wrap:wrap}
.expertise__title{margin:0;font-weight:700;line-height:var(--h-lh);letter-spacing:var(--h-ls);color:#000;
  font-size:clamp(34px,3.4vw,50px)}
.expertise__desc{margin:8px 0 0;max-width:600px;color:#000;text-align:right;
  font-family:var(--font-he);font-weight:300;line-height:1.1;letter-spacing:.04em;
  font-size:clamp(19px,1.7vw,30px)}

.expertise__tags{list-style:none;margin:clamp(40px,6vw,72px) 0 0;padding:0;position:relative;
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:10px}
.expertise__tags li{font-weight:600;font-size:clamp(15px,1.15vw,18px);letter-spacing:.3px;color:#000;
  padding:12px 16px;white-space:nowrap;cursor:pointer;position:relative;z-index:1;
  opacity:.45;transition:opacity .4s var(--ease)}
.expertise__tags li:hover{opacity:1}
.expertise__tags li.is-active{opacity:1}
/* JS "arms" the auto-slider: tags start hidden, then get dealt out (.shown) */
.expertise__tags.armed li{opacity:0}
.expertise__tags.armed li.shown{opacity:.45}
.expertise__tags.armed li.shown:hover{opacity:1}
.expertise__tags.armed li.is-active{opacity:1}
/* moving gradient ring that highlights the active service (slides, no layout reflow) */
.tag-ring{position:absolute;top:0;left:0;width:0;height:0;border:2px solid transparent;border-radius:23px;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,var(--cta-b),var(--cta-a)) border-box;
  pointer-events:none;z-index:0;opacity:0;
  transition:transform .55s var(--ease),width .55s var(--ease),height .55s var(--ease),opacity .3s}
.tag-ring.fast{transition-duration:.22s}
.mexp{display:none}   /* mobile-only OUR EXPERTISE carousel — shown ≤760 (see mobile block) */
.mproc{display:none}  /* mobile-only THE PROCESS slider — shown ≤760 (see mobile block) */
/* while mouse-dragging a slider, suspend snap so the drag tracks the cursor smoothly */
.mexp__viewport.dragging,.mproc__viewport.dragging{scroll-snap-type:none!important;scroll-behavior:auto!important}
/* one line on desktop; wrap (centered) below */
@media (max-width:1180px){.expertise__tags{flex-wrap:wrap;justify-content:center;gap:14px 10px}}

@media (max-width:760px){
  .expertise__desc{font-size:18px}
  .expertise__tags{justify-content:center;gap:10px}
  .expertise__tags li{font-size:14px;padding:9px 13px}
}

/* ============================ INTERIOR VISUALIZATIONS (full-bleed band) ============================ */
.viz{position:relative;width:100%;aspect-ratio:1920/732;min-height:360px;overflow:hidden;color:#fff;background:#222}
.viz__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:opacity .55s var(--ease)}
.viz__img--next{opacity:0}
.viz__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0;transition:opacity .55s var(--ease)}
.viz__overlay{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,0) 32%,rgba(0,0,0,.5))}
.viz__content{position:absolute;z-index:2;inset-inline:0;inset-block-end:clamp(28px,5vh,60px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.viz__title{margin:0;font-weight:700;line-height:var(--h-lh);letter-spacing:var(--h-ls);
  font-size:clamp(28px,3.2vw,50px);text-shadow:0 2px 18px rgba(0,0,0,.45);transition:opacity .3s var(--ease)}
.viz__desc{margin:0;max-width:560px;text-align:right;font-family:var(--font-he);font-weight:300;
  line-height:1.1;letter-spacing:.04em;font-size:clamp(17px,1.6vw,30px);text-shadow:0 2px 18px rgba(0,0,0,.45);transition:opacity .3s var(--ease)}
.viz.switching .viz__title,.viz.switching .viz__desc{opacity:0}
.viz__left{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(22px,3.2vw,50px)}

/* shared outlined CTA on image bands (INTERIOR VIZ "For service" / FEATURED "to the project") */
.band-btn{display:inline-flex;align-items:center;justify-content:center;min-width:190px;height:58px;padding:0 24px;
  border:1px solid rgba(255,255,255,.9);border-radius:23px;color:#fff;
  font-weight:700;font-size:18px;letter-spacing:.36px;text-transform:uppercase;white-space:nowrap;
  transition:background .2s,color .2s}
.band-btn:hover{background:#fff;color:#000}
.feature__btn{margin-top:clamp(22px,2.6vw,34px)}

@media (max-width:760px){
  .viz{aspect-ratio:auto;min-height:78vh}
  .viz__content{flex-direction:column;align-items:flex-start;gap:18px}
  .viz__desc{font-size:18px;max-width:100%;text-align:right}
  .band-btn{min-width:0;height:50px}
}

/* ============================ EDITORIAL + GALLERY ============================ */
/* Figma: 247px gap between the Interior-Visualizations band and this heading (1920 frame) */
.editorial{background:#fff;padding:clamp(88px,11.5vw,221px) 0 clamp(48px,7vh,80px)}
.editorial__head{display:flex;justify-content:space-between;align-items:flex-end;gap:48px}
.editorial__title{flex:1 1 auto;min-width:0;margin:0;max-width:1040px;text-transform:uppercase;
  font-weight:700;line-height:var(--h-lh);letter-spacing:var(--h-ls);color:#000;font-size:clamp(30px,3.2vw,50px)}
.editorial__desc{flex:0 0 auto;margin:10px 0 0;max-width:400px;text-align:right;color:#000;
  font-family:var(--font-he);font-weight:300;line-height:1.1;letter-spacing:.04em;font-size:clamp(19px,1.6vw,30px)}
@media (max-width:760px){
  .editorial__head{flex-wrap:wrap;gap:18px}
  .editorial__desc{flex:1 1 100%;max-width:100%}
}
/* forced line breaks that apply ONLY on mobile (Figma 343:981 heading + 343:983 desc).
   Desktop ignores them (display:none) so its natural wrap is unchanged. */
.ebr{display:none}
@media (max-width:760px){ .ebr{display:inline} }

.gallery{display:flex;flex-direction:column;gap:24px;margin-top:clamp(40px,5vw,64px)}
.gallery__row{display:flex;gap:24px;height:clamp(200px,26vw,501px);transition:height 1.2s cubic-bezier(.22,1,.3,1)}
.gallery__row:hover{height:clamp(300px,38vw,680px)}
.gallery__media{min-width:0;height:100%;object-fit:cover;display:block;border-radius:2px;background:#eee;will-change:transform;backface-visibility:hidden}
/* higher specificity than [data-reveal] so the flex-grow (width) transition isn't clobbered by the scroll-reveal rule; same easing/duration as the row height so width+height glide together */
/* fortes.vision-style hover morph: longer + smooth expo-out so the width/height glide, not snap */
.editorial .gallery__media{transition:opacity .7s var(--ease),transform .7s var(--ease),flex-grow 1.2s cubic-bezier(.22,1,.3,1)}
@media (max-width:760px){
  .gallery__row,.gallery__row:hover{flex-direction:column;height:auto}
  .gallery__media{width:100%;height:clamp(200px,58vw,300px);flex:none!important}
}

/* ============================ FEATURED PROJECT ============================ */
.feature{background:#fff;padding:clamp(56px,8vh,96px) 0 0}
.feature__head{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:clamp(32px,4vw,52px)}
.feature__title{flex:1 1 auto;min-width:0;margin:0;font-weight:700;line-height:var(--h-lh);letter-spacing:var(--h-ls);color:#000;font-size:clamp(30px,3.2vw,50px)}
.feature__desc{flex:0 0 auto;margin:8px 0 0;max-width:540px;text-align:right;color:#000;
  font-family:var(--font-he);font-weight:300;line-height:1.1;letter-spacing:.04em;font-size:clamp(18px,1.6vw,30px)}

.feature__stage{position:relative;width:100%;aspect-ratio:1920/1107;min-height:440px;overflow:hidden;color:#fff;
  background:#222 center/cover no-repeat;background-image:url("assets/images/e24e0578741d.png")}
.feature__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.feature__layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease)}
.feature__layer.is-shown{opacity:1}
.feature__overlay{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,0) 42%,rgba(0,0,0,.6))}
/* Figma: content (name/sub/tabs/button) on the LEFT, prev/next switcher on the RIGHT, LTR */
.feature__inner{position:absolute;inset-inline:0;inset-block-end:clamp(48px,7.1vw,136px);z-index:2;
  display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:flex-end;gap:24px}

/* Figma 167:59 — the switcher frame is an actual VECTOR: a ~16px-thick rounded ring,
   white at 30% opacity. Use the exact SVG as the border (not a CSS stroke). 318×107. */
.feature__nav{display:inline-flex;align-items:center;justify-content:space-between;
  width:clamp(220px,22vw,318px);height:clamp(76px,7.4vw,107px);
  background:url("assets/icons/switcher-frame.svg") center/100% 100% no-repeat;
  padding:0 clamp(30px,3.1vw,48px)}
.feature__arrow{display:inline-flex;align-items:center;justify-content:center;
  color:#fff;opacity:.95;transition:transform .2s,opacity .2s}
.feature__arrow:hover{opacity:1;transform:scale(1.12)}
.feature__arrow svg{width:clamp(30px,2.7vw,40px);height:auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block}

.feature__meta{text-align:left;min-width:0}
.feature__en{display:none;margin:0;font-weight:700;line-height:1.05;text-transform:uppercase;letter-spacing:.01em;
  text-shadow:0 2px 18px rgba(0,0,0,.4);transition:opacity .25s var(--ease)}   /* English name — mobile only */
.feature__en.is-fade{opacity:0}
.lbl-d{display:none}                                                          /* desktop shows the macro's English labels */
.feature__name{margin:0;font-family:var(--font);font-weight:700;line-height:1;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(30px,3vw,50px);text-shadow:0 2px 18px rgba(0,0,0,.4)}
.feature__sub{margin:12px 0 0;font-family:var(--font-he);font-weight:300;line-height:1.1;letter-spacing:.04em;
  font-size:clamp(18px,1.6vw,30px);text-shadow:0 2px 14px rgba(0,0,0,.4)}
.feature__tabs{list-style:none;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;direction:ltr;gap:0;
  margin:clamp(18px,2vw,26px) 0 0;padding:0;font-family:var(--font);font-weight:400;letter-spacing:.04em;text-transform:uppercase;font-size:clamp(14px,1.2vw,18px)}
.feature__tabs li{cursor:pointer;white-space:nowrap}
.feature__tabs li>span{opacity:.55;transition:opacity .2s}     /* dim the label; the · dot keeps a steady opacity */
.feature__tabs li:hover>span{opacity:.85}
.feature__tabs li.is-active>span{opacity:1}                     /* active = full opacity, NO underline (per macro) */
.feature__name,.feature__sub{transition:opacity .25s var(--ease)}
.feature__name.is-fade,.feature__sub.is-fade{opacity:0}
.feature__tabs li:not(:first-child)::before{content:"";display:inline-block;width:4.77px;height:4.77px;border-radius:50%;
  background:currentColor;vertical-align:middle;margin:0 13px;opacity:.55}   /* Figma 396:638 — round dot separator */

/* (FEATURED mobile rules live in the consolidated mobile block at the end of this file) */

/* ============================ BIG STATEMENT ============================ */
/* Figma: 262px gap from the Featured block above to the statement (1920 frame) */
.statement{background:#fff;padding:clamp(80px,13.6vw,262px) 0 clamp(60px,9vh,120px)}
.bigstmt{margin:0;font-weight:300;line-height:1.28;letter-spacing:.07em;text-transform:uppercase;
  font-size:clamp(34px,8.9vw,172px)}
.bigstmt__line{display:block;white-space:nowrap;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
/* per-line mask reveal: each line's text slides up from behind the clip, staggered,
   with a long expo ease for an extra-smooth cascade. Gated on [data-reveal] (added by JS)
   so without JS / with reduced-motion the text simply shows. */
.bigstmt__rise{display:block;transition:transform 1.05s cubic-bezier(.19,1,.22,1)}
.bigstmt[data-reveal]{opacity:1;transform:none}
.bigstmt[data-reveal] .bigstmt__rise{transform:translateY(120%)}
.bigstmt[data-reveal].is-in .bigstmt__rise{transform:none}
.bigstmt .bigstmt__line:nth-child(2) .bigstmt__rise{transition-delay:.12s}
.bigstmt .bigstmt__line:nth-child(3) .bigstmt__rise{transition-delay:.24s}
.bigstmt .bigstmt__line:nth-child(4) .bigstmt__rise{transition-delay:.36s}
.bigstmt__ink{color:#000}
.bigstmt__ghost{color:#d4d4d4}
/* Figma 167:113 — inline building chip ≈613×182 @172px statement ⇒ ~3.55em × 1.05em */
.bigstmt__img{display:inline-block;vertical-align:middle;height:1.05em;width:3.55em;object-fit:cover;
  object-position:center 30%;border-radius:.49em;margin:0 .14em;transform:translateY(-.03em);
  transition:transform .95s cubic-bezier(.19,1,.22,1) .28s,opacity .75s var(--ease) .28s}
/* line 3 keeps its image OUTSIDE the text-riser: the text rises from below while the
   image slides in from the right (two separate motions). */
.bigstmt__line--img .bigstmt__rise{display:inline-block;vertical-align:bottom}
.bigstmt[data-reveal] .bigstmt__img{opacity:0;transform:translate(.5em,-.03em)}
.bigstmt[data-reveal].is-in .bigstmt__img{opacity:1;transform:translateY(-.03em)}

/* ============================ THE PROCESS — scroll-pinned stepper ============================ */
/* The section is tall; .process__pin sticks to the viewport while you scroll through it,
   and JS maps scroll progress to the active step (fortes-style parallax stepper). */
.process{background:#fff;position:relative;height:560vh}
.process__pin{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;overflow:hidden;
  padding:clamp(20px,3vh,44px) 0}
.process__grid{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(32px,5vw,90px);align-items:center;width:100%}
.process__title{margin:0 0 clamp(20px,2.6vw,40px);font-weight:700;line-height:var(--h-lh);letter-spacing:var(--h-ls);color:#000;font-size:clamp(30px,3vw,50px)}

.proclist{list-style:none;margin:0;padding:0}
.proc{border-top:1px solid rgba(0,0,0,.16);padding:clamp(9px,1.15vw,16px) 0}
.proc:last-child{border-bottom:1px solid rgba(0,0,0,.16)}
.proc__row{display:flex;justify-content:space-between;align-items:center;gap:20px}
.proc__label{font-weight:200;line-height:1.1;letter-spacing:.01em;color:#cdcdcd;
  font-size:clamp(20px,2.3vw,44px);transition:color .45s var(--ease),font-weight .45s var(--ease)}
.proc__num{font-weight:200;color:#cdcdcd;font-size:clamp(18px,2vw,44px);transition:color .45s var(--ease)}
.proc.is-active .proc__label{color:#000;font-weight:700}
.proc.is-active .proc__num{color:#000;font-weight:600}
/* the active step's description expands right under its row (scroll-driven accordion) */
.proc__desc{margin:0;max-height:0;overflow:hidden;opacity:0;max-width:520px;color:#000;text-align:right;
  font-family:var(--font-he);font-weight:300;line-height:1.25;letter-spacing:.04em;font-size:clamp(14px,1.05vw,19px);
  transition:max-height .5s var(--ease),opacity .45s var(--ease),margin-top .5s var(--ease)}
.proc.is-active .proc__desc{max-height:240px;opacity:1;margin-top:clamp(8px,1vw,14px)}

/* Figma 226:67 — tall portrait image (749×974). Fill the pinned viewport as much as possible. */
.process__right{position:relative;height:min(88vh,974px);border-radius:4px;overflow:hidden;background:#eee}
.process__media{position:absolute;inset:0;overflow:hidden}
/* each new step's media slides UP from below and covers the previous one (not a crossfade) */
.process__layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translateY(100%);transition:transform .7s var(--ease);will-change:transform}
.process__layer.is-shown{transform:translateY(0)}
.process__rail{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(0,0,0,.12);z-index:2}
.process__rail-fill{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--cta-b),var(--cta-a))}

@media (max-width:820px){
  .process{height:auto}
  .process__pin{position:static;min-height:0;display:block;padding:0}
  .process__grid{grid-template-columns:1fr;gap:26px}
  .process__right{height:auto;aspect-ratio:749/974;max-height:74vh}
  .proc__desc{max-height:none;opacity:1;margin-top:clamp(8px,2vw,14px)}
}

/* ============================ AI CHARACTERS (full-bleed video) ============================ */
.ai{position:relative;width:100%;aspect-ratio:1920/1071;min-height:440px;overflow:hidden;color:#fff;background:#222}
.ai__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.ai__overlay{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,0) 38%,rgba(0,0,0,.28))}
.ai__content{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  padding-block:clamp(40px,6vh,72px)}
.ai__title{margin:0;font-weight:700;line-height:var(--h-lh);letter-spacing:var(--h-ls);
  font-size:clamp(28px,3.2vw,50px);text-shadow:0 2px 18px rgba(0,0,0,.45)}
.ai__desc{margin:0;align-self:flex-end;max-width:600px;text-align:right;
  font-family:var(--font-he);font-weight:300;line-height:1.1;letter-spacing:.04em;
  font-size:clamp(17px,1.6vw,30px);text-shadow:0 2px 14px rgba(0,0,0,.45)}
@media (max-width:760px){
  .ai{aspect-ratio:auto;min-height:80vh}
  .ai__desc{font-size:18px;max-width:100%}
}

/* ============================ FAQ (accordion cards) ============================ */
.faq{background:#fff;padding:clamp(48px,7vh,96px) 0}
.faq__title{text-align:center;margin:0 0 clamp(28px,4vw,46px);font-weight:700;letter-spacing:var(--h-ls);color:#000;font-size:clamp(30px,3vw,50px)}
.faq__list{list-style:none;margin:0 auto;padding:0;max-width:893px;display:flex;flex-direction:column;gap:28px}
.faqitem__head{position:relative;width:100%;min-height:76px;display:flex;align-items:center;justify-content:center;
  padding:14px 60px;background:#fff;border:1px solid rgba(85,180,209,.32);border-radius:23px;cursor:pointer;
  transition:border-color .25s,box-shadow .25s}
.faqitem__chev{position:absolute;left:24px;top:50%;transform:translateY(-50%);width:22px;height:22px;
  color:#cfcfcf;transition:transform .3s,color .25s}
.faqitem__q{font-family:var(--font-he);font-weight:700;line-height:1.3;text-align:center;color:#bdbdbd;
  transition:color .25s;font-size:clamp(16px,1.5vw,30px)}
.faqitem__head:hover{border-color:#55b4d1}
.faqitem.is-open .faqitem__head{border-color:#55b4d1;box-shadow:0 8px 26px rgba(85,180,209,.14)}
.faqitem.is-open .faqitem__q{color:#000}
.faqitem.is-open .faqitem__chev{color:#000;transform:translateY(-50%) rotate(180deg)}
.faqitem__panel{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.faqitem.is-open .faqitem__panel{max-height:260px}
.faqitem__a{margin:0 auto;max-width:620px;padding:16px 20px 2px;text-align:center;color:#000;
  font-family:var(--font-he);font-weight:300;line-height:1.45;font-size:clamp(15px,1.2vw,22px)}
@media (max-width:760px){
  .faqitem__head{padding:12px 48px;min-height:64px}
  .faqitem__q{font-size:16px}
}

/* ============================ START YOUR PROJECT (CTA + CF7 form) ============================ */
.cta{background:#fff;padding:clamp(160px,22vh,212px) 0 clamp(120px,18vw,300px)}   /* Figma 167:30 — FAQ bottom(10240)→CTA component(10528) = ~288px gap to "START YOUR PROJECT"; + faq pad-bottom ⇒ ~288 at ~1080h */
.cta__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,110px);align-items:start}
.cta__title{margin:0;font-weight:700;line-height:1.15;letter-spacing:.07em;color:#000;font-size:clamp(46px,7.4vw,107px)}

/* targets Contact Form 7 output classes so the real shortcode inherits these styles */
.cta__form .wpcf7-form p{margin:0 0 clamp(22px,2.4vw,34px)}
.cta__form label{display:block;font:300 18px/1.2 var(--font-he);letter-spacing:.04em;text-transform:uppercase;color:#111}   /* Figma 399:786/353:1152 — Almoni Light (was GSF) */
.cta__form .wpcf7-form-control-wrap{display:block;margin-top:4px}
.cta__form .wpcf7-text,.cta__form .wpcf7-email,.cta__form .wpcf7-tel,.cta__form .wpcf7-textarea{
  width:100%;border:0;border-bottom:1px solid #111;background:transparent;padding:0 0 4px;outline:none;
  font:400 18px/1.1 var(--font);color:#000;transition:border-color .2s}
.cta__form .wpcf7-text:focus,.cta__form .wpcf7-email:focus,.cta__form .wpcf7-tel:focus,.cta__form .wpcf7-textarea:focus{border-color:#55b4d1}
.cta__form .wpcf7-textarea{min-height:70px;resize:vertical}
.cta__actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:clamp(10px,2vw,26px)!important}
.cta__form .wpcf7-submit{appearance:none;-webkit-appearance:none;cursor:pointer;border:0;color:#fff;
  height:58px;padding:0 30px;border-radius:23px;
  font:700 18px/1 var(--font);letter-spacing:.36px;
  background:linear-gradient(90deg,var(--cta-b),var(--cta-a));box-shadow:0 8px 22px rgba(120,170,230,.35);
  transition:transform .2s,filter .2s}
.cta__form .wpcf7-submit:hover{transform:translateY(-1px);filter:brightness(1.06)}
.cta__form .wpcf7-spinner{margin:0}
.cta__form .wpcf7-form .wpcf7-response-output{margin:18px 0 0;padding:13px 18px;border:1px solid rgba(0,0,0,.14);border-radius:10px;
  background:rgba(0,0,0,.03);font:400 14px/1.45 var(--font);letter-spacing:.01em;text-align:left;color:#222}   /* .wpcf7-form scope beats CF7's default 0,2,1 */
.cta__form .wpcf7-form .wpcf7-response-output:empty{display:none}           /* no empty box before submit */
.cta__form .wpcf7-form.invalid .wpcf7-response-output,
.cta__form .wpcf7-form.unaccepted .wpcf7-response-output,
.cta__form .wpcf7-form.payment-required .wpcf7-response-output,
.cta__form .wpcf7-form.spam .wpcf7-response-output,
.cta__form .wpcf7-form.failed .wpcf7-response-output,
.cta__form .wpcf7-form.aborted .wpcf7-response-output{border-color:rgba(204,58,58,.45);background:rgba(204,58,58,.07);color:#a32525}
.cta__form .wpcf7-form.sent .wpcf7-response-output{border-color:rgba(33,150,83,.5);background:rgba(33,150,83,.08);color:#1c7a45}
.cta__form .wpcf7-not-valid{border-color:#cc3a3a !important;box-shadow:0 0 0 2px rgba(204,58,58,.10)}
.cta__form .wpcf7-not-valid-tip{display:block;color:#c0392b;font:400 12.5px/1.35 var(--font);letter-spacing:.02em;margin-top:6px}
@media (max-width:820px){
  .cta__grid{grid-template-columns:1fr;gap:30px}
  .cta__actions{justify-content:stretch}
  .cta__form .wpcf7-submit{width:100%}
}

/* ============================ FOOTER ============================ */
.footer{background:#000;color:#fff;display:flow-root}
/* Figma: footer image is very rounded — short ends nearly semicircular (~190px @1920) */
/* footer hero = client-provided PNG (footer-hero.png) with the rounded shape baked in — NO CSS rounding */
.footer__hero{margin:-14.8% auto 0;aspect-ratio:1485/440;position:relative;z-index:2}
.footer__hero img{width:100%;height:100%;object-fit:contain;display:block}

.footer__cols{display:flex;flex-wrap:wrap;justify-content:space-between;gap:36px clamp(24px,4vw,60px);
  padding:clamp(48px,6vw,84px) 0 0}
.footer__services{display:flex;gap:clamp(24px,4vw,72px)}
.footer__col{display:flex;flex-direction:column;gap:0;font:300 18px/2.22 var(--font-he);letter-spacing:.03em}   /* Figma 167:165/353:1224 — Almoni Light items, Bold SERVICES (was ABeeZee — that was only Figma's container default) */
.footer__col b{font-weight:700;margin-bottom:0;color:#fffdf2}
.footer__col a{color:rgba(255,255,255,.45);text-decoration:none;transition:color .2s}
.footer__col a:hover{color:#fff}

.footer__right{display:grid;grid-template-columns:auto auto;column-gap:clamp(18px,2vw,40px);row-gap:clamp(18px,2vw,30px);align-items:start}
.footer__lbl{font:700 18px/1 var(--font-he);letter-spacing:.04em;padding-top:8px;white-space:nowrap}
.footer__info{display:flex;flex-direction:column;gap:14px}
.footer__info a{font:600 clamp(24px,2.4vw,40px)/1 var(--font-he);letter-spacing:.09em;color:#fff;text-decoration:none}
.footer__info a:hover{opacity:.85}
.footer__icons{display:flex;gap:14px}
.footer__icons a{width:47px;height:47px;border-radius:15px;background:#fff;display:grid;place-items:center;transition:transform .2s}
.footer__icons a:hover{transform:translateY(-2px)}
.footer__icons img{width:22px;height:22px;display:block}

.footer__logo{margin-top:clamp(24px,4vw,48px)}
.footer__logo img{width:100%;display:block}
.footer__copy{display:flex;align-items:center;justify-content:center;gap:8px;
  margin:clamp(16px,2.5vw,30px) 0;font:300 16px/1 var(--font-he);color:rgba(255,255,255,.75)}
@media (max-width:820px){
  .footer__services{flex:1 1 100%;gap:30px}
  .footer__right{flex:1 1 100%}
}
@media (max-width:520px){
  .footer__services{flex-direction:column;gap:22px}
  .footer__hero{margin-top:-11%}
}
/* ============================ RESPONSIVE (header) ============================ */
@media (max-width:1080px){
  .navbar__links{gap:20px}
  .navbar{gap:18px;padding-left:26px}
  .navbar__links a,.btn-cta{font-size:16px}
}
@media (max-width:880px){
  .brand{top:20px}
  .brand img{height:34px}
  .navbar{
    top:72px;inset-inline:14px;
    flex-direction:column;align-items:stretch;gap:6px;height:auto;
    padding:16px;border-radius:22px;
    background:rgba(12,12,12,.97);box-shadow:0 18px 50px rgba(0,0,0,.4);
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity .25s,transform .25s}
  .navbar.is-open{opacity:1;transform:none;pointer-events:auto}
  .navbar__links{flex-direction:column;align-items:flex-start;gap:2px}
  .navbar__links a{color:#fff;font-size:17px;padding:11px 6px;width:100%}
  .navbar__links a:hover{opacity:1;background:rgba(255,255,255,.08);border-radius:10px}
  .btn-cta{height:52px;margin-top:6px}
  .burger{display:flex}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

/* ============================ MOTION — scroll reveal (site-wide) ============================ */
[data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none}
}

/* Footer "pops up from below" — the image jumps in, then the columns / contact / logo / copy,
   with a soft overshoot easing for the "выпрыгивать" feel. Overrides the gentle site-wide reveal. */
.footer__hero[data-reveal]{opacity:0;transform:translateY(82px);
  transition:opacity .7s var(--ease),transform .9s cubic-bezier(.22,1.32,.4,1)}
.footer__col[data-reveal],.footer__right[data-reveal],.footer__logo[data-reveal]{
  opacity:0;transform:translateY(54px);
  transition:opacity .55s var(--ease),transform .8s cubic-bezier(.25,1.3,.45,1)}
.footer__hero.is-in,.footer__col.is-in,.footer__right.is-in,.footer__logo.is-in{
  opacity:1;transform:none}
/* footer copyright never animates — it's the very last line (always in the IO bottom dead-zone),
   so it must stay statically visible on the black footer */
.footer__copy{opacity:1;transform:none}

/* Floating WhatsApp button — fixed bottom-right, opens WhatsApp chat */
.wa-fab{position:fixed;right:clamp(2px,.6vw,10px);bottom:clamp(2px,.6vw,10px);z-index:200;
  width:clamp(96px,9.5vw,118px);line-height:0;display:block;
  transition:transform .25s var(--ease);animation:wa-pop .5s .15s var(--ease) both}
.wa-fab img{width:100%;height:auto;display:block}
.wa-fab:hover{transform:scale(1.07)}
.wa-fab:active{transform:scale(.96)}
@keyframes wa-pop{from{opacity:0;transform:scale(.4) translateY(22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wa-fab{animation:none}}

/* ============================ INNER PAGE: PROJECTS ============================ */
/* Figma 399:674 (desktop 1920). Full-bleed dark hero (white logo) → centred Hebrew intro →
   project gallery (full-width + masonry + full-width). Each tile shows its name; on hover the
   image blurs (7.5px) + darkens and the service pills + "View project" fade in. */
.page--projects{background:#fff;padding:0}

/* HERO — full-bleed image, eyebrow + big title bottom-left */
.phero{position:relative;width:100%;aspect-ratio:1920/1106;min-height:560px;overflow:hidden;background:#111;color:#fff}
.phero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.phero__shade{position:absolute;inset:0;z-index:1;mix-blend-mode:multiply;background:linear-gradient(0deg,rgba(0,0,0,.4),rgba(0,0,0,0) 50%)}   /* Figma: multiply-darkened bottom band */
.phero__inner{position:absolute;z-index:2;left:clamp(24px,12.24vw,235px);bottom:8.6%}   /* Figma 399:784 — x235, title bottom ~95 from hero bottom */
.phero__eyebrow{margin:0;font-weight:400;line-height:1.15;letter-spacing:.15em;text-transform:uppercase;
  font-size:clamp(24px,2.6vw,50px);text-shadow:0 2px 18px rgba(0,0,0,.4)}
.phero__title{margin:65px 0 0;font-weight:700;line-height:1.15;letter-spacing:.075em;text-transform:uppercase;
  font-size:clamp(40px,5.21vw,100px);text-shadow:0 2px 22px rgba(0,0,0,.4)}   /* Figma: 100/lh1.15; 65px gap = the big <br> line */

/* INTRO — centred Almoni; bold 30px lead + 22px paragraphs */
.pintro{max-width:882px;margin-inline:auto;padding-top:116px;text-align:center;color:#000;font-family:var(--font-he)}
.pintro p.pintro__lead{margin:0 0 12px;font-weight:700;font-size:30px;line-height:1.1;letter-spacing:.04em}   /* beat .pintro p (Figma 30px Bold lead) */
.pintro p{margin:0 0 12px;font-weight:400;font-size:22px;line-height:1.2}
.pintro p:last-child{margin-bottom:0}

/* GALLERY — wide container (~1852 @1920, ~34px gutters) */
.pgal{width:min(1852px,calc(100% - 68px));margin:126px auto 124px;display:flex;flex-direction:column;gap:12px}   /* Figma: 126 intro→gallery; 124 + shared .cta pad ⇒ ~248 gallery→CTA title */
.pgal__masonry{display:flex;gap:12px;align-items:stretch}
.pgal__col{flex:1008 1 0;min-width:0;display:flex;flex-direction:column;gap:12px}

.ptile{position:relative;display:block;overflow:hidden;border-radius:2px;background:#222;color:#fff;min-width:0}
.ptile--wide{aspect-ratio:1852/714}
.ptile--tall{flex:832 1 0;aspect-ratio:832/939}
.pgal__col .ptile:first-child{aspect-ratio:1008/486}
.pgal__col .ptile:last-child{aspect-ratio:1008/441}
.ptile__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:filter .55s var(--ease),transform .85s var(--ease)}
.ptile__shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.45),rgba(0,0,0,0) 45%);transition:background .45s var(--ease)}
.ptile__name{position:absolute;z-index:2;left:48px;bottom:50px;margin:0;font-weight:700;font-size:22px;
  letter-spacing:.14em;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.45);
  transition:transform .45s var(--ease)}
.ptile__hover{position:absolute;z-index:2;left:48px;right:48px;bottom:48px;
  display:flex;justify-content:space-between;align-items:center;gap:22px;
  opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.ptile__tabs{display:flex;flex-wrap:wrap;gap:14px;list-style:none;margin:0;padding:0}
.ptile__tabs li{display:inline-flex;align-items:center;height:25px;padding:0 18px;box-sizing:border-box;
  border:.877px solid rgba(255,255,255,.5);border-radius:16.64px;   /* Figma 501:193 — exact pill */
  font-weight:400;font-size:14px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.ptile__view{font-weight:400;font-size:14px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
/* hover: blur + darken image, lift the name, reveal pills + view */
.ptile:hover .ptile__img,.ptile:focus-within .ptile__img{filter:blur(7.5px);transform:scale(1.05)}
.ptile:hover .ptile__shade,.ptile:focus-within .ptile__shade{background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,.28))}
.ptile:hover .ptile__name,.ptile:focus-within .ptile__name{transform:translateY(-50px)}
.ptile:hover .ptile__hover,.ptile:focus-within .ptile__hover{opacity:1;transform:none}
.ptile:focus-visible{outline:2px solid #fff;outline-offset:3px}   /* keyboard focus ring (WCAG 2.4.7) */
@media (prefers-reduced-motion:reduce){
  .ptile__img,.ptile__name,.ptile__hover,.ptile__shade{transition:none}   /* hover state still applies, just no animated movement */
}

@media (max-width:760px){
  .pgal__masonry{flex-direction:column}
  .ptile--wide,.ptile--tall,.pgal__col .ptile:first-child,.pgal__col .ptile:last-child{aspect-ratio:16/10}
  .pintro{padding-top:64px;max-width:none}
  .pintro p.pintro__lead{font-size:24px}.pintro p{font-size:18px}
  .ptile__name{left:24px;bottom:28px;font-size:18px}
  .ptile__hover{left:24px;right:24px;bottom:26px;flex-wrap:wrap;gap:12px}
}

/* Light header theme (inner pages on a white background): recolour the white logo to dark */
body.t-light .brand img{filter:invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.16))}

/* ============================ INNER PAGE: EXPERTISE ============================ */
/* hero (dark image → white logo/title stay over the shade) */
.ehero{position:relative;width:100%;aspect-ratio:1920/1111;min-height:560px;overflow:hidden;background:#111;color:#fff;display:flex;align-items:flex-end}   /* Figma 393:573 — hero image 1111 tall */
.ehero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* subtle shade only — keep the image bright (Figma has no heavy overlay); a touch at the
   top for the white logo and at the bottom for the white title/sub legibility */
.ehero__shade{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply;
  background:linear-gradient(180deg,rgba(0,0,0,0) 56%,rgba(0,0,0,.4) 100%)}   /* Figma 393:573 — bottom multiply gradient only */
.ehero__content{position:relative;z-index:2;width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;
  padding-bottom:clamp(40px,5.83vw,112px)}   /* Figma: content bottom ~112 from hero bottom */
.ehero__lead{max-width:60%}
.ehero__title{margin:0;font-weight:400;line-height:1.24;letter-spacing:.08em;text-transform:uppercase;
  font-size:clamp(28px,4.2vw,60px)}   /* Figma 393:607 — 60 / lh1.24 / 4.8px(.08em) */
/* hero CTA = white outline "ghost" button (Figma: transparent + 1px white border + white text), NOT the gradient */
.ehero__btn{margin-top:clamp(20px,2.6vw,34px);min-width:266px;background:none;border:1px solid #fff;color:#fff}   /* Figma 393:612 — w266, solid white border */
.ehero__btn:hover{background:rgba(255,255,255,.14);filter:none;transform:translateY(-1px)}
.ehero__sub{margin:0;max-width:514px;text-align:right;color:#fff;font-family:var(--font-he);font-weight:400;line-height:1.1;
  letter-spacing:.04em;font-size:clamp(20px,1.56vw,30px)}   /* Figma 393:609 — Almoni 30 / lh1.1 / 1.2px / w514 */
@media (max-width:760px){
  .ehero__content{flex-direction:column;align-items:flex-start;gap:18px}
  .ehero__lead{max-width:100%}
  .ehero__sub{max-width:100%}
}

/* "A complete visual system" — heading + image (left), Hebrew sub + numbered services (right) */
.vsys{padding-block:clamp(60px,7.24vw,139px) clamp(80px,13.1vw,251px);display:grid;grid-template-columns:880fr 521fr;
  column-gap:83px;row-gap:clamp(40px,4.85vw,93px);align-items:end}   /* 2×2 grid: title|sub (row1, bottom-aligned), image|list (row2). Image height ALWAYS == list height (Figma); content x218 / cols 880·521 */
.vsys__left,.vsys__right{display:contents}   /* flatten the wrappers → title/img/sub/list become the 4 grid cells (JS only touches .vsys__view/.vsys__list) */
.vsys__title{grid-column:1;grid-row:1;margin:0;font-weight:700;line-height:1.15;letter-spacing:.07em;text-transform:uppercase;color:#000;
  font-size:clamp(30px,3.4vw,50px)}   /* Figma 393:628 — 50 / lh1.15 / 3.5px(.07em) */
.vsys__img{grid-column:1;grid-row:2;align-self:stretch;position:relative;border-radius:3px;overflow:hidden;background:#eee}   /* NO aspect-ratio: height is driven by the list (same grid row) so the two always match at any width */
.vsys__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease),opacity .5s var(--ease)}
.vsys__img .vsys__img--next{opacity:0}   /* second layer for the click crossfade */
.vsys__img:hover img{transform:scale(1.05)}
.vsys__sub{grid-column:2;grid-row:1;margin:0;text-align:right;color:#000;font-family:var(--font-he);font-weight:400;line-height:1.1;letter-spacing:.04em;
  font-size:clamp(20px,1.56vw,30px)}   /* Figma 393:627 — Almoni 30 / lh1.1 / 1.2px */
.vsys__list{grid-column:2;grid-row:2;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}   /* row 2: this list drives the row height; the image stretches to it */
/* Figma 393:629 — 30px items, light grey rgba(0,0,0,.3); active/hovered = SOLID blue (#0f81b2)
   4px border box (r25, ~82px tall) + black BOLD text. (393:622 = the active box) */
.vsys__list li{display:flex;align-items:center;gap:24px;min-height:82px;padding:0 28px;box-sizing:border-box;
  border:4px solid transparent;border-radius:25px;cursor:pointer;transition:border-color .25s var(--ease)}
.vsys__num{color:rgba(0,0,0,.3);font-weight:400;font-size:30px;min-width:1.5em;transition:color .25s var(--ease)}
.vsys__name{color:rgba(0,0,0,.3);font-weight:400;line-height:1.2;text-transform:uppercase;white-space:nowrap;font-size:30px;transition:color .25s var(--ease),font-weight .25s var(--ease)}   /* Figma: no list tracking; one line per item */
.vsys__list li.is-active,.vsys__list li:hover{border-color:#0f81b2}
.vsys__list li.is-active .vsys__num,.vsys__list li.is-active .vsys__name,
.vsys__list li:hover .vsys__num,.vsys__list li:hover .vsys__name{color:#000}
.vsys__list li.is-active .vsys__name,.vsys__list li:hover .vsys__name{font-weight:700}
/* while hovering the list, the default-active item yields the highlight to the hovered one */
.vsys__list:hover li.is-active:not(:hover){border-color:transparent}
.vsys__list:hover li.is-active:not(:hover) .vsys__num,.vsys__list:hover li.is-active:not(:hover) .vsys__name{color:rgba(0,0,0,.3);font-weight:400}
.vsys__view{display:contents}                  /* desktop: transparent wrapper (no clipping) */
.vsys__list li.vsys__clone{display:none}        /* infinite-loop clones — hidden on desktop (beats .vsys__list li) */
@media (max-width:860px){
  .vsys{grid-template-columns:1fr;column-gap:0;row-gap:30px;align-items:start}
  .vsys__title,.vsys__sub,.vsys__img,.vsys__list{grid-column:auto;grid-row:auto;align-self:auto}   /* unflatten back to a stacked column */
  .vsys__img{aspect-ratio:880/862}   /* stacked: image gets its own height again (img stays position:absolute, fills it) */
}
/* MOBILE: the 9-item list becomes a 4-item AUTO-SCROLLING window with a bottom fade
   (Figma מומחיות 453:388 — only 4 visible at a time so the list can hold unlimited services) */
@media (max-width:760px){
  .vsys__view{display:block;overflow:hidden;height:272px;
    -webkit-mask:linear-gradient(180deg,#000 0,#000 72%,transparent 100%);
            mask:linear-gradient(180deg,#000 0,#000 72%,transparent 100%)}
  .vsys__list{gap:12px;transform:translateY(0);transition:transform .55s var(--ease);will-change:transform}
  .vsys__list li{padding-block:16px}
  .vsys__list li:hover{background:none;border-color:transparent}              /* no sticky hover-ring on touch */
  .vsys__list li.is-active{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,var(--cta-b),var(--cta-a)) border-box!important}
  .vsys__list li.is-active .vsys__num,.vsys__list li.is-active .vsys__name{color:#000!important}
  .vsys__num{font-size:18px;min-width:1.7em}
  .vsys__name{font-size:20px;white-space:nowrap}
  .vsys__list li.vsys__clone{display:flex}
}
/* reduced-motion: no auto-scroll → un-clip so the full list is readable (JS also bails) */
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .vsys__view{height:auto;overflow:visible;-webkit-mask:none;mask:none}
  .vsys__name{white-space:normal}
}

/* INTERIOR VISUALIZATIONS band — reuses .viz, taller, with a vertical service nav */
/* INTERIOR VISUALIZATIONS slider (Figma band): image STAGE (1786/1920) + WHITE NAV RAIL (134/1920).
   Rail labels are vertical (-90° → writing-mode); the active one wears the blue gradient ring.
   Copy block (title / UPPERCASE sub / Hebrew / EXPLORE PROJECT) bottom-left over the image;
   a ghost prev/next arrows pill bottom-right. JS crossfades image + copy on nav/arrow change. */
.eband{display:flex;width:100%;aspect-ratio:1920/1107;min-height:520px;background:#fff;color:#fff}
.eband__stage{position:relative;flex:1 1 auto;min-width:0;overflow:hidden;background:#222}
.eband__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:opacity .55s var(--ease)}
.eband__img--next{opacity:0}
.eband__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0;transition:opacity .55s var(--ease)}
.eband__shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,0) 34%,rgba(0,0,0,.55))}

/* bottom-left copy block */
.eband__content{position:absolute;z-index:2;left:clamp(20px,12.24vw,235px);bottom:clamp(30px,11%,128px);   /* Figma 396:641 — copy x235 */
  max-width:58%;display:flex;flex-direction:column;align-items:flex-start}
.eband__title{margin:0;font-weight:700;line-height:1.2;font-size:clamp(26px,3.2vw,50px);   /* Figma 396:641 — 50 / lh1.2 */
  text-shadow:0 2px 18px rgba(0,0,0,.45);transition:opacity .3s var(--ease)}
.eband__sub{margin:clamp(12px,1.2vw,18px) 0 0;font-weight:400;
  line-height:1.25;font-size:clamp(16px,1.15vw,22px);max-width:514px;   /* Figma 396:641 — plain 22px sentence caption (not bold caps) */
  text-shadow:0 2px 14px rgba(0,0,0,.4);transition:opacity .3s var(--ease)}
.eband__he{margin:clamp(14px,1.5vw,22px) 0 0;font-family:var(--font-he);direction:rtl;text-align:left;
  font-weight:400;line-height:1.1;letter-spacing:.04em;font-size:clamp(20px,1.56vw,30px);max-width:562px;   /* Figma 396:642 — Almoni 30 / lh1.1 / 1.2px */
  text-shadow:0 2px 14px rgba(0,0,0,.4);transition:opacity .3s var(--ease)}
.eband__btn{margin-top:clamp(20px,2.4vw,34px);min-width:230px}   /* Figma 396:653 — w230 */
.eband.switching .eband__title,.eband.switching .eband__sub,.eband.switching .eband__he{opacity:0}

/* prev/next switcher — IDENTICAL to the homepage .feature__nav: same switcher-frame.svg border + same arrow svg (client: must match the main page) */
.eband__arrows{position:absolute;z-index:2;right:clamp(16px,5%,88px);bottom:clamp(30px,11%,128px);
  display:inline-flex;align-items:center;justify-content:space-between;
  width:clamp(220px,22vw,318px);height:clamp(76px,7.4vw,107px);
  background:url("assets/icons/switcher-frame.svg") center/100% 100% no-repeat;
  padding:0 clamp(30px,3.1vw,48px)}
.eband__arrow{display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;color:#fff;opacity:.95;transition:transform .2s,opacity .2s}
.eband__arrow:hover{opacity:1;transform:scale(1.12)}
.eband__arrow svg{width:clamp(30px,2.7vw,40px);height:auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block}

/* WHITE right rail — vertical rotated nav; active item wrapped in the blue gradient ring */
.eband__rail{flex:0 0 clamp(78px,7vw,134px);background:#fff;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,1.2vw,20px);
  border-left:1px solid #ededed}
.eband__navitem{writing-mode:vertical-rl;transform:rotate(180deg);   /* Figma 434:151 — labels read bottom-to-top (-90deg) */
  background:none;border:3px solid transparent;border-radius:19px;cursor:pointer;
  padding:clamp(16px,1.7vw,28px) clamp(4px,.45vw,8px);
  color:#000;opacity:.42;font-weight:400;letter-spacing:.14em;line-height:1;white-space:nowrap;
  font-size:clamp(16px,1.18vw,22.67px);transition:opacity .25s var(--ease)}   /* Figma 396:662 — 22.67 / 3.17px(.14em) */
.eband__navitem:hover{opacity:.72}
.eband__navitem.is-active{opacity:1;border-color:#0f81b2}   /* Figma 396:666 — SOLID blue border (not gradient) */
.eband__bar{display:none}   /* mobile-only slider indicator — styled in the @media block */

/* MOBILE: vertical rail → bottom progress indicator; full-bleed image + overlaid copy + bare ← → arrows (Figma 453:388) */
@media (max-width:760px){
  .eband{flex-direction:column;aspect-ratio:auto;background:#fff}
  .eband__stage{flex:none;width:100%;aspect-ratio:auto;height:clamp(448px,110vw,486px)}
  .eband__shade{background:linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,0) 30%,rgba(0,0,0,.5))}
  .eband__content{left:var(--mpad);right:var(--mpad);max-width:none;bottom:clamp(58px,15vw,74px)}
  .eband__title{font-size:clamp(34px,11.4vw,50px);line-height:1.06}
  .eband__sub{font-size:clamp(16px,4.6vw,21px);letter-spacing:.02em;margin-top:14px;max-width:none}
  .eband__he{font-size:clamp(15px,4.4vw,20px);margin-top:13px;max-width:none}
  .eband__btn{margin-top:clamp(16px,4.6vw,24px)}
  .eband__arrows{left:auto;right:var(--mpad);transform:none;bottom:clamp(70px,18vw,86px);
    width:auto!important;height:auto!important;border:0;padding:0;background:none;gap:clamp(22px,7vw,34px)}
  .eband__rail{display:none}
  .eband__bar{display:block;position:relative;overflow:hidden;height:3px;border-radius:3px;
    background:rgba(0,0,0,.14);margin:clamp(26px,7.5vw,40px) var(--mpad) clamp(28px,8vw,42px)}
  .eband__bar-fill{position:absolute;top:0;left:0;height:100%;width:25%;border-radius:3px;background:#111;
    transform:translateX(calc(var(--ei,0) * 100%));transition:transform .45s var(--ease)}
}

/* ============================ INNER PAGE: CONTACT ============================ */
/* Figma 529:548 (desktop 1920). REDESIGN 2026-06-15: a DARK full-bleed hero image at the TOP
   (white logo, NO t-light) with the white title + intro overlaid; then a white "Choose Your
   Preferred Way To Connect" block — big left heading + 3 contact columns — and a location note;
   then the shared CTA + footer. ALL text is Google Sans Flex (var --font). Hero content is
   placed in % of the aspect-ratio'd hero (1920/698) so it stays pixel-true while it scales. */

/* ---- HERO: dark image (698 tall), white title + intro overlaid ---- */
.chero{position:relative;width:100%;aspect-ratio:1920/698;min-height:440px;overflow:hidden;background:#0c0d0f;color:#fff}
.chero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.chero__shade{position:absolute;inset:0;z-index:1;pointer-events:none;      /* subtle left darkening for white-text legibility (macro image is already dim) */
  background:linear-gradient(96deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.12) 38%,rgba(0,0,0,0) 66%)}
.chero__content{position:absolute;inset:0;z-index:2}
.chero__title{position:absolute;top:42.26%;left:11.354%;margin:0;font-family:var(--font);font-weight:400;   /* Figma 529:552 — top295/x218, GSF 100/lh1.24/.08em */
  line-height:1.24;letter-spacing:.08em;text-transform:uppercase;color:#fff;font-size:clamp(34px,5.208vw,100px)}
.chero__title-thin,.chero__title-bold{display:block;white-space:nowrap}
.chero__title-bold{font-weight:700;text-indent:1em}                          /* macro: bold line 2 sits indented (~3 leading spaces) */
.chero__intro{position:absolute;top:79.8%;left:17.552%;margin:0;max-width:47.19%;font-family:var(--font);   /* Figma 529:559 — top557/x337/w906, GSF Light 20/lh1.39/.04em */
  font-weight:300;font-size:clamp(15px,1.041vw,20px);line-height:1.39;letter-spacing:.04em;text-transform:capitalize;color:#fff}

/* ---- CHOOSE YOUR PREFERRED WAY (white): big left heading + 3 contact columns + note ---- */
.cinfo{max-width:1920px;margin-inline:auto;padding:117px 8.698% 0 11.458%}    /* heading y815 = hero(698)+117; left x220 / right x1753 */
.cinfo__grid{display:grid;grid-template-columns:32.616% 23.157% 24.201% 20.026%;align-items:start}   /* heading 500 | cols 355·371·307 → x220/720/1075/1446 */
.cinfo__title{grid-column:1;margin:0;max-width:528px;font-family:var(--font);font-weight:700;line-height:1.15;   /* Figma 733:942 — GSF Bold 50/lh1.15/.07em */
  letter-spacing:.07em;text-transform:uppercase;color:#000;font-size:clamp(30px,2.604vw,50px)}
.cway{position:relative;margin-top:23px;min-height:144px}                     /* column block at y838 (heading y815 +23); children pinned to exact macro offsets so line-height never shifts them */
.cway__title{position:absolute;top:0;left:0;margin:0;font-family:var(--font);font-weight:700;line-height:normal;   /* Figma 529:553 — y838, GSF Bold 30, leading-normal, uppercase, no tracking */
  text-transform:uppercase;color:#000;font-size:clamp(22px,1.5625vw,30px);white-space:nowrap}
.cway__desc{position:absolute;top:49px;left:0;margin:0;max-width:307px;font-family:var(--font);font-weight:300;    /* Figma 529:560 — y887 (838+49), GSF Light 18/lh1.39/.04em, 2 lines */
  font-size:18px;line-height:1.39;letter-spacing:.04em;text-transform:capitalize;color:#000}
.cway__contact{position:absolute;top:118px;left:0;font-family:var(--font);font-weight:600;font-size:20px;          /* Figma 529:556 — y956 (838+118), GSF SemiBold 20, leading-normal, uppercase, no tracking */
  line-height:normal;text-transform:uppercase;color:#000;transition:opacity .2s}
.cway__contact:hover{opacity:.62}
.cinfo__note{margin:116px 0 0;font-family:var(--font);font-weight:300;font-size:18px;line-height:1.39;         /* Figma 529:561 — GSF Light 18/lh1.39/.04em, x220 y1103, 40% black */
  letter-spacing:.04em;text-transform:capitalize;color:rgba(0,0,0,.4);white-space:pre-wrap}   /* pre-wrap keeps the macro's wide spacing around the "|" */

/* contact-only: pull the shared CTA closer (macro note y1103 → "START YOUR PROJECT" y1354 ≈ 226px gap) */
.p-contact .cta{padding-top:clamp(140px,11.77vw,226px)}

/* ---- CONTACT MOBILE — Figma 717:498 (430-frame): stacked single column. Same TEXT as desktop
   (client decision), but the mobile LAYOUT + STYLE: hero 430×674 with 30px/3-line title, grey
   thin tracked block labels, 25px phone/email, no "Choose…" heading, 14px note. ---- */
@media (max-width:760px){
  /* HERO — video keeps 430/674 proportions; title (30px, 3 lines, NO indent) + intro placed in % of the hero */
  .chero{aspect-ratio:430/674;min-height:0;max-height:88vh}
  .chero__shade{background:linear-gradient(96deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.12) 42%,rgba(0,0,0,0) 72%)}
  .chero__title{top:50%;left:10.93%;max-width:75.3%;font-size:clamp(26px,6.977vw,34px);letter-spacing:.08em}   /* Figma 717:592 — y337/x47, 30px */
  .chero__title-thin,.chero__title-bold{white-space:normal}
  .chero__title-bold{text-indent:0}
  .chero__intro{top:70.92%;left:10.93%;margin:0;max-width:80%;font-size:clamp(15px,4.19vw,18px)}              /* Figma 717:593 — y478/x47/w344, 18px */

  /* CONTACT — single stacked column; "Choose Your Preferred Way" heading is dropped on mobile */
  .cinfo{max-width:none;padding:67px 10.93% 0}                                  /* block1 heading y741 = hero(674)+67; x47 */
  .cinfo__title{display:none}
  .cinfo__grid{display:flex;flex-direction:column;align-items:stretch}          /* stretch overrides the desktop grid's align-items:start so each .cway gets full width */
  .cway{position:relative;width:100%;min-height:135px;margin:0 0 75px}          /* block = 135 tall (heading→phone); width:100% so its absolute children don't collapse to min-content; 75px to next */
  .cway:first-of-type{margin-bottom:87px}                                       /* block1→block2 gap (Figma 741→963) */
  .cway__title{position:absolute;top:0;left:0;white-space:normal;font-weight:300;font-size:20px;   /* Figma 717:605 — mobile label: GSF Light 20, grey 30%, tracking .26em */
    letter-spacing:.26em;color:rgba(0,0,0,.3)}
  .cway__desc{position:absolute;top:40px;left:0;max-width:307px}                /* Figma 717:611 — y(+40) */
  .cway__contact{position:absolute;top:104px;left:0;display:block;white-space:nowrap;font-size:25px}   /* Figma 717:608 — y(+104), GSF SemiBold 25, one line */
  .cinfo__note{margin:0;font-size:14px;color:rgba(0,0,0,.3);white-space:normal;max-width:none}   /* Figma 717:612 — y1383 (= grid bottom), GSF Light 14, grey 30% */
  .p-contact .cta{padding-top:158px}                                            /* note end → mobile "START YOUR PROJECT" (Figma 1421→1579) */
}

/* ============================================================================
   MOBILE — HOME PAGE   ·   pixel-built against Figma node 308-887 (430px frame)
   Single consolidated block (comes last → final cascade say). Mobile text gutter
   ≈45px (Figma content x=45, width 340). Full-bleed media goes edge-to-edge.
   ============================================================================ */
@media (max-width:760px){
  :root{ --mpad:clamp(20px,10.5vw,46px); }      /* ~45px @430 text gutter */
  .wrap{ padding-inline:var(--mpad); max-width:none; }

  /* ---------- HEADER: logo top-left, burger top-right (44×44 squircle) ---------- */
  .brand{ top:32px; inset-inline-start:var(--mpad); }
  .brand img{ height:37px; }   /* Figma mobile logo 113×37 */
  /* burger = the brand gradient round button (Figma Group 50: gradient fill, r100→round, white bars) */
  .burger{ display:flex; top:30px; inset-inline-end:var(--mpad);
    width:44px; height:44px; border-radius:50%; gap:4px; border:0; backdrop-filter:none;
    background:linear-gradient(90deg,var(--cta-b),var(--cta-a));
    box-shadow:0 6px 16px rgba(15,129,178,.32); }
  .burger span{ width:16px; height:2px; }

  /* ---------- HERO ---------- */
  .hero{ height:clamp(560px,90svh,720px); min-height:0; }     /* ≈717 @430 */
  .hero__inner{ inset-block-end:32px; }
  .hero__title{
    max-width:290px; margin:0;
    font-size:30px; line-height:1.24; letter-spacing:2.4px; text-transform:uppercase;
  }

  /* ---------- OUR EXPERTISE → swipe carousel ---------- */
  .expertise{ padding:clamp(46px,9vh,80px) 0 clamp(34px,6vh,54px); }
  .expertise__top{ flex-direction:column; align-items:center; text-align:center; gap:10px; }
  .expertise__title{ font-size:30px; line-height:1.08; }
  .expertise__desc{ margin:0; max-width:340px; text-align:center; font-size:20px; line-height:1.1; }
  .expertise__tags, .viz{ display:none; }        /* desktop tags + INTERIOR band are replaced by the carousel */

  .mexp{ display:block; margin-top:clamp(26px,6vw,40px); }
  .mexp__viewport{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; }
  .mexp__viewport::-webkit-scrollbar{ display:none; }
  .mexp__track{ display:flex; gap:0; }   /* clones (JS) provide both-side peeks; JS centres the active slide */
  .mexp__slide{ flex:0 0 79%; scroll-snap-align:center; border:0; padding:0 5px; background:none; cursor:pointer;
    height:clamp(290px,79vw,340px);
    transition:transform .4s var(--ease); transform:scaleY(.81); }   /* neighbours just shorter (Figma 271 vs 333), full colour */
  .mexp__slide img, .mexp__slide video{ width:100%; height:100%; object-fit:cover; border-radius:6px; }
  .mexp__slide.is-active{ transform:scaleY(1); }
  .mexp__label{ margin:clamp(22px,5vw,30px) 0 0; text-align:center; color:#000;
    font-weight:700; font-size:20px; letter-spacing:.02em; line-height:1.15; }
  .mexp__desc{ margin:10px auto 0; max-width:310px; text-align:center; color:#000;
    font-family:var(--font-he); direction:rtl; font-weight:300; font-size:20px; line-height:1.25; }
  .mexp__bar{ position:relative; height:2px; margin:clamp(22px,6vw,34px) var(--mpad) 0; background:#e6e6e6; overflow:hidden; }
  .mexp__bar-fill{ position:absolute; inset:0 auto 0 0; width:25%;
    background:linear-gradient(90deg,var(--cta-b),var(--cta-a)); transition:transform .38s var(--ease); }

  /* ---------- STATEMENT ("Designed to make architecture felt…") + EDITORIAL gallery ---------- */
  .editorial{ padding:clamp(40px,7vh,64px) 0 clamp(34px,6vh,52px); }
  .editorial__head{ flex-direction:column; align-items:stretch; gap:28px; }   /* Figma: 28px title→Hebrew */
  .editorial__title{ max-width:none; font-size:40px; line-height:1.15; }       /* Figma 343:981 — 40 / lh1.15 / 2.8px */
  .editorial__desc{ margin:0; max-width:none; text-align:right; font-size:20px; line-height:1.2; }

  /* Figma mobile gallery (308:887): 4 stacked tiles of DIFFERENT heights, then a 2-up bottom pair.
     ~10px side gutter (images at x≈10). Desktop's 2/3/2 rows are reshaped — rows 1–2 dissolve
     (display:contents) so their media stack directly at the macro aspect ratios; row 3 stays a
     side-by-side pair. 05.png is dropped on mobile (macro = 6 tiles, desktop = 7) — flagged. */
  .editorial .wrap:has(.gallery){ padding-inline:10px; }
  .gallery{ gap:11px; margin-top:79px; }
  .gallery__row:nth-child(1),
  .gallery__row:nth-child(2),
  .gallery__row:nth-child(3){ display:contents; }   /* all rows dissolve → every tile stacks full-width */
  .gallery__media{ width:100%; height:auto!important; flex:none!important; }
  .gallery__row:nth-child(1) .gallery__media:nth-child(1){ aspect-ratio:410/200; }  /* image 5  */
  .gallery__row:nth-child(1) .gallery__media:nth-child(2){ aspect-ratio:410/200; }  /* image 6  */
  .gallery__row:nth-child(2) .gallery__media:nth-child(1){ aspect-ratio:409/435; }  /* image 8 — tall */
  .gallery__row:nth-child(2) .gallery__media:nth-child(2){ aspect-ratio:409/270; }  /* image 21 */
  .gallery__row:nth-child(2) .gallery__media:nth-child(3){ display:none; }          /* 05.png — absent in mobile macro */
  /* bottom row (06.mp4, 07.png): full-width like the rest, NOT a 2-up pair (client) */
  .gallery__row:nth-child(3) .gallery__media{ aspect-ratio:410/258; }

  /* ---------- FEATURED PROJECT — full-bleed card; English name + Hebrew tagline + media tabs
       + EXPLORE PROJECT bottom-left, prev/next arrows bottom-right ---------- */
  .feature{ padding:clamp(40px,7vh,64px) 0 0; }
  .feature__head{ flex-direction:column; align-items:center; text-align:center; gap:16px; margin-bottom:34px; }
  .feature__title{ font-size:30px; line-height:1.08; white-space:nowrap; }   /* Figma 348:999 — one line */
  .feature__title br{ display:none; }
  .feature__desc{ margin:0; max-width:340px; text-align:center; font-size:20px; line-height:1.1; }

  /* Figma card 453:568 — full-bleed image, 450 tall @430 (aspect 430/450), content bottom-left */
  .feature__stage{ aspect-ratio:430/450; min-height:0; height:auto; }
  /* content + arrows sit at the ~45px gutter; padding-inline:0 cancels the .wrap's own padding
     (it already has inset-inline:--mpad) so the text doesn't get pushed to ~90px. */
  .feature__inner{ inset-inline:var(--mpad); padding-inline:0; inset-block-end:34px; display:block; }
  .feature__meta{ text-align:left; }
  .feature__en{ display:block; font-size:30px; }                              /* "KINNERET IN SAVYON" 30/bold/uppercase */
  .feature__name{ display:none; }
  .feature__sub{ margin:4px 0 0; font-size:20px; text-align:left; }
  .feature__tabs{ direction:ltr; flex-wrap:nowrap; justify-content:flex-start; margin-top:22px;
    font-family:var(--font); font-weight:300; font-size:16px; letter-spacing:.04em; white-space:nowrap; }
  .feature__tabs li:not(:first-child)::before{ margin:0 7px; }
  .lbl-d{ display:none; }
  .lbl-m{ display:inline; }
  .feature__btn{ margin-top:24px; min-width:0; width:190px; height:58px; font-size:16px; }   /* Figma 350:1046 — 190×58 r23 */
  /* two bare ← → arrows, bottom-right, vertically centred on the EXPLORE button (Figma 434:141) */
  .feature__nav{ position:absolute; right:0; bottom:0; width:auto!important; height:auto!important;
    border:0; padding:0; gap:30px; background:none; }
  .feature__arrow{ width:auto; height:auto; padding:0; border-radius:0; }
  .feature__arrow svg{ width:30px; }
  .feature__arrow:hover{ background:none; opacity:.65; }

  /* ---------- BIG STATEMENT ("Architecture begins long before construction") ---------- */
  .statement{ padding:clamp(60px,21vw,90px) 0 clamp(44px,14vw,60px); }   /* Figma: ~90px card→text, ~60px below */
  .bigstmt{ font-size:clamp(34px,9.12vw,40px); line-height:1.44; letter-spacing:.07em; }  /* Figma 352:1063 — 39.2 / lh1.44 / 2.74px(.07em) / GSF Light */
  .bigstmt__img{ width:4em; height:1.17em; border-radius:.34em; }   /* 157×46 @39px (Vector) — chip on line 3 “before” */

  /* ---------- THE PROCESS → mobile step slider (desktop scroll-pin hidden) ---------- */
  .process{ height:auto!important; min-height:0; background:#fff; padding:clamp(40px,7vh,64px) 0; }
  .process__pin{ display:none; }
  .mproc{ display:block; }
  .mproc__title{ margin:0 var(--mpad); color:#000; font-weight:700; font-size:30px; line-height:1.15; letter-spacing:.07em; text-transform:uppercase; }   /* Figma 442:169 — 30/lh1.15/2.1px */
  .mproc__viewport{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; margin-top:clamp(20px,5vw,30px); }
  .mproc__viewport::-webkit-scrollbar{ display:none; }
  .mproc__track{ display:contents; }   /* viewport is the flex/scroll row; slides are its direct items */
  .mproc__slide{ flex:0 0 100%; min-width:100%; scroll-snap-align:center; padding-inline:clamp(10px,3vw,13px); }
  .mproc__slide img,.mproc__slide video{ width:100%; height:clamp(220px,67vw,290px); object-fit:cover; border-radius:4px; }
  .mproc__bar{ position:relative; height:2px; margin:29px var(--mpad) 0; background:#e6e6e6; overflow:hidden; }   /* Figma: 29px image→rail */
  .mproc__fill{ position:absolute; inset:0 auto 0 0; width:16.667%;
    background:linear-gradient(90deg,var(--cta-b),var(--cta-a)); transition:transform .35s var(--ease); }
  .mproc__row{ display:flex; justify-content:space-between; align-items:baseline; margin:34px var(--mpad) 0; gap:14px; }   /* Figma: 34px rail→label row */
  .mproc__label{ color:#000; font-weight:700; font-size:20px; letter-spacing:.02em; text-transform:uppercase; }
  .mproc__num{ color:#000; font-weight:600; font-size:20px; }
  .mproc__desc{ margin:10px var(--mpad) 0; color:#000; font-family:var(--font-he); direction:rtl; text-align:right;
    font-weight:300; font-size:20px; line-height:1.3; }

  /* ---------- AI CHARACTERS — full-bleed band, title top-left, Hebrew desc bottom ---------- */
  .ai{ aspect-ratio:430/666; min-height:0; }                       /* Figma 353:1064 — 430×666 */
  .ai__content{ padding:83px var(--mpad) 27px; }                    /* Figma: title 83 from top, desc 27 from bottom */
  .ai__title{ font-size:30px; line-height:1.15; }                  /* Figma 353:1066 — 30 / lh1.15 / .07em(2.1px) */
  .ai__desc{ align-self:stretch; max-width:none; text-align:right; font-size:20px; line-height:1.1; }   /* Figma 353:1129 — Almoni Light 20 / lh1.1 */

  /* ---------- FAQ — cards near edge-to-edge (small side gutter) + questions WRAP freely
       (client: forcing one line with nowrap looked janky/cramped on narrow phones). ---------- */
  .faq{ padding:124px 0 clamp(44px,7vh,72px); }                       /* Figma: 124px AI→FAQ title */
  .faq__title{ font-size:30px; margin-bottom:38px; }                  /* Figma: 38px title→first card */
  .faq .wrap{ padding-inline:28px; }                                  /* Figma cards x28 w375 — 28px gutter */
  .faq__list{ gap:19px; padding-inline:0; }                           /* Figma: 19px between cards */
  .faqitem__head{ min-height:53px; padding:11px 24px; border:1px solid rgba(85,180,209,.30); border-radius:16px;
    box-shadow:0 3px 14px rgba(85,180,209,.20); }
  .faqitem__chev{ left:16px; width:12px; height:12px; }               /* Figma chevron ~12px, ~17 into card */
  .faqitem__q{ font-size:20px; line-height:1.28; white-space:normal; }   /* Figma 353:1138 Almoni Bold 20; wrap kept per client */
  .faqitem.is-open .faqitem__head{ box-shadow:0 6px 20px rgba(85,180,209,.28); }
  .faqitem.is-open .faqitem__panel{ max-height:440px; }
  .faqitem__a{ font-size:20px; font-weight:300; line-height:1.4; padding:14px 18px 2px; }   /* Figma 353:1143 Almoni Light 20 */

  /* ---------- START YOUR PROJECT (form) ---------- */
  .cta{ padding:clamp(60px,21vw,90px) 0 clamp(58px,13vw,92px); }   /* Figma: ~154px FAQ→title (w/ faq pad-bottom); bottom room for straddling footer image */
  .cta__grid{ grid-template-columns:1fr; gap:clamp(26px,7vw,38px); }
  .cta__title{ font-size:40px; line-height:1.15; }                 /* Figma 353:1153 — 40/lh1.15/.07em */
  .cta__title br{ display:none; }                                  /* Figma mobile: wraps to 2 lines "START YOUR" / "PROJECT" */
  .cta__form label{ font-size:16px; letter-spacing:.04em; }        /* Figma 353:1152 — 16px Light */
  .cta__form .wpcf7-text,.cta__form .wpcf7-email,.cta__form .wpcf7-tel,.cta__form .wpcf7-textarea{ font-size:17px; }
  .cta__actions{ justify-content:stretch; }
  .cta__form .wpcf7-submit{ width:100%; height:55px; }

  /* ---------- FOOTER — NATURAL DOM order stacked (Figma mobile): straddling image → CONTACT/Social
       → SERVICES (2 cols) → big ELEVATE VISION logo → © . (Earlier I wrongly hid the image and
       moved the logo to the top — undone.) ---------- */
  .footer__hero{ display:block; margin-top:-13%; }   /* keep the straddling image, on top (shape baked into the PNG) */
  .footer__cols{ flex-direction:column; gap:clamp(30px,8vw,44px); padding-top:clamp(40px,11vw,62px); }
  .footer__right{ order:1; display:flex; flex-direction:column; gap:clamp(14px,3vw,20px); }   /* CONTACT + Social first */
  .footer__lbl{ padding-top:0; }
  .footer__info a{ font-size:30px; letter-spacing:.06em; }                                    /* Figma 353:1227/1228 — 30px DemiBold, 1.8px */
  .footer__services{ order:2; flex-direction:row; gap:clamp(18px,8vw,48px); }                 /* then SERVICES (2 columns) */
  .footer__col{ font-size:18px; gap:0; }                                                      /* Figma 353:1224 — 18px, leading-2.22 (rhythm inherited) */
  .footer__logo{ margin-top:clamp(34px,9vw,54px); }                                           /* big two-line ELEVATE/VISION wordmark at the BOTTOM (logo-stacked.svg) */
  .footer__logo[data-reveal]{ opacity:1; transform:none; }   /* never hide it — it sits in the IO bottom dead-zone on the tall mobile footer (same reason © is static) */
  .footer__copy{ font-size:18px; text-transform:uppercase; }                                  /* Figma 353:1222 — 18px uppercase */
}

/* ============================ INNER PAGE: 404 (PAGE NOT FOUND) ============================
   Figma 857:1568 — full-bleed render hero (1920/1082) with a faint "404" watermark,
   PAGE NOT FOUND, a 2-line sub, and the gradient "Return home" pill. Content placed in % of
   the aspect-ratio'd hero so it's pixel-true @1920 and scales below. CTA + footer = shared. */
.e404{position:relative;width:100%;aspect-ratio:1920/1082;min-height:600px;overflow:hidden;background:#cfe0ea;color:#000}
.e404__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.e404__big{position:absolute;z-index:1;left:11.09%;top:19.59%;margin:0;font-family:var(--font);font-weight:700;
  font-size:clamp(96px,11.92vw,228.868px);line-height:1.15;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(0,0,0,.08);mix-blend-mode:multiply;pointer-events:none;white-space:nowrap}   /* Figma 868:1936 — x213 y212, 228.868/12%, 8% black multiply */
.e404__title{position:absolute;z-index:2;left:11.09%;top:44.48%;margin:0;font-family:var(--font);font-weight:700;
  font-size:clamp(30px,2.604vw,50px);line-height:1.15;letter-spacing:.07em;text-transform:uppercase;color:#000;white-space:nowrap}   /* 857:1572 — x213 y481, GSF Bold 50/3.5px */
.e404__sub{position:absolute;z-index:2;left:11.09%;top:51.88%;margin:0;font-family:var(--font);font-weight:300;
  font-size:clamp(15px,1.146vw,22px);line-height:1.4;text-transform:capitalize;color:#000}   /* 868:1926 — x213 y561, GSF Light 22/lh1.4, 2 lines */
.e404__btn{position:absolute;z-index:2;left:11.09%;top:59.9%;min-width:252px;text-transform:uppercase}   /* 868:1929 — x213 y648, gradient pill 252×58 (reuses .btn-cta) */

@media (max-width:760px){
  /* MOBILE 404 — Figma 902:1097 (430 frame): centred content over a 430/729 hero. */
  .e404{aspect-ratio:430/729;min-height:0}
  .e404__img{object-position:63% center}                                                  /* crop to the building (macro shows the centre-right slice) */
  .e404__big{left:50%;right:auto;transform:translateX(-50%);top:37.19%;font-size:clamp(96px,29.8vw,128.166px);text-align:center}   /* x82 y271, 128.166/12% multiply */
  .e404__title{left:50%;right:auto;transform:translateX(-50%);top:57.89%;font-size:clamp(24px,6.98vw,30px);letter-spacing:.07em}   /* x71 y422, GSF Bold 30/2.1px */
  .e404__sub{left:50%;right:auto;transform:translateX(-50%);top:67.76%;width:79.07%;max-width:340px;font-size:clamp(16px,4.65vw,20px);line-height:1.4;text-align:center}   /* x45 y494 w340, GSF Light 20/lh1.4 */
  .e404__br{display:none}                                                                 /* mobile wraps naturally (macro is one string @340) */
  .e404__btn{left:50%;right:auto;transform:translateX(-50%);top:85.87%;min-width:0;width:58.6%;max-width:252px;height:58px;margin-top:0;font-size:18px}   /* x89 y626, 252×58, text 18px (override .btn-cta mobile 52/16/mt6) */
}

/* ============================ INNER PAGE: PRIVACY POLICY ============================
   Figma 853:1220 — breadcrumb + big title + scroll icon + RTL legal sections
   (heading pinned far-right x1696, body left column w779 @x220) + dividers. Header/CTA/footer shared. */
.pp-page{background:#fff;color:#000;padding:247px 0 0}                                   /* breadcrumb y247 (below the fixed header) */
.pp-top{max-width:1494px;margin-inline:auto}                                            /* chrome x213 margins */
.pp-crumb{margin:0;font-family:var(--font);font-weight:300;font-size:18px;line-height:1.2;letter-spacing:.36px;text-transform:uppercase;color:rgba(0,0,0,.3)}
.pp-crumb a{color:inherit;text-decoration:none}
.pp-crumb a:hover{color:rgba(0,0,0,.6)}
.pp-title{margin:13px 0 0 -7px;font-family:var(--font);font-weight:700;font-size:100px;line-height:1.15;letter-spacing:7px;text-transform:uppercase;color:#000}   /* GSF Bold 100/7px; -7px → box x206 (visible P ~x213) */
.pp-scroll{display:inline-block;margin-top:41px;line-height:0}                          /* scroll-down circle, x213 y436 */
.pp-scroll svg{display:block;width:54px;height:54px}
.pp{max-width:1480px;margin:89px auto 0}                                                /* sections x220-1700; section1 top y586 */
.pp-row{position:relative;margin-top:116px}                                             /* gap to section 2 → lands it at macro y1254 */
.pp-row:first-child{margin-top:0}
.pp-row--rule{border-top:1px solid #000;margin-top:63px;padding-top:63px}               /* dividers above sections 3 & 4 (macro y1509 / y1707) → sections land at y1572 / y1770 */
.pp-row__head{position:absolute;top:0;right:4px;margin:0;font-family:var(--font-he);font-weight:700;font-size:30px;line-height:1;text-transform:uppercase;color:#000;white-space:nowrap}   /* right edge x1696 */
.pp-row--rule .pp-row__head{top:63px}                                                   /* keep heading level with the body (below the divider) */
.pp-row__body{width:779px;font-family:var(--font-he);font-weight:300;font-size:20px;line-height:1.2;letter-spacing:.8px;text-transform:uppercase;color:#000;text-align:right}
.pp-row__body p{margin:0 0 12px}
.pp-row__body p:last-child{margin:0}

@media (max-width:760px){
  /* MOBILE — Figma 853:1456 (430 frame): single column, heading stacked above body (both right-aligned),
     a divider between every section. Content gutter ≈45px (x45–385). */
  .pp-page{padding-top:170px}                                                   /* breadcrumb y170 */
  .pp-top{padding-inline:var(--mpad)}                                           /* x45 gutter */
  .pp-crumb{font-size:14px;letter-spacing:.02em}                                /* 14px (desktop 18) */
  .pp-title{font-size:30px;letter-spacing:.07em;margin:27px 0 0}                /* 30px (desktop 100), ~y214 */
  .pp-scroll{margin-top:25px}
  .pp-scroll svg{width:34px;height:34px}                                        /* 34px (desktop 54), ~y274 */
  .pp{padding-inline:var(--mpad);margin-top:92px;max-width:none}                /* section 1 head ~y400 */
  .pp-row{margin-top:0}
  .pp-row + .pp-row{border-top:1px solid #000;margin-top:26px;padding-top:86px} /* divider above every section after the first (macro: 26px above the line, 86px below to the heading) */
  .pp-row--rule{border-top:0;padding-top:0;margin-top:0}                        /* neutralise desktop rule — the adjacent selector draws all mobile dividers */
  .pp-row__head,.pp-row--rule .pp-row__head{position:static;top:auto;right:auto;display:block;width:100%;margin:0 0 18px;font-size:30px;line-height:1.05;text-align:right;white-space:normal}
  .pp-row__body{width:100%}
}

/* ============================ INNER PAGE: PLATFORM ============================
   Figma 762:838 — hero(eyebrow) · SELL BEFORE… · WHY band · WHAT IT CAN DO · HOW IT WORKS.
   Header/CTA/footer shared. Bands full-bleed (aspect-ratio); white sections in flow. */
.pf{background:#fff;color:#000}
/* -- HERO -- */
.pf-hero{position:relative;width:100%;aspect-ratio:1920/1111;min-height:560px;overflow:hidden;background:#cfcabf}
.pf-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;z-index:0}
.pf-hero__shade{position:absolute;inset:0;z-index:1;mix-blend-mode:multiply;background:linear-gradient(0deg,rgba(0,0,0,.4),rgba(0,0,0,0) 50%)}
.pf-hero__eyebrow{position:absolute;z-index:2;left:11.354%;top:72.9%;margin:0;max-width:44.7%;
  font-family:var(--font);font-weight:400;font-size:clamp(26px,3.125vw,60px);line-height:1.24;letter-spacing:.08em;text-transform:uppercase;color:#fff}
/* -- SELL BEFORE CONSTRUCTION BEGINS -- */
.pf-sell{max-width:1495px;margin-inline:auto;padding:167px 0 0}                              /* title y1278 = hero1111+167 */
.pf-sell__title{margin:0;max-width:1253px;font-family:var(--font);font-weight:700;font-size:clamp(40px,5.208vw,100px);line-height:1.15;letter-spacing:.07em;text-transform:uppercase;color:#000}
.pf-sell__he{margin:14px 0 0 auto;max-width:963px;font-family:var(--font-he);font-weight:400;font-size:clamp(20px,2.083vw,40px);line-height:1.2;letter-spacing:.04em;text-transform:uppercase;color:#000;text-align:right}
/* -- WHY YOU NEED IT? (dark band) -- */
.pf-why{position:relative;width:100%;aspect-ratio:1920/1071;min-height:520px;overflow:hidden;background:#1b1b1b;margin-top:176px}   /* band top y1906 */
.pf-why__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.pf-why__shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.05) 60%)}
.pf-why__title{position:absolute;z-index:2;left:11.354%;top:10.46%;margin:0;max-width:32%;font-family:var(--font);font-weight:700;font-size:clamp(28px,2.604vw,50px);line-height:1.15;letter-spacing:.07em;text-transform:uppercase;color:#fff}
.pf-why__he{position:absolute;z-index:2;right:11.56%;top:73.76%;margin:0;max-width:51%;font-family:var(--font-he);font-weight:400;font-size:clamp(18px,1.5625vw,30px);line-height:1.1;letter-spacing:.04em;text-transform:uppercase;color:#fff;text-align:right}
.pf-why__watch{position:absolute;z-index:2;left:11.46%;top:77.96%;display:inline-flex;align-items:center;width:317px;height:79px;box-sizing:border-box;padding:0 22px 0 6px;border:1px solid #fff;border-radius:30px;text-decoration:none}
.pf-why__play{display:flex;align-items:center;justify-content:center;flex:0 0 66px;width:66px;height:66px;border-radius:50%;background:#fff}
.pf-why__watchlbl{flex:1;text-align:center;font-family:var(--font);font-weight:700;font-size:18px;letter-spacing:.36px;text-transform:uppercase;color:#fff}
/* -- WHAT IT CAN DO? -- */
.pf-can{padding:174px 0 0}                                                                   /* title y3151 = band-end+174 */
.pf-can__title{margin:0;text-align:center;font-family:var(--font);font-weight:700;font-size:clamp(28px,2.604vw,50px);line-height:1.15;letter-spacing:.07em;text-transform:uppercase;color:#000}
.pf-can__row{display:flex;gap:6.32%;max-width:1487px;margin:89px auto 0;align-items:flex-start}   /* row top y3301 (title-bottom + 89) */
.pf-can__img{flex:0 0 51.6%;aspect-ratio:768/765;border-radius:3px;overflow:hidden}
.pf-can__img img{width:100%;height:100%;object-fit:cover;display:block}
.pf-can__list{flex:1 1 auto;list-style:none;margin:0;padding:0;direction:rtl;text-align:right}
.pf-can__list li{font-family:var(--font-he);font-weight:400;font-size:clamp(18px,1.5625vw,30px);line-height:2.85;letter-spacing:.04em;text-transform:uppercase;color:#000;border-bottom:1px solid rgba(0,0,0,.5)}
.pf-can__list li.is-lead{font-weight:700}
.pf-can__list li:last-child{border-bottom:0}
/* -- HOW IT WORKS -- */
.pf-how{display:flex;align-items:flex-start;justify-content:space-between;gap:48px;max-width:1486px;margin-inline:auto;padding:228px 0 0}   /* diagram top y4306 */
.pf-how__diagram{position:relative;flex:0 0 45.4%;aspect-ratio:1}
.pf-how__ring{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.pf-how__ringbg{fill:none;stroke:#000;stroke-opacity:.25;stroke-width:.22}
.pf-how__ringfg{fill:none;stroke:#000;stroke-width:.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .7s var(--ease)}
.pf-how__dot{position:absolute;width:4.6%;aspect-ratio:1;transform:translate(-50%,-50%);border:0;padding:0;border-radius:50%;background:#000;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease)}
.pf-how__dot::before{content:"";position:absolute;inset:-10px;border-radius:50%}   /* larger tap target */
.pf-how__dot:hover{transform:translate(-50%,-50%) scale(1.18)}
.pf-how__dot.is-active{background:#000;transform:translate(-50%,-50%);box-shadow:none}   /* active = same black dot; the travelling arc is the indicator */
.pf-how__dot:focus-visible{outline:2px solid var(--cta-a);outline-offset:3px}
.pf-how__center{position:absolute;left:50%;top:28%;transform:translateX(-50%);width:66%;display:flex;flex-direction:column;align-items:center;text-align:center;transition:opacity .3s var(--ease)}
.pf-how__center.is-fading{opacity:0}
.pf-how__icon{display:block;width:clamp(48px,3.85vw,74px);height:auto}
.pf-how__num{margin:14px 0 0;font-family:var(--font);font-weight:700;font-size:clamp(20px,1.5625vw,30px);line-height:1;color:rgba(0,0,0,.2)}
.pf-how__step{margin:12px 0 0;font-family:var(--font);font-weight:700;font-size:clamp(20px,1.5625vw,30px);line-height:1;text-transform:uppercase;color:#000}
.pf-how__stepdesc{margin:12px 0 0;font-family:var(--font-he);font-weight:400;font-size:clamp(15px,1.04vw,20px);line-height:1.1;letter-spacing:.04em;color:#000}
.pf-how__lead{flex:0 0 38%;text-align:right;margin-top:223px}   /* title 223px below the diagram top (macro 4529 vs diagram 4306) */
.pf-how__title{margin:0;font-family:var(--font);font-weight:700;font-size:clamp(28px,2.604vw,50px);line-height:1.15;letter-spacing:.07em;text-transform:uppercase;color:#000}
.pf-how__he{margin:24px 0 0;font-family:var(--font-he);font-weight:400;font-size:clamp(18px,1.5625vw,30px);line-height:1.1;letter-spacing:.04em;text-transform:uppercase;color:#000;text-align:right}

/* ============================ VIDEO LIGHTBOX (sitewide) ============================ */
.ev-vmodal{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,64px);background:rgba(0,0,0,.85)}
.ev-vmodal.is-open{display:flex}
.ev-vmodal__box{position:relative;width:min(1100px,100%);aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.ev-vmodal__box iframe,.ev-vmodal__box video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
.ev-vmodal__close{position:absolute;top:clamp(12px,2vw,26px);right:clamp(12px,2vw,26px);width:46px;height:46px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(255,255,255,.14);cursor:pointer;transition:background .2s var(--ease)}
.ev-vmodal__close:hover{background:rgba(255,255,255,.28)}
.ev-vmodal__close svg{width:22px;height:22px;stroke:#fff;stroke-width:2;stroke-linecap:round;fill:none}
@media (prefers-reduced-motion:reduce){.ev-vmodal__close{transition:none}}

/* ============================ PLATFORM — MOBILE (Figma 848:912, 430 frame) ============================
   Single column. Hero 674; no Watch button; no "What" image (list only, rules between); "How" stacked centred. */
@media (max-width:760px){
  .pf-hero{aspect-ratio:430/674}
  .pf-hero__eyebrow{left:var(--mpad);right:auto;top:auto;bottom:8.6%;max-width:65%;font-size:clamp(24px,7vw,30px);letter-spacing:.08em;line-height:1.24}   /* x47, bottom y616, w280 */
  .pf-sell{max-width:none;margin:0;padding:68px var(--mpad) 0}                                  /* title y742 */
  .pf-sell__title{font-size:clamp(26px,7vw,30px);letter-spacing:.07em;max-width:none}
  .pf-sell__he{font-size:20px;line-height:1.1;letter-spacing:.04em;max-width:none;margin-top:24px}   /* he y878 */
  .pf-why{aspect-ratio:430/662;margin-top:116px}                                                /* band y1052 */
  .pf-why__title{left:var(--mpad);top:8.76%;max-width:none;white-space:nowrap;font-size:clamp(26px,7vw,30px);letter-spacing:.07em}   /* y1110, 1 line */
  .pf-why__he{right:var(--mpad);top:47.6%;max-width:72%;font-size:20px;line-height:1.1;letter-spacing:.04em}   /* y1367 */
  .pf-why__watch{display:none}                                                                  /* mobile macro omits it */
  .pf-can{padding-top:125px}                                                                    /* title y1839 */
  .pf-can__title{font-size:clamp(26px,7vw,30px);letter-spacing:.07em}
  .pf-can__row{flex-direction:column;gap:0;max-width:none;margin-top:55px;padding-inline:var(--mpad)}   /* list y1930 */
  .pf-can__img{display:none}                                                                    /* mobile macro: list only */
  .pf-can__list{flex:none;width:100%}
  .pf-can__list li{font-size:20px;line-height:1.3;letter-spacing:.04em;padding:0 0 22px;margin-bottom:22px;border-bottom:1px solid rgba(0,0,0,.5)}
  .pf-how{flex-direction:column-reverse;align-items:center;gap:0;max-width:none;padding:68px 0 0}   /* title → he → circle (no inline pad → circle full 359) */
  .pf-how__lead{flex:none;width:100%;text-align:center;margin-top:0}
  .pf-how__title{font-size:clamp(26px,7vw,30px);letter-spacing:.07em;text-align:center}         /* y2686 */
  .pf-how__he{font-size:20px;line-height:1.1;letter-spacing:.04em;text-align:center;margin-top:18px}   /* y2743 */
  .pf-how__diagram{flex:none;width:83.5%;max-width:360px;margin-top:57px}                        /* circle y2840 */
  .pf-how__dot{width:5.4%}                                                                       /* easier tap target on mobile */
  .pf-how__center{top:24%;width:84%}
  .pf-how__icon{width:74px}
  .pf-how__num,.pf-how__step{font-size:25px}
  .pf-how__stepdesc{font-size:20px}
}

/* ============================ INNER PAGE: WORK (INNER) ============================
   Figma 771:1093 (desktop 1920, "עמוד שירות פנימי"). Full-bleed bright hero (dark logo via t-light)
   with EN title bottom-left + Hebrew subtitle bottom-right → big right-aligned Hebrew heading →
   5-image masonry gallery (same geometry as Projects) + "show more" → FAQ (reuses .faq component)
   → shared CTA/footer. Selectable template page-work.php; content via group_ev_work. */
.wd{background:#fff}

/* HERO — full-bleed image, white title bottom-left + Hebrew subtitle bottom-right */
.wd-hero{position:relative;width:100%;aspect-ratio:1920/1111;min-height:560px;overflow:hidden;background:#111;color:#fff}
.wd-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.wd-hero__shade{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply;
  background:linear-gradient(0deg,rgba(0,0,0,.42),rgba(0,0,0,0) 46%)}   /* darken bottom so white copy reads on the bright render */
.wd-hero__title{position:absolute;z-index:2;left:clamp(20px,11.35vw,218px);bottom:9.27%;margin:0;   /* x218; bottom 103/1111 */
  max-width:857px;font-family:var(--font);font-weight:400;font-size:clamp(28px,3.125vw,60px);   /* GSF Regular 60 */
  line-height:1.24;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 2px 22px rgba(0,0,0,.45)}
.wd-hero__sub{position:absolute;z-index:2;right:clamp(20px,11.61vw,223px);bottom:10.08%;margin:0;   /* right edge x1697; bottom 112/1111 */
  max-width:639px;font-family:var(--font-he);font-weight:400;font-size:clamp(18px,1.5625vw,30px);   /* Almoni Regular 30 */
  line-height:1.1;letter-spacing:.04em;text-transform:uppercase;text-align:right;text-shadow:0 2px 18px rgba(0,0,0,.45)}

/* INTRO — big right-aligned Almoni heading (right edge x1702) */
.wd-intro{padding:167px clamp(20px,11.35vw,218px) 0}   /* hero→heading gap 167; right gutter 218 */
.wd-intro__h{max-width:771px;margin:0 0 0 auto;text-align:right;color:#000;
  font-family:var(--font-he);font-weight:700;font-size:clamp(34px,4.17vw,80px);line-height:1}   /* Almoni Bold 80 */

/* GALLERY — wide container (~1852 @1920, 34px gutters), wide / (2 stacked + tall) / wide */
.wd-gal{width:min(1852px,calc(100% - 68px));margin:167px auto 0;display:flex;flex-direction:column;gap:12px}   /* heading→gallery 167 */
.wd-gal__band{display:flex;gap:12px;align-items:stretch}
.wd-gal__col{flex:1008 1 0;min-width:0;display:flex;flex-direction:column;gap:12px}
.wd-cell{position:relative;margin:0;overflow:hidden;border-radius:2px;background:#ececec;min-width:0}
.wd-cell img,.wd-cell video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wd-cell--wide{aspect-ratio:1852/714}
.wd-cell--tall{flex:832 1 0;aspect-ratio:832/939}
.wd-gal__col .wd-cell:first-child{aspect-ratio:1008/486}
.wd-gal__col .wd-cell:last-child{aspect-ratio:1008/441}
.wd-gal.is-collapsed .wd-cell--extra{display:none}

/* GALLERY — GRID variant (Figma 811:768): uniform 4-col portrait grid, tiles 436×714, col-gap 24 / row-gap 20,
   container x53→x1869 (~1816 wide, ~52px gutters). Shows 8 (2 rows); 9th+ revealed by "show more". */
.wd-gal--grid{width:min(1816px,calc(100% - 104px));display:grid;grid-template-columns:repeat(4,1fr);
  column-gap:24px;row-gap:20px;align-items:start}
.wd-cell--grid{aspect-ratio:436/714}
.wd-gal--grid.is-collapsed .wd-cell--extra{display:none}
.wd-gal--grid + .wd-more{margin-top:88px}   /* grid gallery → show-more (Figma y3053→y3141) */

/* SHOW MORE — outlined pill, centred (Figma 821:894: 202×58, border #000, r23, GSF Bold 18) */
.wd-more{display:flex;align-items:center;justify-content:center;width:202px;height:58px;margin:78px auto 0;
  border:1px solid #000;border-radius:23px;background:transparent;cursor:pointer;text-decoration:none;
  font-family:var(--font);font-weight:700;font-size:18px;letter-spacing:.02em;text-transform:uppercase;color:#000;
  transition:background .25s var(--ease),color .25s var(--ease)}
.wd-more:hover{background:#000;color:#fff}

/* FAQ — reuses the .faq component; a few deltas to match this macro (893 bars, w750 answer, 30px Q, cyan card shadow) */
.p-work .faq{padding-top:247px;padding-bottom:140px}             /* FAQ title top → y4405 */
.p-work .faq__title{margin-bottom:65px}                          /* title→bar1 gap (bar1 top → y4533) */
.p-work .faqitem__head{border-color:rgba(85,180,209,.3);box-shadow:0 4px 20px rgba(85,180,209,.2)}
.p-work .faqitem.is-open .faqitem__head{box-shadow:0 4px 20px rgba(85,180,209,.2)}   /* macro: all cards share the same soft shadow */
.p-work .faqitem:not(.is-open) .faqitem__q{color:rgba(0,0,0,.2)}   /* macro closed = 20% black */
.p-work .faqitem__q{font-size:clamp(16px,1.5625vw,30px)}            /* exact 30 @1920 */
.p-work .faqitem__a{max-width:750px;line-height:1.3;padding-top:39px}   /* macro answer 750 wide, 39px below the bar */

/* ---------- WORK pages — MOBILE (Figma 848:1085, 430 frame). Both templates use the SAME mobile layout:
   single-column full-width portrait gallery (the masonry collapses, the 4-col grid collapses). ---------- */
@media (max-width:760px){
  /* HERO — aspect 430/674; white EN title bottom-left; NO Hebrew subtitle on mobile */
  .wd-hero{aspect-ratio:430/674;height:auto;min-height:0}
  .wd-hero__title{left:var(--mpad);right:auto;bottom:8.6%;max-width:65%;          /* x47, bottom 58/674 */
    font-size:clamp(24px,7vw,30px);letter-spacing:.08em;line-height:1.24}          /* GSF Reg 30 */
  .wd-hero__sub{display:none}                                                       /* macro drops the subtitle */
  /* INTRO — Almoni Bold 30, right-aligned, right edge at the gutter, 72px below the hero (y746) */
  .wd-intro{padding:72px var(--mpad) 0}
  .wd-intro__h{max-width:none;margin-left:auto;font-size:clamp(22px,7vw,30px);line-height:1}
  /* GALLERY — single column, full-width portrait tiles (368×603), gap 21, ~31px gutters (BOTH layouts) */
  .wd-gal{margin-top:72px;width:calc(100% - 62px);gap:21px}
  .wd-gal__band{flex-direction:column;gap:21px}
  .wd-gal__col{gap:21px}
  .wd-cell--wide,.wd-cell--tall,.wd-gal__col .wd-cell:first-child,.wd-gal__col .wd-cell:last-child,
  .wd-cell--grid{aspect-ratio:368/603}
  .wd-gal--grid{display:flex;flex-direction:column;align-items:stretch;gap:21px;width:calc(100% - 62px)}   /* grid → stacked on mobile (same logic); stretch cells to full width */
  /* SHOW MORE — 202×58 centred, 65px below the gallery */
  .wd-more,.wd-gal--grid + .wd-more{margin-top:65px}
  /* FAQ — bars h53 / gap19 / w~375 (28px gutters) / radius16; Almoni Bold 20 Q; 20 answer; chevron left 17 */
  .p-work .faq{padding-top:126px;padding-bottom:64px}
  .p-work .faq .wrap{padding-inline:27px}
  .p-work .faq__title{margin-bottom:38px;font-size:30px}
  .p-work .faq__list{gap:19px;max-width:none}
  .p-work .faqitem__head{min-height:53px;border-radius:16px;padding:8px 44px}
  .p-work .faqitem__q{font-size:20px}
  .p-work .faqitem__chev{left:17px;width:12px;height:12px}
  .p-work .faqitem__a{max-width:none;font-size:20px;line-height:1.3;padding-top:26px}
}