/*
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;
}

/* ---- Onest (Cyrillic twin for Google Sans Flex) — self-hosted, OFL, variable 200–800.
   Google Sans Flex ships NO Cyrillic glyphs, so Russian text was falling back to the system
   font (Roboto). Onest is the closest free geometric-humanist match to Google Sans / Product Sans.
   Scoped to the Cyrillic unicode blocks ONLY, so Latin stays Google Sans Flex and Hebrew stays
   Almoni — and Onest downloads lazily (only on pages that actually contain Cyrillic, i.e. /ru/).
   Same subset split as Google Fonts serves. Added to --font + --font-he below. 2026-07-09. --- */
@font-face{
  font-family:"Onest";
  font-style:normal;font-weight:200 800;font-display:swap;
  src:url("assets/fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Onest";
  font-style:normal;font-weight:200 800;font-display:swap;
  src:url("assets/fonts/onest-cyrillic-ext.woff2") format("woff2");
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* ---- Manrope (ALT Cyrillic twin — client is comparing Manrope vs Onest, 2026-07-09).
   Same self-hosted + unicode-range approach as Onest above. To switch the ACTIVE Cyrillic
   font, change "Onest"↔"Manrope" in --font / --font-he below (both files stay self-hosted).
   Variable wght 200–800, OFL. --------------------------------------------------------------- */
@font-face{
  font-family:"Manrope";
  font-style:normal;font-weight:200 800;font-display:swap;
  src:url("assets/fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Manrope";
  font-style:normal;font-weight:200 800;font-display:swap;
  src:url("assets/fonts/manrope-cyrillic-ext.woff2") format("woff2");
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* ---- 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","Onest","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;   /* Cyrillic twin (GSF has no Cyrillic); scoped by unicode-range → affects only Russian. ACTIVE=Onest (client 2026-07-09); swap to "Manrope" to switch */
  --font-he:"Almoni ML v5 AAA","Onest","Heebo","Assistant",sans-serif;   /* footer/Hebrew stack: RU footer Cyrillic → Onest (alt: "Manrope") */
  --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}
body.home{background:#f6f6f6}   /* homepage: one flat base tint everywhere (client: no pure-white, unify every block to #f6f6f6) */
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 */
/* ===== HEADER: logo + menu unified in ONE content-width frosted bar (one backdrop) ===== */
.site-header{position:absolute;z-index:50;top:18px;left:0;right:0;pointer-events:none}   /* top offset 18px per client 2026-07-05 (was 45px); NOT fixed — sits over the first block, scrolls away */
.site-header > .wrap{pointer-events:none}
.site-header__bar{pointer-events:auto;
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  height:72px;padding:0;   /* no L/R padding per client 2026-07-05 — logo & CTA align to the .wrap edges */
  /* backdrop (frosted pill) REMOVED per client 2026-07-05 — header content sits directly on the hero, like mobile */
  transition:background .25s var(--ease),backdrop-filter .25s var(--ease),padding .25s var(--ease);
}
/* …but once you scroll (dark-theme pages, desktop), a subtle frosted pill returns so the white
   menu stays readable over the light sections below the hero. Top of page = clean/transparent. */
@media (min-width:881px){
  body:not(.logo-dark) .site-header.is-scrolled .site-header__bar{
    padding:0 8px;
    background:rgba(16,19,26,.55);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.12);border-radius:34px;
  }
}
.site-header__left{display:flex;align-items:center;gap:clamp(14px,1.5vw,26px)}  /* logo flush to the content edge (no extra indent) per client 2026-07-05 */
.brand{display:flex;align-items:center}
.brand svg{height:42px;width:auto;color:#fff}   /* inline logo: letters follow currentColor (white by default); the "O" keeps its blue gradient regardless */
/* language switcher — small capsule pills in a ROW (all 3 langs), current one highlighted blue (mockup 07) */
.langsw{display:flex;flex-direction:row;align-items:center;gap:8px}
.langsw__btn{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 13px;
  border-radius:999px;border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.92);
  background:rgba(16,19,26,.42);   /* SAME fill as the bar → stacks over it, so each pill reads darker and stands out */
  font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.langsw__btn:hover,.langsw__btn:focus-visible{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(16,19,26,.6)}
.langsw__btn.is-active{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(16,19,26,.66)}   /* current lang: subtly stronger, NO blue */

/* ============================ MENU (right group inside the bar) ============================ */
.navbar{display:flex;align-items:center;gap:26px}
.navbar__links{display:flex;align-items:center;gap:30px}
.navbar__links a{
  position:relative;
  font-weight:300;font-size:18px;letter-spacing:.36px;color:#fff;
  white-space:nowrap;text-transform:uppercase;text-decoration:none;
}
/* blue underline: active menu item (walker adds aria-current="page") + on hover */
.navbar__links a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;
  background:var(--cta-a);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.navbar__links a:hover::after,
.navbar__links a[aria-current="page"]::after{transform:scaleX(1)}
/* Light-hero pages (Privacy / 404 / Thank You = body.logo-dark): the header backdrop is gone,
   so recolour the header content DARK for contrast (nav links + logo). CTA button & underline stay as-is. */
.logo-dark .navbar__links a{color:#0a1420}
.logo-dark .brand svg{color:#0a1420;filter:none}   /* light pages: dark letters, the blue "O" stays (client 2026-07-05) */

.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)}
[dir="rtl"] .btn-cta{background:linear-gradient(90deg,var(--cta-a) 0%,var(--cta-b) 100%)}   /* RTL: mirror the cyan→blue gradient horizontally so every blue button matches the mirrored form submit (client 2026-07-09) */

/* 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 ============================ */
/* redesign v2 (mockup 01): SHORT band, not full-screen — aspect ≈ 3.44:1 (band = 43.7% of the 3:2 mockup) */
.hero{position:relative;width:100%;aspect-ratio:1920/620;min-height:clamp(460px,50vh,560px);overflow:hidden;background:#111;color:#fff}   /* height matched to .phero (projects hero) per client 2026-07-05 — same aspect-ratio + min-height */
/* Uniform dark gradient at the TOP of every hero so the white header/menu stays legible over light hero imagery — some heroes (project pages) had no top shade (client 2026-07-05). z-index:2 = above the media + directional __shade, below the bottom-anchored hero copy; the header (z-index:50) sits above it; pointer-events:none so hero UI stays clickable. */
.hero::before,.phero::before,.chero::before,.pf2-hero::before,.pr-hero::before,.srv-hero::before{
  content:"";position:absolute;top:0;left:0;right:0;height:clamp(96px,13vh,150px);z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.2) 48%,rgba(0,0,0,0) 100%)}
.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;
  /* directional shade baked into the template: darken ONLY where the copy sits (LEFT) + the fixed menu (TOP),
     clear on the right — so ANY hero image/video reads consistently regardless of its own contrast (mockup 01/08) */
  background:linear-gradient(90deg,rgba(0,0,0,.64) 0%,rgba(0,0,0,.36) 30%,rgba(0,0,0,.08) 58%,rgba(0,0,0,0) 80%),
            linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.14) 18%,rgba(0,0,0,0) 34%),
            linear-gradient(0deg,rgba(0,0,0,.20) 0%,rgba(0,0,0,0) 16%)}
/* 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:58px}   /* bottom offset 58px per client 2026-07-05 (was clamp 18/4.4vh/52); mobile override = 32px */
.hero__title{
  margin:0;font-weight:400;line-height:1.16;letter-spacing:.07em;text-transform:uppercase;
  font-size:clamp(28px,4.5vw,62px);   /* PC = 62px per client 2026-07-05 (scales down on smaller screens; mobile override sets 30px) */
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
/* redesign v2 (mockup 01): short BLUE-gradient accent line + subtitle under the hero title */
.hero__line{display:block;width:clamp(64px,6vw,100px);height:3px;border-radius:2px;
  margin:clamp(10px,1.2vw,15px) 0 clamp(14px,1.6vw,20px);   /* more gap below the line so the subtitle sits lower — client 2026-07-05 */
  background:linear-gradient(90deg,var(--cta-b),var(--cta-a))}
.hero__sub{margin:0;font-weight:400;font-size:clamp(12px,1.3vw,16px);letter-spacing:.22em;text-transform:uppercase;   /* 16px on PC per client 2026-07-05 (was max 14) */
  color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(0,0,0,.45)}

/* ============================ 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:#f6f6f6;padding:clamp(18px,2.6vh,32px) 0 clamp(12px,1.8vh,22px)}   /* compact so hero + expertise fit one screen */
/* 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:400 clamp(12px,.95vw,14px)/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--cta-a)}   /* same size/weight/font/spacing as .ework__label per client 2026-07-05 (colour stays brand-blue) */
.expertise__title br{display:none}
.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}
/* ===== redesign v2: OUR EXPERTISE interactive slider (mockup 08) — brand blue accents only ===== */
.expslider{margin-top:clamp(10px,1.2vw,18px)}

/* service tags with icons */
.expslider__tags{list-style:none;margin:0;padding:0;display:flex;align-items:flex-start;gap:6px}
/* redesign v2: text-only tags (client removed the icons); active = bold black, no box */
.exptag{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;cursor:pointer;
  padding:8px 6px;background:none;border:0;text-align:center;-webkit-tap-highlight-color:transparent}
.exptag__ic,.exptag__icimg{display:none}
.exptag__label{font-family:var(--font);font-weight:500;font-size:clamp(12px,1vw,16px);letter-spacing:.04em;
  text-transform:uppercase;color:rgba(10,10,10,.5);white-space:nowrap;transition:color .22s var(--ease),font-weight .22s var(--ease)}
.exptag:hover .exptag__label{color:#111}
.exptag.is-active .exptag__label{color:#000;font-weight:700}

/* progress line with a dot per service */
.exptrack{position:relative;display:flex;align-items:center;margin-top:clamp(8px,1vw,14px)}
.exptrack__rail{position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(10,10,10,.12);transform:translateY(-50%)}
.exptrack__fill{position:absolute;left:0;top:50%;height:2px;width:0;transform:translateY(-50%);border-radius:2px;
  background:linear-gradient(90deg,var(--cta-b),var(--cta-a));transition:width .45s var(--ease)}
.exptrack__dot{flex:1 1 0;position:relative;height:22px;background:none;border:0;cursor:pointer;padding:0}
.exptrack__dot::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(10,10,10,.28);background:#fff;transition:all .25s var(--ease)}
.exptrack__dot.is-active::before{border-color:var(--cta-a);background:var(--cta-a);
  box-shadow:0 0 0 4px rgba(15,129,178,.16),0 0 12px rgba(15,129,178,.55)}

/* slide: text (left) + media (right) */
.expslide{display:grid;grid-template-columns:minmax(200px,24%) 1fr;gap:clamp(24px,3.2vw,52px);align-items:center;   /* text column 24% per client 2026-07-05 (was 20%) */
  margin-top:clamp(20px,2.6vw,36px)}   /* lowered a touch per client 2026-07-05 (was 12–22) */
.expslide__text{display:flex;flex-direction:column;align-items:flex-start;align-self:start}   /* pin text to the TOP of the row (not centered) so it doesn't jump between slides of different length — client 2026-07-05 */
.expslide__num{font-family:var(--font);font-weight:600;font-size:16px;letter-spacing:.1em;color:var(--cta-a)}
.expslide__title{margin:clamp(5px,.6vw,9px) 0 0;font-family:var(--font);font-weight:400;   /* same cut as .hero__title (weight+spacing), own size — client 2026-07-05 */
  font-size:clamp(21px,2.1vw,32px);line-height:1.16;letter-spacing:.07em;text-transform:uppercase;color:#0a0a0a;
  min-height:2.32em}   /* reserve 2 lines (line-height 1.16) so 1-line titles (e.g. FILMS) don't jump vs 2-line ones */
.expslide__title p{margin:0}
.expslide__line{display:block;width:clamp(56px,5vw,84px);height:3px;border-radius:2px;margin:clamp(7px,.9vw,12px) 0;
  background:linear-gradient(90deg,var(--cta-b),var(--cta-a))}
.expslide__desc{max-width:68%;font-family:var(--font);font-weight:400;font-size:clamp(13px,.95vw,15px);   /* max-width = % of the text column so the small copy never runs past the 2nd progress dot (client 2026-07-05) */
  line-height:1.5;color:rgba(10,10,10,.66)}
.expslide__desc p{margin:0}
.expslide__more{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(12px,1.4vw,18px);
  height:42px;padding:0 22px;border:1.5px solid rgba(10,10,10,.35);border-radius:999px;
  font-family:var(--font);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#0a0a0a;
  transition:border-color .22s var(--ease),background .22s var(--ease),color .22s var(--ease)}
.expslide__more svg{width:17px;height:17px}
.expslide__more:hover{border-color:var(--cta-a);background:var(--cta-a);color:#fff}
.expslide__more.is-hidden{display:none}
.expslide__media{position:relative;height:max(253px,min(26.7vw,38.7vh,400px));border-radius:8px;overflow:hidden;background:#f6f6f6}   /* +1/3 taller per client 2026-07-05 (was 190/20vw/29vh/300) */
.expslide__media{transition:opacity .3s var(--ease)}
.expslide__img,.expslide__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s var(--ease)}
.expslide__vid{opacity:0}
.expslide.is-switching .expslide__media{opacity:.32}

/* footer: pagination dots (left) + prev/next arrows (right) */
.expfoot{display:flex;align-items:center;justify-content:space-between;margin-top:clamp(10px,1.2vw,18px)}
.expfoot__dots{display:none;align-items:center;gap:10px}   /* hidden per client 2026-07-05 (set display:flex to bring the pagination dots back) */
.expfoot__dot{width:8px;height:8px;border-radius:50%;background:rgba(10,10,10,.2);border:0;cursor:pointer;padding:0;
  transition:width .3s var(--ease),background .3s var(--ease)}
.expfoot__dot.is-active{width:26px;border-radius:6px;background:linear-gradient(90deg,var(--cta-b),var(--cta-a))}
.expfoot__arrows{display:flex;gap:12px;margin-left:auto}   /* keep arrows on the right even with the dots hidden */
.exparrow{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(10,10,10,.22);background:#fff;color:#0a0a0a;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .22s var(--ease),color .22s var(--ease)}
.exparrow svg{width:20px;height:20px}
.exparrow:hover{border-color:var(--cta-a);color:var(--cta-a)}

@media (max-width:760px){ .expslider{display:none} }   /* mobile keeps the .mexp carousel below */

.mexp{display:none}   /* mobile-only OUR EXPERTISE slider (tabs + media + counter) — shown ≤760 (see mobile block) */
.mproc{display:none}  /* mobile-only THE PROCESS slider (step + media + counter) — shown ≤760 (see mobile block) */
/* 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:#f6f6f6;padding:clamp(72px,9vw,140px) 0 clamp(60px,7vw,104px)}
.ework__head{max-width:1120px}
.ework__title{margin:0;font-weight:400;line-height:1.16;letter-spacing:.07em;text-transform:uppercase;color:#0a0a0a;font-size:clamp(28px,4.5vw,62px)}   /* same font as .hero__title per client 2026-07-05 (weight/size/spacing); dark colour + no text-shadow (light section) */
.ework__accent{display:block;color:var(--cta-a)}   /* accent phrase always on its own line (line 3) per client 2026-07-05 */
@media (max-width:479px){.ework__title{font-size:clamp(15px,5.3vw,26px)}}   /* phones: shrink so the accent line "felt before it exists" fits on ONE line → heading stays exactly 3 lines on every screen */
.ework__bar{display:flex;align-items:center;gap:clamp(18px,2vw,30px);margin:clamp(30px,3.6vw,54px) 0 clamp(24px,2.6vw,40px)}
.ework__label{flex:none;font:400 clamp(12px,.95vw,14px)/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:#0a0a0a}
.ework__line{flex:1;height:1px;background:rgba(10,10,10,.16)}
.ework__all{flex:none;display:inline-flex;align-items:center;gap:9px;font:400 clamp(12px,.95vw,13px)/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:rgba(10,10,10,.6);transition:color .2s var(--ease)}
.ework__all svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.ework__all:hover{color:var(--cta-a)}
.ework__all:hover svg{transform:translateX(3px)}
@media (max-width:760px){
  .ework__bar{flex-wrap:wrap;gap:10px 16px}
  .ework__line{order:3;flex-basis: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} }

/* clickable project cards — flex-wrap grid, width per card (full / half / third). No hover-spread, no reveal. */
.ework__grid{--g:clamp(12px,1.2vw,20px);display:flex;flex-wrap:wrap;gap:var(--g)}
.pcard{position:relative;display:block;overflow:hidden;border-radius:5px;background:#111;color:#fff;text-decoration:none;isolation:isolate}
.pcard--full{flex:1 1 100%;aspect-ratio:2.8/1}
.pcard--half{flex:1 1 calc(50% - var(--g)/2);aspect-ratio:1.4/1}
.pcard--third{flex:1 1 calc(33.333% - var(--g)*2/3);aspect-ratio:1.15/1}
.pcard__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .6s var(--ease)}
.pcard:hover .pcard__media{transform:scale(1.045)}
.pcard__shade{position:absolute;inset:0;z-index:1;   /* bottom + left-corner shade baked in → caption stays legible on ANY project image */
  background:linear-gradient(to top,rgba(6,8,12,.85) 0%,rgba(6,8,12,.28) 40%,rgba(6,8,12,0) 68%),
            linear-gradient(to right,rgba(6,8,12,.5) 0%,rgba(6,8,12,0) 42%)}
.pcard__body{position:absolute;left:0;bottom:0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(20px,2.4vw,42px)}
.pcard__eyebrow{margin:0 0 clamp(8px,1vw,14px);font:700 clamp(10px,.75vw,12px)/1.3 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--cta-b)}
.pcard__title{font:400 clamp(22px,2.5vw,42px)/1.04 var(--font);letter-spacing:.01em;text-transform:uppercase;color:#fff}
.pcard__sub{margin-top:clamp(6px,.8vw,12px);font:400 clamp(12px,1vw,15px)/1.4 var(--font);letter-spacing:.02em;color:rgba(255,255,255,.78)}
.pcard__view{display:inline-flex;align-items:center;gap:8px;margin-top:clamp(14px,1.6vw,24px);font:600 clamp(11px,.85vw,13px)/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.pcard__view svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.pcard:hover .pcard__view svg{transform:translateX(4px)}
@media (max-width:760px){
  .pcard--full,.pcard--half,.pcard--third{flex:1 1 100%;aspect-ratio:16/11}
}

/* ============================ FEATURED PROJECT ============================ */
.feature{background:#f6f6f6;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;   /* bottom + left shade → caption legible on any project layer */
  background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,0) 42%,rgba(0,0,0,.62) 100%),
            linear-gradient(90deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 48%)}
/* 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:#f6f6f6;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(.35em,-.03em) scale(1.55)}   /* starts enlarged */
.bigstmt[data-reveal].is-in .bigstmt__img{opacity:1;transform:translateY(-.03em) scale(1)}      /* shrinks to its real size on reveal */

/* WYSIWYG-editable fields render their content wrapped in <p> (wpautop) — keep them tight, no paragraph gaps */
.viz__desc p, .mexp__desc p,
.editorial__title p, .editorial__desc p,
.feature__title p, .feature__desc p,
.ai__title p, .ai__desc p,
.faqitem__a p, .proc__desc p, .mproc__desc p,
.ehero__sub p, .vsys__sub p, .eband__he p,
.pf-sell__he p, .pf-why__he p, .pf-how__step p, .pf-how__stepdesc p, .wd-hero__sub p, .wd-hero__title p{margin:0}
.faqitem__a p + p, .proc__desc p + p, .mproc__desc p + p,
.ehero__sub p + p, .vsys__sub p + p, .eband__he p + p,
.pf-sell__he p + p, .pf-why__he p + p, .pf-how__stepdesc p + p{margin-top:.6em}   /* gap between wysiwyg paragraphs */
.mexp__desc br{display:none}   /* mobile Expertise carousel: drop the desktop <br> breaks → text wraps to the narrow slide */

/* ============================ THE PROCESS (redesign v2, mockup 03) ============================ */
/* Static: header + horizontal 6-step row (num/label/desc + media + circular badge) + dark CTA band. No scroll-jack. */
.process{background:#f6f6f6;padding:clamp(70px,9vw,120px) 0 clamp(60px,7vw,96px)}
.process__head{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;margin-bottom:clamp(44px,5vw,76px)}
.process__eyebrow{margin:0 0 clamp(14px,1.5vw,20px);font:400 clamp(12px,.95vw,14px)/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--cta-a)}   /* same look as .expertise__title per client 2026-07-05; keeps its own bottom margin */
.process__title{margin:0;font-weight:400;line-height:1.16;letter-spacing:.07em;text-transform:uppercase;color:#0a0a0a;font-size:clamp(28px,4.5vw,62px)}   /* same styles as .hero__title per client 2026-07-05 (weight/size/spacing); dark colour + no text-shadow (light section) */
.process__line{display:block;width:clamp(70px,7vw,120px);height:3px;border-radius:2px;margin:clamp(18px,2vw,28px) 0 clamp(16px,1.8vw,24px);background:linear-gradient(90deg,var(--cta-b),var(--cta-a))}
.process__sub{margin:0;max-width:430px;font:400 clamp(15px,1.15vw,18px)/1.5 var(--font);color:rgba(10,10,10,.6)}

.procsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr)}
.procstep{position:relative;display:flex;flex-direction:column}
.procstep:not(:last-child){border-right:1px solid rgba(10,10,10,.09)}
.procstep__text{position:relative;padding:0 clamp(14px,1.5vw,24px) clamp(22px,2.3vw,32px)}
.procstep__num{display:inline-block;font:600 15px/1 var(--font);letter-spacing:.06em;color:rgba(10,10,10,.5)}
.procstep__num::after{content:"";display:block;width:22px;height:2px;margin-top:10px;background:var(--cta-a)}   /* small accent line under the number (mockup 03) */
.procstep__label{position:relative;margin:clamp(9px,1.1vw,15px) 0 clamp(10px,1.1vw,15px);font:400 clamp(15px,1.15vw,21px)/1.16 var(--font);letter-spacing:.07em;text-transform:uppercase;color:#0a0a0a}   /* font/cut like .hero__title (weight/spacing/leading), OWN size kept — client 2026-07-05 */
.procstep__desc{margin:0;font:400 clamp(12.5px,.92vw,14.5px)/1.5 var(--font);color:rgba(10,10,10,.56)}
/* the › lives beside the LABEL (vertically centred on it) at the column edge — auto-tracks the label row */
.procstep:not(:last-child) .procstep__label::after{content:"\203A";position:absolute;top:50%;transform:translateY(-54%);right:calc(10px - clamp(14px,1.5vw,24px));font:300 37px/1 var(--font);color:rgba(10,10,10,.38);pointer-events:none}
.procstep__media{position:relative;flex:none;margin-top:auto;height:clamp(238px,25vw,330px);overflow:hidden;background:#e9e9e9}
.procstep__media img,.procstep__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.procstep__media .ev-pano,.mproc__slide .ev-pano{position:absolute;inset:0;border-radius:inherit}   /* «3D TOUR» step → interactive 360° viewer fills the media box */
/* badge sits ON the image near the bottom (the mockup's dark band below it was removed, so no straddle) */
.procstep__badge{position:absolute;left:50%;bottom:clamp(12px,1.3vw,18px);transform:translateX(-50%);width:clamp(50px,4.1vw,62px);height:clamp(50px,4.1vw,62px);display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;border:1px solid rgba(10,10,10,.07);box-shadow:0 8px 22px rgba(0,0,0,.14);color:var(--cta-a);z-index:2}
.procstep__badge svg{width:48%;height:48%}

/* tablet / mobile — the 6 steps become a horizontal swipe row */
@media (max-width:1024px){
  .procsteps{grid-template-columns:none;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .procsteps::-webkit-scrollbar{display:none}
  .procstep{flex:0 0 clamp(240px,42vw,320px);scroll-snap-align:start}
  .procstep__media{height:clamp(260px,44vw,320px)}
}
@media (max-width:760px){
  .process__head{flex-direction:column;gap:16px}
  .procstep{flex-basis:76vw}
}

/* ============================ AI CHARACTERS (redesign v2, mockup 04) — photo slider + Watch showreel + 3 feature columns ============================ */
.ai{position:relative;background:#f6f6f6}
.aihero{position:relative;overflow:hidden;color:#fff;background:#15171c}
.aihero__slides{position:absolute;inset:0;z-index:0}
.aihero__slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .8s var(--ease)}
.aihero__slide.is-active{opacity:1}
.aihero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}   /* video slide fills the frame like the bg image (client 2026-07-06: slider now supports video uploads) */
.aihero__overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(10,12,16,.88) 0%,rgba(10,12,16,.55) 34%,rgba(10,12,16,.06) 62%,rgba(10,12,16,0) 100%)}
.aihero__dots{position:absolute;z-index:3;right:clamp(20px,2.4vw,46px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px}
.aihero__dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.34);cursor:pointer;transition:background .25s var(--ease),transform .25s var(--ease)}
.aihero__dot:hover{background:rgba(255,255,255,.6)}
.aihero__dot.is-active{background:#fff;transform:scale(1.3)}
.aihero__content{position:relative;z-index:2;min-height:min(88vh,860px);display:flex;flex-direction:column;justify-content:center;padding-block:clamp(120px,15vh,170px) clamp(96px,13vh,128px)}
.aihero__eyebrow{margin:0 0 clamp(16px,2vw,26px);font:400 clamp(12px,.95vw,14px)/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--cta-b)}   /* same look as .expertise__title per client 2026-07-05 (weight/spacing); cyan kept for the dark section */
.aihero__title{margin:0;font-weight:400;line-height:1.16;letter-spacing:.07em;text-transform:uppercase;color:#fff;font-size:clamp(28px,4.5vw,62px);text-shadow:0 2px 24px rgba(0,0,0,.35)}   /* fully like .hero__title per client 2026-07-05 (weight/size/spacing/leading/shadow); white (dark section) */
.aihero__title p{margin:0}
.aihero__desc{margin:clamp(20px,2.4vw,32px) 0 0;max-width:440px;font:400 clamp(15px,1.15vw,18px)/1.55 var(--font);color:rgba(255,255,255,.85)}
.aihero__watch{display:inline-flex;align-items:center;gap:16px;margin-top:clamp(28px,3.4vw,46px);padding:0;border:0;background:none;color:#fff;cursor:pointer;font:700 clamp(12px,.95vw,14px)/1 var(--font);letter-spacing:.16em;text-transform:uppercase}
.aihero__play{flex:none;width:clamp(52px,4vw,64px);height:clamp(52px,4vw,64px);display:flex;align-items:center;justify-content:center;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);transition:background .22s var(--ease),border-color .22s var(--ease)}
.aihero__play svg{width:40%;height:40%;margin-left:2px}
.aihero__watch:hover .aihero__play{background:var(--cta-a);border-color:var(--cta-a)}
.aihero__track{position:absolute;left:clamp(20px,4vw,40px);bottom:clamp(30px,6vh,60px);display:flex;align-items:center;gap:16px;font:600 13px/1 var(--font);letter-spacing:.1em;color:rgba(255,255,255,.72)}
.aihero__rail{position:relative;width:clamp(150px,18vw,300px);height:1px;background:rgba(255,255,255,.28)}
.aihero__fill{position:absolute;left:0;top:0;height:100%;width:25%;background:#fff;transition:width .5s var(--ease)}
.aifeat{background:#f6f6f6;padding:clamp(48px,6vw,88px) 0}
.aifeat__grid{display:grid;grid-template-columns:repeat(3,1fr)}
.aifeat__col{padding:clamp(6px,1vw,14px) clamp(24px,3vw,54px);text-align:center}
.aifeat__col:not(:last-child){border-right:1px solid rgba(10,10,10,.1)}
.aifeat__t{margin:0 0 clamp(12px,1.4vw,20px);font:700 clamp(15px,1.15vw,19px)/1.3 var(--font);letter-spacing:.06em;text-transform:uppercase;color:#0a0a0a}
.aifeat__d{margin:0;font:400 clamp(14px,1vw,16px)/1.5 var(--font);color:rgba(10,10,10,.58)}
@media (max-width:760px){
  .aihero__dots{right:14px;gap:11px}
  .aihero__content{min-height:82vh;justify-content:flex-end}
  .aihero__title{font-size:clamp(26px,7vw,36px)}   /* ~30px on mobile, in line with .hero__title mobile — client 2026-07-05 */
  .aihero__desc{max-width:none}
  .aihero__track{position:static;margin-top:clamp(26px,5vh,40px)}
  .aifeat__grid{grid-template-columns:1fr}
  .aifeat__col{text-align:left;padding:clamp(22px,5vw,30px) var(--mpad)}
  .aifeat__col:not(:last-child){border-right:0;border-bottom:1px solid rgba(10,10,10,.1)}
}

/* ============================ FAQ (redesign v2, mockup 05) — numbered cards + ▼ triangle toggle (rotates up when open) ============================ */
.faq{background:#f6f6f6;padding:clamp(56px,8vh,110px) 0}
.faq__head{text-align:center;margin:0 auto clamp(34px,4vw,56px);max-width:820px}
.faq__eyebrow{margin:0 0 clamp(12px,1.4vw,18px);font:400 clamp(12px,.95vw,14px)/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--cta-a)}   /* same thin cut as .aihero__eyebrow (weight 400 / .16em) per client 2026-07-06; own margin + brand-blue kept (light section — aihero's cyan would be too pale here) */
.faq__title{margin:0;font:400 clamp(30px,4vw,58px)/1.1 var(--font);letter-spacing:.005em;color:#0a0a0a}
.faq__sub{margin:clamp(12px,1.4vw,18px) 0 0;font:400 clamp(15px,1.15vw,18px)/1.5 var(--font);color:rgba(10,10,10,.55)}
.faq__list{list-style:none;margin:0 auto;padding:0;max-width:1080px;display:flex;flex-direction:column;gap:clamp(12px,1.2vw,18px)}
.faqitem{background:#f6f6f6;border:1px solid rgba(10,10,10,.13);border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(10,10,10,.04);transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}   /* client: no pure-white — cards match the #f6f6f6 base, distinguished by outline + faint shadow */
.faqitem:hover{border-color:rgba(10,10,10,.22)}
.faqitem__head{width:100%;display:flex;align-items:center;gap:clamp(18px,2.2vw,40px);padding:clamp(20px,2vw,28px) clamp(24px,2.4vw,36px);background:none;border:0;text-align:left;cursor:pointer}
.faqitem__n{flex:none;min-width:clamp(26px,2.4vw,38px);font:600 clamp(14px,1.1vw,17px)/1 var(--font);letter-spacing:.04em;color:var(--cta-a)}
.faqitem__q{flex:1;min-width:0;text-align:left;font:600 clamp(15px,1.25vw,21px)/1.35 var(--font);letter-spacing:.005em;color:#0a0a0a}
.faqitem__tri{flex:none;width:clamp(20px,1.8vw,26px);height:clamp(20px,1.8vw,26px);display:flex;align-items:center;justify-content:center;color:rgba(10,10,10,.42);transition:transform .3s var(--ease),color .25s var(--ease)}
.faqitem__tri svg{width:100%;height:100%}
.faqitem.is-open{border-color:var(--cta-a);box-shadow:0 10px 30px rgba(15,129,178,.08)}
.faqitem.is-open .faqitem__tri{transform:rotate(180deg);color:var(--cta-a)}
.faqitem__panel{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faqitem.is-open .faqitem__panel{max-height:520px}
.faqitem__a{padding:clamp(16px,1.7vw,22px) clamp(24px,2.4vw,36px) clamp(24px,2.4vw,32px);padding-left:calc(clamp(24px,2.4vw,36px) + clamp(26px,2.4vw,38px) + clamp(18px,2.2vw,40px));border-top:1px solid rgba(10,10,10,.08);color:rgba(10,10,10,.6);font:400 clamp(14px,1.05vw,16px)/1.62 var(--font)}
@media (max-width:760px){
  .faqitem__head{gap:14px;padding:18px}
  .faqitem__a{padding-left:calc(18px + 26px + 14px)}
}

/* ============================ START YOUR PROJECT (CTA + CF7 form) ============================ */
.cta{position:relative;overflow:hidden;background:#f6f6f6;color:#0a0a0a;padding:clamp(84px,10vw,140px) 0 clamp(90px,12vw,150px)}   /* redesign v2 (creative-director mockup 06) — light 2-col CTA */
.cta__media{position:absolute;left:0;bottom:0;width:min(48vw,760px);height:auto;opacity:1;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,#000 55%,transparent 100%),linear-gradient(to right,#000 50%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to top,#000 55%,transparent 100%),linear-gradient(to right,#000 50%,transparent 100%);
  mask-composite:intersect}   /* villa cut from mockup 06 — faded TOP + RIGHT (intersect) so its edge dissolves into the #f6f6f6 form bg, no visible seam — client 2026-07-07 */
.cta__grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,88px);align-items:start}   /* gap tightened 2026-07-07 so the title column is wide enough to hold the fixed 3-line split */
.cta__eyebrow{margin:0 0 clamp(18px,2vw,28px);font:400 clamp(12px,.95vw,14px)/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--cta-a)}   /* same look as .expertise__title per client 2026-07-05 (weight/spacing/leading); keeps its own bottom margin */
.cta__title{margin:0;font-weight:400;line-height:1.04;letter-spacing:.02em;text-transform:uppercase;color:#0a0a0a;font-size:clamp(42px,5.4vw,92px)}   /* thin per client 2026-07-06; font trimmed 7vw→5.4vw 2026-07-07 so the fixed 3-line <br> split never re-wraps in the 2-col layout (all langs) */
.cta__sub{margin:clamp(20px,2.2vw,32px) 0 0;max-width:640px;font:400 clamp(11px,1.15vw,16px)/1.5 var(--font);color:rgba(10,10,10,.6)}   /* smaller + wider cap so the 2 sentences (with the <br>) each stay on ONE line → always 2 lines (client 2026-07-07) */
/* eyebrow removed 2026-07-07 → the form's first field aligns with the title top (both grid columns start together). Scoped to .cta__grid so the header popup form (.ev-cta-modal__form) is untouched. */
.cta__grid .cta__form{margin-top:0}

/* 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:400 clamp(12px,.95vw,14px)/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:rgba(10,10,10,.5)}   /* UPPERCASE, grey — same size/weight/spacing as .cta__eyebrow but neutral grey, not blue (client 2026-07-07) */
.cta__form .wpcf7-form-control-wrap{display:block;margin-top:12px}
.cta__form .wpcf7-form label br{display:none}   /* kill CF7 autop <br> between label and field ONLY — the privacy row <br> stays so it breaks to 2 lines (client 2026-07-06) */
.cta__form .wpcf7-text,.cta__form .wpcf7-email,.cta__form .wpcf7-tel,.cta__form .wpcf7-textarea{
  width:100%;border:0;border-bottom:1px solid rgba(10,10,10,.22);background:transparent;padding:0 0 10px;outline:none;
  font:400 16px/1.2 var(--font);color:#0a0a0a;text-transform:none;transition:border-color .2s}   /* text-transform:none so the UPPERCASE label doesn't uppercase what the user types */
.cta__form .wpcf7-text:focus,.cta__form .wpcf7-email:focus,.cta__form .wpcf7-tel:focus,.cta__form .wpcf7-textarea:focus{border-color:var(--cta-a)}
.cta__form .wpcf7-textarea{min-height:64px;resize:vertical}
/* privacy row (injected into the CF7 form body, above the submit) */
.cta__privacy{display:flex;align-items:center;gap:14px;margin:clamp(26px,3vw,40px) 0 clamp(20px,2.4vw,30px)!important}
.cta__privacy>p{display:contents}   /* CF7 autop wraps the row content in <p> — dissolve it so the spans stay flex items */
.cta__privacy-ic{flex:none;display:flex;align-items:center;justify-content:center;color:rgba(10,10,10,.5)}   /* plain grey padlock, no circle — client 2026-07-06 */
.cta__privacy-ic svg{width:26px;height:26px}
.cta__privacy-txt{font:400 14.5px/1.45 var(--font);color:rgba(10,10,10,.6)}
.cta__privacy-txt b{display:block;font-weight:600;color:#0a0a0a}
/* "privacy" word linked to the Privacy Policy page (per language) — brand-blue, underlined so it reads as a link */
.cta__privacy-link{color:var(--cta-a);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:color .2s}
.cta__privacy-link:hover{color:#0b5f83}
/* full-width blue submit with a right arrow (mockup 06) */
.cta__actions{position:relative;margin-top:clamp(4px,1vw,10px)!important}
.cta__form .wpcf7-submit{appearance:none;-webkit-appearance:none;cursor:pointer;border:0;color:#fff;display:block;width:100%;
  height:clamp(58px,4.4vw,66px);padding:0 56px 0 30px;border-radius:8px;text-align:left;
  font:700 clamp(13px,1vw,15px)/1 var(--font);letter-spacing:.14em;text-transform:uppercase;
  /* brand blue = cyan→blue gradient, same as the header .btn-cta (client: «синий как у нас»); arrow layered over it */
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat right 28px center,linear-gradient(90deg,var(--cta-b) 0%,var(--cta-a) 100%);
  transition:filter .2s,transform .2s}
.cta__form .wpcf7-submit:hover{filter:brightness(1.06);transform:translateY(-1px)}
.cta__form .wpcf7-spinner{position:absolute;right:62px;top:50%;transform:translateY(-50%);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:none !important}   /* invalid = just the red underline, no shadow ring */
.cta__form input:invalid,.cta__form textarea:invalid{box-shadow:none}                     /* kill the browser's NATIVE invalid glow */
.cta__form input:-moz-ui-invalid,.cta__form textarea:-moz-ui-invalid{box-shadow:none}     /* Firefox's red :-moz-ui-invalid glow — separate rule so the unknown pseudo can't void the others */
.cta__form .wpcf7-not-valid-tip{display:block;color:#c0392b;font:400 12.5px/1.35 var(--font);letter-spacing:.02em;margin-top:6px}
/* ===== RTL (Hebrew): CF7 stamps its wrapper dir="ltr" → force the form back to RTL so labels, the privacy row & fields align RIGHT; submit arrow + gradient mirror horizontally (client 2026-07-09) ===== */
[dir="rtl"] .wpcf7{direction:rtl}
[dir="rtl"] .cta__form .wpcf7-form .wpcf7-response-output{text-align:right}
[dir="rtl"] .cta__form .wpcf7-submit{text-align:right;padding:0 30px 0 56px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") no-repeat left 28px center,linear-gradient(90deg,var(--cta-a) 0%,var(--cta-b) 100%)}
[dir="rtl"] .cta__form .wpcf7-spinner{right:auto;left:62px}
@media (max-width:820px){
  .cta__grid{grid-template-columns:1fr;gap:30px}
  .cta__grid .cta__form{margin-top:0}   /* stacked layout — no title-alignment offset */
  .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;text-transform:uppercase}
.footer__col a{color:rgba(255,255,255,.45);text-decoration:none;transition:color .2s;text-transform:uppercase}   /* widget menu labels are title-case → force UPPERCASE (Figma) */
.footer__col a:hover{color:#fff}
/* «Меню навигации» widget output (<nav><ul class="menu">…) — flatten to the stacked-links look */
.footer__col .menu,.footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.footer__col li{margin:0;padding:0}
.footer__col .menu a,.footer__col li a{display:block}

.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}
/* Studio lines under the socials (Figma 399:827 / 1039:2647) — editable in «Настройки темы» → Подвал */
.footer__note{grid-column:1/-1;margin-top:clamp(16px,1.8vw,26px);display:flex;flex-direction:column;gap:8px;font:300 18px/1.5 var(--font-he);letter-spacing:.03em;color:rgba(255,255,255,.92)}
.footer__noteitem{display:flex;align-items:flex-start;gap:10px}
.footer__noteic{flex:none;display:flex;width:19px;height:19px;margin-top:.12em;color:var(--cta-b)}   /* pin / studio icons — same as the Contacts info-bar */
.footer__noteic svg{width:100%;height:100%}

.footer__logo{margin-top:clamp(44px,5.5vw,80px)}   /* more air above the wordmark (client 2026-07-08) */
.footer__logo img{width:100%;display:block}
.footer__copy{display:flex;align-items:center;justify-content:center;gap:8px;
  margin:clamp(18px,2.4vw,30px) 0 clamp(6px,0.7vw,10px);font:300 16px/1 var(--font-he);color:rgba(255,255,255,.75)}   /* © rests at the very bottom — small gap below (client 2026-07-08) */
/* Desktop footer geometry — exact Figma 399:827 x-positions (MENU 216 / SERVICES 466 / CONTACTS 980 / values 1106).
   Scoped to ≥821px so the verified tablet/mobile footer below is untouched. */
@media (min-width:821px){
  .footer__cols{justify-content:flex-start;column-gap:0;flex-wrap:nowrap}
  .footer__services{flex:0 0 52%;gap:0}
  .footer__services .footer__col:first-child{flex:0 0 255px}   /* MENU slot → SERVICES starts at x≈466 */
  .footer__right{flex:0 0 48%;grid-template-columns:124px auto;column-gap:0}  /* anchored at centre; value cols at x≈1106 (label offset 124) */
  .footer__col{line-height:2.12}                               /* Figma col rhythm (was 2.22) */
}
@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){
  .site-header{top:20px}
  .site-header__bar{background:none;border:none;-webkit-backdrop-filter:none;backdrop-filter:none;height:auto;padding:0}   /* no pill on mobile — just the logo + burger */
  .site-header__left{padding-left:0}   /* no pill on mobile → no extra logo indent */
  .brand svg{height:34px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}   /* white+blue-O svg over the dark hero, no pill */
  .langsw{flex-direction:row;align-items:center;gap:6px;color:#fff}                /* mobile: side-by-side next to the small white logo */
  .langsw__btn{height:24px;padding:0 10px;font-size:11px;border-width:1.3px}
  .navbar{display:none}        /* desktop nav hidden on mobile — replaced by the full-screen #mobmenu overlay */
  .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 ============================ */
/* ===== PROJECTS redesign 2026-07 (client mockup): dark hero + WATCH SHOWREEL, filter bar, black project grid ===== */
.page--projects{background:#0a0a0a;color:#fff;padding:0}

/* HERO — dark media, copy bottom-left, directional left shade, WATCH SHOWREEL button */
.phero{position:relative;width:100%;aspect-ratio:1920/620;min-height:clamp(460px,50vh,560px);overflow:hidden;background:#0a0a0a;color:#fff}   /* client: shorter hero band */
.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;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.5) 34%,rgba(0,0,0,.12) 62%,rgba(0,0,0,0) 84%),
            linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 22%),
            linear-gradient(0deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 32%)}
.phero__inner{position:absolute;left:0;right:0;bottom:clamp(44px,7vh,90px);z-index:2}   /* .wrap = shared inset */
.phero__title{margin:0;font:400 clamp(40px,6vw,104px)/1.16 var(--font);letter-spacing:.07em;text-transform:uppercase;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}   /* same font/weight/leading/spacing/shadow as .hero__title per client 2026-07-05 (own size kept; DARK hero → white + shadow) */
.phero__sub{margin:clamp(12px,1.4vw,20px) 0 0;font:400 clamp(18px,1.8vw,30px)/1.2 var(--font);letter-spacing:.03em;color:rgba(255,255,255,.9)}
.phero__lead{margin:clamp(12px,1.3vw,18px) 0 0;max-width:clamp(300px,40vw,540px);font:300 clamp(14px,1.05vw,17px)/1.5 var(--font);letter-spacing:.02em;color:rgba(255,255,255,.62)}
.phero__watch{display:inline-flex;align-items:center;gap:16px;margin-top:clamp(22px,3vw,42px);padding:0;background:none;border:0;cursor:pointer;color:#fff;font:600 clamp(12px,.95vw,14px)/1 var(--font);letter-spacing:.16em;text-transform:uppercase}
.phero__play{flex:none;width:clamp(50px,4vw,62px);height:clamp(50px,4vw,62px);display:flex;align-items:center;justify-content:center;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);transition:background .22s var(--ease),border-color .22s var(--ease)}
.phero__play svg{width:34%;height:34%;margin-left:3px}
.phero__watch:hover .phero__play{background:var(--cta-a);border-color:var(--cta-a)}

/* FILTER + GRID section (black) */
/* Projects — SELECTED PROJECTS category text (non-clickable) + row-based works grid (client 2026-07-06) */
.pcats{background:#0a0a0a;padding:clamp(30px,4vw,64px) 0 clamp(22px,2.6vw,38px);overflow:hidden}
/* «SELECTED PROJECTS» = static heading, same size/colour as before (client 2026-07-08) */
.pcats__label{margin:0 0 clamp(16px,2.2vw,26px);padding-inline:var(--mpad);text-align:left;font:400 clamp(14px,1.25vw,19px)/1.2 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--cta-a);white-space:nowrap}   /* mobile: heading above the marquee at the page gutter (client 2026-07-08/09); desktop MQ below puts it on the SAME line as the ticker */
/* categories → ONE line, snail-slow seamless marquee (no dots, wide even spacing); JS sets a constant-speed duration */
.pcats__marquee{position:relative;overflow:hidden;width:100%;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.pcats__track{display:flex;width:max-content;will-change:transform;animation:pcats-marq 90s linear infinite}
.pcats:hover .pcats__track{animation-play-state:paused}
.pcats__item{flex:none;padding:0 clamp(24px,4.5vw,52px);white-space:nowrap;font:300 clamp(14px,1.2vw,18px)/1.2 var(--font);letter-spacing:.12em;text-transform:uppercase;color:#fff}   /* WHITE words, thin — same cut as before */
@keyframes pcats-marq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.pcats__track{animation:none}}
/* DESKTOP (≥761): «SELECTED PROJECTS» sits ON THE SAME LINE as the marquee, which streams past and fades out behind it (client 2026-07-09). Mobile keeps the stacked layout above. */
@media (min-width:761px){
  .pcats{display:flex;align-items:center}
  .pcats__label{margin:0;flex:none;padding:0 clamp(14px,1.4vw,26px) 0 calc(max(0px,(100% - 1564px)/2) + clamp(20px,4vw,40px))}   /* left = .wrap content gutter (aligns with hero/cards); right = small gap before the ticker */
  .pcats__marquee{flex:1;min-width:0;width:auto;   /* tight LEFT fade → words vanish right behind the label; soft RIGHT fade at the screen edge */
    -webkit-mask:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 90px),transparent);mask:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 90px),transparent)}
}
/* RTL (Hebrew): «SELECTED PROJECTS» label aligns to the container's RIGHT gutter (not the screen edge); marquee fade mirrors (client 2026-07-09) */
[dir="rtl"] .pcats__label{text-align:right}
/* marquee streams the OTHER way in RTL (client 2026-07-09). Root of the "empty gap": a child WIDER than its container is anchored by the PARENT's direction → in the rtl marquee the track was right-anchored, and `reverse` dragged it further left, baring the right. Fix = direction:ltr on the MARQUEE (left-anchors the track), then `reverse` = rightward AND always filled. Needs ≥4 copies in the track (page-projects.php) so the -50% travel (2 copies) exceeds the window even when one copy is narrower than it. */
[dir="rtl"] .pcats__marquee{direction:ltr}
[dir="rtl"] .pcats__track{animation-direction:reverse}
@media (min-width:761px){
  [dir="rtl"] .pcats__label{padding-right:calc(max(0px,(100% - 1564px)/2) + clamp(20px,4vw,40px));padding-left:clamp(14px,1.4vw,26px)}
  [dir="rtl"] .pcats__marquee{-webkit-mask:linear-gradient(90deg,transparent 0,#000 90px,#000 calc(100% - 20px),transparent);mask:linear-gradient(90deg,transparent 0,#000 90px,#000 calc(100% - 20px),transparent)}
}
.pwork{background:#0a0a0a;color:#fff;padding:clamp(14px,1.8vw,26px) 0 clamp(64px,8vw,120px)}
.pwork__rows{display:flex;flex-direction:column;gap:clamp(14px,1.4vw,22px)}
.pwork__title{margin:clamp(24px,3.4vw,54px) 0 clamp(6px,1vw,14px);font:400 clamp(24px,3vw,48px)/1.06 var(--font);letter-spacing:.02em;text-transform:uppercase;color:#fff}   /* optional section heading (service/case pages) */
/* LIGHT variant — case-page «Project Gallery» on white (client 2026-07-07); cards stay dark image-tiles, only the band + heading go light */
.pwork--light{background:#f6f6f6;color:#0a0a0a;padding:clamp(30px,3.6vw,54px) 0 clamp(44px,5vw,80px)}
.pwork--light .pwork__title{color:#0a0a0a;font:600 clamp(14px,1.35vw,20px)/1.3 var(--font);letter-spacing:.05em;margin:0 0 clamp(18px,2.2vw,30px)}
.pgrow{display:grid;gap:clamp(10px,1.1vw,20px);grid-template-rows:minmax(0,1fr)}
.pgrow .prjcard{height:100%;min-height:0}
/* ===== ПОРТФОЛИО: 12 раскладок строго по файлу «Схема для портфолио» (new/). =====
   Колонки = пропорции ширины; высота ряда = aspect-ratio (тянется от ширины .wrap). */
.pgrow--r1{grid-template-columns:1.38fr 1fr;aspect-ratio:2.9}                 /* 01 — 2, крупнее слева, высокий */
.pgrow--r2{grid-template-columns:.94fr 1fr 1fr;aspect-ratio:3.7}             /* 02 — 3 в ряд */
.pgrow--r3{grid-template-columns:1.38fr 1fr;aspect-ratio:3.65}              /* 03 — 2, крупнее слева, пониже */
.pgrow--r4{grid-template-columns:1fr;aspect-ratio:2.8}                       /* 04 — 1 во всю ширину, высокая */
.pgrow--r5{grid-template-columns:1fr;aspect-ratio:4.4}                       /* 05 — 1 во всю ширину, полоса */
.pgrow--r6{grid-template-columns:1fr 1.38fr;aspect-ratio:4}                 /* 06 — 2, крупнее справа, пониже */
.pgrow--r7{grid-template-columns:1fr 1.38fr;aspect-ratio:3.1}              /* 07 — 2, крупнее справа, высокий */
.pgrow--r8{grid-template-columns:1fr 1.38fr;grid-template-rows:minmax(0,1fr) minmax(0,1fr);aspect-ratio:1.95}   /* 08 — слева высокая + справа две */
.pgrow--r8 .prjcard:nth-child(1){grid-column:1;grid-row:1/3}
.pgrow--r8 .prjcard:nth-child(2){grid-column:2;grid-row:1}
.pgrow--r8 .prjcard:nth-child(3){grid-column:2;grid-row:2}
.pgrow--r9{grid-template-columns:1.38fr 1fr;grid-template-rows:minmax(0,1fr) minmax(0,1fr);aspect-ratio:1.9}    /* 09 — слева две + справа высокая */
.pgrow--r9 .prjcard:nth-child(1){grid-column:1;grid-row:1}
.pgrow--r9 .prjcard:nth-child(2){grid-column:1;grid-row:2}
.pgrow--r9 .prjcard:nth-child(3){grid-column:2;grid-row:1/3}
.pgrow--r10{grid-template-columns:1fr 1fr 1fr;aspect-ratio:2}   /* 10 — 3 вертикальные плитки ОДИНАКОВОЙ высоты (клиент 2026-07-07: средняя не должна вылезать) */
.pgrow--r11{grid-template-columns:1fr 2.23fr;aspect-ratio:2}                /* 11 — узкая слева + широкая справа */
.pgrow--r12{grid-template-columns:1.94fr 1fr;aspect-ratio:2}               /* 12 — широкая слева + узкая справа */
.prjcard--nolink{cursor:default}
.prjcard--bare{cursor:default}                                            /* «просто галерея» (страницы услуг): не кликабельно */
.prjcard--bare:hover .prjcard__media{transform:none}                      /* и без hover-зума — это не карточка-ссылка */
.prjcard__media--empty{position:absolute;inset:0;background:linear-gradient(135deg,#1c1c1c,#0e0e0e)}
/* планшет — мягче пропорции, спец-раскладки (8/9/10) распрямляем в обычную сетку */
@media (max-width:980px){
  .pgrow{aspect-ratio:auto !important;grid-template-rows:none !important;grid-auto-rows:clamp(190px,30vw,300px);row-gap:clamp(10px,1.1vw,20px) !important}
  .pgrow--r1,.pgrow--r3,.pgrow--r11,.pgrow--r12{grid-template-columns:1.3fr 1fr}
  .pgrow--r6,.pgrow--r7{grid-template-columns:1fr 1.3fr}
  .pgrow--r2,.pgrow--r10{grid-template-columns:1fr 1fr 1fr}
  .pgrow--r4,.pgrow--r5{grid-template-columns:1fr}
  .pgrow--r8,.pgrow--r9{grid-template-columns:1fr 1fr}
  .pgrow--r8 .prjcard,.pgrow--r9 .prjcard,.pgrow--r10 .prjcard{grid-column:auto !important;grid-row:auto !important}
  .pcats__item{font-size:clamp(14px,3.6vw,17px);letter-spacing:.1em}
}
/* телефон — всё в один столбец */
@media (max-width:600px){
  .pgrow{grid-template-columns:1fr !important;grid-auto-rows:clamp(200px,58vw,290px)}
}
.pfilter{display:flex;align-items:center;justify-content:space-between;gap:18px 30px;flex-wrap:wrap;
  padding-bottom:clamp(18px,2vw,28px);margin-bottom:clamp(24px,3vw,44px);border-bottom:1px solid rgba(255,255,255,.14)}
.pfilter__tabs{display:flex;flex-wrap:wrap;gap:clamp(10px,1.5vw,28px);list-style:none;margin:0;padding:0}
.pfilter__tab{position:relative;background:none;border:0;padding:6px 0;cursor:pointer;font:600 clamp(12px,.95vw,14px)/1 var(--font);
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);transition:color .22s var(--ease)}
.pfilter__tab:hover{color:#fff}
.pfilter__tab.is-active{color:#fff}
.pfilter__tab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cta-b),var(--cta-a))}
.pfilter__label{display:inline-flex;align-items:center;gap:9px;font:600 12px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.pfilter__label svg{width:16px;height:16px}

.pgrid{display:flex;flex-wrap:wrap;gap:clamp(14px,1.4vw,22px)}
.prjcard{position:relative;display:block;overflow:hidden;border-radius:8px;background:#161616;text-decoration:none;color:#fff}
.prjcard.is-hidden{display:none}
/* 2 / 3 / 2 rhythm (mockup): row-of-2 = wide 58% + narrow 42% (same height, more landscape); row-of-3 = thirds (shorter).
   flex-grow fills each row exactly; the filter JS re-assigns these classes by VISIBLE index so the rhythm survives filtering. */
.prjcard--wide{flex:1 1 56%;aspect-ratio:2/1}
.prjcard--narrow{flex:1 1 40%;aspect-ratio:1.45/1}
.prjcard--third{flex:1 1 30%;aspect-ratio:1.4/1}
.prjcard__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.prjcard:hover .prjcard__media{transform:scale(1.05)}
.prjcard__shade{position:absolute;inset:0;z-index:1;pointer-events:none;   /* mirror .pcard__shade (homepage) — bottom + left-corner, keeps the caption legible on any image. client 2026-07-05 */
  background:linear-gradient(to top,rgba(6,8,12,.85) 0%,rgba(6,8,12,.28) 40%,rgba(6,8,12,0) 68%),
            linear-gradient(to right,rgba(6,8,12,.5) 0%,rgba(6,8,12,0) 42%)}
/* top-left service badge pill (Visualization / Film / 3D Tour / …) */
.prjcard__badge{position:absolute;z-index:2;top:clamp(14px,1.4vw,22px);left:clamp(14px,1.4vw,22px);display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px 7px 9px;border-radius:999px;background:rgba(10,10,10,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16);font:600 clamp(9px,.72vw,11px)/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.prjcard__badge-ic{flex:none;display:flex}
.prjcard__badge-ic svg{width:16px;height:16px;display:block}
/* card caption mirrors the homepage .pcard exactly (title / sub / VIEW PROJECT + arrow) per client 2026-07-05 */
.prjcard__body{position:absolute;left:0;bottom:0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(20px,2.4vw,42px)}   /* = .pcard__body */
.prjcard__name{margin:0;font:400 clamp(22px,2.5vw,42px)/1.04 var(--font);letter-spacing:.01em;text-transform:uppercase;color:#fff}   /* = .pcard__title (thin 400, larger) */
.prjcard__type{margin:clamp(6px,.8vw,12px) 0 0;font:400 clamp(12px,1vw,15px)/1.4 var(--font);letter-spacing:.02em;color:rgba(255,255,255,.78)}   /* = .pcard__sub (no capitalize) */
.prjcard__view{display:inline-flex;align-items:center;gap:8px;margin-top:clamp(14px,1.6vw,24px);font:600 clamp(11px,.85vw,13px)/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:#fff}   /* = .pcard__view */
.prjcard__view svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.prjcard:hover .prjcard__view svg{transform:translateX(4px)}
/* RTL (Hebrew): caption hugs the RIGHT edge; corner-shade + «view» arrow mirror to match (client 2026-07-09) */
[dir="rtl"] .prjcard__body{left:auto;right:0;align-items:flex-start;text-align:right}
[dir="rtl"] .prjcard__shade{background:linear-gradient(to top,rgba(6,8,12,.85) 0%,rgba(6,8,12,.28) 40%,rgba(6,8,12,0) 68%),linear-gradient(to left,rgba(6,8,12,.5) 0%,rgba(6,8,12,0) 42%)}
[dir="rtl"] .prjcard__view svg{transform:scaleX(-1)}
[dir="rtl"] .prjcard:hover .prjcard__view svg{transform:scaleX(-1) translateX(4px)}
.prjcard:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:980px){ .prjcard--wide,.prjcard--narrow,.prjcard--third{flex:1 1 calc(50% - clamp(7px,.7vw,11px));aspect-ratio:16/10} }

@media (max-width:760px){
  .phero{aspect-ratio:430/560;min-height:0;max-height:88vh}
  .phero__shade{background:linear-gradient(120deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.4) 54%,rgba(0,0,0,.05) 100%),linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 34%)}
  .phero__title{font-size:clamp(38px,13vw,64px)}
  .phero__lead{max-width:none}
  /* xp-hero (Expertise) matched to .phero mobile per client 2026-07-06 */
  .xp-hero{aspect-ratio:430/560;min-height:0;max-height:88vh}
  .xp-hero__title{font-size:clamp(38px,13vw,64px)}
  .xp-hero__lead{max-width:none}
  /* srv-hero matched to phero mobile per client 2026-07-05 (height + shade; title keeps its own responsive size — service names are longer) */
  .srv-hero{aspect-ratio:430/560;min-height:0;max-height:88vh}
  .srv-hero .srv-hero__title{max-width:none}   /* mobile: FULL width so long service names break naturally (2 lines), not word-by-word — higher specificity (0,2,0) beats the base .srv-hero__title{max-width:50%} that sits LATER in the file; client 2026-07-09 */
  .srv-hero__shade{background:linear-gradient(120deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.4) 54%,rgba(0,0,0,.05) 100%),linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 34%)}
  .pgrid{gap:14px}
  .prjcard--wide,.prjcard--narrow,.prjcard--third{flex:1 1 100%;aspect-ratio:16/10}
  .pfilter{flex-direction:column;align-items:flex-start;gap:14px}
  .pfilter__label{display:none}
}

/* Header logo is WHITE everywhere; recolour to dark ONLY on Privacy Policy + 404 (body.logo-dark). */
/* Privacy/404 are light pages → keep the (already-dark) logo dark; also beats the mobile white-flip above. */
/* redesign v2: header bar is now DARK on every page → logo + pills stay WHITE everywhere (no light-page exception). */

/* ============================ 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 + numbered services (left), Hebrew sub + image (right) */
.vsys{padding-block:clamp(60px,7.24vw,139px) clamp(80px,13.1vw,251px);display:grid;grid-template-columns:521fr 880fr;
  column-gap:83px;row-gap:clamp(40px,4.85vw,93px);align-items:end}   /* 2×2 grid: title|sub (row1, bottom-aligned), list|image (row2). ONLY photo & menu swapped vs original: title stays LEFT, Hebrew sub stays RIGHT, photo→right, menu→left. Image height ALWAYS == list height (Figma); cols 521·880 keeps the photo the wider track (menu min-content ≈603 pins col1) */
.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:2;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:1;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 */
/* reserve the BOLD width on EVERY item (hidden 700-weight ghost) so activating one (→700) never widens
   the content-sized grid column → no horizontal shift when the longest item (e.g. ADVERTISEMENT & PROMOTION) is active */
.vsys__name::after{content:attr(data-text);display:block;font-weight:700;height:0;overflow:hidden;visibility:hidden;pointer-events:none}
.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) */
  .vsys__name::after{content:none}   /* single-column from here down → no grid shift, ghost not needed */
  /* mobile order: title → caption(sub) → image → list (caption ABOVE the photo) */
  .vsys__title{order:1} .vsys__sub{order:2} .vsys__img{order:3} .vsys__view,.vsys__list{order:4}
}
/* 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{min-height:54px;padding:10px 16px;border-width:2px;border-radius:16px;gap:14px}   /* smaller, tidier buttons that fit narrow phones */
  .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:14px;min-width:1.7em}
  .vsys__name{font-size:16px;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(22px,7vw,34px);line-height:1.1}   /* smaller on mobile so long titles (INTERIOR VISUALIZATIONS) fit neatly */
  .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(11px,3.5vw,17px)}
  .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 media, white title + intro grouped on the LEFT (mockup 2026-07) ---- */
.chero{position:relative;width:100%;aspect-ratio:1920/620;min-height:clamp(460px,50vh,560px);overflow:hidden;background:#0c0d0f;color:#fff}   /* height + bottom-anchored copy matched to .phero (Projects) so the menu pages share ONE hero style — client 2026-07-07 */
.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;   /* left + BOTTOM darken for the now bottom-anchored copy */
  background:linear-gradient(100deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.44) 34%,rgba(0,0,0,.1) 64%,rgba(0,0,0,0) 88%),
            linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 42%)}
.chero__content{position:absolute;left:0;right:0;bottom:clamp(44px,7vh,90px);z-index:2}   /* = .phero__inner (bottom-anchored, .wrap inset) — the 2-line title's BOTTOM line lands where «PROJECTS» sits */
.chero__title{margin:0;font:400 clamp(40px,6vw,104px)/1.16 var(--font);letter-spacing:.07em;text-transform:uppercase;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}   /* = .phero__title; 2 lines via <br>, both weight 400 (matches «PROJECTS») */
.chero__sub{margin:clamp(12px,1.4vw,20px) 0 0;font:400 clamp(18px,1.8vw,30px)/1.2 var(--font);letter-spacing:.03em;color:rgba(255,255,255,.9)}   /* = .phero__sub (medium) */
.chero__lead{margin:clamp(12px,1.3vw,18px) 0 0;max-width:clamp(300px,40vw,540px);max-height:1.5em;overflow:visible;font:300 clamp(14px,1.05vw,17px)/1.5 var(--font);letter-spacing:.02em;color:rgba(255,255,255,.62)}   /* = .phero__lead; max-height:1.5em (=1 line) so a 2-line lead reserves ONE line → title+sub stay at the .phero height (no upward skew vs Projects), the 2nd line spills DOWN — same trick as .pf2-hero__lead (client 2026-07-07) */

/* ---- CHOOSE YOUR PREFERRED WAY (mockup 2026-07): centred heading + blue rule + 3 image cards + outlined info bar ---- */
.cinfo{background:#f6f6f6;padding:clamp(54px,7vw,104px) 0 clamp(64px,8vw,120px)}
.cinfo__head{text-align:center;margin:0 auto clamp(38px,4.4vw,66px)}
.cinfo__title{margin:0;font-family:var(--font);font-weight:400;line-height:1.14;letter-spacing:.06em;text-transform:uppercase;color:#0a0a0a;font-size:clamp(24px,2.5vw,42px)}   /* thin per client 2026-07-07 (was 700) */
.cinfo__line{display:block;width:64px;height:3px;margin:clamp(14px,1.4vw,20px) auto 0;border-radius:2px;background:linear-gradient(90deg,var(--cta-b),var(--cta-a))}
.cways{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,1.8vw,30px);align-items:stretch}
.cway{display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(10,10,10,.1);border-radius:16px;background:#f6f6f6;box-shadow:0 1px 2px rgba(10,10,10,.04);text-decoration:none;color:inherit;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.cway:hover{transform:translateY(-5px);box-shadow:0 20px 46px rgba(10,10,10,.12);border-color:rgba(15,129,178,.4)}
.cway__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#eaeaea}
.cway__media img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.cway:hover .cway__media img{transform:scale(1.055)}
.cway__body{display:flex;flex-direction:column;flex:1;padding:clamp(20px,1.9vw,32px) clamp(20px,1.9vw,32px) clamp(24px,2.2vw,34px)}
.cway__title{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--font);font-weight:700;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:#0a0a0a;font-size:clamp(15px,1.15vw,19px)}   /* client: titles BLACK (arrow follows via currentColor) */
.cway__title svg{flex:none;width:16px;height:16px;transition:transform .25s var(--ease)}
.cway:hover .cway__title svg{transform:translateX(5px)}
.cway__desc{flex:1;margin:clamp(12px,1.2vw,16px) 0 0;font-family:var(--font);font-weight:400;font-size:clamp(14px,1vw,15px);line-height:1.55;letter-spacing:.01em;color:rgba(10,10,10,.82)}   /* client: description text near-black too */
.cway__contact{margin-top:clamp(16px,1.9vw,26px);font-family:var(--font);font-weight:200;font-size:clamp(16px,1.3vw,21px);letter-spacing:.02em;text-transform:uppercase;color:#0a0a0a;overflow-wrap:anywhere}   /* phone/email → thinnest weight 200 (variable-font axis min) per client 2026-07-07 */
/* on hover the CARD TITLE (not the phone) turns brand-blue GRADIENT — client 2026-07-07 */
.cway:hover .cway__title{color:var(--cta-a)}   /* arrow (currentColor) → brand blue */
.cway:hover .cway__title span{background:linear-gradient(90deg,var(--cta-b),var(--cta-a));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}   /* «Schedule a Call» / «Chat on WhatsApp» text → brand gradient */
/* outlined info bar: location (pin) + studio (Shabbat candles) */
.cbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px;margin-top:clamp(28px,3vw,46px);padding:clamp(18px,1.8vw,26px) clamp(24px,2.6vw,42px);border:1px solid rgba(10,10,10,.14);border-radius:14px}
.cbar__item{display:flex;align-items:center;gap:14px;font-family:var(--font);font-weight:400;font-size:clamp(14px,1vw,16px);letter-spacing:.01em;color:rgba(10,10,10,.66)}
.cbar__ic{flex:none;display:flex;color:var(--cta-a)}
.cbar__ic svg,.cbar__ic .cbar__icimg{width:22px;height:22px;display:block;object-fit:contain}
/* TABLET (761–1024): 3 image cards fit; drop to 2 columns so they don't cramp on iPad portrait. */
@media (min-width:761px) and (max-width:1024px){
  .cways{grid-template-columns:repeat(2,1fr)}
}

/* ---- CONTACT MOBILE (≤760, mockup 2026-07): hero title scales, cards stack to 1 column, bar stacks ---- */
@media (max-width:760px){
  .chero{aspect-ratio:430/560;min-height:0;max-height:88vh}   /* = .phero mobile */
  .chero__shade{background:linear-gradient(118deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.4) 52%,rgba(0,0,0,.05) 100%),linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 34%)}
  .chero__title{font-size:clamp(26px,7.4vw,40px)}   /* smaller so the 2 long title lines fit on a phone */
  .chero__lead{max-width:none;max-height:none}   /* mobile: let the lead flow (single-page scroll, no cross-page jump concern) */
  .cways{grid-template-columns:1fr;gap:18px}
  .cbar{flex-direction:column;align-items:flex-start;gap:16px}
}

/* ============================================================================
   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) ---------- */
  .site-header{ top:30px; }
  .brand svg{ 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{ aspect-ratio:430/560; min-height:0; max-height:88vh; }   /* matched to .phero mobile per client 2026-07-05 */
  .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 → sliding TABS + one elongated media + counter/bar/arrows + centred caption/LEARN MORE (mockup MOB) ---------- */
  .expertise{ padding:clamp(46px,9vh,80px) 0 clamp(40px,7vh,60px); }
  .expertise__top{ flex-direction:column; align-items:center; text-align:center; gap:10px; }
  .expertise__title{ font-size:12px; letter-spacing:.2em; }   /* small blue eyebrow on mobile too */
  .expertise__tags, .viz{ display:none; }        /* desktop tags + INTERIOR band are replaced by the carousel */

  .mexp{ display:block; margin-top:clamp(22px,6vw,32px); }
  /* sliding tabs — JS transforms the rail so the active tab sits in the middle (first → empty space on the left) */
  .mexp__tabs{ overflow:hidden;
    -webkit-mask:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);
            mask:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent); }
  .mexp__tabsrail{ display:flex; width:max-content; align-items:center; gap:26px; padding:0 18px;
    will-change:transform; transition:transform .45s var(--ease); }
  .mexp__tab{ flex:none; position:relative; border:0; background:none; padding:6px 0 13px; cursor:pointer; white-space:nowrap;
    font:400 15px/1 var(--font); letter-spacing:.11em; text-transform:uppercase; color:rgba(10,10,10,.4);
    transition:color .25s var(--ease); }
  .mexp__tab.is-active{ color:#0a0a0a; font-weight:600; }
  .mexp__tab.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px;
    background:linear-gradient(90deg,var(--cta-b),var(--cta-a)); }

  /* one elongated media at a time (cross-fade) */
  .mexp__stage{ position:relative; margin:clamp(18px,5vw,26px) 12px 0; aspect-ratio:374/232; border-radius:8px; overflow:hidden; background:#e9e9e9; }
  .mexp__slide{ position:absolute; inset:0; opacity:0; transition:opacity .5s var(--ease); }
  .mexp__slide.is-active{ opacity:1; }
  .mexp__slide img, .mexp__slide video{ width:100%; height:100%; object-fit:cover; display:block; }
  .mexp__slide .mexp__ph{ display:flex; align-items:center; justify-content:center; width:100%; height:100%;
    padding:0 14px; text-align:center; color:#fff; font-weight:700; font-size:18px; letter-spacing:.04em;
    background:linear-gradient(135deg,var(--cta-a,#0f81b2),var(--cta-b,#0a5e84)); }   /* услуга без картинки */

  /* counter + progress bar + prev/next */
  .mexp__foot{ display:flex; align-items:center; gap:15px; margin:clamp(16px,4.5vw,22px) 12px 0; }
  .mexp__count{ flex:none; font:400 14px/1 var(--font); letter-spacing:.05em; color:rgba(10,10,10,.5); }
  .mexp__count b{ font-weight:600; color:#0a0a0a; }
  .mexp__bar{ position:relative; flex:1; height:2px; margin:0; background:#e2e2e2; border-radius:2px; overflow:hidden; }
  .mexp__bar-fill{ position:absolute; inset:0 auto 0 0; width:25%; border-radius:2px;
    background:linear-gradient(90deg,var(--cta-b),var(--cta-a)); transition:transform .4s var(--ease); }
  .mexp__nav{ flex:none; display:flex; gap:9px; }
  .mexp__arrow{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; padding:0;
    border:1px solid rgba(10,10,10,.2); border-radius:50%; background:none; color:#0a0a0a; cursor:pointer;
    transition:border-color .2s var(--ease),color .2s var(--ease); }
  .mexp__arrow:hover{ border-color:var(--cta-a); color:var(--cta-a); }
  .mexp__arrow svg{ width:17px; height:17px; }

  /* centred caption + LEARN MORE */
  .mexp__desc{ margin:clamp(18px,5vw,26px) auto 0; max-width:none; padding:0 var(--mpad); text-align:center;   /* SAME left/right gutter as .wrap (the FEATURED PROJECTS block) so the widths line up on mobile — client 2026-07-09 */
    color:rgba(10,10,10,.62); font:400 15px/1.5 var(--font); direction:ltr; }
  .mexp__desc p{ margin:0; }
  .mexp__more{ display:flex; align-items:center; justify-content:center; gap:10px; width:fit-content; max-width:100%;
    margin:clamp(18px,5vw,26px) auto 0; padding:13px 30px; border:1px solid rgba(10,10,10,.28); border-radius:40px;
    font:600 13px/1 var(--font); letter-spacing:.14em; text-transform:uppercase; color:#0a0a0a; text-decoration:none;
    transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease); }
  .mexp__more:hover{ border-color:#0a0a0a; }
  .mexp__more svg{ width:17px; height:17px; }
  .mexp__more.is-hidden{ display:none; }

  /* ---------- THE PROCESS → num+label+desc, one TALL media, counter/bar/arrows (mockup MOB) ---------- */
  .process{ padding:clamp(52px,9vh,80px) 0 clamp(44px,7vh,64px); }
  .process__head{ flex-direction:column; gap:14px; margin-bottom:clamp(26px,7vw,38px); }
  .procsteps{ display:none; }            /* the horizontal step row is replaced by the .mproc slider on phones */
  .mproc{ display:block; }
  .mproc__num{ display:inline-block; font:600 15px/1 var(--font); letter-spacing:.06em; color:rgba(10,10,10,.5); }
  .mproc__num::after{ content:""; display:block; width:22px; height:2px; margin-top:9px; background:var(--cta-a); }
  .mproc__label{ margin:clamp(13px,3.6vw,17px) 0 clamp(9px,2.4vw,12px); font:400 22px/1.14 var(--font);
    letter-spacing:.06em; text-transform:uppercase; color:#0a0a0a; }
  .mproc__desc{ margin:0; max-width:340px; font:400 15px/1.55 var(--font); color:rgba(10,10,10,.56); }
  .mproc__stage{ position:relative; margin-top:clamp(20px,5.5vw,28px); aspect-ratio:3/4; border-radius:8px; overflow:hidden; background:#e9e9e9; }
  .mproc__slide{ position:absolute; inset:0; opacity:0; transition:opacity .5s var(--ease); }
  .mproc__slide.is-active{ opacity:1; }
  .mproc__slide img, .mproc__slide video{ width:100%; height:100%; object-fit:cover; display:block; }
  .mproc__foot{ display:flex; align-items:center; gap:15px; margin-top:clamp(16px,4.5vw,22px); }
  .mproc__count{ flex:none; font:400 14px/1 var(--font); letter-spacing:.05em; color:rgba(10,10,10,.5); }
  .mproc__count b{ font-weight:600; color:#0a0a0a; }
  .mproc__bar{ position:relative; flex:1; height:2px; background:#e2e2e2; border-radius:2px; overflow:hidden; }
  .mproc__fill{ position:absolute; inset:0 auto 0 0; width:25%; border-radius:2px;
    background:linear-gradient(90deg,var(--cta-b),var(--cta-a)); transition:transform .4s var(--ease); }
  .mproc__nav{ flex:none; display:flex; gap:9px; }
  .mproc__arrow{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; padding:0;
    border:1px solid rgba(10,10,10,.2); border-radius:50%; background:none; color:#0a0a0a; cursor:pointer;
    transition:border-color .2s var(--ease),color .2s var(--ease); }
  .mproc__arrow:hover{ border-color:var(--cta-a); color:var(--cta-a); }
  .mproc__arrow svg{ width:17px; height:17px; }

  /* ---------- 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 (mockup 03): mobile is handled by the section's own @media rules (horizontal swipe row) */

  /* AI CHARACTERS (mockup 04): mobile handled by the section's own @media rules */

  /* ---------- 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 */
  /* client MOB: questions/answers were far too big — shrink so the answer ≈ the grey subtitle size
     and the question = that size but bold (matches the mockup). Cards get more compact too. */
  .faqitem__head{ min-height:0; gap:12px; padding:13px 18px; border:1px solid rgba(85,180,209,.30); border-radius:14px;
    box-shadow:0 3px 14px rgba(85,180,209,.18); }
  .faqitem__n{ min-width:20px; font-size:13px; }
  .faqitem__chev{ left:16px; width:12px; height:12px; }               /* Figma chevron ~12px, ~17 into card */
  .faqitem__q{ font-size:15px; font-weight:600; line-height:1.32; white-space:normal; }   /* = grey subtitle size, bold */
  .faqitem__tri{ width:18px; height:18px; }
  .faqitem.is-open .faqitem__head{ box-shadow:0 6px 20px rgba(85,180,209,.26); }
  .faqitem.is-open .faqitem__panel{ max-height:440px; }
  .faqitem__a{ font-size:14px; font-weight:300; line-height:1.5; padding:8px 18px 14px; }   /* ≈ subtitle, slightly less */

  /* ---------- START YOUR PROJECT (form) — compact so the WHOLE form fits one phone screen (client MOB) ---------- */
  .cta{ padding:clamp(40px,10vw,60px) 0 clamp(34px,9vw,50px); }
  .cta__media{ display:none; }                                     /* faded side photo is desktop-only (would overlap the stacked form) */
  .cta__grid{ grid-template-columns:1fr; gap:clamp(20px,6vw,30px); }
  .cta__title{ font-size:clamp(30px,8.4vw,40px); line-height:1.04; }   /* smaller so the FIXED 3-line <br> split fits + the form stays on one screen */
  .cta__sub{ max-width:none; margin-top:12px; font-size:14px; }
  .cta__form .wpcf7-form p{ margin:0 0 15px; }                     /* tighter field rhythm */
  .cta__form label{ font-size:11.5px; letter-spacing:.14em; }
  .cta__form .wpcf7-form-control-wrap{ margin-top:8px; }
  .cta__form .wpcf7-text,.cta__form .wpcf7-email,.cta__form .wpcf7-tel,.cta__form .wpcf7-textarea{ font-size:16px; padding-bottom:8px; }
  .cta__form .wpcf7-textarea{ min-height:44px; }
  .cta__privacy{ margin:14px 0 12px!important; }
  .cta__privacy-txt{ font-size:12.5px; line-height:1.35; }
  .cta__privacy-ic svg{ width:22px; height:22px; }
  .cta__form .wpcf7-submit{ height:52px; }

  /* ---------- FOOTER (mockup MOB) — 2-col MENU|SERVICES on top → SOCIAL → CONTACTS (phone/email +
       pinned location/Shabbat) → big ELEVATE VISION wordmark → © . Compact to fit one phone screen. ---------- */
  .footer__hero{ display:none; }                                       /* the straddling hero image was retired site-wide */
  .footer__cols{ flex-direction:column; gap:clamp(18px,5.5vw,24px); padding-top:clamp(26px,7vw,38px); }   /* SOCIAL pulled UP closer to the last Services line (client 2026-07-08) */

  /* MENU + SERVICES side by side (2 columns); headings the same size */
  .footer__services{ order:1; flex:0 0 auto; flex-direction:row; gap:clamp(14px,4vw,24px); align-items:flex-start; margin-bottom:-25px; }   /* margin-bottom:-25px cancels a stubborn ~1-line-height (24.6px @12px/2.05) of phantom height the widget-nav container carries below its columns, which otherwise pushed SOCIAL ~25px too far from Services (client 2026-07-08) */
  .footer__services .footer__col:first-child{ flex:0 0 34%; }        /* MENU narrow → SERVICES gets room for its long labels (no wrap) */
  .footer__services .footer__col:last-child{ flex:1 1 auto; }
  .footer__col{ font-size:12px; line-height:2.05; gap:0; }
  .footer__col b{ font-size:13.5px; margin-bottom:5px; }

  /* SOCIAL first, then CONTACTS — even "block" rhythm: TIGHT within a block (label ↔ its content),
     ~22px BETWEEN blocks (icons↔CONTACTS, email↔location, Shabbat↔logo) so each reads as its own block (client 2026-07-08) */
  .footer__right{ order:2; display:flex; flex-direction:column; gap:9px; }
  .footer__lbl{ padding-top:0; font-size:13.5px; }
  .footer__lbl--social{ order:1; }
  .footer__icons{ order:2; gap:10px; margin-top:-1px; }
  .footer__icons a{ width:40px; height:40px; border-radius:12px; }
  .footer__icons img{ width:19px; height:19px; }
  .footer__lbl--contacts{ order:3; margin-top:14px; }        /* block gap: icons → CONTACTS */
  .footer__info{ order:4; gap:7px; }
  .footer__info a{ font-size:22px; letter-spacing:.04em; }
  .footer__note{ order:5; margin-top:14px; gap:6px; font-size:13.5px; line-height:1.4; }   /* block gap: email → location */
  .footer__noteic{ width:17px; height:17px; }

  .footer__logo{ margin-top:clamp(26px,8vw,46px); }                    /* MORE air above the wordmark — client 2026-07-08: logo + © pushed lower, a distinct block at the very bottom */
  .footer__logo[data-reveal]{ opacity:1; transform:none; }            /* never hide it — sits in the IO bottom dead-zone */
  .footer__copy{ font-size:13px; text-transform:uppercase; margin-top:12px; }
}

/* ============================ 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:27px;background:#fff}   /* rounded-rect to match the button (Figma 848:1036, r27) — NOT a circle */
.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{position:relative;flex:0 0 51.6%;aspect-ratio:768/765;border-radius:3px;overflow:hidden}
.pf-can__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .55s ease}
.pf-can__imgx--next{opacity:0}                                                              /* second crossfade layer (hover swaps the left photo) */
.pf-can__list{flex:1 1 auto;list-style:none;margin:0;padding:0;direction:rtl;text-align:right}
.pf-can__list li{cursor:pointer;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}
.pf-can__mob{display:none}                                                                   /* mobile-only carousel (shown in the ≤760 block) */
/* -- 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 = black dot (the arc + centre are 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}
/* HOW IT WORKS — scroll-pinned scrubber: .pf-how sticks inside a tall track; scroll fills the ring + advances steps. Pin ONLY when motion is allowed (else it's normal flow + click-to-change). */
@media (prefers-reduced-motion: no-preference){
  .pf-how-track{position:relative;height:calc(100vh + var(--pf-how-n,7) * 60vh)}   /* 100vh pin + N·60vh scrub distance */
  .pf-how-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
  .pf-how-pin .pf-how{width:100%;padding:0}   /* fill the pin so the diagram/lead %-widths resolve against the full width */
}
@media (prefers-reduced-motion: no-preference) and (min-width:761px){
  .pf-how-pin .pf-how{align-items:center}
  .pf-how-pin .pf-how__lead{margin-top:0}
  .pf-how-pin .pf-how__diagram{max-width:min(45.4%,72vh)}   /* keep the ring inside the viewport on short screens */
}
@media (prefers-reduced-motion: no-preference) and (max-width:760px){
  .pf-how-track{height:calc(100vh + var(--pf-how-n,7) * 46vh)}   /* shorter scrub on phones */
}

/* ============================ 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}}

/* ============================ MOBILE MENU (Figma 858:1667) ============================ */
/* ===== Mobile menu — redesign to new/MENU MOB PHOTO.png (client 2026-07-09): light sheet over a faded interior photo · per-item subtitle+arrow rows · social row w/ dividers · blue CTA ===== */
.mobmenu{position:fixed;inset:0;z-index:60;display:none;overflow:hidden;background:#f6f6f6}
.mobmenu.is-open{display:block;animation:evFade .25s var(--ease)}
.mobmenu__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:70% center;background-repeat:no-repeat}
.mobmenu__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(102deg,rgba(246,246,246,.97) 17%,rgba(246,246,246,.82) 45%,rgba(246,246,246,.44) 78%,rgba(246,246,246,.28) 100%)}
.mobmenu__sheet{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;padding:30px var(--mpad,28px) 34px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mobmenu__bar{display:flex;align-items:flex-start;justify-content:space-between}
.mobmenu__logo{display:block;color:#0a1420}   /* dark letters (currentColor) on the light sheet; the «O» keeps its blue gradient — client 2026-07-09 (was a white ev_opt_logo img = invisible) */
.mobmenu__logo svg{height:48px;width:auto;display:block}
.mobmenu__close{flex:0 0 auto;width:40px;height:40px;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:-2px -6px 0 0}
.mobmenu__close svg{width:23px;height:23px;stroke:#0a1420;stroke-width:1.6;stroke-linecap:round;fill:none}
/* nav rows: TITLE + subtitle + arrow, hairline dividers */
.mobmenu__links{display:flex;flex-direction:column;margin-top:clamp(38px,12vw,84px)}
.mobmenu__item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(17px,4.4vw,25px) 0;text-decoration:none;color:#0a1420;border-top:1px solid rgba(10,20,32,.12)}
.mobmenu__item:first-child{border-top:0}
.mobmenu__item-title{display:block;font:400 clamp(22px,6.2vw,29px)/1.04 var(--font);letter-spacing:.01em;text-transform:uppercase;color:#0a1420}
.mobmenu__item-sub{display:block;margin-top:7px;font:400 clamp(13px,3.5vw,15px)/1.3 var(--font);letter-spacing:0;text-transform:none;color:rgba(10,20,32,.5)}
.mobmenu__item-arr{flex:0 0 auto;color:#0a1420;transition:transform .2s,color .2s}
.mobmenu__item-arr svg{width:24px;height:24px;display:block}
.mobmenu__item:hover .mobmenu__item-arr{color:var(--cta-a);transform:translateX(3px)}
.mobmenu__item.is-current .mobmenu__item-title{color:var(--cta-a)}
/* foot: FOLLOW US + social row (dividers) + blue CTA */
.mobmenu__foot{margin-top:auto;padding-top:clamp(24px,7vw,42px)}
.mobmenu__lbl{display:block;font:400 12px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:rgba(10,20,32,.5);margin-bottom:clamp(13px,4vw,19px)}
.mobmenu__icons{display:flex;align-items:center;margin-bottom:clamp(20px,5.5vw,30px)}
.mobmenu__icons a{display:flex;align-items:center;justify-content:center;padding:0 clamp(13px,4.2vw,21px)}
.mobmenu__icons a:first-child{padding-left:0}
.mobmenu__icons a+a{border-left:1px solid rgba(10,20,32,.16)}
.mobmenu__icons img{width:23px;height:23px;display:block}
.mobmenu__cta{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;height:60px;margin:0;border-radius:12px;text-transform:uppercase;letter-spacing:.05em}
.mobmenu__cta-arr{display:flex}
.mobmenu__cta-arr svg{width:20px;height:20px;display:block}

/* ============================ START YOUR PROJECT popup (Figma 373:1381) ============================ */
.ev-cta-modal{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;
  padding:clamp(14px,4vw,44px);background:rgba(0,0,0,.78)}   /* затемнение сильнее (client 2026-07-07) */
.ev-cta-modal.is-open{display:flex;animation:evFade .25s var(--ease)}
.ev-cta-modal__box{position:relative;display:flex;width:min(1060px,96vw);max-height:93vh;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.5)}
.ev-cta-modal__panel{flex:1 1 auto;min-width:0;padding:clamp(28px,2.7vw,42px) clamp(26px,2.6vw,40px) clamp(22px,2.2vw,32px) clamp(30px,2.9vw,44px);overflow-y:auto}   /* больше воздуха сверху/по краям + отступы примерно равны, но всё влезает без прокрутки (client 2026-07-08) */
.ev-cta-modal__media{flex:0 0 46%;align-self:stretch}   /* картинка сбоку ШИРЕ (~46%, не 50/50) — client 2026-07-07 */
.ev-cta-modal__media img{width:100%;height:100%;object-fit:cover;display:block}
.ev-cta-modal__close{position:absolute;top:18px;right:18px;left:auto;width:34px;height:34px;border:0;border-radius:50%;background:rgba(0,0,0,.32);cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center}   /* справа-сверху над картинкой */
[dir="rtl"] .ev-cta-modal__close{right:auto;left:18px}   /* RTL: картинка слева → крестик зеркалим в левый верхний угол (client 2026-07-09) */
.ev-cta-modal__close svg{width:18px;height:18px;stroke:#fff;stroke-width:2.2;stroke-linecap:round;fill:none}
.ev-cta-modal__title{margin:0;max-width:9em;font:400 clamp(22px,2.3vw,32px)/1.12 var(--font);letter-spacing:.02em;text-transform:uppercase;color:#0a0a0a}   /* THIN + узкая колонка → заголовок в 2 строки (моб. 2–3), как в обычной форме (клиент 2026-07-08: был жирный/в 1 строку) */
.ev-cta-modal__sub{margin:9px 0 12px;max-width:492px;font:300 clamp(15px,1.3vw,18px)/1.34 var(--font-he);letter-spacing:.01em;text-transform:none;color:#000}   /* sentence case — Title Case (capitalize) was wrong for RU (заглавные «С»/«В») & broke EN contractions (Let'S) — 2026-07-09 */
.ev-cta-modal__form{max-width:492px}
.ev-cta-modal__form .wpcf7-form p{margin:0 0 clamp(2px,0.4vw,6px)}   /* поля плотнее → 2-строчный заголовок + воздух по краям всё равно влезают без прокрутки (client 2026-07-08) */
.ev-cta-modal__form .cta__privacy{margin-top:clamp(10px,1.1vw,16px)}
.ev-cta-modal__form .cta__privacy-txt{font:400 12.5px/1.35 var(--font)}   /* мельче — занимает меньше места (client 2026-07-08) */
.ev-cta-modal__form .cta__privacy-ic svg{width:22px;height:22px}
.ev-cta-modal__form .wpcf7-text,.ev-cta-modal__form .wpcf7-tel,.ev-cta-modal__form .wpcf7-email,.ev-cta-modal__form .wpcf7-textarea{padding-bottom:5px}
.ev-cta-modal__form textarea.wpcf7-textarea{min-height:32px;height:32px}
.ev-cta-modal__form .wpcf7-form-control-wrap{margin-top:7px}   /* подпись↔поле плотнее → блок полей ниже, всё помещается */

/* ============================ THANK YOU popup (Figma 899:1969 / mobile 899:1952) ============================ */
.ev-thanks{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;
  padding:clamp(14px,4vw,40px);background:rgba(0,0,0,.6)}
.ev-thanks.is-open{display:flex;animation:evFade .25s var(--ease)}
.ev-thanks__box{position:relative;display:flex;flex-direction:column;width:min(944px,100%);max-height:92vh;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.ev-thanks__body{padding:clamp(40px,5.5vw,61px) clamp(28px,5vw,68px) clamp(40px,6vw,74px)}
.ev-thanks__title{margin:0;font:700 clamp(30px,3.6vw,50px)/1.15 var(--font);letter-spacing:.07em;text-transform:uppercase;color:#000}
.ev-thanks__sub{margin:clamp(16px,2vw,24px) 0 0;font:300 clamp(17px,1.6vw,22px)/1.4 var(--font);letter-spacing:.01em;text-transform:capitalize;color:#000}
.ev-thanks__media{margin-top:auto;width:100%;height:clamp(150px,26vw,242px)}
.ev-thanks__media img{width:100%;height:100%;object-fit:cover;display:block}
.ev-thanks__close{position:absolute;top:clamp(24px,4vw,49px);right:clamp(20px,3.5vw,47px);width:30px;height:30px;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ev-thanks__close svg{width:22px;height:22px;stroke:#000;stroke-width:2;stroke-linecap:round;fill:none}

@keyframes evFade{from{opacity:0}to{opacity:1}}

/* popups: stack on small screens (no CTA-modal mobile macro → form panel goes full-width, image hidden) */
@media (max-width:760px){
  .ev-cta-modal__media{display:none}
  .ev-cta-modal__box{width:100%}
  .ev-cta-modal__panel{flex:1 1 100%;padding:clamp(40px,9vw,56px) var(--mpad,24px) 36px}
  .ev-cta-modal__title{font-size:clamp(30px,8vw,40px)}
}

/* ============================ 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:flex;left:var(--mpad);right:var(--mpad);top:auto;bottom:7%;width:auto;height:79px;padding:0 24px 0 6px}   /* mobile: FULL WIDTH (Figma 848:1033, 341×79) — play left + centred label */
  .pf-can{padding-top:125px}                                                                    /* title y1839 */
  .pf-can__title{font-size:clamp(26px,7vw,30px);letter-spacing:.07em}
  .pf-can__row{display:none}                                                                    /* mobile = image carousel, not the list */
  .pf-can__mob{display:block;margin-top:17px;overflow:hidden}                                   /* carousel y1924 (full-bleed so neighbours peek to the edges) */
  .pf-can__track{display:flex;gap:15px;transition:transform .4s var(--ease);will-change:transform}
  .pf-can__slide{flex:0 0 67.4%;aspect-ratio:290/289;border-radius:3px;overflow:hidden;cursor:pointer}   /* centre image 290; gaps 15; peeks of prev/next */
  .pf-can__slide img{width:100%;height:100%;object-fit:cover;display:block}
  .pf-can__cap{width:67.4%;margin:30px auto 0;display:flex;justify-content:space-between;align-items:baseline;gap:12px}   /* counter + current name, aligned to the centre slide */
  .pf-can__counter{flex:none;font-family:var(--font);font-weight:700;color:#000;text-transform:uppercase;line-height:1.15;white-space:nowrap}
  .pf-can__cnum{font-size:30px;letter-spacing:2.1px}
  .pf-can__ctot{font-size:20px;letter-spacing:1.4px}
  .pf-can__cname{font-family:var(--font-he);font-weight:400;font-size:20px;line-height:1.3;letter-spacing:.04em;color:#000;text-transform:uppercase;text-align:right;direction:rtl}
  .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:15%;width:92%}                                                            /* moved up + wider so the longest step desc fits inside the ring */
  .pf-how__icon{width:56px}
  .pf-how__num{font-size:22px;margin-top:6px}
  .pf-how__step{font-size:22px;margin-top:6px}
  .pf-how__stepdesc{font-size:16px;line-height:1.25;margin-top:8px}
  .pf-how__stepdesc br{display:none}                                                            /* drop the macro's forced line-breaks on mobile — let the text wrap to fit */
}

/* ============================ 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)}
/* The macro widths (857+639) only fit ≥~1900px; below that the absolute left/right blocks would collide.
   Cap them in vw so the EN title (left) and HE subtitle (right) keep a gap (≤760: subtitle is hidden — see mobile block). */
@media (min-width:761px) and (max-width:1899px){
  .wd-hero__title{max-width:42vw}
  .wd-hero__sub{max-width:31vw}
}

/* 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-cell--extra{display:none}                        /* hidden until "show more" reveals it */
.wd-cell--extra.is-shown{display:block}              /* JS adds .is-shown one ROW at a time */

/* 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 + .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}
}

/* ============================ INNER PAGE: PROJECT (SINGLE) ============================
   Figma 722:619 — dark full-bleed video hero (white logo, NO t-light) + title/subtitle →
   SERVICES DELIVERED tags (delivered = cyan pill, rest faded) → masonry gallery (shared .wd-gal)
   → MORE PROJECTS marquee + 2 cards → shared CTA/footer. Selectable template page-project.php. */
.pr{background:#fff}

/* HERO — full-bleed media, white title + subtitle lower-left */
.pr-hero{position:relative;width:100%;aspect-ratio:1920/1114;min-height:560px;overflow:hidden;background:#111;color:#fff}
.pr-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.pr-hero__shade{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply;background:linear-gradient(0deg,rgba(0,0,0,.45),rgba(0,0,0,0) 55%)}
.pr-hero__title{position:absolute;z-index:2;left:clamp(20px,11.35vw,218px);top:75.5%;margin:0;max-width:1095px;
  font-family:var(--font);font-weight:400;font-size:clamp(30px,3.125vw,60px);line-height:1.24;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 2px 20px rgba(0,0,0,.45)}
.pr-hero__sub{position:absolute;z-index:2;left:clamp(20px,11.35vw,220px);top:84.56%;margin:0;max-width:1037px;
  font-family:var(--font);font-weight:400;font-size:clamp(17px,1.5625vw,30px);line-height:1.15;letter-spacing:.07em;text-transform:uppercase;text-shadow:0 2px 16px rgba(0,0,0,.45)}

/* SERVICES DELIVERED — heading + tag row (x224 gutter) */
.pr-serv{padding:194px clamp(20px,11.66vw,224px) 0}             /* hero→heading 194 (y1308) */
.pr-serv__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}
.pr-serv__tags{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,3.65vw,70px);margin-top:48px}   /* tags y1414 */
.pr-serv__tag{position:relative;z-index:0;display:inline-flex;align-items:center;height:52px;cursor:pointer;
  font-family:var(--font);font-weight:600;font-size:16px;letter-spacing:.02em;text-transform:uppercase;color:rgba(0,0,0,.2);white-space:nowrap;
  transition:color .25s var(--ease)}
.pr-serv__tag::before{content:"";position:absolute;z-index:-1;inset:0 calc(clamp(24px,2.55vw,49px) * -1);   /* pill drawn AROUND the text, overflowing into the gap ⇒ the active state never resizes the layout box ⇒ ZERO shift */
  border:2.7px solid transparent;border-radius:21px;background:transparent;transition:border-color .25s var(--ease),background .25s var(--ease)}
.pr-serv__tag.is-on{color:#000}
.pr-serv__tag.is-on::before{border-color:var(--cta-a);background:#fff}   /* active = cyan pill (follows hover/tap, JS) */

/* GALLERY — shared .wd-gal masonry; just reposition vertically */
.pr-gal{margin-top:83px}                                        /* tags→gallery (y1549) */

/* MORE PROJECTS — marquee heading + 2 full-bleed cards */
.pr-more{margin-top:362px}                                      /* gallery→marquee (y4305) */
.pr-more__marquee{overflow:hidden;line-height:1}
.pr-more__track{display:flex;width:max-content;animation:pr-marquee 28s linear infinite;will-change:transform}   /* 8 items = 2 halves → -50% loops seamlessly, right→left */
.pr-more__w{flex:0 0 auto;margin-right:clamp(40px,4vw,80px);white-space:nowrap;font-family:var(--font);font-weight:700;
  font-size:clamp(40px,5.21vw,100px);line-height:1.15;letter-spacing:.07em;text-transform:uppercase;color:#000}
.pr-more__w.is-dim{color:rgba(0,0,0,.1)}
@keyframes pr-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pr-more__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
.pr-more__row{display:flex;margin-top:83px}                     /* marquee→cards (y4503) */
.pr-card{position:relative;flex:1 1 0;min-width:0;aspect-ratio:970/732;overflow:hidden;display:block;color:#fff}
.pr-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pr-card__shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(46,46,46,0) 40%,rgba(0,0,0,.48) 77%)}
.pr-card__name{position:absolute;z-index:2;left:clamp(20px,2.97vw,57px);bottom:10.1%;margin:0;
  font-family:var(--font);font-weight:700;font-size:22px;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.pr-card:hover .pr-card__img{transform:scale(1.05)}

@media (max-width:760px){
  /* HERO — aspect 430/717; GSF Reg title 30 + subtitle 20, lower-left (Figma 1012:1701) */
  .pr-hero{aspect-ratio:430/717;height:auto;min-height:0}
  .pr-hero__title{left:var(--mpad);top:70%;bottom:auto;font-size:clamp(26px,7vw,30px);max-width:80%;letter-spacing:.08em;line-height:1.24}   /* x45 y502 */
  .pr-hero__sub{left:var(--mpad);top:84.2%;bottom:auto;font-size:clamp(16px,4.65vw,20px);max-width:85%;letter-spacing:.07em}                /* x49 y604 */
  /* SERVICES — heading 30 (wraps 2 lines); tag row scrolls horizontally on one line (macro keeps the full row) */
  .pr-serv{padding:91px var(--mpad) 0}                                       /* hero→heading (y808) */
  .pr-serv__title{font-size:clamp(26px,7vw,30px)}
  .pr-serv__tags{flex-wrap:nowrap;overflow-x:auto;gap:clamp(40px,13vw,58px);margin-top:49px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pr-serv__tags::-webkit-scrollbar{display:none}
  .pr-serv__tag{flex:0 0 auto;font-size:16px}
  .pr-serv__tag::before{inset:0 calc(clamp(28px,12vw,49px) * -1)}   /* wider pill on mobile, still drawn around the text (no shift) */
  /* GALLERY — single-column full-width stack (override the shared portrait rule); building tile taller */
  .pr-gal{margin-top:53px;width:calc(100% - 16px);gap:10px}
  .pr-gal .wd-gal__band{display:flex;flex-direction:column;gap:10px}
  .pr-gal .wd-gal__col{display:contents}
  .pr-gal .wd-cell{flex:none;aspect-ratio:410/255}
  .pr-gal .wd-gal__col .wd-cell{aspect-ratio:410/255}
  .pr-gal .wd-cell--tall{flex:none;aspect-ratio:409/435}                     /* the building stays tall (reset desktop flex:832 → it collapsed to 0 in a column) */
  /* MORE PROJECTS — marquee 30; 2 cards SIDE BY SIDE (not stacked) */
  .pr-more{margin-top:90px}
  .pr-more__w{font-size:clamp(26px,7vw,30px);margin-right:clamp(24px,8vw,40px)}
  .pr-more__row{margin-top:40px}
  .pr-card{aspect-ratio:216/196}
  .pr-card__name{font-size:16px;left:clamp(14px,5vw,30px);bottom:10%}
}

/* ============================ PLATFORM v2 (client mockup 2026-07) — dark interactive-platform page ============================ */
.page--platform2{background:#0a0c12;color:#fff}
.pf2-eyebrow{margin:0 0 clamp(14px,1.4vw,20px);font:400 clamp(12px,.95vw,14px)/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--cta-a)}   /* same look as .expertise__title (OUR EXPERTISE) per client 2026-07-05; keeps its own bottom margin */
.pf2-eyebrow--blue{color:var(--cta-b)}   /* cyan variant kept for the DARK .pf2-demo band (the brand-blue --cta-a is unreadable on #0a0c12), same call as .aihero__eyebrow */

/* HERO */
.pf2-hero{position:relative;width:100%;aspect-ratio:1920/620;min-height:clamp(460px,50vh,560px);overflow:hidden;background:#0a0c12;color:#fff}   /* height + bottom-anchored copy matched to .phero (Projects) so page↔page transition doesn't jump — client 2026-07-07 */
.pf2-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.pf2-hero__shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(6,8,14,.92) 0%,rgba(6,8,14,.6) 34%,rgba(6,8,14,.2) 64%,rgba(6,8,14,0) 90%),linear-gradient(0deg,rgba(6,8,14,.8) 0%,rgba(6,8,14,0) 42%)}   /* left + BOTTOM darken for the now bottom-anchored copy */
.pf2-hero__inner{position:absolute;left:0;right:0;bottom:clamp(44px,7vh,90px);z-index:2}   /* = .phero__inner (bottom-anchored, .wrap inset) */
.pf2-hero__title{margin:0;font:400 clamp(40px,6vw,104px)/1.16 var(--font);letter-spacing:.07em;text-transform:uppercase;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}   /* = .phero__title (PROJECTS) per client 2026-07-07 */
.pf2-hero__sub{margin:clamp(12px,1.4vw,20px) 0 0;font:400 clamp(18px,1.8vw,30px)/1.2 var(--font);letter-spacing:.03em;color:rgba(255,255,255,.9)}   /* = .phero__sub (medium subtitle) */
.pf2-hero__lead{margin:clamp(12px,1.3vw,18px) 0 0;max-width:clamp(300px,40vw,540px);max-height:1.5em;overflow:visible;font:300 clamp(14px,1.05vw,17px)/1.5 var(--font);letter-spacing:.02em;color:rgba(255,255,255,.62)}   /* = .phero__lead; max-height:1.5em (=1 line) so the block reserves only ONE lead line → title+sub stay at the .phero height and a 2nd lead line just spills DOWN, no upward jump (client 2026-07-07) */
.pf2-demo__feats{position:absolute;z-index:3;left:auto;right:clamp(20px,4vw,60px);bottom:clamp(24px,4.5vh,48px);display:flex;flex-wrap:wrap;gap:clamp(18px,2.6vw,44px);justify-content:flex-end;max-width:min(80%,720px)}   /* 3 columns pinned BOTTOM-RIGHT of the demo image (where the chips were), not under the button — client 2026-07-07 */
.pf2-feat{max-width:210px}
.pf2-feat__dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cta-b);vertical-align:middle;margin:0 10px 2px 0}   /* blue dot LEFT of the title (inline), not above */
.pf2-feat__t{display:inline;font:700 clamp(12px,.9vw,14px)/1.2 var(--font);letter-spacing:.12em;text-transform:uppercase;color:#fff}
.pf2-feat__d{display:block;margin-top:10px;font:400 clamp(12px,.95vw,14px)/1.45 var(--font);color:rgba(255,255,255,.6)}
/* hero floor-selector panel + chips (decorative platform-UI illustration) */
.pf2-panel{position:absolute;z-index:3;top:50%;right:clamp(20px,4vw,60px);transform:translateY(-50%);width:clamp(212px,17vw,252px);background:rgba(12,14,20,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:8px}
.pf2-panel__head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 12px 10px;font:700 13px/1.25 var(--font);letter-spacing:.04em;text-transform:uppercase;color:#fff}
.pf2-panel__row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px;border-radius:8px;margin-top:2px;font:600 12px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.pf2-panel__row--sub{color:#fff;font-weight:700;background:rgba(255,255,255,.05)}
.pf2-panel__row.is-active{background:linear-gradient(90deg,var(--cta-a),var(--cta-b));color:#fff}
.pf2-panel__head svg,.pf2-panel__row svg{width:14px;height:14px;flex:none;opacity:.7}
.pf2-panel__viewall{text-align:center;padding:14px 0 8px;font:700 12px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:#fff}
.pf2-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:rgba(12,14,20,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);font:600 clamp(10px,.75vw,12px)/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:#fff;white-space:nowrap}
.pf2-chip svg{width:15px;height:15px;flex:none;opacity:.85}
.pf2-hero__chips{position:absolute;z-index:3;right:clamp(20px,4vw,60px);bottom:clamp(28px,5vh,54px);display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;max-width:56%}

/* USE IT ANYWHERE (light) */
.pf2-any{background:#f6f6f6;color:#0a0a0a;padding:clamp(56px,7vw,110px) 0}
.pf2-any__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 40px;margin-bottom:clamp(32px,4vw,54px)}
.pf2-any__title{margin:clamp(8px,1vw,12px) 0 0;font:400 clamp(28px,3.4vw,54px)/1.16 var(--font);letter-spacing:.07em;text-transform:uppercase;color:#0a0a0a}   /* same font/weight/leading/spacing as .hero__title per client 2026-07-05 (own size kept; no text-shadow — light section, dark text) */
.pf2-any__intro{max-width:440px;margin:0;font:400 clamp(14px,1.05vw,16px)/1.6 var(--font);color:rgba(10,10,10,.6)}
.pf2-any__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,1.8vw,28px)}
.pf2-card{background:#f6f6f6;border:1px solid rgba(10,10,10,.1);border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(10,10,10,.04)}
.pf2-card__media{aspect-ratio:16/10;overflow:hidden;background:#e6e6e6}
.pf2-card__media img{width:100%;height:100%;object-fit:cover}
.pf2-card__body{padding:clamp(20px,1.8vw,30px)}
.pf2-card__ic{display:inline-flex;color:var(--cta-a)}
.pf2-card__ic svg,.pf2-card__ic img{width:26px;height:26px;object-fit:contain}
.pf2-card__t{margin:clamp(12px,1.1vw,16px) 0 0;font:700 clamp(15px,1.15vw,19px)/1.25 var(--font);letter-spacing:.06em;text-transform:uppercase;color:#0a0a0a}
.pf2-card__d{margin:8px 0 0;font:400 clamp(13px,1vw,15px)/1.5 var(--font);color:rgba(10,10,10,.6)}

/* EXPLORE DEMO (dark band) */
.pf2-demo{position:relative;overflow:hidden;background:#0a0c12;color:#fff;min-height:clamp(440px,54vh,600px);display:flex;align-items:center}
.pf2-demo__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.pf2-demo__shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(6,8,14,.9) 0%,rgba(6,8,14,.5) 42%,rgba(6,8,14,.2) 72%,rgba(6,8,14,.55) 100%),linear-gradient(0deg,rgba(6,8,14,.65) 0%,rgba(6,8,14,0) 30%)}
.pf2-demo__inner{position:relative;z-index:2;width:100%;padding-block:clamp(70px,10vh,120px)}
.pf2-demo__pano{position:absolute;z-index:3;top:clamp(22px,4vh,42px);left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:rgba(12,14,20,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);font:600 clamp(10px,.75vw,12px)/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:#fff;white-space:nowrap}
.pf2-demo__pano svg{width:15px;height:15px;flex:none;opacity:.85}
.pf2-demo__title{margin:0;font:400 clamp(30px,4vw,60px)/1.16 var(--font);letter-spacing:.07em;text-transform:uppercase;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}   /* same font/weight/leading/spacing/shadow as .hero__title per client 2026-07-05 (own size kept; DARK section → white + shadow) */
.pf2-demo__sub{margin:clamp(14px,1.6vw,22px) 0 0;max-width:440px;font:400 clamp(14px,1.1vw,18px)/1.5 var(--font);color:rgba(255,255,255,.72)}
.pf2-demo__btn{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(24px,3vw,40px);padding:15px 32px;border:0;border-radius:999px;cursor:pointer;background:linear-gradient(90deg,var(--cta-b),var(--cta-a));color:#fff;font:700 clamp(12px,.95vw,14px)/1 var(--font);letter-spacing:.14em;text-transform:uppercase;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.pf2-demo__btn svg{width:18px;height:18px}
.pf2-demo__btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(15,129,178,.4)}
.pf2-units{position:absolute;z-index:3;top:50%;right:clamp(20px,4vw,60px);transform:translateY(-50%);width:clamp(180px,15vw,220px);background:rgba(12,14,20,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:8px}
.pf2-demo__chips{position:absolute;z-index:3;right:clamp(20px,4vw,60px);bottom:clamp(22px,4vh,42px);display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;max-width:min(74%,860px)}

/* EVERYTHING BUYERS WANT (light) */
.pf2-buyers{background:#f6f6f6;color:#0a0a0a;padding:clamp(56px,7vw,110px) 0}
.pf2-buyers__head{margin-bottom:clamp(28px,3.4vw,50px)}
.pf2-buyers__title{margin:clamp(8px,1vw,12px) 0 0;font:400 clamp(28px,3.4vw,54px)/1.16 var(--font);letter-spacing:.07em;text-transform:uppercase;color:#0a0a0a}   /* same font/weight/leading/spacing as .hero__title per client 2026-07-05 (own size kept; light section, dark text, no shadow) */
.pf2-buyers__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.1vw,18px)}
.pf2-fcard{min-width:0}
.pf2-fcard__media{aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:#e6e6e6}
.pf2-fcard__media img{width:100%;height:100%;object-fit:cover}
.pf2-fcard__t{margin:clamp(12px,1vw,16px) 0 0;font:400 clamp(13px,.95vw,16px)/1.16 var(--font);letter-spacing:.07em;text-transform:uppercase;color:#0a0a0a}   /* same font/cut as .procstep__label (=.hero__title weight/spacing/leading) per client 2026-07-05; own size + margin kept */
.pf2-fcard__d{margin:7px 0 0;font:400 clamp(12px,.85vw,13.5px)/1.45 var(--font);color:rgba(10,10,10,.58)}

/* BUILT FOR DEVELOPERS (dark band) */
.pf2-dev{position:relative;overflow:hidden;background:#0a0c12;color:#fff;min-height:clamp(300px,34vh,420px);display:flex;align-items:center;text-align:center}
.pf2-dev__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.pf2-dev__shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(6,8,14,.72) 0%,rgba(6,8,14,.4) 30%,rgba(6,8,14,.4) 70%,rgba(6,8,14,.72) 100%),linear-gradient(0deg,rgba(6,8,14,.55),rgba(6,8,14,.3))}
.pf2-dev__inner{position:relative;z-index:2;width:100%;padding-block:clamp(48px,7vh,84px)}
.pf2-dev__title{margin:0 0 clamp(30px,4vw,56px);font:400 clamp(26px,3.4vw,52px)/1.16 var(--font);letter-spacing:.07em;text-transform:uppercase;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}   /* same font/weight/leading/spacing as .hero__title per client 2026-07-05 (own size kept; text-shadow kept — DARK section, white text) */
.pf2-dev__points{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(28px,4vw,72px)}
.pf2-point{max-width:280px;text-align:center}
.pf2-point__ic{display:inline-flex;color:var(--cta-b);margin-bottom:14px}
.pf2-point__ic svg,.pf2-point__ic img{width:34px;height:34px;object-fit:contain}
.pf2-point__t{margin:0;font:700 clamp(14px,1.05vw,17px)/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase;color:#fff}
.pf2-point__d{margin:8px 0 0;font:400 clamp(13px,.95vw,15px)/1.5 var(--font);color:rgba(255,255,255,.62)}

/* PLATFORM v2 responsive */
@media(max-width:1100px){
  .pf2-panel,.pf2-hero__chips,.pf2-units,.pf2-demo__chips{display:none}   /* decorative UI overlays off on smaller screens */
  .pf2-any__grid{grid-template-columns:1fr 1fr}
  .pf2-buyers__grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .pf2-hero{aspect-ratio:430/560;min-height:0;max-height:88vh}   /* = .phero mobile per client 2026-07-07 */
  .pf2-hero__title{font-size:clamp(38px,13vw,64px)}
  .pf2-hero__lead{max-width:none;max-height:none}   /* mobile: let the lead flow normally (single-page scroll, no cross-page jump concern) */
  .pf2-demo{display:block}   /* mobile: stack the (now static) columns below the demo text instead of squishing them beside it */
  .pf2-demo__feats{position:static;right:auto;bottom:auto;width:100%;max-width:none;justify-content:flex-start;gap:22px;padding-inline:clamp(20px,4vw,40px);margin:0 0 clamp(30px,8vw,48px)}   /* mobile: columns flow full-width below the demo text */
  .pf2-any__grid{grid-template-columns:1fr}
  .pf2-buyers__grid{grid-template-columns:repeat(2,1fr)}
  .pf2-dev__points{gap:26px}
}

/* ============================ EXPERTISE v2 (client mockup 2026-07) — light: short hero + intro + alternating FULL-BLEED service bands ============================ */
/* --x-gut = distance from the SCREEN edge to the .wrap content edge (max-width 1564 + padding). Text aligns to it; media bleeds to the screen edge. */
.page--expertise2{background:#f6f6f6;color:#0a0a0a;--x-gut:max(clamp(20px,4vw,40px), calc(50vw - 782px + clamp(20px,4vw,40px)));--x-inner:clamp(28px,4vw,72px)}

/* HERO (short dark band) */
.xp-hero{position:relative;width:100%;aspect-ratio:1920/620;min-height:clamp(460px,50vh,560px);overflow:hidden;background:#0a0a0a;color:#fff}   /* height + bottom-anchored copy matched to .phero (Projects) so page-to-page transition doesn't jump — client 2026-07-06 */
.xp-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.xp-hero__shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.42) 34%,rgba(0,0,0,.08) 64%,rgba(0,0,0,0) 88%),linear-gradient(180deg,rgba(0,0,0,.36) 0%,rgba(0,0,0,0) 22%)}
/* RTL (Hebrew): every page-hero darken-gradient is anchored LEFT (under the LTR copy) → mirror it to the RIGHT where the RTL copy sits. scaleX(-1) flips the horizontal gradient and leaves the top/bottom darken intact; works at every breakpoint incl. the mobile overrides — client 2026-07-09 */
[dir="rtl"] .hero__shade,[dir="rtl"] .aihero__overlay,[dir="rtl"] .phero__shade,[dir="rtl"] .srv-hero__shade,[dir="rtl"] .chero__shade,[dir="rtl"] .pf2-hero__shade,[dir="rtl"] .xp-hero__shade{transform:scaleX(-1)}
.xp-hero__inner{position:absolute;left:0;right:0;bottom:clamp(44px,7vh,90px);z-index:2}   /* = .phero__inner (bottom-anchored, .wrap inset) */
.xp-hero__title{margin:0;font:400 clamp(40px,6vw,104px)/1.16 var(--font);letter-spacing:.07em;text-transform:uppercase;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}   /* = .phero__title (PROJECTS) */
.xp-hero__sub{margin:clamp(12px,1.4vw,20px) 0 0;font:400 clamp(18px,1.8vw,30px)/1.2 var(--font);letter-spacing:.03em;color:rgba(255,255,255,.9)}   /* = .phero__sub (medium subtitle) */
.xp-hero__lead{margin:clamp(12px,1.3vw,18px) 0 0;max-width:clamp(300px,40vw,540px);font:300 clamp(14px,1.05vw,17px)/1.5 var(--font);letter-spacing:.02em;color:rgba(255,255,255,.62)}   /* = .phero__lead (small text) */

/* INTRO */
.xp-intro{background:#f6f6f6;padding:clamp(48px,6vw,96px) 0}
.xp-intro__grid{display:grid;grid-template-columns:1.1fr 1.1fr minmax(0,auto);gap:clamp(24px,4vw,80px);align-items:start}
.xp-intro__title{margin:0;font:400 clamp(24px,2.6vw,44px)/1.16 var(--font);letter-spacing:.07em;text-transform:uppercase;color:#0a0a0a}   /* same font/weight/leading/spacing as .xp-hero__title (=.hero__title) per client 2026-07-05; own size + dark colour kept (light section, no shadow) */
.xp-intro__lead{margin:0;font:600 clamp(14px,1.05vw,16px)/1.5 var(--font);color:#0a0a0a}
.xp-intro__p{margin:clamp(14px,1.4vw,20px) 0 0;font:400 clamp(13px,1vw,15px)/1.6 var(--font);color:rgba(10,10,10,.6)}
.xp-intro__art{max-width:clamp(180px,20vw,320px);justify-self:end}
.xp-intro__art img{width:100%;height:auto;opacity:.5}

/* SERVICE BANDS — text inside the container, media bleeds to the SCREEN edge; sides alternate */
.xp-bands{display:flex;flex-direction:column}
.xp-band{display:grid;grid-template-columns:38% 62%;align-items:stretch;background:#f6f6f6}
.xp-band--flip{grid-template-columns:62% 38%}
.xp-band__text{order:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(36px,4vw,72px) var(--x-inner) clamp(36px,4vw,72px) var(--x-gut)}   /* text-left: outer(left) pad = container gutter */
.xp-band__media{order:2;position:relative;overflow:hidden;min-height:clamp(260px,26vw,420px)}   /* media bleeds to the RIGHT screen edge */
.xp-band__m{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* big, VERY faint band number on the media (bottom-right) — helps pair each photo with its item without drawing the eye (client 2026-07-08, on desktop too per Oksana) */
.xp-band__big{position:absolute;right:clamp(8px,1.5vw,26px);bottom:clamp(-6px,0vw,6px);z-index:2;margin:0;pointer-events:none;
  font:400 clamp(66px,9vw,150px)/.9 var(--font);letter-spacing:.01em;color:#fff;opacity:.13;text-shadow:0 2px 24px rgba(0,0,0,.16)}
.xp-band--flip .xp-band__media{order:1}                                                        /* flip: media LEFT (bleeds left) */
.xp-band--flip .xp-band__text{order:2;padding:clamp(36px,4vw,72px) var(--x-gut) clamp(36px,4vw,72px) var(--x-inner)}   /* text-right: outer(right) pad = gutter */
.xp-band__num{font:400 clamp(12px,.95vw,14px)/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--cta-a)}   /* same look as .expertise__title (OUR EXPERTISE) per client 2026-07-05 */
.xp-band__title{margin:clamp(10px,1vw,16px) 0 0;font:400 clamp(22px,2.2vw,36px)/1.16 var(--font);letter-spacing:.07em;text-transform:uppercase;color:#0a0a0a}   /* same font/weight/leading/spacing as .hero__title per client 2026-07-05 (own size kept; no text-shadow — light section, dark text) */
.xp-band__desc{margin:clamp(12px,1.2vw,18px) 0 0;max-width:36ch;font:400 clamp(13px,1vw,15px)/1.55 var(--font);color:rgba(10,10,10,.6)}
.xp-band__more{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(16px,1.8vw,26px);font:400 clamp(12px,.95vw,14px)/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--cta-a);text-decoration:none}   /* text same look as .expertise__title (OUR EXPERTISE) per client 2026-07-05; keeps flex + margin + arrow */
.xp-band__more svg{width:17px;height:17px;transition:transform .2s var(--ease)}
.xp-band__more:hover svg{transform:translateX(5px)}
[dir="rtl"] .xp-band__more svg{transform:scaleX(-1)}                       /* RTL: «מידע נוסף» arrow points LEFT (client 2026-07-09) */
[dir="rtl"] .xp-band__more:hover svg{transform:scaleX(-1) translateX(5px)}

/* mobile: stack (media full-width top, text below) */
@media (max-width:820px){
  .xp-intro__grid{grid-template-columns:1fr;gap:22px}
  .xp-intro__art{display:none}
  .xp-band,.xp-band--flip{grid-template-columns:1fr;margin-bottom:clamp(22px,6.5vw,38px)}   /* client: a touch more gap between one item's text and the NEXT item's photo */
  .xp-band__media,.xp-band--flip .xp-band__media{order:1;min-height:clamp(220px,58vw,320px)}
  .xp-band__text,.xp-band--flip .xp-band__text{order:2;padding:clamp(28px,7vw,44px) var(--mpad,clamp(20px,10vw,46px))}
  .xp-band__big{font-size:clamp(76px,26vw,130px)}   /* scale the faint number for the taller full-width mobile media */
}

/* ============================ SERVICE PAGE — Interior Visualizations (mockup new/001.jpeg) ============================ */
.page--service{background:#f6f6f6;color:#0a0a0a}

/* HERO — short dark band */
.srv-hero{position:relative;width:100%;aspect-ratio:1920/620;min-height:clamp(460px,50vh,560px);overflow:hidden;background:#0a0a0a;color:#fff}   /* style matched to .phero (projects hero) per client 2026-07-05: same height, bottom-anchored copy (no flex-centering) */
.srv-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.srv-hero__shade{position:absolute;inset:0;z-index:1;pointer-events:none;   /* = .phero__shade (left + top + bottom) */
  background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.5) 34%,rgba(0,0,0,.12) 62%,rgba(0,0,0,0) 84%),
            linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 22%),
            linear-gradient(0deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 32%)}
.srv-hero__inner{position:absolute;left:0;right:0;bottom:clamp(44px,7vh,90px);z-index:2}   /* = .phero__inner: bottom-anchored, .wrap = shared inset */
.srv-hero__title{margin:0;max-width:50%;font:400 clamp(34px,4.6vw,80px)/1.16 var(--font);letter-spacing:.07em;text-transform:uppercase;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}   /* = .phero__title cut (thin 400 / .07em / 1.16 / shadow); OWN size kept — service names are longer than "PROJECTS" so phero's 104px would overflow. max-width:50% of .wrap so long titles wrap in the left half (client 2026-07-05) */
.srv-hero__sub{margin:clamp(14px,1.6vw,22px) 0 0;font:200 clamp(18px,1.85vw,30px)/1.5 var(--font);letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.9)}   /* UPPERCASE + weight 200 (thinnest of the variable font, like the Contacts phone) + air between the 3 tagline lines — client 2026-07-07; shared by ALL service pages */

/* STEPS — 4 numbered labels with dividers */
.srv-steps{background:#f6f6f6;padding:clamp(34px,4vw,60px) 0 clamp(6px,1vw,14px)}
.srv-steps__row{display:grid;grid-template-columns:repeat(4,1fr)}
.srv-step{position:relative;text-align:center;padding:clamp(6px,1vw,14px) 10px}
.srv-step:not(:last-child)::after{content:"";position:absolute;top:22%;bottom:22%;right:0;width:1px;background:rgba(10,10,10,.14)}
.srv-step__n{display:block;font:600 clamp(11px,.8vw,13px)/1 var(--font);letter-spacing:.1em;color:rgba(10,10,10,.4)}
.srv-step__l{display:block;margin-top:clamp(8px,1vw,14px);font:400 clamp(15px,1.4vw,24px)/1.35 var(--font);letter-spacing:.02em;text-transform:uppercase;color:#0a0a0a}   /* same font as .srv-hero__sub per client 2026-07-05 (size/leading/spacing); own dark colour + margin kept */

/* GALLERY — mockup masonry: [tall] [big + 2 small] [tall] then 2 wide */
.srv-gal{margin-top:clamp(24px,3vw,44px);display:flex;flex-direction:column;gap:clamp(8px,.85vw,14px)}
.srv-gal__row1{display:grid;grid-template-columns:1.05fr 1.9fr 1fr;gap:clamp(8px,.85vw,14px);align-items:stretch}
.srv-gal__row1 .srv-tile--tall{aspect-ratio:.64}                                      /* drives the row height */
.srv-gal__center{display:grid;grid-template-rows:1.2fr 1fr;gap:clamp(8px,.85vw,14px);min-width:0}   /* big on top, pair below; stretches to row height */
.srv-gal__pair{display:grid;grid-template-columns:1.28fr 1fr;gap:clamp(8px,.85vw,14px);min-height:0}
.srv-gal__row2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,.85vw,14px)}
.srv-gal__row2 .srv-tile--wide{aspect-ratio:16/7}
.srv-tile{position:relative;overflow:hidden;border-radius:4px;background:#e6e6e6;min-height:0}
.srv-tile img,.srv-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.srv-tile:hover img,.srv-tile:hover video{transform:scale(1.045)}
.srv-tile--extra{display:none}
.srv-tile--extra.is-shown{display:grid}

/* SHOW MORE */
.srv-more-wrap{display:flex;justify-content:center;margin:clamp(26px,3vw,46px) auto 0}
.srv-more{display:inline-flex;align-items:center;gap:10px;padding:13px 30px;border:1px solid rgba(10,10,10,.2);border-radius:999px;background:none;cursor:pointer;font:600 clamp(11px,.85vw,13px)/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:#0a0a0a;transition:border-color .2s var(--ease),color .2s var(--ease)}
.srv-more:hover{border-color:var(--cta-a);color:var(--cta-a)}
.srv-more svg{width:16px;height:16px}

@media (max-width:820px){
  .srv-steps__row{grid-template-columns:1fr 1fr;gap:10px 0}
  .srv-step:nth-child(2n)::after{display:none}
  .srv-gal__row1{grid-template-columns:1fr;gap:clamp(8px,2.4vw,14px)}
  .srv-gal__row1 .srv-tile--tall{aspect-ratio:4/5}
  .srv-gal__center{grid-template-rows:none}
  .srv-gal__center .srv-tile--big{aspect-ratio:16/10}
  .srv-gal__pair .srv-tile{aspect-ratio:1/1}
  .srv-gal__row2{grid-template-columns:1fr}
  .srv-gal__row2 .srv-tile--wide{aspect-ratio:16/10}
}
@media (max-width:820px){ .srv-gal__pair{grid-template-columns:1fr 1fr} }   /* equal bath/dining on mobile */

/* ============================ SERVICE PAGE — Exterior Visualizations (mockup new/002.jpeg) ============================ */
/* 3-column masonry: [tower | 3-stack | tower] with a bottom row. aspect-ratio on the grid → exact mockup proportions. */
.xgal__grid{display:grid;grid-template-columns:1fr 1.7fr 1.1fr;gap:clamp(8px,.85vw,14px);aspect-ratio:850/481;align-items:stretch}
.xgal__col{display:grid;gap:clamp(8px,.85vw,14px);min-height:0}
.xgal__col--side{grid-template-rows:2.32fr 1fr}         /* tower 330 : bottom 142 */
.xgal__col--mid{grid-template-rows:1.16fr 1fr 1.13fr}   /* villa+pool 163 : midrise 140 : two-towers 158 */
.xgal .srv-tile{min-height:0}
/* step numbers now use the DEFAULT grey on Exterior too (client 2026-07-07 — blue override removed so it matches the other service pages) */

@media (max-width:820px){
  .xgal__grid{grid-template-columns:1fr;aspect-ratio:auto;gap:clamp(8px,2.4vw,14px)}
  .xgal__col{gap:clamp(8px,2.4vw,14px)}
  .xgal__col--side,.xgal__col--mid{grid-template-rows:none}
  .xgal .srv-tile{aspect-ratio:16/10}
  .xgal .xtile--tall{aspect-ratio:3/4}
}

/* ============================ SERVICE PAGE — Films (mockup new/003.jpeg): uniform video-card grid ============================ */
.film-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,34px) clamp(14px,1.6vw,26px)}
.film-card{display:flex;flex-direction:column;margin:0}
.film-card[data-video],.film-card--inline{cursor:pointer}
.film-card__media{position:relative;aspect-ratio:17/10;overflow:hidden;border-radius:8px;background:#e6e6e6}
.film-card__prev{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.film-card[data-video]:hover .film-card__prev,.film-card--inline:not(.is-playing):hover .film-card__prev{transform:scale(1.045)}
.film-card__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.3));opacity:.75;transition:opacity .3s var(--ease)}
.film-card[data-video]:hover .film-card__shade,.film-card--inline:not(.is-playing):hover .film-card__shade{opacity:1}
.film-card__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(52px,4.4vw,72px);height:clamp(52px,4.4vw,72px);border-radius:50%;border:2px solid rgba(255,255,255,.92);display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.12);cursor:pointer;padding:0;transition:transform .3s var(--ease),background .3s var(--ease),opacity .25s}
.film-card[data-video]:hover .film-card__play,.film-card--inline:not(.is-playing):hover .film-card__play{transform:translate(-50%,-50%) scale(1.08);background:rgba(0,0,0,.3)}
.film-card__play svg{width:36%;height:36%;margin-left:8%}
.film-card__dur{position:absolute;right:12px;bottom:11px;font:600 12px/1 var(--font);letter-spacing:.04em;color:#fff;background:rgba(0,0,0,.5);padding:4px 8px;border-radius:5px;transition:opacity .25s}
.film-card__title{margin:16px 0 0;font:600 clamp(16px,1.25vw,20px)/1.25 var(--font);letter-spacing:.01em;color:#0a0a0a}
.film-card__sub{margin:5px 0 0;font:400 clamp(13px,1vw,15px)/1.35 var(--font);color:rgba(10,10,10,.55)}
.film-card.srv-tile--extra{display:none}
.film-card.srv-tile--extra.is-shown{display:flex}

/* ===== FILM INLINE PLAYER (MP4) — plays in the card with sound; subtle corner controls; enlarge/shrink ===== */
.film-card__player{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;transition:opacity .25s}
.film-card.is-playing .film-card__player{opacity:1;pointer-events:auto}
.film-card.is-playing .film-card__prev,.film-card.is-playing .film-card__play,.film-card.is-playing .film-card__shade{opacity:0;pointer-events:none}
.film-card.is-playing .film-card__dur{opacity:0}
/* paused → bring the play button + shade back ABOVE the video layer (z>player) so the visitor sees it stopped (both film + reel) */
.film-card.is-playing.is-paused .film-card__play,.reel-card.is-playing.is-paused .reel-card__play{opacity:1;pointer-events:auto;z-index:3}
.film-card.is-playing.is-paused .film-card__shade,.reel-card.is-playing.is-paused .reel-card__shade{opacity:1;pointer-events:none;z-index:3}
.film-card__full{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;display:block}
.film-card__ctrls{position:absolute;right:10px;bottom:10px;z-index:4;display:flex;align-items:center;gap:8px}
.film-card__ctrl{width:30px;height:30px;flex:none;display:grid;place-items:center;padding:0;border:0;border-radius:50%;cursor:pointer;color:#fff;background:rgba(0,0,0,.34);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s}
.film-card__ctrl:hover{background:rgba(0,0,0,.58)}
.film-card__ctrl svg{width:15px;height:15px;display:block}   /* block → kills the inline baseline gap that pushed icons up off-centre */
.film-card__ic{display:none;line-height:0}
.film-card__ic--on,.film-card__ic--exp{display:block}
.film-card.is-muted .film-card__ic--on{display:none}
.film-card.is-muted .film-card__ic--off{display:block}
.film-card.is-big .film-card__ic--exp{display:none}
.film-card.is-big .film-card__ic--shr{display:block}
.film-card__vol{width:0;opacity:0;height:3px;padding:0;margin:0;accent-color:#fff;cursor:pointer;-webkit-appearance:none;appearance:none;background:rgba(255,255,255,.5);border-radius:3px;transition:width .25s var(--ease),opacity .2s}
.film-card__ctrls:hover .film-card__vol{width:62px;opacity:1}
.film-card__vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:11px;height:11px;border-radius:50%;background:#fff;cursor:pointer}
.film-card__vol::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:#fff;cursor:pointer}
/* enlarged: the player becomes a big centred overlay (video keeps playing) */
.film-card.is-big .film-card__player{position:fixed;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:min(92vw,1440px);height:auto;aspect-ratio:16/9;max-height:90vh;z-index:1002;border-radius:10px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.film-card.is-big .film-card__full{object-fit:contain}
.film-card.is-big .film-card__ctrls{right:14px;bottom:14px}
.film-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:1001;opacity:0;pointer-events:none;transition:opacity .3s}
.film-backdrop.is-on{opacity:1;pointer-events:auto}

@media (max-width:900px){ .film-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .film-grid{grid-template-columns:1fr} }
@media (max-width:760px){
  .film-card__ctrls{display:none}   /* mobile → native <video controls> instead of the subtle desktop icons */
  .film-card.is-big .film-card__player{position:absolute;top:0;left:0;transform:none;width:100%;height:100%;aspect-ratio:auto;max-height:none;border-radius:8px;box-shadow:none}
}

/* ============================ SERVICE PAGE — 3D Tours (mockup new/004.jpeg): wide clickable strips ============================ */
.tour-wrap{gap:clamp(14px,1.5vw,22px)}
.tour-strip{position:relative;margin:0;aspect-ratio:5/2;overflow:hidden;border-radius:8px;background:#20242a}   /* 2.5:1 — cinematic, taller than the mockup strips */
.tour-strip[data-video]{cursor:pointer}
.tour-strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.tour-strip[data-video]:hover img{transform:scale(1.03)}
.tour-strip__shade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(62% 135% at 50% 50%,rgba(0,0,0,.52),rgba(0,0,0,.18) 55%,rgba(0,0,0,.36));transition:opacity .3s var(--ease)}
.tour-strip[data-video]:hover .tour-strip__shade{opacity:.85}
.tour-strip__cta{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:9px;color:#fff;text-align:center;pointer-events:none;text-shadow:0 1px 12px rgba(0,0,0,.55)}
.tour-strip__ico{width:clamp(40px,3.6vw,54px);height:clamp(40px,3.6vw,54px);display:block;transition:transform .3s var(--ease)}
.tour-strip__ico svg{width:100%;height:100%;display:block}
.tour-strip[data-video]:hover .tour-strip__ico{transform:translateY(-3px)}
.tour-strip__label{font:400 clamp(17px,1.75vw,26px)/1 var(--font);letter-spacing:.01em}   /* «Click to Start» per client screenshot 2026-07-07 — normal sentence-case, medium size (was tiny uppercase «Variant 3») */
.tour-strip.srv-tile--extra{display:none}
.tour-strip.srv-tile--extra.is-shown{display:block}

@media (max-width:820px){ .tour-strip{aspect-ratio:16/9} }

/* ===== 360° PANORAMA VIEWER — reusable .ev-pano, powered by Pannellum (3D Tours strips + homepage «3D Tour» slide) ===== */
.ev-pano{position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}
.ev-pano__stage{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .5s var(--ease);background:#0b0d11;border-radius:inherit}
.ev-pano.is-live .ev-pano__stage{opacity:1}                         /* Pannellum mounts on click; its own progress bar shows while the panorama loads */
.ev-pano--nofx .ev-pano__stage{display:none}                        /* viewer failed → keep the fallback <img> */
.ev-pano__stage .pnlm-container{background:#0b0d11;border-radius:inherit;font-family:var(--font)}
.ev-pano__stage .pnlm-load-box{background:rgba(11,13,17,.55)}
.ev-pano__stage .pnlm-lbar{border-color:rgba(255,255,255,.65)}
.ev-pano__stage .pnlm-lbar-fill{background:#7ee1ff}
/* drag + zoom hint — fades in once the pano is ready, then auto-fades away */
.ev-pano__hint{position:absolute;left:50%;bottom:clamp(12px,1.4vw,18px);transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:9px;padding:7px 15px 7px 12px;border-radius:100px;background:rgba(12,14,18,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;pointer-events:none;opacity:0;box-shadow:0 2px 16px rgba(0,0,0,.34)}
.ev-pano.is-live.is-ready .ev-pano__hint{animation:evPanoHint 5.5s var(--ease) forwards}
.ev-pano__hint svg{width:19px;height:19px;display:block}
.ev-pano__hint b{font:300 clamp(10px,.82vw,12px)/1 var(--font);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
@keyframes evPanoHint{0%{opacity:0}10%{opacity:.94}78%{opacity:.94}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .ev-pano.is-live.is-ready .ev-pano__hint{animation:none;opacity:0} }

/* 3D Tours: the whole strip is the panorama host */
.tour-strip.ev-pano{cursor:pointer;background:#0b0d11}               /* before activation: shows the «Click to Start» overlay; Pannellum sets grab/grabbing after */
.tour-strip.ev-pano .ev-pano__stage{border-radius:8px}
/* the Click-to-Start overlay stays until the visitor clicks (activates the pano), then fades out */
.tour-strip.ev-pano.is-live .tour-strip__cta,
.tour-strip.ev-pano.is-live .tour-strip__shade{opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
/* ⭐ LIVE-preview pano (client 2026-07-08): it auto-shows & gently rotates on its own → the «Click to Start» overlay is HOVER-ONLY while the poster loads (a click still reveals instantly). Once live, the is-live rule above hides it → visitor just drags. */
.tour-strip--live .tour-strip__cta{opacity:0;transition:opacity .35s var(--ease)}
.tour-strip--live:hover .tour-strip__cta{opacity:1}

/* ===== VIRTUAL TOUR — multi-scene walk-through viewer (client 2026-07-08) ===== */
.vtour{padding:clamp(30px,4vw,60px) 0 clamp(20px,2.4vw,36px)}
.vtour__head{margin-bottom:clamp(14px,1.6vw,22px)}
.vtour__title{margin:0;font:400 clamp(24px,3vw,44px)/1.08 var(--font);letter-spacing:.01em;color:#0a0a0a}
.vtour__box{position:relative}
.vtour__box + .vtour__box{margin-top:clamp(14px,1.5vw,22px)}   /* gap between stacked tours = same as the old .tour-wrap strips */
.ev-vtour{position:relative;width:100%;aspect-ratio:16/6.75;min-height:clamp(240px,39vh,480px);border-radius:12px;overflow:hidden;background:#0b0d11}   /* ~25% shorter than 16/9 (client 2026-07-08) */
@media (max-width:820px){ .ev-vtour{aspect-ratio:16/7;min-height:0} }   /* mobile: elongated like the Branding strips (was 4/3 — too square) — client 2026-07-09 */
.ev-vtour .ev-pano__stage{border-radius:12px}
/* Pannellum zoom +/- + fullscreen → LEFT-BOTTOM corner (client 2026-07-08); scoped so it beats the vendor .pnlm-controls-container{top:0} */
.ev-pano .pnlm-controls-container,.evvt-modal .pnlm-controls-container{top:auto;bottom:12px;left:12px}
/* room-nav bar under the viewer */
.vtour__nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:clamp(12px,1.4vw,18px)}
.vtour__navbtn{font:500 clamp(12px,1vw,14px)/1 var(--font);letter-spacing:.02em;color:#0a0a0a;background:#fff;border:1px solid #d8dadd;border-radius:100px;padding:9px 18px;cursor:pointer;transition:all .2s var(--ease)}
.vtour__navbtn:hover{border-color:var(--cta-a);color:var(--cta-a)}
.vtour__navbtn.is-on{background:linear-gradient(90deg,var(--cta-b),var(--cta-a));border-color:transparent;color:#fff}
/* transition hotspot marker (Pannellum «scene» hotspot) — white disc + up-arrow + label chip, like the reference */
.pnlm-hotspot-base.ev-vt-hs{width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(255,255,255,.92) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'><path d='M12 19V6M6 12l6-6 6 6'/></svg>") center/20px no-repeat;box-shadow:0 4px 18px rgba(0,0,0,.45);cursor:pointer;transition:transform .2s var(--ease),background-color .2s;animation:evVtPulse 2.4s var(--ease) infinite}
.pnlm-hotspot-base.ev-vt-hs:hover{transform:scale(1.12);background-color:#fff;animation:none}
@keyframes evVtPulse{0%,100%{box-shadow:0 4px 18px rgba(0,0,0,.45),0 0 0 0 rgba(126,225,255,.55)}50%{box-shadow:0 4px 18px rgba(0,0,0,.45),0 0 0 12px rgba(126,225,255,0)}}
.pnlm-hotspot-base.ev-vt-hs span{visibility:hidden;font:600 12px/1 var(--font);letter-spacing:.03em;color:#fff;background:rgba(12,14,18,.82);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:6px 11px;border-radius:100px;white-space:nowrap;box-shadow:0 2px 12px rgba(0,0,0,.4)}
.pnlm-hotspot-base.ev-vt-hs:hover span{visibility:visible}
@media (prefers-reduced-motion:reduce){ .pnlm-hotspot-base.ev-vt-hs{animation:none} }

/* Homepage OUR EXPERTISE «3D Tour» slide viewer layer (mounted by JS) */
.expslide__pano{position:absolute;inset:0;z-index:3;display:none;border-radius:8px;overflow:hidden}
.mexp__pano{position:absolute;inset:0;z-index:2;border-radius:8px;overflow:hidden}   /* mobile OUR EXPERTISE 360° viewer fills the pano slide (JS-mounted; placed AFTER .ev-pano so it wins the position) */

/* ============================ SERVICE PAGE — 3D Floor Plans (mockup new/005.jpeg): 2/3/2 masonry ============================ */
.floor-gal{gap:clamp(8px,.85vw,14px)}
.floor-row{display:grid;gap:clamp(8px,.85vw,14px);align-items:stretch}
.floor-row--a{grid-template-columns:0.82fr 1fr;aspect-ratio:809/133}       /* kitchen | living+dining */
.floor-row--b{grid-template-columns:1.12fr 1fr 1.06fr;aspect-ratio:809/176} /* living | bath | dining */
.floor-row--c{grid-template-columns:1.22fr 1fr;aspect-ratio:809/149}        /* living+fire | kitchen */
.floor-row--x{grid-template-columns:1fr 1fr;aspect-ratio:809/149}
.floor-tile{position:relative;overflow:hidden;border-radius:6px;background:#e6e6e6;min-height:0}
.floor-tile img,.floor-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.floor-tile:hover img,.floor-tile:hover video{transform:scale(1.045)}
.floor-row--x.srv-tile--extra{display:none}
.floor-row--x.srv-tile--extra.is-shown{display:grid}

@media (max-width:820px){
  .floor-row--a,.floor-row--b,.floor-row--c,.floor-row--x{grid-template-columns:1fr 1fr;aspect-ratio:auto}
  .floor-tile{aspect-ratio:3/2}
}
@media (max-width:520px){
  .floor-row--a,.floor-row--b,.floor-row--c,.floor-row--x{grid-template-columns:1fr}
}

/* ============================ SERVICE PAGE — Physical Models (mockup new/006.jpeg): 3-col grid, 3rd tile TALL ============================ */
.pm-grid{display:grid;grid-template-columns:1.03fr 1.29fr 1fr;grid-template-rows:190fr 181fr 171fr;gap:clamp(8px,.85vw,14px);aspect-ratio:952/560}
.pm-tile{position:relative;overflow:hidden;border-radius:6px;background:#101216;min-height:0;margin:0}
.pm-tile img,.pm-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.pm-tile:hover img,.pm-tile:hover video{transform:scale(1.045)}
.pm-tile--tall{grid-column:3;grid-row:1 / span 2}     /* merged top-right → one vertical tile */

@media (max-width:820px){
  .pm-grid{grid-template-columns:1fr 1fr;grid-template-rows:none;aspect-ratio:auto}
  .pm-tile{aspect-ratio:3/2}
  .pm-tile--tall{grid-column:auto;grid-row:auto;aspect-ratio:3/4}
}
@media (max-width:520px){ .pm-grid{grid-template-columns:1fr} .pm-tile--tall{aspect-ratio:3/2} }

/* ============================ SERVICE PAGE — Branding & Landing Pages (mockup new/007.jpeg): long narrow strips ============================ */
.br-wrap{gap:clamp(12px,1.3vw,20px)}
.br-strip{position:relative;display:block;margin:0;aspect-ratio:904/186;overflow:hidden;border-radius:8px;background:#15171b;text-decoration:none}   /* long/narrow, per client */
.br-strip picture{display:contents}
.br-strip img,.br-strip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
a.br-strip{cursor:pointer}
a.br-strip:hover img,a.br-strip:hover video{transform:scale(1.02)}
.br-strip.srv-tile--extra{display:none}
.br-strip.srv-tile--extra.is-shown{display:block}
@media (max-width:820px){ .br-strip{aspect-ratio:16/7} }
/* phones: a supplied MOBILE image shows FULL — its own proportions, never cropped; strips also sit closer to the edges (client 2026-07-08) */
@media (max-width:760px){
  .br-strip--mob{aspect-ratio:auto;background:none}
  .br-strip--mob img{position:static;inset:auto;width:100%;height:auto;object-fit:contain}
  .br-wrap{padding-inline:clamp(10px,3.5vw,16px)}
}

/* ============================ SERVICE PAGE — Social Media Reels (no mockup, per brief): vertical 9:16 cards ============================ */
.reel-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.4vw,22px)}
.reel-card{display:flex;flex-direction:column;margin:0}
.reel-card[data-video]{cursor:pointer}
.reel-card__media{position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:12px;background:#15171b}
.reel-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.reel-card[data-video]:hover .reel-card__media img{transform:scale(1.05)}
.reel-card__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.36));opacity:.72;transition:opacity .3s var(--ease)}
.reel-card[data-video]:hover .reel-card__shade{opacity:1}
.reel-card__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(44px,3.4vw,58px);height:clamp(44px,3.4vw,58px);border-radius:50%;border:2px solid rgba(255,255,255,.92);display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.15);transition:transform .3s var(--ease),background .3s var(--ease)}
.reel-card[data-video]:hover .reel-card__play{transform:translate(-50%,-50%) scale(1.08);background:rgba(0,0,0,.3)}
.reel-card__play svg{width:34%;height:34%;margin-left:8%}
.reel-card__title{margin:12px 0 0;font:600 clamp(14px,1.05vw,17px)/1.25 var(--font);color:#0a0a0a}
.reel-card__sub{margin:3px 0 0;font:400 clamp(12px,.9vw,14px)/1.35 var(--font);color:rgba(10,10,10,.55)}
.reel-card.srv-tile--extra{display:none}
.reel-card.srv-tile--extra.is-shown{display:flex}

@media (max-width:1200px){ .reel-grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:900px){ .reel-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:600px){ .reel-grid{grid-template-columns:repeat(2,1fr)} }

/* ---- Reels INLINE PLAYER (same behaviour as Films, but vertical): preview → full video in place; corner controls; enlarge = tall 9:16 overlay; mobile → native controls, no enlarge ---- */
.reel-card--inline{cursor:pointer}
.reel-card__prev{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.reel-card--inline:not(.is-playing):hover .reel-card__prev{transform:scale(1.05)}
.reel-card__player{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;transition:opacity .25s}
.reel-card.is-playing .reel-card__player{opacity:1;pointer-events:auto}
.reel-card.is-playing .reel-card__prev,.reel-card.is-playing .reel-card__play,.reel-card.is-playing .reel-card__shade{opacity:0;pointer-events:none}
.reel-card__full{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;display:block}
.reel-card__play{padding:0;font:inherit;-webkit-appearance:none;appearance:none;cursor:pointer;transition:transform .3s var(--ease),background .3s var(--ease),opacity .25s}
.reel-card--inline:not(.is-playing):hover .reel-card__play{transform:translate(-50%,-50%) scale(1.08);background:rgba(0,0,0,.3)}
.reel-card__ctrls{position:absolute;right:10px;bottom:10px;z-index:4;display:flex;align-items:center;gap:8px}
.reel-card__ctrl{width:30px;height:30px;flex:none;display:grid;place-items:center;padding:0;border:0;border-radius:50%;cursor:pointer;color:#fff;background:rgba(0,0,0,.34);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s}
.reel-card__ctrl:hover{background:rgba(0,0,0,.58)}
.reel-card__ctrl svg{width:15px;height:15px;display:block}
.reel-card__ic{display:none;line-height:0}
.reel-card__ic--on,.reel-card__ic--exp{display:block}
.reel-card.is-muted .reel-card__ic--on{display:none}
.reel-card.is-muted .reel-card__ic--off{display:block}
.reel-card.is-big .reel-card__ic--exp{display:none}
.reel-card.is-big .reel-card__ic--shr{display:block}
.reel-card__vol{width:0;opacity:0;height:3px;padding:0;margin:0;accent-color:#fff;cursor:pointer;-webkit-appearance:none;appearance:none;background:rgba(255,255,255,.5);border-radius:3px;transition:width .25s var(--ease),opacity .2s}
.reel-card__ctrls:hover .reel-card__vol{width:54px;opacity:1}
.reel-card__vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:11px;height:11px;border-radius:50%;background:#fff;cursor:pointer}
.reel-card__vol::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:#fff;cursor:pointer}
.reel-card.is-big .reel-card__player{position:fixed;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:auto;height:90vh;aspect-ratio:9/16;max-width:92vw;z-index:1002;border-radius:14px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.reel-card.is-big .reel-card__full{object-fit:contain}
.reel-card.is-big .reel-card__ctrls{right:14px;bottom:14px}
@media (max-width:760px){
  .reel-card__ctrls{display:none}   /* mobile → native <video controls>; cannot enlarge (already full-width) */
  .reel-card.is-big .reel-card__player{position:absolute;top:0;left:0;transform:none;width:100%;height:100%;aspect-ratio:auto;max-width:none;border-radius:12px;box-shadow:none}
}

/* ============================ SERVICE PAGE — Advertisement & Promotion (mockup new/008.jpeg): descriptive, no gallery ============================ */
/* step numbers now use the DEFAULT grey on Ads too (client 2026-07-07 — blue override removed so it matches the other service pages) */

/* INTRO — 2 columns */
.apr-intro{background:#f6f6f6;padding:clamp(30px,4vw,64px) 0}
.apr-intro__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,90px)}
.apr-intro__h{margin:0 0 clamp(16px,1.6vw,24px);font:400 clamp(20px,2vw,30px)/1.25 var(--font);letter-spacing:.01em;text-transform:uppercase;color:#0a0a0a}
.apr-intro__body{font:400 clamp(14px,1.05vw,16px)/1.6 var(--font);color:rgba(10,10,10,.7)}
.apr-intro__body p{margin:0 0 .9em}
.apr-intro__hl{margin:clamp(12px,1.4vw,20px) 0 0;font:600 clamp(15px,1.15vw,18px)/1.5 var(--font);color:var(--cta-a)}

/* CARDS — 5 dark cards, blue icons */
.apr-cards{background:#f6f6f6;padding:clamp(20px,2vw,36px) 0 clamp(30px,4vw,60px)}
.apr-cards__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.2vw,20px)}
.apr-card{display:flex;flex-direction:column;background:#0c0f14;border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:clamp(20px,1.6vw,28px);color:#fff}
.apr-card__ico{width:clamp(34px,2.6vw,42px);height:clamp(34px,2.6vw,42px);color:var(--cta-a);display:block;margin-bottom:clamp(18px,2vw,30px)}
.apr-card__ico svg{width:100%;height:100%;stroke-width:1.2;stroke:url(#apr-ico-grad)}                 /* thinner strokes + brand cyan→blue gradient */
.apr-card__ico svg [fill="currentColor"]{fill:url(#apr-ico-grad)}                                     /* solid accents (dot/play) also gradient */
.apr-card__t{margin:0;font:600 clamp(15px,1.15vw,18px)/1.3 var(--font);color:#fff}
.apr-card__rule{display:block;width:26px;height:2px;background:linear-gradient(90deg,var(--cta-b),var(--cta-a));margin:12px 0 14px;border-radius:2px}
.apr-card__d{margin:0;font:400 clamp(12.5px,.92vw,14px)/1.55 var(--font);color:rgba(255,255,255,.62)}

/* BAND — Visibility Creates Opportunity */
.apr-band{background:#f6f6f6;padding:clamp(10px,1vw,20px) 0 clamp(30px,4vw,60px)}
.apr-band__box{position:relative;border-radius:18px;overflow:hidden;background:#0c0f14;padding:clamp(30px,4vw,60px) clamp(24px,3vw,54px) clamp(26px,3vw,48px)}
.apr-band__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.apr-band__shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,10,14,.94) 0%,rgba(8,10,14,.8) 38%,rgba(8,10,14,.5) 62%,rgba(8,10,14,.75) 100%)}
.apr-band__inner{position:relative;z-index:2;display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,3vw,60px);align-items:center}
.apr-band__eyebrow{display:block;font:600 12px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--cta-b);margin-bottom:14px}
.apr-band__title{margin:0 0 clamp(16px,1.8vw,26px);font:400 clamp(30px,3.6vw,58px)/1.08 var(--font);letter-spacing:.07em;text-transform:uppercase;color:#fff}   /* thin like the hero title (was 800) per client 2026-07-07 */
.apr-band__body{margin:0;font:400 clamp(13px,1vw,15.5px)/1.6 var(--font);color:rgba(255,255,255,.72);max-width:44ch}
.apr-band__points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(12px,1.5vw,20px)}
.apr-band__points li{display:flex;align-items:center;gap:14px;font:500 clamp(14px,1.1vw,17px)/1.3 var(--font);color:#fff}
.apr-band__ico{flex:none;width:clamp(24px,1.8vw,30px);height:clamp(24px,1.8vw,30px);color:var(--cta-a);display:block}
.apr-band__ico svg{width:100%;height:100%}
.apr-band__tag{position:relative;z-index:2;margin:clamp(26px,3vw,44px) 0 0;text-align:center;font:500 clamp(15px,1.3vw,20px)/1.5 var(--font);color:#fff}
.apr-band__tag-hl{color:var(--cta-b)}

@media (max-width:1100px){ .apr-cards__grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px){
  .apr-intro__grid{grid-template-columns:1fr;gap:clamp(24px,4vw,36px)}
  .apr-band__inner{grid-template-columns:1fr;gap:clamp(22px,4vw,30px);align-items:start}
}
@media (max-width:640px){ .apr-cards__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:420px){ .apr-cards__grid{grid-template-columns:1fr} }

/* ============================ PROJECT CASE PAGE — redesign 2026-07 (mockups new/0001-0003.jpeg) ============================ */
.pr{background:#fff;color:#0a0a0a;overflow:hidden}
/* HERO */
.pr-hero{position:relative;width:100%;aspect-ratio:1920/815;min-height:clamp(485px,59vh,730px);overflow:hidden;display:flex;align-items:flex-end;background:#0b0d10}   /* case hero — a bit taller than the Projects hero (client 2026-07-07) */
.pr-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.pr-hero__shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(4,6,10,.78),rgba(4,6,10,.2) 55%,rgba(4,6,10,0)),linear-gradient(0deg,rgba(4,6,10,.62),rgba(4,6,10,0) 42%)}
.pr-hero__inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(34px,4.5vw,70px)}
.pr-hero__title{margin:0;font:300 clamp(36px,5.4vw,88px)/1.04 var(--font);letter-spacing:.04em;text-transform:uppercase;color:#fff}   /* larger — close to the Projects hero title, kept thin (client 2026-07-07) */
.pr-hero__rule{display:block;width:58px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--cta-b),var(--cta-a));margin:clamp(16px,1.8vw,26px) 0}   /* BLUE underline (was white) */
.pr-hero__sub{margin:0;font:400 clamp(15px,1.35vw,21px)/1.45 var(--font);text-transform:none;letter-spacing:.02em;color:rgba(255,255,255,.85)}   /* qualifier line — MIXED case (override old uppercase rule), e.g. «Luxury Residential Project • Corfu, Greece» */
/* SERVICES — text only, no icons */
.pr-serv2{background:#f6f6f6;padding:clamp(30px,3.6vw,54px) 0;border-bottom:1px solid rgba(10,10,10,.07)}
.pr-serv2__title{margin:0 0 clamp(18px,2.2vw,32px);text-align:center;font:600 clamp(13px,1.1vw,16px)/1 var(--font);letter-spacing:.15em;text-transform:uppercase;color:rgba(10,10,10,.5)}   /* client 2026-07-07: a bit bigger + one step thicker (was 400 / 12-14px) */
.pr-serv2__row{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,1.4vw,30px) clamp(18px,2.4vw,44px)}
.pr-serv2__item{font:400 clamp(12px,.95vw,14px)/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:rgba(10,10,10,.32)}   /* font/weight/size = .expertise__title (OUR EXPERTISE) per client 2026-07-05; off = muted grey */
.pr-serv2__item.is-on{color:var(--cta-a)}   /* used services = blue (weight now 400 like the rest, per «same weight») */
/* ABOUT + video */
.pr-about{padding:clamp(40px,5vw,84px) 0}
.pr-about__grid{display:grid;grid-template-columns:0.92fr 1.35fr;gap:clamp(28px,4vw,66px);align-items:center}
.pr-about__t{margin:0 0 clamp(16px,1.8vw,24px);font:600 clamp(11px,.95vw,13px)/1.4 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--cta-a)}
.pr-about__body{font:400 clamp(15px,1.15vw,17px)/1.68 var(--font);color:rgba(10,10,10,.72)}
.pr-about__body p{margin:0 0 1em}.pr-about__body p:last-child{margin:0}
/* ABOUT video (.pr-about__vid) = the SAME inline player as the Films page (.film-card--inline, JS+CSS reused: no native control bar, corner sound/enlarge, play re-shows on pause). Box tuned to the case-page look — rounded 12px + dark bg (client 2026-07-08). */
.pr-about__vid{margin:0}
.pr-about__vid .film-card__media{border-radius:12px;background:#0c0f14}
/* GALLERY */
.pr-gal2{padding:0 0 clamp(40px,5vw,76px)}
.pr-gal2__title{margin:0 0 clamp(18px,2.2vw,30px);font:600 clamp(14px,1.35vw,20px)/1.3 var(--font);letter-spacing:.05em;text-transform:uppercase;color:#0a0a0a}
.pgb{margin-bottom:clamp(10px,1.1vw,16px)}
.pgb__cell{position:relative;margin:0;overflow:hidden;border-radius:8px;background:#e6e6e6}
.pgb__cell img,.pgb__cell video{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.pgb__cell:hover img,.pgb__cell:hover video{transform:scale(1.045)}
.pgb--hero>.pgb__cell:first-child img,.pgb--hero>.pgb__cell:first-child video,.pgb--vert>.pgb__cell:first-child img,.pgb--vert>.pgb__cell:first-child video{position:absolute;inset:0}
.pgb--hero{display:grid;grid-template-columns:1.16fr 1fr;gap:clamp(10px,1.1vw,16px);align-items:stretch}
.pgb--hero .pgb__mgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.1vw,16px)}
.pgb--hero .pgb__mgrid .pgb__cell{aspect-ratio:4/3}
.pgb--pano{display:flex;flex-direction:column;gap:clamp(10px,1.1vw,16px)}
.pgb--pano>.pgb__cell{aspect-ratio:1000/300}
.pgb--pano .pgb__prow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.1vw,16px)}
.pgb--pano .pgb__prow .pgb__cell{aspect-ratio:1/1}
.pgb--vert{display:grid;grid-template-columns:0.78fr 1.7fr;gap:clamp(10px,1.1vw,16px);align-items:stretch}
.pgb--vert .pgb__vgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.1vw,16px)}
.pgb--vert .pgb__vgrid .pgb__cell{aspect-ratio:3/2}
.pgb--asym{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:clamp(10px,1.1vw,16px)}
.pgb--asym .pgb__cell{aspect-ratio:1/1}
.pgb--asym>.pgb__cell:first-child,.pgb--asym>.pgb__cell:last-child{grid-row:span 2;aspect-ratio:auto}
.pgb--asym>.pgb__cell:first-child img,.pgb--asym>.pgb__cell:first-child video,.pgb--asym>.pgb__cell:last-child img,.pgb--asym>.pgb__cell:last-child video{position:absolute;inset:0}
.pgb--mason{columns:3;column-gap:clamp(10px,1.1vw,16px)}
.pgb--mason .pgb__cell{break-inside:avoid;margin:0 0 clamp(10px,1.1vw,16px)}
.pgb--mason .pgb__cell img,.pgb--mason .pgb__cell video{position:static;height:auto;object-fit:unset}
/* TESTIMONIAL */
.pr-quote{background:#0b0d12;color:#fff;padding:clamp(36px,4vw,64px) 0}
.pr-quote__grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(28px,4vw,70px);align-items:center}
.pr-quote__text{position:relative;margin:0;padding-left:clamp(34px,3vw,52px);font:400 clamp(15px,1.3vw,20px)/1.55 var(--font);color:rgba(255,255,255,.85)}
.pr-quote__mark{position:absolute;left:0;top:-.15em;font:700 clamp(40px,4vw,64px)/1 var(--font);color:var(--cta-b)}
.pr-quote__dev{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.pr-quote__logo{max-height:46px;width:auto;margin-bottom:6px;object-fit:contain}
.pr-quote__name{font:600 clamp(15px,1.3vw,20px)/1.2 var(--font);letter-spacing:.04em;color:#fff}
.pr-quote__role{font:500 11px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5)}
/* DIVIDER (variant A) */
.pr-div{padding:clamp(20px,2.4vw,40px) 0}
.pr-div__box{position:relative;border-radius:16px;overflow:hidden;background:#0a0c11;min-height:clamp(210px,21vw,320px);display:flex;align-items:center}
.pr-div__img{position:absolute;right:0;top:0;height:100%;width:62%;object-fit:cover;z-index:0;filter:brightness(.82);-webkit-mask-image:linear-gradient(90deg,transparent,#000 42%);mask-image:linear-gradient(90deg,transparent,#000 42%)}   /* photo covers most of the right, LEFT edge feathered into the dark + slightly darkened (client 2026-07-07) */
.pr-div__shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#0a0c11 34%,rgba(10,12,17,.42) 56%,rgba(10,12,17,0) 82%)}
.pr-div__wave{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(130% 90% at 74% 50%,rgba(126,225,255,.08),transparent 58%)}
.pr-div__text{position:relative;z-index:2;padding:clamp(26px,3.4vw,56px);max-width:52%}
.pr-div__title{margin:0;font:200 clamp(20px,2.4vw,36px)/1.26 var(--font);letter-spacing:.02em;text-transform:uppercase;color:#fff}   /* thinnest weight (client 2026-07-07) */
.pr-div__hl{color:var(--cta-b)}
.pr-div__sub{margin:clamp(14px,1.6vw,22px) 0 0;font:400 clamp(13px,1.05vw,16px)/1.55 var(--font);color:rgba(255,255,255,.6)}
/* MORE PROJECTS */
.pr-more2{padding:clamp(40px,5vw,76px) 0}
.pr-more2__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:clamp(20px,2.4vw,32px)}
.pr-more2__title{margin:0;font:400 clamp(16px,1.5vw,22px)/1.16 var(--font);letter-spacing:.07em;text-transform:uppercase;color:#0a0a0a}   /* same font/cut as .procstep__label (=.hero__title weight/spacing/leading) per client 2026-07-05; own size kept */
.pr-more2__all{font:400 clamp(12px,.95vw,14px)/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--cta-a);text-decoration:none;white-space:nowrap}   /* same look as .expertise__title (OUR EXPERTISE) per client 2026-07-05; keeps nowrap + arrow */
.pr-more2__all:hover{opacity:.72}
.pr-more2__row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,22px)}
.pr-mcard{display:block;text-decoration:none;color:inherit}
.pr-mcard__media{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#0c0f14}
.pr-mcard__media img,.pr-mcard__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.pr-mcard:hover .pr-mcard__media img,.pr-mcard:hover .pr-mcard__media video{transform:scale(1.05)}
.pr-mcard__shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.45),rgba(0,0,0,0) 55%)}
.pr-mcard__name{display:block;margin:12px 0 0;font:400 clamp(14px,1.05vw,16px)/1.16 var(--font);letter-spacing:.07em;text-transform:uppercase;color:#0a0a0a}   /* same font/cut as .procstep__label (=.hero__title weight/spacing/leading) per client 2026-07-05; own size kept */
.pr-mcard__sub{display:block;margin:3px 0 0;font:400 clamp(12px,.9vw,13.5px)/1.3 var(--font);color:rgba(10,10,10,.5)}
/* CTA band */
.pr-cta{background:transparent;padding:0 0 clamp(44px,6vw,90px)}
.pr-cta__box{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,50px);background:#0b0d12;color:#fff;border-radius:16px;padding:clamp(30px,3.4vw,52px) clamp(28px,3.4vw,58px);min-height:clamp(150px,15vw,200px)}
.pr-cta__copy{position:relative;z-index:2;max-width:38%}
.pr-cta__title{margin:0;font:400 clamp(20px,2.2vw,32px)/1.2 var(--font);letter-spacing:.01em;text-transform:uppercase;color:#fff}
.pr-cta__text{margin:8px 0 0;font:400 clamp(14px,1.1vw,16px)/1.4 var(--font);color:rgba(255,255,255,.62)}
.pr-cta__btn{position:relative;z-index:2;flex:none;font-weight:400;letter-spacing:.07em;text-transform:uppercase}   /* button text uses .hero__title's font treatment (thin 400 / .07em / uppercase) per client 2026-07-05 — keeps the button's own size (18px) + pill/gradient */
/* RTL: the trailing → arrow (literal char) must point LEFT on the «all projects» link + CTA button (client 2026-07-09) */
[dir="rtl"] .pr-more2__all span,[dir="rtl"] .pr-cta__btn span{display:inline-block;transform:scaleX(-1)}
.pr-cta__btn span{margin-inline-start:.15em}   /* subtle gap between the button text and the arrow (client 2026-07-09: .15em) — logical, works in LTR + RTL */
/* editable photo — ПО ЦЕНТРУ (между текстом и кнопкой), во всю высоту блока, размывается С ОБЕИХ сторон (client 2026-07-07) */
.pr-cta__media{position:absolute;left:56%;top:0;bottom:0;transform:translateX(-50%);width:clamp(280px,34%,500px);z-index:0;margin:0}
.pr-cta__media img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.82);-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
@media (max-width:900px){
  .pr-about__grid,.pr-quote__grid{grid-template-columns:1fr;gap:clamp(22px,4vw,32px)}
  .pr-more2__row{grid-template-columns:1fr 1fr}
  .pgb--pano .pgb__prow{grid-template-columns:1fr 1fr}
  .pgb--mason{columns:2}
  .pr-div__text{max-width:100%}
  .pr-div__img{width:100%;opacity:.5;filter:brightness(.7);-webkit-mask-image:none;mask-image:none}   /* mobile: full-bleed dimmed photo behind the text */
  .pr-cta__box{flex-direction:column;text-align:center;align-items:center}
  .pr-cta__copy{max-width:100%}
  .pr-cta__box::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(11,13,18,.5),rgba(11,13,18,.72))}   /* mobile: ровное затемнение поверх фото-фона */
  .pr-cta__media{position:absolute;inset:0;left:0;width:100%;transform:none}   /* mobile: фото на весь блок, приглушённое, за текстом */
  .pr-cta__media img{filter:brightness(.5);opacity:.5;-webkit-mask-image:none;mask-image:none}
}
@media (max-width:640px){
  .pgb--hero,.pgb--vert{grid-template-columns:1fr}
  .pgb--hero>.pgb__cell:first-child,.pgb--vert>.pgb__cell:first-child{aspect-ratio:16/10}
  .pgb--asym{grid-template-columns:1fr 1fr}
  .pgb--asym>.pgb__cell:first-child,.pgb--asym>.pgb__cell:last-child{grid-row:auto;aspect-ratio:1/1}
  .pgb--asym>.pgb__cell:first-child img,.pgb--asym>.pgb__cell:last-child img{position:static;height:100%}
  .pgb--mason{columns:1}
  .pr-more2__row{grid-template-columns:1fr}
}
/* project case hero: neutralise the OLD absolute-positioned .pr-hero__title/__sub rules (superseded by the flow layout in .pr-hero__inner) */
.pr-hero__inner .pr-hero__title,.pr-hero__inner .pr-hero__sub{position:static;left:auto;right:auto;top:auto;bottom:auto}
.pr-hero__inner .pr-hero__title{max-width:min(100%,8.5em)}   /* narrower column → long names wrap to ~2 lines (client 2026-07-07); manual Enter breaks also honoured via nl2br */
.pr-hero__inner .pr-hero__sub{max-width:none}

/* ============================ PRIVACY POLICY — redesign 2026-07-05 (mockup «Privacy Policy.png») ============================ */
.pp2{background:#fff;color:#0a0a0a}
/* HERO */
.pp2-hero{padding:clamp(40px,6vw,96px) 0 clamp(30px,4vw,60px)}
.pp2-hero__grid{display:grid;grid-template-columns:0.88fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.pp2-hero__eyebrow{display:block;font:400 clamp(12px,.95vw,14px)/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--cta-a);margin-bottom:14px}   /* same look as .expertise__title (OUR EXPERTISE) per client 2026-07-05; keeps its own bottom margin */
.pp2-hero__title{margin:0;font:700 clamp(38px,5vw,72px)/1.02 var(--font);letter-spacing:-.01em;color:#0a1420}
.pp2-hero__updated{margin:clamp(10px,1.4vw,18px) 0 clamp(20px,2.4vw,34px);font:400 clamp(13px,1vw,15px)/1.4 var(--font);color:rgba(10,10,10,.5)}
.pp2-hero__intro{font:400 clamp(14px,1.1vw,16px)/1.72 var(--font);color:rgba(10,10,10,.68);max-width:46ch}
.pp2-hero__intro p{margin:0 0 1em}.pp2-hero__intro p:last-child{margin:0}
.pp2-hero__media{margin:0}
/* feathered edges — the hero render dissolves softly into the light page instead of a hard rectangle
   (two intersected gradients fade all 4 sides; bottom fades more to kill the dark street edge, top less since the sky is already light). client 2026-07-05 */
.pp2-hero__media img{width:100%;height:auto;display:block;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 86%,transparent 100%);
  mask-composite:intersect}
/* ⭐ DESKTOP (client 2026-07-08): the hero render is BUILT-IN to the top-right corner — flush to the TOP + RIGHT
   screen edges (no fade there), feathered ONLY on the LEFT (into the text) and BOTTOM (into the page). One smooth
   gradient each side. Image stays editable via pp_hero_image (ACF). */
@media (min-width:861px){
  .pp2-hero{position:relative;overflow:hidden;padding:0}
  .pp2-hero__grid{display:block;position:relative;z-index:1;min-height:clamp(430px,43vw,600px);padding:clamp(118px,12vw,188px) 0 clamp(48px,6vw,88px)}
  .pp2-hero__text{max-width:min(46%,540px)}
  .pp2-hero__media{position:absolute;inset:0 0 0 auto;width:min(60%,1040px);margin:0}
  .pp2-hero__media img{width:100%;height:100%;object-fit:cover;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%,#000 100%),linear-gradient(to bottom,#000 0,#000 80%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent 0,#000 30%,#000 100%),linear-gradient(to bottom,#000 0,#000 80%,transparent 100%);
    mask-composite:intersect}
}
/* RTL (Hebrew) DESKTOP: mirror the hero render to the LEFT screen edge + flip it horizontally; text stays on the right. Without this the render stayed pinned right and overlapped the RTL text — client 2026-07-09 */
@media (min-width:861px){
  [dir="rtl"] .pp2-hero__media{inset:0 auto 0 0}
  [dir="rtl"] .pp2-hero__media img{transform:scaleX(-1)}
}
/* SECTIONS */
.pp2-secs{padding:clamp(20px,3vw,50px) 0 clamp(30px,4vw,60px)}
.pp2-sec{display:grid;grid-template-columns:clamp(66px,7vw,110px) 1fr;gap:clamp(6px,1.6vw,26px);padding:clamp(22px,3vw,38px) 0;border-top:1px solid rgba(10,10,10,.1)}
.pp2-sec:first-child{border-top:0;padding-top:0}
.pp2-sec__n{font:300 clamp(26px,3.2vw,44px)/1 var(--font);color:rgba(10,10,10,.2);letter-spacing:.02em}
.pp2-sec__h{margin:0 0 clamp(10px,1.2vw,16px);font:700 clamp(17px,1.5vw,22px)/1.3 var(--font);color:#0a1420}
.pp2-sec__b{font:400 clamp(14px,1.05vw,15.5px)/1.7 var(--font);color:rgba(10,10,10,.66);max-width:76ch}
.pp2-sec__b p{margin:0 0 .55em}.pp2-sec__b p:last-child{margin:0}
/* CONTACT */
.pp2-contact{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,38px);padding:clamp(10px,1.6vw,20px) 0 0;margin-left:calc(clamp(66px,7vw,110px) + clamp(6px,1.6vw,26px));font:500 clamp(13px,1.05vw,15px)/1 var(--font)}
.pp2-contact__i{display:inline-flex;align-items:center;gap:9px;color:#0a1420;text-decoration:none}
.pp2-contact__i:hover{color:var(--cta-a)}
.pp2-contact__i svg{width:18px;height:18px;color:var(--cta-a);flex:none}
/* BAND */
.pp2-band{padding:clamp(10px,2vw,30px) 0 clamp(44px,6vw,90px)}
.pp2-band__box{position:relative;display:flex;align-items:center;gap:clamp(18px,2.6vw,40px);background:#f4f2ec;border:1px solid rgba(10,10,10,.05);border-radius:16px;overflow:hidden;padding:clamp(26px,3.2vw,50px) clamp(24px,3vw,48px);min-height:clamp(170px,17vw,232px)}
.pp2-band__ico{position:relative;z-index:2;flex:none;width:clamp(46px,4.2vw,64px);color:var(--cta-a)}
.pp2-band__ico svg{width:100%;height:auto;display:block}
.pp2-band__div{position:relative;z-index:2;flex:none;width:1px;align-self:stretch;background:rgba(10,10,10,.14);margin:clamp(2px,.6vw,8px) 0}
.pp2-band__text{position:relative;z-index:2;max-width:60%}
.pp2-band__h{margin:0 0 clamp(14px,1.6vw,20px);font:700 clamp(20px,2.2vw,30px)/1.2 var(--font);color:#0a1420}
.pp2-band__body{font:400 clamp(13px,1.02vw,15px)/1.7 var(--font);color:rgba(10,10,10,.62)}
.pp2-band__body p{margin:0 0 .7em}
.pp2-band__bold{margin:clamp(12px,1.4vw,18px) 0 0;font:700 clamp(13px,1.05vw,15px)/1.5 var(--font);color:#0a1420}
.pp2-band__img{position:absolute;right:0;top:0;height:100%;width:46%;object-fit:cover;z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 36%);mask-image:linear-gradient(90deg,transparent,#000 36%)}
/* RTL (Hebrew): mirror the band — image to the LEFT, mask flipped, so it no longer covers the shield icon on the right */
@media (min-width:761px){
  [dir="rtl"] .pp2-band__img{right:auto;left:0;-webkit-mask-image:linear-gradient(270deg,transparent,#000 36%);mask-image:linear-gradient(270deg,transparent,#000 36%)}
}
@media (max-width:860px){
  /* MOBILE (client 2026-07-08): SAME top-right bleed as desktop, but a SMALLER photo slice on the right +
     text on the left (a bit of the render peeks in, faded into the text). Title sized to fit the narrower
     column; intro stays 14px = the section body below. */
  .pp2-hero{position:relative;overflow:hidden;padding:0}
  /* ⚠ padding: top | RIGHT (clears the photo) | bottom | LEFT gutter — the middle value MUST NOT be 0,
     or the text jams into the screen edge (client 2026-07-08). Left gutter restored. */
  .pp2-hero__grid{display:block;position:relative;z-index:1;min-height:clamp(300px,70vw,430px);padding:clamp(84px,22vw,124px) 42% clamp(30px,7vw,46px) clamp(22px,6.5vw,44px)}
  .pp2-hero__text{max-width:none}
  .pp2-hero__intro{max-width:none}
  .pp2-hero__title{font-size:clamp(26px,7.4vw,38px)}
  .pp2-hero__media{position:absolute;inset:0 0 0 auto;width:38%;margin:0}
  .pp2-hero__media img{width:100%;height:100%;object-fit:cover;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 34%,#000 100%),linear-gradient(to bottom,#000 0,#000 82%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent 0,#000 34%,#000 100%),linear-gradient(to bottom,#000 0,#000 82%,transparent 100%);
    mask-composite:intersect}
}
/* RTL (Hebrew) MOBILE: same mirror — render to the LEFT, flipped; text padding swaps so the reserved gap is on the LEFT (under the photo) — client 2026-07-09 */
@media (max-width:860px){
  [dir="rtl"] .pp2-hero__media{inset:0 auto 0 0}
  [dir="rtl"] .pp2-hero__media img{transform:scaleX(-1)}
  [dir="rtl"] .pp2-hero__grid{padding-left:42%;padding-right:clamp(22px,6.5vw,44px)}
}
@media (max-width:760px){
  .pp2-band__box{flex-direction:column;align-items:flex-start;gap:clamp(14px,3vw,20px)}
  .pp2-band__div{display:none}
  .pp2-band__text{max-width:100%}
  .pp2-band__img{position:static;width:100%;height:clamp(150px,42vw,200px);-webkit-mask:none;mask:none;border-radius:10px}
}
@media (max-width:560px){
  .pp2-sec{grid-template-columns:1fr;gap:4px}
  .pp2-contact{margin-left:0;flex-direction:column;gap:12px}
}

/* ===================== THANK YOU page (page-thank-you.php, mockup 00004.jpeg) ===================== */
.ty__grid{display:grid;grid-template-columns:1.06fr .94fr;min-height:100vh}
.ty__content{display:flex;align-items:center;justify-content:center;background:#f6f6f6;
  padding:clamp(84px,11vh,124px) clamp(24px,4vw,64px) clamp(38px,5.5vh,66px)}
.ty__inner{max-width:560px;margin:0 auto;text-align:center}
.ty__check{display:inline-flex;align-items:center;justify-content:center;width:clamp(54px,min(7vw,7.4vh),82px);height:clamp(54px,min(7vw,7.4vh),82px);
  border-radius:50%;background:#fff;border:1px solid rgba(15,129,178,.18);box-shadow:0 12px 34px rgba(15,129,178,.15);
  color:var(--cta-a);margin:0 auto clamp(15px,min(3vw,2.4vh),30px)}
.ty__check svg{width:44%;height:44%}
.ty__title{margin:0;font:400 clamp(34px,min(5.6vw,6.2vh),64px)/1.05 var(--font);letter-spacing:.06em;text-transform:uppercase;color:#0a1420}   /* thin hero-style; smaller + height-aware (min of vw/vh) so the page fits ONE screen w/o scroll on any height — client 2026-07-09 */
.ty__eyebrow{margin:clamp(9px,min(1.4vw,1.3vh),15px) 0 0;font:400 clamp(12px,min(1.15vw,1.35vh),15px)/1.4 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--cta-a)}   /* thinner — client 2026-07-09 */
.ty__rule{display:block;width:46px;height:2px;background:var(--cta-a);border-radius:2px;margin:clamp(12px,min(2.6vw,2.1vh),26px) auto clamp(14px,min(3vw,2.4vh),30px)}
.ty__text{margin:0;font:400 clamp(14px,min(1.3vw,1.5vh),18px)/1.6 var(--font);color:rgba(10,20,30,.62)}
.ty__bold{margin:clamp(7px,min(1.1vw,1vh),12px) 0 0;font:700 clamp(15px,min(1.35vw,1.55vh),19px)/1.5 var(--font);color:#0a1420}
.ty__sep{position:relative;height:1px;background:rgba(10,20,30,.12);max-width:520px;margin:clamp(14px,min(4.4vw,2.9vh),42px) auto}
.ty__sep span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:var(--cta-a)}
.ty__note{display:flex;align-items:center;gap:clamp(13px,min(1.8vw,1.7vh),20px);text-align:left;max-width:470px;margin:0 auto}
.ty__note-ic{flex:none;display:flex;align-items:center;justify-content:center;width:clamp(42px,min(4.2vw,4.5vh),54px);height:clamp(42px,min(4.2vw,4.5vh),54px);
  border-radius:50%;border:1.5px solid rgba(15,129,178,.3);color:var(--cta-a)}
.ty__note-ic svg{width:46%;height:46%}
.ty__note-h{margin:0;font:600 clamp(14px,min(1.3vw,1.45vh),17px)/1.35 var(--font);color:#0a1420}
.ty__note-s{margin:2px 0 0;font:400 clamp(13px,min(1.15vw,1.25vh),15px)/1.4 var(--font);color:rgba(10,20,30,.55)}
.ty__hl{color:var(--cta-a);font-style:italic}
.ty__brand{display:flex;flex-direction:column;align-items:center;gap:clamp(9px,1vw,13px);margin-top:clamp(18px,min(6vw,3.6vh),56px)}
.ty__brand-name{font:400 clamp(15px,1.5vw,20px)/1 var(--font);letter-spacing:.34em;color:rgba(10,20,30,.4)}
.ty__brand-rule{width:40px;height:2px;background:var(--cta-a);border-radius:2px;opacity:.85}
.ty__brand-tag{font:400 clamp(10px,.9vw,12px)/1.3 var(--font);letter-spacing:.28em;text-transform:uppercase;color:rgba(10,20,30,.38)}
.ty__brand-logo{display:block;width:clamp(150px,min(24vw,20vh),224px);height:auto}   /* smaller + height-aware so the lockup fits one screen — client 2026-07-09 */
.ty__media{position:relative;margin:0;overflow:hidden;background:#f6f6f6}   /* the feathered photo edge dissolves into the site's #f6f6f6 (NOT pure white) → matches the content column, no seam — client 2026-07-09 */
.ty__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center right;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 16%,#000 46%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 16%,#000 46%)}   /* softer + wider left fade into the white column (was a hard-ish #000 20%) */
[dir="rtl"] .ty__media img{transform:scaleX(-1)}   /* RTL: MIRROR the villa horizontally — scaleX flips the base LTR crop + left-edge fade → mirrored image + right-edge fade into the content on the right (was only moved left, not mirrored) — client 2026-07-09 */
@media (max-width:900px){
  /* ⭐2026-07-09 (client mockup): mobile «Спасибо» fits ONE screen, NO scroll — content on top, photo a bottom STRIP, logo OVER the photo, note stacked+centred */
  .ty__grid{grid-template-columns:1fr;min-height:100vh;position:relative;display:flex;flex-direction:column;overflow:hidden}
  .ty__content{flex:1 1 auto;min-height:0;padding:clamp(66px,15.5vw,90px) var(--mpad,22px) clamp(8px,2.5vw,16px)}
  .ty__note{flex-direction:column;text-align:center;gap:clamp(8px,2.2vw,12px);max-width:none}   /* heart on top, everything centred (mockup) */
  .ty__note-s{margin-top:2px}
  .ty__media{position:relative;flex:0 0 auto;height:clamp(158px,29vh,270px);min-height:0}   /* photo = bottom strip */
  .ty__media img{position:absolute;object-position:center;-webkit-mask:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 12%,#000 42%);mask:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 12%,#000 42%)}   /* TOP fade into the content above */
  .ty__brand{position:absolute;left:0;right:0;bottom:clamp(14px,4vw,26px);z-index:2;margin:0}   /* logo lockup OVER the photo bottom (mockup) */
  .ty__brand-logo{width:clamp(148px,40vw,194px)}
  body.admin-bar .ty__grid{min-height:calc(100vh - 46px)}   /* mobile WP admin bar = 46px */
}
@media (min-width:901px){
  body.admin-bar .ty__grid{min-height:calc(100vh - 32px)}   /* logged-in WP admin bar (32px, html margin-top) would push the panel 32px past one screen → subtract it so admins see no scroll either; visitors have no admin bar so 100vh already fits — client 2026-07-09 */
}

/* ============ RTL (Hebrew) — HOMEPAGE mirroring (client 2026-07-09) ============
   Everything below is scoped to [dir="rtl"] — the LTR (EN/RU) layout is untouched. */

/* OUR EXPERTISE — «למידע נוסף» arrow points LEFT */
[dir="rtl"] .expslide__more svg{transform:scaleX(-1)}

/* OUR EXPERTISE — prev/next chevrons swap direction (next = left in RTL) */
[dir="rtl"] .exparrow svg{transform:scaleX(-1)}

/* OUR EXPERTISE — the whole prev/next group moves to the LEFT edge.
   The base rule pins it right with `margin-left:auto`, which is PHYSICAL: an auto margin absorbs the free
   space on that side, so in RTL it still shoves the group right. Swap the auto margin to the other side. */
[dir="rtl"] .expfoot__arrows{margin-left:0;margin-right:auto}

/* OUR EXPERTISE — progress bar is pinned right and fills leftwards (width set in main.js moveFill()) */
[dir="rtl"] .exptrack__fill{left:auto;right:0;background:linear-gradient(90deg,var(--cta-a),var(--cta-b))}

/* FEATURED — «לכל הפרויקטים» arrow points LEFT (hover slide follows the mirrored axis) */
[dir="rtl"] .ework__all svg{transform:scaleX(-1)}
[dir="rtl"] .ework__all:hover svg{transform:scaleX(-1) translateX(3px)}

/* FEATURED cards — caption to the right; the baked-in corner shade mirrors with it, or the text lands on bare image */
[dir="rtl"] .pcard__body{left:auto;right:0;text-align:right}
[dir="rtl"] .pcard__shade{background:linear-gradient(to top,rgba(6,8,12,.85) 0%,rgba(6,8,12,.28) 40%,rgba(6,8,12,0) 68%),
            linear-gradient(to left,rgba(6,8,12,.5) 0%,rgba(6,8,12,0) 42%)}
[dir="rtl"] .pcard__view svg{transform:scaleX(-1)}
[dir="rtl"] .pcard:hover .pcard__view svg{transform:scaleX(-1) translateX(4px)}

/* PROCESS — the «›» step connector moves to the left edge. NO scaleX() here: «\203A» is a Bidi_Mirrored
   character, so the browser ALREADY draws it as «‹» in an RTL context — mirroring it again flips it back to «›».
   (Inline SVG icons are not bidi-mirrored, which is why they DO need the scaleX(-1) rules above.) */
[dir="rtl"] .procstep:not(:last-child) .procstep__label::after{right:auto;left:calc(10px - clamp(14px,1.5vw,24px))}

/* AI CHARACTERS — slide dots move to the left rail */
[dir="rtl"] .aihero__dots{right:auto;left:clamp(20px,2.4vw,46px)}

/* FAQ — number/question read from the right; the answer indents from the right too */
[dir="rtl"] .faqitem__head,[dir="rtl"] .faqitem__q{text-align:right}
[dir="rtl"] .faqitem__a{padding-left:clamp(24px,2.4vw,36px);
            padding-right:calc(clamp(24px,2.4vw,36px) + clamp(26px,2.4vw,38px) + clamp(18px,2.2vw,40px))}

@media (max-width:760px){
  [dir="rtl"] .aihero__dots{right:auto;left:14px}
  [dir="rtl"] .faqitem__a{padding-left:clamp(24px,2.4vw,36px);padding-right:calc(18px + 26px + 14px)}
}

/* ============ RTL (Hebrew) — 360° viewer + inline video players (client 2026-07-09) ============ */

/* Pannellum zoom +/− and fullscreen sit bottom-LEFT in LTR → bottom-RIGHT in RTL
   (covers the 3D-Tours page, the homepage panos and the fullscreen tour modal). */
[dir="rtl"] .ev-pano .pnlm-controls-container,
[dir="rtl"] .evvt-modal .pnlm-controls-container{left:auto;right:12px}

/* FILMS — duration badge sits bottom-RIGHT in LTR → bottom-LEFT in RTL */
[dir="rtl"] .film-card__dur{right:auto;left:12px}

/* FILMS + REELS — the live player's corner controls (mute · volume · enlarge) mirror to the left.
   The flex row reverses on its own under dir=rtl, so mute stays on the outer edge, just like in LTR. */
[dir="rtl"] .film-card__ctrls,
[dir="rtl"] .reel-card__ctrls{right:auto;left:10px}
[dir="rtl"] .film-card.is-big .film-card__ctrls,
[dir="rtl"] .reel-card.is-big .reel-card__ctrls{right:auto;left:14px}

/* Однословный заголовок услуги («3D-ПЛАНИРОВКИ») не должен рваться по дефису.
   Причина: при ширине окна ≳1700px .wrap упирается в свой max-width:1564px, а шрифт
   продолжает расти до потолка 80px → 50% контейнера = 742px, а заголовку нужно 756px.
   Класс ставит ev_srv_title_class(): только если в названии НЕТ пробела. Многословные
   («Реклама и продвижение») по-прежнему переносятся по пробелу. Мобильная раскладка
   (≤860px) не трогается — там перенос в 2 строки задан клиентом. */
@media (min-width:861px){
  .srv-hero__title--nowrap{white-space:nowrap;max-width:none}
}