/* גלעדי זקן בע"מ · v3
   שפה עיצובית אחת לאחד מ-RESHAPE (~/reshape-barbershop/web/src/main.css):
   לבן, דיו #101010, צהוב פוסטר #EAD200 למילוי בלבד, אפור חם, Heebo + Montserrat לתוויות.
   כפתורים מרובעים, כותרות ממורכזות עם קו שיער, צילומים שנמוגים לרקע (.img-soft). */
:root{
  --cream:#ffffff;
  --sand:#f5f3ef;
  --beige:#e2ded6;
  --nude:#d5d0ca;
  --clay:#ead200;
  --gold:#d4bd00;
  --slate:#3c404b;
  --espresso:#101010;
  --cocoa:#4f525b;
  --mute:#a09f9d;
  --ease:cubic-bezier(.22,1,.36,1);
  --px:24px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:clip;overscroll-behavior-x:none}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--espresso);font-family:'Heebo',system-ui,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--clay);color:var(--espresso)}
.latin{font-family:'Montserrat',sans-serif}
.serif{font-weight:500}
.max5{max-width:64rem;margin-inline:auto;padding-inline:var(--px)}
.max6{max-width:72rem;margin-inline:auto;padding-inline:var(--px)}
.btn-press{transition:transform .15s ease,background .3s,color .3s,border-color .3s}
.btn-press:active{transform:scale(.97)}
.hairline{height:1px;background:linear-gradient(to left,transparent,#3c404b66,transparent)}

/* ── רכיבי RESHAPE ── */
.img-soft{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 9%,#000 91%,transparent 100%),linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 9%,#000 91%,transparent 100%),linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.band-wash{background:linear-gradient(to bottom,var(--cream) 0%,#f5f4f1 15%,#f5f4f1 85%,var(--cream) 100%)}

.st{text-align:center;margin-bottom:48px}
.st .eb{font:400 11px 'Montserrat',sans-serif;letter-spacing:.45em;text-transform:uppercase;color:var(--slate);margin-bottom:16px}
.st h1,.st h2{font-weight:500;font-size:34px;line-height:1.2;margin:0;color:var(--espresso)}
.st p{margin:16px auto 0;max-width:28rem;font-size:14px;line-height:1.7;color:var(--mute)}
.st .hairline{width:64px;margin:28px auto 0}
@media (min-width:768px){.st h1,.st h2{font-size:46px}}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 16px;font-size:14px;letter-spacing:.15em;font-weight:400;text-align:center}
.btn-ink{background:var(--espresso);color:var(--cream)}
.btn-ink:hover{background:var(--clay);color:var(--espresso)}
.btn-line{border:1px solid rgba(16,16,16,.25);color:var(--espresso);background:transparent}
.btn-line:hover{border-color:var(--espresso)}
.btn-clay{border:1px solid var(--clay);color:var(--slate)}
.btn-clay:hover{background:var(--clay);color:var(--espresso)}

/* ── כותרת ── */
header.top{position:fixed;top:0;inset-inline:0;z-index:50;padding-top:env(safe-area-inset-top,0px);background:var(--cream);transition:box-shadow .5s}
header.top.scrolled{box-shadow:0 1px 0 rgba(11,13,18,.06)}
.hd{position:relative;max-width:72rem;margin-inline:auto;padding-inline:12px;height:64px;display:flex;align-items:center;justify-content:space-between}
.hd nav{display:none;gap:32px;font-size:14px}
.hd nav a{letter-spacing:.03em;color:var(--cocoa);transition:color .3s}
.hd nav a:hover,.hd nav a.on{color:var(--slate)}
.hd nav a.on{text-decoration:underline;text-decoration-color:var(--clay);text-decoration-thickness:2px;text-underline-offset:8px}
.hd .logo{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center}
.hd .logo img{height:40px;width:auto}
.hd .ends{display:flex;align-items:center;gap:8px}
.hd .ends a{font-size:11px;letter-spacing:.15em;padding:8px 14px;font-weight:500}
.hd .ends .o{display:none;border:1px solid rgba(16,16,16,.25)}
.hd .ends .o:hover{border-color:var(--espresso)}
.hd .ends .k{background:var(--espresso);color:var(--cream)}
.hd .ends .k:hover{background:var(--cocoa)}
.burger{width:36px;height:36px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:5px}
.burger span{display:block;height:1px;background:var(--espresso);width:24px}
.burger span+span{width:16px}
@media (min-width:768px){
  .hd{padding-inline:20px}
  .hd nav{display:flex}
  .burger{display:none}
  .hd .ends .o{display:inline-block}
  .hd .ends a{font-size:12px;padding:10px 20px}
}
.menu{position:fixed;inset:0;z-index:60;background:var(--cream);display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .4s}
.menu.open{opacity:1;pointer-events:auto}
.menu .mh{height:64px;padding-inline:20px;display:flex;align-items:center;justify-content:space-between}
.menu .mh button{font-size:24px}
.menu .mh img{height:40px;width:auto;max-width:60vw;object-fit:contain}
.menu .ml{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:28px}
.menu .ml a{font-weight:500;font-size:30px;color:rgba(16,16,16,.9)}
.menu .ml .btn{margin-top:16px;font-size:14px;padding:12px 40px;color:var(--cream)}

/* ── פתיח: "נעים להכיר" אחד לאחד ── */
.meet{padding:calc(64px + 72px + env(safe-area-inset-top,0px)) 0 96px;overflow:hidden}
.meet-g{display:grid;gap:48px;align-items:center}
.meet figure img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 30%}
.meet figcaption{margin-top:16px;display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-top:1px solid rgba(16,16,16,.15);padding-top:12px}
.meet figcaption span:first-child{font-weight:500;font-size:14px}
.meet figcaption span:last-child{font:400 10px 'Montserrat',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--slate)}
.meet .txt{color:var(--cocoa);line-height:2;font-size:15px;text-align:center}
.meet .txt p{margin:0 0 16px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px;max-width:28rem;margin-inline:auto}
.pair .btn{padding:14px 16px}
.cts{margin:24px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:34rem;font-size:13px}
.cts>div{display:flex;flex-direction:column;align-items:center;gap:6px}
.cts .l{font:400 10px 'Montserrat',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}
.cts a{display:inline-flex;align-items:center;gap:6px;color:var(--cocoa);transition:color .3s}
.cts a:hover{color:var(--slate)}
.cts svg{width:15px;height:15px}
@media (min-width:768px){
  .meet{padding-bottom:128px}
  .meet-g{grid-template-columns:1fr 1fr;gap:64px}
  .meet .txt{text-align:right}
  .pair,.cts{margin-inline:0}
  .cts>div{align-items:flex-start}
}

/* ── רצועה כהה "The Craft" אחד לאחד ── */
.craft{position:relative;background:var(--espresso);color:var(--cream);overflow:hidden}
.craft .ph{position:relative}
.craft .ph img{width:100%;height:58vh;object-fit:cover;object-position:35% center}
.craft .g1{position:absolute;inset:0;background:linear-gradient(to top,rgba(16,16,16,.85),rgba(16,16,16,.25),transparent)}
.craft .fade-t,.craft .fade-b{position:absolute;inset-inline:0;height:112px;pointer-events:none;z-index:2}
.craft .fade-t{top:0;background:linear-gradient(to bottom,var(--cream),rgba(255,255,255,.55),transparent)}
.craft .fade-b{bottom:0;background:linear-gradient(to top,var(--cream),rgba(255,255,255,.55),transparent)}
.craft .copy{position:absolute;inset:0;display:flex;align-items:flex-end;z-index:3}
.craft .copy>div{width:100%;padding:0 24px 96px;text-align:center}
.craft .eb{font:400 10px 'Montserrat',sans-serif;letter-spacing:.45em;text-transform:uppercase;color:var(--clay);margin-bottom:16px}
.craft h2{font-weight:500;font-size:30px;line-height:1.15;margin:0}
.craft p{margin:20px auto 0;color:rgba(255,255,255,.75);line-height:1.9;font-size:14px;max-width:24rem}
@media (min-width:768px){
  .craft .ph img{height:78vh}
  .craft .g1{background:linear-gradient(to left,rgba(16,16,16,.9) 0%,rgba(16,16,16,.72) 38%,rgba(16,16,16,.2) 70%,transparent)}
  .craft .fade-t,.craft .fade-b{height:160px}
  .craft .copy{align-items:center}
  .craft .copy>div{width:46%;padding:0;padding-inline-start:64px;text-align:right}
  .craft h2{font-size:44px}
  .craft p{margin-inline:0;font-size:15px}
}

/* ── קרוסלת תלת-ממד (כמו אצל שירה) ── */
.cf{position:relative;height:300px;display:flex;align-items:center;justify-content:center;user-select:none;touch-action:pan-y;perspective:1600px}
.cf .s{position:absolute;height:86%;width:min(72vw,440px);cursor:pointer;transform-style:preserve-3d;transition:transform .9s var(--ease),opacity .9s var(--ease),filter .9s var(--ease)}
.cf .s .in{height:100%;width:100%;overflow:hidden;border-radius:18px;background:var(--espresso);box-shadow:0 25px 50px -12px rgba(0,0,0,.25),0 0 0 1px rgba(16,16,16,.08)}
.cf .s img,.cf .s video{width:100%;height:100%;object-fit:cover;display:block}
.cf .s .tag{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.92);color:var(--espresso);font-size:11px;letter-spacing:.15em;padding:4px 10px;border-radius:999px}
.cf .s.hidden{visibility:hidden;opacity:0}
@media (min-width:768px){.cf{height:420px}}
.cf-nav{direction:ltr;display:flex;align-items:center;justify-content:center;gap:20px;margin-top:36px}
.cf-nav button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(16,16,16,.3);display:grid;place-items:center;font-size:18px;line-height:1;transition:background .3s,color .3s}
.cf-nav button:hover{background:var(--espresso);color:var(--cream)}
.cf-nav .dots{display:flex;gap:8px}
.cf-nav .dots i{height:6px;width:6px;border-radius:999px;background:rgba(16,16,16,.25);transition:all .4s;cursor:pointer}
.cf-nav .dots i.on{width:24px;background:var(--espresso)}
.cf-nav .ct{font:400 12px 'Montserrat',sans-serif;letter-spacing:.2em;color:var(--slate);min-width:70px;text-align:center}
.cf-cap{text-align:center;margin-top:18px;font-size:14px;color:var(--cocoa);min-height:22px;transition:opacity .4s}

/* ── סקשנים ── */
.sec{padding:96px 0}
@media (min-width:768px){.sec{padding:128px 0}}
.center{text-align:center}
.more{margin-top:40px;text-align:center}
.more .btn{padding:14px 40px}

/* שירותים: ארבעה טורים שקטים */
.svcs{display:grid;gap:40px}
.svc{text-align:center}
.svc h3{font-weight:500;font-size:22px;margin:0 0 10px}
.svc p{margin:0 auto;max-width:18rem;color:var(--cocoa);font-size:14px;line-height:1.9}
.svc .hairline{width:40px;margin:18px auto 0}
@media (min-width:768px){.svcs{grid-template-columns:repeat(4,1fr);gap:32px}}

/* המלצות */
.qs{display:grid;max-width:44rem;margin:0 auto;text-align:center}
.q{grid-area:1/1;opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease),transform .9s var(--ease);pointer-events:none}
.q.on{opacity:1;transform:none;pointer-events:auto}
.q blockquote{margin:0;font-weight:300;font-size:21px;line-height:1.7;color:var(--espresso)}
.q footer{margin-top:22px;font-size:13px;color:var(--mute)}
.q footer b{font-weight:500;color:var(--cocoa)}
@media (min-width:768px){.q blockquote{font-size:26px}}
.stars{display:inline-flex;gap:3px;color:var(--gold);margin-bottom:22px}
.stars svg{width:14px;height:14px}
.gscore{display:block;text-align:center;margin-top:36px;font-size:13px;color:var(--mute)}
.gscore b{font-weight:500;color:var(--espresso)}

/* קריאה לפעולה */
.cta{text-align:center}
.cta .pair{margin-inline:auto}

/* ── פרויקטים ── */
.tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 28px;margin:-8px 0 72px;font-size:14px}
.tabs button{padding:6px 0;color:var(--cocoa);letter-spacing:.03em;border-bottom:2px solid transparent;transition:color .3s,border-color .3s}
.tabs button:hover{color:var(--slate)}
.tabs button.on{color:var(--espresso);border-color:var(--clay)}
.proj{padding:40px 0 72px}
.proj[hidden]{display:none}
.proj+.proj{border-top:1px solid var(--beige)}
.proj .st{margin-bottom:28px}
.proj .st p{max-width:34rem;color:var(--cocoa);font-size:15px;line-height:1.9}
.proj .loc{font-size:13px;color:var(--mute);margin-top:10px}

/* ── אודות ── */
.steps{display:grid;gap:36px}
.step{text-align:center}
.step h3{font-weight:500;font-size:20px;margin:0 0 10px}
.step p{margin:0 auto;max-width:17rem;color:var(--cocoa);font-size:14px;line-height:1.9}
@media (min-width:768px){.steps{grid-template-columns:repeat(4,1fr);gap:28px}}

/* ── צור קשר ── */
.cgrid{display:grid;gap:56px}
@media (min-width:860px){.cgrid{grid-template-columns:1fr 1fr;gap:72px;align-items:start}}
.rows{border-top:1px solid var(--beige)}
.row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--beige);font-size:15px}
.row small{font:400 10px 'Montserrat',sans-serif;letter-spacing:.25em;text-transform:uppercase;color:var(--slate)}
.row b{font-weight:400;direction:ltr;unicode-bidi:isolate}
.row b.rtl{direction:rtl}
a.row:hover b{color:var(--slate)}
form.lf{position:relative;isolation:isolate;padding:44px 28px}
form.lf::before{content:'';position:absolute;inset:-18px;z-index:-1;background:var(--sand);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 92%,transparent 100%),linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 92%,transparent 100%),linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
@media (min-width:768px){form.lf{padding:56px 52px}}
.cside{display:flex;flex-direction:column;gap:56px}
.bigmark{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.bigmark img{width:min(100%,420px);height:auto}
.bigmark .hairline{width:64px}
.bigmark p{margin:0;font:400 10px 'Montserrat',sans-serif;letter-spacing:.45em;color:var(--slate)}
@media (min-width:860px){.cgrid{align-items:center}}
form.lf h2{font-weight:500;font-size:26px;margin:0 0 6px;text-align:center}
form.lf>p{margin:0 0 26px;text-align:center;font-size:13px;color:var(--mute)}
.fld{display:block;margin-bottom:18px}
.fld span{display:block;font-size:12px;letter-spacing:.08em;color:var(--slate);margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;font:400 16px 'Heebo',sans-serif;padding:13px 14px;border:1px solid var(--beige);background:var(--cream);color:var(--espresso);border-radius:0;transition:border-color .3s;-webkit-appearance:none;appearance:none}
.fld select{background:var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23101010' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat left 14px center}
.fld textarea{min-height:110px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--espresso)}
.two{display:grid;gap:0 12px}
@media (min-width:560px){.two{grid-template-columns:1fr 1fr}}
form.lf .btn{width:100%;margin-top:6px}
.fine{font-size:12px;color:var(--mute);text-align:center;margin:12px 0 0}

/* ── פוטר ── */
footer.site{padding:72px 0 calc(40px + env(safe-area-inset-bottom,0px));text-align:center;font-size:13px;color:var(--mute)}
footer.site img{height:56px;width:auto;margin:0 auto 22px}
footer.site nav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 28px;margin:22px 0;color:var(--cocoa);font-size:14px}
footer.site nav a:hover{color:var(--slate)}
footer.site .hairline{width:64px;margin:0 auto 22px}

.fab{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));inset-inline-start:20px;z-index:40;width:54px;height:54px;border-radius:50%;background:var(--espresso);display:grid;place-items:center;box-shadow:0 12px 28px -10px rgba(0,0,0,.45);transition:transform .3s var(--ease)}
.fab:hover{transform:scale(1.07)}
.fab svg{width:24px;height:24px;fill:#fff}

/* ── לייטבוקס ── */
.lb{position:fixed;inset:0;z-index:100;background:rgba(255,255,255,.98);display:grid;grid-template-rows:auto 1fr auto;opacity:0;pointer-events:none;transition:opacity .35s}
.lb.open{opacity:1;pointer-events:auto}
.lb-top{display:flex;justify-content:space-between;align-items:center;padding:calc(14px + env(safe-area-inset-top,0px)) 20px 14px;font:400 12px 'Montserrat',sans-serif;letter-spacing:.2em;color:var(--slate)}
.lb-top button{font-size:24px}
.lb-stage{display:grid;place-items:center;padding:0 20px;min-height:0}
.lb-stage img{max-height:80vh;max-width:100%;width:auto}
.lb-bot{direction:ltr;display:flex;justify-content:center;gap:16px;padding:16px 0 calc(22px + env(safe-area-inset-bottom,0px))}
.lb-bot button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(16,16,16,.3);font-size:18px}
.lb-bot button:hover{background:var(--espresso);color:var(--cream)}

/* ── חשיפה (Reveal של RESHAPE) ── */
.rv{opacity:0;transform:translateY(var(--y,24px));transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .rv{opacity:1;transform:none}
}

/* ── באנר פתיחה בדף הבית (מבנה ה-Hero של RESHAPE) ── */
.hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;background:var(--cream)}
.hero-ph{position:absolute;inset-inline:0;top:50%;height:88svh;transform:translateY(-50%)}
.hero-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;transform:scale(var(--hs,1.04));transition:transform .1s linear;will-change:transform}
.hero-f1{position:absolute;inset-inline:0;top:0;height:calc(64px + 16svh);background:linear-gradient(to bottom,var(--cream) 64px,rgba(255,255,255,.6) calc(64px + 7svh),transparent);z-index:1;pointer-events:none}
.hero-f2{position:absolute;inset-inline:0;bottom:0;height:16svh;background:linear-gradient(to top,var(--cream),rgba(255,255,255,.7),transparent);z-index:1;pointer-events:none}
.hero-w{position:absolute;inset:0;background:radial-gradient(ellipse 46% 30% at 50% 24%,rgba(255,255,255,.82),rgba(255,255,255,.35) 60%,transparent 80%),linear-gradient(to bottom,rgba(255,255,255,.55),transparent 45%,rgba(255,255,255,.8))}
.hero-b{position:absolute;inset-inline:0;bottom:0;height:42%;background:linear-gradient(to top,var(--cream),rgba(255,255,255,.75),transparent)}
.hero-in{position:relative;z-index:2;min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.hero-top{flex:1;padding:calc(64px + 7svh) 24px 0;text-align:center}
.hero .eb{font:400 10px 'Montserrat',sans-serif;letter-spacing:.55em;text-transform:uppercase;color:var(--slate);margin:0 0 20px}
.hero h1{margin:0;font-weight:300;font-size:17vw;line-height:.95;letter-spacing:-.01em;color:var(--espresso);white-space:nowrap}
.hero .sub{margin:12px 0 0;font-weight:500;font-size:18px;color:var(--cocoa);letter-spacing:.02em}
.hero .hairline{width:64px;margin:24px auto 0}
.hero-btns{max-width:32rem;width:100%;margin:0 auto;padding:0 24px calc(40px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hero-btns .btn{height:60px;font-size:14px;letter-spacing:.2em;font-weight:500}
.hero-btns .y{grid-column:span 2;background:rgba(255,255,255,.9);color:var(--espresso);border:1px solid var(--espresso);font-weight:600;letter-spacing:.28em;gap:14px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero-btns .y span{position:relative;padding-bottom:3px}
.hero-btns .y span::after{content:'';position:absolute;inset-inline:0;bottom:-2px;height:1.5px;background:var(--clay)}
.hero-btns .y i{font-style:normal;font-weight:400;letter-spacing:0;transition:transform .35s var(--ease)}
.hero-btns .y:hover{background:var(--espresso);color:var(--cream)}
.hero-btns .y:hover i{transform:translateX(-5px)}
.hero-btns .w{background:rgba(255,255,255,.85);border:1px solid rgba(16,16,16,.25);color:var(--espresso)}
.hero-btns .w:hover{border-color:var(--espresso)}
.hero .hero-top>*{opacity:0;transform:translateY(22px);animation:up 1.1s var(--ease) forwards}
.hero .eb{animation-delay:.25s}.hero h1{animation-delay:.4s}.hero .sub{animation-delay:.7s}.hero .hairline{animation-delay:.9s}
.hero-btns{opacity:0;transform:translateY(20px);animation:up 1s var(--ease) 1.05s forwards}
html.intro-on .hero .hero-top>*,html.intro-on .hero-btns{animation-play-state:paused}
@keyframes up{to{opacity:1;transform:none}}
@media (min-width:768px){
  .hero h1{font-size:112px}
  .hero .sub{font-size:24px}
  .hero-top{padding-top:calc(64px + 6svh)}
  .hero-btns{padding-bottom:16px}
}

/* ── אינטרו מבוסס לוגו ── */
.intro{position:fixed;inset:0;z-index:200;background:var(--cream);display:grid;place-items:center;transition:transform .8s cubic-bezier(.76,0,.24,1)}
.intro.leave{transform:translateY(-100%)}
html:not(.intro-on) .intro{display:none}
html.intro-on{overflow:hidden}
.intro-in{display:flex;flex-direction:column;align-items:center}
.intro .mark{position:relative;width:min(78vw,440px);aspect-ratio:1100/585}
.intro .draw{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.intro .draw path{fill:none;stroke:url(#gz);stroke-width:46;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1s cubic-bezier(.65,0,.35,1) forwards}
.intro .draw path:nth-child(2){animation-delay:.28s}
.intro .draw path:nth-child(3){animation-delay:.6s}
.intro .mark img{position:absolute;inset:0;width:100%;height:100%;opacity:0;animation:fadein .6s ease 1.25s forwards}
.intro .draw{animation:fadeout .5s ease 1.45s forwards}
.intro .shine{position:absolute;inset:-10%;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%);mix-blend-mode:overlay;transform:translateX(-120%);animation:shine 1s ease 1.55s forwards;-webkit-mask:url('img/logo.png') center/contain no-repeat;mask:url('img/logo.png') center/contain no-repeat}
.intro .name{margin-top:26px;font-weight:300;font-size:clamp(28px,7vw,44px);letter-spacing:.04em;color:var(--espresso);display:flex}
.intro .name span{display:inline-block;opacity:0;transform:translateY(16px);animation:up .5s var(--ease) forwards;animation-delay:calc(1.2s + var(--i) * .05s)}
.intro .ln{margin-top:26px;height:1px;width:170px;background:rgba(234,210,0,.75);transform:scaleX(0);animation:grow .6s var(--ease) 1.6s forwards}
.intro .tag{margin-top:14px;font:400 10px 'Montserrat',sans-serif;letter-spacing:.45em;color:var(--cocoa);opacity:0;animation:fadein .5s ease 1.8s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}
@keyframes fadeout{to{opacity:0}}
@keyframes shine{to{transform:translateX(120%)}}
@keyframes grow{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.intro{display:none!important}}
@media (max-width:859px){.cside{display:contents}.cgrid .rows{order:1}.cgrid form.lf{order:2}.bigmark{order:3}.bigmark img{width:min(78%,300px)}}

/* ── נייד: הרצועה הכהה ── הטקסט יורד מתחת לצילום על רקע כהה, ורק אז נמוג ללבן
   (בגרסה הקודמת הוא ישב על דהיית הלבן התחתונה ונבלע בה) */
@media (max-width:767px){
  .craft{background:var(--espresso)}
  .craft::after{content:'';display:block;height:150px;background:linear-gradient(to bottom,var(--espresso) 0%,#2a2a2c 25%,#bdbcba 70%,var(--cream) 100%)}
  .craft .fade-b{display:none}
  .craft .g1{bottom:auto;height:58vh;background:linear-gradient(to top,var(--espresso) 0%,rgba(16,16,16,.55) 30%,transparent 65%)}
  .craft .copy{position:relative;inset:auto;display:block;margin-top:-120px}
  .craft .copy>div{padding:0 24px 12px}
  .pair .btn{letter-spacing:.06em;font-size:13.5px;padding:15px 10px}
  .hero-btns .btn{letter-spacing:.12em}
}
/* נייד: הפורטרט בנעים להכיר קטן יותר, כדי שהכותרת תיכנס כבר במסך הראשון */
@media (max-width:767px){
  .meet{padding-top:calc(64px + 28px + env(safe-area-inset-top,0px));padding-bottom:72px}
  .meet-g{gap:28px}
  .meet figure{width:min(62vw,250px);margin-inline:auto}
  .meet figcaption{margin-top:12px;padding-top:10px}
  .meet figcaption span:first-child{font-size:13px}
  .meet figcaption span:last-child{font-size:9px;letter-spacing:.22em}
  .meet .st{margin-bottom:28px}
}
.st .t2{display:block;margin-top:10px;font-weight:300;font-size:.62em;color:var(--cocoa);letter-spacing:0}

/* ── עמודי חובה ── */
.legal{max-width:46rem}
.legal h2{font-weight:500;font-size:20px;margin:36px 0 8px;color:var(--espresso)}
.legal p{font-size:15px;line-height:1.85;color:var(--cocoa);margin:0 0 10px}
.legal a{text-decoration:underline;text-underline-offset:3px}
footer.site .legal-links{margin-top:-4px;font-size:.9em;opacity:.8}
footer.site .legal-links a{text-decoration:underline;text-underline-offset:3px}
/* ── כפתור נגישות ── */
.a11y-btn{position:fixed;bottom:18px;left:18px;z-index:70;width:48px;height:48px;border-radius:50%;background:var(--espresso);color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.a11y-btn svg{width:26px;height:26px}
.a11y-panel{position:fixed;bottom:78px;left:18px;z-index:70;width:220px;background:#fff;border:1px solid var(--beige);box-shadow:0 20px 40px -20px rgba(0,0,0,.35);padding:14px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.a11y-panel[hidden]{display:none}
.a11y-panel b{font-weight:500;margin-bottom:4px}
.a11y-panel button{text-align:right;padding:8px 10px;background:var(--sand);font-size:14px}
.a11y-panel button[aria-pressed="true"]{background:var(--espresso);color:#fff}
.a11y-panel a{font-size:13px;text-decoration:underline;margin-top:4px}
html.a11y-big body{zoom:1.15}
html.a11y-contrast main,html.a11y-contrast footer{filter:contrast(1.35)}
html.a11y-links a{text-decoration:underline!important;outline:2px dashed var(--espresso);outline-offset:2px}
html.a11y-still *,html.a11y-still *::before,html.a11y-still *::after{animation:none!important;transition:none!important}
:focus-visible{outline:2px solid var(--espresso);outline-offset:3px}
.legal .st p{margin:16px auto 0;text-align:center}
/* וידאו בקרוסלה: בכרום, וידאו בתוך שכבת תלת-ממד עם filter מצייר "הילה" אפורה-שחורה סביבו.
   חיתוך מאולץ על השכבה + בלי filter על שקופית הווידאו מעלימים את זה. */
.cf .s[data-video] .in{isolation:isolate;transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(white,black);box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.cf .s[data-video] video{background:#fff}
/* צילום לאורך ברצועה הכהה (דסקטופ): אותה רצועה ברוחב מלא כמו שאר התמונות,
   רק גבוהה יותר וממוקדת כלפי ההרים, כדי שייראה יותר מהנוף (זום אאוט עדין) */
@media (min-width:768px){
  .craft.tall .ph img{height:100vh;object-position:50% 34%!important}
}
/* היקף העבודה בפרויקט (סניפי הבנק) */
.scope{max-width:40rem;margin:-8px auto 44px;text-align:center}
.scope h4{font-weight:500;font-size:15px;letter-spacing:.06em;color:var(--slate);margin:0 0 16px}
.scope ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.scope li{font-size:14px;color:var(--cocoa);padding:9px 16px;border:1px solid var(--beige);background:var(--cream)}
.scope p{margin:22px auto 0;max-width:34rem;font-size:15px;line-height:1.9;color:var(--cocoa)}

/* ── עמודי שירות ומדריכים ── */
.crumb{display:flex;gap:8px;justify-content:center;font-size:13px;color:var(--mute);margin-bottom:28px}
.crumb a:hover{color:var(--slate)}
.svc-hero{margin:0 auto 44px;max-width:60rem}
.svc-hero img{width:100%;aspect-ratio:16/9;object-fit:cover}
.svc-intro{max-width:44rem;margin:0 auto 48px;font-size:17px;line-height:2;color:var(--cocoa);text-align:center}
.svc-block{max-width:44rem;margin:0 auto 40px}
.svc-block h2{font-weight:500;font-size:24px;margin:0 0 12px;color:var(--espresso)}
.svc-block p{margin:0;font-size:16px;line-height:2;color:var(--cocoa)}
@media (min-width:768px){.svc-block h2{font-size:28px}}
.svc-gal{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:56px 0 0}
.svc-gal figure{overflow:hidden;border-radius:12px;background:var(--sand)}
.svc-gal img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.2s var(--ease)}
.svc-gal figure:hover img{transform:scale(1.04)}
@media (min-width:768px){.svc-gal{grid-template-columns:repeat(4,1fr)}.svc-gal img{aspect-ratio:3/4}}
.faq{max-width:44rem;margin:72px auto 0}
.faq h2{font-weight:500;font-size:28px;text-align:center;margin:0 0 24px}
.faq details{border-bottom:1px solid var(--beige);padding:18px 0}
.faq summary{cursor:pointer;font-size:17px;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-weight:300;font-size:22px;line-height:1;color:var(--slate);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:12px 0 0;font-size:15px;line-height:1.9;color:var(--cocoa)}
.svc-others{max-width:44rem;margin:64px auto 0;text-align:center}
.svc-others h2{font-weight:500;font-size:20px;margin:0 0 18px}
.svc-others div{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.svc-others a{font-size:14px;padding:10px 18px;border:1px solid var(--beige);transition:border-color .3s,color .3s}
.svc-others a:hover{border-color:var(--espresso);color:var(--espresso)}
a.svc{display:block;color:inherit}
a.svc:hover h3{color:var(--slate)}
.svc .more-l{display:inline-block;margin-top:14px;font-size:13px;letter-spacing:.08em;color:var(--slate);border-bottom:1px solid var(--clay);padding-bottom:2px}
footer.site .svc-links{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 20px;margin:0 0 18px;font-size:13px;color:var(--cocoa)}
footer.site .svc-links a:hover{color:var(--slate)}