/* =========================================================
   עמית סיגאוי – דף בית
   כל המידות מבוססות VW דרך המשתנה --u:
     דסקטופ  (1200px ומעלה): --u = 100vw / 1920  (1 יחידה = 1px בפיגמה)
     טאבלט   (768–1199px):   --u = 100vw / 900
     מובייל  (עד 767px):     --u = 100vw / 430
   שימוש: calc(var(--u) * 32)  ==  "32px" בעיצוב, מתורגם ל-vw
   ========================================================= */

@font-face {
  font-family: "Polin";
  src: url("../fonts/Polin-Regular.woff2") format("woff2"), url("../fonts/Polin-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Polin";
  src: url("../fonts/Polin-Semibold.woff2") format("woff2"), url("../fonts/Polin-Semibold.woff") format("woff");
  font-weight: 500 700;
  font-display: swap;
}
@font-face {
  font-family: "Danidin";
  src: url("../fonts/Danidin-CondensedBlack.woff2") format("woff2"), url("../fonts/Danidin-CondensedBlack.woff") format("woff");
  font-weight: 900;
  font-display: swap;
}

:root {
  --u: calc(100vw / 430);
  /* יחידת טקסט: כמו --u, כפול הגדלת הטקסט מתפריט הנגישות */
  --ft: calc(var(--u) * var(--ts, 1));

  --green: #00856a;
  --green-dark: #004642;
  --mint: #0ee0ae;
  --yellow: #fbba18;
  --ink: #323232;
  --white: #ffffff;

  --f-body: "Polin", "Arial Hebrew", Arial, sans-serif;
  --f-display: "Danidin", "Polin", Arial, sans-serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: calc(var(--ft) * 17);
  line-height: 1.1;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
}
img, svg, iframe { display: block; max-width: none; }
h1, h2, p, ul { margin: 0; padding: 0; }
/* שבירת שורות מאוזנת – בלי מילה בודדת בסוף (יש גיבוי ב-JS) */
p, li, dd, h1, h2, h3, figcaption { text-wrap: pretty; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 600; }
button, input, textarea { font: inherit; color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; top: calc(var(--u) * -100); right: calc(var(--u) * 16); z-index: 100;
  background: var(--ink); color: var(--white); padding: calc(var(--u) * 10) calc(var(--u) * 16);
}
.skip-link:focus { top: calc(var(--u) * 16); }
:focus-visible { outline: calc(var(--u) * 3) solid var(--green); outline-offset: calc(var(--u) * 3); }

.page { position: relative; overflow: hidden; overflow: clip; } /* clip: לא ניתן לגלילה בטעות (פוקוס/קרוסלה) */
section, header.hero, footer { position: relative; }
.deco { position: absolute; pointer-events: none; user-select: none; }

.texture {
  background-color: #f2f2f2;
  background-image: url("../assets/texture.jpg");
  background-size: calc(var(--u) * 1920) auto;
  background-repeat: repeat;
}

/* section titles */
.title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: calc(var(--ft) * 52);
  line-height: 0.98;
  text-align: center;
}
.title--green { color: var(--green); }
.title--mint  { color: var(--mint); }
.title--dark  { color: var(--ink); }

/* =========================================================
   MOBILE (base)
   ========================================================= */

/* ---------- nav ---------- */
.nav {
  position: relative; z-index: 20;
  margin: calc(var(--u) * 12) calc(var(--u) * 12) 0;
  height: calc(var(--u) * 80);
  background: var(--white);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(var(--u) * 18);
}
.nav__logo img { width: calc(var(--u) * 58); height: auto; }
.nav__toggle {
  width: calc(var(--u) * 40); height: calc(var(--u) * 40);
  background: none; border: 0; padding: calc(var(--u) * 9) calc(var(--u) * 6); cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between;
}
.nav__toggle span { display: block; height: calc(var(--u) * 3); background: var(--ink); border-radius: calc(var(--u) * 2); transition: transform .25s, opacity .25s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(calc(var(--u) * 8.5)) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(calc(var(--u) * -8.5)) rotate(-45deg); }

.nav__menu {
  position: absolute; top: 100%; right: 0; left: 0;
  background: var(--white);
  padding: calc(var(--u) * 8) calc(var(--u) * 18) calc(var(--u) * 18);
  display: none; flex-direction: column; gap: calc(var(--u) * 4);
  box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(0,0,0,.08);
}
.nav__menu.is-open { display: flex; }
.nav__menu a { display: block; padding: calc(var(--u) * 10) 0; font-size: calc(var(--ft) * 20); }
.nav__star { display: none; }

/* ---------- hero ---------- */
.hero { display: flex; flex-direction: column; padding-top: calc(var(--u) * 92); }
.hero .nav { order: 0; }
.hero__content { order: 1; }
.hero__photo { order: 2; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__scribble { z-index: 2; mix-blend-mode: color-burn; width: calc(var(--u) * 190); top: calc(var(--u) * -30); left: calc(var(--u) * -75); }
.hero__dots-l   { z-index: 2; mix-blend-mode: multiply; width: calc(var(--u) * 170); bottom: calc(var(--u) * 60); left: 0; }
.hero__dots-r   { z-index: 2; mix-blend-mode: multiply; width: calc(var(--u) * 150); top: 0; right: 0; }
.hero__star     { z-index: 2; mix-blend-mode: multiply; width: calc(var(--u) * 120); bottom: calc(var(--u) * 150); right: calc(var(--u) * 0); }

.hero__content {
  position: relative; z-index: 5;
  padding: calc(var(--u) * 46) calc(var(--u) * 24) 0;
  text-align: center;
}
.hero__title {
  font-family: var(--f-display); font-weight: 900;
  font-size: calc(var(--ft) * 43); line-height: 1;
  color: var(--green);
}
.hero__text {
  margin-top: calc(var(--u) * 18);
  font-size: calc(var(--ft) * 19); line-height: 1.15;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: calc(var(--u) * 22);
  margin-top: calc(var(--u) * 24);
  height: calc(var(--u) * 54); padding: 0 calc(var(--u) * 26);
  background: var(--yellow); color: var(--ink);
  font-size: calc(var(--ft) * 20);
  transition: background-color .2s, transform .2s;
}

.btn__arrow { width: calc(var(--u) * 46); height: auto; transition: transform .2s; }
.btn:hover .btn__arrow { transform: translateX(calc(var(--u) * -6)); }

/* התמונות הן JPG + מסכת שקיפות (במקום PNG כבד) */
.hero__photo, .about__photo img {
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.hero__photo {
  position: relative; z-index: 3;
  width: calc(var(--u) * 280); height: auto;
  margin: calc(var(--u) * 24) auto 0;
  -webkit-mask-image: url("../assets/amit-hero-mask.png"); mask-image: url("../assets/amit-hero-mask.png");
}
.about__photo img { -webkit-mask-image: url("../assets/amit-about-mask.png"); mask-image: url("../assets/amit-about-mask.png"); }
.brush--hero {
  z-index: 4;
  width: calc(var(--u) * 1400); height: calc(var(--u) * 423);
  left: calc(var(--u) * 1000); bottom: calc(var(--u) * -305);
  transform-origin: 0 0;
  transform: matrix(-0.993, -0.119, -0.080, 0.997, 0, 0);
}

/* ---------- projects ---------- */
.projects { padding: calc(var(--u) * 30) calc(var(--u) * 20) calc(var(--u) * 120); }
.projects > * { position: relative; z-index: 5; }
.projects__hint { text-align: center; margin-top: calc(var(--u) * 10); font-size: calc(var(--ft) * 16); }
.grid {
  position: relative; z-index: 5;
  margin-top: calc(var(--u) * 24);
  display: grid; grid-template-columns: 1fr; gap: calc(var(--u) * 20);
}
.card__link { display: block; background: var(--ink); overflow: hidden; }
.card__link img { width: 100%; height: auto; aspect-ratio: 427 / 327; object-fit: cover; transition: transform .5s ease; }
.card__link:hover img { transform: scale(1.04); }
.card__label {
  display: flex; align-items: center; justify-content: center;
  height: calc(var(--u) * 54);
  background: var(--ink); color: var(--white);
  font-size: calc(var(--ft) * 18);
  position: relative;
}

/* ---------- process ---------- */
.process {
  background: var(--green-dark);
  padding: calc(var(--u) * 20) calc(var(--u) * 20) calc(var(--u) * 150);
}
.brush--green {
  z-index: 1;
  width: calc(var(--u) * 1400); height: calc(var(--u) * 423);
  left: calc(var(--u) * -460); top: calc(var(--u) * -170);
  transform-origin: 0 0;
  transform: matrix(0.993, -0.119, 0.080, 0.997, 0, 0);
}
.process__shadow-1, .process__shadow-2 { display: none; }
.process .title, .process__text, .video { position: relative; z-index: 3; }
.process__text { margin-top: calc(var(--u) * 14); text-align: center; color: var(--white); font-size: calc(var(--ft) * 19); line-height: 1.15; }
.video {
  margin: calc(var(--u) * 30) auto 0; width: 92%;
  aspect-ratio: 1320 / 723;
  background: #d9d9d9;
}
.video iframe { width: 100%; height: 100%; border: 0; }
.video__clip { z-index: 4; width: calc(var(--u) * 30); top: calc(var(--u) * -28); right: calc(var(--u) * -8); }

/* ---------- about ---------- */
.about { padding: calc(var(--u) * 40) calc(var(--u) * 22) 0; }
/* רקע הטקסטורה של "מי אני": אלמנט אחד רציף עם קצה קרוע (about-edge.svg) – בלי תפרים */
.about__bg {
  --d: calc(100vw / 1920);
  position: absolute; z-index: 2;
  top: calc(var(--d) * -600); right: 0; bottom: 0; left: 0;
  background-image: url("../assets/texture-tile.jpg");
  background-size: 100vw auto; background-repeat: repeat-y;
  -webkit-mask: url("../assets/about-edge.svg") 0 0 / 100% calc(var(--d) * 700) no-repeat,
                linear-gradient(#000, #000) 0 calc(var(--d) * 680) / 100% 100% no-repeat;
          mask: url("../assets/about-edge.svg") 0 0 / 100% calc(var(--d) * 700) no-repeat,
                linear-gradient(#000, #000) 0 calc(var(--d) * 680) / 100% 100% no-repeat;
}
.brush--yellow {
  z-index: 6;
  width: calc(var(--u) * 1400); height: calc(var(--u) * 378);
  left: calc(var(--u) * -500); bottom: calc(var(--u) * -250);
  transform-origin: 0 0;
  transform: matrix(0.994, -0.106, 0.090, 0.996, 0, 0);
}

.about__badge {
  position: relative; z-index: 5;
  width: calc(var(--u) * 230); height: calc(var(--u) * 110);
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.about__badge-bg {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--u) * 200); height: calc(var(--u) * 156);
  transform: translate(-50%, -50%) rotate(30.94deg);
}
.about__title {
  position: relative;
  font-family: var(--f-display); font-weight: 900;
  font-size: calc(var(--ft) * 56); line-height: 1; color: var(--yellow);
}
.about__text { position: relative; z-index: 5; margin-top: calc(var(--u) * 24); font-size: calc(var(--ft) * 18); line-height: 1.15; }
.about__text p + p { margin-top: calc(var(--u) * 16); }
.underlined { position: relative; display: inline-block; padding-bottom: calc(var(--u) * 8); }
.underlined::after {
  content: ""; position: absolute; right: 0; left: 0; bottom: 0; height: calc(var(--u) * 6);
  background: url("../assets/underline.svg") center / 100% 100% no-repeat;
}

.about__photo { position: relative; z-index: 3; width: calc(var(--u) * 260); margin: calc(var(--u) * 24) auto 0; }
.about__photo img { width: 100%; height: auto; }

.about__chats { position: relative; z-index: 7; display: grid; gap: calc(var(--u) * 12); margin-top: calc(var(--u) * -50); padding-bottom: calc(var(--u) * 30); }
.chat { position: relative; margin: 0; width: 100%; }
.chat img { display: block; width: 100%; height: auto; box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(0,0,0,.16); }
/* סלוטייפ */
.chat::before {
  content: ""; position: absolute; z-index: 2; top: calc(var(--u) * -14); left: 50%;
  width: calc(var(--u) * 96); height: calc(var(--u) * 30);
  translate: -50% 0; rotate: var(--tape, -5deg);
  background: rgba(238, 230, 205, .78);
  box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0,0,0,.12);
  clip-path: polygon(0 8%, 6% 0, 10% 12%, 15% 2%, 85% 0, 90% 10%, 94% 0, 100% 9%, 97% 50%, 100% 92%, 93% 100%, 88% 88%, 83% 100%, 15% 98%, 10% 88%, 5% 100%, 0 92%, 3% 50%);
}
.chat--1::before { --tape: -7deg; left: 40%; }
.chat--2::before { --tape: 6deg; width: calc(var(--u) * 70); }
.chat--3::before { --tape: -3deg; left: 60%; }
.chat--1 { width: 86%; rotate: -3deg; }
.chat--2 { width: 70%; margin-right: auto; margin-top: calc(var(--u) * 14); rotate: 3deg; }
.chat--3 { width: 86%; margin-right: auto; margin-top: calc(var(--u) * 14); rotate: 2deg; }

/* ---------- contact ---------- */
.contact {
  background: var(--yellow);
  padding: calc(var(--u) * 80) calc(var(--u) * 20) calc(var(--u) * 50);
  text-align: center;
}
.contact > * { position: relative; z-index: 7; }
.contact__kicker { font-weight: 600; font-size: calc(var(--ft) * 24); }
.contact .title { margin-top: calc(var(--u) * 8); font-size: calc(var(--ft) * 44); }
.contact__text { margin-top: calc(var(--u) * 12); font-size: calc(var(--ft) * 19); }

.form-wrap { position: relative; margin: calc(var(--u) * 40) auto 0; padding: calc(var(--u) * 30) calc(var(--u) * 14); }
.form-wrap__corner { position: absolute; width: 62%; height: auto; pointer-events: none; }
.form-wrap__corner--bottom { left: 0; bottom: 0; }
.form-wrap__corner--top { right: 0; top: 0; transform: rotate(180deg); }

.lead-form { position: relative; display: grid; grid-template-columns: 1fr; gap: calc(var(--u) * 10); text-align: right; }
.lead-form input, .lead-form textarea {
  width: 100%; border: 0; border-radius: 0; background: var(--white);
  font-size: calc(var(--ft) * 17); color: var(--ink);
  padding: 0 calc(var(--u) * 16); height: calc(var(--u) * 50);
  outline: none; -webkit-appearance: none; appearance: none;
  transition: box-shadow .2s;
}
.lead-form textarea { height: calc(var(--u) * 110); padding-top: calc(var(--u) * 12); resize: vertical; line-height: 1.2; }
.lead-form input::placeholder, .lead-form textarea::placeholder { color: var(--ink); opacity: 1; }
.lead-form input:focus, .lead-form textarea:focus { box-shadow: inset 0 0 0 calc(var(--u) * 2) var(--green); }
.lead-form .is-invalid { box-shadow: inset 0 0 0 calc(var(--u) * 2) #c62828; }
.lead-form__submit {
  height: calc(var(--u) * 58); border: 0; cursor: pointer;
  background: var(--ink); color: var(--white);
  font-size: calc(var(--ft) * 19); font-weight: 600;
  transition: background-color .2s;
}
.lead-form__submit:hover { background: #000; }
.lead-form__submit[disabled] { opacity: .6; cursor: wait; }
.lead-form__status:empty { display: none; }
.lead-form__status { text-align: center; font-size: calc(var(--ft) * 17); font-weight: 600; }
.lead-form__status.is-error { color: #a31515; }
.field--consent { display: flex; align-items: flex-start; gap: calc(var(--u) * 10); font-size: calc(var(--ft) * 15); line-height: 1.3; }
.lead-form .field--consent input {
  flex: none; width: calc(var(--u) * 22); height: calc(var(--u) * 22); padding: 0; margin: 0;
  -webkit-appearance: auto; appearance: auto; accent-color: var(--ink); cursor: pointer;
}
.field--consent label { cursor: pointer; }
.field--consent a { text-decoration: underline; text-underline-offset: .15em; font-weight: 600; }
.field--consent a:hover { color: var(--green-dark); }
.lead-form .field--consent input.is-invalid { outline: calc(var(--u) * 2) solid #c62828; outline-offset: calc(var(--u) * 2); box-shadow: none; }
@media (min-width: 768px) { .field--consent { font-size: calc(var(--ft) * 17); } }
@media (min-width: 1200px) { .field--consent { font-size: calc(var(--ft) * 20); gap: calc(var(--u) * 12); } .lead-form .field--consent input { width: calc(var(--u) * 24); height: calc(var(--u) * 24); margin-top: calc(var(--u) * 1); } }
.hp { position: absolute; right: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lead-form.is-sent .field, .lead-form.is-sent .lead-form__submit { display: none; }
.lead-form.is-sent .lead-form__status { font-size: calc(var(--ft) * 24); padding: calc(var(--u) * 40) 0; }

/* ---------- footer ---------- */
.footer {
  background: var(--ink); color: var(--white);
  padding: calc(var(--u) * 40) calc(var(--u) * 24) calc(var(--u) * 28);
  display: grid; justify-items: center; gap: calc(var(--u) * 28);
  text-align: center;
}
.footer__heading { font-weight: 600; font-size: calc(var(--ft) * 18); margin-bottom: calc(var(--u) * 12); }
.footer__nav ul { display: grid; grid-template-columns: auto auto; gap: calc(var(--u) * 10) calc(var(--u) * 32); font-size: calc(var(--ft) * 15); }
.footer__nav a:hover, .footer__social a:hover { text-decoration: underline; }
.footer__logo img { width: calc(var(--u) * 100); height: auto; filter: brightness(0) invert(1); }
.footer__social { display: grid; gap: calc(var(--u) * 12); justify-items: start; }
.footer__social a { display: flex; align-items: center; gap: calc(var(--u) * 12); font-size: calc(var(--ft) * 15); }
.footer__icon {
  flex: none; width: calc(var(--u) * 36); height: calc(var(--u) * 36); border-radius: 50%;
  background: var(--white); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.footer__icon svg { width: 58%; height: 58%; }
.footer__copy { font-size: calc(var(--ft) * 13); line-height: 1.4; }

/* =========================================================
   TABLET 768–1199
   ========================================================= */
@media (min-width: 768px) {
  :root { --u: calc(100vw / 1000); }
  body { font-size: calc(var(--ft) * 20); }
  .title { font-size: calc(var(--ft) * 64); }

  .nav { margin: calc(var(--u) * 16) calc(var(--u) * 30) 0; height: calc(var(--u) * 70); padding: 0 calc(var(--u) * 28); }
  .nav__logo img { width: calc(var(--u) * 64); }
  .nav__toggle { display: none; }
  .nav__menu {
    position: static; display: flex; flex-direction: row; align-items: center; gap: 0;
    flex: 1; justify-content: space-between; margin-right: calc(var(--u) * 60);
    padding: 0; box-shadow: none; background: none;
  }
  .nav__menu a { font-size: calc(var(--ft) * 19); padding: calc(var(--u) * 6) 0; }
  .nav__star { display: block; }
  .nav__star img { width: calc(var(--u) * 22); height: auto; }

  .hero { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: end; padding-top: calc(var(--u) * 86); padding-bottom: 0; }
  .hero .nav { grid-column: 1 / -1; grid-row: 1; }
  .hero__content { grid-column: 2; grid-row: 2; align-self: center; text-align: right; padding: calc(var(--u) * 40) calc(var(--u) * 10) calc(var(--u) * 80) calc(var(--u) * 30); }
  .hero__photo { grid-column: 1; grid-row: 2; width: calc(var(--u) * 340); margin: calc(var(--u) * 50) 0 0 calc(var(--u) * 10); justify-self: end; }
  .hero__title { font-size: calc(var(--ft) * 48); }
  .hero__text { font-size: calc(var(--ft) * 21); }
  .btn { height: calc(var(--u) * 56); font-size: calc(var(--ft) * 21); }
  .hero__scribble { width: calc(var(--u) * 240); left: calc(var(--u) * -80); top: calc(var(--u) * 30); }
  .hero__star { width: calc(var(--u) * 120); right: auto; left: calc(var(--u) * 6); bottom: calc(var(--u) * 20); }
  .hero__dots-l { width: calc(var(--u) * 200); left: auto; right: 0; bottom: calc(var(--u) * 60); }
  .brush--hero { width: calc(var(--u) * 2000); height: calc(var(--u) * 604); left: calc(var(--u) * 1450); bottom: calc(var(--u) * -440); }

  .projects { padding: calc(var(--u) * 30) calc(var(--u) * 40) calc(var(--u) * 230); }
  .projects__hint { font-size: calc(var(--ft) * 19); }
  .grid { grid-template-columns: repeat(2, 1fr); gap: calc(var(--u) * 26) calc(var(--u) * 20); margin-top: calc(var(--u) * 30); }
  .card__label { height: calc(var(--u) * 56); font-size: calc(var(--ft) * 19); }

  .process { padding: calc(var(--u) * 40) calc(var(--u) * 60) calc(var(--u) * 200); }
  .brush--green { width: calc(var(--u) * 2000); height: calc(var(--u) * 604); left: calc(var(--u) * -620); top: calc(var(--u) * -260); }
  .process__text { font-size: calc(var(--ft) * 22); }
  .video { margin: calc(var(--u) * 36) auto 0; width: 78%; }
  .video__clip { width: calc(var(--u) * 40); top: calc(var(--u) * -40); right: calc(var(--u) * -14); }

  .about { padding: calc(var(--u) * 30) calc(var(--u) * 50) 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 calc(var(--u) * 50); }
  .about__badge { grid-column: 1 / -1; width: calc(var(--u) * 260); height: calc(var(--u) * 130); }
  .about__badge-bg { width: calc(var(--u) * 230); height: calc(var(--u) * 180); }
  .about__title { font-size: calc(var(--ft) * 66); }
  .about__text { font-size: calc(var(--ft) * 20); }
  .about__text--a { grid-column: 1; }
  .about__text--b { grid-column: 2; }
  .about__photo { grid-column: 1 / -1; width: calc(var(--u) * 330); }
  .about__chats { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; align-items: start; margin-top: calc(var(--u) * -260); padding-bottom: calc(var(--u) * 40); }
  .chat--1 { grid-row: span 2; width: 100%; }
  .chat--2 { width: 80%; }
  .chat--3 { width: 100%; }
  .brush--yellow { width: calc(var(--u) * 2000); height: calc(var(--u) * 540); left: calc(var(--u) * -700); bottom: calc(var(--u) * -330); }

  .contact { padding: calc(var(--u) * 80) calc(var(--u) * 60) calc(var(--u) * 70); }
  .contact__kicker { font-size: calc(var(--ft) * 28); }
  .contact .title { font-size: calc(var(--ft) * 50); }
  .contact__text { font-size: calc(var(--ft) * 22); }
  .form-wrap { width: calc(var(--u) * 700); padding: calc(var(--u) * 50) calc(var(--u) * 60); }
  .lead-form { grid-template-columns: repeat(3, 1fr); }
  .field--msg, .field--consent, .lead-form__submit, .lead-form__status { grid-column: 1 / -1; }
  .lead-form input, .lead-form textarea { font-size: calc(var(--ft) * 19); height: calc(var(--u) * 54); }
  .lead-form textarea { height: calc(var(--u) * 110); }
  .lead-form__submit { height: calc(var(--u) * 62); font-size: calc(var(--ft) * 20); }

  .footer {
    grid-template-columns: 1fr auto 1fr; align-items: center; text-align: right;
    padding: calc(var(--u) * 50) calc(var(--u) * 50) calc(var(--u) * 30);
  }
  .footer__nav { justify-self: start; }
  .footer__social { justify-self: end; }
  .footer__copy { grid-column: 1 / -1; text-align: center; font-size: calc(var(--ft) * 14); }
  .footer__nav ul, .footer__social a { font-size: calc(var(--ft) * 16); }
}

/* =========================================================
   DESKTOP ≥1200 – העתק מדויק של הפיגמה (1920 יחידות = 100vw)
   ========================================================= */
@media (min-width: 1200px) {
  /* --k: מקדם הקטנה כללי (1 = גודל הפיגמה). התוכן ממורכז בעזרת --ox */
  :root { --k: .75; --u: calc(100vw / 1920 * var(--k)); --ox: calc((100vw - var(--u) * 1920) / 2); }
  body { font-size: calc(var(--ft) * 32); }
  .title { font-size: calc(var(--ft) * 80); }

  /* כל אזור בגובה קבוע כמו בפיגמה, התוכן ממוקם אבסולוטית */
  .hero     { display: block; height: calc(var(--u) * 964); padding: 0; }
  .projects { min-height: calc(var(--u) * 1500); padding: calc(var(--u) * 120) 0 calc(var(--u) * 330); }
  .process  { min-height: calc(var(--u) * 1130); padding: calc(var(--u) * 49) 0 calc(var(--u) * 300); }
  .about    { display: block; height: calc(var(--u) * 1180); padding: 0; }
  .contact  { min-height: calc(var(--u) * 1010); padding: calc(var(--u) * 32) 0 calc(var(--u) * 100); }
  .footer   { display: block; height: calc(var(--u) * 333); padding: 0; }

  /* הירו, אודות ופוטר ממוקמים אבסולוטית כמו בפיגמה; פרויקטים/תהליך/צור קשר בזרימה רגילה כדי שהגדלת טקסט לא תגרום לחפיפות */
  .hero > *, .about > *, .footer > * { position: absolute; margin: 0; }
  .hero__bg, .about__bg { position: absolute; }

  /* --- nav --- */
  .hero { padding-top: 0; }
  .about__bg { --d: var(--u); }
  .nav { position: absolute; left: calc(var(--ox) + var(--u) * 300); top: calc(var(--u) * 20); width: calc(var(--u) * 1320); height: calc(var(--u) * 99); padding: 0; display: block; }
  .nav__logo { position: absolute; left: calc(var(--u) * 1198); top: calc(var(--u) * 22); }
  .nav__logo img { width: calc(var(--u) * 82); }
  .nav__menu { position: absolute; right: auto; left: calc(var(--u) * 40); top: calc(var(--u) * 34); width: calc(var(--u) * 908); height: calc(var(--u) * 32); margin: 0; }
  .nav__menu a { font-size: calc(var(--ft) * 24); padding: 0; line-height: 1.1; }
  .nav__menu a:hover { color: var(--green); }
  .nav__star img { width: calc(var(--u) * 31.7); }

  /* --- hero --- */
  .hero__scribble { left: calc(var(--u) * -138); top: calc(var(--u) * 45); width: calc(var(--u) * 438); }
  .hero__dots-l   { left: 0; right: auto; top: calc(var(--u) * 575); bottom: auto; width: calc(var(--u) * 392); }
  .hero__dots-r   { left: auto; right: 0; top: 0; width: calc(var(--u) * 354); }
  .hero__star     { left: calc(var(--ox) + var(--u) * 1646.6); right: auto; top: calc(var(--u) * 521.8); bottom: auto; width: calc(var(--u) * 266.3); }
  .hero__photo    { left: calc(var(--ox) + var(--u) * 1110); top: calc(var(--u) * 200); width: calc(var(--u) * 770); }
  .brush--hero {
    left: calc(var(--ox) + var(--u) * 3014.155); top: calc(var(--u) * 470); bottom: auto;
    transform: matrix(-1, -0.035, 0, 1, 0, 0); /* כמעט אופקי – שלא יטפס למעלה בצד שמאל */
    width: calc(var(--u) * 3694.42); height: calc(var(--u) * 1116.63);
  }
  .hero__content { left: calc(var(--ox) + var(--u) * 198); top: calc(var(--u) * 275); width: calc(var(--u) * 882); padding: 0; text-align: right; }
  .hero__title { font-size: calc(var(--ft) * 92); line-height: 1; }
  .hero__text { width: calc(var(--u) * 680); margin: calc(var(--u) * 24) 0 0 auto; font-size: calc(var(--ft) * 32); line-height: 1.1; }
  .btn {
    display: flex; margin: calc(var(--u) * 32) 0 0 auto;
    width: fit-content; height: calc(var(--u) * 66); padding: 0 calc(var(--u) * 44);
    gap: calc(var(--u) * 40); font-size: calc(var(--ft) * 28);
  }
  .btn__arrow { width: calc(var(--u) * 62); }

  /* --- projects (top = 964) --- */

  .projects__hint { margin-top: calc(var(--u) * 26); font-size: calc(var(--ft) * 24); }
  .grid {
    margin: calc(var(--u) * 32) auto 0;
    width: calc(var(--u) * 1260);
    grid-template-columns: repeat(3, calc(var(--u) * 388));
    column-gap: calc(var(--u) * 48); row-gap: calc(var(--u) * 52);
  }
  .card__label { height: calc(var(--u) * 60); font-size: calc(var(--ft) * 20); }
  .projects .title { font-size: calc(var(--ft) * 68); }
  .projects__hint { font-size: calc(var(--ft) * 21) !important; }

  /* --- process (top = 2849) --- */
  .brush--green {
    left: calc(var(--ox) + var(--u) * -885); top: calc(var(--u) * -487.321);
    width: calc(var(--u) * 3694.42); height: calc(var(--u) * 1116.63);
  }
  .process__shadow-1 { display: block; z-index: 2; left: calc(var(--ox) + var(--u) * 1440); top: calc(var(--u) * -22); width: calc(var(--u) * 413.5); }
  .process__shadow-2 { display: block; z-index: 2; left: calc(var(--ox) + var(--u) * 66); top: calc(var(--u) * 704); width: calc(var(--u) * 549); }

  .process__text { margin-top: calc(var(--u) * 24); font-size: calc(var(--ft) * 32); }
  .video { margin: calc(var(--u) * 50) auto 0; width: calc(var(--u) * 1000); height: calc(var(--u) * 548); }
  .video__clip { left: calc(var(--u) * -38); right: auto; top: calc(var(--u) * -36); width: calc(var(--u) * 75.6); }

  /* --- about (top = 4152) --- */
  .brush--yellow {
    left: calc(var(--ox) + var(--u) * -1181); top: calc(var(--u) * 819.471); bottom: auto;
    width: calc(var(--u) * 3688.98); height: calc(var(--u) * 995.301);
  }
  .about__badge { left: calc(var(--ox) + var(--u) * 1430); top: calc(var(--u) * -110); width: calc(var(--u) * 353); height: calc(var(--u) * 278); }
  .about__badge-bg {
    left: calc(var(--u) * 96.7); top: 0;
    width: calc(var(--u) * 356.4); height: calc(var(--u) * 278.5);
    transform-origin: 0 0; transform: matrix(0.858, 0.514, -0.514, 0.858, 0, 0);
  }
  .about__badge { display: block; }
  .about__title { position: absolute; left: calc(var(--u) * 66); top: calc(var(--u) * 154); width: calc(var(--u) * 219); font-size: calc(var(--ft) * 82); text-align: center; }
  .about__text { width: calc(var(--u) * 470); font-size: calc(var(--ft) * 26); line-height: 1.15; }
  .about__text p + p { margin-top: calc(var(--u) * 28); }
  .about__text--a { left: calc(var(--ox) + var(--u) * 1260); top: calc(var(--u) * 230); }
  .about__text--b { left: calc(var(--ox) + var(--u) * 190); top: calc(var(--u) * 230); }
  .about__text--b p + p { margin-top: calc(var(--u) * 24); }
  .underlined { padding-bottom: calc(var(--u) * 12); }
  .underlined::after { height: calc(var(--u) * 9); }
  .about__photo {
    left: calc(var(--ox) + var(--u) * 715); top: calc(var(--u) * 330); width: calc(var(--u) * 490); height: calc(var(--u) * 640); overflow: hidden;
    rotate: -4deg;
    filter: drop-shadow(calc(var(--u) * 6) 0 0 #fff) drop-shadow(calc(var(--u) * -6) 0 0 #fff) drop-shadow(0 calc(var(--u) * 6) 0 #fff) drop-shadow(0 calc(var(--u) * -6) 0 #fff) drop-shadow(0 calc(var(--u) * 12) calc(var(--u) * 16) rgba(0,0,0,.2));
  }
  .about__chats { inset: 0; display: block; padding: 0; z-index: 7; pointer-events: none; }
  .chat { position: absolute; }
  .chat::before { top: calc(var(--u) * -20); width: calc(var(--u) * 130); height: calc(var(--u) * 40); }
  .chat--2::before { width: calc(var(--u) * 90); }
  .chat--1 { left: calc(var(--ox) + var(--u) * 170); top: calc(var(--u) * 470); width: calc(var(--u) * 430); rotate: -4deg; }
  .chat--2 { left: calc(var(--ox) + var(--u) * 1350); top: calc(var(--u) * 560); width: calc(var(--u) * 330); rotate: 3deg; }
  .chat--3 { left: calc(var(--ox) + var(--u) * 1290); top: calc(var(--u) * 690); width: calc(var(--u) * 420); rotate: 2.5deg; }

  /* --- contact (top = 5400) --- */
  .contact__kicker { font-size: calc(var(--ft) * 40); }
  .contact .title { margin-top: calc(var(--u) * 16); font-size: calc(var(--ft) * 80); }
  .contact__text { margin-top: calc(var(--u) * 23); font-size: calc(var(--ft) * 32); }
  .form-wrap { margin: calc(var(--u) * 50) auto 0; width: calc(var(--u) * 955); padding: calc(var(--u) * 69) calc(var(--u) * 102) calc(var(--u) * 92); }
  .form-wrap__corner { width: calc(var(--u) * 485); }
  .form-wrap__corner--top { right: calc(var(--u) * 2); top: 0; }
  .form-wrap__corner--bottom { left: calc(var(--u) * 2); bottom: 0; }
  .lead-form {
    position: relative;
    grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 20) calc(var(--u) * 10);
  }
  .lead-form input { height: calc(var(--u) * 56); font-size: calc(var(--ft) * 20); padding: 0 calc(var(--u) * 24); }
  .lead-form textarea { height: calc(var(--u) * 109); font-size: calc(var(--ft) * 20); padding: calc(var(--u) * 14) calc(var(--u) * 24); resize: none; }
  .lead-form__submit { height: calc(var(--u) * 76); font-size: calc(var(--ft) * 20); }
  .lead-form__status { position: absolute; top: 100%; left: 0; right: 0; margin-top: calc(var(--u) * 12); font-size: calc(var(--ft) * 20); }
  .lead-form.is-sent .lead-form__status { position: static; font-size: calc(var(--ft) * 32); padding: calc(var(--u) * 80) 0; }

  /* --- footer (top = 6353) --- */
  .footer__nav { left: calc(var(--ox) + var(--u) * 1290); top: calc(var(--u) * 80); width: calc(var(--u) * 330); text-align: right; }
  .footer__heading { font-size: calc(var(--ft) * 26); margin-bottom: calc(var(--u) * 16); }
  .footer__nav ul { grid-template-columns: auto auto; justify-content: space-between; gap: calc(var(--u) * 14) calc(var(--u) * 40); font-size: calc(var(--ft) * 21); }
  .footer__logo { left: calc(var(--ox) + var(--u) * 897); top: calc(var(--u) * 87); }
  .footer__logo img { width: calc(var(--u) * 140); }
  .footer__social { left: calc(var(--ox) + var(--u) * 300); top: calc(var(--u) * 80); justify-items: start; direction: ltr; gap: calc(var(--u) * 16); }
  .footer__social a { gap: calc(var(--u) * 14); font-size: calc(var(--ft) * 23); }
  .footer__social li + li a { font-size: calc(var(--ft) * 21); }
  .footer__icon { width: calc(var(--u) * 48); height: calc(var(--u) * 48); }
  .footer__copy { left: 0; right: 0; top: calc(var(--u) * 240); font-size: calc(var(--ft) * 20); }
}

/* =========================================================
   LAPTOP 1200–1599
   בלפטופ הקטנה של 0.75 הופכת את הטקסט לזעיר (10–13px).
   כאן הפריסה מוקטנת פחות (--k: .85, עדיין הכול ב-VW),
   והטקסט מקבל עוד הגדלה משלו (--lt).
   ========================================================= */
@media (min-width: 1200px) and (max-width: 1599px) {
  :root {
    --k: .85;
    --lt: 1.15;
    --ft: calc(var(--u) * var(--ts, 1) * var(--lt));
  }
  /* כותרות התצוגה גדולות ממילא – בלי ההגדלה הנוספת */
  .hero__title, .title, .about__title { --ft: calc(var(--u) * var(--ts, 1)); }
}

/* =========================================================
   GRUNGE + אפקטים
   ========================================================= */

/* שכבת גרעיניות גראנג'ית על כל האתר: כתמים כהים (נראים על לבן/צהוב)
   + כתמים בהירים (נראים על ירוק/אפור כהה). לא חוסמת לחיצות. */
.page::before, .page::after {
  content: ""; position: absolute; inset: 0; z-index: 40; pointer-events: none;
  background-size: calc(var(--u) * 600) auto;
}
.page::before { background-image: url("../assets/grain-dark.svg"); mix-blend-mode: multiply; opacity: .2; }
.page::after  { background-image: url("../assets/grain-light.svg"); mix-blend-mode: screen; opacity: .2; }

/* כוכב מסתובב לאט, שרבוט "נושם" */
@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: calc(var(--u) * 6) calc(var(--u) * -10); } }
@keyframes wobble { 0% { rotate: -9deg; scale: .8; } 60% { rotate: 4deg; scale: 1.06; } 100% { rotate: 0deg; scale: 1; } }
.hero__star { animation: spin 40s linear infinite; }
.hero__scribble { animation: float 7s ease-in-out infinite; }

/* כפתורים וכרטיסים – "מדבקה" עם צל קשיח */

/* הכפתור מתרחב שמאלה, החץ נוסע איתו, והכול נוטה קצת */

/* ריחוף: "צבע" כהה נשפך פנימה מימין לשמאל והטקסט הופך לצהוב – בלי תזוזה והטיה */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s cubic-bezier(.6,0,.2,1);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:hover, .btn:focus-visible { color: var(--yellow); background: var(--yellow); }
.btn { transition: color .3s .1s; }

.card__link { transition: transform .3s cubic-bezier(.2,.7,.2,1.2), box-shadow .3s; }
.card:nth-child(odd) .card__link:hover  { transform: translateY(calc(var(--u) * -8)) rotate(-1deg); }
.card:nth-child(even) .card__link:hover { transform: translateY(calc(var(--u) * -8)) rotate(1deg); }
.lead-form__submit { transition: transform .35s cubic-bezier(.3,1.6,.5,1), background-color .2s; }
.lead-form__submit:hover { transform: rotate(1.5deg) scale(1.02); background: var(--green-dark); }

/* חשיפה בגלילה (רק כש-JS פעיל) */
.js .reveal {
  opacity: 0; transform: translateY(calc(var(--u) * 50));
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--delay, 0s);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .card.reveal.is-visible .card__link { transition-delay: 0s; }

/* "מי אני?" נכנס בקפיצה */
.js .about__badge.is-visible { animation: wobble .9s cubic-bezier(.3,1.4,.5,1) both; }

/* הקו הטורקיז נמתח כשהוא נכנס למסך */
.js .underlined::after { transform: scaleX(0); transform-origin: right; transition: transform 1s cubic-bezier(.6,0,.2,1) .4s; }
.js .is-visible .underlined::after { transform: scaleX(1); }

/* ההמלצות זזות למעלה מעט מהר יותר מהגלילה (parallax) – ערך מחושב ב-JS */
.chat { translate: 0 var(--py, 0); will-change: translate; }

@media (prefers-reduced-motion: reduce) {
  .hero__star, .hero__scribble, .js .about__badge.is-visible { animation: none; }
  .js .reveal { opacity: 1; transform: none; }
  .js .underlined::after { transform: none; }
  .chat { translate: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* =========================================================
   כותרת קבועה, ריחוף א-סימטרי, סקייטבורד בפוטר
   ========================================================= */

/* ---------- כותרת קבועה ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; pointer-events: none; }
.site-header .nav { pointer-events: auto; transition: box-shadow .3s; }
/* במחשב: ההדר ממורכז בדיוק (בלי שולי הטאבלט, ובלי הסטה של פס הגלילה) */
@media (min-width: 1200px) {
  .site-header .nav { margin: 0; left: 50%; translate: -50% 0; }
}
.site-header.is-scrolled .nav { box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 24) rgba(0,0,0,.10); }
section[id], main section { scroll-margin-top: calc(var(--u) * 90); }

/* ---------- ריחוף א-סימטרי ---------- */
.nav__menu a { display: inline-block; transition: transform .3s cubic-bezier(.3,1.6,.5,1), color .2s; }
.nav__menu li:nth-child(4n+1) a:hover { transform: translateY(calc(var(--u) * -3)) rotate(-4deg); color: var(--green); }
.nav__menu li:nth-child(4n+3) a:hover { transform: translateY(calc(var(--u) * -3)) rotate(4deg); color: var(--green); }
.footer__nav a, .footer__social a { display: inline-flex; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.footer__nav li:nth-child(odd) a:hover  { transform: rotate(-3deg) translateY(calc(var(--u) * -2)); }
.footer__nav li:nth-child(even) a:hover { transform: rotate(3deg) translateY(calc(var(--u) * -2)); }
.footer__social a:hover { transform: rotate(-2deg) scale(1.04); }
.btn:hover .btn__arrow, .btn .btn__arrow { transform: none; }
/* הכרטיסים: רק הטיה, בלי צל קשיח */
.card__link:hover { box-shadow: none; }

/* ---------- הפרח הצהוב: מאחורי התמונה ---------- */
.hero__star { z-index: 2; mix-blend-mode: multiply; }

/* ---------- סקייטבורד שנוסע על הפוטר וקופץ ---------- */
.footer__skate {
  position: absolute; z-index: 5; top: calc(var(--u) * -21.8); left: 0;
  width: calc(var(--u) * 70); pointer-events: none;
  animation: skate-ride 15s linear infinite;
}
.footer__skate svg { width: 100%; height: auto; overflow: visible; animation: skate-ollie 3.75s ease-in-out infinite; transform-origin: 50% 80%; }
.sk-deck { fill: var(--ink); }
.sk-truck { fill: none; stroke: var(--ink); stroke-width: 3.4; stroke-linecap: round; }
.sk-wheel { animation: spin .5s linear infinite; }
.sk-wheel circle { fill: var(--ink); stroke: var(--ink); stroke-width: 2.5; }
.sk-wheel path { stroke: #6d6d6d; stroke-width: 2; }
@keyframes skate-ride { 0% { translate: -12vw 0; } 100% { translate: 112vw 0; } }
@keyframes skate-ollie {
  0%, 55%  { transform: translateY(0) rotate(0deg); }
  62%      { transform: translateY(calc(var(--u) * -6)) rotate(-14deg); }
  72%      { transform: translateY(calc(var(--u) * -42)) rotate(6deg); }
  82%      { transform: translateY(calc(var(--u) * -10)) rotate(2deg); }
  88%      { transform: translateY(0) rotate(0deg); }
  92%      { transform: translateY(calc(var(--u) * -4)) rotate(0deg); }
  100%     { transform: translateY(0) rotate(0deg); }
}

/* ---------- מובייל: תמונה במדבקה + ספלאש ---------- */
@media (max-width: 767px) {
  .brush--hero { width: calc(var(--u) * 900); height: calc(var(--u) * 272); left: calc(var(--u) * 640); bottom: calc(var(--u) * -170); }
  .hero__star { width: calc(var(--u) * 150); bottom: calc(var(--u) * 170); right: calc(var(--u) * 26); }
  .about__photo {
    width: calc(var(--u) * 210); height: calc(var(--u) * 250); overflow: hidden;
    margin-top: calc(var(--u) * 30); rotate: -6deg;
    filter: drop-shadow(calc(var(--u) * 4) 0 0 #fff) drop-shadow(calc(var(--u) * -4) 0 0 #fff) drop-shadow(0 calc(var(--u) * 4) 0 #fff) drop-shadow(0 calc(var(--u) * -4) 0 #fff) drop-shadow(0 calc(var(--u) * 8) calc(var(--u) * 10) rgba(0,0,0,.18));
  }
  .about__chats { margin-top: calc(var(--u) * 10); }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .hero__star { width: calc(var(--u) * 170); left: calc(var(--u) * 250); bottom: calc(var(--u) * 230); }
}

@media (min-width: 1200px) {
  .hero__star { left: calc(var(--ox) + var(--u) * 1600); top: calc(var(--u) * 320); width: calc(var(--u) * 310); }
  .footer__skate { top: calc(var(--u) * -34.1); width: calc(var(--u) * 110); }
}

@media (prefers-reduced-motion: reduce) {
  .footer__skate, .footer__skate svg, .sk-wheel { animation: none; }
  .footer__skate { translate: 70vw 0; }
}
html.a11y-still .footer__skate { translate: 70vw 0; }

/* =========================================================
   אינסטגרם + קולאז' "מי אני" במובייל
   ========================================================= */
.insta { background: var(--yellow); padding: calc(var(--u) * 70) calc(var(--u) * 20) calc(var(--u) * 20); text-align: center; }
.insta > * { position: relative; z-index: 7; }
.insta .title { font-size: calc(var(--ft) * 40); }
.insta__handle { display: inline-block; margin-top: calc(var(--u) * 6); font-weight: 600; font-size: calc(var(--ft) * 18); text-decoration: underline; text-underline-offset: .15em; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.insta__handle:hover { transform: rotate(-3deg); }
.insta__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 20); }
.insta__item a { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: rgba(0,0,0,.08); transition: transform .3s cubic-bezier(.2,.7,.2,1.2); }
.insta__item img { width: 100%; height: 100%; object-fit: cover; }
.insta__item:nth-child(odd) a:hover  { transform: translateY(calc(var(--u) * -6)) rotate(-2deg); }
.insta__item:nth-child(even) a:hover { transform: translateY(calc(var(--u) * -6)) rotate(2deg); }
.insta__play { position: absolute; top: 6%; left: 6%; color: #fff; font-size: calc(var(--ft) * 16); text-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 4) rgba(0,0,0,.6); }
/* כשהאינסטגרם מוצג – "קיצר.." לא צריך מרווח גדול מעליו */
.insta:not([hidden]) + .contact { padding-top: calc(var(--u) * 50); }

@media (min-width: 768px) {
  .insta { padding: calc(var(--u) * 80) calc(var(--u) * 60) calc(var(--u) * 10); }
  .insta .title { font-size: calc(var(--ft) * 46); }
  .insta__grid { grid-template-columns: repeat(6, 1fr); gap: calc(var(--u) * 12); }
}
@media (min-width: 1200px) {
  .insta { padding: calc(var(--u) * 140) 0 calc(var(--u) * 10); }
  .insta .title { font-size: calc(var(--ft) * 64); }
  .insta__handle { font-size: calc(var(--ft) * 24); }
  .insta__grid { width: calc(var(--u) * 1200); margin: calc(var(--u) * 34) auto 0; gap: calc(var(--u) * 18); }
  .insta:not([hidden]) + .contact { padding-top: calc(var(--u) * 80); }
}

@media (max-width: 767px) {
  /* "מי אני": תמונה גדולה במרכז, ההודעות מסביב */
  .about__photo { width: calc(var(--u) * 290); height: calc(var(--u) * 360); margin-top: calc(var(--u) * 90); }
  .about__chats { margin-top: calc(var(--u) * -110); padding-bottom: calc(var(--u) * 40); display: block; }
  .chat--2 { position: absolute; z-index: 2; top: calc(var(--u) * -290); left: calc(var(--u) * -6); width: 58%; margin: 0; rotate: -7deg; }
  .chat--1 { position: relative; z-index: 3; width: 72%; margin: 0 auto 0 calc(var(--u) * -8); rotate: -4deg; }
  .chat--3 { position: relative; z-index: 4; width: 72%; margin: calc(var(--u) * -70) calc(var(--u) * -8) 0 auto; rotate: 4deg; }
  .chat--3 { margin-right: calc(var(--u) * -8); margin-left: auto; }

  /* יצירת קשר במובייל – בלי התוחמים */
  .form-wrap__corner { display: none; }
  .form-wrap { padding: calc(var(--u) * 16) 0 0; }
}

/* =========================================================
   אינסטגרם על דף נייר קרוע עם סלוטייפ
   ========================================================= */
.insta__paper {
  position: relative; z-index: 7;
  margin: 0 auto; width: 100%;
  rotate: -1deg;
  filter: drop-shadow(0 calc(var(--u) * 6) calc(var(--u) * 12) rgba(0,0,0,.2));
}
.insta__sheet {
  background: #fff;
  padding: calc(var(--u) * 34) calc(var(--u) * 16) calc(var(--u) * 34);
  -webkit-mask: url("../assets/torn-top.svg") top / 100% calc(var(--u) * 14) no-repeat,
                linear-gradient(#000, #000) 0 calc(var(--u) * 13) / 100% calc(100% - var(--u) * 26) no-repeat,
                url("../assets/torn-bottom.svg") bottom / 100% calc(var(--u) * 14) no-repeat;
          mask: url("../assets/torn-top.svg") top / 100% calc(var(--u) * 14) no-repeat,
                linear-gradient(#000, #000) 0 calc(var(--u) * 13) / 100% calc(100% - var(--u) * 26) no-repeat,
                url("../assets/torn-bottom.svg") bottom / 100% calc(var(--u) * 14) no-repeat;
}
.insta__sheet .insta__grid { margin-top: calc(var(--u) * 18); }
/* שני פסי סלוטייפ בפינות */
.insta__paper::before, .insta__paper::after {
  content: ""; position: absolute; z-index: 2; top: calc(var(--u) * -12);
  width: calc(var(--u) * 100); height: calc(var(--u) * 30);
  background: rgba(238, 230, 205, .82);
  clip-path: polygon(0 8%, 6% 0, 10% 12%, 15% 2%, 85% 0, 90% 10%, 94% 0, 100% 9%, 97% 50%, 100% 92%, 93% 100%, 88% 88%, 83% 100%, 15% 98%, 10% 88%, 5% 100%, 0 92%, 3% 50%);
}
.insta__paper::before { right: calc(var(--u) * -16); rotate: 38deg; }
.insta__paper::after  { left: calc(var(--u) * -16); rotate: -38deg; }

@media (min-width: 768px) {
  .insta__sheet { padding: calc(var(--u) * 40) calc(var(--u) * 30); }
}
@media (min-width: 1200px) {
  .insta__paper { width: calc(var(--u) * 1320); }
  .insta__sheet { padding: calc(var(--u) * 50) calc(var(--u) * 60) calc(var(--u) * 56); }
  .insta__sheet .insta__grid { width: auto; margin: calc(var(--u) * 28) 0 0; }
  .insta__paper::before, .insta__paper::after { width: calc(var(--u) * 150); height: calc(var(--u) * 44); top: calc(var(--u) * -18); }
}

/* ההמלצות מעל שכבת הגרעיניות – נקיות */
.about__chats, .chat { z-index: 45; }

/* "מי אני" במובייל: המלצה ארוכה מעל התמונה, הקטנה מתחת, והשנייה הארוכה בסוף */
@media (max-width: 767px) {
  .about { display: flex; flex-direction: column; }
  .about__chats { display: contents; }
  .about__badge { order: 1; }
  .about__text--a { order: 2; }
  .about__text--b { order: 3; }
  .chat--1 { order: 4; }
  .about__photo { order: 5; }
  .chat--2 { order: 6; }
  .chat--3 { order: 7; }

  .chat { position: relative; top: auto; left: auto; }
  .chat--1 { align-self: flex-end; width: 80%; margin: calc(var(--u) * 34) 0 calc(var(--u) * -50); rotate: -3deg; z-index: 46; }
  .about__photo { align-self: center; margin: 0; }
  .chat--2 { align-self: flex-start; width: 62%; margin: calc(var(--u) * -46) 0 0; rotate: 4deg; z-index: 46; }
  .chat--3 { align-self: flex-end; width: 80%; margin: calc(var(--u) * 26) 0 calc(var(--u) * 40); rotate: 3deg; }
}
/* מונע קו דק (תת-פיקסל) בין האינסטגרם ליצירת קשר */
.insta { box-shadow: 0 calc(var(--u) * 4) 0 var(--yellow); }

/* =========================================================
   הדר כפס נייר קרוע + תיקונים
   ========================================================= */
.nav { background: transparent; isolation: isolate; }
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #fff;
  -webkit-mask: url("../assets/torn-top.svg") top / 100% calc(var(--u) * 10) no-repeat,
                linear-gradient(#000, #000) 0 calc(var(--u) * 9) / 100% calc(100% - var(--u) * 18) no-repeat,
                url("../assets/torn-bottom.svg") bottom / 100% calc(var(--u) * 10) no-repeat;
          mask: url("../assets/torn-top.svg") top / 100% calc(var(--u) * 10) no-repeat,
                linear-gradient(#000, #000) 0 calc(var(--u) * 9) / 100% calc(100% - var(--u) * 18) no-repeat,
                url("../assets/torn-bottom.svg") bottom / 100% calc(var(--u) * 10) no-repeat;
}
.site-header .nav { filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 5) rgba(0,0,0,.08)); transition: filter .3s; }
.site-header.is-scrolled .nav { box-shadow: none; filter: drop-shadow(0 calc(var(--u) * 6) calc(var(--u) * 10) rgba(0,0,0,.16)); }
@media (max-width: 767px) {
  .nav__menu {
    box-shadow: none; padding-bottom: calc(var(--u) * 26); top: calc(100% - var(--u) * 6);
    -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - var(--u) * 12) no-repeat, url("../assets/torn-bottom.svg") bottom / 100% calc(var(--u) * 12) no-repeat;
            mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - var(--u) * 12) no-repeat, url("../assets/torn-bottom.svg") bottom / 100% calc(var(--u) * 12) no-repeat;
  }
}

/* רקע ההירו מתמזג ללבן בתחתית – בלי קו ישר */
.hero__bg {
  -webkit-mask-image: linear-gradient(#000 78%, transparent 100%);
          mask-image: linear-gradient(#000 78%, transparent 100%);
}

/* =========================================================
   סרטוני המלצה (ריילס) – ממחזר את הסקשן הירוק של התהליך
   ========================================================= */
.reels {
  background: var(--green-dark);
  padding: calc(var(--u) * 30) 0 calc(var(--u) * 115);
  text-align: center;
}
/* המברשת הירוקה עולה מעל תחתית "מי אני", הצהובה יורדת אל האזור הצהוב שאחרי */
.reels .brush--green { z-index: 2; }
.reels .brush--yellow { z-index: 6; }
.reels .title, .reels__text, .reels__carousel { position: relative; z-index: 7; }
.reels .title { padding: 0 calc(var(--u) * 20); }
.reels__text { margin-top: calc(var(--u) * 14); padding: 0 calc(var(--u) * 20); color: var(--white); font-size: calc(var(--ft) * 19); line-height: 1.15; }

/* מסילה: גלילה אופקית עם הצמדה, הכרטיס הפעיל במרכז והשכנים מציצים */
.reels__track {
  display: flex; gap: calc(var(--u) * 18);
  margin-top: calc(var(--u) * 16);
  padding: calc(var(--u) * 30) calc(var(--u) * 85) calc(var(--u) * 24);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.reels__track::-webkit-scrollbar { display: none; }
.reel { flex: 0 0 calc(var(--u) * 260);scroll-snap-align: center; position: relative; transition: scale .4s cubic-bezier(.2,.7,.2,1), opacity .4s; }
.reel:nth-child(1) { rotate: -2.5deg; }
.reel:nth-child(2) { rotate: 2deg; }
.reel:nth-child(3) { rotate: -1.5deg; }
/* סלוטייפ כמו בהמלצות הוואטסאפ */
.reel::before {
  content: ""; position: absolute; z-index: 3; top: calc(var(--u) * -14); left: 50%;
  width: calc(var(--u) * 90); height: calc(var(--u) * 28);
  translate: -50% 0; rotate: var(--tape, -6deg);
  background: rgba(238, 230, 205, .85);
  box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0,0,0,.15);
  clip-path: polygon(0 8%, 6% 0, 10% 12%, 15% 2%, 85% 0, 90% 10%, 94% 0, 100% 9%, 97% 50%, 100% 92%, 93% 100%, 88% 88%, 83% 100%, 15% 98%, 10% 88%, 5% 100%, 0 92%, 3% 50%);
}
.reel:nth-child(2)::before { --tape: 5deg; }
.reel__frame {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  background: #0b5a55;
  border: calc(var(--u) * 6) solid var(--white);
  box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(0,0,0,.3);
}
.reel__frame video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.reel__empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 14);
  color: var(--mint); font-size: calc(var(--ft) * 16);
  background: repeating-linear-gradient(-45deg, rgba(14,224,174,.06) 0 calc(var(--u) * 10), transparent calc(var(--u) * 10) calc(var(--u) * 20));
}
.reel__play {
  width: calc(var(--u) * 64); height: calc(var(--u) * 64); border-radius: 50%;
  background: var(--yellow); position: relative;
  transition: transform .35s cubic-bezier(.3,1.6,.5,1);
}
.reel__play::after {
  content: ""; position: absolute; top: 50%; left: 54%; translate: -50% -50%;
  border-style: solid; border-color: transparent transparent transparent var(--ink);
  border-width: calc(var(--u) * 11) 0 calc(var(--u) * 11) calc(var(--u) * 18);
}
.reel:hover .reel__play { transform: scale(1.1) rotate(-6deg); }

/* כרטיסים שאינם במרכז קטנים ומעומעמים מעט (במובייל בלבד – JS מסמן is-active) */
.reels__track.is-ready .reel:not(.is-active):not(.reveal), .reels__track.is-ready .reel.is-visible:not(.is-active) { scale: .9; opacity: .65; }
.js .reel.reveal { transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), scale .4s cubic-bezier(.2,.7,.2,1); transition-delay: var(--delay, 0s), var(--delay, 0s), 0s; }

.reels__controls { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 18); margin-top: calc(var(--u) * 4); }
.reels__btn {
  width: calc(var(--u) * 46); height: calc(var(--u) * 46); border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--yellow); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s cubic-bezier(.3,1.6,.5,1), opacity .2s;
}
.reels__btn svg { width: 50%; height: 50%; }
.reels__btn:hover { transform: rotate(-8deg) scale(1.08); }
.reels__btn[disabled] { opacity: .35; cursor: default; transform: none; }
.reels__dots { display: flex; gap: calc(var(--u) * 8); }
.reels__dot {
  width: calc(var(--u) * 10); height: calc(var(--u) * 10); padding: 0; border: 0; border-radius: calc(var(--u) * 10); cursor: pointer;
  background: rgba(255,255,255,.4); transition: width .3s, background-color .3s;
}
.reels__dot[aria-current="true"] { width: calc(var(--u) * 28); background: var(--mint); }

@media (min-width: 768px) {
  .reels { padding: calc(var(--u) * 40) calc(var(--u) * 60) calc(var(--u) * 230); }
  .reels__text { font-size: calc(var(--ft) * 22); }
  /* בטאבלט ומעלה שלושת הסרטונים נכנסים בשורה – בלי קרוסלה */
  .reels__track { overflow: visible; justify-content: center; gap: calc(var(--u) * 40); padding: calc(var(--u) * 40) 0 0; margin-top: calc(var(--u) * 20); }
  .reel { flex: 0 0 calc(var(--u) * 250); }
  .reel:nth-child(2) { translate: 0 calc(var(--u) * 30); }
  .reels__track.is-ready .reel.is-visible:not(.is-active), .reels__track.is-ready .reel:not(.is-active):not(.reveal) { scale: none; opacity: 1; }
  .reels__controls, .reels__text .mobile-br { display: none; }
  .reel__empty { font-size: calc(var(--ft) * 18); }
  .reels .brush--yellow { bottom: calc(var(--u) * -330); }
}
@media (min-width: 1200px) {
  .reels { min-height: calc(var(--u) * 1180); padding: calc(var(--u) * 49) 0 calc(var(--u) * 360); }
  .reels__text { margin-top: calc(var(--u) * 24); font-size: calc(var(--ft) * 32); }
  .reels__track { gap: calc(var(--u) * 70); padding-top: calc(var(--u) * 60); }
  .reel { flex-basis: calc(var(--u) * 340); }
  .reel:nth-child(2) { translate: 0 calc(var(--u) * 50); }
  .reel::before { top: calc(var(--u) * -22); width: calc(var(--u) * 140); height: calc(var(--u) * 42); }
  .reel__frame { border-width: calc(var(--u) * 10); }
  .reel__play { width: calc(var(--u) * 96); height: calc(var(--u) * 96); }
  .reel__play::after { border-width: calc(var(--u) * 16) 0 calc(var(--u) * 16) calc(var(--u) * 26); }
  .reel__empty { font-size: calc(var(--ft) * 24); gap: calc(var(--u) * 20); }
  .reels .brush--yellow { top: auto; bottom: calc(var(--u) * -634); }
}
@media (prefers-reduced-motion: reduce) {
  .reels__track { scroll-behavior: auto; }
}

/* פרויקטים במובייל: טור אחד, כרטיסים גדולים מצד לצד (עם הפאדינג של הסקשן) */
@media (max-width: 767px) {
  .grid { grid-template-columns: 1fr; gap: calc(var(--u) * 22); }
  .card__label { height: auto; min-height: calc(var(--u) * 54); padding: calc(var(--u) * 10) calc(var(--u) * 12); font-size: calc(var(--ft) * 17); line-height: 1.2; text-align: center; }
  /* הסרטון של התהליך – ברוחב מלא */
  .video { width: 100%; }
}
/* =========================================================
   אינסטגרם בגודל כרטיסי הפרויקטים + כפתור מעקב, פוטר בשתי שורות
   ========================================================= */
/* אותם טורים ומרווחים כמו .grid של הפרויקטים */
.insta__sheet .insta__grid { grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 16) calc(var(--u) * 12); }
.insta__sheet { padding-right: calc(var(--u) * 14); padding-left: calc(var(--u) * 14); }

.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark::before { background: var(--yellow); }
.btn--dark:hover, .btn--dark:focus-visible { background: var(--ink); color: var(--ink); }
.insta__follow { margin-top: calc(var(--u) * 26); gap: calc(var(--u) * 12); }
.insta__follow-icon { width: calc(var(--u) * 26); height: calc(var(--u) * 26); flex: none; }

.footer__copy > span { display: block; }

@media (min-width: 768px) {
  .insta__sheet .insta__grid { grid-template-columns: repeat(2, 1fr); gap: calc(var(--u) * 26) calc(var(--u) * 20); }
  .insta__sheet { padding-right: calc(var(--u) * 40); padding-left: calc(var(--u) * 40); }
  .insta__follow { margin-top: calc(var(--u) * 34); }
}
@media (min-width: 1200px) {
  .insta__paper { width: calc(var(--u) * 1380); }
  .insta__sheet { padding: calc(var(--u) * 56) calc(var(--u) * 60) calc(var(--u) * 64); }
  .insta__sheet .insta__grid {
    width: calc(var(--u) * 1260); margin: calc(var(--u) * 32) auto 0;
    grid-template-columns: repeat(3, calc(var(--u) * 388));
    column-gap: calc(var(--u) * 48); row-gap: calc(var(--u) * 52);
  }
  .insta__follow { display: inline-flex; margin: calc(var(--u) * 48) 0 0; height: calc(var(--u) * 66); padding: 0 calc(var(--u) * 44); font-size: calc(var(--ft) * 26); }
  .insta__follow-icon { width: calc(var(--u) * 34); height: calc(var(--u) * 34); }
  .footer { height: calc(var(--u) * 350); }
  .footer__copy { top: calc(var(--u) * 236); line-height: 1.5; }
}

/* כותרת הפתיחה: כל שורה נשארת שלמה – בלי מירכאה שבורה לבד בשורה */
.hero__title .nw { white-space: nowrap; }
@media (max-width: 767.98px) { .hero__title { font-size: calc(var(--ft) * 38); } }

/* סרטוני ההמלצה: פרופורציה של הסרטונים עצמם, כדי שהכתוביות לא ייחתכו */
.reel__frame { aspect-ratio: 27 / 35; }
.reel__name { margin-top: calc(var(--u) * 12); text-align: center; color: var(--white); font-weight: 600; font-size: calc(var(--ft) * 15); }
@media (min-width: 768px) { .reel__name { font-size: calc(var(--ft) * 17); } }
@media (min-width: 1200px) { .reel__name { margin-top: calc(var(--u) * 18); font-size: calc(var(--ft) * 24); } }

/* כפתור "בואו נעבוד יחד" אחרי הסרטון ואחרי ההמלצות – ממורכז, מעל הקישוטים */
.cta-row { position: relative; z-index: 8; display: flex; justify-content: center; margin-top: calc(var(--u) * 30); }
.cta-row .btn { margin: 0; }
@media (min-width: 768px) { .cta-row { margin-top: calc(var(--u) * 50); } }
@media (min-width: 1200px) { .cta-row { margin-top: calc(var(--u) * 80); } }
/* 6 פרויקטים (2 שורות) – בלי גובה מינימלי של 3 שורות */
@media (min-width: 1200px) { .projects { min-height: 0; } }

/* =========================================================
   הירו – תיקונים
   ========================================================= */
/* הנקודות בפינה העליונה נמוגות לרקע, בלי קצה ישר (היה "פס כהה" מעל התמונה) */
.hero__dots-r {
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 100% 0, #000 40%, transparent 78%);
          mask-image: radial-gradient(ellipse 100% 100% at 100% 0, #000 40%, transparent 78%);
}
/* לפטופ: הכותרת והתמונה ממורכזות (הקומפוזיציה נטתה ימינה) */
@media (min-width: 1200px) and (max-width: 1599px) {
  .hero__content, .hero__photo, .hero__star { translate: calc(var(--u) * -120) 0; }
}

/* רקע ההירו: תמונת טקסטורה אחת שמכסה את כל הרוחב – בלי חזרה (שיצרה "תפר" בצד ימין) */
.hero__bg.texture { background-size: cover; background-position: center top; background-repeat: no-repeat; }
/* גם הנקודות בצד שמאל נמוגות לרקע, בלי מלבן אפור */
.hero__dots-l {
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 0 50%, #000 35%, transparent 75%);
          mask-image: radial-gradient(ellipse 100% 100% at 0 50%, #000 35%, transparent 75%);
}
/* =========================================================
   סבב 4 – סרטונים גדולים עם כפתור Play, פס המלצות, תוצאה בכרטיס
   ========================================================= */
/* כפתור Play גדול על כל סרטון – שיהיה ברור שזה סרטון */
.vwrap { position: relative; width: 100%; height: 100%; }
.vwrap video { display: block; }
.vplay { position: absolute; inset: 0; margin: auto; z-index: 3; width: calc(var(--u) * 74); height: calc(var(--u) * 74); border: 0; border-radius: 50%; background: rgba(255,255,255,.93); box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 20) rgba(0,0,0,.3); cursor: pointer; display: grid; place-items: center; transition: transform .3s cubic-bezier(.3,1.6,.5,1), opacity .25s; }
.vplay::after { content: ""; border-style: solid; border-width: calc(var(--u) * 13) 0 calc(var(--u) * 13) calc(var(--u) * 21); border-color: transparent transparent transparent var(--green); margin-left: calc(var(--u) * 6); }
.vplay:hover, .vplay:focus-visible { transform: scale(1.1) rotate(-6deg); }
.vwrap.is-playing .vplay { opacity: 0; pointer-events: none; }
@media (min-width: 1200px) { .vplay { width: calc(var(--u) * 120); height: calc(var(--u) * 120); } .vplay::after { border-width: calc(var(--u) * 21) 0 calc(var(--u) * 21) calc(var(--u) * 34); margin-left: calc(var(--u) * 10); } }

/* סרטוני ההמלצות בדף הבית – גדולים יותר במחשב ובלפטופ */
@media (min-width: 768px) { .reel { flex-basis: calc(var(--u) * 290); } }
@media (min-width: 1200px) { .reel { flex-basis: calc(var(--u) * 440); } .reels__track { gap: calc(var(--u) * 56); } }

/* מה הפרויקט פתר / השיג – מתחת לכל כרטיס */
.card__result { margin-top: calc(var(--u) * 8); text-align: center; font-weight: 600; font-size: calc(var(--ft) * 14); line-height: 1.25; }
@media (min-width: 768px) { .card__result { font-size: calc(var(--ft) * 16); } }
@media (min-width: 1200px) { .card__result { margin-top: calc(var(--u) * 14); font-size: calc(var(--ft) * 22); } }

/* פס המלצות שזז בין שורות הפרויקטים */
.tstrip { grid-column: 1 / -1; overflow: hidden; margin: calc(var(--u) * 6) calc(var(--u) * -20); padding: calc(var(--u) * 14) 0; list-style: none; }
.tstrip__track { display: flex; align-items: center; gap: calc(var(--u) * 18); width: max-content; animation: tstrip 70s linear infinite; }
.tstrip:hover .tstrip__track, .tstrip:focus-within .tstrip__track { animation-play-state: paused; }
.tstrip img { display: block; height: calc(var(--u) * 70); width: auto; max-width: none; background: #fff; padding: calc(var(--u) * 4); border-radius: calc(var(--u) * 8); box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(0,0,0,.12); rotate: -1.5deg; }
.tstrip img:nth-child(even) { rotate: 1.5deg; }
.tstrip img.is-tall { height: calc(var(--u) * 110); }
@keyframes tstrip { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (min-width: 768px) { .tstrip { margin-inline: calc(var(--u) * -40); } .tstrip img { height: calc(var(--u) * 80); } .tstrip img.is-tall { height: calc(var(--u) * 130); } }
@media (min-width: 1200px) { .tstrip { margin: calc(var(--u) * 20) 0; padding: calc(var(--u) * 24) 0; } .tstrip__track { gap: calc(var(--u) * 30); } .tstrip img { height: calc(var(--u) * 110); } .tstrip img.is-tall { height: calc(var(--u) * 190); } }
@media (prefers-reduced-motion: reduce) { .tstrip { overflow-x: auto; } .tstrip__track { animation: none; } }
html.a11y-still .tstrip { overflow-x: auto; } html.a11y-still .tstrip__track { animation: none !important; }

/* ציטוטים על התהליך בתוך פס ההמלצות */
.tstrip__q { flex: 0 0 auto; max-width: calc(var(--u) * 300); background: #fff; padding: calc(var(--u) * 10) calc(var(--u) * 14); border-radius: calc(var(--u) * 8); box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(0,0,0,.12); font-weight: 600; font-size: calc(var(--ft) * 14); line-height: 1.3; white-space: normal; rotate: 1deg; }
@media (min-width: 1200px) { .tstrip__q { max-width: calc(var(--u) * 460); font-size: calc(var(--ft) * 20); padding: calc(var(--u) * 16) calc(var(--u) * 22); } }