/* ============================================================
   Libberate — design.branding.advertising landing page
   Reconstructed from Figma file 7RROAtrHMrCNQnXAa6V7Xj
   Frame width: 1440px (desktop)
   ============================================================ */

/* Kill any horizontal scrolling site-wide. The giant title's
   translateX(-60vw) effect and a few other transforms can push content
   past the viewport edge — this clamps the document to the visible
   width so no horizontal scroll-bar ever appears. */
html, body { overflow-x: hidden; }

/* פונט איינשטיין — נעול ל-2 משקלים בלבד: דקיק (Thin) ורגיל (Regular).
   כל משקל קל (≤350) → דקיק; כל השאר (400+) → רגיל. */
@font-face {
  font-family: "FbSingulari";
  src: url("fonts/FbEinstein-Thin.woff2") format("woff2"), url("fonts/FbEinstein-Thin.woff") format("woff");
  font-weight: 1 350;       /* דקיק — כל המשקלים הקלים */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FbSingulari";
  src: url("fonts/FbEinstein-Regular.woff2") format("woff2"), url("fonts/FbEinstein-Regular.woff") format("woff");
  font-weight: 351 1000;    /* רגיל — כל השאר (היה בינוני/מודגש/שחור) */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FbSingulariEng";
  src: url("fonts/FbEinstein-Regular.woff2") format("woff2"), url("fonts/FbEinstein-Regular.woff") format("woff");
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* צבעי מבטא — מחוברים לבוררי הצבע בפאנל */
  --peach: #feb571;
  --peach-rgb: 254, 181, 113;
  --brand-blue: #2D4A6F;     /* כחול מבטא — שם הפרויקט, hover הכפתור */
  --text-main: #FFFFFF;      /* טקסט ראשי — כותרות */
  --text-rest: #FFFFFF;      /* שאר הטקסטים */
  --brand-deep:   #A8C8E8;   /* light blue — headings, button strokes */
  --brand-mid:    #7AAFD4;   /* mid sky blue — actions */
  --brand-soft:   #5690B8;   /* soft blue — subtitles */
  --line:         rgba(255,255,255,0.15);   /* subtle white border */
  --ink:          #E8F2FA;   /* near-white — body text */
  --ink-soft:     #8AAFC8;   /* soft blue-grey — secondary text */
  --bg:           #0D1E35;   /* dark navy — body background */

  /* Hero (darker) and brand blue palette */
  --hero-blue-deep:  var(--brand-blue);
  --hero-blue-mid:   #4A6B92;
  --hero-blue-soft:  #6E91B8;
  --hero-blue-pale:  #B8D3E8;
  --hero-white-haze: #F4F8FC;
}

* { box-sizing: border-box; }

html {
  /* When jumping to #works / #contact, leave room for the fixed navbar */
  scroll-padding-top: 86px;
  scroll-behavior: smooth;
}
/* Hide the native cursor on fine-pointer devices — we draw a custom one */
@media (pointer: fine) {
  html, body, a, button, .works__card { cursor: none; }
  /* Accessibility-statement page has no custom cursor — restore native */
  body.a11y-statement-page,
  body.a11y-statement-page * { cursor: auto !important; }
  body.a11y-statement-page a,
  body.a11y-statement-page button { cursor: pointer !important; }
}

/* --- Custom cursor ---
   A small peach dot that follows the pointer at all times. Over a
   clickable element it grows into a hollow ring with a tiny dot
   still in its centre (via ::before). */
.custom-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--peach);
  border: 0 solid var(--peach);
  box-sizing: border-box;
  pointer-events: none;
  z-index: 100000;
  transform: translate3d(var(--cx, -50px), var(--cy, -50px), 0)
             translate(-50%, -50%);
  transition: width 0.22s cubic-bezier(.34, 1.56, .64, 1),
              height 0.22s cubic-bezier(.34, 1.56, .64, 1),
              background 0.18s ease,
              border-width 0.18s ease,
              opacity 0.18s ease;
  opacity: 0;
  will-change: transform, width, height;
}
/* Inner dot — invisible by default, appears inside the ring on hover */
.custom-cursor::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--peach);
  transform: translate(-50%, -50%);
  transition: width 0.22s cubic-bezier(.34, 1.56, .64, 1),
              height 0.22s cubic-bezier(.34, 1.56, .64, 1);
}
.custom-cursor.is-visible { opacity: 1; }
.custom-cursor.is-active {
  width: 38px;
  height: 38px;
  background: transparent;
  border-width: 2.5px;
}
.custom-cursor.is-active::before {
  width: 7px;
  height: 7px;
}
/* Hide entirely on coarse-pointer / no-mouse devices */
@media (pointer: coarse), (hover: none) {
  .custom-cursor { display: none; }
}


/* === Cursor style variations (chosen via [data-cursor-style] on <body>) ===
   Style 1 = current ring behaviour (base styles above) */

/* Style 2 — Filled: solid circle that grows */
body[data-cursor-style="2"] .custom-cursor.is-active {
  width: 32px; height: 32px;
  background: var(--peach);
  border-width: 0;
}
body[data-cursor-style="2"] .custom-cursor.is-active::before { width: 0; height: 0; }

/* Style 3 — Crosshair: + made of two thin bars */
body[data-cursor-style="3"] .custom-cursor.is-active {
  width: 32px; height: 32px;
  background: transparent;
  border-width: 0;
}
body[data-cursor-style="3"] .custom-cursor.is-active::before {
  width: 32px; height: 2px;
  background: var(--peach);
  border-radius: 1px;
}
body[data-cursor-style="3"] .custom-cursor::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: var(--peach);
  border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: width 0.22s, height 0.22s;
}
body[data-cursor-style="3"] .custom-cursor.is-active::after {
  width: 2px; height: 32px;
}

/* Style 4 — Square: hollow rounded square */
body[data-cursor-style="4"] .custom-cursor.is-active {
  width: 32px; height: 32px;
  background: transparent;
  border: 2px solid var(--peach);
  border-radius: 4px;
}
body[data-cursor-style="4"] .custom-cursor.is-active::before { width: 0; height: 0; }

/* Style 5 — Diamond: rotated square outline */
body[data-cursor-style="5"] .custom-cursor.is-active {
  width: 32px; height: 32px;
  background: transparent;
  border-width: 0;
}
body[data-cursor-style="5"] .custom-cursor.is-active::before {
  width: 24px; height: 24px;
  background: transparent;
  border: 2px solid var(--peach);
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Style 6 — Triangle: filled triangle pointing up */
body[data-cursor-style="6"] .custom-cursor.is-active {
  width: 36px; height: 32px;
  background: var(--peach);
  border-width: 0;
  border-radius: 0;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
body[data-cursor-style="6"] .custom-cursor.is-active::before { width: 0; height: 0; }

/* Style 7 — Star: 5-point */
body[data-cursor-style="7"] .custom-cursor.is-active {
  width: 38px; height: 38px;
  background: var(--peach);
  border-width: 0;
  border-radius: 0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
body[data-cursor-style="7"] .custom-cursor.is-active::before { width: 0; height: 0; }

/* Style 8 — Halo: large soft glow with center dot */
body[data-cursor-style="8"] .custom-cursor.is-active {
  width: 60px; height: 60px;
  background: radial-gradient(circle, rgba(var(--peach-rgb),0.45) 0%, rgba(var(--peach-rgb),0) 70%);
  border-width: 0;
}
body[data-cursor-style="8"] .custom-cursor.is-active::before {
  width: 8px; height: 8px;
  background: var(--peach);
}

/* Style 9 — Reticle: 4 corner brackets + center dot */
body[data-cursor-style="9"] .custom-cursor.is-active {
  width: 36px; height: 36px;
  background:
    linear-gradient(var(--peach), var(--peach)) left top / 10px 2px no-repeat,
    linear-gradient(var(--peach), var(--peach)) left top / 2px 10px no-repeat,
    linear-gradient(var(--peach), var(--peach)) right top / 10px 2px no-repeat,
    linear-gradient(var(--peach), var(--peach)) right top / 2px 10px no-repeat,
    linear-gradient(var(--peach), var(--peach)) left bottom / 10px 2px no-repeat,
    linear-gradient(var(--peach), var(--peach)) left bottom / 2px 10px no-repeat,
    linear-gradient(var(--peach), var(--peach)) right bottom / 10px 2px no-repeat,
    linear-gradient(var(--peach), var(--peach)) right bottom / 2px 10px no-repeat;
  border-width: 0;
  border-radius: 0;
}
body[data-cursor-style="9"] .custom-cursor.is-active::before {
  width: 4px; height: 4px;
  background: var(--peach);
}

/* Style 10 — Plus (thick) */
body[data-cursor-style="10"] .custom-cursor.is-active {
  width: 32px; height: 32px;
  background: transparent;
  border-width: 0;
}
body[data-cursor-style="10"] .custom-cursor.is-active::before {
  width: 32px; height: 6px;
  background: var(--peach);
  border-radius: 2px;
}
body[data-cursor-style="10"] .custom-cursor::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: var(--peach);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: width 0.22s, height 0.22s;
}
body[data-cursor-style="10"] .custom-cursor.is-active::after {
  width: 6px; height: 32px;
}

/* Style 11 — Double Ring */
body[data-cursor-style="11"] .custom-cursor.is-active {
  width: 38px; height: 38px;
  background: transparent;
  border: 2px solid var(--peach);
}
body[data-cursor-style="11"] .custom-cursor.is-active::before {
  width: 18px; height: 18px;
  background: transparent;
  border: 2px solid var(--peach);
  border-radius: 50%;
}

/* Style 12 — X Mark (2 diagonal bars) */
body[data-cursor-style="12"] .custom-cursor.is-active {
  width: 32px; height: 32px;
  background: transparent;
  border-width: 0;
}
body[data-cursor-style="12"] .custom-cursor.is-active::before {
  width: 32px; height: 3px;
  background: var(--peach);
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
}
body[data-cursor-style="12"] .custom-cursor::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: var(--peach);
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(-45deg);
  transition: width 0.22s, height 0.22s;
}
body[data-cursor-style="12"] .custom-cursor.is-active::after {
  width: 32px; height: 3px;
}

/* Style 13 — Hexagon */
body[data-cursor-style="13"] .custom-cursor.is-active {
  width: 36px; height: 32px;
  background: var(--peach);
  border-width: 0;
  border-radius: 0;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
body[data-cursor-style="13"] .custom-cursor.is-active::before { width: 0; height: 0; }

/* Style 14 — Dashed Ring */
body[data-cursor-style="14"] .custom-cursor.is-active {
  width: 36px; height: 36px;
  background: transparent;
  border: 2px dashed var(--peach);
}
body[data-cursor-style="14"] .custom-cursor.is-active::before {
  width: 4px; height: 4px;
  background: var(--peach);
}

/* Style 15 — Brackets [ ] */
body[data-cursor-style="15"] .custom-cursor.is-active {
  width: 28px; height: 28px;
  background:
    linear-gradient(var(--peach), var(--peach)) left top / 7px 2px no-repeat,
    linear-gradient(var(--peach), var(--peach)) left bottom / 7px 2px no-repeat,
    linear-gradient(var(--peach), var(--peach)) left top / 2px 100% no-repeat,
    linear-gradient(var(--peach), var(--peach)) right top / 7px 2px no-repeat,
    linear-gradient(var(--peach), var(--peach)) right bottom / 7px 2px no-repeat,
    linear-gradient(var(--peach), var(--peach)) right top / 2px 100% no-repeat;
  border-width: 0;
  border-radius: 0;
}
body[data-cursor-style="15"] .custom-cursor.is-active::before { width: 0; height: 0; }

/* Style 16 — Burst (4 radial dashes + center dot) */
body[data-cursor-style="16"] .custom-cursor.is-active {
  width: 36px; height: 36px;
  background:
    linear-gradient(var(--peach), var(--peach)) 50% 0 / 2px 8px no-repeat,
    linear-gradient(var(--peach), var(--peach)) 50% 100% / 2px 8px no-repeat,
    linear-gradient(var(--peach), var(--peach)) 0 50% / 8px 2px no-repeat,
    linear-gradient(var(--peach), var(--peach)) 100% 50% / 8px 2px no-repeat;
  border-width: 0;
  border-radius: 0;
}
body[data-cursor-style="16"] .custom-cursor.is-active::before {
  width: 6px; height: 6px;
  background: var(--peach);
}

/* Style 17 — Lens (horizontal oval outline + center dot) */
body[data-cursor-style="17"] .custom-cursor.is-active {
  width: 42px; height: 24px;
  background: transparent;
  border: 2px solid var(--peach);
  border-radius: 50%;
}
body[data-cursor-style="17"] .custom-cursor.is-active::before {
  width: 5px; height: 5px;
  background: var(--peach);
}

/* Style 18 — Donut (thick ring, no center) */
body[data-cursor-style="18"] .custom-cursor.is-active {
  width: 36px; height: 36px;
  background: transparent;
  border: 8px solid var(--peach);
}
body[data-cursor-style="18"] .custom-cursor.is-active::before { width: 0; height: 0; }

/* Style 19 — Hexagram (Star of David, 6-point) */
body[data-cursor-style="19"] .custom-cursor.is-active {
  width: 36px; height: 36px;
  background: var(--peach);
  border-width: 0;
  border-radius: 0;
  clip-path: polygon(50% 0%, 65% 25%, 100% 25%, 75% 50%, 100% 75%, 65% 75%, 50% 100%, 35% 75%, 0% 75%, 25% 50%, 0% 25%, 35% 25%);
}
body[data-cursor-style="19"] .custom-cursor.is-active::before { width: 0; height: 0; }

/* Style 20 — Pentagon (5-sided) */
body[data-cursor-style="20"] .custom-cursor.is-active {
  width: 34px; height: 34px;
  background: var(--peach);
  border-width: 0;
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
body[data-cursor-style="20"] .custom-cursor.is-active::before { width: 0; height: 0; }
html, body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: "FbSingulari", "Heebo", "Assistant", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Single master gradient that flows through every section of the page:
   - Deepest navy at the very top (hero header)
   - Continuously brightens through the hero into the upper half of works
   - Peaks at the body colour around the middle of works (~50%)
   - Stays bright through the lower works + contact
   - Subtly deepens again toward the very bottom (above the footer band) */
/* ============================================================
   TWEAK PANEL (dev only)
   ============================================================ */
#tweak-panel {
  position: fixed;
  top: 90px;
  left: 16px;
  z-index: 9999;
  width: 280px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  background: rgba(10, 14, 24, 0.92);
  color: var(--text-rest);
  font: 11px/1.3 ui-monospace, "SF Mono", monospace;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  backdrop-filter: blur(6px);
  direction: ltr;
}
#tweak-panel.is-collapsed { width: auto; }
#tweak-panel.is-collapsed .tw-body { display: none; }
#tweak-panel.is-collapsed .tw-head span { font-size: 10px; opacity: 0.6; }
#tweak-panel .tw-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  font-weight: 700; font-size: 12px;
  background: rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  cursor: default;
}
#tweak-panel .tw-toggle {
  background: transparent; color: var(--text-rest); border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px; width: 22px; height: 20px; cursor: pointer; font-size: 14px; line-height: 1;
}
#tweak-panel .tw-body { padding: 8px 10px 12px; }
#tweak-panel fieldset {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  padding: 6px 8px;
  margin: 0 0 8px;
}
#tweak-panel legend { padding: 0 4px; font-weight: 700; opacity: 0.85; }
#tweak-panel label {
  display: grid; grid-template-columns: 1fr auto auto; gap: 6px;
  align-items: center;
  padding: 2px 0;
}
#tweak-panel label > span {
  min-width: 36px; text-align: right; opacity: 0.75; font-variant-numeric: tabular-nums;
}
#tweak-panel input[type="range"] { width: 100px; }
#tweak-panel input[type="color"] { width: 32px; height: 20px; border: none; background: none; cursor: pointer; padding: 0; }
#tweak-panel select {
  background: rgba(255,255,255,0.1); color: var(--text-rest);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 4px; padding: 3px 4px; font: inherit;
  width: 150px;
}
#tweak-panel select option { background: #0a0e18; color: var(--text-rest); }
#tweak-panel .tw-actions { display: flex; gap: 6px; margin-top: 6px; }
#tweak-panel .tw-actions button {
  flex: 1;
  background: rgba(255,255,255,0.1); color: var(--text-rest);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 4px; padding: 5px 8px; cursor: pointer; font: inherit;
}
#tweak-panel .tw-actions button:hover { background: rgba(255,255,255,0.18); }
/* כלי בחירת טקסט וקביעת משקל */
#tweak-panel .tw-pick-toggle,
#tweak-panel .tw-weight-row button {
  background: rgba(255,255,255,0.1); color: var(--text-rest);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 4px; padding: 5px 6px; cursor: pointer; font: inherit;
}
#tweak-panel .tw-pick-toggle { width: 100%; margin-bottom: 6px; }
#tweak-panel .tw-pick-toggle.is-active { background: #46a6ff; border-color: #46a6ff; color: #fff; }
#tweak-panel .tw-weight-row { display: flex; gap: 4px; }
#tweak-panel .tw-weight-row button { flex: 1 1 0; min-width: 0; padding: 5px 2px; }
#tweak-panel .tw-weight-row button:hover { background: rgba(255,255,255,0.18); }
#tweak-panel .tw-pick-status { display: block; margin-top: 6px; font-size: 11px; opacity: 0.8; }
/* מצב בחירה — סמן והדגשות על האתר */
body.tw-pick-mode, body.tw-pick-mode * { cursor: crosshair !important; }
body.tw-pick-mode #tweak-panel * { cursor: pointer !important; }
.tw-pick-hover { outline: 2px dashed #46a6ff !important; outline-offset: 1px; }
.tw-pick-selected { outline: 2px solid #ffb300 !important; outline-offset: 1px; }
#tweak-panel .tw-out {
  background: rgba(0,0,0,0.5); padding: 6px; border-radius: 4px;
  font-size: 10px; line-height: 1.4; white-space: pre-wrap; word-break: break-all;
  max-height: 200px; overflow: auto;
  margin: 6px 0 0;
}

/* ============================================================
   STANDALONE WORKS GALLERY ON HOMEPAGE — full-screen-wide, bigger
   tiles (subtitle + spacing).
   ============================================================ */
.works__subtitle {
  text-align: center;
  color: rgba(255, 255, 255, 0.78);
  font-size: 18px;
  margin: -8px 0 36px;
  font-weight: 300;
}
/* Giant title — sits in its natural place, no sticky stage. Just a
   subtle horizontal drift (~12vw to each side) driven by --p so the
   eye picks up a hint of motion on scroll without a full flyby. */
/* Class repeated (.works__title.works__title--giant) to beat the later
   base .works__title rule. font-size uses clamp + vw so the whole
   sentence always fits on a single line regardless of viewport. */
.works__title.works__title--giant {
  color: var(--brand-blue);
  font-size: clamp(30px, 5.5vw, 96px);
  white-space: nowrap;
  font-weight: 300;
  line-height: 1.1;
  max-width: none;
  padding-bottom: 40px;
  letter-spacing: 0;
  --p: 0;
  transform: translateX(calc(var(--p) * -12vw));
  will-change: transform;
}
@media (max-width: 600px) {
  .works__title.works__title--giant { padding-bottom: 28px; }
}

/* Horizontal filter row — sits directly below the giant title.
   In RTL, items flow right-to-left: first button on the right, next
   one to its left, and so on. One single row, compact boxes.
   Class repeated to beat the base .archive__filters { flex-direction:
   column } rule that's later in the file. */
.archive__filters.archive__filters--horizontal {
  position: static;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 0 32px;
  margin: 0 auto 48px;
  top: auto;
}
.archive__filters.archive__filters--horizontal .archive__filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 110px;
  height: 38px;
  padding: 0 18px;
  flex: 0 0 auto;
}
.works--archive { padding-bottom: 80px; }
.works.works--archive { background: #e0edff; }   /* רקע אזור העבודות */

/* ===== 10 סוגי מעבר בין הראשי (כהה) לעבודות (תכלת #e0edff) — נשלט מהפאנל ===== */
/* 1 — גרדיאנט רך */
body[data-works-transition="1"] .works.works--archive {
  background: linear-gradient(to bottom, transparent 0, #e0edff 190px);
}
/* 2 — אלכסון */
body[data-works-transition="2"] .works.works--archive {
  clip-path: polygon(0 95px, 100% 0, 100% 100%, 0 100%);
}
/* 3 — גל */
body[data-works-transition="3"] .works.works--archive {
  -webkit-mask:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" preserveAspectRatio="none"><path d="M0,100 L0,55 C25,15 75,95 100,55 L100,100 Z" fill="%23000"/></svg>') top / 100% 110px no-repeat,
    linear-gradient(#000, #000) bottom / 100% calc(100% - 108px) no-repeat;
          mask:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" preserveAspectRatio="none"><path d="M0,100 L0,55 C25,15 75,95 100,55 L100,100 Z" fill="%23000"/></svg>') top / 100% 110px no-repeat,
    linear-gradient(#000, #000) bottom / 100% calc(100% - 108px) no-repeat;
}
/* 4 — עקומה */
body[data-works-transition="4"] .works.works--archive {
  clip-path: ellipse(140% 100% at 50% 100%);
}
/* 5 — טשטוש ארוך (גרדיאנט רך וארוך) */
body[data-works-transition="5"] .works.works--archive {
  background: linear-gradient(to bottom, transparent 0, #e0edff 320px);
}
/* 6 — זיגזג */
body[data-works-transition="6"] .works.works--archive {
  clip-path: polygon(0 58px, 10% 22px, 20% 58px, 30% 22px, 40% 58px, 50% 22px, 60% 58px, 70% 22px, 80% 58px, 90% 22px, 100% 58px, 100% 100%, 0 100%);
}
/* 7 — רדיאלי מהמרכז */
body[data-works-transition="7"] .works.works--archive {
  background: radial-gradient(130% 220px at 50% 0, transparent 38%, #e0edff 74%);
}
/* 8 — דו-גוני (דרך כחול ביניים) */
body[data-works-transition="8"] .works.works--archive {
  background: linear-gradient(to bottom, transparent 0, rgba(168, 200, 232, 0.85) 110px, #e0edff 240px);
}
/* 9 — הטיה אלכסונית */
body[data-works-transition="9"] .works.works--archive {
  background: linear-gradient(115deg, transparent 38%, #e0edff 56%);
}
/* 10 — מדרגות */
body[data-works-transition="10"] .works.works--archive {
  background: linear-gradient(to bottom,
    transparent 0 55px,
    rgba(224, 237, 255, 0.45) 55px 110px,
    rgba(224, 237, 255, 0.75) 110px 165px,
    #e0edff 165px);
}
/* Filters now sit horizontally below the title (no sidebar). The
   gallery takes the full viewport width with EQUAL padding on both
   sides so the cards look balanced. */
.works--archive .gallery__layout--full {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0 32px;
  grid-template-columns: none;
  gap: 0;
}
.works--archive .gallery__content { display: block; width: 100%; }

/* ============================================================
   DEDICATED PROJECTS PAGE (works-archive.html post-swap) — large
   project cards spanning the full viewport.
   ============================================================ */
.works--page {
  max-width: 1600px;
  margin: 120px auto 60px;
  padding: 0 40px;
}
.works--page .works__grid {
  max-width: none;
  padding: 0;
  gap: 72px;        /* יותר רווח בין העמודות (מהצדדים) */
}
.works--page .works__col {
  gap: 112px;       /* יותר רווח בין פרוייקט לפרוייקט (מלמעלה ולמטה) */
}
.works__title--page {
  text-align: center;
  font-size: 140px;   /* ברירת מחדל לפני שה-JS מחשב חצי מ"פרויקטים" */
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 60px;
  /* הסחה אופקית בגלילה — כמו כותרת הארכיון בדף הבית */
  --p: 0;
  transform: translateX(calc(var(--p) * -12vw));
  will-change: transform;
}
.works--page .archive__cta { margin-top: 80px; }

/* דף הפרויקטים — רקע תכלת כמו אזור העבודות; כותרת ו-CTA כהים לקריאוּת */
body.projects-page { background: #e0edff; min-height: 100vh; overflow-x: clip; }
body.projects-page .works__title--page { color: var(--brand-blue); }
body.projects-page .archive__cta-text,
body.projects-page .cta-swap__default { color: var(--brand-blue); }

/* כותרת דף הפרויקטים: מילה ענקית "פרויקטים" ברקע ב-10% שקיפות, מקצה לקצה */
.works__page-head {
  --lift: 4cm;             /* כמה ש"פרויקטים" + "הצצה" מורמים יחד */
  position: relative;
  margin: 0 0 calc(48px - var(--lift));   /* מושך את הכרטיסים מעלה בהתאם להרמה */
  min-height: 25vw;        /* שומר מקום ל-watermark הגדול כדי שהכרטיסים יירדו מתחתיו */
  display: flex;
  align-items: center;
  justify-content: center;
}
.works__page-head .works__title--page { margin: 0 auto; max-width: none; white-space: nowrap; position: relative; z-index: 1; transform: translateX(calc(var(--p) * -12vw)) translateY(calc(-1 * var(--lift))); }
.works__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - var(--lift) - 2cm));   /* 2 ס"מ נוספים מעל הכותרת */
  width: 100vw;
  text-align: center;
  white-space: nowrap;
  font-family: "FbSingulari", "Heebo", sans-serif;
  font-weight: 700;
  font-size: 24vw;        /* גדול ככל האפשר בלי עיוות ובלי לחרוג */
  line-height: 1;
  color: var(--brand-blue);
  opacity: 0.04;          /* 4% */
  z-index: 0;
  pointer-events: none;
}
.works__watermark-word { display: inline-block; white-space: nowrap; }

/* Project cards on dedicated page — mirror the archive gallery hover:
   gradient fades in, title slides up + fades from bottom-right (RTL),
   no per-character animation, no frosted frame, no scale on overlay. */
.works--page .works__card-overlay {
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0) 100%);
  border: 0;
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  padding: 0;
  transform: none;
  transition: opacity 0.3s ease;
}
.works--page .works__card:hover .works__card-overlay,
.works--page .works__card:focus-within .works__card-overlay {
  transform: none;
}
.works--page .works__card-title {
  position: absolute;
  inset: auto 22px 18px 22px;
  font-family: "FbSingulari", "Heebo", sans-serif;
  font-weight: 300;
  font-size: 19px;
  color: var(--text-rest);
  text-align: right;
  padding-bottom: 0;
  letter-spacing: normal;
  display: block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(.2, .8, .25, 1);
}
.works--page .works__card:hover .works__card-title,
.works--page .works__card:focus-within .works__card-title {
  opacity: 1;
  transform: translateY(0);
}
/* Disable the per-character animation inside the projects page */
.works--page .works__card-title .ch {
  display: inline !important;
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}

/* בעמוד הפרוייקטים: הסרת אפקט הכותרת/גרדיאנט שקופץ על התמונה בריחוף —
   שם הפרוייקט מוצג כעת בכרטיס התחתון המציץ. */
.works--page .works__card-overlay { display: none; }

/* ===== כרטיס אחורי קטן שמציץ מלמטה עם שם הפרוייקט ===== */
.works__card-wrap {
  position: relative;
  width: 100%;
}
.works__card-wrap .works__card {
  display: block;      /* היה פריט flex; בתוך העטיפה צריך block כדי ש-width:100% יחול */
  position: relative;
  z-index: 1;          /* הכרטיס הראשי מעל האחורי */
}
.works__card-back {
  position: absolute;
  /* גדול מכרטיס התמונה ומקיף אותו מכל הצדדים; יותר מקום בתחתית לשם */
  top: -16px;
  left: -16px;
  right: -16px;
  bottom: -56px;
  border-radius: 16px;       /* מסגרת לבנה — מעט יותר מהכרטיס הפנימי */
  background: #FFFFFF;       /* מסגרת לבנה מסביב לתמונה */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 15px;
  z-index: 0;               /* מאחורי הכרטיס הראשי */
  overflow: hidden;         /* כדי שהשם "יעוף" החוצה וייחתך בקצה */
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.20);
}
/* שם הפרוייקט וה-CTA יושבים באותו מקום בתחתית ומתחלפים בהזחה אופקית */
.works__card-back-name,
.works__card-back-cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 15px;
  text-align: center;
  font-family: "FbSingulari", "Heebo", sans-serif;
  font-weight: 300;          /* דקיק (במקום 600) */
  font-size: 26px;           /* מוגדל מעט */
  white-space: nowrap;
  transition: transform 0.42s cubic-bezier(.2,.8,.25,1), opacity 0.3s ease;
}
.works__card-back-name { color: var(--brand-blue); }            /* שם — כחול */
.works__card-back-cta {                               /* CTA — אפרסק, מחכה מימין */
  color: var(--peach);
  transform: translateX(48px);
  opacity: 0;
}
/* בריחוף: השם עף שמאלה ונעלם, ה-CTA נכנס מימין למרכז */
.works__card-wrap:hover .works__card-back-name {
  transform: translateX(-48px);
  opacity: 0;
}
.works__card-wrap:hover .works__card-back-cta {
  transform: translateX(0);
  opacity: 1;
}
.works__card-back-arrow {
  display: inline-block;
  margin-inline-start: 5px;
  animation: cta-arrow-bob 1.2s ease-in-out infinite; /* חץ כמו בשאר האתר */
}
@media (prefers-reduced-motion: reduce) {
  .works__card-back { transition: none; }
}

@media (max-width: 700px) {
  .works__title--page { font-size: 34px; margin-bottom: 28px; }
  .works--page { margin-top: 90px; padding: 0 16px; }
  .works--archive .gallery__layout { padding: 0 16px; grid-template-columns: 1fr; }
}

/* ============================================================
   ACCESSIBILITY STATEMENT PAGE — תצהיר נגישות
   ============================================================ */
.a11y-statement-page { background: #f5f7fa; min-height: 100vh; }
.a11y-statement {
  max-width: 880px;
  margin: 120px auto 60px;
  padding: 0 32px;
  font-family: "FbSingulari", "Heebo", sans-serif;
  color: #0f1e2e;
  line-height: 1.7;
}
.a11y-statement__inner {
  background: #ffffff;
  padding: 50px 56px;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}
.a11y-statement__title {
  font-size: 42px; font-weight: 800;
  margin: 0 0 22px;
  color: #0f1e2e;
  border-bottom: 3px solid var(--peach);
  padding-bottom: 16px;
}
.a11y-statement__lead { font-size: 18px; margin: 0 0 28px; }
.a11y-statement section { margin: 30px 0; }
.a11y-statement h2 {
  font-size: 24px; font-weight: 700;
  margin: 0 0 12px;
  color: #0f1e2e;
}
.a11y-statement p { font-size: 16.5px; margin: 0 0 12px; }
.a11y-statement__list,
.a11y-statement__contact {
  font-size: 16.5px;
  padding-right: 22px;
  margin: 0;
}
.a11y-statement__list li,
.a11y-statement__contact li { margin: 6px 0; }
.a11y-statement a {
  color: #1565d8; text-decoration: underline;
}
.a11y-statement a:hover { color: var(--peach); }
.a11y-statement code {
  background: #f0f3f7;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.92em;
  font-family: "Courier New", monospace;
}
.a11y-statement kbd {
  background: #0f1e2e; color: var(--text-rest);
  padding: 2px 8px; border-radius: 3px;
  font-size: 0.85em; font-family: "Courier New", monospace;
}
.a11y-statement__sla { font-style: italic; color: #5a6b7c; }
.site-footer-bar__a11y { text-decoration: underline; }

@media (max-width: 700px) {
  .a11y-statement { padding: 0 16px; margin-top: 90px; }
  .a11y-statement__inner { padding: 28px 22px; }
  .a11y-statement__title { font-size: 32px; }
  .a11y-statement h2 { font-size: 20px; }
}

/* ============================================================
   DEFAULT FOCUS INDICATOR — WCAG 2.4.7 AA / SI 5568
   Visible focus ring on every interactive element by default
   (independent of the accessibility widget).
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #1565d8;
  outline-offset: 2px;
  border-radius: 3px;
}

/* ============================================================
   ACCESSIBILITY WIDGET — bottom-left floating button + tile grid panel
   Tiles styled like the WCAG-Israel pattern: white squares with icon
   above + Hebrew label below; active state = coral border.
   ============================================================ */
.a11y-sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}
.a11y-skip {
  position: fixed;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  background: #fff200;
  color: #000000;
  padding: 14px 28px;
  text-decoration: underline;
  font-weight: 700;
  font-family: "FbSingulari", "Heebo", sans-serif;
  border-radius: 0 0 8px 8px;
  transition: top 0.2s ease;
}
.a11y-skip:focus { top: 0; outline: 3px solid #000; }

.a11y-trigger {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9000;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #1565d8;
  color: var(--text-rest);
  border: 2px solid #ffffff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.38);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  padding: 0;
}
.a11y-trigger:hover,
.a11y-trigger:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.48);
  outline: 3px solid #1565d8;
  outline-offset: 3px;
}
.a11y-trigger svg { width: 23px; height: 23px; display: block; }

.a11y-panel {
  position: fixed;
  bottom: 84px;
  left: 24px;
  z-index: 8999;
  width: 460px;
  max-width: calc(100vw - 32px);
  max-height: 80vh;
  overflow-y: auto;
  background: rgba(15, 30, 46, 0.97);
  color: var(--text-rest);
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
  font-family: "FbSingulari", "Heebo", sans-serif;
  font-weight: 400;
  font-size: 14px;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.24s cubic-bezier(.2, .8, .25, 1);
  direction: rtl;
}
.a11y-panel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.a11y-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-weight: 300; font-size: 17px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 14px 14px 0 0;
}
.a11y-panel__title { letter-spacing: 0.5px; }
.a11y-panel__close {
  background: transparent; border: 0; cursor: pointer;
  font-size: 28px; line-height: 1; color: var(--text-rest); padding: 0 6px;
}
.a11y-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 14px;
}
.a11y-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 8px;
  background: #ffffff;
  color: #0f1e2e;
  border: 2px solid transparent;
  cursor: pointer;
  font: inherit;
  text-align: center;
  min-height: 84px;
  transition: transform 0.14s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.a11y-tile:hover { transform: translateY(-1px); background: #f5f7fa; }
.a11y-tile:focus-visible { outline: 3px solid #1565d8; outline-offset: 2px; }
.a11y-tile.is-active { background: #ffffff; color: var(--peach); border-color: var(--peach); }
.a11y-tile__icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; }
.a11y-tile__icon svg { width: 100%; height: 100%; }
.a11y-tile__label { font-weight: 300; font-size: 12.5px; line-height: 1.15; }
.a11y-panel__foot {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.a11y-reset {
  display: flex; align-items: center; gap: 8px;
  background: #ffffff; color: #C95860;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font: inherit; font-weight: 300; font-size: 13px;
}
.a11y-reset:hover { background: #fff0f1; border-color: var(--peach); }
.a11y-reset .a11y-tile__icon { width: 18px; height: 18px; color: #C95860; }
.a11y-panel__links { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.a11y-report { color: var(--text-rest); text-decoration: none; font-size: 12.5px; }
.a11y-report:hover { color: var(--peach); }

/* Hover tooltip for "הצגת תיאור" mode */
.a11y-tip {
  position: fixed; z-index: 99998;
  background: #0f1e2e; color: var(--text-rest);
  padding: 8px 14px; border-radius: 6px;
  font-size: 14px; font-weight: 600;
  font-family: "FbSingulari", "Heebo", sans-serif;
  pointer-events: none;
  opacity: 0; transition: opacity 0.12s ease;
  max-width: 320px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.a11y-tip.is-on { opacity: 1; }

/* Alt-text caption — visible label injected next to images */
.a11y-alt-caption { display: none; }
body.a11y-alt-text .a11y-alt-caption {
  display: block;
  background: #ffeeba; color: #5a4500;
  border: 1px dashed #b08900;
  padding: 4px 10px;
  font-size: 12px; font-weight: 600;
  margin-top: 2px; border-radius: 4px;
  font-family: "FbSingulari", "Heebo", sans-serif;
}
body.a11y-alt-text img[alt]:not([alt=""]) { outline: 2px solid #b08900; outline-offset: 1px; }
body.a11y-alt-text img:not([alt]),
body.a11y-alt-text img[alt=""] { outline: 3px dashed #e60000; outline-offset: 2px; }

/* ===== Body-class effects — keep panel/trigger usable in every mode ===== */

/* Keyboard navigation — prominent focus rings */
body.a11y-keyboard *:focus,
body.a11y-keyboard *:focus-visible {
  outline: 4px solid #fff200 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 7px rgba(0, 0, 0, 0.75) !important;
  border-radius: 4px !important;
}

/* Stop animations / blinking */
body.a11y-no-anim *,
body.a11y-no-anim *::before,
body.a11y-no-anim *::after {
  animation: none !important;
  transition: none !important;
}

/* Page wrapper — created by a11y.js to host filters/zoom without breaking
   position:fixed on the widget. By default it behaves like a transparent
   block. */
.a11y-page-wrap { display: block; }

/* Filter group — applied to the page wrapper so the floating button and
   panel (which are siblings of the wrap, NOT inside it) keep their fixed
   anchor to the viewport. */
body.a11y-grayscale .a11y-page-wrap { filter: grayscale(1); }
body.a11y-sepia     .a11y-page-wrap { filter: sepia(0.85); }
body.a11y-invert    .a11y-page-wrap { filter: invert(1) hue-rotate(180deg); }
body.a11y-invert    .a11y-page-wrap img,
body.a11y-invert    .a11y-page-wrap video,
body.a11y-invert    .a11y-page-wrap canvas { filter: invert(1) hue-rotate(180deg); }

/* High contrast — boost contrast filter without breaking color identity */
body.a11y-contrast-hi .a11y-page-wrap { filter: contrast(1.55) saturate(1.3); }

/* Black/Yellow — strict mono */
body.a11y-black-yellow,
body.a11y-black-yellow * {
  background: #000000 !important;
  background-image: none !important;
  color: #fff200 !important;
  border-color: #fff200 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}
body.a11y-black-yellow a,
body.a11y-black-yellow a * { color: #00e8ff !important; text-decoration: underline !important; }
body.a11y-black-yellow img,
body.a11y-black-yellow video,
body.a11y-black-yellow canvas { filter: grayscale(1) contrast(1.4); opacity: 0.7; }
/* Keep widget surfaces readable in B/Y mode */
body.a11y-black-yellow .a11y-trigger,
body.a11y-black-yellow .a11y-panel,
body.a11y-black-yellow .a11y-panel *,
body.a11y-black-yellow .a11y-tile,
body.a11y-black-yellow .a11y-tile *,
body.a11y-black-yellow .a11y-reset { background: #000 !important; color: #fff200 !important; border-color: #fff200 !important; }

/* Always exempt the widget from filters that affect the whole page */
body.a11y-grayscale .a11y-trigger,
body.a11y-grayscale .a11y-panel,
body.a11y-sepia .a11y-trigger,
body.a11y-sepia .a11y-panel,
body.a11y-invert .a11y-trigger,
body.a11y-invert .a11y-panel,
body.a11y-contrast-hi .a11y-trigger,
body.a11y-contrast-hi .a11y-panel { filter: none; }

/* Heading highlight */
body.a11y-headings h1,
body.a11y-headings h2,
body.a11y-headings h3,
body.a11y-headings h4,
body.a11y-headings h5,
body.a11y-headings h6 {
  outline: 3px solid #1565d8 !important;
  outline-offset: 3px !important;
  background: #fff200 !important;
  color: #000000 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
}

/* Link highlight */
body.a11y-links a,
body.a11y-links a * {
  background: #fff200 !important;
  color: #000000 !important;
  text-decoration: underline !important;
  outline: 2px solid #000000 !important;
  outline-offset: 2px !important;
}

/* Fonts */
body.a11y-font-fixed,
body.a11y-font-fixed * { font-family: "Courier New", "Consolas", monospace !important; letter-spacing: 0.01em !important; }
body.a11y-font-readable,
body.a11y-font-readable * { font-family: "Arial", "Heebo", "Helvetica", sans-serif !important; letter-spacing: 0.02em !important; }

/* Font size scaling — handled by JS DOM walker in a11y.js (scaleAllFonts).
   CSS alone can't override px-based font-sizes throughout the site. */

/* Whole-page zoom — applied to the wrapper so the widget stays at its
   fixed pixel offset from the real viewport. */
body.a11y-zoom-in  .a11y-page-wrap { zoom: 1.2; }
body.a11y-zoom-out .a11y-page-wrap { zoom: 0.85; }
/* Any mode that breaks custom-cursor positioning — zoom (clientX/Y
   doesn't follow CSS zoom) and filters/black-yellow on .a11y-page-wrap
   (which create a new containing block for fixed-position descendants
   like .custom-cursor). Hide the custom cursor + page-liquid blob, and
   restore the native cursor that the site CSS would otherwise suppress. */
body.a11y-zoom-in    .custom-cursor,
body.a11y-zoom-out   .custom-cursor,
body.a11y-grayscale  .custom-cursor,
body.a11y-sepia      .custom-cursor,
body.a11y-invert     .custom-cursor,
body.a11y-contrast-hi .custom-cursor,
body.a11y-black-yellow .custom-cursor,
body.a11y-zoom-in    .page-liquid,
body.a11y-zoom-out   .page-liquid,
body.a11y-grayscale  .page-liquid,
body.a11y-sepia      .page-liquid,
body.a11y-invert     .page-liquid,
body.a11y-contrast-hi .page-liquid,
body.a11y-black-yellow .page-liquid { display: none !important; }

body.a11y-zoom-in,    body.a11y-zoom-in *,
body.a11y-zoom-out,   body.a11y-zoom-out *,
body.a11y-grayscale,  body.a11y-grayscale *,
body.a11y-sepia,      body.a11y-sepia *,
body.a11y-invert,     body.a11y-invert *,
body.a11y-contrast-hi, body.a11y-contrast-hi *,
body.a11y-black-yellow, body.a11y-black-yellow * { cursor: auto !important; }
body.a11y-zoom-in    a, body.a11y-zoom-in    button,
body.a11y-zoom-out   a, body.a11y-zoom-out   button,
body.a11y-grayscale  a, body.a11y-grayscale  button,
body.a11y-sepia      a, body.a11y-sepia      button,
body.a11y-invert     a, body.a11y-invert     button,
body.a11y-contrast-hi a, body.a11y-contrast-hi button,
body.a11y-black-yellow a, body.a11y-black-yellow button { cursor: pointer !important; }

/* Cursor — apply to body+all. Also force the site's custom cursor and
   page-liquid blob off so only the accessibility cursor is visible. */
body.a11y-cursor-black, body.a11y-cursor-black * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'><path fill='%23000' stroke='%23fff' stroke-width='1' d='M5 3l13 9-6 1 3 7-2 1-3-7-5 4z'/></svg>") 0 0, auto !important;
}
body.a11y-cursor-big, body.a11y-cursor-big * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 24 24'><path fill='%23fff' stroke='%23000' stroke-width='1.4' d='M5 3l13 9-6 1 3 7-2 1-3-7-5 4z'/></svg>") 0 0, auto !important;
}
body.a11y-cursor-black .custom-cursor,
body.a11y-cursor-big   .custom-cursor,
body.a11y-cursor-black .page-liquid,
body.a11y-cursor-big   .page-liquid { display: none !important; }

/* Stop animations / blinking — also kill the canvas-driven and
   cursor-follower effects that don't use CSS animations. */
body.a11y-no-anim .page-liquid,
body.a11y-no-anim .custom-cursor { display: none !important; }

@media (max-width: 640px) {
  .a11y-trigger { width: 42px; height: 42px; bottom: 16px; left: 16px; }
  .a11y-trigger svg { width: 20px; height: 20px; }
  .a11y-panel { left: 12px; bottom: 68px; width: calc(100vw - 24px); }
  .a11y-grid { grid-template-columns: repeat(3, 1fr); }
  .a11y-tile { min-height: 78px; }
  .a11y-tile__label { font-size: 11.5px; }
}

/* ============================================================
   SITE-WIDE FIXED FOOTER BAR
   Pinned to bottom of every page. Centre = "עיצוב אפיון ופיתוח:" + logo.
   Right side (RTL) = phone & email contact links.
   ============================================================ */
.site-footer-bar {
  position: relative;
  background: rgba(5, 13, 26, 0.88);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 22px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-rest);
  font-family: "FbSingulari", "Heebo", sans-serif;
  font-weight: 300;
  font-size: 17px;
  margin-top: 60px;
}
.site-footer-bar__contact {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-shrink: 0;
}
.site-footer-bar__a11y-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-inline-end: 64px;
}
.site-footer-bar__link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
  direction: ltr;
  unicode-bidi: embed;
  cursor: pointer;
}
.site-footer-bar__link:hover { color: var(--peach); }
.site-footer-bar__a11y {
  direction: rtl;
  text-decoration: none;
}
.site-footer-bar__center {
  display: flex;
  align-items: center;
  gap: 12px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
}
.site-footer-bar__logo {
  height: 22px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

/* Email = "copy on click" — surface a copy icon + tooltip so users know
   this isn't a mailto, plus a green check confirming the copy. The
   element is a <button>, so the browser's mailto: status-bar URL is
   gone entirely. */
button.site-footer-bar__email {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}
.site-footer-bar__email {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.18s ease;
}
.site-footer-bar__email:hover { background: rgba(255, 255, 255, 0.08); }
.site-footer-bar__email::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16 1H4a2 2 0 0 0-2 2v14h2V3h12V1zm3 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 16H8V7h11v14z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16 1H4a2 2 0 0 0-2 2v14h2V3h12V1zm3 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 16H8V7h11v14z'/></svg>") no-repeat center / contain;
  opacity: 0.65;
  flex-shrink: 0;
  transition: opacity 0.18s ease;
}
/* Copied state — swap the copy mask for a white check, right where
   the copy icon was. Pops in with a small bounce. */
.site-footer-bar__email.is-copied::before {
  background: #ffffff;
  opacity: 1;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>") no-repeat center / contain;
  animation: footerCheckSwap 0.4s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes footerCheckSwap {
  0%   { transform: scale(0.2); }
  60%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
/* Hover hint — small text, no frame. Hidden in copied state. */
.site-footer-bar__email[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  color: rgba(255, 255, 255, 0.78);
  background: transparent;
  padding: 0;
  border: 0;
  font-size: 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  direction: rtl;
  font-weight: 500;
}
.site-footer-bar__email:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.site-footer-bar__email.is-copied::after { opacity: 0 !important; }

@media (max-width: 700px) {
  .site-footer-bar {
    padding: 16px 18px;
    font-size: 14px;
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }
  .site-footer-bar__contact { gap: 18px; flex-wrap: wrap; justify-content: center; }
  .site-footer-bar__center {
    position: static;
    transform: none;
    left: auto;
    font-size: 12px;
  }
  .site-footer-bar__logo { height: 18px; }
}

/* ============================================================
   CUSTOM SCROLLBAR
   Track = site navy blue, thumb = the cursor's coral/peach colour.
   ============================================================ */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--peach) #0f1e2e;
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: #0f1e2e;
}
::-webkit-scrollbar-thumb {
  background: var(--peach);
  border-radius: 6px;
  border: 2px solid #0f1e2e;
}
::-webkit-scrollbar-thumb:hover {
  background: #D55A60;
}
::-webkit-scrollbar-corner {
  background: #0f1e2e;
}

body {
  min-height: 100vh;
  /* Single master gradient — flows through the entire site.
     - Hero zone (top ~14%) is uniformly darker
     - Transitions gradually through the upper works
     - Reaches peak brightness around the middle of works
     - Stays bright through the lower works and contact
     - Subtly deepens near the very bottom (above the footer) */
  background: #081423;
}

img { max-width: 100%; display: block; }

/* ============================================================
   HERO  (Figma node 1:7  —  1440 × 794)
   ============================================================ */
.shader-zone {
  position: relative;
}

/* כיבוי אפקט הרקע מהפאנל — מסתיר את קנבס הרעש ואת נוזל הסמן */
body[data-bg-effect="off"] .hero__noise,
body[data-bg-effect="off"] .page-liquid {
  display: none !important;
}


.hero {
  position: relative;
  width: 100%;
  min-height: 794px;
  overflow: hidden;
  isolation: isolate;
}

/* --- background composition ---
   The Figma hero is a soft, organic blue/cyan/denim gradient with
   curving light sweeps. Recreated as stacked radial gradients with
   blend modes to approximate the painterly look in the design. */
.hero__bg {
  position: absolute; inset: 0;
  z-index: -1;
}
.hero__bg-layer {
  position: absolute; inset: 0;
  transition: opacity 0.6s ease;
}
/* FBM-noise WebGL layer — covers the full shader-zone (hero + works).
   Fades to black via mask-image over the works section. */
.hero__noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, black 48%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 48%, transparent 100%);
}
.shader-zone.has-shader .hero__noise { opacity: 1; }
.hero.has-shader .hero__bg-layer { opacity: 0; }

/* Lift hero and works content above the canvas */
.hero { z-index: 1; }
.works { position: relative; z-index: 1; }
/* Hero background image — pinned to the LEFT side, larger (70%).
   Two combined gradient masks fade the image out on the RIGHT edge
   and on the BOTTOM edge, so neither boundary of the photo is ever
   visible — it dissolves smoothly into the blue background. Low
   opacity keeps the body's master gradient as the dominant tone. */
.hero__bg-layer--base {
  background: none;
}


/* All other static layers disabled — only the interactive liquid
   cursor blobs and the film grain sit on top. */
.hero__bg-layer--blob1,
.hero__bg-layer--blob2,
.hero__bg-layer--blob3,
.hero__bg-layer--shine {
  background: none;
  mix-blend-mode: normal;
}

/* --- Page-wide liquid cursor follower ---
   Lives outside the hero in a viewport-fixed container so the effect
   continues to follow the cursor across every section of the page.
   JS sets `--liquid-strength` based on how far down the cursor is —
   full strength in the hero, fading to zero deeper into the works
   section, so the effect "weakens" naturally as the user scrolls. */
.page-liquid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;             /* sit above body background, below content */
  opacity: var(--liquid-strength, 0);
  /* Very heavy blur — far larger than the source radius. The blur
     dissolves the radial circle into an amorphous fluid cloud that
     never reads as a defined shape. */
  filter: blur(75px);
  will-change: opacity;
}
.page-liquid__blob {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: background-position;
}
/* Five small wisps of light-blue "smoke" that lag behind the pointer
   at different speeds. Each is very translucent so together they read
   as drifting vapour, not a beam of light. JS scales the parent
   opacity by pointer-velocity so the smoke only shows up when the
   cursor is actively moving — quick swipes leave a denser puff, slow
   drifts barely show, and stopping dissipates the smoke in ~500ms. */
/* Single cyan fluid — the source radius is small relative to the
   parent's blur, so the result reads as a soft, amorphous puddle
   that never feels like a circle. */
.page-liquid__blob--a {
  background: radial-gradient(
    130px 130px at var(--xa, 50%) var(--ya, 50%),
    rgba(115, 200, 245, 0.38) 0%,
    rgba(115, 200, 245, 0.20) 40%,
    rgba(115, 200, 245, 0.08) 65%,
    rgba(115, 200, 245, 0) 88%
  );
}
/* subtle film grain so the gradients don't band */
.hero__bg-layer--grain {
  background-image:
    radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
  opacity: 0.5;
  pointer-events: none;
}

/* --- Hero text --- */
.hero__content {
  position: relative;
  z-index: 2;
  max-width: none;
  margin: 0;
  padding: 180px 32px 80px 80px; /* right=32px matches the archive gallery layout */
  min-height: 794px;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* RTL: visually right */
}
.hero__title {
  margin: 0;
  font-family: "FbSingulari", "Heebo", sans-serif;
  font-weight: 400;
  font-size: calc(90px + 1.5cm);
  line-height: 1.05;
  letter-spacing: -0.01em;
  /* Filled by default — outline shows on hover */
  color: var(--text-main);
  -webkit-text-stroke: 0 transparent;
  text-stroke: 0 transparent;
  text-align: right;
}
/* Hero title — each word storms in from far on the right, scaled up
   and heavily blurred, then crashes into focus with a soft glow halo
   that fades. Uses transitions (not @keyframes) so it respects
   browser/OS animation policies consistently. */
.hero__title span {
  display: block;
  /* Size each span to its text width only, so the move-tool outline
     hugs the letters instead of stretching to the widest word. RTL
     direction naturally positions the box at the right. */
  width: fit-content;
  opacity: 0;
  transform: translateX(500px) scale(1.2);
  filter: blur(28px) drop-shadow(0 0 30px rgba(255, 255, 255, 0.55));
  transform-origin: right center;
  transition:
    opacity 1.5s cubic-bezier(.19, 1, .22, 1),
    transform 1.5s cubic-bezier(.19, 1, .22, 1),
    filter 1.5s cubic-bezier(.19, 1, .22, 1);
  will-change: transform, filter, opacity;
}
.hero__title.is-in span {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0) drop-shadow(0 0 0 rgba(255, 255, 255, 0));
}
.hero__title.is-in span:nth-child(1) { transition-delay: 0.20s; }
.hero__title.is-in span:nth-child(2) { transition-delay: 0.60s; }
.hero__title.is-in span:nth-child(3) { transition-delay: 1.00s; }
.hero__title.is-in span:nth-child(4) { transition-delay: 1.40s; }

/* Trailing period coloured in cursor coral — sits as a regular inline child
   of each title <span> so the entrance animation and hover stroke still
   apply to the whole word. */
.hero__dot {
  color: var(--text-rest);
  font-weight: inherit;
  font-style: inherit;
}

/* Hover effect disabled — words stay solid white, only "גבולות" carries
   a permanent coral outline (see .hero__outline below). */
.hero__title span { position: relative; }
.hero__title span::after { content: none; }

/* Outline-only word style — applied to each letter of the rotating
   middle word via .hero__line-letter--outline. The wrapper <em> itself
   is replaced by per-letter spans every cycle. */
.hero__outline {
  color: transparent;
  -webkit-text-stroke: 2px #ffffff;
  text-stroke: 2px #ffffff;
  font-style: normal;
}

/* The <em> wrapper for the rotating word — kill the browser default
   italic so the letters render upright, like the rest of the title. */
.hero__title .hero__outline-wrap {
  font-style: normal;
}

/* Per-letter typewriter — applied only to the MIDDLE word's letters
   inside .hero__outline-wrap. "של" stays plain text; "שלך" gets the
   same animation but as a single block (its --i = the slot after the
   middle word's last letter, so it joins the rhythm seamlessly). */
.hero__title .hero__line-letter,
.hero__title .hero__rotating-after {
  display: inline-block;
  width: auto;
  vertical-align: baseline;
  font-style: normal;
  opacity: 0;
  animation: heroLineLetterCycle 5.5s ease-in-out both;
  animation-delay: calc(var(--i) * 0.07s);
}
.hero__title .hero__line-letter--outline {
  color: transparent;
  -webkit-text-stroke: 2px #ffffff;
  text-stroke: 2px #ffffff;
}
@keyframes heroLineLetterCycle {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  78%  { opacity: 1; }
  88%  { opacity: 0; }
  100% { opacity: 0; }
}


/* Rotating circular service-list badge sitting next to the hero title.
   JS appends one <span> per char to .hero__badge-ring, each tagged with
   a --a custom property that places it on the circle. The whole ring
   spins continuously via CSS animation. */
/* Badge lives at shader-zone level (sibling of .hero) so it can cross
   into the white "about" banner without getting clipped by .hero's
   overflow:hidden. Position so the lower portion sits on the banner. */
.hero__badge {
  position: absolute;
  /* Hero ends at 794px; badge is 200px tall; we want 60% (120px)
     above the hero/banner boundary and 40% (80px) below it. */
  top: 674px;
  left: 80px;
  width: 200px;
  height: 200px;
  z-index: 5;
  pointer-events: none;
}
@media (max-width: 900px) {
  .hero__badge { top: 480px; }
}
.hero__badge-ring {
  position: relative;
  width: 100%;
  height: 100%;
  animation: hero-badge-spin 22s linear infinite;
}
.hero__badge-ring span {
  position: absolute;
  left: 50%;
  top: 50%;
  font-family: "FbSingulari", "Heebo", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--peach);
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(-78px);
  transform-origin: center;
  display: inline-block;
  line-height: 1;
  white-space: pre;
}
@keyframes hero-badge-spin {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}
@media (max-width: 900px) {
  .hero__badge { width: 140px; height: 140px; bottom: 60px; left: 32px; }
  .hero__badge-ring span { font-size: 13px; transform: translate(-50%, -50%) rotate(var(--a)) translateY(-55px); }
}

/* === All-titles alignment (Hero + Works + Contact, via [data-title-align]) === */

/* Right (default) — hero + contact only; works__title stays centered */
body[data-title-align="right"] .hero__title,
body[data-title-align="right"] .contact__title {
  text-align: right;
}
body[data-title-align="right"] .hero__title span {
  margin-left: auto;
  margin-right: 0;
}

/* Center — all three centered */
body[data-title-align="center"] .hero__title,
body[data-title-align="center"] .contact__title {
  text-align: center;
}
body[data-title-align="center"] .hero__title span {
  margin-left: auto;
  margin-right: auto;
}

/* Left — hero + contact; works stays centered */
body[data-title-align="left"] .hero__title,
body[data-title-align="left"] .contact__title {
  text-align: left;
}
body[data-title-align="left"] .hero__title span {
  margin-left: 0;
  margin-right: auto;
}

/* === 10 title-hover animation variants (chosen via [data-title-anim] on body) === */

/* Style 1 — Instant: no transition */
body[data-title-anim="1"] .hero__title span::after { transition: none; }

/* Style 2 — Smooth fade (slower) */
body[data-title-anim="2"] .hero__title span::after {
  transition: opacity 0.8s ease;
}

/* Style 3 — Wipe RTL (right→left, natural Hebrew direction) */
body[data-title-anim="3"] .hero__title span::after {
  opacity: 1;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.9s cubic-bezier(.6, .2, .25, 1);
}
body[data-title-anim="3"] .hero__title span:hover::after { clip-path: inset(0 0 0 0); }

/* Style 4 — Wipe LTR (left→right) */
body[data-title-anim="4"] .hero__title span::after {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s cubic-bezier(.6, .2, .25, 1);
}
body[data-title-anim="4"] .hero__title span:hover::after { clip-path: inset(0 0 0 0); }

/* Style 5 — Wipe Top→Bottom */
body[data-title-anim="5"] .hero__title span::after {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s ease;
}
body[data-title-anim="5"] .hero__title span:hover::after { clip-path: inset(0 0 0 0); }

/* Style 6 — Wipe Bottom→Top */
body[data-title-anim="6"] .hero__title span::after {
  opacity: 1;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.8s ease;
}
body[data-title-anim="6"] .hero__title span:hover::after { clip-path: inset(0 0 0 0); }

/* Style 7 — Center expand (horizontal) */
body[data-title-anim="7"] .hero__title span::after {
  opacity: 1;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 0.7s ease;
}
body[data-title-anim="7"] .hero__title span:hover::after { clip-path: inset(0 0 0 0); }

/* Style 8 — Bounce RTL (overshoot easing) */
body[data-title-anim="8"] .hero__title span::after {
  opacity: 1;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.7s cubic-bezier(.34, 1.56, .64, 1);
}
body[data-title-anim="8"] .hero__title span:hover::after { clip-path: inset(0 0 0 0); }

/* Style 9 — Stroke grow (width 0 → 1.5) */
body[data-title-anim="9"] .hero__title span::after {
  opacity: 1;
  -webkit-text-stroke-width: 0;
  text-stroke-width: 0;
  transition: -webkit-text-stroke-width 0.5s cubic-bezier(.34, 1.56, .64, 1);
}
body[data-title-anim="9"] .hero__title span:hover::after {
  -webkit-text-stroke-width: 1.5px;
  text-stroke-width: 1.5px;
}

/* Style 10 — Slow Draw (very slow RTL wipe) */
body[data-title-anim="10"] .hero__title span::after {
  opacity: 1;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1.6s linear;
}
body[data-title-anim="10"] .hero__title span:hover::after { clip-path: inset(0 0 0 0); }


/* ============================================================
   NAVBAR  (Figma node 1:82  —  overlays hero, ~86px tall)
   ============================================================ */
.nav {
  position: fixed;
  top: 0; right: 0; left: 0;
  z-index: 50;
  background: rgba(5, 13, 26, 0.65);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav__inner {
  width: 100%;
  margin: 0 auto;
  height: 79px;
  padding: 0 32px 0 35px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
}
.nav__links {
  display: flex;
  gap: 32px;
  align-items: center;
}
.nav__link {
  color: var(--text-rest);
  font-family: "FbSingulari", "Heebo", sans-serif;
  font-size: 17px;
  font-weight: 300;
  text-decoration: none;
  letter-spacing: 0.01em;
  /* מסגרת דקיקה + מלבן מעוגל ממש (pill) */
  display: inline-flex;
  align-items: center;
  padding: 7px 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  /* Snappier bouncy curve for the hover pop, slower ease for hide/show */
  transition: opacity 0.35s ease,
              transform 0.28s cubic-bezier(.34, 1.56, .64, 1),
              border-color 0.25s ease, background 0.25s ease;
}
/* Hover — link pops up slightly with a small bounce + מסגרת מודגשת */
.nav__link:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
}
/* Hidden when its target section is the one currently in view */
.nav__link.is-hidden {
  opacity: 0;
  transform: translateY(-6px) scale(0.94);
  pointer-events: none;
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: transform 0.28s cubic-bezier(.34, 1.56, .64, 1);
}
.nav__logo-img {
  height: 28px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}
.nav__logo:hover {
  transform: translateY(-4px);
}

/* ============================================================
   WORKS GALLERY  (Figma node 1:16  —  1440 × 1292)
   ============================================================ */
/* Full-width white "about" banner between hero and works */
.banner {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  margin: 0 40px;          /* טיפה מהצדדים — חושף את הקצוות מאחור */
  border-radius: 28px;     /* פינות מעוגלות */
  padding: 80px 0;
  --scroll-progress: 0;
}
.banner__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
  opacity: var(--scroll-progress);
  transform:
    translateY(calc((1 - var(--scroll-progress)) * 140px))
    scale(calc(0.86 + var(--scroll-progress) * 0.14));
  will-change: opacity, transform;
}

.banner__text {
  font-family: "FbSingulari", "Heebo", sans-serif;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.7;
  color: #0f1e2e;
  margin: 0;
}
@media (max-width: 700px) {
  .banner { padding: 56px 0; margin: 0 16px; border-radius: 20px; }
  .banner__text { font-size: 18px; line-height: 1.6; }
}

/* ===== 10 וריאציות למיקום הטקסט/באנר מתחת לכותרת (נשלט מהפאנל) ===== */
/* 1 = ברירת המחדל (כרטיס לבן ממורכז) — ללא override */

/* 2 — ללא רקע, ממורכז ואוורירי */
body[data-banner-style="2"] .banner {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  margin: 0; border-radius: 0;
}
body[data-banner-style="2"] .banner__text { color: var(--text-rest); }

/* 3 — מיושר לימין, עמודה צרה (כרטיס) */
body[data-banner-style="3"] .banner {
  width: min(640px, calc(100% - 100px)); margin-inline: 60px auto;
}
body[data-banner-style="3"] .banner__inner { text-align: right; }

/* 4 — רצועה רחבה ודקה (לבן, מקצה לקצה) */
body[data-banner-style="4"] .banner {
  background: rgba(255, 255, 255, 0.92); margin: 0; border-radius: 0; padding: 38px 0;
}
body[data-banner-style="4"] .banner__inner { max-width: 1240px; }
body[data-banner-style="4"] .banner__text { font-size: 18px; line-height: 1.6; }

/* 5 — כרטיס מוסט הצידה */
body[data-banner-style="5"] .banner { margin-inline: 40px 200px; }

/* 6 — ציטוט גדול ואוורירי (ללא רקע) */
body[data-banner-style="6"] .banner {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  margin: 0; border-radius: 0; padding: 90px 0;
}
body[data-banner-style="6"] .banner__inner { max-width: 920px; }
body[data-banner-style="6"] .banner__text { color: var(--text-rest); font-size: 30px; line-height: 1.85; }

/* 7 — קו מבטא אפרסק למעלה (ללא רקע) */
body[data-banner-style="7"] .banner {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  margin: 0; border-radius: 0;
}
body[data-banner-style="7"] .banner__inner {
  max-width: 880px; border-top: 3px solid var(--peach); padding-top: 40px;
}
body[data-banner-style="7"] .banner__text { color: var(--text-rest); }

/* 8 — קפסולה צרה (פינות עגולות מאוד) */
body[data-banner-style="8"] .banner {
  width: min(720px, calc(100% - 80px)); margin: 0 auto; border-radius: 70px; padding: 56px 0;
}
body[data-banner-style="8"] .banner__inner { max-width: 600px; }

/* 9 — רחב עם הרבה אוויר */
body[data-banner-style="9"] .banner { padding: 110px 0; }
body[data-banner-style="9"] .banner__inner { max-width: 1180px; }
body[data-banner-style="9"] .banner__text { line-height: 2.05; letter-spacing: 0.01em; }

/* 10 — מינימלי, טקסט קטן ואוורירי (ללא רקע) */
body[data-banner-style="10"] .banner {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  margin: 0; border-radius: 0; padding: 56px 0;
}
body[data-banner-style="10"] .banner__inner { max-width: 720px; }
body[data-banner-style="10"] .banner__text { color: var(--text-rest); font-size: 17px; line-height: 1.85; opacity: 0.9; }

/* ===== Clients bar — "כבר עשו את הצעד" ===== */
.clients {
  position: relative;
  z-index: 2;
  padding: 80px 0 100px;
  text-align: center;
}
.clients__title {
  font-family: "FbSingulari", "Heebo", sans-serif;
  font-weight: 300;
  font-size: 44px;
  line-height: 1.2;
  color: var(--text-rest);
  margin: 0 0 48px;
}
.clients__track {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* LTR כדי שה-marquee יעוגן משמאל ויגלוש ימינה => נסיעה שמאלה מכניסה כרטיסים מימין */
  direction: ltr;
  /* ריווח אנכי כדי שקפיצת ה-hover והצל לא ייחתכו ע"י overflow:hidden */
  padding: 16px 0 26px;
  /* דהייה רכה בקצוות */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.clients__marquee {
  display: flex;
  width: max-content;
  direction: ltr; /* פריסה פיזית עקבית (הלוגואים הם תמונות, לא מושפעים) */
  will-change: transform;
  /* התנועה מונעת ע"י JavaScript (requestAnimationFrame) — שרשרת רציפה כמו lightSlider */
}
.clients__group {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-left: 24px; /* שומר רווח זהה בתפר בין הקבוצות */
}
.clients__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  width: 200px;
  height: 140px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(45, 72, 98, 0.12);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
/* עטרת ברוך + חוק לישראל — ריווח קטן יותר כדי שהלוגו יגדל עוד */
.clients__item--big { padding: 6px; }
.clients__item img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .72;
  transition: filter .35s ease, opacity .35s ease;
}
.clients__item:hover,
.clients__item:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(45, 72, 98, 0.20);
}
.clients__item:hover img,
.clients__item:focus-visible img {
  filter: grayscale(0);
  opacity: 1;
}
@media (max-width: 700px) {
  .clients { padding: 56px 0 64px; }
  .clients__title { font-size: 30px; margin-bottom: 32px; }
  .clients__group { gap: 16px; padding-left: 16px; }
  .clients__item { width: 158px; height: 112px; padding: 10px; }
  .clients__item--big { padding: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  /* הלופ נשאר רץ לפי בקשת המשתמש; מבטלים רק את מיקרו-אנימציות ה-hover */
  .clients__item, .clients__item img { transition: none; }
}

.works {
  /* Transparent — the body's master gradient handles all the colour
     flow. The section sits over it cleanly without any local
     background that would create a visible seam. */
  background: transparent;
  padding: 200px 0 80px;
}
.works__title {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px 80px;
  font-family: "FbSingulari", "Heebo", sans-serif;
  font-weight: 300;
  --scroll-progress: 0;
  will-change: opacity, transform, filter, clip-path;
  font-size: 44px;
  line-height: 1.2;
  color: var(--text-main);
  text-align: center;
}

/* === 10 scroll-reveal variants for .works__title (driven by --scroll-progress 0→1) === */

/* Style 1 — Fade */
body[data-works-anim="1"] .works__title {
  opacity: var(--scroll-progress);
}

/* Style 2 — Slide up + fade */
body[data-works-anim="2"] .works__title {
  opacity: var(--scroll-progress);
  transform: translateY(calc((1 - var(--scroll-progress)) * 80px));
}

/* Style 3 — Slide from right + fade */
body[data-works-anim="3"] .works__title {
  opacity: var(--scroll-progress);
  transform: translateX(calc((1 - var(--scroll-progress)) * 120px));
}

/* Style 4 — Slide from left + fade */
body[data-works-anim="4"] .works__title {
  opacity: var(--scroll-progress);
  transform: translateX(calc((1 - var(--scroll-progress)) * -120px));
}

/* Style 5 — Scale up + fade */
body[data-works-anim="5"] .works__title {
  opacity: var(--scroll-progress);
  transform: scale(calc(0.6 + var(--scroll-progress) * 0.4));
  transform-origin: center;
}

/* Style 6 — Blur in + fade */
body[data-works-anim="6"] .works__title {
  opacity: var(--scroll-progress);
  filter: blur(calc((1 - var(--scroll-progress)) * 18px));
}

/* Style 7 — Wipe RTL (right→left, natural Hebrew direction) */
body[data-works-anim="7"] .works__title {
  clip-path: inset(0 0 0 calc((1 - var(--scroll-progress)) * 100%));
}

/* Style 8 — Wipe LTR */
body[data-works-anim="8"] .works__title {
  clip-path: inset(0 calc((1 - var(--scroll-progress)) * 100%) 0 0);
}

/* Style 9 — Rotate in + fade */
body[data-works-anim="9"] .works__title {
  opacity: var(--scroll-progress);
  transform: rotate(calc((1 - var(--scroll-progress)) * -8deg))
             translateY(calc((1 - var(--scroll-progress)) * 40px));
  transform-origin: center;
}

/* Style 10 — Cinematic (blur + slide up + fade) */
body[data-works-anim="10"] .works__title {
  opacity: var(--scroll-progress);
  filter: blur(calc((1 - var(--scroll-progress)) * 12px));
  transform: translateY(calc((1 - var(--scroll-progress)) * 60px))
             scale(calc(0.92 + var(--scroll-progress) * 0.08));
  transform-origin: center;
}

/* ============================================================
   GALLERY PAGE  (gallery-logo.html and future per-work galleries)
   ============================================================ */
.gallery {
  max-width: 1500px;
  margin: 0 auto;
  padding: 120px 40px 80px;
  position: relative;
  z-index: 1;
}
.gallery__back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 110px;
  padding: 0 20px;
  border-radius: 8px;
  font-family: "FbSingulari", "Heebo", sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1;
  background: transparent;
  color: var(--text-rest);
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease;
}
.gallery__back-link:hover { color: var(--peach); }
.gallery__back-link:active { transform: translateY(1px); }
.gallery__title {
  margin: 0 0 12px;
  font-family: "FbSingulari", "Heebo", sans-serif;
  font-weight: 300;
  font-size: 52px;
  line-height: 1.1;
  color: var(--text-main);
}
.gallery__intro {
  margin: 0 0 48px;
  max-width: 700px;
  font-family: "FbSingulari", "Heebo", sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}
.gallery__subtitle {
  margin: 0 0 48px;
  font-family: "FbSingulari", "Heebo", sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
}
/* ============================================================
   WORKS ARCHIVE PAGE (works-archive.html)
   Two-column layout: gallery on the right, filter sidebar on the left.
   ============================================================ */
/* Archive page: drop the centring container and pull the sidebar right
   up against the LEFT edge of the screen. */
.archive-page .gallery {
  max-width: none;
  padding-left: 16px;
  padding-right: 32px;
}
.gallery__layout {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 20px;
  align-items: start;
}
.archive__filters {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.archive__filters-title {
  margin: 0 0 6px;
  font-family: "FbSingulari", "Heebo", sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.05em;
  text-align: center;
}
.archive__filter {
  display: block;
  width: 100%;
  height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  font-family: "FbSingulari", "Heebo", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1;
  text-align: center;
  background: #ffffff;
  color: var(--peach);
  border: 0;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease;
}
.archive__filter:hover {
  background: rgba(255, 255, 255, 0.9);
  color: #C95860;
}
.archive__filter.is-active {
  background: #0f1e2e;
  color: var(--text-rest);
}
.archive__filter:active { transform: translateY(1px); }

/* Empty / placeholder card — coral border so the user can see the slot
   even before they paste in a real image. */
.gallery__item.archive__placeholder {
  background: linear-gradient(135deg, rgba(var(--peach-rgb), 0.08), rgba(var(--peach-rgb), 0.18));
  border: 1px dashed rgba(var(--peach-rgb), 0.55);
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.gallery__item.archive__placeholder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Placeholder figcaption now uses the same hover-overlay system as real
   cards (defined further below). Override removed intentionally. */
.gallery__item.archive__placeholder img:not([src=""]):not([src*="_placeholder"]) + figcaption {
  display: none;
}

/* ============================================================
   ARCHIVE-CARD HOVER OVERLAYS (10 variants via [data-archive-hover])
   Each variant draws an overlay + reveals the figcaption "name" on
   hover. Default state hides the figcaption on real (non-placeholder)
   cards so the image speaks for itself.
   ============================================================ */
.archive-page .gallery__item {
  position: relative;
  overflow: hidden;
}
.archive-page .gallery__item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px 20px;
  font-family: "FbSingulari", "Heebo", sans-serif;
  font-weight: 300;
  font-size: 17px;
  color: var(--text-rest);
  text-align: right;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(.2, .8, .25, 1);
  pointer-events: none;
  z-index: 2;
}
.archive-page .gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.archive-page .gallery__item:hover figcaption,
.archive-page .gallery__item:focus-within figcaption {
  opacity: 1;
  transform: translateY(0);
}
.archive-page .gallery__item:hover::after,
.archive-page .gallery__item:focus-within::after {
  opacity: 1;
}

/* Style 1 — Bottom gradient (default) */
body.archive-page[data-archive-hover="1"] .gallery__item::after {
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0) 100%);
}

/* Style 2 — Top + bottom vignette */
body.archive-page[data-archive-hover="2"] .gallery__item::after {
  background:
    linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 35%),
    linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 30%);
}

/* Style 3 — Solid bottom strip */
body.archive-page[data-archive-hover="3"] .gallery__item::after {
  background: linear-gradient(to top, rgba(15,30,46,0.92) 0%, rgba(15,30,46,0.92) 28%, transparent 28%);
}

/* Style 4 — Center title pill (frosted) */
body.archive-page[data-archive-hover="4"] .gallery__item::after {
  background: rgba(0,0,0,0.18);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
body.archive-page[data-archive-hover="4"] .gallery__item figcaption {
  inset: 50% auto auto 50%;
  transform: translate(50%, -50%) scale(0.94);
  padding: 10px 22px;
  border-radius: 100px;
  background: rgba(255,255,255,0.42);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.6);
  text-align: center;
  font-size: 16px;
}
body.archive-page[data-archive-hover="4"] .gallery__item:hover figcaption {
  transform: translate(50%, -50%) scale(1);
}

/* Style 5 — Slide-up bar (solid coral strip) */
body.archive-page[data-archive-hover="5"] .gallery__item::after {
  background: linear-gradient(to top, rgba(var(--peach-rgb),0.92) 0%, rgba(var(--peach-rgb),0.92) 22%, transparent 22%);
}

/* Style 6 — Full frosted glass */
body.archive-page[data-archive-hover="6"] .gallery__item::after {
  background: rgba(255,255,255,0.28);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.5);
}
body.archive-page[data-archive-hover="6"] .gallery__item figcaption {
  inset: 50% auto auto 50%;
  transform: translate(50%, -50%);
  text-align: center;
  font-size: 22px;
  color: var(--text-rest);
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

/* Style 7 — Right-side panel (RTL: visually right side strip) */
body.archive-page[data-archive-hover="7"] .gallery__item::after {
  background: linear-gradient(to left, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.4) 40%, transparent 70%);
}
body.archive-page[data-archive-hover="7"] .gallery__item figcaption {
  inset: auto auto 0 auto;
  right: 0;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 22px;
}

/* Style 8 — Corner badge (bottom-right pill) */
body.archive-page[data-archive-hover="8"] .gallery__item::after {
  background: transparent;
}
body.archive-page[data-archive-hover="8"] .gallery__item figcaption {
  inset: auto 18px 18px auto;
  left: auto;
  padding: 8px 16px;
  border-radius: 100px;
  background: rgba(0,0,0,0.65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 14px;
}

/* Style 9 — Coral tint full */
body.archive-page[data-archive-hover="9"] .gallery__item::after {
  background: rgba(var(--peach-rgb),0.55);
}
body.archive-page[data-archive-hover="9"] .gallery__item figcaption {
  inset: 50% auto auto 50%;
  transform: translate(50%, -50%);
  text-align: center;
  font-size: 22px;
  font-weight: 400;
}

/* Style 10 — Diagonal split */
body.archive-page[data-archive-hover="10"] .gallery__item::after {
  background: linear-gradient(135deg, transparent 30%, rgba(0,0,0,0.78) 100%);
}
body.archive-page[data-archive-hover="10"] .gallery__item figcaption {
  inset: auto 0 0 0;
  text-align: left;
  padding-left: 20px;
}

/* Bottom CTA on the works-archive page */
.archive__cta {
  position: relative;
  z-index: 1; /* מעל קנבס ה-shader שמתחת */
  padding: 120px 24px 80px;
  text-align: center;
}
.archive__cta-text {
  font-family: "FbSingulari", "Heebo", sans-serif;
  font-weight: 300;
  font-size: 30px;
  line-height: 1.4;
  color: var(--text-rest);
  margin: 0;
}
/* אפקט Motion Effects בסגנון Elementor — הזחה אופקית מקושרת לגלילה */
.archive__cta-motion {
  display: inline-block;
  transform: translateX(var(--cta-mx, 0px));
  will-change: transform;
}
.archive__cta-link {
  color: var(--peach);
  text-decoration: none;
  margin-inline-start: 12px;
  transition: opacity 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.archive__cta-link:hover { opacity: 0.85; }
.archive__cta-arrow {
  display: inline-block;
  font-size: 30px;
  line-height: 1;
  margin-inline-start: 6px; /* ריווח מהטקסט כדי שהנדנוד לא ייגע באותיות */
  transition: transform 0.25s ease;
  /* נדנוד אופקי רציף — מזמין ללחיצה */
  animation: cta-arrow-bob 1.2s ease-in-out infinite;
}
@keyframes cta-arrow-bob {
  0%, 100% { transform: translateX(0); }      /* מנוחה — לא נכנס לאותיות */
  50%      { transform: translateX(-7px); }   /* נע שמאלה בלבד (כיוון החץ, הרחק מהטקסט) */
}
/* בריחוף — עוצרים את הנדנוד ונועצים פנימה */
.archive__cta-link:hover .archive__cta-arrow {
  animation: none;
  transform: translateX(-10px);
}

/* קישור ה-CTA — אפקט החלפה: הטקסט הראשון עף ימינה, השני נכנס במקומו */
.archive__cta-swap {
  display: inline-grid;
  text-decoration: none;
  cursor: pointer;
  vertical-align: bottom;
}
.cta-swap__default,
.cta-swap__hover {
  grid-area: 1 / 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.42s cubic-bezier(.2, .8, .25, 1), opacity 0.3s ease;
}
.cta-swap__default { color: var(--text-rest); }   /* "מוכנים..." */
.cta-swap__hover {                                 /* "השאירו..." — מחכה משמאל */
  color: var(--peach);
  transform: translateX(-48px);
  opacity: 0;
}
.archive__cta-swap:hover .cta-swap__default,
.archive__cta-swap:focus-visible .cta-swap__default {
  transform: translateX(48px);     /* עף ימינה */
  opacity: 0;
}
.archive__cta-swap:hover .cta-swap__hover,
.archive__cta-swap:focus-visible .cta-swap__hover {
  transform: translateX(0);        /* נכנס למקום */
  opacity: 1;
}
@media (max-width: 700px) {
  .archive__cta { padding: 80px 20px 60px; }
  .archive__cta-text { font-size: 22px; }
}

/* Contact page wrapper — centres the form vertically and horizontally
   inside the viewport (instead of sitting just under the nav). */
.contact--page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 80px;
  box-sizing: border-box;
}
/* Standalone contact page uses the homepage's contact sizing as-is —
   no scaling overrides, just kept centred via the flex container above. */
.contact--page .contact__inner {
  margin: 0 auto;
  width: 100%;
}

/* Floating mini-panel just for picking the archive hover style */
#archive-hover-panel {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9000;
  background: rgba(10, 14, 24, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text-rest);
  font: 11px/1.3 ui-monospace, "SF Mono", monospace;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  direction: ltr;
}
#archive-hover-panel label {
  display: flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.7);
}
#archive-hover-panel select {
  background: rgba(255,255,255,0.1); color: var(--text-rest);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 4px; padding: 4px 6px;
  font: inherit;
}
#archive-hover-panel select option { background: #0a0e18; color: var(--text-rest); }

@media (max-width: 900px) {
  .gallery__layout { grid-template-columns: 1fr; gap: 24px; }
  .archive__filters {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .archive__filter { width: auto; min-width: 100px; }
  .archive__filters-title { width: 100%; }
}

/* Masonry layout — uses CSS columns so each item preserves its image's
   natural aspect ratio without forced cropping. Column-gap (between
   side-by-side items) and item margin-bottom (between stacked items)
   MUST stay equal so the grid reads as a uniform square mesh. */
.gallery__grid--masonry {
  columns: 2;
  column-gap: 40px;
}
.gallery__grid--masonry .gallery__item {
  margin: 0 0 40px;
  break-inside: avoid;
  display: block;
  border-radius: 14px;       /* פחות מעוגל */
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(.2, .8, .25, 1);
  /* Transparent (not a dark fill): a solid colour here leaks a 1px seam at
     the rounded clip edge while the card is composited (the "thin black
     frame" that vanished on a clean repaint/refresh), and shows as a dark
     box while lazy images are still downloading. Transparent blends with
     the page so neither shows. Images fill the card exactly (object-fit). */
  background: transparent;
}
.gallery__grid--masonry .gallery__item:hover {
  transform: translateY(-6px);
}
.gallery__grid--masonry .gallery__item img {
  display: block;
  width: 100%;
  height: auto;
}
.gallery__grid--masonry .gallery__item--full {
  column-span: all;
  -webkit-column-span: all;
  margin-bottom: 24px;
}
/* גלריה ראשית (דף הבית): כל הכרטיסים בגודל זהה בדיוק — יחס אחיד + מילוי מלא */
#standaloneGrid .gallery__item {
  aspect-ratio: 1800 / 1273;
}
#standaloneGrid .gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* כרטיס שמטמיע את מוקאפ ה-Gmail (HTML), חתוך לאזור חלון "הודעה חדשה" עם ההנפשה.
   ה-iframe גדול מהכרטיס וממוקם בהיסט כך שרואים בעיקר את חלון ההודעה והחתימה;
   שאר הממשק (המטושטש) נחתך. ההיסטים ניתנים לכוונון בקלות. */
.gallery__grid--masonry .gallery__item--embed {
  position: relative;
  width: 100%;            /* רוחב מלא — זהה לכרטיס שמעליו בעמודה */
  height: 500px;
  background: #ffffff;
}
.gallery__item--embed iframe {
  position: absolute;
  right: -46px;    /* מיישר את הקצה הימני של חלון ההודעה לקצה הכרטיס — החתימה (ימין) נראית מלאה */
  bottom: 0;       /* מיישר את תחתית חלון ההודעה לתחתית הכרטיס */
  width: 660px;
  height: 600px;
  border: 0;
  pointer-events: none;   /* תצוגה בלבד */
}
/* Home-page archive — bigger items need a touch more air between them.
   Column-gap (horizontal) and item margin-bottom (vertical) match
   exactly at 48px so the grid stays a perfect square mesh. */
.works--archive .gallery__grid--masonry {
  column-gap: 48px;
}
.works--archive .gallery__grid--masonry .gallery__item {
  margin: 0 0 48px;
}
/* Animated GIF in the amit gallery — the figure stays as a normal
   grid item, but the image is zoomed-in (object-fit: cover) with the
   focus point on the email-signature region of the animation. */
.gallery__grid--masonry .gallery__item--animated {
  background: #0f1e2e;
}
.gallery__grid--masonry .gallery__item--animated img {
  width: 100%;
  max-width: 100%;
  height: 460px;
  object-fit: cover;
  object-position: center 78%; /* lower portion = email signature area */
  display: block;
  border-radius: 8px;
}
@media (max-width: 700px) {
  .gallery__grid--masonry { columns: 1; }
  .gallery { padding: 100px 32px 60px; }
  .gallery__title { font-size: 38px; }
}

/* ============================================================
   PROJECT-TO-PROJECT NAVIGATION (bottom of each gallery page)
   Two buttons pinned to the bottom corners of the viewport.
   ============================================================ */
.gallery__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 28px 56px;
  margin-top: 40px;
}
.gallery__nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-rest);
  text-decoration: none;
  font-family: "FbSingulari", "Heebo", sans-serif;
  font-weight: 300;
  font-size: 14px;
  padding: 6px 14px 6px 14px;
  border: 1px solid var(--peach);
  border-radius: 999px;
  background: transparent;
  transition: background 0.2s ease;
}
.gallery__nav-btn:hover {
  background: rgba(var(--peach-rgb), 0.18);
}
.gallery__nav-arrow {
  font-size: 18px;
  color: var(--peach);
  line-height: 1;
  transition: transform 0.22s ease;
}
.gallery__nav-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid rgba(var(--peach-rgb), 0.55);
  flex-shrink: 0;
  background: #ffffff;
  padding: 4px;
  box-sizing: border-box;
}
.gallery__nav-thumb img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.gallery__nav-btn--prev:hover .gallery__nav-arrow { transform: translateX(8px); }
.gallery__nav-btn--next:hover .gallery__nav-arrow { transform: translateX(-8px); }

/* ============================================================
   LIGHTBOX — fullscreen image viewer for gallery pages
   ============================================================ */
.gallery__item img,
.lightbox,
.lightbox__img,
.lightbox__close,
.lightbox__nav,
.gallery__back-link { cursor: none; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.lightbox__img {
  max-width: 94vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  transform: scale(0.94);
  transition: transform 0.3s cubic-bezier(.2, .8, .25, 1);
}
.lightbox.is-open .lightbox__img {
  transform: scale(1);
}
.lightbox__close {
  position: absolute;
  top: 24px;
  left: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 0.2s ease, transform 0.2s ease;
}
.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: rotate(90deg);   /* בריחוף ה-X מסתובב 90 מעלות */
}

/* Side navigation arrows for prev/next image */
.lightbox__nav {
  position: absolute;
  top: 50%;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  color: #ffffff;
  font-size: 22px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transform: translateY(-50%);
  transition: background 0.2s ease, transform 0.2s ease;
  line-height: 1;
}
.lightbox__nav--prev { left: 24px; right: auto; }   /* הקודם בצד שמאל */
.lightbox__nav--next { right: 24px; left: auto; }   /* הבא בצד ימין */
.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-50%) scale(1.08);
}

/* Filter chips below the works title — same style as send button, smaller */
.works__filters {
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 0 60px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.works__filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 110px;
  padding: 0 20px;
  border-radius: 8px;
  font-family: "FbSingulari", "Heebo", sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1;
  background: transparent;
  color: var(--text-rest);
  border: 1px solid var(--peach);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}
.works__filter:hover {
  background: rgba(var(--peach-rgb), 0.12);
}
.works__filter.is-active {
  background: var(--peach);
  color: var(--text-rest);
}
.works__filter:active {
  transform: translateY(1px);
}

.works__grid {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

/* ============================================================
   10 PROJECT-GRID LAYOUTS — via body[data-projects-layout]
   ============================================================ */

/* Layout 1 = default (no overrides) */

/* Layout 2 — Aligned 2-col, no offset */
body[data-projects-layout="2"] .works__col--2 { margin-top: 0; }

/* Layout 3 — Three columns */
body[data-projects-layout="3"] .works__col { display: contents; }
body[data-projects-layout="3"] .works__grid {
  grid-template-columns: repeat(3, 1fr);
}

/* Layout 4 — Featured big + 2x2 below */
body[data-projects-layout="4"] .works__col { display: contents; }
body[data-projects-layout="4"] .works__grid {
  grid-template-columns: 1fr 1fr;
}
body[data-projects-layout="4"] .works__card:nth-child(1) {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 7;
}

/* Layout 5 — Wide single column */
body[data-projects-layout="5"] .works__col { display: contents; }
body[data-projects-layout="5"] .works__grid {
  grid-template-columns: minmax(0, 1fr);
}
body[data-projects-layout="5"] .works__card { aspect-ratio: 2.4 / 1; }

/* Layout 6 — Five in a row */
body[data-projects-layout="6"] .works__col { display: contents; }
body[data-projects-layout="6"] .works__grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
body[data-projects-layout="6"] .works__card { aspect-ratio: 3 / 4; }

/* Layout 7 — Hero spotlight (big left) + 4 small */
body[data-projects-layout="7"] .works__col { display: contents; }
body[data-projects-layout="7"] .works__grid {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
body[data-projects-layout="7"] .works__card:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  aspect-ratio: 1 / 1;
}
body[data-projects-layout="7"] .works__card:not(:nth-child(1)) { aspect-ratio: 1 / 1; }

/* Layout 8 — Center narrow single column */
body[data-projects-layout="8"] .works__col { display: contents; }
body[data-projects-layout="8"] .works__grid {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}

/* Layout 9 — Diagonal staircase stagger */
body[data-projects-layout="9"] .works__col--2 { margin-top: 0; }
body[data-projects-layout="9"] .works__col--1 .works__card:nth-child(2) { margin-top: 28px; }
body[data-projects-layout="9"] .works__col--1 .works__card:nth-child(3) { margin-top: 56px; }
body[data-projects-layout="9"] .works__col--2 .works__card:nth-child(1) { margin-top: 84px; }
body[data-projects-layout="9"] .works__col--2 .works__card:nth-child(2) { margin-top: 112px; }

/* Layout 10 — Mosaic varied sizes */
body[data-projects-layout="10"] .works__col { display: contents; }
body[data-projects-layout="10"] .works__grid {
  grid-template-columns: repeat(6, 1fr);
}
body[data-projects-layout="10"] .works__card:nth-child(1) { grid-column: 1 / 5; aspect-ratio: 16 / 9; }
body[data-projects-layout="10"] .works__card:nth-child(2) { grid-column: 5 / 7; aspect-ratio: 1 / 1; }
body[data-projects-layout="10"] .works__card:nth-child(3) { grid-column: 1 / 3; aspect-ratio: 1 / 1; }
body[data-projects-layout="10"] .works__card:nth-child(4) { grid-column: 3 / 5; aspect-ratio: 1 / 1; }
body[data-projects-layout="10"] .works__card:nth-child(5) { grid-column: 5 / 7; aspect-ratio: 1 / 1; }
.works__col {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
/* Column 2 is offset 96px down per Figma (1:25 starts y=96 within parent) */
.works__col--2 {
  margin-top: 96px;
}

.works__card {
  width: 100%;
  aspect-ratio: 584 / 390;
  border-radius: 14px;       /* פחות מעוגל */
  position: relative;
  overflow: hidden;
}
.works__card::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(70, 100, 135, 0.30) 1px, transparent 1.5px),
    radial-gradient(rgba(70, 100, 135, 0.18) 1px, transparent 1.5px);
  background-size: 5px 5px, 9px 9px;
  background-position: 0 0, 3px 4px;
  opacity: 0.80;
  mix-blend-mode: multiply;
}
/* Four delicate blue variations — each card reads distinctly so the
   gallery doesn't feel monotone. Variant `c` carries a soft creamy
   accent in the top corner for warmth. */
.works__card--a {
  /* powder blue → mid sky — bright and airy */
  background: linear-gradient(135deg, #DDE9F2 0%, #C5D8E8 60%, #A8C3DC 100%);
}
.works__card--cover {
  background: #0f1e2e;
}
.works__card--cover::before {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  background: url("projects/chok-lyisrael/cover.webp") center/cover no-repeat;
  background-size: cover;
  border-radius: inherit;
  transition: transform 0.45s cubic-bezier(.2, .8, .25, 1);
  z-index: 0;
  opacity: 1;
  mix-blend-mode: normal;
  will-change: transform;
}
.works__card--cover-zaldi {
  background: #0f1e2e;
}
.works__card--cover-zaldi::before {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  background: url("projects/zaldi/cover.webp") center/cover no-repeat;
  background-size: cover;
  border-radius: inherit;
  transition: transform 0.45s cubic-bezier(.2, .8, .25, 1);
  z-index: 0;
  opacity: 1;
  mix-blend-mode: normal;
  will-change: transform;
}
.works__card--cover-zaldi:hover::before,
.works__card--cover-zaldi:focus-within::before {
  transform: scale(1.04);
}
.works__card--cover-amit {
  background: #0f1e2e;
}
.works__card--cover-amit::before {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  background: url("projects/amit/cover.webp") center/cover no-repeat;
  background-size: cover;
  border-radius: inherit;
  transition: transform 0.45s cubic-bezier(.2, .8, .25, 1);
  z-index: 0;
  opacity: 1;
  mix-blend-mode: normal;
  will-change: transform;
}
.works__card--cover-amit:hover::before,
.works__card--cover-amit:focus-within::before {
  transform: scale(1.04);
}
.works__card--cover-itamar {
  background: #0f1e2e;
}
.works__card--cover-itamar::before {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  background: url("projects/itamar/cover.webp") center/cover no-repeat;
  background-size: cover;
  border-radius: inherit;
  transition: transform 0.45s cubic-bezier(.2, .8, .25, 1);
  z-index: 0;
  opacity: 1;
  mix-blend-mode: normal;
  will-change: transform;
}
.works__card--cover-itamar:hover::before,
.works__card--cover-itamar:focus-within::before {
  transform: scale(1.04);
}
.works__card--cover-ateret {
  background: #0f1e2e;
}
.works__card--cover-ateret::before {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  background: url("projects/ateret/cover.webp") center 35% / cover no-repeat;
  background-color: #0f1e2e;
  border-radius: inherit;
  transition: transform 0.45s cubic-bezier(.2, .8, .25, 1);
  z-index: 0;
  opacity: 1;
  mix-blend-mode: normal;
  will-change: transform;
}
.works__card--cover-ateret:hover::before,
.works__card--cover-ateret:focus-within::before {
  transform: scale(1.04);
}
.works__card.works__card--cover-breslev {
  background: #fcf9e5;   /* שמנת כמו רקע התמונה — מונע פס כהה דק בקצה/בפינות */
}
.works__card.works__card--cover-breslev::before {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  background: url("projects/breslev/cover.webp") center/cover no-repeat;
  background-size: cover;
  border-radius: inherit;
  transition: transform 0.45s cubic-bezier(.2, .8, .25, 1);
  z-index: 0;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  will-change: transform;
}
.works__card--cover-breslev:hover::before,
.works__card--cover-breslev:focus-within::before {
  transform: scale(1.04);
}
.works__card.works__card--cover-rapaport {
  background: #14241a;   /* כהה כרקע התמונה (פירות על רקע כהה) */
}
.works__card.works__card--cover-rapaport::before {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  background: url("projects/rapaport/cover.webp") center/cover no-repeat;
  background-size: cover;
  border-radius: inherit;
  transition: transform 0.45s cubic-bezier(.2, .8, .25, 1);
  z-index: 0;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  will-change: transform;
}
.works__card--cover-rapaport:hover::before,
.works__card--cover-rapaport:focus-within::before {
  transform: scale(1.04);
}
.works__card--cover:hover::before,
.works__card--cover:focus-within::before {
  transform: scale(1.04);
}
.works__card--b {
  /* steel-blue gradient — cooler and slightly denser */
  background: linear-gradient(135deg, #CFDEE9 0%, #ADC4D8 50%, #8FB0CC 100%);
}
.works__card--c {
  /* mostly blue but with a warm cream corner — the "interesting" one */
  background:
    radial-gradient(80% 90% at 90% 0%, #F0E2C8 0%, rgba(240, 226, 200, 0) 60%),
    radial-gradient(70% 80% at 0% 100%, #B8CFE0 0%, rgba(184, 207, 224, 0) 65%),
    linear-gradient(135deg, #E5ECF2 0%, #C5D8E5 100%);
}
.works__card--c:not([class*="--cover"])::before {
  /* the haze-y one — less grain (only on decorative non-cover cards) */
  opacity: 0.35;
}
.works__card--d {
  /* teal-leaning blue with subtle highlight — yet another mood */
  background:
    radial-gradient(60% 70% at 80% 80%, #E0EAF0 0%, rgba(224, 234, 240, 0) 60%),
    linear-gradient(135deg, #BDD2DF 0%, #A0BCD2 50%, #C0D5E2 100%);
}

/* hover overlay — frosted-blur curtain slides up from the bottom,
   and the title's letters slide in from the right one by one (RTL).
   A thin underline draws across the title after the letters land. */
.works__card-overlay {
  position: absolute;
  inset: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(.2, .8, .25, 1);
  z-index: 2;
  pointer-events: none;
}
.works__card:hover .works__card-overlay,
.works__card:focus-within .works__card-overlay {
  opacity: 1;
  transform: scale(1);
}

/* === 10 hover overlay variants — chosen via [data-card-overlay] on body === */
/* Style 1 = default (full frosted overlay) - no override */

/* Style 2 — Bottom strip (frosted) — top of card stays visible */
body[data-card-overlay="2"] .works__card-overlay {
  inset: auto 12px 12px 12px;
  height: 38%;
  align-items: center;
}

/* Style 3 — Top strip (frosted) */
body[data-card-overlay="3"] .works__card-overlay {
  inset: 12px 12px auto 12px;
  height: 38%;
  align-items: center;
}

/* Style 4 — Right vertical strip (40% width) */
body[data-card-overlay="4"] .works__card-overlay {
  inset: 12px 12px 12px auto;
  width: 40%;
  align-items: center;
}

/* Style 5 — Left vertical strip (40% width) */
body[data-card-overlay="5"] .works__card-overlay {
  inset: 12px auto 12px 12px;
  width: 40%;
  align-items: center;
}

/* Style 6 — Bottom pill (small, centered, frosted) */
body[data-card-overlay="6"] .works__card-overlay {
  inset: auto auto 24px 50%;
  width: auto;
  height: auto;
  padding: 10px 22px;
  border-radius: 100px;
  align-items: center;
  transform: scale(0.92) translate(50%, 0);
}
body[data-card-overlay="6"] .works__card:hover .works__card-overlay,
body[data-card-overlay="6"] .works__card:focus-within .works__card-overlay {
  transform: scale(1) translate(50%, 0);
}
body[data-card-overlay="6"] .works__card-title {
  font-size: 16px;
  padding-bottom: 0;
}

/* Style 7 — Floating text only (no overlay box) */
body[data-card-overlay="7"] .works__card-overlay {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
  inset: auto 24px 24px 24px;
  height: auto;
  padding: 0;
  align-items: flex-end;
  justify-content: flex-end;
}
body[data-card-overlay="7"] .works__card-title {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
  color: var(--text-rest);
}

/* Style 8 — Zoom only, no frame (corner title with text-shadow) */
body[data-card-overlay="8"] .works__card-overlay {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: none;
  inset: 12px;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 18px;
}
body[data-card-overlay="8"] .works__card-title {
  font-size: 20px;
  color: var(--text-rest);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

/* Style 9 — Bottom dark gradient (no blur) */
body[data-card-overlay="9"] .works__card-overlay {
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 55%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0 24px 26px;
}
body[data-card-overlay="9"] .works__card-title {
  color: var(--text-rest);
}

/* Style 10 — Center pill (small frosted badge in centre) */
body[data-card-overlay="10"] .works__card-overlay {
  inset: 50% auto auto 50%;
  width: auto;
  height: auto;
  padding: 10px 24px;
  border-radius: 100px;
  align-items: center;
  transform: scale(0.92) translate(50%, -50%);
}
body[data-card-overlay="10"] .works__card:hover .works__card-overlay,
body[data-card-overlay="10"] .works__card:focus-within .works__card-overlay {
  transform: scale(1) translate(50%, -50%);
}
body[data-card-overlay="10"] .works__card-title {
  font-size: 16px;
  padding-bottom: 0;
}
.works__card-title {
  font-family: "FbSingulari", "Heebo", sans-serif;
  font-weight: 300;
  font-size: 28px;
  line-height: 1.2;
  color: var(--peach);
  text-align: center;
  letter-spacing: 0.005em;
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}
.works__card-title .ch {
  display: inline-block;
  transform: translateX(28px);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(.2, .8, .3, 1), opacity 0.18s ease;
}
.works__card:hover .works__card-title .ch,
.works__card:focus-within .works__card-title .ch {
  transform: translateX(0);
  opacity: 1;
  transition-delay: calc(var(--ci, 0) * 16ms);
}
.works__card-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 2px;
  background: var(--peach);
  transition: width 0.28s ease;
}
.works__card:hover .works__card-title::after,
.works__card:focus-within .works__card-title::after {
  width: 100%;
  transition-delay: 0.18s;
}

.works__cta {
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

/* ============================================================
   CONTACT  (Figma node 1:30  —  1440 × 991)
   ============================================================ */
.contact {
  /* Transparent — body gradient handles the colour. */
  background: transparent;
  padding: 80px 0 40px;
}
.contact__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
}
.contact__header {
  text-align: right;
  margin-bottom: 36px;
}
.contact__title {
  margin: 0 0 8px;
  font-family: "FbSingulari", "Heebo", sans-serif;
  font-weight: 500;       /* דוקק מעט (היה 700) */
  font-size: 40px;
  line-height: 1.2;
  color: var(--peach);
}
.contact__tagline {
  margin: 0 0 16px;
  font-family: "FbSingulari", "Heebo", sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.4;
  color: var(--text-rest);
}
.contact__subtitle {
  margin: 0;
  font-size: 17px;
  color: var(--ink-soft);
  font-weight: 400;
}

.contact__card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 32px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  text-align: right;
}
.contact__field {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* RTL: visually right */
}
.contact__label {
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 2px;
}
.contact__hint {
  font-size: 12px;
  color: var(--peach);
  margin-bottom: 8px;
  font-weight: 300;
  transition: opacity 0.25s ease, max-height 0.25s ease, margin 0.25s ease;
  max-height: 2em;
  overflow: hidden;
  opacity: 1;
}
.contact__hint.is-hidden {
  opacity: 0;
  max-height: 0;
  margin-bottom: 0;
}
.contact__field input,
.contact__field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  font: inherit;
  font-weight: 300;
  font-weight: 300;
  color: var(--ink);
  padding: 4px 0;
  outline: none;
  text-align: right;
  direction: rtl;
}
.contact__field input:focus,
.contact__field textarea:focus {
  border-bottom-color: rgba(255, 255, 255, 0.35);
}
.contact__field--message {
  /* Divider rule above the message field — separates it from the
     name/phone/email row. Uses the same hairline colour as card borders. */
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.contact__field--message textarea {
  resize: none;
  min-height: 80px;
  overflow: hidden;
  padding-top: 0;
}

.contact__submit {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end; /* RTL: visually left */
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 236px;
  padding: 0 24px;
  border-radius: 10px;
  font-family: "FbSingulari", "Heebo", sans-serif;
  font-weight: 500;
  font-size: 17px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
  border: none;
}
.btn:hover { opacity: 0.9; }
.btn:active { transform: translateY(1px); }

.btn--outline {
  background: transparent;
  color: var(--brand-deep);
  border: 1px solid var(--brand-deep);
}
.btn--filled {
  background: #FFFFFF;
  color: var(--peach);
  border: none;
  font-weight: 500;       /* בינוני — לא כבד מדי באיינשטיין */
  position: relative;
  overflow: hidden;
  transition: background 0.22s ease, color 0.22s ease, transform 0.12s ease, box-shadow 0.22s ease;
}
.btn--filled:hover {
  background: var(--peach);
  color: var(--text-rest);
  opacity: 1;
  transform: translateY(-1px);
}
.btn--filled:active {
  background: transparent;
  color: var(--text-rest);
  outline: 2px solid var(--peach);
  outline-offset: -2px;
  transform: translateY(1px);
}
.btn--filled:active { transform: translateY(1px); }

/* כפתור "לפרוייקטים המלאים" — מצב קבוע: שקוף עם מסגרת אפרסק וכיתוב לבן.
   בריחוף: מתמלא אפרסק והאותיות הופכות לכחול המותג. */
.works__cta .btn--filled {
  background: transparent;
  color: var(--brand-blue);        /* כיתוב בכחול המותג */
  box-shadow: inset 0 0 0 2px var(--peach);
  font-weight: 300;        /* דק */
}
.works__cta .btn--filled:hover {
  background: var(--peach);          /* מתמלא אפרסק */
  color: var(--brand-blue);          /* הכיתוב נשאר כחול המותג */
  box-shadow: inset 0 0 0 2px var(--peach);
  opacity: 1;
}
/* החץ בכפתור — כמו החץ בקישור יצירת הקשר (אותו glyph + נדנוד), מותאם לגודל הכפתור */
.works__cta .btn--filled .archive__cta-arrow {
  font-size: 1.25em;
}
.works__cta .btn--filled:hover .archive__cta-arrow {
  animation: none;
  transform: translateX(-6px);
}

/* Sent state — fired by the contact form on submit. The confirmation
   message lives INSIDE the button (replaces "שליחה"); the existing
   toast element stays in the DOM as a screen-reader announcement only. */
.contact__submit {
  position: relative;
  align-items: center;
}
/* Toast: visually hidden, kept in AOM so aria-live still announces */
.contact__submit__toast {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  pointer-events: none !important;
  max-width: none !important;
}

/* Sent — fully hide the button's "שליחה" text and show the confirmation
   via ::before instead. font-size:0 + text-indent makes the original
   text impossible to render; the pseudo-element draws its own at 17px. */
.contact__submit.is-sent .btn--filled {
  color: transparent;
  font-size: 0;
  text-indent: -9999px;
  min-width: 260px;
  pointer-events: none;
}
.contact__submit.is-sent .btn--filled::before {
  content: "קיבלנו את הודעתך!";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-rest);
  font-family: "FbSingulari", "Heebo", sans-serif;
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
  text-indent: 0;
  animation: contactSentTextIn 0.45s 0.12s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes contactSentTextIn {
  0%   { opacity: 0; transform: scale(0.7); }
  100% { opacity: 1; transform: scale(1); }
}
.contact__submit.is-sent .btn--filled {
  background: var(--peach);
  color: var(--text-rest);
  pointer-events: none;
  animation: contactSentPulse 0.55s cubic-bezier(.2, .8, .25, 1);
}
.contact__submit.is-sent .btn--filled::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--peach);
  opacity: 0;
  animation: contactSentRing 0.9s ease-out forwards;
  pointer-events: none;
}
@keyframes contactSentPulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.06); box-shadow: 0 0 0 14px rgba(var(--peach-rgb),0.22); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(var(--peach-rgb),0); }
}
@keyframes contactSentRing {
  0%   { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0;    transform: scale(1.35); }
}

/* ============================================================
   FOOTER BAND  (Figma node 1:43  —  1440 × 84)
   ============================================================ */
.footer {
  width: 100%;
}
.footer__band {
  width: 100%;
  height: 84px;
  /* Transparent — the deepening tail of the body's master gradient
     gives the very bottom of the page its slightly darker tone. */
  background: transparent;
}

/* ============================================================
   RESPONSIVE — graceful scale below 1440
   ============================================================ */
@media (max-width: 1200px) {
  .hero__title { font-size: calc(64px + 1.5cm); }
  .nav__inner { padding: 0 32px; }
}
@media (max-width: 900px) {
  .hero { min-height: 600px; }
  .hero__content { padding: 140px 32px 60px; min-height: 600px; }
  .hero__title { font-size: calc(48px + 1.25cm); }
  .works__title { font-size: 32px; padding: 0 32px 48px; }
  .works__grid { padding: 0 32px; gap: 20px; }
  .works__col { gap: 20px; }
  .works__col--2 { margin-top: 48px; }
  .contact__inner { padding: 0 32px; }
  .contact__title { font-size: 32px; }
}
@media (max-width: 640px) {
  .nav__inner { height: 64px; padding: 0 20px; }
  .nav__links { gap: 20px; }
  .nav__link { font-size: 14px; padding: 6px 14px; }
  .nav__logo-img { height: 22px; }
  .hero__title { font-size: calc(34px + 1cm); }
  .works__grid { grid-template-columns: 1fr; gap: 16px; }
  .works__col--2 { margin-top: 0; }
  .contact__row { grid-template-columns: 1fr; gap: 18px; }
  .btn { min-width: 0; width: 100%; }
}

/* ============================================================
   MOBILE POLISH (≤600px) — per client feedback
   1. Hero title shrinks & rotating word never breaks mid-letter
   2. Filter bar significantly smaller (wraps to 1–2 tidy rows)
   3. "מוכנים לעשות את הצעד הבא" CTA much smaller (one line)
   4. "לפרויקטים המלאים" framed link slimmer
   5. Projects-page cards 2-per-row so each is smaller
   ============================================================ */
@media (max-width: 600px) {
  /* 1 — Hero title: smaller, and keep the rotating line on one piece.
     Each rotating letter is its own inline-block, so without nowrap the
     browser breaks the word between letters. */
  .hero__title { font-size: clamp(34px, 11vw, 50px); }
  .hero__rotating-line { white-space: nowrap; }

  /* 2 — Filter bar: compact chips, wrap instead of one stretched row */
  .archive__filters.archive__filters--horizontal {
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px;
    margin: 0 auto 32px;
  }
  .archive__filters.archive__filters--horizontal .archive__filter {
    min-width: 0;
    height: 30px;
    padding: 0 12px;
    font-size: 13px;
    border-radius: 6px;
  }

  /* 3 — "מוכנים לעשות את הצעד הבא" CTA: fit one line on a phone */
  .archive__cta { padding: 56px 16px 48px; }
  .archive__cta-text { font-size: 16px; }
  .archive__cta-text .archive__cta-arrow { font-size: 18px; }

  /* 4 — "לפרויקטים המלאים" framed link: slimmer box & border */
  .works__cta .btn--filled {
    height: 38px;
    min-width: 0;
    width: auto;
    padding: 0 18px;
    font-size: 14px;
    box-shadow: inset 0 0 0 1.5px var(--peach);
  }

  /* 5 — Projects page: cards stacked one above the other (single column) */
  body.projects-page .works__grid {
    grid-template-columns: 1fr;
    padding: 0 16px;
  }
  body.projects-page .works--page .works__col { gap: 64px; } /* was 112px — tighter on mobile */
  body.projects-page .works__col--1,
  body.projects-page .works__col--2 { margin-top: 0; }
  /* Keep the white frame + name from bleeding past the screen edge on a
     full-width card (it overhangs 16px sides by default → would touch 0/375). */
  body.projects-page .works__card-back {
    left: -8px; right: -8px; bottom: -44px;
    padding-bottom: 10px;
  }
  body.projects-page .works__card-back-name,
  body.projects-page .works__card-back-cta {
    font-size: 22px;
    bottom: 10px;
  }
}

/* ============================================================
   TOUCH / MOBILE — no mouse, so kill the custom cursor and turn
   hover-only effects on by default.
   We drive these by WIDTH (≤700px) rather than (hover:none) because
   some phones mis-report as a fine/hover pointer (that's why the user
   saw the custom cursor at all), so a hover-based query would miss them.
   A second (hover:none) block covers larger touch devices (tablets).
   ============================================================ */
@media (max-width: 700px) {
  /* Kill the custom cursor + restore the native one */
  .custom-cursor { display: none !important; }
  html, body { cursor: auto !important; }
  a, button, .works__card, [role="button"] { cursor: pointer !important; }

  /* Client logos: full colour by default (no hover to trigger it) */
  .clients__item img { filter: grayscale(0); opacity: 1; }

  /* Project card: keep the NAME visible and add a small arrow hinting
     it's tappable; disable the desktop hover-swap so the name stays. */
  .works__card-back-name { transform: none !important; opacity: 1 !important; }
  .works__card-back-name::after {
    content: "\2190";            /* ← same glyph as the other CTAs */
    margin-inline-start: 6px;
    display: inline-block;
  }
  .works__card-back-cta { display: none; }
}

/* Tablets / any genuine touch device of larger width */
@media (hover: none) and (min-width: 701px) {
  .clients__item img { filter: grayscale(0); opacity: 1; }
  .works__card-back-name { transform: none !important; opacity: 1 !important; }
  .works__card-back-name::after { content: "\2190"; margin-inline-start: 6px; display: inline-block; }
  .works__card-back-cta { display: none; }
}

/* ============================================================
   CONTACT PAGE — mobile tidy-up
   ============================================================ */
@media (max-width: 700px) {
  /* Centre the heading + tagline (was right-aligned) */
  .contact--page .contact__header { text-align: center; }
}

/* ============================================================
   CTA WORD-SWAP ON TOUCH — "מוכנים לעשות את הצעד הבא" → "השאירו פרטים"
   On desktop the second phrase appears on :hover. Phones have no hover,
   so auto-cycle between the two phrases (same swap motion as the hover).
   ============================================================ */
@keyframes ctaSwapOut {   /* the default phrase: visible, then flies out right */
  0%, 42%  { transform: translateX(0);    opacity: 1; }
  52%, 92% { transform: translateX(48px); opacity: 0; }
  100%     { transform: translateX(0);    opacity: 1; }
}
@keyframes ctaSwapIn {    /* the second phrase: waits left, then slides to centre */
  0%, 42%  { transform: translateX(-48px); opacity: 0; }
  52%, 92% { transform: translateX(0);     opacity: 1; }
  100%     { transform: translateX(-48px); opacity: 0; }
}
@media (max-width: 700px) {
  .archive__cta-swap .cta-swap__default { animation: ctaSwapOut 6s ease-in-out infinite; }
  .archive__cta-swap .cta-swap__hover   { animation: ctaSwapIn  6s ease-in-out infinite; }
}
/* Reduced-motion: still swap the wording (it carries meaning) but with a
   gentle cross-fade instead of the sliding motion. */
@keyframes ctaFadeOut { 0%, 42% { opacity: 1; } 52%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ctaFadeIn  { 0%, 42% { opacity: 0; } 52%, 92% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .archive__cta-swap .cta-swap__default { animation: ctaFadeOut 6s ease-in-out infinite; transform: none; }
  .archive__cta-swap .cta-swap__hover   { animation: ctaFadeIn  6s ease-in-out infinite; transform: none; }
}

/* ============================================================
   MOBILE — hide the "הצהרת נגישות" link entirely (desktop keeps it
   in the footer). The accessibility settings stay reachable via the
   floating trigger button. The "עיצוב אפיון ופיתוח" credit stays
   centred (the footer's default mobile layout).
   ============================================================ */
.a11y-stmt-pinned { display: none; }   /* pinned copy no longer used */
@media (max-width: 700px) {
  .site-footer-bar__a11y-wrap { display: none; }
}