/* design-v4/desk · מערכת השולחן
   Three surfaces (cutting mat, table, paper), shared objects that lie on them,
   and a "room" layer: body[data-room] swaps a handful of tokens and adds the
   objects of that service line. Brand only: orange, black, white.
   Orange is never text on white. Motion: transform and opacity only. */

:root {
  --f-body: "Heebo", system-ui, sans-serif;
  --f-disp: "Heebo", system-ui, sans-serif;
  --f-label: "Rubik", "Heebo", system-ui, sans-serif;     /* label maker tape */
  --f-hand: "Playpen Sans Hebrew", "Heebo", system-ui, sans-serif; /* marker, handwriting */

  /* surfaces */
  --mat: var(--orange);
  --mat-line: rgba(35,31,32,.22);
  --mat-line-major: rgba(35,31,32,.5);
  --table: var(--black);
  --paper: var(--white);
  --rule: rgba(35,31,32,.12);

  /* depth: how far an object is from the surface */
  --sh-flat: 0 1px 1px rgba(35,31,32,.18), 0 6px 14px rgba(35,31,32,.2);
  --sh-lift: 0 14px 30px rgba(35,31,32,.28);
  --sh-held: 0 26px 46px rgba(35,31,32,.4);

  /* room tokens */
  --tilt: 1;                               /* multiplies every object's --r */
  --tape-bg: rgba(255,255,255,.74);        /* clear tape */
  --tape-edge: rgba(35,31,32,.1);
  --sheet-fold: transparent;
}

/* ---------- rooms: only tokens change here, objects live below ---------- */
[data-room="music"] { --tilt: 1.35; --tape-bg: #3d3839; --tape-edge: rgba(255,255,255,.08); }   /* gaffer tape, a looser hand */
[data-room="seo"]   { --tilt: .55; }                                                               /* precise: everything nearly square */
[data-room="sites"] { --tilt: .8; }
[data-room="apps"]  { --tilt: .8; }
[data-room="biz"]   { --tilt: .6; }

body { background: var(--paper); color: var(--black); font-weight: 400; }

/* ---------- header ---------- */
.hd { background: var(--black); color: var(--white); --lang-on-bg: var(--white); --lang-on-fg: var(--black); }
.brand span { font-weight: 900; }
.nav a:hover { color: var(--orange); }
.nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--orange); }
.lang .off { min-height: 36px; padding: 0 12px; display: inline-flex; align-items: center; font-size: 14px; opacity: .55; }
@media (max-width: 760px) { .lang .off { min-height: 34px; padding: 0 10px; font-size: 13px; } }

/* ============================ surfaces ============================ */
.mat { position: relative; --focus: var(--black); background-color: var(--mat);
  background-image:
    linear-gradient(var(--mat-line) 1px, transparent 1px), linear-gradient(90deg, var(--mat-line) 1px, transparent 1px),
    linear-gradient(var(--mat-line-major) 1.5px, transparent 1.5px), linear-gradient(90deg, var(--mat-line-major) 1.5px, transparent 1.5px);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px; }
.ruler { display: flex; justify-content: space-between; padding: 8px var(--pad) 0; font-size: 11px; font-weight: 700; color: var(--black); opacity: .7; overflow: hidden; }
.table { position: relative; background: var(--table); color: var(--white); --focus: var(--orange);
  background-image: repeating-linear-gradient(100deg, rgba(255,255,255,.018) 0 2px, transparent 2px 9px); }

/* ============================ shared objects ============================ */

/* rotation: every object reads --r and the room's --tilt */
.obj { transform: translate3d(var(--x, 0px), var(--y, 0px), 0) rotate(calc(var(--r, 0deg) * var(--tilt))); }

/* index card: ruled, orange margin line. The name card, the decision card */
.card { position: relative; background: var(--paper); color: var(--black); box-shadow: var(--sh-lift); }
.idx { padding: clamp(26px, 3.5vw, 56px); padding-top: clamp(40px, 4vw, 64px);
  background-image: linear-gradient(transparent 0, transparent calc(100% - 1px), var(--rule) calc(100% - 1px)); background-size: 100% 2.1em; }
.idx::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: clamp(14px, 2vw, 30px); width: 2px; background: var(--orange); }

/* polaroid: a face or a screenshot. Draggable on a desktop */
.polaroid { position: relative; z-index: 3; background: var(--paper); padding: 14px 14px 56px; box-shadow: var(--sh-lift);
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) rotate(calc(var(--r, 0deg) * var(--tilt))); }
.polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; pointer-events: none; background: #eee; }
.polaroid.wide img { aspect-ratio: 4 / 3; }

/* tape: clear on most rooms, gaffer in music. Place with .t-top / .t-s / .t-e */
.tape { position: absolute; z-index: 4; width: 120px; height: 30px; background: var(--tape-bg); box-shadow: 0 1px 2px var(--tape-edge); pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent calc(100% - 2px)); }
.t-top { top: -15px; left: 50%; margin-left: -60px; transform: rotate(-5deg); }
.t-s { top: -10px; inset-inline-start: -26px; transform: rotate(-38deg); width: 92px; }
.t-e { top: -10px; inset-inline-end: -26px; transform: rotate(38deg); width: 92px; }
[dir="rtl"] .t-s { transform: rotate(38deg); }
[dir="rtl"] .t-e { transform: rotate(-38deg); }

/* binder clip and paper clip, both SVG from the page sprite */
.binder { position: absolute; z-index: 4; top: -22px; inset-inline-end: 28px; width: 48px; height: 50px; pointer-events: none; }
.clip { position: absolute; z-index: 2; top: -14px; inset-inline-end: 26px; width: 22px; height: 54px; border: 3px solid #8f8a8b; border-radius: 12px; border-bottom-color: transparent; }

/* label maker tape: the section labels and the five lines */
.dymo, .dymo-h span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 18px; background: var(--black); color: var(--white); font-family: var(--f-label); font-weight: 700; letter-spacing: .08em; font-size: clamp(16px, 1.25vw, 20px); border-radius: 3px; text-shadow: 0 1px 0 rgba(255,255,255,.28), 0 -1px 0 rgba(0,0,0,.6); box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.dymo { transform: rotate(calc(var(--r, 0deg) * var(--tilt))); transition: transform .3s var(--ease); }
a.dymo:hover, a.dymo:focus-visible { transform: rotate(0) translate3d(0, -4px, 0); }
.dymo-h { margin-bottom: 30px; }
.dymo-h span { font-size: clamp(20px, 1.8vw, 28px); transform: rotate(calc(-1.5deg * var(--tilt))); }
.table .dymo-h span, .table .dymo { background: var(--white); color: var(--black); text-shadow: 0 1px 0 rgba(255,255,255,.6); box-shadow: 0 3px 0 rgba(0,0,0,.5); }

/* printed sheet: the work, a case */
.sheet { position: relative; display: grid; gap: 10px; background: var(--paper); color: var(--black); padding: 12px 12px 18px; box-shadow: var(--sh-flat), 0 10px 24px rgba(35,31,32,.22);
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) rotate(calc(var(--r, 0deg) * var(--tilt))); transition: transform .45s var(--ease); }

/* notepad with a spiral */
.pad { position: relative; background: var(--paper); border: 2px solid var(--black);
  background-image: linear-gradient(transparent calc(100% - 1px), rgba(35,31,32,.14) calc(100% - 1px)); background-size: 100% 1.45em; }
.pad::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 22px; background: var(--black); background-image: radial-gradient(circle, var(--white) 4px, transparent 5px); background-size: 34px 22px; background-position: center; }

/* sticky note (orange, black text 5.8:1) */
.postit { background: var(--orange); color: var(--black); box-shadow: 0 14px 26px rgba(35,31,32,.25); }

/* coffee ring and push pin: decoration only */
.ring { position: absolute; z-index: 0; width: 180px; height: 180px; border-radius: 50%; border: 10px solid rgba(35,31,32,.12); box-shadow: inset 0 0 0 3px rgba(35,31,32,.07); pointer-events: none; }
.pin { position: absolute; z-index: 5; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4a4445, var(--black) 60%); box-shadow: 0 3px 4px rgba(0,0,0,.35); pointer-events: none; }

/* empty frame: a place kept on the desk for something that has not arrived */
.frame-empty { display: grid; place-items: center; aspect-ratio: 4 / 5; border: 2px dashed rgba(35,31,32,.35); background: repeating-linear-gradient(45deg, rgba(35,31,32,.04) 0 8px, transparent 8px 16px); color: var(--grey); font-size: 14px; text-align: center; padding: 10px; }

/* dragging (desk.js adds .can-drag only on a mouse, never on touch) */
.can-drag [data-drag], .can-drag[data-drag] { cursor: grab; touch-action: none; user-select: none; }
.grabbing { cursor: grabbing !important; }
.dragging { transition: none !important; }

/* primary action inside a card: visible at every width */
.cta-hero { display: inline-flex !important; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; border-radius: 999px; font-size: 18px; justify-self: start; transition: transform .25s var(--ease); }
.cta-hero:hover { transform: translate3d(0, -2px, 0); }
.cta-under { margin-top: 12px; font-size: 15px; color: var(--grey); max-width: 46ch; }

/* ============================ shared sections ============================ */

/* contact: clipboard on the table */
.contact { background: var(--table); color: var(--white); --focus: var(--orange); }
.cb-h { font-weight: 900; font-size: clamp(44px, 6vw, 100px); line-height: .92; letter-spacing: -.03em; }
.cb-risk { color: var(--grey-d); }
.cta-inline { justify-self: start; }
.form { position: relative; background: var(--paper); color: var(--black); padding: 56px clamp(22px, 3vw, 40px) 34px; border-radius: 6px; box-shadow: 0 0 0 14px var(--orange); --focus: var(--black); }
.form::before { content: ""; position: absolute; top: -26px; left: 50%; width: 150px; height: 46px; margin-left: -75px; background: #b9b3b4; border: 3px solid var(--black); border-radius: 8px 8px 14px 14px; }
.f-h { font-weight: 900; font-size: clamp(22px, 2vw, 30px); }
.f-p, .f-n, .f-below { color: var(--grey); opacity: 1; }
.f-err { color: var(--black); background: var(--orange); padding: 0 6px; justify-self: start; }
.f-err:empty { display: none; }
.fld input, .fld select, .fld textarea { border-radius: 3px; }

/* footer */
.ft { background: var(--table); color: var(--white); --focus: var(--orange); }
.foot-big { font-weight: 900; font-size: clamp(64px, 13vw, 220px); letter-spacing: -.04em; padding: 0 .1em; background: var(--orange); color: var(--black); transform: rotate(-1.5deg); transition: transform .3s var(--ease); }
.foot-big:hover { transform: rotate(0); }
.wa { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }

/* ============================ room emblems ============================
   The signature object of each line, small, on the "what I do" cards. */
.emb { width: 54px; height: 54px; color: var(--black); }
.emb .o { fill: var(--orange); }
.emb .w { fill: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .cta-hero:hover, a.dymo:hover { transform: none; }
}

/* ============================ the logo on the desk ============================
   The mark is never stretched: every use crops the viewBox around it (same
   proportions) and scales both axes together. Five appearances:
   header mark, rubber stamp, business card, sticker, and the dot as a motif. */
.brand .logo { width: auto; height: 46px; }
.brand { gap: 12px; }
@media (max-width: 760px) { .brand .logo { height: 40px; } }

/* rubber stamp: inked onto index cards and case documents */
.stamp { position: absolute; z-index: 3; width: clamp(100px, 8.4vw, 124px); height: auto; aspect-ratio: 150 / 232; color: var(--black); opacity: .9; mix-blend-mode: multiply; pointer-events: none; --r: -8deg; }
/* the stamp floats in the corner of the card, so the text flows around it and never under it */
.idx > .stamp, .doc > .stamp { position: relative; float: inline-end; margin-inline-start: clamp(20px, 2.2vw, 32px); margin-block-end: 16px; }
.idx > .stamp { margin-top: clamp(-30px, -2vw, -12px); margin-inline-end: clamp(-34px, -2.4vw, -14px); }
.doc > .stamp { margin-top: clamp(-26px, -2vw, -10px); --r: 7deg; }

/* business card: black, white letters, orange dot. Lies on the desk */
.bcard { position: absolute; z-index: 4; display: flex; align-items: center; gap: 16px; width: 270px; height: 156px; padding: 18px 22px; background: var(--black); color: var(--white); border-radius: 4px; box-shadow: var(--sh-lift); --r: -7deg; }
.bcard .bc-logo { height: 112px; width: auto; flex: none; }
.bcard .bc-logo .dot { fill: var(--orange); }
.bcard .bc-txt { display: grid; gap: 4px; }
.bcard .bc-name { font-weight: 900; font-size: 22px; line-height: 1; }
.bcard .bc-ph { font-size: 14px; color: var(--grey-d); }

/* sticker: the orange square logo, slapped on the clipboard */
.sticker { position: absolute; z-index: 3; top: 22px; inset-inline-end: 22px; width: 84px; height: 84px; padding: 0; border: 5px solid var(--white); border-radius: 6px; box-shadow: 0 3px 8px rgba(35,31,32,.3); transform: rotate(9deg); background: var(--orange); }
@media (max-width: 760px) { .sticker { width: 64px; height: 64px; top: 16px; inset-inline-end: 14px; } .form .f-h { padding-inline-end: 70px; } }
.form .f-h { padding-inline-end: 100px; }

/* the dot: an office dot sticker marks what opens, the current page, the button */
.dot-st { position: absolute; z-index: 5; top: 18px; inset-inline-start: 18px; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #ffa25c, var(--orange) 55%); box-shadow: 0 2px 3px rgba(35,31,32,.35), inset 0 -2px 0 rgba(0,0,0,.08); }
.nav a[aria-current="page"] { box-shadow: none; position: relative; }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--orange); }
.cta::before, .cta-hero::before, .cta-inline::before, .cta-fixed::before { content: ""; flex: none; width: .42em; height: .42em; margin-inline-end: .5em; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 2px var(--black); }

/* sections clip what hangs over their edge (tape, cards) */
.mat, .table, .contact, .lines, .about { overflow-x: clip; }
@media (max-width: 760px) {
  .idx > .stamp, .doc > .stamp { width: 66px; margin-inline-start: 16px; margin-block-end: 16px; }
}

/* ============================ UX pass, 8.11.2026 ============================ */
/* ruled index card: the rules sit under each line of text (1lh), so a rule
   never runs through the letters. The card margin line and the title area stay. */
.idx { background-image: none; }
.idx > p:not(.eyebrow), .idx > .decision-p, .decision > p {
  background-image: linear-gradient(transparent calc(100% - 1px), var(--rule) calc(100% - 1px));
  background-size: 100% 1lh; }
/* footer WhatsApp link: a real tap target */
.ft .wa { display: inline-block; padding-block: 11px; }
/* a sheet returned to from a case page lands below the top, not under the edge */
.case[id] { scroll-margin-top: 90px; }

/* ============================ UX pass, stage 2, 8.11.2026 ============================ */
/* the language switch is live now: a 44px touch target on each side, same pill */
.lang a { position: relative; }
.lang a::before { content: ""; position: absolute; inset: -5px 0; }