/* ============================================================
   מפתחים, ניסור וקידוח בטון ביהלום
   פלטה נגזרת מהלוגו: אינדיגו עמוק אל ענבר
   ============================================================ */
:root {
  /* נדגם ישירות מהלוגו. אין כתום במותג: הגרדיאנט של הדיסק הוא אינדיגו→שזיף→מוב חם */
  --ink:        #14112B;
  --ink-2:      #1C1930;
  --ink-3:      #2C2440;
  --plum:       #3C2A3D;
  --plum-2:     #4A3340;
  --mauve:      #6B4A52;
  --mauve-lt:   #C6B2B8;
  --paper:      #FFFFFF;
  --paper-2:    #F4F2F5;
  --paper-3:    #E9E5EB;
  --line:       #E2DEE4;
  --text:       #14112B;
  --text-soft:  #565070;
  --cream:      #F3F1F4;

  --cut: linear-gradient(270deg, var(--ink) 0%, var(--plum) 55%, var(--mauve) 100%);

  --font: "Heebo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1180px;
  --r: 14px;

  /* aliases so css/a11y.css keeps working unchanged */
  --navy: var(--ink);
  --navy-deep: var(--ink-2);
  --gold: var(--mauve-lt);
  --off-white: var(--cream);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--paper);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.15; font-weight: 900; letter-spacing: -0.015em; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--dark { background: var(--ink); color: var(--cream); }
.section--soft { background: var(--paper-2); }
.num { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* focus */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--mauve-lt); outline-offset: 3px; border-radius: 4px;
}
.skip-link {
  position: absolute; top: -60px; inset-inline-start: 12px; z-index: 400;
  background: var(--ink); color: var(--cream); padding: 12px 20px;
  border-radius: 0 0 8px 8px; text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ---------- blade rule motif ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .14em;
  color: var(--plum);
}
.section--dark .eyebrow { color: var(--mauve-lt); }
.eyebrow::before { content: ""; width: 34px; height: 3px; border-radius: 2px; background: var(--cut); }

.head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.head h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); margin-block: .6rem .8rem; }
.head p { color: var(--text-soft); font-size: 1.06rem; }
.section--dark .head p { color: #A79FB2; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: 14px 30px; border: 2px solid transparent; border-radius: 999px;
  font: 700 1rem/1 var(--font); cursor: pointer; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s, color .18s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--gold, .btn--light { background: var(--cream); color: var(--ink); }
.btn--gold:hover, .btn--light:hover { background: #FFFFFF; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(20,17,43,.45); }
.btn--ink { background: var(--ink); color: var(--cream); }
.btn--ink:hover { background: var(--ink-3); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--cream); border-color: rgba(243,241,244,.42); }
.btn--ghost:hover { border-color: var(--mauve-lt); color: var(--mauve-lt); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ============ NAVBAR ============ */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 200;
  padding-block: 14px; transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.nav.is-scrolled { background: rgba(21,18,44,.96); backdrop-filter: blur(10px); box-shadow: 0 6px 26px rgba(21,18,44,.4); padding-block: 8px; }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nav__logo {
  display: inline-flex; align-items: center;
  background: var(--cream); border-radius: 10px;
  padding: 7px 13px; transition: padding .3s;
}
.nav__logo img { height: 34px; width: auto; transition: height .3s; }
/* כשההדר חוזר לגודל המלא, הלהב בלוגו מסתובב סיבוב אחד (js/main.js) */
.nav__mark { position: relative; display: block; line-height: 0; }
.nav__blade { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.nav__mark.is-spin img { visibility: hidden; }
.nav__mark.is-spin .nav__blade { opacity: 1; }
.nav.is-scrolled .nav__logo { padding: 5px 11px; }
.nav.is-scrolled .nav__logo img { height: 29px; }
.nav__links { display: flex; align-items: center; gap: 1.6rem; }
.nav__links a { color: var(--cream); text-decoration: none; font-weight: 500; font-size: .98rem; position: relative; }
.nav__links a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -6px; height: 2px;
  background: var(--mauve-lt); transform: scaleX(0); transition: transform .22s ease;
}
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta { display: inline-flex; gap: .5rem; align-items: center; }
.nav__phone {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--cream); text-decoration: none; font-weight: 700;
}
.nav__phone svg { width: 18px; height: 18px; }
.nav__phone:hover { color: var(--mauve-lt); }
.nav__burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__burger span { display: block; width: 26px; height: 2px; background: var(--cream); margin: 5px 0; transition: transform .25s, opacity .2s; }
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav { background: rgba(21,18,44,.94); backdrop-filter: blur(10px); }
  .nav__burger { display: block; }
  .nav__cta { display: none; }
  .nav__links {
    position: fixed; inset: 62px 0 auto 0; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--ink); padding: 1rem 1.25rem 2rem;
    border-top: 1px solid var(--ink-3);
    transform: translateY(-130%); transition: transform .3s ease; visibility: hidden;
  }
  .nav.is-open .nav__links { transform: translateY(0); visibility: visible; }
  .nav__links a { padding: 14px 4px; border-bottom: 1px solid rgba(243,241,244,.12); font-size: 1.05rem; }
}

.nav__social { display: inline-flex; gap: .4rem; }
.nav__social a {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; color: var(--cream);
  border: 1px solid rgba(243,241,244,.26); transition: background .2s, border-color .2s, color .2s;
}
.nav__social a:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.nav__social svg { width: 17px; height: 17px; }
@media (max-width: 900px) {
  .nav__social a { width: 34px; height: 34px; }
  .nav__social svg { width: 16px; height: 16px; }
}

/* בדסקטופ ההדר לבן והלוגו גדול, בצבעי המקור וללא פלטה סביבו */
@media (min-width: 901px) {
  .nav { background: var(--paper); box-shadow: 0 1px 0 var(--line); }
  .nav.is-scrolled { background: var(--paper); box-shadow: 0 6px 22px rgba(20,17,43,.12); }
  .nav__logo { background: none; padding: 0; }
  .nav__logo img { height: 52px; }
  .nav.is-scrolled .nav__logo { padding: 0; }
  .nav.is-scrolled .nav__logo img { height: 44px; }
  .nav__links a { color: var(--text); }
  .nav__phone { color: var(--text); }
  .nav__phone:hover { color: var(--plum); }
  .nav__social a { color: var(--text); border-color: var(--line); }
  .nav__social a:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }
  /* קרם על לבן נעלם, ולכן ה-CTA בהדר הופך לכהה */
  .nav .btn--light { background: var(--ink); color: var(--cream); }
  .nav .btn--light:hover { background: var(--ink-3); }
}

/* ============ MOBILE FLOATING ACTIONS ============ */
.fabs { display: none; }
@media (max-width: 900px) {
  .fabs {
    position: fixed; z-index: 190;
    /* צד ימין פיזי. כפתור הנגישות יושב בשמאל התחתון ואסור להתנגש איתו */
    right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
    display: grid; gap: .6rem;
  }
  .fab {
    width: 54px; height: 54px; border-radius: 50%;
    display: grid; place-items: center;
    box-shadow: 0 8px 22px rgba(20,17,43,.34);
    transition: transform .2s ease;
  }
  .fab svg { width: 25px; height: 25px; }
  .fab--call { background: var(--ink); color: var(--cream); }
  .fab--wa { background: #25D366; color: #fff; }
  .fab:active { transform: scale(.94); }
  /* כפתור הוואטסאפ של a11y.js כפול, ולכן מוסתר */
  .wa-fab { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .fab:active { transform: none; } }

/* ============ HERO ============ */
.hero {
  position: relative; overflow: hidden;
  /* vh ולא svh: svh משתנה עם סרגל הכתובת במובייל, וכל שינוי כזה מזיז את כל מה שמתחת */
  min-height: 100vh; display: grid; align-items: center;
  background: var(--ink); color: var(--cream);
}
.hero__media { position: absolute; inset: 0; }
.hero__still, .hero__vid { position: absolute; inset: 0; display: block; }
.hero__vid { opacity: 0; transition: opacity .7s ease; }
.hero__vid.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__vid { display: none; } }
/* אותו סרטון אנכי בכל המכשירים. בדסקטופ הוא נחתך לרוחב, ולכן מרימים את המסגרת אל הדיסק */
.hero__still img, .hero__vid { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  will-change: opacity; transform: translateZ(0);
  background:
    linear-gradient(to top, rgba(20,17,43,.74) 3%, rgba(20,17,43,.24) 52%, rgba(20,17,43,.2) 100%),
    linear-gradient(to left, rgba(20,17,43,.82) 4%, rgba(20,17,43,.24) 54%, transparent 100%);
}
/* padding-bottom כולל את גובה הסרט הנע, כדי שה-CTA לא יישב מתחתיו */
.hero__in { position: relative; padding-block: 8rem 9.5rem; }
.hero .eyebrow { margin-bottom: .7rem; color: var(--cream); }
.hero h1 { font-size: clamp(2.4rem, 6.4vw, 4.6rem); max-width: 14ch; }
.hero h1 em { font-style: normal; color: var(--mauve-lt); }
.hero__cta { margin-top: 2.2rem; }
/* סרט נע בתחתית ההירו: רץ לבד ונגרר ימינה ושמאלה (js/main.js).
   הגובה קבוע, ולכן השכפולים שה-JS מוסיף לא מזיזים כלום */
/* בלי פס רקע: הקוביות צפות ישר על התמונה. ה-padding נותן לצל מקום לפני ה-overflow */
.hero__band {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 1;
  overflow: hidden; direction: ltr; padding-block: 18px 26px;
}
.hero__track {
  display: flex; width: max-content; gap: .8rem; list-style: none;
  touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
  will-change: transform;
}
.hero__track.is-dragging { cursor: grabbing; }
/* קוביות מלאות בלי קו מתאר. בלי backdrop-filter על כל קובייה: 20 שכבות blur שזזות כבדות מדי בנייד */
.hero__track li {
  direction: rtl; flex: none;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 14px 22px; border-radius: 14px; white-space: nowrap;
  background: rgba(20,17,43,.72); border: 0;
  box-shadow: 0 10px 28px rgba(10,8,24,.38);
  font-size: 1rem; font-weight: 700; color: var(--cream);
}
.hero__track svg { width: 19px; height: 19px; color: var(--mauve-lt); flex: none; animation: bob 4s ease-in-out infinite; }
.hero__track li:nth-child(4n+2) svg { animation-delay: -1s; }
.hero__track li:nth-child(4n+3) svg { animation-delay: -2s; }
.hero__track li:nth-child(4n+4) svg { animation-delay: -3s; }
@keyframes bob { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .hero__track svg { animation: none; } }
/* במובייל התחתית של ההירו מתחת לכפתורים הצפים, אז הסרט עולה לשבת מתחת ל-CTA */
@media (max-width: 900px) {
  .hero { align-content: center; }
  .hero__in { padding-block: 7rem 2.2rem; }
  .hero__band { position: relative; bottom: auto; }
}

/* ============ PRELOADER ============ */
/* חתך מסור חוצה את הלוגו מימין לשמאל והלוגו מתגלה בעקבותיו.
   אין כאן שום סיבוב: דיסק עם שיניים זהות הוא כמעט סימטרי סביב הציר,
   ובשטח נראה קטן שום סיבוב לא נקרא. חיתוך כן נקרא, וזה גם מה שהעסק עושה. */
.preloader {
  /* מעל תפריט הנגישות (985) וכפתור הוואטסאפ, אחרת הם מציצים מעל מסך הטעינה */
  position: fixed; inset: 0; z-index: 990;
  display: grid; place-items: center;
  background: var(--paper-2);
  transition: opacity .45s ease, visibility .45s ease;
}
.preloader.is-done { opacity: 0; visibility: hidden; }

.pl-stage { position: relative; width: clamp(250px, 62vw, 430px); aspect-ratio: 900 / 273; }
/* אחרי החתך הלהב מתחיל להסתובב (js/blade.js). הקנבס גבוה מהלוגו כדי שהגיצים ייפלו מתחתיו */
.pl-blade { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 900 / 453; opacity: 0; pointer-events: none; }
.pl-stage.is-spin .pl-logo { visibility: hidden; }
.pl-stage.is-spin .pl-blade { opacity: 1; }

/* האנימציות מתחילות רק כשה-JS מוסיף is-ready, כלומר אחרי שהלוגו באמת צויר.
   בלי JavaScript הלוגו פשוט מוצג, ולכן ה-clip ההתחלתי תלוי ב-html.js-on. */
.pl-logo { width: 100%; height: auto; display: block; }
.js-on .pl-logo { clip-path: inset(0 0 0 100%); }
.preloader.is-ready .pl-logo { animation: pl-cut 1.05s cubic-bezier(.35,0,.25,1) .15s forwards; }

/* קו החיתוך ועננת האבק הם אלמנטים ברוחב מלא שהקו מצויר בקצה הימני שלהם,
   כך ש-translateX(-100%) מזיז אותם בדיוק ברוחב הלוגו. נע באותו משך ובאותו easing
   כמו ה-clip של הלוגו, ולכן הגילוי צמוד לקו. */
.pl-kerf, .pl-dust { position: absolute; inset-inline: 0; pointer-events: none; }

.pl-kerf { top: -14%; bottom: -14%; opacity: 0; }
.preloader.is-ready .pl-kerf { animation: pl-kerf-move 1.05s cubic-bezier(.35,0,.25,1) .15s forwards; }
.pl-kerf::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2px;
  background: linear-gradient(to bottom, transparent, var(--mauve-lt) 18%, #fff 50%, var(--mauve-lt) 82%, transparent);
  box-shadow: 0 0 10px 2px rgba(198,178,184,.7);
}

.pl-dust { top: 2%; bottom: 2%; opacity: 0; }
.preloader.is-ready .pl-dust { animation: pl-dust-move 1.5s ease-out .18s forwards; }
.pl-dust::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: -6%; width: 30%;
  background: radial-gradient(ellipse at 100% 50%, rgba(74,51,64,.3), transparent 72%);
  filter: blur(8px);
}

@keyframes pl-cut { to { clip-path: inset(0 0 0 0); } }
@keyframes pl-kerf-move {
  0%   { opacity: 0; transform: translateX(0); }
  10%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-100%); }
}
@keyframes pl-dust-move {
  0%   { opacity: 0;  transform: translateX(0); }
  18%  { opacity: .9; }
  100% { opacity: 0;  transform: translateX(-118%); }
}

@media (prefers-reduced-motion: reduce) {
  .pl-logo, .js-on .pl-logo { clip-path: none; animation: none; }
  .pl-kerf, .pl-dust { display: none; }
}

/* ============ SERVICES ============ */
.svc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2.4rem); }
.svc-col {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.3rem, 2.6vw, 2rem);
}
.svc-col__photo {
  position: relative; overflow: hidden; border-radius: 12px;
  aspect-ratio: 16 / 9; background: var(--ink-2); margin-bottom: 1.1rem;
}
.svc-col__photo picture { position: absolute; inset: 0; display: block; }
/* הצילומים אנכיים. בחיתוך ל-16:9 מרימים את המסגרת כדי לא לחתוך את הדיסק */
.svc-col__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; transition: transform .6s ease; }
.svc-col:hover .svc-col__photo img { transform: scale(1.04); }
.svc-col__title { font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
.svc-col__lead { color: var(--text-soft); margin-top: .45rem; font-size: .98rem; }

.tiles { list-style: none; margin-top: 1.3rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.tile {
  display: grid; justify-items: center; align-content: start; gap: .6rem;
  padding: 1.1rem .6rem 1rem; border-radius: 12px;
  background: var(--ink); color: var(--cream); text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
/* 14 אייקונים בספרייט אחד (7×2), משמש כמסכה כדי שהצבע יבוא מה-CSS */
.tile__ico {
  width: 76px; height: 76px; background: var(--mauve-lt);
  -webkit-mask: url("../assets/svc-icons-v2.webp") no-repeat;
  mask: url("../assets/svc-icons-v2.webp") no-repeat;
  -webkit-mask-size: 700% 200%; mask-size: 700% 200%;
  -webkit-mask-position: calc(var(--x) * 100% / 6) calc(var(--y) * 100%);
  mask-position: calc(var(--x) * 100% / 6) calc(var(--y) * 100%);
  transition: background-color .25s ease, transform .35s cubic-bezier(.3,1.4,.5,1);
}
.tile:hover .tile__ico { background: var(--cream); transform: scale(1.08) rotate(-2deg); }
.tile__ico--kamin {
  -webkit-mask-image: url("../assets/svc-icon-kamin-v1.webp");
  mask-image: url("../assets/svc-icon-kamin-v1.webp");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
}
.tile__label { font-size: .85rem; font-weight: 700; line-height: 1.3; }
.tile:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(20,17,43,.22); }

/* חשיפה מדורגת, נשענת על .rv הקיים */
.rv .tile { opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease; }
.rv.is-in .tile { opacity: 1; transform: none; transition-delay: calc(var(--i) * 55ms + 100ms); }
.rv.is-in .tile:hover { transform: translateY(-3px); }

.how {
  list-style: none; margin-top: clamp(1.4rem, 3vw, 2.2rem);
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
}
.how li {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 11px 20px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper);
  font-weight: 700; font-size: .97rem;
}
.how svg { width: 19px; height: 19px; color: var(--plum); flex: none; }

@media (max-width: 860px) {
  .svc-cols { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .rv .tile { opacity: 1; transform: none; transition: none; }
  .tile:hover { transform: none; }
  .svc-col:hover .svc-col__photo img { transform: none; }
}

/* ============ REEL ============ */
.reel {
  position: relative; overflow: hidden; background: var(--ink);
  height: clamp(300px, 38vw, 520px);
  display: grid; place-items: center;
}
.reel__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,17,43,.82), rgba(20,17,43,.34) 55%, rgba(20,17,43,.62));
  will-change: opacity; transform: translateZ(0);
}
.reel__in { position: relative; z-index: 1; text-align: center; }
.reel__line {
  color: var(--cream); font-weight: 900; letter-spacing: -.015em;
  font-size: clamp(1.3rem, 3.4vw, 2.2rem); line-height: 1.2;
  text-shadow: 0 2px 18px rgba(20,17,43,.7);
}
/* הקלדה: כל אות תופסת את מקומה מההתחלה ורק נחשפת, כך שהשורה לא זזה */
.reel__line .ch { opacity: 0; position: relative; }
.reel__line .ch.is-on { opacity: 1; }
.reel__line .ch.is-cur::after {
  content: ""; position: absolute; top: .08em; bottom: .02em; left: -.09em;
  width: .06em; background: var(--mauve-lt); animation: caret .8s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============ WORKS ============ */
.works { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; }
.works__item {
  position: relative; border-radius: 12px; overflow: hidden; background: var(--ink-2);
  aspect-ratio: 3 / 4; border: 0; padding: 0; cursor: zoom-in; display: block; width: 100%;
}
.works__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; -webkit-user-drag: none; user-select: none; }
.works__item:hover img { transform: scale(1.05); }
.works__item--wide { grid-column: span 2; aspect-ratio: 3 / 2; }
.works__cap {
  position: absolute; inset-inline: 0; bottom: 0; padding: 1.6rem .9rem .8rem;
  background: linear-gradient(to top, rgba(21,18,44,.9), transparent);
  color: var(--cream); font-size: .9rem; font-weight: 600; text-align: start;
}
@media (max-width: 900px) { .works { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .works__item:hover img { transform: none; } }

/* הסרטונים פותחים את הגלריה. בנייד הם קרוסלה עם גלילה אופקית */
.clips { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; margin-bottom: .85rem; }
.clip { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 9 / 16; background: var(--ink-2); }
.clip video { width: 100%; height: 100%; object-fit: cover; }
.clips-dots { display: none; }
.dots { display: flex; justify-content: center; gap: 8px; margin-top: .9rem; }
.dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background .25s, width .25s; }
.dots span.is-on { width: 22px; border-radius: 4px; background: var(--plum); }

@media (max-width: 900px) {
  .clips {
    display: flex; gap: .75rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: -1.25rem; padding-inline: 1.25rem; scroll-padding-inline: 1.25rem;
    margin-bottom: 0;
  }
  .clips::-webkit-scrollbar { display: none; }
  .clip { flex: 0 0 76%; scroll-snap-align: center; }
  .clips-dots { display: flex; justify-content: center; gap: 8px; margin-block: .9rem 1.4rem; }
  .clips-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background .25s, width .25s; }
  .clips-dots span.is-on { width: 22px; border-radius: 4px; background: var(--plum); }
}

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 350; display: none; background: rgba(12,10,26,.975); }
.lb.is-on { display: grid; place-items: center; }
.lb img { max-width: 92vw; max-height: 86vh; border-radius: 8px; }
.lb__x, .lb__nav {
  position: absolute; background: rgba(243,241,244,.12); border: 0; color: var(--cream);
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 1.5rem; line-height: 1;
}
.lb__x { top: 20px; inset-inline-end: 20px; }
.lb__nav { top: 50%; transform: translateY(-50%); }
.lb__prev { inset-inline-start: 18px; }
.lb__next { inset-inline-end: 18px; }
.lb__x:hover, .lb__nav:hover { background: var(--mauve-lt); color: var(--ink); }
body.lb-open .wa-fab { display: none; }

/* ============ ABOUT ============ */
/* בלי תמונה ארוכה: הוויזואל הוא טבעת הלהב של הלוגו, שמסתובבת לפי הגלילה (js/main.js).
   בנייד היא קטנה בפינה ליד הכותרת, בדסקטופ עמודה משלה */
/* סדר הקריאה בנייד: פתיחה, צילומים, ערכים, שלבים, סיום. בדסקטופ הצילומים הם עמודה שמאלית לגובה מלא */
.about { position: relative; min-height: 520px; display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: auto auto auto auto; gap: 0 clamp(1.5rem, 5vw, 4.5rem); align-items: start; align-content: center; }
.about > * { grid-column: 1; }
/* העמודה השמאלית פורשת על כל השורות. המסגרת מוחלטת בתוכה, אחרת גובה התמונה
   היה מותח את השורה הראשונה והטקסט היה נשפך מתחת לתמונה */
.about__visual { grid-column: 2; grid-row: 1 / -1; position: absolute; inset: 0; }
.about__frame { position: absolute; inset: 0; }
.about__frame, .about__slides, .about__slide, .about__slide picture { height: 100%; }
.about__slide img { height: 100%; aspect-ratio: auto; }
/* קרוסלת הצילומים של לידור: scroll-snap, נגררת באצבע, עם נקודות ומעבר אוטומטי (js/main.js) */
.about__slides {
  display: flex; gap: .6rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; border-radius: var(--r); direction: ltr;
}
.about__slides::-webkit-scrollbar { display: none; }
.about__slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; }
.about__slide picture { display: block; border-radius: var(--r); overflow: hidden; background: var(--paper-3); }
.about__slide img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
/* חצים בדסקטופ בלבד. בנייד גוררים באצבע */
.about__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: none; place-items: center;
  background: rgba(255,255,255,.92); color: var(--ink);
  box-shadow: 0 6px 18px rgba(20,17,43,.28);
  transition: background .2s ease, transform .2s ease;
}
.about__arrow svg { width: 22px; height: 22px; }
.about__arrow:hover { background: #fff; }
.about__arrow--prev { right: 10px; }
.about__arrow--next { left: 10px; }
@media (min-width: 901px) { .about__arrow { display: grid; } }
/* בדסקטופ המסגרת מוחלטת, ולכן הנקודות יושבות על התמונה */
@media (min-width: 861px) {
  .about__visual .dots { position: absolute; inset-inline: 0; bottom: 14px; z-index: 2; margin: 0; }
  .about__visual .dots span { background: rgba(243,241,244,.55); }
  .about__visual .dots span.is-on { background: #fff; }
}

.about h2 { font-size: clamp(1.7rem, 4.2vw, 2.6rem); margin-block: .6rem .9rem; }
.about__lead { color: var(--text-soft); font-size: 1.04rem; }

.about__lead + * { margin-top: 0; }
.about__values { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1.6rem; }
.about__values li { background: var(--paper); border-radius: 12px; padding: 1rem 1.1rem; }
.about__values svg { width: 24px; height: 24px; color: var(--plum); }
.about__values h3 { font-size: 1.02rem; margin-block: .45rem .15rem; }
.about__values p { font-size: .9rem; line-height: 1.45; color: var(--text-soft); }

.about__steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: 1.2rem; }
.about__steps li { counter-increment: step; position: relative; padding-top: 2.4rem; }
.about__steps li::before {
  content: counter(step); position: absolute; top: 0; inset-inline-start: 0;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--cream); font-weight: 800; font-size: .9rem;
}
.about__steps li:not(:last-child)::after {
  content: ""; position: absolute; top: 15px; inset-inline: 38px 0; height: 1px; background: var(--line);
}
.about__steps strong { display: block; font-size: .98rem; }
.about__steps span { display: block; font-size: .88rem; line-height: 1.45; color: var(--text-soft); }
.about__close { margin-top: 1.4rem; font-weight: 700; }

@media (max-width: 860px) {
  .about { display: block; min-height: 0; }
  .about__visual { margin-block: 1.5rem; position: static; inset: auto; }
  .about__frame { position: relative; inset: auto; height: auto; }
  .about__slides, .about__slide, .about__slide picture { height: auto; }
  /* בנייד ריבוע, כדי שהתמונה לא תיקח מסך שלם בגלילה */
  .about__slide img { height: auto; aspect-ratio: 1; }
  .about__steps { grid-template-columns: 1fr; gap: .9rem; }
  .about__steps li { padding-top: 0; padding-inline-start: 2.6rem; min-height: 30px; }
  .about__steps li:not(:last-child)::after { top: 34px; bottom: -.9rem; inset-inline: 15px auto; width: 1px; height: auto; }
}

/* ============ FAQ ============ */
.faq { max-width: 860px; }
.faq details { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); margin-bottom: .7rem; overflow: hidden; }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.15rem 1.25rem; font-weight: 700; font-size: 1.06rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--plum); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
  margin: 0 1.25rem 1.15rem; padding: 1rem 1.15rem;
  border-radius: 10px; background: var(--paper-2);
  border-inline-start: 3px solid var(--plum);
  color: var(--text-soft);
}

/* ============ CONTACT ============ */
.contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.8rem, 4vw, 3.4rem); }
.contact__info a { color: var(--cream); text-decoration: none; font-weight: 700; }
.contact__info a:hover { color: var(--mauve-lt); }
.contact__list { list-style: none; margin-top: 1.6rem; display: grid; gap: 1.1rem; }
.contact__list li { display: flex; gap: .85rem; align-items: flex-start; }
.contact__list svg { width: 22px; height: 22px; color: var(--mauve-lt); flex: none; margin-top: 3px; }
.contact__list span { display: block; font-size: .86rem; color: #A79FB2; }
.form { display: none; background: rgba(243,241,244,.05); border: 1px solid rgba(243,241,244,.16); border-radius: var(--r); padding: clamp(1.3rem, 3vw, 2rem); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.field { display: block; margin-bottom: .9rem; }
.field > span { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .35rem; color: var(--cream); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px; font: 400 1rem var(--font);
  background: rgba(21,18,44,.55); border: 1px solid rgba(243,241,244,.22); color: var(--cream);
}
.field textarea { min-height: 104px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #9C96B5; }
.field select option { color: var(--text); }
.form__note { font-size: .84rem; color: #A79FB2; margin-top: .8rem; }
.form__ok { display: none; margin-top: .9rem; padding: .8rem 1rem; border-radius: 10px; background: rgba(198,178,184,.16); border: 1px solid var(--mauve-lt); color: var(--cream); font-weight: 600; }
.form__ok.is-on { display: block; }
/* בלי JavaScript הטופס לא יכול לעבוד, ושליחה רגילה הייתה שולחת טלפון בשורת הכתובת. */
/* לכן הוא מוצג רק כשה-JS רץ, ובלעדיו מוצגים טלפון ווואטסאפ. */
.js-on .form { display: block; }
.form-fallback { border: 1px solid rgba(243,241,244,.16); border-radius: var(--r); padding: 1.4rem; color: #A79FB2; }
.form-fallback a { color: var(--mauve-lt); font-weight: 700; }
.js-on .form-fallback { display: none; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } .form__row { grid-template-columns: 1fr; } }

/* ============ FOOTER ============ */
.foot { background: #100E20; color: #A79FB2; padding-block: 3rem 5.5rem; font-size: .93rem; }
.foot__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.foot__logo {
  height: 40px; width: auto; margin-bottom: .9rem;
  background: var(--cream); border-radius: 10px; padding: 8px 13px;
  box-sizing: content-box;
}
.foot h3 { color: var(--cream); font-size: 1rem; margin-bottom: .7rem; }
.foot a { color: #A79FB2; text-decoration: none; }
.foot a:hover { color: var(--mauve-lt); }
.foot ul { list-style: none; display: grid; gap: .45rem; }
.foot__social { display: flex; gap: .6rem; margin-top: 1rem; }
.foot__social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(243,241,244,.2); display: grid; place-items: center; }
.foot__social a:hover { background: var(--mauve-lt); border-color: var(--mauve-lt); color: var(--ink); }
.foot__social svg { width: 19px; height: 19px; }
.foot__bar { margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(243,241,244,.12); display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; font-size: .86rem; }
/* בנייד: שירותים ויצירת קשר זה לצד זה, והקישורים המשפטיים מעל אזור הכפתורים הצפים */
@media (max-width: 780px) {
  .foot { padding-bottom: calc(10rem + env(safe-area-inset-bottom)); }
  .foot__top { grid-template-columns: 1fr 1fr; gap: 1.6rem 1.2rem; }
  .foot__top > div:first-child { grid-column: 1 / -1; }
  .foot__bar { flex-direction: column; align-items: flex-start; gap: .8rem; }
}

/* ============ reveal on scroll ============ */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ============ legal pages ============ */
.legal { padding-block: 8rem 4rem; }
.legal h1 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); margin-bottom: 1.2rem; }
.legal h2 { font-size: 1.25rem; margin-block: 1.8rem .6rem; }
.legal p, .legal li { color: var(--text-soft); }
.legal ul, .legal ol { margin-inline-start: 1.3rem; display: grid; gap: .4rem; margin-block: .6rem; }
.legal a { color: var(--plum); }

/* ============ 404 ============ */
.nf {
  min-height: 100svh; display: grid; place-content: center; justify-items: center;
  text-align: center; gap: 1rem; padding: 2rem 1.25rem; background: var(--paper-2);
}
.nf img { width: min(320px, 70vw); height: auto; }
.nf h1 { font-size: clamp(1.7rem, 5vw, 2.6rem); }
.nf p { color: var(--text-soft); max-width: 40ch; }
.nf__cta { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: .6rem; }

/* ============ TESTIMONIALS ============ */
/* כרטיס הודעה: רמז לצ׳אט שבו ההמלצות התקבלו, בגוונים של המותג.
   האווטאר חורג מהכרטיס כלפי מעלה, ולכן יש margin-top לכרטיס. */
.tsts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem 1.4rem; align-items: start; }
.tst {
  position: relative; margin: 2rem 0 0; background: var(--paper); border: 1px solid var(--line);
  border-radius: 20px; padding: 2.2rem 1.5rem 1.4rem;
  box-shadow: 0 12px 30px rgba(20,17,43,.07);
  display: flex; flex-direction: column; gap: .9rem;
}
.tst__av {
  position: absolute; top: -22px; inset-inline-start: 1.5rem;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; background: var(--cut); color: var(--cream);
  box-shadow: 0 6px 16px rgba(20,17,43,.28);
}
.tst__who { display: grid; gap: .1rem; }
.tst__who strong { font-size: 1rem; }
.tst__who span { font-size: .84rem; color: var(--text-soft); line-height: 1.4; }
.tst blockquote {
  margin: 0; background: var(--paper-2); border-radius: 16px 4px 16px 16px;
  padding: 1rem 1.1rem .7rem; font-size: 1rem; line-height: 1.65;
}
/* השעה וסימני הקריאה, כמו בהודעה שהתקבלה */
.tst__meta { display: flex; align-items: center; gap: .3rem; margin-top: .6rem; font-size: .75rem; color: var(--text-soft); direction: ltr; }
.tst__tick { width: 16px; height: 12px; color: var(--mauve); }
.tsts-wrap .dots { display: none; }

/* בנייד קרוסלה, בכיוון הקריאה: הכרטיס הראשון בימין */
@media (max-width: 860px) {
  .tsts {
    display: flex; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: -1.25rem; padding-inline: 1.25rem; scroll-padding-inline: 1.25rem;
    padding-block: .6rem 1.2rem;
  }
  .tsts::-webkit-scrollbar { display: none; }
  .tst { flex: 0 0 86%; scroll-snap-align: center; }
  .tsts-wrap .dots { display: flex; }
}