/* IDO — home page sections 01–10.
   Desktop (≥ 1200) = Figma's 1440 composition on a fluid canvas: every measured number is multiplied by --px
   (1px at ≥ 1440, scaled down to 1200). Coordinates are Figma's LTR x/y (a device of the composition, not of
   reading order); right-aligned text is anchored by its right edge (right = 1440 − x − w).
   Below 1200: phone (Figma frame 219:11672) and tablet (LAYOUT.md rules) in normal flow — see the block below. */

main, .footer, .nav { container-type: inline-size; }
.px-scope { --px: calc(min(100cqw, 1440px) / 1440); } /* .sec, .footer .canvas, .nav__inner */

.sec { position: relative; background: var(--color-bg-surface); }
.canvas { position: relative; width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Shapes (Figma Shape set 85:200, built as Figma resizes them: radius and 2 px stroke do not stretch) ---------- */
.shape { display: block; }
.shape--i { border-radius: calc(24 * var(--px)); }
.shape--o { border-radius: calc(44 * var(--px)); }
.shape--d { border-radius: calc(14 * var(--px)) calc(70 * var(--px)) calc(70 * var(--px)) calc(14 * var(--px)); }
.shape--line { border: 2px solid var(--color-text-primary); }
.shape--solid { background: var(--color-deco-green); }

/* ---------- NAV (Figma 115:2922: 1440×120 at y 8, padding 32/80, space-between) ---------- */
.nav { position: absolute; inset-inline: 0; top: 0; z-index: 50; }
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--page-max); margin-inline: auto; padding: var(--space-4) var(--gutter);
}
.nav__brand { display: inline-flex; align-items: center; gap: var(--space-5); }
.nav__logo { color: var(--color-brand-primary); }
.nav__links { display: none; gap: 54px; }
.nav__links a, .nav__brand { padding-block: 13px; margin-block: -13px; } /* 44 px tap height, no layout change */
.nav__brand { padding-block: 8px; margin-block: -8px; }
/* small inline links get a taller tap area without moving anything (WCAG 2.5.8) */
.consent a, .footer__privacy { display: inline-block; padding-block: 5px; margin-block: -5px; }
.nav__cta { display: none; }
.nav__menu { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-inline-end: -10px; }
@media (hover: hover) { .nav__links a:hover { color: var(--color-brand-text); } }

/* ==================================================================================
   PHONE < 768 (Figma frame 219:11672, 390 wide: margin 20, content 350) and
   TABLET 768–1199 (not drawn in Figma — LAYOUT.md rules; values marked "tablet" are Claude's)
   Normal flow; vertical gaps are Figma's measured distances (mobile dump + get_design_context).
   ================================================================================== */
@media (max-width: 1199px) {
  .sec > .canvas, .who > .pin > .canvas, .pin__stage > .whatido { display: flex; flex-direction: column; align-items: stretch; }
  .work .work__carousel, .stack__blur, .hero__scroll { display: none; }

  /* shapes keep Figma's mobile stroke (1.2 at ×0.6) where scaled */
  .shape--i { border-radius: 24px; } .shape--o { border-radius: 44px; } .shape--d { border-radius: 8.4px 42px 42px 8.4px; }

  /* NAV: phone = logo + name + ☰ (Figma 219:11673: logo at y 20, ☰ at y 22) */
  .nav__inner { height: 68px; padding-block: 0; }

  /* ---------- 01 HERO ---------- */
  .hero > .canvas { padding-top: 112px; padding-bottom: 24px; }
  .hero__text { display: flex; flex-direction: column; align-items: flex-start; }
  .hero__statement { margin-top: 24px; }
  .hero__cta { margin-top: 28px; margin-inline-start: 0; }
  .hero__visual { display: block; align-self: center; width: 340px; max-width: 100%; margin-top: 16px; }
  .hero__render img { width: 100%; height: auto; }

  /* ---------- 02 WHO / WHAT / WHERE ---------- */
  .who .canvas { padding-top: 32px; padding-bottom: 56px; position: relative; }
  .who__mark { position: relative; align-self: flex-end; width: 46.8px; height: 63px; }
  .who__mark > * { position: absolute; }
  .who__mark-i { left: 0; top: 0; width: 12.6px; height: 36px; }
  .who__mark-d { left: 16.2px; top: 0; width: 30.6px; height: 36px; }
  .who__mark-o { left: 0; top: 41.4px; width: 46.8px; height: 21.6px; }
  .who__mark .shape--line { border-width: 1.2px; }
  /* the strip bleeds to the screen edges; the active word sits centred, neighbours at --who-gap
     (word widths in em, measured on Figma at 240 px: מה 2.425 · מי 1.72 · איפה 4.033) */
  .who__strip { position: relative; margin-top: 17px; margin-inline: calc(-1 * var(--gutter)); height: 96px; overflow: hidden; --who-gap: 28px; }
  .who__word { position: absolute; top: 0; white-space: nowrap; color: var(--color-text-primary); }
  .who__word.is-active { color: var(--color-brand-text); }
  .who__word--ma { left: calc(50% - 1.2125em); }
  .who__word--mi { left: calc(50% + 1.2125em + var(--who-gap)); }
  .who__word--eifo { left: calc(50% - 1.2125em - var(--who-gap) - 4.033em); }
  /* display > text > pagination (Ido, 2026-10-19): the active word's text centred under it, then the 05 dots + a swipe cue */
  .who__col { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; max-width: 340px; align-self: center; }
  .who__dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 28px; direction: ltr; }
  .who__swipe { width: 16px; height: 16px; margin-left: 10px; color: var(--color-text-muted); }
  .who__col .t-small { color: var(--color-text-secondary); }
  .who__col.is-active .t-label, .who__col.is-active .t-small { color: var(--color-brand-text); }
  .who__col:not(.is-active) { display: none; }

  /* ---------- 03 BIO ---------- */
  .bio > .canvas { padding-top: 48px; padding-bottom: 64px; }
  .bio__title { align-self: flex-start; }
  .bio__photo { position: relative; margin-top: 24px; height: 349px; }
  .bio__photo > * { position: absolute; }
  .bio__portrait, .bio__brush { right: 0; top: 0; width: 260px; height: 349px; }
  .bio__portrait img { width: 100%; height: 100%; object-fit: cover; filter: drop-shadow(-1px 1px 3.65px rgba(0, 0, 0, 0.25)); }
  .bio__pill { left: calc(157.9px - 122.5px); top: calc(300.6px - 38px); width: 245px; height: 76px; transform: rotate(6deg); }
  .bio__loop { left: calc(79.1px - 42px); top: calc(51.7px - 18px); width: 84px; height: 36px; transform: rotate(8deg); }
  .bio__statement { margin-top: 32px; }
  .bio__details { margin: 32px 0 0; display: flex; flex-direction: column; gap: 24px; }
  .bio__detail { display: flex; flex-direction: column; gap: 10px; }
  .bio__detail dd { margin: 0; }
  .bio__cta { margin-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

  /* ---------- 04 WHAT I DO ---------- */
  .whatido { padding-top: 40px; padding-bottom: 64px; position: relative; }
  /* positions in em of the word size (Figma 390: אני 48 from the right, rows 76 apart), so the group scales below 390 */
  .whatido__words { position: relative; height: 2.85em; margin: 0; font: inherit; font-size: var(--fs-display-words); }
  .whatido__word { position: absolute; white-space: nowrap; }
  .whatido__word--ma { right: 0; top: 0; }
  .whatido__word--ani { right: 0.6em; top: 0.95em; }
  .whatido__word--ose { left: 0; top: 1.9em; }
  .whatido__underline { position: absolute; left: calc(var(--gutter) + 1.05 * var(--fs-display-words)); top: calc(40px + 2.8 * var(--fs-display-words)); width: calc(2.1125 * var(--fs-display-words)); height: calc(0.125 * var(--fs-display-words)); border-radius: 5px; background: var(--color-deco-green); }
  .whatido__words { z-index: 1; }
  .whatido__intro { margin-top: 36px; display: flex; flex-direction: column; align-items: flex-start; }
  .whatido__intro .btn { margin-top: 28px; }
  .whatido__intro .t-small { margin-top: 12px; }

  /* ---------- 05 CARDS: swipe row ---------- */
  .stack { padding-top: 32px; padding-bottom: 56px; }
  .stack__cards {
    display: flex; gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 0 25px 40px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 25px; scrollbar-width: none;
  }
  .stack__cards::-webkit-scrollbar { display: none; }
  .card {
    position: relative; flex: none; width: 340px; height: 459px; scroll-snap-align: start;
    background: var(--color-bg-page); border: 1px solid var(--color-border-subtle); border-radius: 20px;
    box-shadow: 0 20px 40px rgba(4, 3, 15, 0.10); overflow: hidden;
  }
  .card > * { position: absolute; }
  .card__badge { left: 25px; top: 25px; width: 40px; height: 40px; border-radius: 20px; background: var(--color-deco-green); display: grid; place-items: center; }
  .card__badge .icon { width: 20px; height: 20px; }
  .card__title { right: 25px; top: 25px; font-size: 28px; line-height: 34px; white-space: nowrap; }
  .card__desc { right: 25px; top: 100px; width: 272px; font-size: 13px; line-height: 20px; color: var(--color-text-secondary); }
  .card__list { right: 25px; top: 261px; margin: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13px; line-height: 20px; white-space: nowrap; }
  .card__num { left: 25px; top: 356px; }
  .stack__dots { display: flex; justify-content: center; gap: 8px; margin-top: -16px; direction: ltr; } /* Figma 219:11789: active dot at the LEFT (flagged to Ido) */
  .stack__dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--color-ink-200); }
  .stack__dots span.is-active { background: var(--color-text-primary); }

  /* ---------- 06 TOOLS: 3 × 2 grid ---------- */
  .tools > .canvas { padding-block: 40px; }
  .tools__track { display: grid; grid-template-columns: repeat(3, minmax(0, 108px)); justify-content: center; column-gap: min(13px, 3.3vw); row-gap: 12px; margin: 0; }
  .tools__pill { height: 58px; display: grid; place-items: center; border: 1px solid var(--color-border-subtle); border-radius: 29px; letter-spacing: 0.6px; white-space: nowrap; }

  /* ---------- 07 STATEMENT ---------- */
  .statement > .canvas { padding-block: 64px; position: relative; }
  .statement__text { font-size: min(28px, 7.18vw); line-height: min(36px, 9.23vw); text-align: center; text-wrap: initial; } /* 28/36 from 390 up (Figma); shrinks below so «בכל שורת קוד,» stays one line */
  .statement__key { font-weight: 700; color: var(--color-brand-text); }
  .statement__marker { position: absolute; right: var(--gutter); top: 66px; width: 8px; height: 32px; }

  /* ---------- 08 WORK: stacked list (Figma 219:11823) ---------- */
  .work { padding: 40px var(--gutter) 16px; }
  .work__list { display: flex; flex-direction: column; gap: 48px; margin: 0; max-width: 688px; margin-inline: auto; }
  .work__card { position: relative; display: block; }
  .work__card-surface { position: relative; display: block; aspect-ratio: 350 / 210; background: var(--color-bg-page); overflow: hidden; }
  .work__card .work__laptop.mockup-laptop { position: absolute; display: block; left: 5.714%; top: 20.95%; width: 88.571%; --mockup-shadow: 0 10px 20px -20px rgba(4, 3, 15, 0.16); }
  .work__card .work__laptop > span { display: block; }
  .work__card-text { display: flex; flex-direction: column; align-items: flex-start; margin-top: 20px; }
  .work__card-title { direction: ltr; text-align: right; }
  .work__card-title--he { font-family: var(--font-display); text-transform: none; direction: rtl; }
  .work__card-line { margin-top: 8px; }
  .work__card-disc { position: absolute; left: 0; bottom: calc(18px + 8px + var(--lh-h1-en-list) * 2 - 48px); width: 48px; height: 48px; border-radius: 50%; background: var(--color-deco-green); display: grid; place-items: center; }
  .work__card-arrow { width: 28px; height: 28px; stroke-width: 2.4px; }

  /* ---------- 09 CONTACT ---------- */
  .contact > .canvas { padding-top: 56px; padding-bottom: 64px; position: relative; }
  .contact__title { align-self: flex-start; max-width: 286px; }
  .contact__disc { position: absolute; left: var(--gutter); top: 60px; width: 48px; height: 48px; border-radius: 50%; background: var(--color-deco-green); }
  .contact__arrow { position: absolute; left: calc(var(--gutter) + 10px); top: 70px; width: 28px; height: 28px; transform: rotate(180deg); stroke-width: 2.4px; }
  .contact__intro { margin-top: 20px; }
  .contact__form { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
  .step { position: relative; margin: 0; padding: 0; height: 200px; border: 1.5px solid var(--color-text-primary); border-radius: 16px; min-inline-size: 0; }
  .step--info { height: calc(254px + var(--msg-extra, 0px)); }   /* three fields: name, email, message */
  .step > * { position: absolute; }
  .step__title { float: none; right: 24px; top: 22.5px; padding: 0; white-space: nowrap; font-size: 32px; line-height: 40px; }
  .chips { right: 24px; top: 86.5px; width: 300px; max-width: calc(100% - 48px); display: flex; flex-wrap: wrap; gap: 8px; }
  .chip { position: relative; display: inline-flex; cursor: pointer; }
  .chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .chip span { padding: 7px 16px; border: 1px solid var(--color-text-primary); border-radius: var(--radius-pill); white-space: nowrap; }
  .chip input:checked + span { background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: var(--color-on-brand-primary); }
  .chip input:focus-visible + span { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
  .field {
    right: 22.5px; left: 22.5px; margin: 0; padding: 10px 14px; resize: none;
    background: var(--color-bg-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); color: var(--color-text-primary);
  }
  .field::placeholder { color: var(--color-text-muted); opacity: 1; }
  .field:focus { outline: none; border-color: var(--color-text-primary); }
  #f-name { top: 76.5px; height: 44px; }
  #f-email { top: 130.5px; height: 44px; }
  #f-msg { top: 184.5px; height: 48px; overflow: hidden; }
  .contact__send { margin-top: 8px; display: flex; flex-direction: column; align-items: flex-start; }
  .consent { display: inline-flex; align-items: flex-start; gap: 6px; cursor: pointer; padding-block: 13px; margin-block: -13px; } /* 44 px tap row */
  .consent input { appearance: none; width: 16px; height: 16px; margin: 1px 0 0; flex: none; background: var(--color-bg-surface); border: 1px solid var(--color-border-strong); border-radius: 4px; display: grid; place-content: center; cursor: pointer; }
  .consent input:checked { background: var(--color-text-primary); border-color: var(--color-text-primary); }
  .consent input:checked::after { content: ""; width: 9px; height: 5px; border: 2px solid var(--color-bg-surface); border-top: 0; border-inline-end: 0; transform: translateY(-1px) rotate(-45deg); }
  .consent a { text-decoration: underline; text-underline-offset: 2px; }
  .contact__send .btn { margin-top: 20px; }
  @media (max-width: 767px) { .contact__send .btn { align-self: center; } }   /* phone: centred (Ido, 2026-10-19) */

  /* ---------- 10 FOOTER (Figma 219:11918, 390 × 454) ---------- */
  .footer > .canvas { position: relative; height: 454px; }
  .footer .canvas > * { position: absolute; }
  html .footer::before { background-size: 48px 96px; background-position: 19px 72px; } /* Figma: the 1440 pattern at ×0.5, placed at (−160, −80) */
  .footer__logo { right: var(--gutter); top: 48px; width: 38.87px; height: 48px; }
  .footer__tagline { right: var(--gutter); top: 112px; }
  .footer__col { gap: 4px; align-items: flex-start; }
  .footer__col h2 { margin-bottom: 6px; }
  .footer__col--menu { right: var(--gutter); top: 184px; }
  .footer__col--contact { right: calc(100% - 170px); top: 184px; } /* takes the hidden «רשתות» column's slot (LinkedIn / Instagram hidden, Ido 2026-10-19) */
  .footer__rule { left: var(--gutter); right: var(--gutter); top: 372px; }
  .footer__copy { right: var(--gutter); top: 396px; }
  .footer__privacy { left: var(--gutter); top: 396px; }
}

/* Mobile-only line break («דיוק⏎בכל פיקסל,») and the hero CTA live only on phones */
.br-m { display: none; }
@media (max-width: 767px) { .br-m { display: inline; } .nav__links, .nav__cta { display: none; } }
@media (min-width: 768px) { .hero__cta { display: none; } }

/* ---------- TABLET 768–1199 (LAYOUT.md; not drawn in Figma) ---------- */
@media (min-width: 768px) and (max-width: 1199px) {
  .nav__inner { height: 96px; }
  .nav__links { display: flex; gap: 32px; }
  .nav__cta { display: inline-flex; }
  .nav__menu { display: none; }

  /* 01: text right, render left */
  .hero > .canvas { display: grid; grid-template-columns: 1fr minmax(240px, 34%); column-gap: 32px; align-items: center; padding-top: 168px; padding-bottom: 96px; }
  .hero__visual { grid-column: 2; grid-row: 1; width: 100%; margin: 0; }
  .hero__text { grid-column: 1; grid-row: 1; }
  .hero__scroll { display: flex; grid-column: 1 / -1; justify-self: center; flex-direction: column; align-items: center; gap: 8px; margin-top: 64px; color: #000; }
  .hero__mouse { width: 48px; height: 48px; }

  /* 02: strip at 160, the three columns in a row */
  .who .canvas { padding-top: 48px; padding-bottom: 72px; }
  .who__mark { position: absolute; right: var(--gutter); top: 40px; width: 62.4px; height: 84px; align-self: auto; }
  .who__mark-i { width: 16.8px; height: 48px; } .who__mark-d { left: 21.6px; width: 40.8px; height: 48px; } .who__mark-o { top: 55.2px; width: 62.4px; height: 28.8px; }
  .who__mark .shape--line { border-width: 1.6px; }
  .who__strip { margin-top: 112px; height: 160px; --who-gap: 0.675em; }
  .who__col { margin-top: 40px; max-width: 420px; }

  /* 03: photo column right, text left */
  .bio > .canvas { display: grid; grid-template-columns: 300px 1fr; column-gap: 40px; padding-top: 64px; padding-bottom: 80px; }
  .bio__title { grid-column: 1; grid-row: 1; }
  .bio__photo { grid-column: 1; grid-row: 2 / span 3; height: 402px; }
  .bio__portrait, .bio__brush { width: 300px; height: 402px; }
  /* decorations stay within the 40 px gap (desktop places them further out, where there is free space) */
  .bio__pill { left: -30px; top: calc(325px - 44px); width: 282px; height: 88px; }
  .bio__loop { left: -10px; top: calc(55px - 20px); width: 94px; height: 41px; }
  .bio__statement { grid-column: 2; grid-row: 2; margin-top: 24px; }
  .bio__details { grid-column: 2; grid-row: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 28px; }
  .bio__cta { grid-column: 2; grid-row: 4; }

  /* 04: words at 160, staggered */
  .whatido { padding-top: 64px; padding-bottom: 80px; }
  .whatido__words { height: 422px; font-size: var(--fs-display-words); }
  .whatido__word--ani { right: 284px; top: 137px; }
  .whatido__word--ose { top: 274px; }
  .whatido__underline { left: calc(var(--gutter) + 321px); top: calc(64px + 387px); width: 337px; height: 13px; border-radius: 7px; }
  .whatido__intro { margin-top: 48px; max-width: 511px; }
  .whatido__intro .btn { margin-top: 32px; }

  /* 05: swipe row, cards 360 × 486 (desktop × 0.9) */
  .stack { padding-top: 48px; padding-bottom: 72px; }
  .stack__cards { padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); gap: 20px; }
  .card { width: 360px; height: 486px; border-radius: 22px; }
  .card__badge { left: 28px; top: 28px; width: 43px; height: 43px; border-radius: 22px; }
  .card__title { right: 28px; top: 28px; font-size: 29px; line-height: 36px; }
  .card__desc { right: 28px; top: 109px; width: 288px; font-size: 14px; line-height: 22px; }
  .card__list { right: 28px; top: 280px; font-size: 14px; line-height: 22px; }
  .card__num { left: 27px; top: 381px; }

  /* 06: pills × 0.8 */
  .tools > .canvas { padding-block: 56px; }
  .tools__track { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 464px; margin-inline: auto; } /* 3 × 2 */
  .tools__pill { width: 144px; height: 77px; border-radius: 38.5px; letter-spacing: 1px; }

  /* 07 */
  .statement > .canvas { padding-block: 96px; align-items: center; }
  .statement__text { width: 720px; max-width: 100%; font-size: var(--fs-h2); line-height: var(--lh-h2); }
  .statement__marker { right: auto; left: calc(50% + 348px); top: calc(96px + 10px); width: 11px; height: 42px; } /* line 1 is ≈ 675 wide at 48 px */

  /* 08: stacked list, card 688 wide */
  .work { padding-top: 64px; padding-bottom: 40px; }
  .work__card-disc { width: 64px; height: 64px; bottom: calc(18px + 8px + var(--lh-h1-en-list) * 2 - 64px); }
  .work__card-arrow { width: 36px; height: 36px; stroke-width: 3px; }

  /* 09: steps side by side */
  .contact > .canvas { padding-top: 64px; padding-bottom: 80px; }
  .contact__title { max-width: none; }
  .contact__disc { top: 72px; width: 64px; height: 64px; }
  .contact__arrow { left: calc(var(--gutter) + 12px); top: 84px; width: 40px; height: 40px; stroke-width: 3px; }
  .contact__intro { max-width: 640px; }
  .contact__form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .step--budget { grid-column: 1; grid-row: 1; }
  .step--info { grid-column: 2; grid-row: 1; }
  .step--budget { height: 254px; }   /* matches step 02 (three fields) */
  .contact__send { grid-column: 1; grid-row: 2; margin-top: 4px; }

  /* 10: desktop arrangement, tighter */
  .footer > .canvas { height: 300px; }
  html .footer::before { background-size: 96px 192px; background-position: calc(50% - 26px) 4px; }
  .footer__logo { top: 64px; }
  .footer__tagline { top: 136px; font-size: 28px; line-height: 36px; }
  .footer__col--menu { right: calc(var(--gutter) + 320px); top: 64px; }
  .footer__col--contact { right: calc(var(--gutter) + 320px + 64px + 90px); top: 64px; }
  .footer__rule { top: 236px; }
  .footer__copy, .footer__privacy { top: 256px; }
}

/* Tablet 768–899: «עידו לוי» at 80 px (≈ 471 wide) does not fit beside the render — stack, render under the text */
@media (min-width: 768px) and (max-width: 899px) {
  .hero > .canvas { grid-template-columns: 1fr; padding-top: 152px; padding-bottom: 72px; }
  .hero__visual { grid-column: 1; grid-row: 2; width: 360px; justify-self: center; margin-top: 32px; }
  .hero__scroll { margin-top: 40px; }
}
@media (min-width: 1024px) and (max-width: 1199px) { .tools__track { max-width: none; } } /* one row of 6 */

/* Nav sheet (all sizes; opened by the ☰ button below 768) */
.sheet {
  inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 20px var(--gutter-mobile) 32px;
  border: 0; background: var(--color-bg-surface); color: var(--color-text-primary);
  flex-direction: column;
}
.sheet[open] { display: flex; }
.sheet::backdrop { background: transparent; }
.sheet__top { display: flex; align-items: center; justify-content: space-between; height: 28px; }
.sheet__close { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-inline-end: -10px; }
.sheet__links { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 64px; }
.sheet__links a { font-size: 32px; line-height: 40px; }
.sheet__cta { margin-top: auto; align-self: flex-start; }
html.is-locked { overflow: hidden; }

/* Desktop never shows the phone-only parts */
@media (min-width: 1200px) { .work__list, .work__more, .who__dots, .stack__dots { display: none !important; } }

/* ==================================================================================
   DESKTOP ≥ 1200 — Figma composition
   ================================================================================== */
@media (min-width: 1200px) {
  .canvas { padding-inline: 0; }
  .sec > .canvas, .pin > .canvas, .pin__stage > .canvas { height: calc(var(--sec-h, 690) * var(--px)); }
  .canvas > *, .footer .canvas > * { position: absolute; }

  /* NAV */
  .nav { top: calc(8 * var(--px)); }
  .nav__inner { height: calc(120 * var(--px)); padding: 0 calc(80 * var(--px)); }
  .nav__links { display: flex; gap: calc(54 * var(--px)); }
  .nav__cta { display: inline-flex; }
  .nav__menu { display: none; }

  /* ---------- 01 HERO (115:2920, 1440×1024) ---------- */
  .hero { --sec-h: 1024; }
  .hero > .canvas { height: calc(1024 * var(--px)); }
  /* below the nav, Figma y maps to 128 + (y − 128) × --hk (laptop mode shrinks the hero to the window) */
  .hero__text { right: calc(174 * var(--px)); top: calc((128 + 170 * var(--hk)) * var(--px)); width: calc(687 * var(--hk) * var(--px)); }
  .hero__title { font-size: calc(112 * var(--hk) * var(--px)); line-height: calc(104 * var(--hk) * var(--px)); white-space: nowrap; }
  .hero__statement { margin-top: calc(23 * var(--hk) * var(--px)); font-size: calc(32 * var(--hk) * var(--px)); line-height: calc(40 * var(--hk) * var(--px)); }
  .hero__cta { display: none; }
  .hero__visual { left: calc(80 * var(--px)); top: calc((128 + 158 * var(--hk)) * var(--px)); width: calc(480 * var(--hk) * var(--px)); }
  .hero__render img { width: 100%; height: auto; }
  .hero__scroll {
    left: calc(713 * var(--px)); top: calc((128 + 717 * var(--hk)) * var(--px)); width: calc(82 * var(--px));
    display: flex; flex-direction: column; align-items: center; gap: calc(9 * var(--hk) * var(--px)); color: #000;
  }
  .hero__mouse { width: calc(58 * var(--hk) * var(--px)); height: calc(58 * var(--hk) * var(--px)); }
  .hero__scroll .t-label { text-align: center; white-space: nowrap; }
}
@media (min-width: 1200px) and (max-height: 1023px) {
  /* hero = one window (nav included) on every desktop window lower than Figma's 1024 */
  .hero > .canvas { height: min(100svh, calc(1024 * var(--px))); }
}

@media (min-width: 1200px) {
  /* ---------- 02 WHO / WHAT / WHERE (118:3155) ---------- */
  .who__mark { left: calc(1282 * var(--px)); top: calc(40 * var(--px)); width: calc(78 * var(--px)); height: calc(105 * var(--px)); }
  .who__mark > * { position: absolute; }
  .who__mark-i { left: 0; top: 0; width: calc(21 * var(--px)); height: calc(60 * var(--px)); }
  .who__mark-d { left: calc(27 * var(--px)); top: 0; width: calc(51 * var(--px)); height: calc(60 * var(--px)); }
  .who__mark-o { left: 0; top: calc(69 * var(--px)); width: calc(78 * var(--px)); height: calc(36 * var(--px)); }
  .who__strip { left: 0; top: calc(250 * var(--px)); width: 100%; height: calc(210 * var(--px)); overflow: hidden; }
  .who__word { position: absolute; top: 0; white-space: nowrap; color: var(--color-text-primary); }
  .who__word.is-active { color: var(--color-brand-text); }
  .who__word--mi { left: calc(1173 * var(--px)); }
  .who__word--ma { left: calc(429 * var(--px)); }
  .who__word--eifo { left: calc(-701 * var(--px)); }
  .who__col { width: calc(260 * var(--px)); display: flex; flex-direction: column; gap: 10px; }
  .who__col .t-small { color: var(--color-text-secondary); }
  .who__col.is-active .t-label, .who__col.is-active .t-small { color: var(--color-brand-text); }
  .who__col--mi { left: calc(80 * var(--px)); top: calc(120 * var(--px)); }
  .who__col--ma { left: calc(556 * var(--px)); top: calc(520 * var(--px)); }
  .who__col--eifo { left: calc(80 * var(--px)); top: calc(520 * var(--px)); }

  /* ---------- 03 BIO (118:3180) ---------- */
  .bio__title { right: calc(80 * var(--px)); top: calc(104 * var(--px)); }
  .bio__photo { inset: 0; pointer-events: none; }
  .bio__photo > * { position: absolute; }
  .bio__pill { left: calc((1011 - 179.79) * var(--px)); top: calc((614.5 - 56) * var(--px)); width: calc(359.58 * var(--px)); height: calc(112 * var(--px)); transform: rotate(6deg); }
  .bio__portrait, .bio__brush { left: calc(978 * var(--px)); top: calc(200 * var(--px)); width: calc(382 * var(--px)); height: calc(512 * var(--px)); }
  .bio__portrait img { filter: drop-shadow(-1px 1px 3.65px rgba(0, 0, 0, 0.25)); } /* Figma shadow −1/1/7.3 follows the cut-out (CSS blur = Figma blur ÷ 2) */
  .bio__portrait img { width: 100%; height: 100%; object-fit: cover; }
  .bio__loop { left: calc((955.8 - 60) * var(--px)); top: calc((270.1 - 26) * var(--px)); width: calc(120 * var(--px)); height: calc(52 * var(--px)); transform: rotate(8deg); }
  .bio__statement { right: calc((1440 - 816) * var(--px)); top: calc(112 * var(--px)); width: calc(738 * var(--px)); }
  .bio__details { right: calc((1440 - 816) * var(--px)); top: calc(338 * var(--px)); margin: 0; display: flex; gap: calc(28 * var(--px)); }
  .bio__detail { width: calc(220 * var(--px)); display: flex; flex-direction: column; gap: 10px; }
  .bio__detail dd { margin: 0; }
  .bio__cta { right: calc((1440 - 320) * var(--px)); top: calc(500 * var(--px)); display: flex; flex-direction: column; align-items: flex-start; gap: calc(12 * var(--px)); }

  /* ---------- 04 WHAT I DO (118:3206) ---------- */
  .whatido__words { inset: 0; margin: 0; font: inherit; }
  .whatido__word { position: absolute; white-space: nowrap; }
  .whatido__word--ma { left: calc(778 * var(--px)); top: calc(60 * var(--px)); }
  .whatido__word--ani { left: calc(382 * var(--px)); top: calc(266 * var(--px)); }
  .whatido__word--ose { left: calc(80 * var(--px)); top: calc(472 * var(--px)); }
  .whatido__underline { left: calc(561 * var(--px)); top: calc(642 * var(--px)); width: calc(506 * var(--px)); height: calc(20 * var(--px)); border-radius: calc(10 * var(--px)); background: var(--color-deco-green); }
  .whatido__words { z-index: 1; }
  .whatido__intro { right: calc(80 * var(--px)); top: calc(300 * var(--px)); width: calc(400 * var(--px)); display: flex; flex-direction: column; align-items: flex-start; z-index: 2; }
  .whatido__intro .btn { margin-top: calc(32 * var(--px)); margin-inline-start: calc(5 * var(--px)); }
  .whatido__intro .t-small { margin-top: calc(14 * var(--px)); margin-inline-start: calc(5 * var(--px)); }

  /* ---------- 05 CARD STACK (118:3225) ---------- */
  .stack__blur { inset: 0; opacity: 0.6; filter: blur(6px); pointer-events: none; } /* static, never animated */
  .stack__cards { inset: 0; margin: 0; }
  .card {
    position: absolute; width: calc(400 * var(--px)); height: calc(540 * var(--px));
    background: var(--color-bg-page); border: 1px solid var(--color-border-subtle); border-radius: calc(24 * var(--px));
    box-shadow: var(--shadow-card); overflow: hidden;
  }
  .card > * { position: absolute; }
  .card { transform: rotate(var(--rot)) scale(var(--depth-scale, 1)); opacity: var(--depth-opacity, 1); }
  .card--1 { left: calc(562.8 * var(--px)); top: calc(98.4 * var(--px)); --rot: -5deg; }
  .card--2 { left: calc(518.3 * var(--px)); top: calc(83.3 * var(--px)); --rot: 4deg; }
  .card--3 { left: calc(527 * var(--px)); top: calc(81.1 * var(--px)); --rot: -1.5deg; }
  /* stepping (JS): a card that has not landed yet is hidden; the ones underneath step back (MOTION-SPEC 05) */
  .js .card[data-state="waiting"] { visibility: hidden; }
  .js .card[data-depth="1"] { --depth-scale: 0.95; --depth-opacity: 0.7; }
  .js .card[data-depth="2"] { --depth-scale: 0.9; --depth-opacity: 0.45; }
  .stack__skip { left: calc(80 * var(--px)); top: calc(64 * var(--px)); display: inline-flex; align-items: center; gap: 4px; padding: 13px 0; margin-block: -13px; color: var(--color-text-primary); z-index: 3; }
  .stack__skip-icon { width: 16px; height: 16px; }
  .card__badge { left: calc(31 * var(--px)); top: calc(31 * var(--px)); width: calc(48 * var(--px)); height: calc(48 * var(--px)); border-radius: calc(24 * var(--px)); background: var(--color-deco-green); display: grid; place-items: center; }
  .card__title { right: calc(31 * var(--px)); top: calc(31 * var(--px)); white-space: nowrap; }
  .card__desc { right: calc(31 * var(--px)); top: calc(121 * var(--px)); width: calc(320 * var(--px)); color: var(--color-text-secondary); }
  .card__list { right: calc(31 * var(--px)); top: calc(311 * var(--px)); margin: 0; display: flex; flex-direction: column; gap: 8px; white-space: nowrap; }
  .card__num { left: calc(30 * var(--px)); top: calc(423 * var(--px)); }

  /* ---------- 06 TOOLS (118:3256, 1440×320) ---------- */
  .tools { --sec-h: 320; }
  .tools__track { left: calc(80 * var(--px)); top: calc(112 * var(--px)); width: calc(1280 * var(--px)); height: calc(96 * var(--px)); margin: 0; display: flex; justify-content: space-between; align-items: center; direction: ltr; } /* Figma desktop row: Claude Code at the left */
  .tools__pill { width: calc(180 * var(--px)); height: calc(96 * var(--px)); display: grid; place-items: center; border: 1px solid var(--color-border-subtle); border-radius: calc(48 * var(--px)); white-space: nowrap; }

  /* ---------- 07 STATEMENT (118:3285) ---------- */
  .statement__marker { left: calc(1195 * var(--px)); top: calc(192 * var(--px)); width: calc(14 * var(--px)); height: calc(56 * var(--px)); }
  .statement__text { left: calc(261 * var(--px)); top: calc(179 * var(--px)); width: calc(920 * var(--px)); text-align: center; text-wrap: initial; }
  .statement__key { font-weight: 700; color: var(--color-brand-text); }

  /* ---------- 08 WORK — carousel, layout B (219:11389) ---------- */
  .work > .canvas { overflow: hidden; }
  .work__slot { display: block; padding: 0; background: none; border: 0; cursor: pointer; text-align: start; }
  /* one element per project; JS moves them between the three Figma slots (data-slot). Every slot shares the CURRENT
     box and the thumbnails are a transform of it, so a project change moves no layout (no layout shift, CLS) */
  .work__slot { left: calc(60 * var(--px)); top: calc(110 * var(--px)); width: calc(880 * var(--px)); height: calc(470 * var(--px)); transform-origin: 50% 50%; }
  /* thumbnails (Ido, 2026-10-19): fully inside the section, never cut — the same laptop-on-panel at 194 × 103.6
     (current × 0.220455), centred on the current laptop (x 500), at y 6 / 584: centres 287.2 above / 290.8 below 345.
     Figma had 400 × 214 at y −104 / 580, half outside the frame. */
  .work__slot[data-slot="prev"] { transform: translateY(calc(-287.2 * var(--px))) scale(0.220455); }
  .work__slot[data-slot="next"] { transform: translateY(calc(290.8 * var(--px))) scale(0.220455); }
  /* fixed sizes inside a thumbnail ÷ 0.220455, so they render as designed at 194 wide (radius 40, small shadows) */
  .work__slot:is([data-slot="prev"], [data-slot="next"]) .work__surface { border-radius: calc(181.44 * var(--px)); }
  /* a soft white → transparent edge so the thumbnails blend into the page instead of touching a hard line */
  .work__carousel::before, .work__carousel::after { content: ""; position: absolute; left: 0; right: 0; height: calc(28 * var(--px)); z-index: 2; pointer-events: none; }
  .work__carousel::before { top: 0; background: linear-gradient(var(--color-bg-surface), rgba(255, 255, 255, 0)); }
  .work__carousel::after { bottom: 0; background: linear-gradient(rgba(255, 255, 255, 0), var(--color-bg-surface)); }
  .work__surface { position: absolute; inset: 28.09% 0 0 0; background: var(--color-bg-page); border-radius: calc(40 * var(--px)); }
  .work__laptop.mockup-laptop { position: absolute; display: block; }
  .work__slot[data-slot="current"] .work__laptop { left: 3.98%; top: 8.51%; width: 92.04%; --mockup-shadow: 0 calc(26 * var(--px)) calc(52 * var(--px)) calc(-20 * var(--px)) rgba(4, 3, 15, 0.16); filter: drop-shadow(0 calc(24 * var(--px)) calc(24 * var(--px)) rgba(13, 13, 26, 0.14)); }
  .work__slot[data-slot="prev"] .work__laptop, .work__slot[data-slot="next"] .work__laptop { left: 4%; top: 8.88%; width: 92.05%; --mockup-shadow: 0 calc(27.22 * var(--px)) calc(54.43 * var(--px)) calc(-45.36 * var(--px)) rgba(4, 3, 15, 0.16); filter: drop-shadow(0 calc(22.68 * var(--px)) calc(22.68 * var(--px)) rgba(13, 13, 26, 0.14)); }
  .work__laptop > span { display: block; }
  .work__infos { right: calc(80 * var(--px)); top: calc(150 * var(--px)); }
  .work__info { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; align-items: flex-start; opacity: 0; } /* Figma: inactive titles sit at opacity 0 and cross-fade */
  .work__info.is-active { position: relative; opacity: 1; }
  .work__title--he { font-size: var(--fs-h1-en-list); line-height: var(--lh-h1-en-list); direction: rtl; } /* «ירון לוי» = FUP Sataf at the same 80/76 */
  .work__title { direction: ltr; text-align: right; white-space: nowrap; }
  .work__line { margin-top: calc(16 * var(--px)); white-space: nowrap; }
  /* Disc + arrow = the contact layout (Ido, 2026-10-19): an 88 arrow with a 6 px line overshooting the 64 disc toward
     where it points. Contact ↙: arrow centre (−12, +16) from the disc centre → here ↖: (−12, −16).
     Disc stays at Figma's (1296, 376); the link box covers disc + arrow (1272…1360 × 348…440). */
  .work__disc { left: calc(1272 * var(--px)); top: calc(348 * var(--px)); width: calc(88 * var(--px)); height: calc(92 * var(--px)); }
  .work__disc-dot { position: absolute; left: calc(24 * var(--px)); top: calc(28 * var(--px)); width: calc(64 * var(--px)); height: calc(64 * var(--px)); border-radius: 50%; background: var(--color-deco-green); }
  .work__arrow { position: absolute; left: 0; top: 0; width: calc(88 * var(--px)); height: calc(88 * var(--px)); stroke-width: calc(6 * var(--px)); }
  /* «לחצו כדי לקרוא על הפרויקט» (Ido, 2026-10-19; not in Figma): beside the disc, centred on the dot (y 408) */
  .work__disc-text { position: absolute; right: calc(100% + 12 * var(--px)); top: calc(60 * var(--px) - 9px); white-space: nowrap; color: var(--color-text-primary); }
  .work__ctas { right: calc(80 * var(--px)); top: calc(588 * var(--px)); display: flex; align-items: center; gap: calc(12 * var(--px)); }   /* Ido 2026-10-19: Primary + ghost side by side (Figma had a Link button at y 600) */

  /* ---------- 09 CONTACT (118:3317) ---------- */
  .contact__disc { left: calc(1214 * var(--px)); top: calc(130 * var(--px)); width: calc(64 * var(--px)); height: calc(64 * var(--px)); border-radius: 50%; background: var(--color-deco-green); }
  .contact__arrow { left: calc(1190 * var(--px)); top: calc(134 * var(--px)); width: calc(88 * var(--px)); height: calc(88 * var(--px)); transform: rotate(180deg); stroke-width: calc(6 * var(--px)); }
  .contact__title { right: calc(400 * var(--px)); top: calc(64 * var(--px)); white-space: nowrap; }
  .contact__intro { right: calc(398 * var(--px)); top: calc(194 * var(--px)); width: calc(960 * var(--px)); }
  .contact__form { inset: 0; }
  .contact__form > * { position: absolute; }
  .step { margin: 0; padding: 0; border: 1.5px solid var(--color-text-primary); border-radius: calc(16 * var(--px)); height: calc(200 * var(--px)); min-inline-size: 0; }
  .step > * { position: absolute; }
  .step__title { float: none; right: calc(26.5 * var(--px)); top: calc(22.5 * var(--px)); padding: 0; white-space: nowrap; }
  .step--budget { left: calc(600 * var(--px)); top: calc(318 * var(--px)); width: calc(440 * var(--px)); }
  .step--info { left: calc(80 * var(--px)); top: calc(318 * var(--px)); width: calc(488 * var(--px)); height: calc(200 * var(--px) + var(--msg-extra, 0px)); } /* grows with the message */
  .chips { right: calc(26.5 * var(--px)); top: calc(86.5 * var(--px)); width: calc(300 * var(--px)); display: flex; flex-wrap: wrap; gap: 8px; }
  .chip { position: relative; display: inline-flex; cursor: pointer; }
  .chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .chip span { padding: 7px 16px; border: 1px solid var(--color-text-primary); border-radius: var(--radius-pill); white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-reveal), border-color var(--dur-micro) var(--ease-reveal); }
  .chip input:checked + span { background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: var(--color-on-brand-primary); }
  .chip input:focus-visible + span { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
  .field {
    right: calc(26.5 * var(--px)); width: calc(432 * var(--px)); margin: 0; padding: 10px 14px; resize: none;
    background: var(--color-bg-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); color: var(--color-text-primary);
    transition: border-color var(--dur-base) var(--ease-reveal);
  }
  .field::placeholder { color: var(--color-text-muted); opacity: 1; }
  .field:focus { outline: none; border-color: var(--color-text-primary); }
  #f-name, #f-email { top: calc(76.5 * var(--px)); width: calc(211 * var(--px)); height: calc(44 * var(--px)); }
  #f-email { right: calc(247.5 * var(--px)); }
  #f-msg { top: calc(130.5 * var(--px)); height: calc(48 * var(--px)); overflow: hidden; }
  .contact__send { right: calc(400 * var(--px)); top: calc(542 * var(--px)); display: flex; flex-direction: column; align-items: flex-start; }
  .consent { display: inline-flex; align-items: flex-start; gap: 6px; cursor: pointer; }
  .consent input { appearance: none; width: 16px; height: 16px; margin: 1px 0 0; flex: none; background: var(--color-bg-surface); border: 1px solid var(--color-border-strong); border-radius: 4px; cursor: pointer; display: grid; place-content: center; }
  .consent input:checked { background: var(--color-text-primary); border-color: var(--color-text-primary); }
  .consent input:checked::after { content: ""; width: 9px; height: 5px; border: 2px solid var(--color-bg-surface); border-top: 0; border-inline-end: 0; transform: translateY(-1px) rotate(-45deg); }
  .consent a { text-decoration: underline; text-underline-offset: 2px; }
  .contact__send .btn { margin-top: calc(24 * var(--px)); }

  /* ---------- 10 FOOTER (115:5239, 1440×300) ---------- */
  .footer > .canvas { height: calc(300 * var(--px)); }
}

/* Footer base (all sizes) */
.footer { position: relative; overflow: hidden; background: var(--color-bg-inverse); color: var(--color-text-inverse); }
.footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.07;
  background: url("/assets/ido/patterns/ido-signature-tile.svg") calc(50% - 26px) 4px / 96px 192px repeat; /* Figma 115:5255: green signature at 7 % */
}
.footer__logo { color: var(--color-brand-primary); }
.footer__col { display: flex; flex-direction: column; }
.footer__col a { padding-block: 2px; }
.footer__talk { color: var(--color-deco-green); }
.footer .muted { color: var(--color-ink-400); }   /* the design system's text/muted on dark (6.15:1); light-page muted is 4.0:1 here */
.footer__rule { margin: 0; border: 0; height: 1px; background: var(--color-border-strong); }
@media (hover: hover) { .footer a:hover { color: var(--color-deco-green); } }

@media (min-width: 1200px) {
  .footer__logo { right: calc(80 * var(--px)); top: calc(64 * var(--px)); width: calc(38.87 * var(--px)); height: calc(48 * var(--px)); }
  .footer__tagline { right: calc(80 * var(--px)); top: calc(136 * var(--px)); width: calc(326 * var(--px)); }
  .footer__col { gap: 10px; }
  .footer__col h2 { margin-bottom: 0; }
  .footer__col--menu { right: calc((1440 - 818) * var(--px)); top: calc(64 * var(--px)); align-items: flex-start; }
  .footer__col--menu h2 + a { margin-top: 0; }
  .footer__col--contact { right: calc((1440 - 326) * var(--px)); top: calc(64 * var(--px)); align-items: flex-start; }
  .footer__col { gap: 4px; }
  .footer__col h2 { margin-bottom: 6px; }
  .footer__col a { padding: 0; }
  .footer__rule { left: calc(80 * var(--px)); top: calc(236 * var(--px)); width: calc(1280 * var(--px)); }
  .footer__copy { right: calc(80 * var(--px)); top: calc(256 * var(--px)); }
  .footer__privacy { left: calc(80 * var(--px)); top: calc(256 * var(--px)); }
}

/* ==================================================================================
   PHASE 4 — interactions (functional states; the motion layer comes in Phase 6)
   ================================================================================== */

/* Sticky nav (Ido, 2026-10-19: sticky, hides on scroll down, shows on scroll up) */
.nav { transition: transform var(--dur-base) var(--ease-reveal); }
.nav.is-stuck { position: fixed; top: 0; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border-subtle); }
.nav.is-hidden { transform: translateY(-100%); }
.nav:focus-within { transform: none; } /* keyboard users never lose it */

/* Pinned sections (desktop, JS on): the stage stays on screen while the steps scroll past; the next section
   cannot show during the pin (Ido, 2026-10-19). Extra scroll = (steps − 1) × 50vh. */
@media (min-width: 1200px) {
  .js .pin { position: relative; height: calc(690 * var(--px) + (var(--pin-steps) - 1) * 50svh); }
  .js .pin--services { --pin-steps: 4; }   /* 04 hold (half a screen) + 3 cards */
  .js .pin--work { --pin-steps: var(--work-steps, 3); }   /* one step per project (JS sets --work-steps) */
  .js .pin > .canvas, .js .pin > .pin__stage { position: sticky; top: max(0px, calc((100svh - 690 * var(--px)) / 2)); }
  .js .pin__stage { height: calc(690 * var(--px)); }
  .js .pin__stage > .canvas { position: absolute; inset: 0; }
  /* phase "intro" = 04; "cards" = 05: 04's words give way to 05's blurred copy, the intro leaves upward */
  .js .pin__stage[data-phase="intro"] .stack { pointer-events: none; }
  .js .pin__stage[data-phase="intro"] :is(.stack__blur, .stack__skip) { opacity: 0; visibility: hidden; }
  .js .pin__stage[data-phase="cards"] .whatido { pointer-events: none; }
  .js .pin__stage[data-phase="cards"] :is(.whatido__words, .whatido__underline) { opacity: 0; }
  .js .pin__stage[data-phase="cards"] .whatido__intro { opacity: 0; visibility: hidden; transform: translateY(calc(-120 * var(--px))); }
  .pin--work > .canvas { overflow: hidden; }
  .work__carousel:focus-visible { outline-offset: -4px; }
  .work__slot[data-slot="wait"] { display: none; }
  .work__slot[data-slot="prev"], .work__slot[data-slot="next"] { cursor: pointer; }
}
.stack__skip, .work__skip { display: none; }
@media (min-width: 1200px) { .js :is(.stack__skip, .work__skip) { display: inline-flex; } }
/* 08 list: «עוד פרויקטים» (phone / tablet) */
.work__more { display: flex; margin: 40px auto 0; }
.work__more[hidden] { display: none; }

/* 02 strip: keyboard focus ring inside the band. Desktop + JS (Ido, 2026-10-19): pinned, one word per scroll step;
   only the active word's text shows, in the slot under the centred word (Figma's «מה» column spot). */
.who__strip:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; }
.who__strip { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
@media (min-width: 1200px) {
  .js .pin--who { --pin-steps: 3; }
  .js .who__col { left: calc(556 * var(--px)); top: calc(520 * var(--px)); }
  .js .who__col:not(.is-active) { opacity: 0; visibility: hidden; }
  .js .who__col.is-active :is(.t-label, .t-small) { color: var(--color-brand-text); }
}

@media (max-width: 767px) {
  .who__strip { touch-action: pan-y; }
  /* inactive columns stay readable for screen readers (visually hidden, not removed) */
  .who__col:not(.is-active) { display: flex; position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* 05 + 02 phone/tablet dots are buttons (24 px tap area around an 8 px dot) — one component */
:is(.stack__dots, .who__dots) button { width: 24px; height: 24px; margin: -8px -4px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }   /* 24 × 24 taps that don't overlap (WCAG 2.5.8, Lighthouse): dots 24 apart, Figma 16 */
:is(.stack__dots, .who__dots) button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-ink-200); }
:is(.stack__dots, .who__dots) button.is-active::before { background: var(--color-text-primary); }
.stack__dots span { display: none; }

/* 09 form: errors (PROPOSED texts) */
.field-error { color: var(--color-status-error); }
.field[aria-invalid="true"] { border-color: var(--color-status-error); }
.consent.is-invalid input { border-color: var(--color-status-error); }
.step-errors { display: flex; flex-direction: column; gap: 4px; }
.contact__send .field-error { margin-top: 6px; }
.contact.is-sent .contact__form { display: none; }
.contact__result--success { border: 1.5px solid var(--color-text-primary); border-radius: 16px; display: grid; place-items: center; padding: 24px; text-align: center; }
@media (min-width: 1200px) {
  .step-errors { left: calc(80 * var(--px)); top: calc(526 * var(--px) + var(--msg-extra, 0px)); width: calc(488 * var(--px)); }
  .contact__result--success { position: absolute; left: calc(80 * var(--px)); top: calc(318 * var(--px)); width: calc(960 * var(--px)); height: calc(200 * var(--px)); }
  .contact__result--error { position: absolute; right: calc(400 * var(--px)); top: calc(652 * var(--px)); }
}
@media (max-width: 1199px) {
  .contact__result--success { margin-top: 32px; min-height: 200px; }
  .contact__result--error { margin-top: 12px; }
  .step-errors:not(:has(.field-error:not([hidden]))) { display: none; } /* takes no gap until an error shows */
}
@media (min-width: 768px) and (max-width: 1199px) { .step-errors { grid-column: 2; grid-row: 2; } }

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