/* FOCUS variant D — "Target, immersive". Every colour/font flows from the tokens on :root. */
@font-face { font-family: "taamula"; src: url("/assets/fonts/taamula-regular-aaa.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "taamula"; src: url("/assets/fonts/taamula-bold-aaa.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "taamula"; src: url("/assets/fonts/taamula-ultrabold-aaa.otf") format("opentype"); font-weight: 900; font-display: swap; }

:root {
  /* reference palette: glowing orange-red, deep black, white */
  --hot-1: #ff6a26;
  --hot-2: #f4501a;
  --hot-3: #ee3a14;
  --hot-4: #e3201b;
  --hot-glow: #ff8a3a;
  --target-red: #e31e24;      /* the logo's red ("בול.") */
  --target-white: #f7f3ee;    /* the 3D target's glossy porcelain (fed to the WebGL shader) */
  --night: #0a0a0a;
  --on-night: #f4f1ee;
  --muted-night: rgba(244, 241, 238, .72);
  --paper: #ffffff;
  --ink-d: #0b0b0b;
  --line-hot: rgba(11, 11, 11, .55);
  --line-night: rgba(244, 241, 238, .22);
  --field-night: rgba(244, 241, 238, .55);
  --card-night: rgba(244, 241, 238, .06);
  --scribble: var(--brand);
  --ring-hot: #0b0b0b;
  --ring-night: #ffffff;
  --display: "taamula", "afek", "Arial Narrow", sans-serif;
  --gutter: clamp(16px, 2.4vw, 34px);
  --hdr-ink: var(--ink-d);
  --hot-grad:
    radial-gradient(62% 58% at 76% 16%, var(--hot-glow) 0%, transparent 72%),
    radial-gradient(58% 62% at 10% 92%, var(--hot-4) 0%, transparent 72%),
    linear-gradient(158deg, var(--hot-2) 0%, var(--hot-3) 52%, var(--hot-4) 100%);
  /* static-fallback SVG gradients */
  --fb-k1: #6d6d6d; --fb-k2: #161616; --fb-k3: #000000;
  --fb-w1: #ffffff; --fb-w2: #f1ebe6; --fb-w3: #b3a69c;   /* porcelain disc + bars */
  --fb-p1: #8c8c8c; --fb-p2: #1c1c1c; --fb-p3: #000000;   /* black-chrome centre dot */
  --sticker: var(--paper);          /* small white labels that sit on top of the giant type */
  --sticker-ink: var(--ink-d);
  --cursor-ink: var(--ink-d);
  --cursor-fill: rgba(11, 11, 11, .3);   /* "hold and drag" disc: readable over orange, white and black */
  --ease-out: cubic-bezier(.16, .84, .2, 1);
  --fb-hi: rgba(255, 255, 255, .78);
}
html[data-tone="night"] { --hdr-ink: var(--on-night); }

body.vd { background: var(--night); }
.skip-link { z-index: 300; }
.tiny { font: 700 .75rem/1.45 var(--font); letter-spacing: .06em; text-transform: uppercase; }
.hot { background: var(--hot-grad); color: var(--ink-d); }
.hot :focus-visible { outline-color: var(--ring-hot); }
.contact-d :focus-visible, .foot-d :focus-visible { outline-color: var(--ring-night); }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.st-k1 { stop-color: var(--fb-k1); } .st-k2 { stop-color: var(--fb-k2); } .st-k3 { stop-color: var(--fb-k3); }
.st-w1 { stop-color: var(--fb-w1); } .st-w2 { stop-color: var(--fb-w2); } .st-w3 { stop-color: var(--fb-w3); }
.st-p1 { stop-color: var(--fb-p1); } .st-p2 { stop-color: var(--fb-p2); } .st-p3 { stop-color: var(--fb-p3); }

/* the small logo target (header + intro) */
.mini-target { display: block; overflow: visible; }
.mt-ring { fill: none; stroke: currentColor; stroke-width: 9; }
.mt-cross { stroke: var(--brand); stroke-width: 8; }
.mt-bull { fill: var(--brand); }
.mt-dot { fill: var(--paper); }

/* ── intro (visual only) ─────────────────────────────── */
.intro { display: none; }
html.intro-on .intro {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--night); color: var(--on-night); cursor: pointer;
  clip-path: inset(0 0 0 0); transition: clip-path .55s cubic-bezier(.76, 0, .24, 1);
  animation: intro-safety .01s 2.3s forwards;   /* never traps, even if JS fails */
}
html.intro-out .intro { clip-path: inset(0 0 100% 0); }
@keyframes intro-safety { to { visibility: hidden; opacity: 0; pointer-events: none; } }
.intro-count { position: absolute; top: 16px; inset-inline-end: var(--gutter); font: 700 .78rem/1 var(--font); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.intro-mark { display: flex; align-items: center; gap: .2em; direction: ltr; font-family: var(--display); font-weight: 900; font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: 1; }
.intro-mark .mini-target { width: .82em; height: .82em; margin-inline-end: .12em; }
.intro-he { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .45s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.intro.ready .intro-he { max-width: 4em; opacity: 1; }
.intro-enter { position: absolute; top: calc(50% + clamp(2.4rem, 5vw, 4rem)); font: 700 .75rem/1 var(--font); letter-spacing: .14em; opacity: 0; transition: opacity .25s; }
.intro.ready .intro-enter { opacity: 1; }

/* ── header: tiny corner labels ──────────────────────── */
.hdr {
  position: fixed; top: 0; inset-inline: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 4px var(--gutter); color: var(--hdr-ink); pointer-events: none;
  font: 700 .75rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase;
  transition: color .35s;
}
.hdr a { pointer-events: auto; color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }
.hdr a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hdr :focus-visible { outline-color: var(--hdr-ink); }
.hdr-brand { justify-self: start; font-weight: 700; }
.hdr-mark { display: inline-flex; align-items: center; gap: 7px; direction: ltr; font-family: var(--display); font-weight: 900; font-size: 1.3rem; letter-spacing: .03em; }
.hdr-mark .mini-target { width: 20px; height: 20px; }
.hdr-end { justify-self: end; display: flex; align-items: center; gap: clamp(10px, 2vw, 30px); }
.hdr-end ul { display: flex; gap: clamp(8px, 2vw, 26px); margin: 0; padding: 0; list-style: none; }
.hdr-count { font-variant-numeric: tabular-nums; }
/* scroll progress: a hairline that grows from the right (RTL start) */
.hdr-progress { position: absolute; top: 0; inset-inline: 0; height: 2px; overflow: hidden; pointer-events: none; }
.hdr-progress > span { display: block; height: 100%; background: var(--hdr-ink); transform-origin: 100% 50%; transform: scaleX(0); transition: background-color .35s; }

/* ── giant display type ─────────────────────────────── */
.fl { display: inline-block; white-space: nowrap; }
.hl { display: block; clip-path: inset(-.4em -.3em -.08em -.3em); }

/* ── 01 hero ─────────────────────────────────────────── */
.hero-d { position: relative; }
.hero-stage {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  min-height: 100vh; min-height: 100svh; display: grid; place-items: center;
  padding: 84px 0 90px;
}
.hero-stage::after {   /* dims the pinned stage while the next sheet slides over it */
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: var(--night); opacity: var(--shade, 0);
}
.hero-stage::before {
  content: ""; position: absolute; inset: -25%; z-index: -1; pointer-events: none;
  background: radial-gradient(30% 30% at 50% 50%, var(--hot-glow), transparent 72%);
  opacity: .5; animation: glow-drift 16s ease-in-out infinite alternate;
}
@keyframes glow-drift { from { transform: translate(-16%, -12%); } to { transform: translate(14%, 10%); } }
/* the giant headline: each line is fitted to ~92% of the width by d.js (Taamula is condensed → scale by width) */
.hero-title {
  position: relative; z-index: 1; width: 100%; margin: 0; text-align: center;
  font-family: var(--display); font-weight: 900; line-height: .74; letter-spacing: -.005em;
  font-size: clamp(4.5rem, 24vw, 40rem);
}
.hero-title .hl { will-change: transform; letter-spacing: -.005em; }   /* em of each fitted line, so the fit stays linear */
.hl > .fl { transition: transform 1.05s cubic-bezier(.16, .84, .2, 1); }
.hl + .hl > .fl { transition-delay: .09s; }
html.intro-on:not(.intro-out) .hl > .fl { transform: translateY(115%); }
html.intro-on .hl > .fl { animation: line-safety .01s 2.4s forwards; }
@keyframes line-safety { to { transform: none; } }

.gl-slot { position: relative; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.gl-slot.dragging { cursor: grabbing; }
.gl-slot canvas, .gl-slot .gl-fallback { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gl-slot.gl-live .gl-fallback { display: none; }
/* the canvas is --room× larger than the target so it can zoom in on scroll and stay sharp (empty pixels are cheap) */
.hero-slot {
  --base: min(84vh, 94vw, 860px); --room: 1.75;
  position: absolute; z-index: 2; left: 50%; top: 52%;
  width: calc(var(--base) * var(--room)); aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  transition: opacity .9s ease .15s, transform 1.2s cubic-bezier(.16, .84, .2, 1) .1s;
}
html.intro-on:not(.intro-out) .hero-slot { opacity: 0; transform: translate(-50%, -44%) scale(.82); }
html.intro-on .hero-slot { animation: slot-safety .01s 2.4s forwards; }
@keyframes slot-safety { to { opacity: 1; transform: translate(-50%, -50%); } }

.hero-slot .gl-fallback { inset: auto; left: 50%; top: 50%; width: calc(100% / var(--room)); height: calc(100% / var(--room)); transform: translate(-50%, -50%); }
/* small corner labels: white "stickers" so they stay legible on top of the giant black type */
.hero-kicker, .hero-sub, .hero-coord, .hero-scroll { background: var(--sticker); color: var(--sticker-ink); }
.hero-kicker {
  position: absolute; z-index: 3; top: 64px; inset-inline-start: var(--gutter); margin: 0;
  display: inline-flex; align-items: center; gap: .5em; padding: .55em 1em;
  border-radius: 999px;
  font: 700 clamp(.78rem, 1vw, .92rem)/1 var(--font); letter-spacing: .14em;
}
.hero-coord { position: absolute; z-index: 3; top: 68px; left: var(--gutter); padding: .45em .7em; border-radius: 999px; }  /* dir="ltr" element → physical side */
.hero-sub { position: absolute; z-index: 3; top: 106px; inset-inline-start: var(--gutter); max-width: 31ch; margin: 0; padding: 12px 14px; border-radius: 6px; text-transform: none; letter-spacing: .02em; font-weight: 700; }
.hero-sub a { color: inherit; text-underline-offset: 3px; }
.hero-scroll { position: absolute; z-index: 3; bottom: 24px; left: 50%; transform: translateX(-50%); text-decoration: none; min-height: 44px; padding: 0 1.1em; border-radius: 999px; display: inline-flex; align-items: center; gap: .5em; white-space: nowrap; }
.hero-scroll:hover { text-decoration: underline; text-underline-offset: 4px; }

/* static SVG target (no WebGL / high contrast) */
.fb-ring { fill: none; stroke: url(#g-black); }
.fb-black { fill: url(#g-black); }
.fb-disc { fill: url(#g-white); }
.fb-bar { fill: url(#g-bar); }
.fb-pearl { fill: url(#g-pearl); }
.fb-hi { fill: none; stroke: var(--fb-hi); stroke-width: 4; stroke-linecap: round; }
.fb-gloss { fill: var(--fb-hi); opacity: .55; }

/* custom cursor ring (mouse only; the native cursor stays visible) — grows on links, "hold and drag" on the 3D objects */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 250; width: 0; height: 0;
  pointer-events: none; opacity: 0; transition: opacity .25s; color: var(--cursor-ink);
}
.cursor[data-tone="night"] { --cursor-ink: var(--on-night); }
.cursor.on { opacity: 1; }
.cursor i {
  position: absolute; left: -52px; top: -52px; width: 104px; height: 104px; border-radius: 50%;
  border: 1.5px solid currentColor; transform: scale(.3); transition: transform .45s var(--ease-out), background-color .3s;
}
.cursor span {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap;
  font: 700 .62rem/1 var(--font); letter-spacing: .1em; opacity: 0; transition: opacity .2s;
}
.cursor.is-link i { transform: scale(.62); background: color-mix(in srgb, currentColor 10%, transparent); }
.cursor.is-drag { color: var(--on-night); }
.cursor.is-drag i { transform: scale(1); background: var(--cursor-fill); }
.cursor.is-drag span { opacity: 1; }
.cursor.is-drag.down i { transform: scale(.74); }

/* ── 02 manifesto (white) ────────────────────────────── */
.manifesto { position: relative; isolation: isolate; overflow: hidden; background: var(--paper); color: var(--ink-d); padding: clamp(84px, 12vh, 140px) var(--gutter) clamp(56px, 9vh, 110px); }
.scratch { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.scribble-static { display: none; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.scribble-static polyline { fill: none; stroke: var(--scribble); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: bevel; }
html:not(.motion) .scribble-static, html.a11y-still .scribble-static { display: block; }
html:not(.motion) .scratch, html.a11y-still .scratch { display: none; }
.mf-text { position: relative; z-index: 1; }
.mf-line {
  margin: 0 0 .42em; font-family: var(--display); font-weight: 400;
  font-size: clamp(2.7rem, 8.6vw, 10rem); line-height: .9; text-align: justify; text-align-last: justify;
}
.mf-l2 { text-indent: 18%; }
.mf-l3 { text-align: end; text-align-last: end; }
.mf-line em { font-style: normal; font-weight: 900; color: var(--target-red); }
.mf-foot { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px 40px; margin-top: clamp(36px, 7vh, 90px); }
.mf-hint { margin: 0; }
.tiny-para { max-width: 38ch; margin: 0; font: 700 clamp(.9rem, 1.1vw, 1.05rem)/1.4 var(--font); }

/* ── 03 services ─────────────────────────────────────── */
.svc {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  min-height: 100vh; min-height: 100svh; padding: 64px var(--gutter) 40px;
  display: flex; flex-direction: column;
}
.svc + .svc { border-top: 1px solid var(--line-hot); }
.svc-label { margin: 0; position: relative; z-index: 3; }
.svc-h {
  position: relative; z-index: 1; margin: clamp(40px, 15vh, 170px) 0 0;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 4vw;
  font-family: var(--display); font-weight: 700; line-height: .8; letter-spacing: -.005em;
  font-size: clamp(4.2rem, min(26vh, 15vw), 19rem);
}
.svc-num { direction: ltr; }
.pn-roll { display: inline-block; vertical-align: top; height: .8em; overflow: hidden; }
.pn-col { display: block; will-change: transform; }
.pn-col > span { display: block; height: .8em; line-height: .8; }
.svc-rule { position: relative; z-index: 1; height: 1px; background: var(--line-hot); margin: clamp(10px, 1.8vh, 20px) 0 clamp(14px, 2.2vh, 24px); }
.svc-body { position: relative; z-index: 3; display: grid; grid-template-columns: auto auto 1fr; gap: 24px clamp(28px, 4vw, 64px); align-items: start; }
.svc-body p, .svc-body ul { margin: 0; padding: 0; list-style: none; }
.svc-next { justify-self: end; }
.svc-slot {
  position: absolute; z-index: 2; left: 50%; top: 50%;
  width: min(76vh, 64vw, 780px); aspect-ratio: 1 / 1; transform: translate(-50%, -50%);
}

/* ── 04 contact (black) ──────────────────────────────── */
.contact-d {
  --ink: var(--on-night); --ink-2: var(--muted-night); --muted: var(--muted-night);
  --danger: #ff9c9c; --ok: #8be3a8;
  background: var(--night); color: var(--on-night);
  padding: clamp(72px, 11vh, 120px) var(--gutter) clamp(56px, 9vh, 110px);
}
.c-top { display: flex; justify-content: space-between; margin-bottom: clamp(16px, 3vh, 32px); color: var(--muted-night); }
.c-title { margin: 0 0 clamp(28px, 6vh, 64px); color: var(--on-night); font-family: var(--display); font-weight: 900; line-height: .82; font-size: clamp(4rem, 17vw, 20rem); }
.c-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 90px); align-items: start; }
.contact-d .lead { color: var(--muted-night); font: 700 clamp(1.05rem, 1.4vw, 1.25rem)/1.55 var(--font); margin: 0 0 clamp(20px, 3vh, 34px); max-width: 32ch; }
/* direct lines: big clean rows with an arrow (not floating cards) */
.contact-d .phone-card { display: flex; align-items: center; gap: 18px; width: 100%; max-width: none; margin: 0; padding: 22px 2px; background: none; border: 0; border-top: 1px solid var(--line-night); border-radius: 0; box-shadow: none; color: var(--on-night); text-decoration: none; }
.contact-d .phone-card:last-child { border-bottom: 1px solid var(--line-night); }
.contact-d .phone-card small { display: block; margin-bottom: 6px; color: var(--muted-night); font: 700 .78rem/1 var(--font); letter-spacing: .06em; }
.contact-d .phone-card strong { font: 900 clamp(1.7rem, 2.8vw, 2.5rem)/1 var(--display); letter-spacing: .02em; }
.contact-d .phone-card .ico { width: 54px; height: 54px; flex-shrink: 0; background: var(--hot-3); color: #fff; border-radius: 50%; }
.contact-d .phone-card .ico-wa { background: var(--wa, #25d366); }
.contact-d .phone-card::after { content: "←"; margin-inline-start: auto; font: 900 1.7rem/1 var(--font); color: var(--muted-night); transition: transform .3s var(--ease-out, ease), color .2s; }
.contact-d .phone-card:hover::after { transform: translateX(-8px); color: var(--hot-1); }
/* the form: a calm card, filled fields, one clear action */
.contact-d .form { background: var(--card-night); border: 1px solid var(--line-night); border-radius: 28px; padding: clamp(24px, 3.4vw, 48px); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.contact-d .f-title { margin: 0 0 8px; color: var(--on-night); font: 900 clamp(2rem, 3vw, 2.8rem)/1 var(--display); }
.contact-d .form-note { margin: 0 0 clamp(20px, 3vh, 30px); color: var(--muted-night); font-size: .95rem; }
.contact-d .field { margin-bottom: 18px; }
.contact-d .field label { display: block; margin-bottom: 8px; color: var(--muted-night); font: 700 .82rem/1.2 var(--font); letter-spacing: .04em; }
.contact-d .req { color: var(--hot-1); }
.contact-d .input { min-height: 56px; padding: 14px 16px; background: rgba(255, 255, 255, .06); color: var(--on-night); border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; font-size: 1.05rem; transition: border-color .2s, background-color .2s; }
.contact-d .input:hover { background: rgba(255, 255, 255, .09); }
.contact-d .input:focus { border-color: var(--hot-3); background: rgba(255, 255, 255, .08); outline: 3px solid color-mix(in srgb, var(--hot-3) 40%, transparent); outline-offset: 0; }
.contact-d .input[aria-invalid="true"] { border-color: var(--danger); }
.contact-d textarea.input { min-height: 140px; }
.contact-d .form .btn-primary { width: auto; min-width: 230px; min-height: 58px; padding: 0 34px; gap: 14px; background: var(--hot-3); color: #fff; box-shadow: 0 18px 36px -16px var(--hot-3); border-radius: 999px; font-size: 1.12rem; letter-spacing: .02em; }
.contact-d .form .btn-primary::after { content: "←"; font-size: 1.3rem; transition: transform .3s var(--ease-out, ease); }
.contact-d .form .btn-primary:hover { background: var(--hot-1); }
.contact-d .form .btn-primary:hover::after { transform: translateX(-6px); }
.contact-d .status { margin: 16px 0 0; }

/* ── footer (black, giant wordmark) ──────────────────── */
.foot-d { background: var(--night); color: var(--on-night); border-top: 1px solid var(--line-night); padding: clamp(40px, 7vh, 72px) var(--gutter) calc(88px + env(safe-area-inset-bottom)); overflow: hidden; }
.f-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; padding-bottom: clamp(24px, 4vh, 40px); border-bottom: 1px solid var(--line-night); }
.f-k { margin: 0 0 10px; color: var(--muted-night); }
.f-v { margin: 0; padding: 0; list-style: none; font: 700 clamp(.98rem, 1.2vw, 1.12rem)/1.5 var(--font); }
.f-v li + li { margin-top: 2px; }
.foot-d a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-night); text-underline-offset: 5px; }
.foot-d a:hover { text-decoration-color: currentColor; }
.f-v a { display: inline-flex; align-items: center; min-height: 32px; }
/* the giant wordmark: FOCUS with the target as its O — fully on screen, never under the floating buttons */
.f-giant { margin: clamp(26px, 6vh, 64px) 0 0; text-align: center; white-space: nowrap; font-family: var(--display); font-weight: 900; line-height: .86; font-size: 14.5vw; padding-bottom: .05em; color: var(--on-night); }
.ch-o { display: inline-block; width: .74em; height: .74em; margin: 0 .03em; vertical-align: -.02em; }
.f-target { display: block; width: 100%; height: 100%; overflow: visible; }
.ft-ring { fill: none; stroke: var(--on-night); stroke-width: 11; }
.ft-bull { fill: var(--on-night); }
.ft-eye { fill: var(--night); }
.ft-cross { fill: none; stroke: var(--hot-3); stroke-width: 7; stroke-linecap: round; }
.f-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: clamp(14px, 2.4vh, 22px); border-top: 1px solid var(--line-night); color: var(--muted-night); }
.f-bottom a { min-height: 32px; display: inline-flex; align-items: center; }

/* ── reveal (only once d.js is running, never under reduced motion) ── */
html.rv-on.motion .rv { opacity: 0; transform: translateY(34px); transition: opacity .9s ease, transform 1s cubic-bezier(.16, .84, .2, 1); }
html.rv-on.motion .rv.in { opacity: 1; transform: none; }
html.a11y-still .rv { opacity: 1 !important; transform: none !important; }

/* ── widget: high contrast ───────────────────────────── */
html.a11y-contrast {
  --hot-1: #000; --hot-2: #000; --hot-3: #000; --hot-4: #000; --hot-glow: #000;
  --night: #000; --on-night: #fff; --muted-night: #fff; --paper: #000; --ink-d: #fff;
  --line-hot: #fff; --line-night: #fff; --field-night: #fff; --card-night: #000;
  --hdr-ink: #fff; --ring-hot: #00e5ff; --ring-night: #00e5ff;
  --fb-k1: #fff; --fb-k2: #fff; --fb-k3: #fff;
  --fb-w1: #ffd400; --fb-w2: #ffd400; --fb-w3: #ffd400;
  --sticker: #000; --sticker-ink: #fff;
  --fb-p1: #000; --fb-p2: #000; --fb-p3: #000; --fb-hi: transparent;
}
html.a11y-contrast .hdr { background: #000; }
html.a11y-contrast .hero-stage::before, html.a11y-contrast .hero-stage::after { display: none; }
html.a11y-contrast .hero-kicker, html.a11y-contrast .hero-sub, html.a11y-contrast .hero-coord, html.a11y-contrast .hero-scroll { border: 1.5px solid #fff; }
html.a11y-contrast .gl-slot canvas { display: none; }
html.a11y-contrast .gl-slot .gl-fallback { display: block; }
html.a11y-contrast .mf-line em { color: var(--brand); }
html.a11y-contrast .contact-d .btn-primary { background: var(--brand); color: #000; }
html.a11y-contrast .contact-d .phone-card .ico { background: var(--brand); color: #000; }
html.a11y-contrast .contact-d .form { background: #000; border: 2px solid #fff; box-shadow: none; }
html.a11y-contrast .contact-d .input { background: #000; border: 2px solid #fff; }
html.a11y-contrast .cursor { display: none; }

/* ── small screens ───────────────────────────────────── */
@media (max-width: 760px) {
  .hdr-tag, .hdr-count, .hdr-phone, .hero-coord { display: none; }
  .hero-stage { padding: 64px 0 84px; }
  .hero-slot { --base: min(112vw, 64vh); --room: 1.7; top: 54%; }
  .hero-kicker { top: 58px; }
  .hero-sub { top: 104px; max-width: 27ch; }
  .hero-title { line-height: .8; }
  .mf-l2 { text-indent: 0; }
  .svc { min-height: 0; padding: 60px var(--gutter) 48px; }
  .svc-label { order: 0; }
  .svc-h { order: 1; flex-direction: column; align-items: flex-start; gap: .1em; margin-top: 24px; font-size: clamp(3.4rem, 20vw, 8rem); }
  .svc-slot { order: 2; position: relative; left: auto; top: auto; transform: none; width: min(88vw, 420px); margin: -14vw auto -4vw; }
  .svc-rule { order: 3; }
  .svc-body { order: 4; grid-template-columns: 1fr 1fr; }
  .svc-body ul { justify-self: start; }
  .svc-next { display: none; }
  .c-grid { grid-template-columns: 1fr; }
  .f-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .foot-d { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } /* room for the floating buttons */
  .f-bottom { flex-direction: column; }
  .contact-d .form .btn-primary { width: 100%; }
  .tiny { font-size: .7rem; }
}
.c-title .dot { color: var(--hot-3); opacity: 1; }   /* site.css has an unrelated SVG .dot rule (opacity .14) */
html.a11y-contrast .c-title .dot { color: var(--brand); }
/* high contrast: the static target steps behind the type so the headline stays legible */
html.a11y-contrast .gl-slot { z-index: 0; opacity: .38; }

/* ── magnetic controls (translate only; set by d.js on mouse devices) ── */
.mag { transition: translate .7s cubic-bezier(.2, .9, .3, 1.3); }
.btn.mag { transition: transform .15s, background-color .15s, box-shadow .15s, translate .7s cubic-bezier(.2, .9, .3, 1.3); }
.mag.magging { transition-duration: .15s, .15s, .15s, .18s; }
.hdr a.mag.magging, .hero-scroll.mag.magging, .phone-card.mag.magging { transition-duration: .18s; }

/* ── scroll choreography: only under html.fx (motion allowed, not "stop animations") ──
   Without .fx everything below is inert and the page is the plain static layout. */
html.fx .hero-d { height: 250vh; height: 250svh; }
html.fx .hero-stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; transform-origin: 50% 30%; }
html.fx .manifesto { z-index: 3; margin-top: -100vh; margin-top: -100svh; border-radius: 28px 28px 0 0; box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, .35); }
html.fx .contact-d { position: relative; z-index: 4; border-radius: 28px 28px 0 0; }

/* manifesto: words rise out of a mask, staggered; "בול." lands with a hit */
html.fx .split .w { display: inline-block; clip-path: inset(-.4em -.3em -.04em -.3em); }
html.fx .split .wi { display: inline-block; transform: translate3d(0, 112%, 0); transition: transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 55ms); }
html.fx .split.in .wi { transform: none; }
html.fx .mf-line em { display: inline-block; position: relative; transform-origin: 50% 60%; }
html.fx .mf-line em::after {
  content: ""; position: absolute; left: 50%; top: 45%; width: 1.3em; height: 1.3em; margin: -.65em 0 0 -.65em;
  border: .035em solid currentColor; border-radius: 50%; opacity: 0; transform: scale(.2); pointer-events: none;
}
html.fx .mf-l3.in em { animation: hit .8s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--hit, 0) * 1ms); }
html.fx .mf-l3.in em::after { animation: shock 1s cubic-bezier(.1, .7, .3, 1) both; animation-delay: calc(var(--hit, 0) * 1ms + 90ms); }
@keyframes hit { 0% { transform: scale(1.9) rotate(-7deg); } 45% { transform: scale(.9) rotate(1.5deg); } 70% { transform: scale(1.05); } 100% { transform: none; } }
@keyframes shock { 0% { opacity: .9; transform: scale(.25); } 100% { opacity: 0; transform: scale(2.6); } }

/* services, phones/tablets (no pin): the number rolls up out of a mask when the panel arrives */
html.fx:not(.pin-on) .svc .svc-num { display: inline-block; clip-path: inset(-.3em -.2em 0 -.2em); }
html.fx:not(.pin-on) .svc .sn { display: inline-block; transform: translate3d(0, 105%, 0); transition: transform 1s var(--ease-out) .1s; }
html.fx:not(.pin-on) .svc.in .sn { transform: none; }

/* services, desktop: a pinned stage (background + rolling number + one morphing object) under scrolling text */
/* each sticky layer lives in its own full-height absolute track, so it can never overhang the section */
.svc-track { display: none; }
html.pin-on .services { position: relative; }
html.pin-on .svc-track { display: block; position: absolute; inset: 0; pointer-events: none; }
html.pin-on .svc-track-bg { z-index: 0; }
html.pin-on .svc-track-pin { z-index: 2; }
html.pin-on .svc-bg, html.pin-on .svc-pin { position: sticky; top: 0; height: 100vh; height: 100svh; }
.svc-pin-in { display: flex; flex-direction: column; height: 100%; padding: 64px var(--gutter) 40px; }
.svc-pin-in .svc-label { visibility: hidden; }
.svc-pin .pin-slot { pointer-events: auto; }
html.pin-on .svc { background: none; isolation: auto; overflow: visible; }
html.pin-on .svc > .svc-slot { display: none; }
html.pin-on .svc .svc-num { opacity: 0; }
html.pin-on .svc:last-of-type { min-height: 140vh; min-height: 140svh; }
html.pin-on .contact-d { margin-top: -40vh; margin-top: -40svh; }

/* footer wordmark: letters rise in, staggered */
html.fx .f-giant .fl { clip-path: inset(-.4em -.3em -.12em -.3em); }
html.fx .f-giant .ch { display: inline-block; transform: translate3d(0, 120%, 0); transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 45ms); }
html.fx .f-giant.in .ch { transform: none; }