@font-face{font-family:Assistant;src:url(../assets/fonts/Assistant-hebrew.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:Assistant;src:url(../assets/fonts/Assistant-latin.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Expression v2 - the one shared stylesheet. Colors, type, spacing and motion
   live here and nowhere else; sections only compose them. */
:root{
  --paper:#FFFFFF; --ink:#121417; --mist:#EEF0F2; --red:#FF3B2F; --graphite:#6B7078; --night:#0B0D10;
  --line:rgba(18,20,23,.12); --line-night:rgba(255,255,255,.14);
  --he:Assistant,Heebo,system-ui,sans-serif;
  --en:"Instrument Sans",system-ui,sans-serif;
  --ease:cubic-bezier(.215,1,.359,1); --d-ui:.5s; --d-enter:1.2s;
  --pad:clamp(20px,5vw,72px); --max:1320px; --sec:clamp(88px,12vw,176px);
  --t-display:clamp(40px,6vw,88px); --t-h2:clamp(30px,3.6vw,52px); --t-h3:clamp(21px,1.9vw,28px);
  --t-body:clamp(16px,1.15vw,18px); --t-small:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-block-start:24px}
body{font-family:var(--he);font-size:var(--t-body);line-height:1.6;color:var(--ink);background:var(--paper);
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.en{font-family:var(--en)}
.dot{color:var(--red)}                                    /* the brand full stop, end of a title only */
.s-paper{background:var(--paper);color:var(--ink)}
.s-mist{background:var(--mist);color:var(--ink)}
.s-night{background:var(--night);color:#fff;--line:var(--line-night)}
.sec{padding-block:var(--sec)}
.t-display{font-size:var(--t-display);font-weight:400;line-height:1.02;letter-spacing:normal}
.t-h2{font-size:var(--t-h2);font-weight:400;line-height:1.08}
.t-h3{font-size:var(--t-h3);font-weight:700;line-height:1.2}
.t-small{font-size:var(--t-small);color:var(--graphite)}
.s-night .t-small{color:#A8AEB6}
/* whole elements rise in as they enter (base.js). Never glyphs, never letters. */
[data-reveal]{opacity:0;transform:translateY(16px)}
[data-reveal].in{opacity:1;transform:none;transition:opacity var(--d-ui) var(--ease),transform var(--d-enter) var(--ease)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}[data-reveal]{opacity:1;transform:none}}

/* ── hero (G3) ── */

/* the brand face: Assistant (owner 24.9, free; was Simpler Pro which needs a paid web license).
   Earlier note on Simpler Pro: Only NAMED in the stack it reached no one
   but this Mac's Chrome: Safari never exposes user-installed fonts, so Safari and
   every visitor got Heebo, and the glass mask was drawn in a different font */
/* one file, two policies: the nav shows at once in the fallback and swaps; the
   headline waits for its face (block), and its reveal waits too - see the JS */
@font-face{font-family:AssistantDisplay;src:url(../assets/fonts/Assistant-hebrew.woff2) format("woff2");font-weight:200 800;font-display:block;unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:AssistantDisplay;src:url(../assets/fonts/Assistant-latin.woff2) format("woff2");font-weight:200 800;font-display:block;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
.hero{--red:#FF3B2F;--ease:cubic-bezier(.215,1,.359,1);--pad:clamp(20px,3.2vw,60px);
      --d-enter:1.2s;--d-ui:.5s}
.hero{font-size:16px;line-height:1.5;background:#0B0D10;color:#fff}
.hero ul{list-style:none}
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;
      --ink:#fff;--nav:#A8AEB6;--ground:#0B0D10}
.hero.v-light{--ink:#121417;--nav:#6B7078;--ground:#fff;background:#fff}

/* a rotated rectangle leaves triangular gaps, so the track is oversized and
   the frame clips it */
.wall{position:absolute;inset:0;overflow:hidden}
.tilt{position:absolute;inset:-18% -8%;display:flex;flex-direction:column;gap:10px;
      justify-content:center;transform:rotate(-11deg)}
.row{display:flex;width:max-content;flex:none;will-change:transform}
/* spacing lives on the tile, not in a flex gap: 16 tiles give 16 gaps and
   half the track is then exactly one lap */
.row i{display:block;flex:none;width:clamp(140px,11.5vw,205px);aspect-ratio:9/16;
       margin-inline-end:10px;background:#1C1F24 center/cover no-repeat}
@keyframes dA{from{transform:translateX(0)}to{transform:translateX(50%)}}
@keyframes dB{from{transform:translateX(50%)}to{transform:translateX(0)}}
.r1{animation:dA 96s linear infinite}.r2{animation:dB 78s linear infinite}
.r3{animation:dA 112s linear infinite}.r4{animation:dB 86s linear infinite}
.v-fast .r1{animation-duration:36s}.v-fast .r2{animation-duration:30s}
.v-fast .r3{animation-duration:42s}.v-fast .r4{animation-duration:33s}
/* 25 px/s: the measured range for a background wall is 7-71, and the fast end
   starts pulling attention off the type */
.v-mid .r1{animation-duration:56s}.v-mid .r2{animation-duration:47s}
.v-mid .r3{animation-duration:64s}.v-mid .r4{animation-duration:51s}
/* netflix and crunchyroll both ship this as one baked still: measured pixel
   delta over 3s = 0. The most-viewed diagonal wall on the web does not move. */
.v-still .r1,.v-still .r2,.v-still .r3,.v-still .r4{animation:none}
.v-still .r2{transform:translateX(18%)}.v-still .r3{transform:translateX(-11%)}
.v-still .r4{transform:translateX(7%)}
/* superside reads diagonal with no rotation at all: straight tracks, staggered
   starts, edges faded on the unrotated parent. A third of the pixels. */
.v-norot .tilt{transform:none;inset:-6% -2%}
.v-norot .r2{animation-delay:-26s}.v-norot .r3{animation-delay:-52s}.v-norot .r4{animation-delay:-13s}
.v-norot .wall{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);
               mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%)}

/* measured across 19 sites doing this pattern: no filter on the tiles, the
   contrast comes from one scrim layer */
.scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(11,13,16,.46) 0%,rgba(11,13,16,.60) 42%,rgba(11,13,16,.92) 100%)}
.v-light .scrim{background:linear-gradient(to bottom,rgba(255,255,255,.72) 0%,rgba(255,255,255,.80) 42%,rgba(255,255,255,.95) 100%)}

.top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;
     gap:30px;padding:46px var(--pad) 22px;flex:none;color:var(--ink)}
.mark{width:clamp(112px,9vw,150px);height:auto;display:block;flex:none}
.rec{animation:rec 2.6s steps(1,end) infinite}
@keyframes rec{0%,58%{opacity:1}59%,100%{opacity:.18}}
.top ul{display:flex;gap:clamp(14px,2vw,28px);font-size:14px;color:var(--nav)}

.say{position:relative;z-index:3;flex:1;display:flex;align-items:center;justify-content:center;
     padding:0 var(--pad) clamp(30px,6vh,70px)}
.v-anchor .say{align-items:flex-end;justify-content:flex-start}
.eqwrap{position:relative}
.eq{font-family:AssistantDisplay,"Assistant",Heebo,sans-serif;display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:0 .3em;
    font-size:clamp(42px,8.4vw,152px);font-weight:500;line-height:1;letter-spacing:normal;color:var(--ink)}
.v-anchor .eq{justify-content:flex-start;font-size:clamp(38px,6.6vw,118px)}
/* Hebrew display: weight 300-700 and letter-spacing normal. Negative tracking
   closes the word space and welds two words into one. */
.v-serif .eq{font-family:'Frank Ruhl Libre',serif;font-weight:300}
.eq .w,.eq .op{display:inline-block;opacity:0;transform:translateY(12px)}
.eq .w.in,.eq .op.in{opacity:1;transform:none;
  transition:opacity var(--d-ui) var(--ease),transform var(--d-enter) var(--ease)}
.eq .hl{position:relative;display:inline-block;padding:0 .1em;isolation:isolate}
.eq .hl::before{content:"";position:absolute;inset:.04em 0 .08em;background:var(--red);z-index:-1;
                transform:scaleX(0);transform-origin:right;transition:transform .46s var(--ease)}
.eq .hl.on::before{transform:scaleX(1)}
/* the colour must never outrun the plate: a half-covered Hebrew word reads as
   a different real word */
.eq .hl>span{transition:color .1s linear .48s}
.eq .hl.on>span{color:#fff}
.eq b{font-weight:inherit}
/* real bloom is the type drawn twice: stacked drop-shadows give a grey box */
.eq--glow{position:absolute;inset:0;filter:blur(30px) brightness(1.7) saturate(1.25);
          opacity:0;pointer-events:none;transition:opacity .7s var(--ease) .1s}
.eq--lit .eq--glow{opacity:.8}
.eq--glow .w,.eq--glow .op{opacity:1;transform:none}
.eq--glow .hl::before{transform:scaleX(1)}.eq--glow .hl>span{color:#fff}
.v-noglow .eq--glow{display:none}
.v-light .eq--glow{filter:blur(30px) brightness(.4) saturate(1.2);opacity:0}
.v-light.eq--lit .eq--glow{opacity:.5}

@media (prefers-reduced-motion:reduce){
  .r1,.r2,.r3,.r4,.rec{animation:none}.mark i{opacity:1}
  .eq .hl::before{transition:none}.eq .w,.eq .op{opacity:1;transform:none}}
@media (max-width:900px){.row i{width:clamp(110px,26vw,150px)}.top ul{display:none}}

/* ── the video wall: one element per tile, each wrapping off screen ───────── */
/* no width cap: the crossing is counted in tiles, so the tile has to grow with
   the screen or a fixed row stops covering it (the cap left holes past 1780px) */
.vrow{position:relative;flex:none;height:calc(max(140px,11.5vw) * 16 / 9)}
.vt{position:absolute;top:0;left:0;width:max(140px,11.5vw);aspect-ratio:9/16;
    background:#1C1F24 center/cover no-repeat;overflow:hidden;will-change:transform;
    /* the 13 tiles sit one pitch apart in time and a crossing is 13 pitches, so
       the row is always solid. Tilted -11deg, the screen spans local x from
       ~0 to 1.07W + 0.1H, i.e. under 10 pitches up to 4:3; starting 2 pitches
       early and ending at 11 keeps both jumps off screen, phones included */
    animation:tick var(--d) linear infinite;animation-delay:calc(var(--i) * var(--step))}
.vt video{display:block;width:100%;height:100%;object-fit:cover}
@keyframes tick{from{transform:translateX(calc(-2 * (100% + 10px)))}
                to{transform:translateX(calc(11 * (100% + 10px)))}}
.vr2 .vt,.vr4 .vt{animation-direction:reverse}
@media (max-width:900px){.vrow{height:calc(clamp(110px,26vw,150px) * 16 / 9)}
  .vt{width:clamp(110px,26vw,150px)}}


/* ── liquid glass ───────────────────────────────────────────────────────── */
.gw{position:relative;display:inline-block;line-height:1;white-space:nowrap}
/* the rim: real text, hollow. -webkit-text-fill-color is what Safari honours */
.gt{display:inline-block;color:transparent;-webkit-text-fill-color:transparent;
    -webkit-text-stroke:1.3px rgba(255,255,255,.82)}
/* touch: iOS backdrop-filter does not see a playing <video>, so over the wall video
   the body came out empty and only the rim showed (owner 27.10, iPhone). The letters
   carry their own fill there; where the glass does render it just reads brighter */
@media (hover:none){.gt{-webkit-text-fill-color:rgba(255,255,255,.55)}}
/* the body: the backdrop, lensed, only inside the letters */
.gl{position:absolute;inset:0;pointer-events:none;opacity:0;
    background:linear-gradient(to bottom,rgba(255,255,255,.50) 0%,rgba(255,255,255,.23) 34%,
               rgba(255,255,255,.16) 62%,rgba(255,255,255,.30) 100%);
    -webkit-backdrop-filter:blur(var(--gb,9px)) saturate(1.8) brightness(1.45);
            backdrop-filter:blur(var(--gb,9px)) saturate(1.8) brightness(1.45);
    -webkit-mask-size:100% 100%;mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    transition:opacity .6s var(--ease)}
.g-clear .gl{--gb:0px;background:linear-gradient(to bottom,rgba(255,255,255,.26) 0%,rgba(255,255,255,.03) 40%,rgba(255,255,255,.02) 70%,rgba(255,255,255,.12) 100%)}
/* the word's own entrance fades an ANCESTOR, and an ancestor below opacity 1
   is a backdrop root: the glass would see nothing and then snap on. So the
   body waits for the word to land, then fills with light - and only once its
   mask exists (.gm), or it would show as a frosted rectangle. The mask does not
   wait for document.fonts.ready: Safari resolves that after onload, and forty
   starting videos hold onload back. fonts.load() waits for this one face only. */
.glass-on .gm .gl{opacity:1}
/* the sheen: same glyphs, a light band crossing them */
.gs{position:absolute;inset:0;pointer-events:none;color:transparent;-webkit-text-fill-color:transparent;
    background:linear-gradient(100deg,transparent 34%,rgba(255,255,255,.78) 47%,rgba(255,255,255,.16) 55%,transparent 68%);
    background-size:260% 100%;background-position:120% 0;
    -webkit-background-clip:text;background-clip:text;opacity:0;transition:opacity .6s var(--ease)}
.glass-on .gm .gs{opacity:1;animation:sheen 7s linear .4s infinite}
@keyframes sheen{0%{background-position:120% 0}42%,100%{background-position:-70% 0}}
/* tails of ק and ן hang below the 1em line box; the layer grows to hold them */
.gs{top:-.3em;bottom:-.3em;padding-top:.3em}.gs::before{content:attr(data-t)}
.gdot{color:var(--red)}
/* phones and tablets: the mark moves to the top left (the links are hidden there).
   Phones: Safari's floating bar covers the bottom ~84px, so the hero's middle sits
   low on the glass; lift the equation to halfway between the mark and the bar. */
@media (max-width:900px){.top{justify-content:flex-end}}
@media (max-width:600px){.say{padding-bottom:106px}}
@media (prefers-reduced-motion:reduce){.gs,.glass-on .gm .gs{animation:none}.gl{transition:none}}
.wallv{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0B0D10 center/cover no-repeat;z-index:1}
.wallv.on+.tilt{display:none}   /* once the video plays, the 65 still tiles and their CSS motion cost nothing */

.top a{text-decoration:none;color:inherit;transition:color var(--d-ui) var(--ease)}
.top a:hover,.top a:focus-visible{color:#fff}

/* ── kit ── */
/* C kit - the few shared pieces every section of option C composes, so several
   builders produce one design. Tokens come from tokens.css; see POLISH.md. */
.ck-title{font-size:clamp(34px,4.6vw,72px);font-weight:700;line-height:1.04;letter-spacing:normal;margin:0;text-wrap:balance}
.ck-title--xl{font-size:clamp(40px,6.4vw,104px);line-height:1}
.ck-lead{font-size:clamp(17px,1.2vw,19px);line-height:1.6;max-width:52ch;color:#5C6167;margin:0}
.ck-meta{font-size:13px;line-height:1.5;color:#5C6167;font-variant-numeric:tabular-nums;letter-spacing:normal}
.s-night .ck-lead,.s-night .ck-meta{color:#A8AEB6}
/* the one primary action: REC red, square, with the camera's recording light */
.ck-rec{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 28px;background:var(--red);color:#fff;
  font:700 19px/1 var(--he);text-decoration:none;border:0;border-radius:0;cursor:pointer;
  transition:background-color var(--d-ui) var(--ease),transform .2s var(--ease)}
.ck-rec::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:#fff;animation:ck-rec 2.4s steps(1,end) infinite}
.ck-rec:hover{background:#E8261B}
.ck-rec:active{transform:translateY(1px)}
@keyframes ck-rec{0%,58%{opacity:1}59%,100%{opacity:.28}}
/* secondary: plain text, the underline grows from the reading edge (right) */
.ck-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:inherit;text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 100% 86%/0% 1.5px no-repeat;
  transition:background-size var(--d-ui) var(--ease)}
.ck-link:hover,.ck-link:focus-visible{background-size:100% 1.5px}
@media (prefers-reduced-motion:reduce){.ck-rec::before{animation:none}.ck-link,.ck-rec{transition:none}}
/* keyboard users skip the hero (WCAG 2.4.1) */
.ck-skip{position:absolute;inset-inline-start:16px;top:-80px;z-index:10;padding:12px 18px;background:#fff;color:var(--ink);font-weight:700;text-decoration:none}
.ck-skip:focus{top:16px}

/* ── clients ── */
/* Option C - clients: a tight trust strip right under the dark hero (dark to
   white step the owner likes). Title anchored to the RTL start (not centred -
   DESIGN.md #1 AI tell). Two full-bleed marquee rows drifting opposite ways,
   calm speed, monochrome at rest / colour on hover (desktop only). Seamless
   loop: no flex `gap` (2N items would give 2N-1 gaps, short by half a gap at
   translateX(-50%)) - spacing lives on each item's own margin instead, so a
   set of N items always tiles to exactly half the doubled track. Screen
   readers get one real list of the 29 names; the whole visual strip (both
   sets, both rows) is decorative and aria-hidden. Kept tight per POLISH #1:
   not `.sec`, its own small padding-block. */

.c-clients{ padding-block:clamp(40px,6vw,64px); }
.c-clients__head{ margin-bottom:clamp(22px,3.6vw,34px); }
.c-clients__title{ max-width:18ch; }

/* the one real list for assistive tech - visually hidden, not display:none */
.c-clients__names{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.c-clients__rows{ display:flex; flex-direction:column; gap:clamp(16px,2.6vw,28px); }

.c-clients__marquee{ position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%); }
/* LTR on purpose: in RTL a max-content track overflows to the LEFT, so translateX(0 -> -50%)
   opened a growing gap on the right and the reversed row sat off-screen (found 22.9) */
.c-clients__marquee{ direction:ltr; }
.c-clients__track{ display:flex; width:max-content; will-change:transform; }
.c-clients__marquee--a .c-clients__track{ animation:c-marquee 52s linear infinite; }
.c-clients__marquee--b .c-clients__track{ animation:c-marquee 46s linear infinite reverse; }
.c-clients__set{ display:flex; flex:none; }

/* spacing on the item itself (not the flex container) keeps the loop exact */
.c-clients__logo{
  display:grid; place-items:center; flex:none;
  width:clamp(92px,10.5vw,140px); height:56px; margin-inline-end:clamp(14px,2vw,28px);
}
.c-clients__logo img{
  block-size:clamp(20px,2.4vw,34px); inline-size:auto; max-inline-size:112px; object-fit:contain;
  transform:scale(var(--k,1)); filter:grayscale(1) contrast(var(--c,1.06)) brightness(var(--b,1));
  transition:filter .35s var(--ease);
}

@keyframes c-marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

@media (hover:hover) and (pointer:fine){
  .c-clients__marquee:hover .c-clients__track{ animation-play-state:paused; }
  .c-clients__logo:hover img{ filter:grayscale(0) contrast(1) brightness(1); }
}
/* JS pauses rows out of view / tab hidden by toggling this class */
.c-clients__rows.is-paused .c-clients__track{ animation-play-state:paused; }

@media (prefers-reduced-motion:reduce){ .c-clients__logo img{ transition:none; } }
@media (max-width:859px){ .c-clients{ padding-block:clamp(40px,6vw,64px) 24px; } }
/* phones: logos a size up (owner 23.9) */
@media (max-width:859px){ .c-clients__logo{ width:112px; height:64px; } .c-clients__logo img{ block-size:26px; max-inline-size:124px; } }
/* phones (22.9, stutter on iPhone): one filter on the whole track, not one per logo */
/* phones: full colour (the owner, 22.9) and no filters at all - nothing repaints per frame */
@media (max-width:859px), (hover:none){
  .c-clients__track{ filter:none; }
  .c-clients__logo img{ filter:none; }
}

/* ── services ── */
/* Option C - services: asymmetric split (not a 50/50 box - POLISH #4), the
   argument text anchored to the RTL start, a precise CSS-drawn iPhone 16 Pro
   as the contained object (POLISH #5: real 402x874 screen ratio, titanium
   rim, black bezel, correct Dynamic Island + corner radii, no image). Mobile:
   phone first, then the list (rule). All sizing keys off --phone-h through
   --u ("1 device point" in px) so the mockup stays in proportion at any size. */

.c-services{ padding-block:clamp(56px,7vw,104px); }
.c-services__grid{ display:grid; grid-template-columns:1fr; gap:clamp(40px,7vw,64px); align-items:center; }

/* ---------- the phone (object) ---------- */
.c-services__phone-col{ display:flex; flex-direction:column; align-items:center; gap:16px; }

.c-phone-stage{
  --phone-h:clamp(230px,60vw,300px);
  --u:calc(var(--phone-h) / 874);           /* 1 iPhone "point" in px, scales the whole mockup */
  width:var(--phone-h); height:var(--phone-h); position:relative;
}
.c-phone{
  position:absolute; inset:0; margin:auto;
  width:calc(var(--u) * 402); height:var(--phone-h);
  transform-origin:center; transition:transform .7s var(--ease);
}
.c-phone.is-landscape{ transform:rotate(90deg); }

.c-phone__body{
  position:relative; width:100%; height:100%; padding:calc(var(--u) * 9);
  border-radius:calc(var(--u) * 62);
  background:linear-gradient(160deg,#8c8a85 0%,#e8e5df 20%,#b7b4ab 40%,#f2f0ea 55%,#77756f 76%,#c9c6be 100%);
  box-shadow:
    inset 0 0 0 calc(var(--u) * 1px) rgba(255,255,255,.5),
    0 calc(var(--u) * 34) calc(var(--u) * 46) calc(var(--u) * -20) rgba(18,20,23,.4),
    0 calc(var(--u) * 10) calc(var(--u) * 18) calc(var(--u) * -10) rgba(18,20,23,.28);
}
.c-phone__bezel{ width:100%; height:100%; padding:calc(var(--u) * 3); border-radius:calc(var(--u) * 58); background:#060607; }
.c-phone__screen{
  position:relative; width:100%; height:100%; overflow:hidden;
  border-radius:calc(var(--u) * 55); background:#15171a center/cover no-repeat;
}
.c-phone__island{
  position:absolute; z-index:3; top:calc(var(--u) * 11); left:50%; transform:translateX(-50%);
  width:calc(var(--u) * 126); height:calc(var(--u) * 37.33); background:#000; border-radius:calc(var(--u) * 19);
}
.c-phone__btn{ position:absolute; border-radius:calc(var(--u) * 1.4); background:linear-gradient(90deg,#706e69,#c3c0b8); }
.c-phone__btn--action{ inset-inline-start:calc(var(--u) * -3); top:calc(var(--u) * 116); width:calc(var(--u) * 3); height:calc(var(--u) * 18); }
.c-phone__btn--vol1{ inset-inline-start:calc(var(--u) * -3); top:calc(var(--u) * 162); width:calc(var(--u) * 3); height:calc(var(--u) * 38); }
.c-phone__btn--vol2{ inset-inline-start:calc(var(--u) * -3); top:calc(var(--u) * 212); width:calc(var(--u) * 3); height:calc(var(--u) * 38); }
.c-phone__btn--power{ inset-inline-end:calc(var(--u) * -3); top:calc(var(--u) * 140); width:calc(var(--u) * 3); height:calc(var(--u) * 52); }
.c-phone__btn--camera{ inset-inline-end:calc(var(--u) * -3); top:calc(var(--u) * 206); width:calc(var(--u) * 3); height:calc(var(--u) * 22); }

/* feed-style screen transition: the incoming clip slides up over the current one */
.c-phone__reel{ position:absolute; inset:0; }
.c-phone__slide{
  position:absolute; inset:0; background-position:center; background-size:cover; background-repeat:no-repeat;
  transform:translateY(0); transition:transform .55s var(--ease);
}
.c-phone__slide.is-entering{ transform:translateY(100%); }
.c-phone__slide.is-leaving{ transform:translateY(-100%); }
.c-phone__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s var(--ease); }
.c-phone__video.is-on{ opacity:1; }

.c-services__meta{ text-align:center; }

/* ---------- the argument (text) ---------- */
.c-services__lead{ margin-top:clamp(14px,2vw,20px); }
.c-services__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:clamp(24px,3.6vw,32px); }

.c-services__list{ margin-top:clamp(32px,4.6vw,48px); border-block-start:1px solid var(--line); }
.c-services__row{
  position:relative; display:block; width:100%; text-align:start; min-height:44px;
  background:none; border:0; border-block-end:1px solid var(--line);
  padding-block:18px; cursor:pointer; color:var(--ink); font:inherit;
}
.c-services__txt{ display:flex; flex-direction:column; gap:6px; }
.c-services__name{ font-weight:700; font-size:var(--t-h3); color:var(--graphite); transition:color .3s var(--ease); }
.c-services__desc{ color:var(--graphite); font-size:15px; max-width:48ch; }
.c-services__row[aria-selected="true"] .c-services__name{ color:var(--ink); }

.c-services__bar{ position:absolute; inset-inline-start:0; bottom:-1px; height:2px; width:0%; background:var(--red); }
.c-services__row.is-autoplaying .c-services__bar{ animation:cSvcBar 7s linear; }
.c-services__list.is-paused .c-services__bar{ animation-play-state:paused; }
@keyframes cSvcBar{ from{ width:0% } to{ width:100% } }

@media (hover:hover) and (pointer:fine){
  .c-services__row:not([aria-selected="true"]):hover .c-services__name{ color:var(--ink); }
}

@media (min-width:860px){
  .c-services__grid{ grid-template-columns:1.4fr 1fr; grid-template-areas:"argue phone"; gap:var(--pad); }
  .c-services__argue{ grid-area:argue; }
  .c-services__phone-col{ grid-area:phone; }
  .c-phone-stage{ --phone-h:clamp(300px,30vw,400px); }
}

@media (prefers-reduced-motion:reduce){
  .c-phone,.c-phone__slide,.c-phone__video{ transition:none; }
  .c-services__bar{ display:none; }
  .c-services__name{ transition:none; }
}

/* phone width (22.9, site expert's note): the mockup was small with a lot of air above it.
   Bigger phone, the stage as wide as the column, and the section starts right under the logos. */
@media (max-width:859px){
  .c-services{ padding-block:20px clamp(56px,7vw,104px); }
  .c-services__grid{ gap:36px; }
  .c-phone-stage{ --phone-h:min(104vw,500px); width:100%; }
  .c-phone.is-landscape{ transform:rotate(90deg) scale(.84); }
}

/* sound (owner 24.9): the reel carries sound, muted until this is tapped - the icon every
   Instagram/TikTok user knows. Lives beside the drawing (not inside it) so it never rotates;
   it moves to the turned phone's corner for the landscape part. */
.c-phone__mute{ --mb:40px; position:absolute; z-index:4; width:var(--mb); height:var(--mb); padding:0; border-radius:50%; cursor:pointer;
  right:calc(50% - var(--u) * 201 + var(--u) * 26); bottom:calc(var(--u) * 34);
  display:grid; place-items:center; color:#fff; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.45);
  transition:right .7s var(--ease), bottom .7s var(--ease), background-color var(--d-ui) var(--ease); }
/* turned: the top-left corner of the screen - clear of the captions (bottom centre) and the island (right) */
.c-phone.is-landscape ~ .c-phone__mute{ right:calc(50% + var(--u) * 437 - var(--u) * 120 - 6px - var(--mb)); bottom:calc(50% + var(--u) * 201 - var(--u) * 50 - 4px - var(--mb)); }
@media (max-width:859px){ .c-phone__mute{ --mb:34px; } .c-phone__mute::before{ content:""; position:absolute; inset:-6px; } }   /* 46px hit area */
.c-phone__mute[aria-pressed="true"]{ background:#fff; color:var(--ink); border-color:#fff; }
.c-phone__mute[aria-pressed="true"] .c-phone__mute-off, .c-phone__mute:not([aria-pressed="true"]) .c-phone__mute-on{ display:none; }
.c-phone__mute:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ .c-phone__mute{ transition:none; } }

/* ── cases-stack ── */
/* Option C - cases-stack ("חפיסה"): the four selected-work cases as a deck.
   Each project is a full-viewport sticky card; the next one slides up over
   it as you scroll and the covered card recedes (scale + dim, driven by
   cases-stack.js reading scroll position - transform/opacity only). The
   whole card is a link to its project page (built separately). Mobile: the
   loop fills the card, text sits over a bottom scrim. Desktop: the loop
   sits tall (9:16) beside the text; sides/anchoring vary per card on
   purpose so the deck doesn't read as a repeated template. */

.c-cases--stack .c-cases__intro{ padding-block:clamp(64px,9vw,120px) clamp(36px,5vw,64px); }
.c-cases--stack .c-cases__intro .ck-lead{ margin-top:14px; }

.c-cases--stack .c-cases__deck{ position:relative; overflow-anchor:none; }

.c-cases--stack .c-cases__card{
  position:sticky; top:0; height:100vh; height:100dvh;
  background:var(--night);
}
.c-cases--stack .c-cases__card::after{
  content:""; position:absolute; inset:0; background:#000; opacity:var(--cover,0); pointer-events:none; will-change:opacity;
}

.c-cases--stack .c-cases__card:nth-child(1){ z-index:1; }
.c-cases--stack .c-cases__card:nth-child(2){ z-index:2; }
.c-cases--stack .c-cases__card:nth-child(3){ z-index:3; }
.c-cases--stack .c-cases__card:nth-child(4){ z-index:4; }

/* the whole card is the link - transform lives here (recede/scale) */
.c-cases--stack .c-cases__link{
  display:block; position:relative; width:100%; height:100%;
  color:#fff; text-decoration:none;
  /* no scroll-driven scale: re-rasterising a 100vh video card per scroll step was the Safari jank (22.9);
     the covered card only dims (opacity on ::after, composited) */
}

/* ---- mobile (default): loop fills the card, text over a bottom scrim ---- */
.c-cases--stack .c-cases__media{ position:absolute; inset:0; }
.c-cases--stack .c-cases__player{
  position:relative; width:100%; height:100%; overflow:hidden;
  background:#1a1d21 center/cover no-repeat;
}
.c-cases--stack .c-cases__player video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
  transition:opacity .6s var(--ease);
}
.c-cases--stack .c-cases__player video.is-on{ opacity:1; }

.c-cases--stack .c-cases__body{
  position:absolute; inset-inline:0; bottom:0; z-index:1;
  padding:28px var(--pad) 40px;
  background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.6) 48%, rgba(0,0,0,0) 100%);
}
.c-cases--stack .c-cases__client{ margin-bottom:8px; }
.c-cases--stack .c-cases__title{ margin-bottom:12px; }
.c-cases--stack .c-cases__meta{ margin-bottom:16px; }
/* the card's call to action: a visible button under the question (owner 22.9: the text link
   sat too low, people did not know to tap) */
.c-cases--stack .c-cases__btn{ display:inline-flex; align-items:center; gap:10px; margin:18px 0 14px; min-height:48px; padding:0 22px;
  border:1.5px solid rgba(255,255,255,.55); border-radius:0; color:#fff; font:700 17px/1 var(--he); background:rgba(255,255,255,.06);
  transition:background-color var(--d-ui) var(--ease), border-color var(--d-ui) var(--ease); }
.c-cases--stack .c-cases__link:hover .c-cases__btn, .c-cases--stack .c-cases__link:focus-visible .c-cases__btn{ background:#fff; color:var(--ink); border-color:#fff; }

/* ---- desktop: loop tall (9:16) beside the text ---- */
@media (min-width:860px){
  .c-cases--stack .c-cases__link{
    display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px);
    padding-inline:var(--pad); align-items:center;
  }
  .c-cases--stack .c-cases__media{ position:static; grid-area:media; justify-self:center; }
  .c-cases--stack .c-cases__player{
    width:auto; height:min(80vh,720px); aspect-ratio:9/16; border-radius:4px;
  }
  .c-cases--stack .c-cases__body{
    position:static; z-index:auto; grid-area:body; padding:0; background:none; max-width:52ch;
  }
  .c-cases--stack .c-cases__client{ margin-bottom:10px; }
  .c-cases--stack .c-cases__title{ margin-bottom:16px; }
  .c-cases--stack .c-cases__meta{ margin-bottom:22px; }

  /* every card centred on its screen (owner 22.9: "לא ממורכז"); only the side alternates */
  .c-cases--stack .c-cases__link{ height:100%; align-content:center; }
  .c-cases--stack .c-cases__card:nth-child(odd) .c-cases__link{ grid-template-areas:"media body"; }
  .c-cases--stack .c-cases__card:nth-child(even) .c-cases__link{ grid-template-areas:"body media"; }
}



@media (prefers-reduced-motion:reduce){ .c-cases--stack .c-cases__player video{ transition:none; } }

/* phones: no scroll-driven transforms (see cases-stack.js), and the intro is compact so the
   first card pins the moment the section is reached */
@media (max-width:859px){
  .c-cases--stack .c-cases__intro{ padding-block:40px 20px; }
  /* the loops carry burned-in captions around 60% of their height, which sat right behind the card's
     title (QA 24.9). The video takes the top of the card and fades into the night; the text sits below it */
  .c-cases--stack .c-cases__media{ inset:0 0 auto 0; height:76%; }
  .c-cases--stack .c-cases__media::after{ content:""; position:absolute; inset:auto 0 0 0; height:34%; pointer-events:none;
    background:linear-gradient(to top, var(--night) 0%, rgba(11,13,16,.75) 45%, rgba(11,13,16,0) 100%); }
  .c-cases--stack .c-cases__body{ background:linear-gradient(to top, var(--night) 0%, var(--night) 70%, rgba(11,13,16,0) 100%); padding-top:36px; }
}


/* TikTok-style paging (owner 22.9): while the deck is on screen the document snaps
   MANDATORY to cards - one gesture, one card, decisive stop. The class is set by
   cases-stack.js only while the deck intersects, so the rest of the page scrolls freely;
   the intro and the next section are snap stops too, so you can always leave. */
/* scroll-padding 0: the page's 24px anchor padding made every card stop 24px low, the previous card
   peeking above and the hidden card counted as active (23.9) */
html.deck-snap{ scroll-snap-type:y mandatory; scroll-padding-block-start:0; scroll-behavior:auto; }
/* the stops are plain absolute markers, one per card: sticky elements as snap targets get wrong
   snap offsets (Chrome landed mid-card, a swipe up from the last card bounced back, 23.9).
   Touch screens don't use CSS snap at all - cases-stack.js pages the deck by finger there. */
.c-cases--stack .c-cases__stop{ position:absolute; inset-inline:0; height:1px; top:calc(var(--k) * 100vh); top:calc(var(--k) * 100dvh);
  scroll-snap-align:start; scroll-snap-stop:always; pointer-events:none; }
.c-cases--stack + section{ scroll-snap-align:start; }

/* the sound toggle (owner 23.9): the loops carry their own sound, muted until this is tapped.
   Lives on the player (so on desktop it sits on the video); its tap is kept off the card link */
.c-cases--stack .c-cases__mute{ position:absolute; top:max(18px,env(safe-area-inset-top)); left:18px; z-index:6;
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.4); color:#fff; cursor:pointer;
  background:rgba(0,0,0,.5); display:grid; place-items:center; padding:0; }
.c-cases--stack .c-cases__mute[aria-pressed="true"]{ background:#fff; color:var(--ink); border-color:#fff; }
.c-cases--stack .c-cases__mute[aria-pressed="true"] .c-cases__mute-off, .c-cases--stack .c-cases__mute:not([aria-pressed="true"]) .c-cases__mute-on{ display:none; }

/* ── archive ── */
/* Option C - archive: the 24-item portfolio as a full-bleed, scroll-snapped
   rail (never a wall/grid - research says a grid is what reads generic/AI).
   Title, lead and filters stay in the gutter; the rail bleeds edge to edge -
   POLISH rule 1's width variation against the narrower sections around it. */

.c-archive{ padding-block:clamp(80px,11vw,160px); overflow:hidden; }
.c-archive__head{ max-width:720px; }
.c-archive__head .ck-lead{ margin-top:14px; }

/* ---- filters: four words, none active = everything shown, active underlines ---- */
.c-archive__filters{ display:flex; flex-wrap:wrap; gap:clamp(20px,3.4vw,36px); margin-top:clamp(32px,5vw,48px); }
.c-archive__filters button{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:0;
  font:700 var(--t-small)/1 var(--he); color:#A8AEB6; background:none; border:0; cursor:pointer;
  background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat;
  background-position:0 100%; background-size:0% 2px;
  transition:background-size var(--d-ui) var(--ease), color var(--d-ui) var(--ease);
}
.c-archive__filters button:hover{ color:#fff; }
.c-archive__filters button[aria-pressed="true"]{ color:#fff; background-size:100% 2px; }

/* ---- rail: breaks out of .wrap to the viewport edge; scroll-padding keeps
   the first/last tile lined up with the title above at rest scroll ---- */
.c-archive__rail-outer{
  position:relative; width:100vw; left:50%; translate:-50% 0; margin-top:clamp(28px,4.4vw,44px);
}
.c-archive__rail{
  list-style:none; display:flex; align-items:flex-start; gap:clamp(12px,1.6vw,18px);
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding-inline:var(--pad); scroll-padding-inline:var(--pad); padding-block:2px 10px;
}
.c-archive__rail::-webkit-scrollbar{ display:none; }

.c-archive__rail{ --tw:clamp(148px,28vw,204px); }
.c-archive__tile{ flex:0 0 var(--tw); scroll-snap-align:start; }
/* long content: as tall as the vertical tiles (owner 24.9) - 16:9 at the 9:16 tile's height,
   capped to the screen on phones */
.c-archive__tile--wide{ flex-basis:min(calc(var(--tw) * 256 / 81), calc(100vw - 2 * var(--pad))); }
.c-archive__tile[hidden]{ display:none; }
.c-archive__tile button{
  display:block; width:100%; font:inherit; text-align:start; background:none; border:0; padding:0; color:inherit;
  cursor:pointer; -webkit-tap-highlight-color:transparent; border-radius:5px;
}
.c-archive__tile button:focus-visible{ outline:2px solid var(--red); outline-offset:4px; }
.c-archive__media{
  position:relative; display:block; width:100%; aspect-ratio:9/16; overflow:hidden;
  border-radius:5px; background:#1a1d21 center/cover no-repeat;
}
.c-archive__tile--wide .c-archive__media{ aspect-ratio:16/9; }
.c-archive__media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s var(--ease); }
.c-archive__media video.is-on{ opacity:1; }
.c-archive__cap{ display:block; padding-top:10px; }
.c-archive__cap strong{ display:block; font-size:var(--t-small); font-weight:700; }
.c-archive__cap span{ display:block; font-size:13px; color:#A8AEB6; margin-top:3px; line-height:1.4; }

.c-archive__arrow{
  position:absolute; top:36%; translate:0 -50%; z-index:2; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.1);
  border:1px solid var(--line); color:#fff; cursor:pointer; transition:background-color .18s;
}
.c-archive__arrow:hover{ background:rgba(255,255,255,.2); }
.c-archive__arrow--prev{ inset-inline-start:calc(var(--pad) - 8px); }
.c-archive__arrow--next{ inset-inline-end:calc(var(--pad) - 8px); }
@media (max-width:860px){ .c-archive__arrow{ display:none; } }

/* ---- lightbox: full master, native controls, sound ---- */
.c-archive-lightbox{ position:fixed; inset:0; z-index:10001; display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,48px); }
.c-archive-lightbox[hidden]{ display:none; }
.c-archive-lightbox__backdrop{ position:absolute; inset:0; background:rgba(5,6,8,.94); }
.c-archive-lightbox__panel{ position:relative; max-width:92vw; max-height:90vh; display:flex; flex-direction:column; align-items:center; }
.c-archive-lightbox__title{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.c-archive-lightbox__video{ position:relative; max-width:92vw; max-height:86vh; width:auto; height:auto; background:#000; }
.c-archive-lightbox__close{
  position:absolute; z-index:2; top:-56px; inset-inline-end:0; width:48px; height:48px;
  display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.14);
  border:0; border-radius:50%; color:#fff; cursor:pointer; transition:background-color .18s;
}
.c-archive-lightbox__close:hover{ background:rgba(255,255,255,.26); }
.c-archive-lightbox__close:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

@media (max-width:700px){
  .c-archive-lightbox{ padding:0; }
  .c-archive-lightbox__panel{ max-width:100vw; max-height:100dvh; width:100%; height:100%; justify-content:center; }
  .c-archive-lightbox__video{ max-width:100vw; max-height:100dvh; }
  .c-archive-lightbox__close{ top:max(14px,env(safe-area-inset-top)); inset-inline-end:14px; background:rgba(0,0,0,.6); border:1.5px solid rgba(255,255,255,.6); }
}

@media (prefers-reduced-motion:reduce){
  .c-archive__media video, .c-archive__filters button{ transition:none; }
}
/* while a film is open: no floating WhatsApp / accessibility buttons over it (owner 24.9) */
html.lb-open .c-fab{ visibility:hidden; opacity:0; }
html.lb-open #y-accessibility-shadow-host{ display:none; }

/* long content shows its thumbnail + a play mark until clicked (owner 24.9) - no loop */
.c-archive__tile--wide .c-archive__media::after{ content:""; position:absolute; left:50%; top:50%; width:64px; height:64px; translate:-50% -50%;
  border-radius:50%; background:rgba(0,0,0,.55); border:1.5px solid rgba(255,255,255,.7); transition:background-color var(--d-ui) var(--ease); }
.c-archive__tile--wide .c-archive__media::before{ content:""; position:absolute; z-index:1; left:50%; top:50%; width:22px; height:24px; translate:-38% -50%;
  background:#fff; clip-path:polygon(0 0, 100% 50%, 0 100%); }
.c-archive__tile--wide button:hover .c-archive__media::after, .c-archive__tile--wide button:focus-visible .c-archive__media::after{ background:var(--red); border-color:var(--red); }

/* desktop: the row sits centred when it fits, scrolls from the edge when it doesn't (owner 24.9) */
/* auto margins on the first/last VISIBLE tile (archive.js marks them): centred when the row fits,
   0 (so it scrolls from the edge) when it overflows */
@media (min-width:861px){ .c-archive__tile.is-first{ margin-inline-start:auto; } .c-archive__tile.is-last{ margin-inline-end:auto; } }
/* six tiles always fit a desktop row, so a 6-video category sits centred (QA 24.9: at 1440 it overflowed by 18px) */
@media (min-width:861px){ .c-archive__rail{ --tw:min(204px, calc((100vw - 2 * var(--pad) - 5 * clamp(12px,1.6vw,18px) - 20px) / 6)); } }

/* ── process ── */
/* Option C - process: one line through the month with five numbered stops -
   order is carried by position and the line itself. Compact rhythm (POLISH
   rule 1): less padding than the sections around it, no "what's included" /
   "what's not included" blocks (the owner removed both). */

.c-process{ padding-block:clamp(48px,7vw,96px) clamp(24px,3vw,40px); }  /* owner 15.10: gap to FAQ too big */
.c-process__head{ max-width:640px; }
.c-process__head .ck-lead{ margin-top:14px; }

.c-process__timeline{
  --gap:clamp(30px,6vw,42px);
  list-style:none; position:relative; margin-top:clamp(36px,6vw,60px); counter-reset:step;
  display:flex; flex-direction:column; gap:var(--gap);
}
.c-process__stop{ position:relative; padding-inline-start:48px; counter-increment:step; }
.c-process__stop b{ display:block; font-weight:700; font-size:var(--t-h3); }
.c-process__stop p{ margin-top:8px; color:#5C6167; max-width:52ch; } /* graphite on mist fails 4.5:1 (QA round 1) */

.c-process__dot{
  position:absolute; top:-3px; inset-inline-start:0; width:32px; height:32px; border-radius:50%;
  background:var(--ink); box-shadow:0 0 0 4px var(--mist); z-index:1;
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:15px; line-height:1;
}
/* numbered steps (owner 15.10: plain dots weren't understood) */
.c-process__dot::before{ content:counter(step); }
.c-process__stop:not(:last-child)::after{
  content:""; position:absolute; z-index:0; background:var(--line);
  inset-inline-start:15px; top:29px; width:2px; bottom:calc(var(--gap) * -1);
}

@media (min-width:860px){
  .c-process__timeline{ --gap:clamp(16px,2.6vw,28px); flex-direction:row; align-items:flex-start; }
  .c-process__stop{ flex:1 1 0%; padding-inline-start:0; padding-top:48px; }
  .c-process__stop p{ max-width:none; }
  .c-process__dot{ top:0; inset-inline-start:0; }
  /* one continuous line dot-to-dot (owner 15.10: the gap-only dashes read as stray dots) */
  .c-process__stop:not(:last-child)::after{
    inset-inline-start:0; inset-inline-end:calc(var(--gap) * -1); top:15px; bottom:auto;
    width:auto; height:2px; background:rgba(18,20,23,.22);
  }
}
@media (max-width:859px){ .c-process{ padding-block:clamp(48px,7vw,96px) 20px; } }

/* ── faq ── */
/* Option C - FAQ: quiet rhythm (POLISH rule 1) - plain accordion, no color,
   no icons beyond the +/x itself. Native details/summary: free keyboard
   support and a smooth grid-rows height tween, no JS needed.
   Question marks stay ink (never wrapped in .dot/red - QA round 1 found 7
   red question marks); secondary text is #5C6167, not --graphite, which
   fails 4.5:1 on mist. */

.c-faq{ padding-block:clamp(32px,4vw,56px) clamp(64px,9vw,128px); }
.c-faq__head{ margin-block-end:clamp(40px,6vw,64px); max-width:640px; }
.c-faq__head .ck-lead{ margin-top:14px; }

.c-faq__list details{ border-block-end:1px solid var(--line); }
.c-faq__list details:first-child{ border-block-start:1px solid var(--line); }

.c-faq__list summary{
  display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,4vw,32px);
  padding-block:clamp(22px,3.4vw,28px); min-height:44px; cursor:pointer; list-style:none;
}
.c-faq__list summary::-webkit-details-marker{ display:none; }
.c-faq__list summary:focus-visible{ outline:2px solid var(--red); outline-offset:4px; }

.c-faq__q{ font-weight:700; font-size:var(--t-h3); color:var(--ink); transition:opacity var(--d-ui) var(--ease); }
.c-faq__list summary:hover .c-faq__q{ opacity:.65; }

.c-faq__ic{ position:relative; flex:none; width:20px; height:20px; }
.c-faq__ic::before, .c-faq__ic::after{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:50%;
  width:100%; height:2px; background:var(--ink); transform:translateY(-50%);
  transition:transform var(--d-ui) var(--ease), opacity var(--d-ui) var(--ease);
}
.c-faq__ic::after{ transform:translateY(-50%) rotate(90deg); }
.c-faq__list details[open] .c-faq__ic::before{ transform:translateY(-50%) rotate(180deg); }
.c-faq__list details[open] .c-faq__ic::after{ opacity:0; }

.c-faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--d-ui) var(--ease); }
.c-faq__list details[open] .c-faq__a{ grid-template-rows:1fr; }
.c-faq__ain{ overflow:hidden; }
.c-faq__ain p{ padding-block-end:clamp(22px,3.6vw,28px); max-width:60ch; color:#5C6167; }

@media (prefers-reduced-motion:reduce){
  .c-faq__a, .c-faq__ic::before, .c-faq__ic::after, .c-faq__q{ transition:none; }
}
/* phones: the FAQ sits close under the process (owner 22.9: too much air) */
@media (max-width:859px){ .c-faq{ padding-block:28px clamp(64px,9vw,128px); } }

/* ── talk ── */
/* Option C - talk (CTA) + footer. The close: loudest rhythm on the page
   (POLISH rule 1) - the biggest padding, the xl title size, and the one
   filled accent button (.ck-rec, from kit.css - not restyled here). */

.c-talk{ padding-block:clamp(96px,13vw,192px); }
.c-talk__h{ max-width:13ch; }
.c-talk__lead{ margin-top:clamp(20px,3vw,28px); }

.c-talk__actions{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(24px,3.4vw,32px); margin-top:clamp(40px,6vw,56px); }
.c-talk__alts{ display:flex; flex-wrap:wrap; gap:8px 24px; }

/* footer ------------------------------------------------------------------ */
.c-foot{ padding-block:clamp(40px,6vw,64px) clamp(24px,3.6vw,32px); }
.c-foot__wrap{ display:flex; flex-direction:column; gap:clamp(24px,4vw,36px); }
.c-foot__top{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
  padding-block-end:clamp(22px,3.6vw,32px); border-block-end:1px solid var(--line);
}
.c-foot__mark{ width:clamp(120px,15vw,168px); height:auto; }
.c-foot__nav{ display:flex; flex-wrap:wrap; gap:clamp(16px,3vw,32px); }
.c-foot__nav a{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; color:#A8AEB6; text-decoration:none; transition:color var(--d-ui) var(--ease); }
.c-foot__nav a:hover, .c-foot__nav a:focus-visible{ color:#fff; }
.c-foot__meta{ display:flex; flex-direction:column; gap:6px; font-size:var(--t-small); color:#A8AEB6; }
.c-foot__note{ opacity:.85; }

@media (prefers-reduced-motion:reduce){
  .c-foot__nav a{ transition:none; }
}
.c-foot__a11y{ display:inline-flex; align-items:center; min-height:44px; color:#A8AEB6; text-decoration:underline; text-underline-offset:3px; }
.c-foot__a11y:hover, .c-foot__a11y:focus-visible{ color:#fff; }

/* floating WhatsApp (owner 23.9, instead of a phone menu): shows only between the big moments -
   hidden over the hero, over the pinned deck (its cards carry their own button) and over the
   contact section itself. Bottom-right; the accessibility button owns bottom-left. */
.c-fab{ position:fixed; right:16px; bottom:max(16px, env(safe-area-inset-bottom)); z-index:9990;
  display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 16px;
  background:var(--red); color:#fff; font:700 16px/1 var(--he); text-decoration:none;
  box-shadow:0 8px 26px -6px rgba(0,0,0,.5);
  opacity:0; transform:translateY(12px); visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s, background-color var(--d-ui) var(--ease); }
.c-fab.is-on{ opacity:1; transform:none; visibility:visible; pointer-events:auto; transition-delay:0s; }
.c-fab:hover{ background:#E8261B; }
.c-fab:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
@media (min-width:860px){ .c-fab{ right:24px; bottom:24px; min-height:52px; padding:0 20px; } }

/* ── loader ── */
/* ── loader (27.10, owner picked D4 "קו שנאסף לנקודה"): a red line runs along the headline
   while the wall loads, then pulls back into the full stop of אקספרשן. Painted with the first
   frame (no JS needed to show it); loader.js measures, grows and removes it. */
.xl{position:fixed;inset:0;z-index:2147483000;background:#0B0D10}
.xl.is-out{pointer-events:none}
html:has(.xl:not(.is-out)){overflow:hidden}
.xl__line{position:absolute;left:0;top:0;width:0;height:0;border-radius:999px;background:#FF3B2F;
          box-shadow:0 0 18px rgba(255,59,47,.45);opacity:0;transition:opacity .25s}
.xl__line.on{opacity:1}