/* ============================================================
   איילת שורץ — דף נחיתה
   1. פונטים          2. טוקנים        3. בסיס
   4. עזרים/אנימציות  5. כפתורים       6. ניווט
   7-16. סקשנים       17. פוטר         18. רספונסיב
   ============================================================ */

/* ---------- 1. פונטים ---------- */
/* Leeor ו-Ploni הם פונטים מסחריים — יש להניח את קבצי ה-woff2
   בתיקיית assets/fonts/ (ראו assets/fonts/README.md).
   עד אז המערכת נופלת אוטומטית ל-Assistant ללא שבירת עיצוב. */
@font-face {
  font-family: "Leeor";
  src: url("../fonts/Leeor-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Leeor";
  src: url("../fonts/Leeor-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ploni";
  src: url("../fonts/Ploni-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: "Ploni";
  src: url("../fonts/Ploni-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}

/* ---------- 2. טוקנים ---------- */
:root {
  /* צבעים */
  --sea-deep:   #0A343D;
  --sea:        #0E5865;
  --turq:       #2BA79B;
  --turq-soft:  #7FCFC6;
  --aqua-mist:  #E2F1EE;
  --cream:      #FBF6EE;
  --cream-2:    #FFFDF8;
  --sand:       #E4A87F;
  --ink:        #12333A;
  --muted:      #5E7C82;
  --line:       rgba(14, 88, 101, .14);

  /* טיפוגרפיה */
  --f-body:    "Ploni", "Assistant", "Segoe UI", system-ui, sans-serif;
  --f-display: "Leeor", "Assistant", "Segoe UI", system-ui, sans-serif;

  /* גדלים נזילים */
  --fs-hero:  clamp(2.5rem, 8.5vw, 6rem);
  --fs-h2:    clamp(1.9rem, 4.4vw, 3.2rem);
  --fs-h3:    clamp(1.15rem, 2vw, 1.45rem);
  --fs-lead:  clamp(1.05rem, 1.9vw, 1.3rem);
  --fs-body:  clamp(1rem, 1.5vw, 1.09rem);

  /* מרווחים ומבנה */
  --wrap: 1180px;
  --pad-x: clamp(1.15rem, 5vw, 3.5rem);
  --sec-y: clamp(4.5rem, 10vw, 8.5rem);
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;

  --shadow-s: 0 4px 18px rgba(10, 52, 61, .07);
  --shadow-m: 0 14px 44px rgba(10, 52, 61, .11);
  --shadow-l: 0 26px 70px rgba(10, 52, 61, .16);

  --ease: cubic-bezier(.22, .68, .28, 1);
}

/* ---------- 3. בסיס ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--turq); color: #fff; }

:focus-visible {
  outline: 3px solid var(--turq);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: var(--sec-y); position: relative; }
.section--cream  { background: var(--cream); }
.section--white  { background: var(--cream-2); }
.section--mist   { background: var(--aqua-mist); }
.section--deep   { background: var(--sea-deep); color: #EAF6F4; }
.section--deep h2, .section--deep h3 { color: #fff; }

.skip-link {
  position: absolute; inset-inline-start: 50%; top: -60px;
  transform: translateX(50%);
  background: var(--sea-deep); color: #fff;
  padding: .7rem 1.3rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
  z-index: 999; transition: top .2s;
}
.skip-link:focus { top: 0; }

/* כותרת סקשן */
.sec-head { max-width: 720px; margin-bottom: clamp(2.2rem, 5vw, 3.6rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
/* letter-spacing נמוך בכוונה — עברית לא סובלת ריווח אותיות רחב */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .82rem; font-weight: 700;
  letter-spacing: .06em;
  color: var(--turq);
  margin-bottom: .85rem;
}
/* (הוסר קו הקישוט שלפני ה-eyebrow — הוא נקרא כמו מקף) */
.section--deep .eyebrow { color: var(--turq-soft); }
.sec-head h2 { font-size: var(--fs-h2); margin-bottom: .35em; }
.sec-head p { color: var(--muted); font-size: var(--fs-lead); }
.section--deep .sec-head p { color: #B9D8D6; }

/* ---------- 4. אנימציות scroll עדינות ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }
.reveal[data-delay="4"] { transition-delay: .36s; }
.reveal[data-delay="5"] { transition-delay: .45s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- 5. כפתורים ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem;
  padding: 1rem 2rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-weight: 700; font-size: 1.02rem;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  transition: transform .25s var(--ease), background-color .25s, color .25s,
              border-color .25s, box-shadow .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--turq); color: #fff;
  box-shadow: 0 10px 26px rgba(43, 167, 155, .34);
}
.btn--primary:hover { background: #1F8F84; box-shadow: 0 14px 34px rgba(43, 167, 155, .42); }

.btn--ghost {
  background: transparent; color: var(--sea-deep);
  border-color: rgba(14, 88, 101, .35);
}
.btn--ghost:hover { border-color: var(--sea-deep); background: rgba(14, 88, 101, .05); }

.btn--light { background: #fff; color: var(--sea-deep); }
.btn--light:hover { background: var(--aqua-mist); }

/* כפתור משני על רקע כהה/תמונה */
.btn--onDark {
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
}
.btn--onDark:hover { background: rgba(255, 255, 255, .2); border-color: #fff; }

.btn--lg { padding: 1.2rem 2.6rem; font-size: 1.12rem; }
.btn--block { width: 100%; }

/* ============================================================
   6. ניווט
   שני מצבים: שקוף מעל ה-Hero, ו"דבוק" עם רקע אחרי גלילה.
   מתחת ל-900px התפריט הופך לפאנל מלא עם מלכודת פוקוס.
   ============================================================ */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  padding-block: 1rem;
  transition: padding .4s var(--ease);
}
/* הרקע המטושטש יושב על פסאודו-אלמנט ולא על .nav עצמו:
   backdrop-filter על ההורה היה הופך אותו ל-containing block
   וכולא בתוכו את פאנל התפריט שהוא position: fixed. */
.nav::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(251, 246, 238, .88);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 1px 0 var(--line), 0 8px 30px rgba(10, 52, 61, .06);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.nav.is-stuck::before,
.nav.is-menu-open::before { opacity: 1; }
.nav.is-stuck { padding-block: .55rem; }

/* פס התקדמות גלילה */
.nav__progress {
  position: absolute; inset-inline-start: 0; bottom: 0;
  height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: right;
  background: linear-gradient(to left, var(--turq), var(--turq-soft));
  opacity: 0;
  transition: opacity .4s;
}
.nav.is-stuck .nav__progress { opacity: 1; }

.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* --- לוגו --- */
.nav__brand {
  display: flex; align-items: center; gap: .6rem;
  flex: none;
  border-radius: var(--r-sm);
}
.nav__brand-img {
  height: 56px; width: auto;
  transition: height .4s var(--ease);
}
.nav.is-stuck .nav__brand-img { height: 44px; }
/* אם קובץ הלוגו חסר — מוצג שם המותג כטקסט (main.js מוסיף את המחלקה) */
.nav__brand-text { display: none; }
.nav--nologo .nav__brand-img { display: none; }
.nav--nologo .nav__brand-text {
  display: block;
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.16rem; letter-spacing: -.01em;
  color: #fff; transition: color .4s;
}
.nav--nologo.is-stuck .nav__brand-text { color: var(--sea-deep); }

/* --- רשימת הקישורים (דסקטופ) --- */
.nav__nav { display: flex; align-items: center; }
.nav__list { display: flex; align-items: center; gap: .3rem; }
.nav__list a {
  display: block;
  position: relative;
  padding: .5rem .8rem;
  border-radius: var(--r-pill);
  font-size: .95rem; font-weight: 600;
  color: rgba(255, 255, 255, .88);
  transition: color .3s, background-color .3s;
}
.nav.is-stuck .nav__list a { color: var(--muted); }
.nav__list a::after {
  content: ""; position: absolute;
  inset-inline: .8rem; bottom: .28rem;
  height: 2px; border-radius: 2px;
  background: var(--turq-soft);
  transform: scaleX(0); transform-origin: right;
  transition: transform .32s var(--ease);
}
.nav.is-stuck .nav__list a::after { background: var(--turq); }
.nav__list a:hover { color: #fff; }
.nav.is-stuck .nav__list a:hover { color: var(--sea-deep); }
.nav__list a:hover::after { transform: scaleX(1); }

/* הסקשן שנמצא כרגע במסך */
.nav__list a[aria-current="true"] { color: #fff; }
.nav.is-stuck .nav__list a[aria-current="true"] { color: var(--sea-deep); }
.nav__list a[aria-current="true"]::after { transform: scaleX(1); }

.nav__panel-foot { display: none; }

/* --- פעולות --- */
.nav__actions { display: flex; align-items: center; gap: .6rem; flex: none; }
.nav__cta {
  opacity: 0; transform: translateY(-6px) scale(.96);
  pointer-events: none;
  padding: .66rem 1.35rem; font-size: .92rem;
  transition: opacity .35s var(--ease), transform .35s var(--ease), background-color .25s;
}
.nav.is-stuck .nav__cta { opacity: 1; transform: none; pointer-events: auto; }

/* --- כפתור ההמבורגר --- */
.nav__toggle {
  display: none;
  width: 46px; height: 46px;
  border: 1.5px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(8px);
  cursor: pointer;
  place-items: center;
  transition: background-color .3s, border-color .3s;
}
.nav.is-stuck .nav__toggle { border-color: var(--line); background: rgba(255, 255, 255, .6); }
.nav__burger { display: block; width: 20px; height: 14px; position: relative; }
.nav__burger i {
  position: absolute; inset-inline: 0;
  height: 2px; border-radius: 2px;
  background: #fff;
  transition: transform .35s var(--ease), opacity .2s, background-color .3s;
}
.nav.is-stuck .nav__burger i { background: var(--sea-deep); }
.nav__burger i:nth-child(1) { top: 0; }
.nav__burger i:nth-child(2) { top: 6px; }
.nav__burger i:nth-child(3) { top: 12px; }

.nav.is-menu-open .nav__burger i { background: var(--sea-deep); }
.nav.is-menu-open .nav__burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.is-menu-open .nav__burger i:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.nav.is-menu-open .nav__burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* רקע כהה מאחורי פאנל התפריט */
.nav__scrim {
  position: fixed; inset: 0; z-index: -2;
  background: rgba(10, 52, 61, .55);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.nav__scrim:not([hidden]) { opacity: 1; }

/* ============================================================
   7. HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-block: 8rem 5rem;
  overflow: hidden;
  background: var(--sea-deep);
}
/* --- שכבות הרקע ---
   התצלום לאורך (2:3). בדסקטופ הוא תופס את חצי המסך השמאלי ונמסך (mask)
   אל תוך גרדיאנט הים בצד ימין, שם יושב הטקסט. כך הדמות נשארת שלמה
   ולא נחתכת לפס צר, והטקסט מקבל ניגודיות מלאה.
   כאן משתמשים במאפיינים פיזיים (left/right) ולא לוגיים — זו החלטה
   ויזואלית קבועה ולא תלוית כיוון כתיבה. */
.hero {
  background:
    radial-gradient(120% 90% at 85% 0%, #17798A 0%, transparent 58%),
    radial-gradient(90% 70% at 15% 100%, #2BA79B 0%, transparent 55%),
    linear-gradient(160deg, #0A343D 0%, #0E5865 100%);
}
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__media picture { display: contents; }
.hero__img,
.hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  animation: heroIn 1.5s var(--ease) both;
}
@keyframes heroIn {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__img, .hero__media video { animation: none; }
}
.hero--nomedia .hero__media { display: none; }

@media (min-width: 901px) {
  .hero__media {
    inset: 0 auto 0 0;             /* צמוד לשמאל המסך */
    width: clamp(520px, 56%, 900px);
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 55%, rgba(0,0,0,.55) 78%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0%, #000 55%, rgba(0,0,0,.55) 78%, transparent 100%);
  }
}


/* גרייד: מאחד את התמונה עם פלטת הים ומעמיק את הכחולים */
.hero__grade {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(215deg, rgba(23, 121, 138, .45) 0%, rgba(10, 52, 61, .18) 45%, rgba(43, 167, 155, .35) 100%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* סקרים: מבטיח ניגודיות לטקסט בכל מצב */
.hero__scrim {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to right, transparent 0%, rgba(8, 40, 48, .28) 40%, rgba(8, 40, 48, .62) 68%, rgba(8, 40, 48, .78) 100%),
    linear-gradient(to top, rgba(8, 40, 48, .55) 0%, transparent 38%);
  pointer-events: none;
}

/* זוהר טורקיז עדין — נותן עומק ומרכך את המעבר */
.hero__glow {
  position: absolute; z-index: 2;
  left: 30%; bottom: -25%;
  width: 55%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(127, 207, 198, .26) 0%, transparent 62%);
  filter: blur(30px);
  pointer-events: none;
}
.hero__wave {
  position: absolute; inset-inline: 0; bottom: -1px; z-index: 2;
  width: 100%; height: clamp(50px, 8vw, 110px);
  color: var(--cream);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 4; width: 100%; }
.hero__content { max-width: 720px; color: #fff; }

/* תגית קטנה מעל הכותרת */
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 0 0 1.4rem;
  padding: .45rem 1.1rem .45rem .9rem;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: .84rem; font-weight: 600; letter-spacing: .04em;
  color: rgba(255, 255, 255, .92);
}
.hero__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--turq-soft);
  box-shadow: 0 0 0 0 rgba(127, 207, 198, .6);
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(127, 207, 198, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(127, 207, 198, 0); }
  100% { box-shadow: 0 0 0 0 rgba(127, 207, 198, 0); }
}
@media (prefers-reduced-motion: reduce) { .hero__dot { animation: none; } }

/* --- חתימת המותג (הסלוגן) — עיצוב אחד, חוזר בסקשן 1 ובסקשן 10 --- */
.signature {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  position: relative;
  display: inline-block;
  margin: 0 0 1.1rem;
  color: #fff;
  text-wrap: balance;
}
.signature::after {
  content: "";
  display: block;
  height: .32em;
  margin-top: .12em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'><path d='M2 14 C 45 3, 80 17, 125 9 S 215 2, 298 11' fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'><path d='M2 14 C 45 3, 80 17, 125 9 S 215 2, 298 11' fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
  color: var(--turq-soft);
  background: var(--turq-soft);
  opacity: .95;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 1.1s var(--ease) .35s;
}
.signature.is-in::after,
.reveal.is-in .signature::after,
.is-in > .signature::after { transform: scaleX(1); }

.signature--hero { font-size: var(--fs-hero); text-shadow: 0 4px 40px rgba(8, 40, 48, .5); }
/* בדסקטופ הקו נעצר לפני הדמות שבצד שמאל ולא נכנס לפנים.
   הוא בלוק בתוך אלמנט RTL, ולכן צמצום הרוחב מקצר אותו שמאלה. */
@media (min-width: 901px) {
  .signature--hero::after { width: 58%; }
}
.signature--outro { font-size: clamp(2rem, 5.5vw, 3.8rem); }

.hero__subtitle {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  font-weight: 700;
  color: var(--turq-soft);
  margin: 0 0 1rem;
  text-shadow: 0 2px 18px rgba(8, 40, 48, .5);
}
.hero__text {
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, .92);
  max-width: 46ch;
  margin-bottom: 2.4rem;
  text-shadow: 0 1px 14px rgba(8, 40, 48, .55);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }

/* --- Hero במובייל ---
   אותו רעיון כמו בדסקטופ, רק על הציר האנכי: הטקסט למעלה, ומתחתיו
   רצועת תצלום שנמסכת כלפי מעלה אל תוך גרדיאנט הים.

   התצלום כאן הוא פריט flex בזרימה רגילה ולא שכבה בגובה קבוע:
   הוא לוקח את כל הגובה שנשאר אחרי הטקסט, אבל לעולם לא פחות מ-min-height.
   כך הוא נשאר גלוי גם במסכים נמוכים (SE) וגם כשהדפדפן גוזל גובה. */
@media (max-width: 900px) {
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 100svh;
    padding: 4.9rem 0 0;
    text-align: start;
  }
  /* ב-DOM התצלום מופיע לפני הטקסט (הוא היה שכבת רקע מוחלטת);
     בזרימה הרגילה צריך להחזיר אותו למטה. */
  .hero__inner { flex: 0 0 auto; order: 1; }
  .hero__content { max-width: none; padding-bottom: 1.4rem; }

  .hero__media {
    order: 2;
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    width: 100%;
    min-height: 34svh;
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 62%, rgba(0,0,0,.5) 84%, transparent 100%);
            mask-image: linear-gradient(to top, #000 0%, #000 62%, rgba(0,0,0,.5) 84%, transparent 100%);
  }
  .hero__img {
    position: absolute; inset: 0;
    /* ערך גבוה יותר מעלה את הדמות ברצועה ומרחיק אותה מגל התחתית */
    object-position: 50% 58%;
  }

  .hero__grade { opacity: .75; }
  .hero__scrim {
    background: linear-gradient(to top, rgba(8, 40, 48, .4) 0%, rgba(8, 40, 48, .08) 30%, transparent 55%);
  }
  .hero__glow { left: -25%; bottom: 8%; width: 90%; }

  .hero__eyebrow { margin-bottom: 1.1rem; }
  .hero__more { display: none; }   /* המשך המשפט מוצג בדסקטופ בלבד */
  .hero__text { margin-bottom: 1.8rem; font-size: 1.02rem; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
}

/* מסכים נמוכים (iPhone SE וכל מכשיר מתחת ל-760px גובה):
   מצמצמים את בלוק הטקסט כדי שגם שם יישאר מקום אמיתי לתצלום. */
@media (max-width: 900px) and (max-height: 760px) {
  .hero { padding-top: 4.2rem; }
  .hero__eyebrow { display: none; }
  .signature--hero { font-size: 2.15rem; }
  .hero__subtitle { font-size: 1.02rem; margin-bottom: .6rem; }
  .hero__text { font-size: .97rem; margin-bottom: 1.2rem; }
  .hero__actions { gap: .6rem; }
  .hero__actions .btn--lg { padding: .95rem 1.8rem; font-size: 1rem; }
  .hero__content { padding-bottom: .8rem; }
  .hero__media { min-height: 30svh; }
}

/* ============================================================
   8. עליי
   ============================================================ */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* שתי תמונות מצילומי התדמית: ראשית גדולה, ומשנית קטנה שנשענת
   על הפינה התחתונה. המרווח מלמטה שמור מראש ב-padding-bottom כדי
   שהתמונה המשנית לא תיגע בטקסט שמתחת. */
.about__figure {
  position: relative;
  margin: 0;
  padding-bottom: 4.5rem;
  padding-inline-end: 3rem;
}
.about__photo {
  width: 100%;
  /* height חייב להיות auto: מאפייני width/height ב-HTML הם
     presentational hints שגוברים על aspect-ratio בלעדיו. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-l);
  background: linear-gradient(160deg, var(--turq-soft), var(--sea));
}
.about__photo--2 {
  position: absolute;
  inset-inline-end: 0; bottom: 0;
  width: 44%;
  border: 6px solid var(--cream);   /* מפריד בין שתי התמונות */
  box-shadow: var(--shadow-m);
}
.about__body h2 { font-size: var(--fs-h2); }

/* הדגשה בתוך פסקה — כהה יותר מהטקסט שסביבה */
.about__body .hl {
  color: var(--sea-deep);
  font-weight: 700;
}
.about__body p { color: var(--muted); }
.about__body p.lead {
  color: var(--ink);
  font-size: var(--fs-lead);
  font-weight: 600;
}
.about__body p.closing {
  color: var(--sea-deep);
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 2vw, 1.32rem);
  font-weight: 700;
  line-height: 1.5;
  border-inline-start: 3px solid var(--turq);
  padding-inline-start: 1.1rem;
  margin-top: 1.8rem;
}
/* השורה האחרונה עולה בגודל — סוגרת את הפסקה בהתרוממות */
.about__body .closing__big {
  display: block;
  margin-top: .35em;
  font-size: clamp(1.45rem, 2.9vw, 1.95rem);
  line-height: 1.3;
  color: var(--sea);
}

/* ============================================================
   תוצאות מהשטח — פופקורן
   התמונות קופצות פנימה ונעלמות במקומות אקראיים. המיקומים
   נבנים ב-main.js על גריד רופף עם רעש, ולא באקראי מוחלט:
   אקראי מלא יוצר ערימות וחורים, והגריד שומר על פיזור מלא.
   ============================================================ */
/* specificity גבוהה מ-.sec-head h2, אחרת הכלל הכללי גובר */
.results .sec-head h2.results__title { font-size: clamp(2.6rem, 7vw, 5.2rem); }

.pop {
  position: relative;
  height: clamp(460px, 56vw, 720px);
}
/* בנייד יש ארבע שורות במקום שלוש (ראו build ב-main.js),
   ולכן צריך גובה שיתן להן מקום */
@media (max-width: 560px) {
  .pop { height: clamp(540px, 145vw, 640px); }
}
.pop__slot {
  position: absolute;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--sea-deep);
  box-shadow: var(--shadow-m);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.35) rotate(var(--rot, 0deg));
  transition: opacity .26s var(--ease),
              transform .42s cubic-bezier(.18, 1.5, .38, 1);   /* קפיצה */
  will-change: transform, opacity;
}
.pop__slot.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(var(--rot, 0deg));
}
.pop__slot img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 100%;   /* מספר הצפיות יושב בתחתית התמונה */
}

/* הגודל נקבע לפי מספר הצפיות (ראו RESULT_TIERS ב-main.js).
   חייב לבוא אחרי .pop__slot — אותה specificity, והאחרון מנצח.
   גם הקטן ביותר נשאר מספיק גדול כדי שמספר הצפיות ייקרא. */
.pop__slot--lg { width: clamp(142px, 18vw, 232px); z-index: 3; }
.pop__slot--md { width: clamp(116px, 14.5vw, 186px); z-index: 2; }
.pop__slot--sm { width: clamp(94px, 11vw, 150px);  z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  /* בלי קפיצות: גריד רגיל ושקט עם התמונות הראשונות */
  .pop {
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: .7rem;
  }
  .pop__slot,
  .pop__slot--lg, .pop__slot--md, .pop__slot--sm {
    position: static;
    width: auto;
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   רצועת CTA בין הסקשנים
   הטקסט זוחל מימין לשמאל בלולאה אינסופית. הרשימה מרונדרת פעמיים
   וההחלקה היא בדיוק חצי מהרוחב, ולכן אין קפיצה בנקודת החיבור.
   כמו בגלריית הלוגואים, direction: ltr מעגן את המסילה לשמאל.
   ============================================================ */
.ribbon {
  display: block;
  position: relative;
  overflow: hidden;
  direction: ltr;   /* חובה: מסילה רחבה מהמכל נדחפת מחוץ למסך בהקשר RTL */
  padding-block: clamp(.85rem, 1.8vw, 1.15rem);
  background: linear-gradient(100deg, var(--sea-deep) 0%, var(--sea) 45%, var(--turq) 100%);
  color: #fff;
  border-block: 1px solid rgba(255, 255, 255, .1);
}
.ribbon__track {
  display: flex;
  direction: ltr;
  width: max-content;
  animation: ribbon 42s linear infinite;
}
@keyframes ribbon {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* מימין לשמאל */
}
.ribbon:hover .ribbon__track,
.ribbon:focus-visible .ribbon__track { animation-play-state: paused; }

.ribbon__item {
  display: inline-flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.2rem);
  padding-inline: clamp(.6rem, 1.5vw, 1.1rem);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.9vw, 1.3rem);
  white-space: nowrap;
}
.ribbon__star { color: var(--turq-soft); font-size: .8em; }
.ribbon:hover { color: #EAF6F4; }

@media (prefers-reduced-motion: reduce) {
  .ribbon { overflow-x: auto; }
  .ribbon__track { animation: none; }
}

/* ============================================================
   9. שירותים — מעטפת בצורת שמש
   ארבעת השירותים הם ארבעה קטעים של טבעת אחת שנסגרת. הקטע
   הפעיל מחליק סביב הטבעת ומדגיש את השירות שמסומן ברשימה.
   הטבעת דקורטיבית בלבד — כל התוכן קריא ברשימה שלצידה.
   ============================================================ */
.services {
  background:
    radial-gradient(90% 70% at 22% 38%, #12586A 0%, transparent 62%),
    radial-gradient(70% 60% at 85% 90%, #146B62 0%, transparent 58%),
    linear-gradient(165deg, #0A343D 0%, #0C4450 100%);
  color: #EAF6F4;
  overflow: hidden;
}
.services h2 { color: #fff; }
.services .eyebrow { color: var(--turq-soft); }
.services .sec-head p { color: #B9D8D6; }

.orbit {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: center;
}

/* ---------- הוויזואל ---------- */
.orbit__viz {
  position: relative;
  aspect-ratio: 1;
  max-width: 460px;
  width: 100%;
  margin-inline: auto;
}
.orbit__glow {
  position: absolute; inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228, 168, 127, .34) 0%, rgba(43, 167, 155, .16) 45%, transparent 70%);
  filter: blur(26px);
  animation: sunPulse 7s var(--ease) infinite;
}
@keyframes sunPulse {
  0%, 100% { transform: scale(1);    opacity: .85; }
  50%      { transform: scale(1.07); opacity: 1; }
}

.orbit__svg { position: relative; width: 100%; height: 100%; overflow: visible; }

/* קרני שמש */
.orbit__rays { transform-origin: 200px 200px; animation: rayTurn 90s linear infinite; }
.orbit__rays line {
  stroke: rgba(255, 255, 255, .3);
  stroke-width: 2; stroke-linecap: round;
}
@keyframes rayTurn { to { transform: rotate(360deg); } }

/* ארבעת הקטעים. r=140 ולכן ההיקף 879.6, וכל רבע הוא 219.9 */
.orbit__track,
.orbit__active {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
  transform: rotate(-90deg);          /* מתחילים מלמעלה */
  transform-origin: 200px 200px;
}
.orbit__track {
  stroke: rgba(255, 255, 255, .13);
  stroke-dasharray: 198 22;           /* 4 קטעים עם רווח ביניהם */
}
.orbit__active {
  stroke: url(#sunGrad);
  stroke-dasharray: 198 682;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 14px rgba(228, 168, 127, .55));
  transition: stroke-dashoffset .85s var(--ease);
}

/* רבעי הטבעת הלחיצים. שקופים לגמרי, ורק פס הקו לוכד עכבר. */
.orbit__seg {
  fill: none;
  stroke: rgba(255, 255, 255, 0);
  stroke-width: 44;
  stroke-linecap: butt;
  pointer-events: stroke;
  cursor: pointer;
  transform: rotate(-90deg);
  transform-origin: 200px 200px;
  transition: stroke .3s var(--ease);
}
.orbit__seg:hover { stroke: rgba(255, 255, 255, .08); }
.orbit__seg:focus-visible {
  stroke: rgba(127, 207, 198, .3);
  outline: none;
}

/* דיסקת השמש */
.orbit__disc {
  fill: rgba(255, 255, 255, .05);
  stroke: rgba(255, 255, 255, .1);
  stroke-width: 1.5;
}
.orbit__wave { fill: var(--turq); opacity: .5; }
.orbit__wave--1 { animation: waveDrift 9s ease-in-out infinite; }
.orbit__wave--2 { opacity: .3; animation: waveDrift 7s ease-in-out infinite reverse; }
@keyframes waveDrift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-44px); }
}

/* שם השירות הפעיל, במרכז */
.orbit__center {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  margin: 0;
  padding: 0 24%;
  text-align: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.32rem);
  color: #fff;
  line-height: 1.3;
  pointer-events: none;
  text-shadow: 0 2px 14px rgba(8, 40, 48, .6);
}
.orbit__center span {
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.orbit__center.is-swapping span { opacity: 0; transform: translateY(6px); }

/* ---------- הרשימה ---------- */
.orbit__list { display: grid; gap: .6rem; }
.svc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .045);
  transition: background-color .4s var(--ease), border-color .4s var(--ease),
              transform .4s var(--ease);
}
.svc__icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .08);
  color: var(--turq-soft);
  flex: none;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
.svc__icon svg { width: 23px; height: 23px; }
.svc h3 {
  font-size: var(--fs-h3);
  color: #fff;
  margin-bottom: .3em;
}
.svc p { color: #B9D8D6; font-size: .99rem; line-height: 1.7; margin: 0; }

.svc.is-active {
  background: rgba(43, 167, 155, .16);
  border-color: rgba(127, 207, 198, .5);
  transform: translateX(-6px);          /* נדחף פנימה, לכיוון הטבעת */
}
.svc.is-active .svc__icon { background: var(--turq); color: #fff; }

.services__note { color: #9FC4C2; }
.services__note strong { color: var(--turq-soft); }

@media (prefers-reduced-motion: reduce) {
  .orbit__glow, .orbit__rays, .orbit__wave { animation: none; }
  .orbit__active { transition: none; }
  .svc.is-active { transform: none; }
}

@media (max-width: 900px) {
  .orbit { grid-template-columns: 1fr; gap: 2rem; }
  .orbit__viz { max-width: 300px; order: -1; }
  .svc.is-active { transform: none; }
}

/* ---------- בטלפון: השמש עוברת אל מאחורי המילים ----------
   במקום לשבת מעל הרשימה ולדחוף אותה מטה, הטבעת נפרשת מאחוריה
   כרקע חי. היא ממשיכה להסתובב ולסמן את השירות הפעיל, אבל
   pointer-events: none מוודא שהרבעים הלחיצים שלה לא יחטפו
   לחיצות שמיועדות לכרטיסים שמעליה. */
@media (max-width: 760px) {
  .orbit { position: relative; gap: 0; }
  .orbit__viz {
    position: absolute;
    inset-inline: 0; top: 50%;
    transform: translateY(-50%);
    width: min(125%, 520px);
    max-width: none;
    margin-inline: auto;
    order: 0;
    opacity: .34;
    pointer-events: none;
    z-index: 0;
  }
  /* שם השירות במרכז הטבעת היה נופל באמצע הטקסט — הרשימה
     עצמה כבר מסמנת מה פעיל */
  .orbit__center { display: none; }

  .orbit__list { position: relative; z-index: 1; }
  /* רקע מעט אטום יותר, כדי שהטקסט יישאר חד מעל הטבעת */
  .svc { background: rgba(10, 52, 61, .55); backdrop-filter: blur(2px); }
  .svc.is-active { background: rgba(43, 167, 155, .28); }
}


/* ============================================================
   10. לוגואים
   ============================================================ */
/* לוגואי הלקוחות מגיעים ברקעים שונים (שקוף, לבן, צבעוני, תצלום).
   כרטיס לבן אחיד מנטרל את ההבדל, ו-max-height קבוע מאחד את
   הגודל האופטי גם כשקובצי המקור בפרופורציות שונות לגמרי. */
/* גלריה נעה: הרשימה מרונדרת פעמיים ב-main.js, והמסילה מחליקה
   בדיוק חצי מרוחבה. בנקודת הסיום העותק השני נמצא בדיוק במקום
   שבו העותק הראשון התחיל, ולכן הלולאה נראית אינסופית ורציפה. */
.marquee {
  position: relative;
  overflow: hidden;
  /* חובה: מסילה רחבה מהמכל מיושרת לימין בהקשר RTL, וכל התוכן
     נדחף אל מחוץ למסך שמאלה. ltr מעגן אותה לשמאל, ומכאן
     חישוב התנועה פיזי ופשוט. ללוגואים אין סדר קריאה. */
  direction: ltr;
  /* דהייה בקצוות כדי שהלוגואים ייכנסו ויצאו ולא ייחתכו */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.marquee__track {
  display: flex;
  direction: ltr;            /* ללוגואים אין סדר קריאה, וכך חישוב התנועה פיזי ופשוט */
  width: max-content;
  gap: clamp(.7rem, 1.6vw, 1.1rem);
  align-items: stretch;
  animation: marquee 55s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(-50%); }   /* משמאל לימין */
  to   { transform: translateX(0); }
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none; transform: none; }
}

.logo-item {
  flex: 0 0 auto;
  width: 172px;
  display: grid; place-items: center;
  padding: 1.1rem 1rem;
  min-height: 104px;
  background: #fff;
  border: 1px solid rgba(14, 88, 101, .08);
  border-radius: var(--r-md);
  filter: grayscale(1);
  opacity: .72;
  transition: filter .35s, opacity .35s, transform .35s var(--ease), box-shadow .35s var(--ease);
}
.logo-item:hover {
  filter: grayscale(0); opacity: 1;
  transform: translateY(-4px);
  box-shadow: var(--shadow-m);
}
.logo-item img {
  max-height: 56px; max-width: 100%;
  width: auto; object-fit: contain;
}
.logo-item--featured {
  /* DARA — רחבה יותר ובצבע מלא, כדי שתבלוט גם בתוך תנועה */
  width: 240px;
  filter: none;
  opacity: 1;
  border-color: rgba(14, 88, 101, .16);
}
.logo-item--featured img { max-height: 72px; }
.logo-item--featured .logo-ph {
  font-size: 1.5rem; letter-spacing: .12em;
  max-width: 280px; margin-inline: auto;
}

/* placeholder ללוגו חסר */
.logo-ph {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .06em;
  color: var(--sea);
  border: 1.5px dashed rgba(14, 88, 101, .3);
  border-radius: var(--r-sm);
  padding: .8rem 1.1rem;
  text-align: center;
  width: 100%;
}

/* ============================================================
   11. תיק עבודות
   ============================================================ */
/* בלי ה-eyebrow שהיה כאן, הכותרת צמודה יותר לסינון */
#work .sec-head { margin-bottom: clamp(1.3rem, 2.6vw, 2rem); }

.filters {
  display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: center;
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.filter {
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  padding: .55rem 1.25rem;
  font-size: .94rem; font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s;
}
.filter:hover { border-color: var(--turq); color: var(--sea-deep); }
.filter.is-active { background: var(--sea-deep); border-color: var(--sea-deep); color: #fff; }

.work__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.work-card {
  position: relative;
  border: 0; padding: 0;
  background: var(--sea-deep);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  text-align: start;
  aspect-ratio: 9 / 16;      /* פורמט רילס */
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.work-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-l); }
.work-card.is-hidden { display: none; }
.work-card__media,
.work-card__media video,
.work-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.work-card__media--empty {
  background:
    radial-gradient(90% 60% at 30% 20%, rgba(127, 207, 198, .45) 0%, transparent 60%),
    linear-gradient(200deg, #0E5865, #0A343D);
}
.work-card__shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 52, 61, .88) 0%, rgba(10, 52, 61, .25) 45%, rgba(10, 52, 61, .05) 100%);
  transition: background .4s;
}
.work-card__info {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 1.15rem 1.2rem;
  color: #fff;
}
.work-card__client { font-size: .8rem; color: var(--turq-soft); font-weight: 700; letter-spacing: .04em; }
.work-card__title { font-family: var(--f-display); font-weight: 700; font-size: 1.12rem; margin: .15rem 0 0; line-height: 1.3; }
.work-card__play {
  position: absolute; inset-inline-end: 1rem; top: 1rem;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
  color: #fff;
  transition: background-color .3s, transform .3s var(--ease);
}
.work-card:hover .work-card__play { background: var(--turq); transform: scale(1.08); }
.work-card__play svg { width: 16px; height: 16px; }

/* --- מודאל פרויקט --- */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  padding: clamp(.8rem, 3vw, 2rem);
}
.modal.is-open { display: flex; }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 52, 61, .72);
  backdrop-filter: blur(6px);
  animation: fade .3s var(--ease);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
/* המודאל מציג סרטונים בלבד. הפאנל שקוף ומתכווץ בדיוק לגודל
   הנגן, כך שהסרטון "צף" מעל הרקע המטושטש במקום לשבת בתוך
   כרטיס קרם עם עמודת טקסט לצידו. */
.modal__panel {
  position: relative;
  width: auto;
  max-width: 100%;
  max-height: 92svh;
  background: transparent;
  box-shadow: none;
  animation: pop .38s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.modal__close {
  position: absolute; inset-inline-start: .9rem; top: .9rem;
  z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .9);
  color: var(--sea-deep);
  display: grid; place-items: center;
  box-shadow: var(--shadow-s);
  transition: background-color .25s, transform .25s;
}
.modal__close:hover { background: #fff; transform: rotate(90deg); }
.modal__media {
  background: var(--sea-deep);
  position: relative;
  min-height: 320px;
}
.modal__media video,
.modal__media img { width: 100%; height: 100%; object-fit: cover; }
.modal__media--empty {
  background:
    radial-gradient(90% 60% at 30% 20%, rgba(127, 207, 198, .4) 0%, transparent 60%),
    linear-gradient(200deg, #0E5865, #0A343D);
}
/* ---------- נגן הסרטונים במודאל ----------
   הסרטונים אנכיים (9:16), והמסגרת נגזרת מהגובה הפנוי: הגובה
   נקבע ראשון, והרוחב נגזר ממנו לפי היחס. כך הפאנל כולו יוצא
   בדיוק בגודל הסרטון, בלי שוליים ריקים מסביבו. */
.modal__media.modal__media--player {
  display: block;
  padding: 0;
  min-height: 0;
  height: min(82svh, 780px);
  aspect-ratio: 9 / 16;
  max-width: 100%;
  background: transparent;
}
.vp {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .45);
}
.vp video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.vp iframe { width: 100%; height: 100%; border: 0; display: block; }

/* כריכה עם כפתור הפעלה. ה-iframe נוצר רק בלחיצה. */
.vp__play {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 0; border: 0;
  background: var(--sea-deep);
  cursor: pointer;
  display: block;
}
.vp__play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp__badge {
  position: absolute; inset-inline-start: 50%; top: 50%;
  transform: translate(50%, -50%);
  width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .94);
  color: var(--sea-deep);
  box-shadow: var(--shadow-m);
  transition: transform .3s var(--ease), background-color .3s;
}
.vp__badge svg { width: 26px; height: 26px; margin-inline-start: 3px; }
.vp__play:hover .vp__badge { transform: translate(50%, -50%) scale(1.08); background: #fff; }

/* מוצג רק כשאי אפשר להטמיע את הנגן בסביבה הנוכחית */
.vp__fallback {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 2.6rem .9rem .9rem;
  background: linear-gradient(to top, rgba(10, 52, 61, .9) 30%, transparent 100%);
  color: #fff;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .98rem;
  text-align: center;
}

.vp__nav {
  position: absolute; inset-inline: 0; bottom: 3.2rem;
  z-index: 2;
  display: flex; justify-content: center; gap: .4rem;
}
.vp__pick {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(10, 52, 61, .72);
  backdrop-filter: blur(6px);
  color: #fff;
  font-weight: 700; font-size: .88rem;
  cursor: pointer;
  transition: background-color .25s, border-color .25s, transform .25s var(--ease);
}
.vp__pick:hover { transform: translateY(-2px); }
.vp__pick.is-active { background: var(--turq); border-color: var(--turq); }

/* כרטיס שמנגן הצצה מודגש קלות */
.work-card.is-previewing { box-shadow: 0 0 0 2px var(--turq), var(--shadow-l); }

/* הצצה מושתקת בכרטיס. ה-iframe גדול מהכרטיס ומוסט למרכז, כדי
   שפסי הממשק של יוטיוב (SHORTS, שם הערוץ) ייחתכו החוצה.
   pointer-events: none מוודא שהלחיצה מגיעה לכפתור הכרטיס. */
.work-card__yt {
  position: absolute;
  inset-inline-start: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 132%; height: 132%;
  border: 0;
  pointer-events: none;
  z-index: 0;
}
[dir="rtl"] .work-card__yt { transform: translate(50%, -50%); }

/* (עמודת הטקסט של המודאל הוסרה — הכרטיסים פותחים סרטונים בלבד) */

/* כפתור "להצגת עוד" — מוסתר כברירת מחדל, ו-main.js מדליק
   אותו רק בטלפון וכשבאמת נשארו כרטיסים מוסתרים */
.work-more { display: none; justify-content: center; margin-top: 1.5rem; }
.work-more.is-on { display: flex; }
.work-more__btn { padding: .6rem 1.4rem; font-size: .92rem; }

.work__empty {
  text-align: center; color: var(--muted);
  padding: 3rem 1rem;
}

/* ============================================================
   12. מספרים
   ============================================================ */
.stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}
.stat { padding: 1rem .5rem; position: relative; }
.stat + .stat::before {
  content: "";
  position: absolute; inset-inline-end: calc(clamp(1.5rem, 4vw, 3rem) / -2);
  top: 20%; bottom: 20%;
  width: 1px;
  background: rgba(255, 255, 255, .16);
}
.stat__value {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  letter-spacing: -.03em;
}
.stat__value--num { font-size: clamp(3.4rem, 10vw, 6.2rem); }
.stat__value--text { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.2; }
.stat__label {
  margin-top: .7rem;
  color: #A9CFCC;
  font-size: 1rem;
  line-height: 1.5;
}

/* ============================================================
   13. תהליך העבודה — סטפר נפתח
   כל שלב פותח את הבא אחריו. השלבים הנעולים מעומעמים ולא לחיצים.
   ה-HTML נטען פתוח ו-main.js מקפל אותו, כך שבלי JS הכל נשאר קריא.
   ============================================================ */
.steps {
  max-width: 780px;
  margin-inline: auto;
  padding: 0;
  position: relative;
  list-style: none;   /* הכלל הגלובלי מכסה ul בלבד, ו-ol היה מציג מספור כפול */
}
/* הקו המחבר בין המספרים */
.steps::before {
  content: "";
  position: absolute;
  inset-block: 34px 34px;
  inset-inline-start: 27px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--turq-soft) 0 7px, transparent 7px 14px);
  opacity: .55;
}

.step {
  position: relative;
  border-bottom: 1px solid var(--line);
}
.step:last-child { border-bottom: 0; }

.step__head {
  width: 100%;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.1rem;
  padding: 1.15rem 0;
  background: none; border: 0;
  text-align: start;
  cursor: pointer;
  border-radius: var(--r-md);
  transition: opacity .35s;
}
.step__head:disabled { cursor: default; }

/* --- עיגול המספר --- */
.step__num {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cream-2);
  border: 2px solid var(--turq);
  color: var(--sea);
  font-family: var(--f-body);
  font-weight: 700; font-size: 1.15rem;
  z-index: 1;
  transition: background-color .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), transform .4s var(--ease);
}
.step__head:hover:not(:disabled) .step__num { transform: scale(1.06); }

/* המספר נשאר גלוי תמיד — רק העיגול סביבו מחליף צבע */
.step--done .step__num {
  background: var(--turq);
  border-color: var(--turq);
  color: #fff;
}

/* השלב הפתוח כרגע */
.step--open .step__num {
  background: var(--sea-deep);
  border-color: var(--sea-deep);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(43, 167, 155, .16);
}

/* שלב נעול */
.step--locked .step__head { opacity: .42; }
.step--locked .step__num { border-color: var(--line); color: var(--muted); }

.step__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.08rem, 2vw, 1.3rem);
  color: var(--sea-deep);
  line-height: 1.3;
}
.step__chev {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  color: var(--muted);
  transition: transform .4s var(--ease), color .3s;
}
.step__chev svg { width: 19px; height: 19px; }
.step--open .step__chev { transform: rotate(180deg); color: var(--turq); }
.step--locked .step__chev { opacity: 0; }

/* --- הפאנל --- */
.step__panel {
  display: grid;
  grid-template-rows: 0fr;              /* טריק 0fr→1fr לאנימציית גובה חלקה */
  transition: grid-template-rows .45s var(--ease);
}
.step--open .step__panel { grid-template-rows: 1fr; }
.step__panel-inner {
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .35s var(--ease) .06s, transform .35s var(--ease) .06s;
}
.step--open .step__panel-inner { opacity: 1; transform: none; }
.step__panel p {
  margin: 0;
  padding: 0 calc(56px + 1.1rem) 1.5rem;
  color: var(--muted);
  line-height: 1.75;
}

@media (prefers-reduced-motion: reduce) {
  .step__panel, .step__panel-inner, .step__num, .step__chev { transition: none; }
}

@media (max-width: 620px) {
  .steps::before { inset-inline-start: 23px; }
  .step__head { grid-template-columns: 48px minmax(0, 1fr) auto; gap: .85rem; }
  .step__num { width: 48px; height: 48px; font-size: 1.05rem; }
  .step__panel p { padding-inline: calc(48px + .85rem) 0; }
}

/* ============================================================
   14. המלצות — קיר צילומי מסך
   הצילומים מוצגים כמו שהם בכוונה: זו ההוכחה שההמלצה אמיתית.
   פריסת masonry ב-CSS columns, כי לצילומי טלפון יש יחסי גובה
   שונים לגמרי זה מזה וגריד רגיל היה חותך אותם.
   ============================================================ */
/* ---------- שורת ההמלצות בווידאו ----------
   נפרדת מקיר צילומי המסך ומעליו, באותה שפה ויזואלית של
   כרטיסי תיק העבודות: 9:16, פינות מעוגלות וכפתור הפעלה. */
.tst-reels {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.tst-reel {
  position: relative;
  flex: 0 0 auto;
  width: clamp(190px, 24vw, 260px);
  aspect-ratio: 9 / 16;
  border: 0; padding: 0;
  background: var(--sea-deep);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-m);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.tst-reel:hover { transform: translateY(-6px); box-shadow: var(--shadow-l); }
.tst-reel.is-previewing { box-shadow: 0 0 0 2px var(--turq), var(--shadow-l); }
.tst-reel__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.tst-reel__shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 52, 61, .55) 0%, rgba(10, 52, 61, .08) 45%, transparent 100%);
}
.tst-reel__play {
  position: absolute; inset-inline-end: .8rem; top: .8rem;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
  color: #fff;
  transition: background-color .3s, transform .3s var(--ease);
}
.tst-reel:hover .tst-reel__play { background: var(--turq); transform: scale(1.08); }
.tst-reel__play svg { width: 15px; height: 15px; }

.tst-wall {
  columns: 3;
  column-gap: clamp(.9rem, 1.8vw, 1.4rem);
}
.tst-item {
  display: block;
  width: 100%;
  break-inside: avoid;
  margin: 0 0 clamp(.9rem, 1.8vw, 1.4rem);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--cream-2);
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
  box-shadow: var(--shadow-s);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.tst-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-m);
  border-color: transparent;
}
.tst-item.is-hidden { display: none; }

/* גובה מרבי אחיד + דהייה בתחתית, כדי שצילום ארוך לא ישתלט על העמודה */
.tst-item__crop {
  display: block;          /* span בתוך button — בלי זה max-height ו-overflow לא חלים */
  position: relative;
  max-height: 480px;
  overflow: hidden;
}
.tst-item__crop img,
.tst-item__crop video {
  width: 100%; height: auto; display: block;
}
.tst-item__crop::after {
  content: "";
  position: absolute; inset-inline: 0; bottom: 0;
  height: 90px;
  background: linear-gradient(to top, var(--cream-2) 12%, transparent 100%);
  opacity: 0;
  transition: opacity .3s;
}
.tst-item--tall .tst-item__crop::after { opacity: 1; }

.tst-item__zoom {
  position: absolute; inset-inline-start: .7rem; bottom: .7rem;
  z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .92);
  color: var(--sea-deep);
  box-shadow: var(--shadow-s);
  opacity: 0; transform: scale(.85);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.tst-item:hover .tst-item__zoom,
.tst-item:focus-visible .tst-item__zoom { opacity: 1; transform: none; }
.tst-item__zoom svg { width: 17px; height: 17px; }

/* תג וידאו */
.tst-item__play {
  position: absolute; inset-inline-end: .7rem; top: .7rem;
  z-index: 2;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .7rem;
  border-radius: var(--r-pill);
  background: rgba(10, 52, 61, .78);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: .76rem; font-weight: 700;
}
.tst-item__play svg { width: 11px; height: 11px; }

.tst-more { text-align: center; margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.tst-more.is-done { display: none; }

/* ---------- לייטבוקס ---------- */
.lb {
  position: fixed; inset: 0; z-index: 210;
  display: none;
  align-items: center; justify-content: center;
  padding: clamp(3.6rem, 8vw, 5rem) clamp(.8rem, 4vw, 4rem);
}
.lb.is-open { display: flex; }
.lb__backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 40, 48, .9);
  backdrop-filter: blur(8px);
  animation: fade .28s var(--ease);
}
.lb__stage {
  position: relative; z-index: 2;
  margin: 0;
  max-width: min(560px, 100%);
  max-height: 100%;
  display: flex; align-items: center; justify-content: center;
  animation: pop .34s var(--ease);
}
.lb__stage img,
.lb__stage video {
  max-width: 100%;
  max-height: 82svh;
  width: auto; height: auto;
  border-radius: var(--r-md);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
  background: #fff;
}

/* המלצה בווידאו מיוטיוב. מסגרת קבועה 9:16, כי ל-iframe אין
   ממדים טבעיים שהלייטבוקס יכול להיצמד אליהם. */
.lb__yt {
  position: relative;
  height: 82svh;
  aspect-ratio: 9 / 16;
  max-width: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
}
.lb__yt iframe { width: 100%; height: 100%; border: 0; display: block; }
/* בתוך הלייטבוקס התמונה היא כריכה שממלאת את המסגרת,
   ולכן היא חורגת מכלל ה-max-height הכללי שלמעלה. */
.lb__yt .vp__play img {
  max-height: none;
  border-radius: 0;
  box-shadow: none;
}
.lb__btn {
  position: absolute; z-index: 3;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(10px);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background-color .25s, transform .25s var(--ease), opacity .25s;
}
.lb__btn:hover { background: rgba(255, 255, 255, .26); }
.lb__btn:disabled { opacity: .3; cursor: default; }
.lb__btn svg { width: 20px; height: 20px; }
.lb__btn--close { top: 1rem; inset-inline-start: 1rem; }
.lb__btn--close:hover { transform: rotate(90deg); }
.lb__btn--prev { top: 50%; inset-inline-end: clamp(.6rem, 3vw, 2rem); margin-top: -24px; }
.lb__btn--next { top: 50%; inset-inline-start: clamp(.6rem, 3vw, 2rem); margin-top: -24px; }
.lb__count {
  position: absolute; z-index: 3;
  bottom: 1.1rem; inset-inline: 0;
  margin: 0; text-align: center;
  color: rgba(255, 255, 255, .75);
  font-size: .88rem;
}

@media (max-width: 980px) {
  .tst-wall { columns: 2; }
  .lb__btn--prev, .lb__btn--next { top: auto; bottom: 3.2rem; margin-top: 0; }
}
@media (max-width: 620px) {
  /* שתי עמודות גם בטלפון, כמו בטאבלט. הצילומים קטנים מדי
     לקריאה כאן, אבל תפקידם בקיר הוא להראות כמות והם נפתחים
     בלחיצה לגודל מלא. */
  .tst-wall { columns: 2; column-gap: .7rem; }
  .tst-item { margin-bottom: .7rem; }
  .tst-item__crop { max-height: 420px; }

  /* שתי המלצות הווידאו זו לצד זו ולא זו מתחת לזו, באותו
     קצב של שתי עמודות כמו הקיר שמתחתן */
  .tst-reels { gap: .7rem; }
  .tst-reel { width: calc(50% - .35rem); }
}

/* ============================================================
   15. מה אני מביאה איתי
   ============================================================ */
.brings__list { display: grid; gap: clamp(.9rem, 2vw, 1.3rem); }
.bring {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
  transition: background-color .35s, transform .35s var(--ease);
}
.bring:hover { background: #fff; transform: translateX(-5px); }
.bring__mark {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--turq); color: #fff;
  flex: none;
}
.bring__mark svg { width: 18px; height: 18px; }
.bring h3 { font-size: var(--fs-h3); color: var(--sea-deep); margin-bottom: .3em; }
.bring p { color: var(--muted); margin: 0; }

/* ============================================================
   16. CTA סופי
   ============================================================ */
.outro { text-align: center; position: relative; overflow: hidden; }
.outro__wave-top {
  position: absolute; inset-inline: 0; top: -1px;
  width: 100%; height: clamp(45px, 7vw, 90px);
  color: var(--aqua-mist);
  transform: scaleY(-1);
}
.outro__inner { position: relative; z-index: 2; max-width: 760px; margin-inline: auto; padding-top: clamp(1rem, 4vw, 3rem); }
.outro h2 {
  font-size: clamp(1.75rem, 4.4vw, 2.9rem);
  line-height: 1.28;
  margin-bottom: 1.2rem;
  text-wrap: balance;
}
.outro__filter {
  color: #B9D8D6;
  font-size: var(--fs-lead);
  margin-bottom: 2.6rem;
}
.outro__signature { margin-bottom: 2.4rem; }
.outro__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* ---------- 17. פוטר ---------- */
.footer {
  background: var(--sea-deep);
  color: #8FB6B5;
  border-top: 1px solid rgba(255, 255, 255, .09);
  padding-block: 2.2rem;
  font-size: .9rem;
}
.footer__inner {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  align-items: center; justify-content: space-between;
}
.footer__brand { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.footer__logo {
  height: 66px; width: auto;
  opacity: .95;
}
.footer__copy { margin: 0; }
.footer__social { display: flex; gap: .6rem; }
.footer__social a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .16);
  transition: background-color .25s, color .25s, border-color .25s;
}
.footer__social a:hover { background: var(--turq); border-color: var(--turq); color: #fff; }
.footer__social svg { width: 17px; height: 17px; }

/* ---------- sticky CTA למובייל ---------- */
.sticky-cta {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
  display: none;
  padding: .7rem clamp(.9rem, 4vw, 1.2rem) calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(251, 246, 238, .93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .4s var(--ease);
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta .btn { width: 100%; }

/* ============================================================
   18. רספונסיב
   ============================================================ */
@media (max-width: 1080px) {
}

@media (max-width: 980px) {
  /* בעמודה אחת התצלומים למעלה והטקסט אחריהם — הסדר הטבעי
     של ה-DOM, בלי order ובלי רקע. זו ההעדפה שנבחרה. */
  .about__grid { grid-template-columns: 1fr; gap: 3.2rem; }
  .about__figure { max-width: 440px; margin-inline: auto; }
  /* בנייד הנגן לוקח את כל הגובה הפנוי — אין לצידו כלום */
  .modal__media.modal__media--player { height: min(84svh, 720px); }

}

/* ============================================================
   תפריט מובייל — פאנל מלא עם מלכודת פוקוס (ראו main.js)
   ============================================================ */
@media (max-width: 900px) {
  .nav__toggle { display: grid; }
  .nav__cta { display: none; }
  .nav__brand-img { height: 46px; }
  .nav.is-stuck .nav__brand-img { height: 40px; }

  .nav__nav {
    position: fixed;
    inset-block: 0; inset-inline-end: 0;
    width: min(360px, 88vw);
    z-index: 3;
    display: flex; flex-direction: column; justify-content: center;
    gap: 2rem;
    padding: 5.5rem clamp(1.4rem, 6vw, 2.2rem) calc(2rem + env(safe-area-inset-bottom));
    background: var(--cream-2);
    /* בעברית inset-inline-end הוא הצד השמאלי הפיזי — שם גם יושב
       כפתור ההמבורגר, ולכן הפאנל נשלף משמאל. הערכים הבאים פיזיים
       בכוונה: הם חייבים להתאים לצד שאליו הפאנל באמת צמוד. */
    box-shadow: 20px 0 60px rgba(10, 52, 61, .22);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* סגור: מחוץ למסך ומחוץ לסדר ה-Tab */
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform .42s var(--ease), visibility .42s;
  }
  .nav.is-menu-open .nav__nav { visibility: visible; transform: none; }

  .nav__list { flex-direction: column; align-items: stretch; gap: .15rem; }
  .nav__list a {
    padding: .95rem 1rem;
    border-radius: var(--r-md);
    font-family: var(--f-display);
    font-size: 1.32rem;
    color: var(--sea-deep);
  }
  .nav.is-stuck .nav__list a { color: var(--sea-deep); }
  .nav__list a::after { display: none; }
  .nav__list a:hover,
  .nav__list a[aria-current="true"] { background: var(--aqua-mist); color: var(--sea-deep); }
  .nav__list a[aria-current="true"] { box-shadow: inset 3px 0 0 var(--turq); }

  .nav__panel-foot {
    display: grid; gap: 1.2rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--line);
  }
  .nav__panel-social { display: flex; gap: .6rem; justify-content: center; }
  .nav__panel-social a {
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid var(--line);
    color: var(--sea);
    transition: background-color .25s, color .25s, border-color .25s;
  }
  .nav__panel-social a:hover { background: var(--turq); border-color: var(--turq); color: #fff; }
  .nav__panel-social svg { width: 18px; height: 18px; }

  /* בזמן שהתפריט פתוח — שם המותג צריך להיקרא על הרקע הבהיר */
  .nav.is-menu-open .nav__brand-text { color: var(--sea-deep); }
}

@media (prefers-reduced-motion: reduce) {
  .nav__nav { transition: none; }
}

@media (max-width: 760px) {

  .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marquee__track { gap: .6rem; animation-duration: 38s; }
  .logo-item { width: 132px; min-height: 84px; padding: .8rem .7rem; }
  .logo-item img { max-height: 42px; }
  .logo-item--featured { width: 176px; }
  .logo-item--featured img { max-height: 52px; }

  /* שני המספרים שנשארים גלויים יושבים זה לצד זה, כמו בטאבלט,
     במקום להיערם אחד מתחת לשני עם קו מפריד ביניהם. */
  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.8rem, 3vw, 1.8rem); }
  .stat + .stat::before { display: none; }
  .stat { padding: 1rem .25rem; }
  /* מוסתר בטלפון בלבד (hideOnMobile ב-content.js), ומוצג בדסקטופ */
  .stat--no-mobile { display: none; }

  .bring { grid-template-columns: 1fr; gap: .8rem; }
  .bring:hover { transform: none; }

  .outro__actions .btn { width: 100%; }
  .footer__inner { flex-direction: column; text-align: center; }

  .sticky-cta { display: block; }
  body.has-sticky { padding-bottom: 76px; }

  /* ---------- קיצורים לטלפון בלבד ---------- */

  /* שתי פסקאות שנשארות בדסקטופ ובטאבלט ויורדות כאן, כדי
     שסקשן "קצת עליי" לא יהפוך לקיר טקסט במסך צר */
  .about__p--full { display: none; }

  /* הכרטיסים מעבר למכסה (ראו MOBILE_CAP ב-main.js) */
  .work-card.is-capped { display: none; }
}

@media (max-width: 560px) {
}

/* בעבר הגריד ירד כאן לעמודה אחת, וכרטיס אחד בשורה הפך את
   התיק לגלילה אינסופית. שתי עמודות שומרות על אותה תחושה
   שיש בטאבלט — רק הטיפוגרפיה בכרטיס מתכווצת בהתאם. */
@media (max-width: 430px) {
  .work-card__client { font-size: .72rem; }
  .work-card__title  { font-size: .95rem; }
  .work-card__info   { padding: .8rem .75rem; }
  .work-card__play   { width: 32px; height: 32px; inset-inline-end: .6rem; top: .6rem; }
  .work-card__play svg { width: 13px; height: 13px; }
}