/* ---------- Landwer brand fonts ---------- */
@font-face{font-family:'SimplerPro';font-weight:300;font-display:swap;src:url('assets/fonts/SimplerPro-Light.woff2') format('woff2')}
@font-face{font-family:'SimplerPro';font-weight:400;font-display:swap;src:url('assets/fonts/SimplerPro-Regular.woff2') format('woff2')}
@font-face{font-family:'SimplerPro';font-weight:700;font-display:swap;src:url('assets/fonts/SimplerPro-Bold.woff2') format('woff2')}
@font-face{font-family:'mikhmoret';font-weight:400;font-display:swap;src:url('assets/fonts/mikhmoret-regular-aaa.woff2') format('woff2')}
@font-face{font-family:'mikhmoret';font-weight:700;font-display:swap;src:url('assets/fonts/mikhmoret-bold-aaa.woff2') format('woff2')}

/* ---------- Landwer brand colors ---------- */
:root{
  --wine:#590B00;
  --wine-2:#75170a;
  --peach:#F4B699;
  --cream:#F9EFEA;
  --sand:#F5E5DD;
  --beige:#E3D5C2;
  --ink:#202020;
  --ink-2:#3C3C3C;
  --r:18px;
  --shadow:0 10px 30px rgba(89,11,0,.10);
}
*{box-sizing:border-box}
html{scroll-padding-top:150px}
body{margin:0;font-family:'SimplerPro',Assistant,Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:'mikhmoret','SimplerPro',sans-serif;color:var(--wine);margin:0 0 .4em;line-height:1.1}
h1{font-size:clamp(2.4rem,6vw,4.2rem)}
h2{font-size:clamp(1.8rem,4vw,2.6rem)}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.script{font-family:'mikhmoret','SimplerPro',sans-serif;font-weight:400;color:var(--wine-2);font-size:1.45rem;line-height:1.2;letter-spacing:.01em;margin:0 0 .2em}
.muted{color:var(--ink-2);opacity:.8}
.center{text-align:center;margin:28px 0 10px}
.skip{position:absolute;right:-999px}.skip:focus{right:10px;top:10px;z-index:99;background:#fff;padding:8px}
[hidden]{display:none!important}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;font:inherit;font-weight:700;transition:transform .15s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn-wine{background:var(--wine);color:var(--cream)}
.btn-wine:hover{background:var(--wine-2)}
.btn-peach{background:var(--peach);color:var(--wine)}
.btn-ghost{border-color:var(--cream);color:var(--cream)}
.btn-line{border-color:var(--wine);color:var(--wine);background:transparent}

/* ---------- header ---------- */
.topbar{position:sticky;top:0;z-index:50;background:var(--wine);color:var(--cream);box-shadow:0 2px 14px rgba(0,0,0,.15)}
.topbar-in{display:flex;align-items:center;gap:24px;height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand-logo{height:34px;width:auto;filter:brightness(0) saturate(100%) invert(93%) sepia(8%) saturate(500%) hue-rotate(320deg)}
.brand-sep{width:1px;height:38px;background:linear-gradient(to bottom,transparent,var(--peach),transparent);margin:0 2px}
.brand-branch{display:flex;flex-direction:column;line-height:1;white-space:nowrap}
.brand-branch b{font-family:'mikhmoret',sans-serif;font-weight:700;font-size:1.55rem;color:var(--cream);letter-spacing:.01em}
.brand-branch small{font-size:.62rem;letter-spacing:.32em;color:var(--peach);margin-top:5px;font-weight:700}
.tabs{display:flex;gap:4px;margin-inline-start:auto}
.tabs a{padding:9px 16px;border-radius:999px;text-decoration:none;font-weight:700;color:var(--cream);transition:background .2s}
.tabs a:hover{background:rgba(249,239,234,.12)}
.tabs a.active{background:var(--peach);color:var(--wine)}
.social{display:flex;gap:8px}
.social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(249,239,234,.12);color:var(--cream);transition:background .2s,color .2s}
.social a:hover{background:var(--peach);color:var(--wine)}
.social svg{width:19px;height:19px}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--cream);margin:5px 0;border-radius:2px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:calc(100vh - 76px);min-height:calc(100svh - 76px);display:flex;align-items:flex-end;overflow:hidden}
.hero>picture{display:contents}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
@media (max-width:1024px){.hero-bg{object-position:center 62%}}   /* the terrace photo: keep the tables in view */
.hero-shade{position:absolute;inset:0;background:linear-gradient(to left,rgba(40,5,0,.75) 0%,rgba(40,5,0,.25) 50%,rgba(0,0,0,0) 75%),linear-gradient(to top,rgba(40,5,0,.8) 0%,rgba(40,5,0,.2) 50%,rgba(0,0,0,0) 100%)}
.hero-txt{position:relative;color:var(--cream);padding-bottom:70px;padding-top:120px;width:100%}
.hero-txt .script{color:var(--peach);font-size:clamp(2.6rem,5.6vw,3.8rem);line-height:1.1;margin-bottom:.12em}
.hero h1{color:var(--cream);font-size:clamp(3rem,9vw,6.2rem)}
.hero h1 span{color:var(--peach)}
.hero-sub{font-size:1.25rem;max-width:560px;margin:0 0 18px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.status{display:inline-flex;align-items:center;gap:8px;background:rgba(249,239,234,.15);backdrop-filter:blur(6px);padding:7px 16px;border-radius:999px;font-weight:700}
.status i{width:10px;height:10px;border-radius:50%;background:#5bd16b;box-shadow:0 0 0 4px rgba(91,209,107,.25)}
.status.closed i{background:#e86a5a;box-shadow:0 0 0 4px rgba(232,106,90,.25)}

/* ---------- quick cards ---------- */
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;position:relative;z-index:2}
.qcard{display:flex;align-items:center;gap:16px;background:#fff;border-radius:var(--r);padding:14px;text-decoration:none;box-shadow:var(--shadow);transition:transform .2s}
.qcard:hover{transform:translateY(-4px)}
.qcard img{width:86px;height:86px;border-radius:14px;object-fit:cover}
.qcard h3{font-size:1.5rem;margin:0}
.qcard p{margin:0;color:var(--ink-2)}

/* ---------- sections / grids ---------- */
.featured{padding:70px 20px 30px}
.sec-head{text-align:center;margin-bottom:30px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.dish{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);cursor:pointer;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;text-align:start;border:0;padding:0;font:inherit;color:inherit}
.dish:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(89,11,0,.16)}
.dish-img{aspect-ratio:4/3;background:var(--sand);overflow:hidden}
.dish-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.dish:hover .dish-img img{transform:scale(1.05)}
.dish-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.dish-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.dish h3{font-family:'SimplerPro',sans-serif;font-weight:700;font-size:1.12rem;margin:0;color:var(--ink)}
.price{color:var(--wine);font-weight:700;white-space:nowrap}
.dish p{margin:0;font-size:.93rem;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- page heads ---------- */
.page-head{background:var(--sand);padding:60px 0 40px;text-align:center}
.page-head .lead{max-width:720px;margin:0 auto;font-size:1.15rem}
.page-head--img{position:relative;color:var(--cream);background:var(--wine) var(--bg) center/cover;padding:110px 0 90px}
.page-head--img::before{content:"";position:absolute;inset:0;background:rgba(60,8,0,.68)}
.page-head--img .wrap{position:relative}
.page-head--img h1{color:var(--cream)}
.page-head--img .script{color:var(--peach)}

/* ---------- menu ---------- */
.search{max-width:520px;margin:18px auto 0}
.search input{width:100%;padding:15px 22px;border-radius:999px;border:2px solid var(--beige);font:inherit;background:#fff;outline:none}
.search input:focus{border-color:var(--wine)}
.cats-bar{position:sticky;top:76px;z-index:20;background:var(--cream);border-bottom:1px solid var(--beige)}
.cats{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;padding:14px 20px;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cats button{flex:none;padding:9px 18px;border-radius:999px;border:1.5px solid var(--wine);background:transparent;color:var(--wine);font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}
.cats button.active,.cats button:hover{background:var(--wine);color:var(--cream)}
.mcat{padding-top:40px}
.mcat h2{display:flex;align-items:center;gap:14px}
.mcat h2::after{content:"";flex:1;height:1px;background:var(--beige)}
.empty{text-align:center;padding:60px 0;color:var(--ink-2)}
.pdfs{text-align:center;padding:60px 20px}
.pdfs [data-pdfs]{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.note{font-size:.85rem;color:var(--ink-2);opacity:.75;margin-top:24px}

/* ---------- events ---------- */
.events{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;padding:60px 20px;align-items:start}
.ev-types{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ev{background:#fff;border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
.ev-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--sand);color:var(--wine);transition:background .25s,color .25s}
.ev-ic svg{width:36px;height:36px}
.ev:hover .ev-ic{background:var(--wine);color:var(--peach)}
.ev h3{font-size:1.4rem;margin:14px 0 4px}
.ev p{margin:0;color:var(--ink-2)}
.ev-form{background:#fff;border-radius:var(--r);padding:32px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}
.ev-form h2{margin:0}
.ev-form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ev-form label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.92rem}
.ev-form input,.ev-form select,.ev-form textarea{font:inherit;font-weight:400;padding:12px 14px;border:1.5px solid var(--beige);border-radius:12px;background:var(--cream);outline:none}
.ev-form input:focus,.ev-form select:focus,.ev-form textarea:focus{border-color:var(--wine);background:#fff}
.ev-form .invalid{border-color:#c0392b}
.form-err{color:#c0392b;margin:0;font-weight:700}
.form-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}

/* ---------- delivery ---------- */
.deliv{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;padding:50px 20px 10px}
.dcard{border-radius:var(--r);padding:30px;text-decoration:none;display:flex;flex-direction:column;gap:6px;min-height:240px;box-shadow:var(--shadow);transition:transform .2s;cursor:pointer}
.dcard:hover{transform:translateY(-5px)}
.dcard h3{font-size:1.9rem;color:inherit;margin-top:auto}
.dcard p{margin:0;opacity:.9}
.dlogo{font-weight:700;font-size:1.6rem;letter-spacing:.02em}
.go{margin-top:14px;font-weight:700}
.dcard--wolt{background:#009de0;color:#fff}
.dcard--tenbis{background:#ff8000;color:#fff}
.dcard--pickup{background:var(--wine);color:var(--cream)}
.dcard--haat{background:#e31b3a;color:#fff}
.dcard--mishloha{background:#ffd200;color:#2b1d00}

/* ---------- visit ---------- */
.visit{display:grid;grid-template-columns:1fr 1.3fr;gap:30px;padding:50px 20px 30px}
.vcard{background:#fff;border-radius:var(--r);padding:30px;box-shadow:var(--shadow)}
.vcard h3{font-size:1.4rem;margin:22px 0 6px}.vcard h3:first-child{margin-top:0}
.big{font-size:1.2rem;margin:0}
.nav-btns{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.hours{list-style:none;padding:0;margin:0}
.hours li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--beige)}
.hours li.today{color:var(--wine);font-weight:700}
.map{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);min-height:420px}
.map iframe{width:100%;height:100%;min-height:420px;border:0}

/* ---------- footer ---------- */
.footer{background:var(--wine);color:var(--cream);padding:34px 0;margin-top:40px}
.foot-in{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.foot-in p{margin:2px 0}
.foot-in a{text-decoration:none}
.foot-logo{height:30px;filter:brightness(0) saturate(100%) invert(93%) sepia(8%) saturate(500%) hue-rotate(320deg)}
.social--foot{margin-inline-start:auto}
.footer .muted{color:var(--peach)}

/* ---------- WhatsApp FAB ---------- */
.fab{position:fixed;left:20px;bottom:20px;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:60;cursor:pointer;transition:transform .2s}
.fab:hover{transform:scale(1.08)}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;background:rgba(32,10,5,.7);z-index:100;display:grid;place-items:center;padding:20px;backdrop-filter:blur(4px)}
.lb-card{background:#fff;border-radius:22px;overflow:hidden;max-width:560px;width:100%;max-height:92vh;overflow-y:auto;position:relative;animation:pop .2s ease-out}
@keyframes pop{from{transform:scale(.96)}}
.lb-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.lb-body{padding:22px 26px 26px}
.lb-body h3{font-size:1.9rem}
.lb-body p{color:var(--ink-2);margin:0 0 18px}
.lb-foot{display:flex;justify-content:space-between;align-items:center;gap:12px}
.lb-foot strong:empty{display:none}
.lb-foot strong{font-size:1.4rem;color:var(--wine)}
.lb-x{position:absolute;top:12px;left:12px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.9);font-size:1.1rem;cursor:pointer;z-index:2}

/* ---------- booking ---------- */
.tabs a.tab-cta{border:1.5px solid var(--peach);color:var(--peach);margin-inline-start:6px}
.tabs a.tab-cta:hover{background:var(--peach);color:var(--wine)}
.tabs a.tab-cta.active{background:var(--peach);color:var(--wine)}
.book{display:grid;grid-template-columns:1fr 360px;gap:30px;padding:50px 20px 70px;align-items:start}
.bk-steps{display:flex;flex-direction:column;gap:18px;min-width:0}
.bk-step{border:0;margin:0;background:#fff;border-radius:var(--r);padding:24px 26px;box-shadow:var(--shadow);min-width:0}
.bk-step legend{float:right;width:100%;display:flex;align-items:center;gap:12px;font-family:'mikhmoret',sans-serif;font-weight:700;font-size:1.45rem;color:var(--wine);margin-bottom:16px;padding:0}
.bk-step legend+*{clear:both}
.bk-n{width:32px;height:32px;border-radius:50%;background:var(--wine);color:var(--peach);display:grid;place-items:center;font-family:'SimplerPro',sans-serif;font-size:.95rem}
.bk-hint{margin:10px 0 0;color:var(--ink-2);font-size:.92rem}
.bk-hint a{color:var(--wine);font-weight:700}
.bk-sub{margin:18px 0 10px;font-weight:700;font-size:.92rem;color:var(--ink-2)}
.stepper{display:inline-flex;align-items:center;gap:6px;background:var(--cream);border-radius:999px;padding:6px}
.stepper button{width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:var(--wine);font-size:1.5rem;cursor:pointer;box-shadow:0 2px 6px rgba(89,11,0,.1)}
.stepper button:hover{background:var(--wine);color:var(--cream)}
.stepper output{min-width:56px;text-align:center;font-family:'mikhmoret',sans-serif;font-weight:700;font-size:1.9rem;color:var(--wine)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{padding:10px 18px;border-radius:999px;border:1.5px solid var(--beige);background:var(--cream);color:var(--ink);font:inherit;font-weight:700;cursor:pointer;transition:all .15s}
.chips button:hover{border-color:var(--wine)}
.chips button.on{background:var(--wine);border-color:var(--wine);color:var(--cream)}
.chips--days{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;overscroll-behavior-x:contain}
.chips--days button{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;width:76px;padding:10px 0;border-radius:16px}
.chips--days b{font-family:'mikhmoret',sans-serif;font-size:1.6rem;line-height:1}
.chips--days small{font-size:.75rem;font-weight:400;opacity:.85}
.slot-g{display:flex;gap:14px;align-items:flex-start;padding:10px 0;border-top:1px dashed var(--beige)}
.slot-g:first-child{border-top:0;padding-top:0}
.slot-g>span{flex:none;width:64px;padding-top:9px;font-weight:700;color:var(--wine-2);font-size:.9rem}
.chips--slots button{padding:8px 14px;font-variant-numeric:tabular-nums}
.bk-step .row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.bk-step label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.92rem}
.bk-step input,.bk-step textarea{font:inherit;font-weight:400;padding:12px 14px;border:1.5px solid var(--beige);border-radius:12px;background:var(--cream);outline:none}
.bk-step input:focus,.bk-step textarea:focus{border-color:var(--wine);background:#fff}
.bk-step .invalid{border-color:#c0392b}
.bk-summary{position:sticky;top:100px;background:var(--wine);color:var(--cream);border-radius:var(--r);padding:28px;box-shadow:var(--shadow)}
.bk-summary h3{color:var(--peach);font-size:1.7rem}
.bk-summary dl{margin:0 0 20px}
.bk-summary dl div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid rgba(244,182,153,.25)}
.bk-summary dt{opacity:.75}
.bk-summary dd{margin:0;font-weight:700;text-align:left}
.bk-summary .form-err{color:#ffb4a6;margin-bottom:10px}
.bk-send{width:100%;justify-content:center;background:var(--peach);color:var(--wine);padding:15px}
.bk-send:hover{background:#f7c7b0}
.bk-fine{font-size:.82rem;opacity:.7;margin:12px 0 0;text-align:center}
.bk-done{margin-top:18px;background:rgba(249,239,234,.1);border:1px solid rgba(244,182,153,.4);border-radius:14px;padding:16px}
.bk-done strong{color:var(--peach);font-size:1.1rem}
.bk-done p{margin:6px 0 8px}
.bk-done a{color:var(--peach);font-size:.88rem}
@media (max-width:1020px){
  .book{grid-template-columns:1fr}
  .bk-summary{position:static}
}
@media (max-width:760px){
  .bk-step{padding:20px 16px}
  .bk-step .row{grid-template-columns:1fr}
  .slot-g{flex-direction:column;gap:8px}
  .slot-g>span{padding-top:0}
}

/* ---------- responsive ---------- */
@media (max-width:1180px){   /* the menu folds behind the burger before its items get squeezed */
  .burger{display:block;margin-inline-start:auto}
  .topbar .social{display:none}
  .tabs{position:absolute;top:76px;inset-inline:0;flex-direction:column;background:var(--wine);padding:10px 20px 20px;display:none;margin:0}
  .tabs.open{display:flex}
  .tabs a{padding:14px 16px}
  .tabs a.tab-cta{margin:6px 0 0;text-align:center}
}
@media (max-width:1020px){
  .events,.visit{grid-template-columns:1fr}
}
@media (max-width:760px){
  .quick,.deliv{grid-template-columns:1fr}
  .quick{margin-top:20px}
  .brand-logo{height:26px}
  .brand-sep{height:30px}
  .brand-branch b{font-size:1.15rem}
  .brand-branch small{font-size:.5rem;letter-spacing:.25em}
  .ev-form .row{grid-template-columns:1fr}
  .ev-form{padding:22px}
  .hero{min-height:78vh}
  .hero-sub{font-size:1.05rem}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
  .dish p{display:none}
  .dish-top{flex-direction:column;gap:2px}
  .dish h3{font-size:1rem}
  .social--foot{margin:0}
}

/* =====================================================================
   EXPERIENCE LAYER — time-of-day mood, living photos, craft details
   ===================================================================== */

/* ---------- intro: the logo draws itself (once per visit) ---------- */
.intro{position:fixed;inset:0;z-index:200;background:var(--wine);display:grid;place-items:center;cursor:pointer;animation:introOut .8s cubic-bezier(.7,0,.2,1) 2.4s forwards}
.intro.skip-now{animation:introOut2 .45s cubic-bezier(.7,0,.2,1) forwards}
.no-intro .intro{display:none}
.intro-in{display:flex;flex-direction:column;align-items:center;gap:22px}
.intro-logo{width:min(400px,70vw);height:auto;overflow:visible}
.intro-logo path{fill:var(--cream);fill-opacity:0;stroke:var(--peach);stroke-width:2.2;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.3s cubic-bezier(.6,0,.3,1) .15s forwards,ink .5s ease 1.3s forwards}
.intro-branch{display:flex;flex-direction:column;align-items:center;line-height:1;color:var(--cream);transform:translateY(14px);opacity:0;animation:upIn .6s cubic-bezier(.2,.7,.2,1) 1.5s forwards}
.intro-branch b{font-family:'mikhmoret',sans-serif;font-size:clamp(1.7rem,4vw,2.5rem)}
.intro-branch small{font-size:.75rem;letter-spacing:.42em;color:var(--peach);font-weight:700;margin-top:8px}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes ink{to{fill-opacity:1;stroke-opacity:0}}
@keyframes upIn{to{transform:none;opacity:1}}
@keyframes introOut{to{transform:translateY(-100%);visibility:hidden}}
@keyframes introOut2{to{transform:translateY(-100%);visibility:hidden}}

/* ---------- hero: living photo + mood light ---------- */
.hero-bg{animation:kb 30s ease-in-out infinite alternate;transform-origin:60% 40%;transition:filter 1s}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.12) translate(-1.5%,1%)}}
.hero-light{position:absolute;inset:-20%;pointer-events:none;mix-blend-mode:screen}
.hero-greet{display:flex;align-items:center;gap:.3em}
.hero-greet .mood-ic{width:.9em;height:.9em}
.hero-txt .script,.hero-sub,.hero h1{text-shadow:0 2px 18px rgba(40,5,0,.55),0 1px 3px rgba(40,5,0,.35)}
.mood-ic{filter:drop-shadow(0 1px 4px rgba(40,5,0,.5))}
.mood-ic{display:inline-grid;width:38px;height:38px;color:var(--peach);flex:none}
.mood-ic svg{width:100%;height:100%;overflow:visible}
.mood-ic .rays{transform-origin:16px 16px;animation:rays 6s ease-in-out infinite}
@keyframes rays{50%{opacity:.35}}

/* morning: golden sunlight from the window */
[data-mood=morning] .hero-bg{filter:brightness(1.07) saturate(1.12) sepia(.12)}
[data-mood=morning] .hero-shade{background:linear-gradient(to left,rgba(85,28,0,.72) 0%,rgba(110,45,5,.22) 52%,rgba(0,0,0,0) 76%),linear-gradient(to top,rgba(70,18,0,.78) 0%,rgba(90,30,0,.12) 55%,rgba(0,0,0,0) 100%)}
[data-mood=morning] .hero-light{background:radial-gradient(ellipse 45% 55% at 18% 12%,rgba(255,206,140,.55),transparent 70%);animation:sun 14s ease-in-out infinite alternate}
@keyframes sun{to{transform:translate(4%,3%) scale(1.08)}}

/* noon: bright and clean */
[data-mood=noon] .hero-bg{filter:brightness(1.04) saturate(1.06)}
[data-mood=noon] .hero-light{background:radial-gradient(ellipse 60% 40% at 50% 0%,rgba(255,245,230,.28),transparent 70%)}

/* evening: low sunset glow */
[data-mood=evening] .hero-bg{filter:brightness(.88) saturate(1.05) sepia(.22) hue-rotate(-8deg)}
[data-mood=evening] .hero-shade{background:linear-gradient(to left,rgba(45,5,0,.82) 0%,rgba(60,10,0,.3) 52%,rgba(0,0,0,0) 78%),linear-gradient(to top,rgba(40,4,0,.88) 0%,rgba(60,10,0,.25) 55%,rgba(0,0,0,.05) 100%)}
[data-mood=evening] .hero-light{background:radial-gradient(ellipse 50% 45% at 12% 88%,rgba(255,140,70,.42),transparent 70%);animation:sun 18s ease-in-out infinite alternate}

/* night & closed: dark, intimate, a lamp that breathes */
[data-mood=night] .hero-bg,[data-mood=closed] .hero-bg{filter:brightness(.6) saturate(.82) contrast(1.06)}
[data-mood=night] .hero-shade,[data-mood=closed] .hero-shade{background:linear-gradient(to left,rgba(20,3,0,.86) 0%,rgba(25,4,0,.45) 55%,rgba(10,2,0,.2) 100%),linear-gradient(to top,rgba(20,3,0,.92) 0%,rgba(20,3,0,.3) 60%,rgba(0,0,0,.25) 100%)}
[data-mood=night] .hero-light,[data-mood=closed] .hero-light{background:radial-gradient(ellipse 30% 30% at 72% 30%,rgba(255,170,110,.32),transparent 70%);animation:lamp 5s ease-in-out infinite}
@keyframes lamp{0%,100%{opacity:.85}40%{opacity:1}55%{opacity:.7}70%{opacity:.95}}
[data-mood=night] #panel-home,[data-mood=closed] #panel-home{background:#2a0904}
[data-mood=night] #panel-home .sec-head h2,[data-mood=closed] #panel-home .sec-head h2{color:var(--cream)}
[data-mood=night] #panel-home .sec-head .script,[data-mood=closed] #panel-home .sec-head .script{color:var(--peach)}
[data-mood=night] #panel-home .btn-wine,[data-mood=closed] #panel-home .btn-wine{background:var(--peach);color:var(--wine)}

.status.last i{background:#f2b24a;box-shadow:0 0 0 4px rgba(242,178,74,.3);animation:ping 1.6s ease-out infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(242,178,74,0)}}

/* ---------- living dish photos ---------- */
.dish-img,.lb-media{position:relative}
.lb-media{overflow:hidden}
.lb-media img{animation:kb 18s ease-in-out infinite alternate}
.fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fx i,.fx{animation-play-state:paused!important}
.inview .fx,.inview .fx i,.lb-media .fx,.lb-media .fx i{animation-play-state:running!important}

/* a glaze glint across desserts */
.live-glint .fx{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 48%,rgba(255,240,220,.2) 53%,transparent 62%);background-size:260% 100%;background-position:160% 0;mix-blend-mode:overlay;animation:glint 5.5s ease-in-out infinite}
@keyframes glint{0%{background-position:160% 0}55%,100%{background-position:-60% 0}}

/* bubbles in cold drinks */
.fizz i{position:absolute;bottom:-8px;width:6px;height:6px;border-radius:50%;border:1.3px solid rgba(255,255,255,.85);background:rgba(255,255,255,.18);animation:fizz 3.2s ease-in infinite}
.fizz i:nth-child(1){left:28%}
.fizz i:nth-child(2){left:38%;width:4px;height:4px;animation-delay:.6s;animation-duration:2.6s}
.fizz i:nth-child(3){left:47%;animation-delay:1.3s}
.fizz i:nth-child(4){left:55%;width:4px;height:4px;animation-delay:.3s;animation-duration:2.9s}
.fizz i:nth-child(5){left:63%;width:5px;height:5px;animation-delay:1.9s}
.fizz i:nth-child(6){left:71%;width:3px;height:3px;animation-delay:2.4s;animation-duration:2.4s}
@keyframes fizz{0%{transform:translate(0,0);opacity:0}15%{opacity:1}50%{transform:translate(3px,-48cqh)}100%{transform:translate(-2px,-110cqh);opacity:0}}
.dish-img,.lb-media{container-type:size}
.lb-media{container-type:normal}
.lb-media .fizz i{animation-name:fizzLb}
@keyframes fizzLb{0%{transform:translate(0,0);opacity:0}15%{opacity:1}100%{transform:translate(-2px,-380px);opacity:0}}

/* fresh dishes breathe slowly */
.live-breeze.inview img{animation:breathe 9s ease-in-out infinite alternate}
.dish:hover .live-breeze img{animation:none}
@keyframes breathe{to{transform:scale(1.06)}}

/* ---------- page turn between tabs (RTL: the new page sweeps in from the right) ---------- */
.panel.turn{animation:turn .7s cubic-bezier(.2,.75,.2,1)}
@keyframes turn{from{clip-path:inset(0 0 0 100%);transform:translateX(-36px)}to{clip-path:inset(0 0 0 0);transform:none}}

/* ---------- cards rise in ---------- */
.rise:not(.risen){opacity:0}
.rise.risen{animation:riseIn .75s cubic-bezier(.2,.75,.2,1) backwards}
@keyframes riseIn{from{opacity:0;transform:translateY(28px)}}

/* ---------- booking: a plate for every guest ---------- */
.plates{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:16px;color:var(--wine);min-height:34px;max-width:420px}
.plate{display:inline-grid}
.plate svg{width:46px;height:31px}
.plate.new{animation:plateIn .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes plateIn{from{transform:translateY(-14px) scale(.3) rotate(-25deg)}}

/* magnetic buttons ease back */
.btn-peach,.btn-wine,.tab-cta,[data-bk-send]{transition:transform .25s cubic-bezier(.2,.7,.2,1),background .2s}

@media (max-width:760px){
  .hero-shade::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(30,4,0,.7) 0%,rgba(30,4,0,.45) 62%,rgba(30,4,0,.05) 100%)}
  .mood-ic{width:30px;height:30px}
  .plate svg{width:38px;height:26px}
}

/* ---------- GPU layer (gl.js) ---------- */
.hero .hero-cv{position:absolute;inset:0;width:100%;height:100%;animation:kb 30s ease-in-out infinite alternate;transform-origin:60% 40%}
.hero.gl .hero-bg{visibility:hidden}

/* ---------- menu: list / flavor map toggle ---------- */
.view-toggle{display:inline-flex;gap:4px;margin-top:18px;background:#fff;border-radius:999px;padding:5px;box-shadow:0 2px 10px rgba(89,11,0,.08)}
.view-toggle button{border:0;background:transparent;font:inherit;font-weight:700;color:var(--wine);padding:9px 20px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.view-toggle button.on{background:var(--wine);color:var(--cream)}

/* ---------- flavor map ---------- */
.flavor{padding-top:30px;padding-bottom:60px}
.fl-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.fl-hint{margin:0;color:var(--ink-2);font-size:.95rem}
.fl-stage{position:relative;height:min(680px,78vh);min-height:520px;border-radius:26px;overflow:hidden;
  background:radial-gradient(ellipse 60% 70% at 0% 50%,rgba(244,182,153,.45),transparent 70%),radial-gradient(ellipse 60% 70% at 100% 50%,rgba(227,213,194,.55),transparent 70%),#fff;
  box-shadow:var(--shadow);user-select:none;-webkit-user-select:none}
.fl-ax{position:absolute;background:var(--beige)}
.fl-ax--x{left:24px;right:24px;top:50%;height:1px}
.fl-ax--y{top:24px;bottom:24px;left:50%;width:1px}
.fl-lab{position:absolute;font-family:'mikhmoret','SimplerPro',sans-serif;font-weight:400;color:var(--wine-2);font-size:1.35rem;line-height:1;pointer-events:none}
.fl-top{top:12px;left:50%;transform:translateX(-50%)}
.fl-bottom{bottom:12px;left:50%;transform:translateX(-50%)}
.fl-right{right:14px;top:50%;transform:translateY(-50%)}
.fl-left{left:14px;top:50%;transform:translateY(-50%)}
.fl-b{position:absolute;left:0;top:0;padding:0;border:3px solid #fff;border-radius:50%;overflow:hidden;cursor:grab;background:var(--sand);
  box-shadow:0 6px 16px rgba(89,11,0,.18);transition:opacity .4s,filter .4s,box-shadow .2s,border-color .2s;will-change:transform;touch-action:manipulation}
.fl-b img{width:100%;height:100%;object-fit:cover;transform:scale(1.35);transition:transform .3s;pointer-events:none}
.fl-b:hover,.fl-b:focus-visible{border-color:var(--peach);box-shadow:0 10px 26px rgba(89,11,0,.3);z-index:3;outline:none}
.fl-b:hover img{transform:scale(1.6)}
.fl-b.grab{cursor:grabbing;z-index:4;border-color:var(--wine)}
.fl-b.off{opacity:.12;filter:grayscale(1);pointer-events:none}
.fl-tip{position:absolute;left:0;top:0;z-index:5;pointer-events:none;background:var(--wine);color:var(--cream);padding:7px 14px;border-radius:12px;white-space:nowrap;
  display:flex;gap:10px;align-items:baseline;box-shadow:0 8px 20px rgba(0,0,0,.2);font-size:.95rem}
.fl-tip span{color:var(--peach);font-weight:700}
@media (max-width:760px){
  .fl-stage{height:auto;aspect-ratio:3/4;min-height:0;max-height:none}
  .fl-lab{font-size:1.25rem}
}

/* ---------- 3D Carmel map ---------- */
.map{position:relative;min-height:520px}
.map .map3d{position:absolute;inset:0;height:auto}
.map3d .maplibregl-ctrl-attrib{font-size:10px}
.map3d-ui{position:absolute;bottom:14px;right:14px;left:14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;pointer-events:none;z-index:2}
.m3-btn{pointer-events:auto;border:0;border-radius:999px;padding:10px 18px;font:inherit;font-weight:700;cursor:pointer;background:var(--wine);color:var(--cream);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.m3-btn--peach{background:var(--peach);color:var(--wine)}
.m3-btn:disabled{opacity:.6;cursor:progress}
.m3-note{pointer-events:auto;margin:0;background:rgba(255,255,255,.94);color:var(--wine);padding:8px 14px;border-radius:12px;font-weight:700;font-size:.92rem;box-shadow:0 6px 18px rgba(0,0,0,.15)}
.m3-pin{display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));cursor:pointer}
.m3-pin b{background:var(--wine);color:var(--cream);font-family:'mikhmoret',sans-serif;font-size:1.05rem;padding:7px 14px 6px;border-radius:12px;white-space:nowrap;line-height:1.1;text-align:center}
.m3-pin b small{display:block;font-family:'SimplerPro',sans-serif;font-size:.62rem;letter-spacing:.2em;color:var(--peach)}
.m3-pin i{width:2px;height:34px;background:var(--wine)}
.m3-pin s{width:14px;height:14px;border-radius:50%;background:var(--peach);border:3px solid var(--wine);margin-top:-2px;animation:ping2 2s ease-out infinite}
@keyframes ping2{0%{box-shadow:0 0 0 0 rgba(117,23,10,.5)}100%{box-shadow:0 0 0 18px rgba(117,23,10,0)}}
.m3-you{width:16px;height:16px;border-radius:50%;background:#2b7de9;border:3px solid #fff;box-shadow:0 0 0 6px rgba(43,125,233,.25)}

/* ---------- scroll story: how a rugelach is born ---------- */
.story{background:var(--sand);padding-top:70px}
.story-head{text-align:center}
.story-track{height:calc(7 * 85vh);position:relative}
.story-sticky{position:sticky;top:76px;height:calc(100vh - 76px);display:flex;align-items:center;overflow:hidden}
.story-in{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center;width:100%}
.story-visual{display:flex;flex-direction:column;align-items:center;gap:18px}
.story-stage{position:relative;width:min(68vh,540px);aspect-ratio:1;border-radius:32px;overflow:hidden;box-shadow:0 30px 60px rgba(89,11,0,.18);background:#f3e6da}
.sf{position:absolute;inset:0;will-change:clip-path,transform}
.sf svg,.sf img{width:100%;height:100%;display:block;object-fit:cover}
.story-dots{display:flex;gap:8px}
.story-dots i{width:28px;height:4px;border-radius:2px;background:var(--beige);transition:background .4s}
.story-dots i.on{background:var(--wine)}
.story-caps{position:relative;min-height:320px}
.sc{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(24px);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.sc.on{opacity:1;transform:none;pointer-events:auto}
.sc-n{font-weight:700;letter-spacing:.2em;color:var(--wine-2);font-size:.85rem}
.sc h3{font-size:clamp(2.4rem,5vw,4rem);margin:.15em 0 .25em}
.sc p{font-size:1.25rem;max-width:440px;margin:0;color:var(--ink-2)}
.sc-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
[data-mood=night] .story,[data-mood=closed] .story{background:#3a0f07}
[data-mood=night] .story h2,[data-mood=closed] .story h2,[data-mood=night] .sc h3,[data-mood=closed] .sc h3{color:var(--cream)}
[data-mood=night] .sc p,[data-mood=closed] .sc p{color:#e9d6cc}
[data-mood=night] .sc-n,[data-mood=closed] .sc-n,[data-mood=night] .story .script,[data-mood=closed] .story .script{color:var(--peach)}
[data-mood=night] .story-dots i,[data-mood=closed] .story-dots i{background:rgba(255,255,255,.2)}
[data-mood=night] .story-dots i.on,[data-mood=closed] .story-dots i.on{background:var(--peach)}
[data-mood=night] .sc .btn-line,[data-mood=closed] .sc .btn-line{border-color:var(--cream);color:var(--cream)}
@media (max-width:760px){
  .story{padding-top:50px}
  .story-sticky{top:76px;height:calc(100vh - 76px);align-items:flex-start;padding-top:18px}
  .story-in{grid-template-columns:1fr;gap:18px}
  .story-visual{order:-1}
  .story-stage{width:min(84vw,46vh);border-radius:24px}
  .story-caps{min-height:220px;text-align:center}
  .sc p{font-size:1.05rem;margin:0 auto}
  .sc-cta{justify-content:center}
}

/* ---------- 3D dish ring (ring.js) ---------- */
.ring-on [data-featured]{display:none}
.ring{--rw:250px;--rh:330px;margin:0 auto}
.ring-on .ring-ui{margin-top:7px}
.ring-on .center{margin-top:16px}   /* the hint sits halfway between the dishes and the button */
.ring-stage{position:relative;height:calc(var(--rh) + 140px);display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none;overflow:hidden;margin:0 -20px}
.ring-stage.grab{cursor:grabbing}
.ring-spin{position:relative;width:var(--rw);height:var(--rh);transform-style:preserve-3d;will-change:transform}
.rc{position:absolute;inset:0;transform-style:preserve-3d;transition:opacity .2s}
.rc-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.rc.flipped .rc-in{transform:rotateY(180deg)}
.rc-front,.rc-back{position:absolute;inset:0;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 18px 40px rgba(89,11,0,.18)}
.rc-front img{width:100%;height:72%;object-fit:cover;pointer-events:none}
.rc-cap{display:flex;flex-direction:column;gap:4px;padding:12px 16px}
.rc-cap b{font-size:1.02rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rc-cap span{color:var(--wine);font-weight:700}
.rc.front .rc-front{box-shadow:0 26px 60px rgba(89,11,0,.32),0 0 0 3px var(--peach)}
.rc-back{transform:rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;visibility:hidden;padding:20px 18px;display:flex;flex-direction:column;gap:8px;background:var(--wine);color:var(--cream);text-align:start}
.rc.flipped .rc-back{visibility:visible}
.rc.flipped .rc-front{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.rc-cat{font-size:.72rem;letter-spacing:.14em;color:var(--peach);font-weight:700}
.rc-back h3{color:var(--cream);font-size:1.5rem;margin:0}
.rc-back p{margin:0;font-size:.9rem;opacity:.9;flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical}
.rc-back strong{color:var(--peach);font-size:1.3rem}
.rc-actions{display:flex;flex-direction:column;gap:8px}
.rc-actions .btn{justify-content:center;padding:10px 16px;font-size:.92rem}
.rc-actions .btn-wine{background:var(--peach);color:var(--wine)}
.rc-actions .btn-line{border-color:var(--cream);color:var(--cream)}
.ring-ui{display:flex;align-items:center;justify-content:center;gap:16px}
.ring-hint{margin:0;flex:0 1 420px;color:var(--ink-2);font-size:.92rem;text-align:center;text-wrap:balance}
.ring-arrow{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--wine);background:transparent;color:var(--wine);font-size:1.2rem;cursor:pointer;flex:none;transition:background .2s,color .2s}
.ring-arrow:hover{background:var(--wine);color:var(--cream)}
[data-mood=night] .ring-hint,[data-mood=closed] .ring-hint{color:#e9d6cc}
[data-mood=night] .ring-arrow,[data-mood=closed] .ring-arrow{border-color:var(--peach);color:var(--peach)}
@media (max-width:760px){
  .ring-stage{height:calc(var(--rh) + 90px)}
  .ring-on .ring-ui{margin-top:30px}
  .ring-on .center{margin-top:28px}
  .ring-hint{font-size:.82rem}
  .rc-back h3{font-size:1.2rem}
  .rc-back p{-webkit-line-clamp:4;font-size:.85rem}
}


/* booking: big group suggests an event */
.bk-group{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;padding:14px 16px;border-radius:16px;background:var(--sand);border:1px dashed var(--peach);animation:upIn .4s ease both}
.bk-group-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--wine);color:var(--peach);flex:none}
.bk-group-ic svg{width:26px;height:26px}
.bk-group p{margin:0;flex:1;min-width:200px;color:var(--ink);line-height:1.45}
.bk-group p b{color:var(--wine)}
.bk-group p span{color:var(--ink-2);font-size:.92rem}
.bk-group .btn{padding:9px 18px;font-size:.92rem}
.plates.many .plate svg{width:34px;height:23px}
.plates.lots .plate svg{width:27px;height:18px}

/* story: one continuous preparation (real photos) */
.story.morphing .story-track{height:760vh}
.story-stage.morph{background:radial-gradient(ellipse 85% 85% at 50% 38%,#fbf4ec 0%,#f4e6d8 55%,#ecdbcc 100%)}
.ml{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;will-change:transform,opacity;pointer-events:none;opacity:0;visibility:hidden;user-select:none}
.ml-final{-webkit-mask-image:radial-gradient(ellipse 75% 72% at 50% 48%,#000 72%,#0000 100%);mask-image:radial-gradient(ellipse 75% 72% at 50% 48%,#000 72%,#0000 100%)}

/* story: real-time 3D version (rugelach3d.js) */
.story.three{background:#2a180f;padding-top:80px}   /* = the 3D scene background (rugelach3d.js), so it is one colour */
.story.three .story-head h2{color:var(--cream)}
.story-head h2{font-size:clamp(3rem,7vw,5.6rem);line-height:1.05}
.story-head .script{font-size:clamp(1.5rem,2.6vw,2rem)}
.story.three .story-head .script{color:var(--peach)}
.story.three .story-track{height:900vh}
.story.three .story-sticky{display:block;padding:0}
.story-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.story-final{position:absolute;left:50%;top:58%;width:min(70vh,92vw);transform:translate(-50%,-50%);opacity:0;pointer-events:none;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.story.three .story-in{position:absolute;inset:0;display:block;pointer-events:none;max-width:none;padding:0}
.story.three .story-visual{position:absolute;inset:auto 0 22px 0;display:flex;justify-content:center}
.story.three .story-stage{display:none}
.story.three .story-dots i{background:rgba(255,255,255,.18)}
.story.three .story-dots i.on{background:var(--peach)}
.story.three .story-caps{position:absolute;top:28px;left:50%;transform:translateX(-50%);width:min(680px,92vw);min-height:0;text-align:center}
.story.three .sc{inset:0 0 auto 0}
.story.three .sc h3{color:var(--cream);font-size:clamp(2rem,4.4vw,3.4rem);text-shadow:0 4px 30px rgba(0,0,0,.6)}
.story.three .sc p{color:#ead8cc;margin:0 auto;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.story.three .sc-n{color:var(--peach)}
.story.three .sc-cta{justify-content:center;pointer-events:auto}
.story.three .sc .btn-line{border-color:var(--cream);color:var(--cream)}
.story.three .sc.on{pointer-events:none}
.story.three .sc.on .sc-cta{pointer-events:auto}
@media (max-width:760px){
  .story.three .story-caps{top:16px}
  .story.three .sc p{font-size:.98rem}
}

/* end-of-story popup */
.rug-pop{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;background:rgba(20,8,4,.55);backdrop-filter:blur(4px);opacity:0;transition:opacity .3s}
.rug-pop.on{opacity:1}
.rp-card{position:relative;width:min(440px,100%);background:var(--cream);border-radius:24px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45);transform:translateY(24px) scale(.96);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.rug-pop.on .rp-card{transform:none}
.rp-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.rp-body{padding:18px 22px 22px;text-align:start}
.rp-body .script{margin:0;font-size:1.4rem}
.rp-body h3{margin:.1em 0 .3em;font-size:1.9rem}
.rp-body p{margin:0;color:var(--ink-2)}
.rp-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.rp-foot strong{font-size:1.5rem;color:var(--wine)}
.rp-x{position:absolute;top:12px;left:12px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.92);cursor:pointer;font-size:1rem;z-index:2}

/* 3D story: the last step is the popup, not text over the scene */
.story.three .sc:last-child p,.story.three .sc:last-child .sc-cta{display:none}

/* respect people who ask for less motion */
@media (prefers-reduced-motion: reduce){
  .intro{display:none}
  .hero-bg,.hero-light,.lb-media img,.mood-ic .rays,.fx,.fx i,.live-breeze.inview img,.panel.turn,.rise.risen,.plate.new{animation:none!important}
  .rise:not(.risen){opacity:1}
}

/* ---------- jobs + contact ---------- */
.jobs-title{font-size:1.7rem;margin:0 0 16px}
.chk-group{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.chk-group legend{font-weight:700;font-size:.92rem;margin-bottom:8px;padding:0}
.ev-form label.chk{flex-direction:row;gap:0;font-weight:400}
.chk input{position:absolute;opacity:0;pointer-events:none}
.chk span{display:inline-block;padding:9px 16px;border:1.5px solid var(--beige);border-radius:999px;background:var(--cream);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.chk input:checked+span{background:var(--wine);border-color:var(--wine);color:var(--cream)}
.chk input:focus-visible+span{outline:2px solid var(--wine);outline-offset:2px}
.form-note{margin:0;font-size:.88rem;color:var(--ink-2)}
.ct-cards{display:grid;grid-template-columns:1fr;gap:14px}
.ct{display:flex;align-items:center;gap:16px;background:#fff;border-radius:var(--r);padding:22px;box-shadow:var(--shadow);text-decoration:none;color:inherit;transition:transform .2s}
a.ct:hover{transform:translateY(-2px)}
a.ct:hover .ev-ic{background:var(--wine);color:var(--peach)}
.ct .ev-ic{flex:none}
.ct h3{font-size:1.4rem;margin:0 0 2px}
.ct p{margin:0;color:var(--ink-2)}
.ct [data-phone]{direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.social--ct{margin-top:6px}
.social--ct a{background:var(--sand);color:var(--wine)}
.social--ct a:hover{background:var(--wine);color:var(--peach)}
.footer .muted a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.tabs a{white-space:nowrap}
@media (min-width:1181px) and (max-width:1480px){
  .topbar .social{display:none}   /* the icons are in the footer too; the menu needs the room */
  .tabs a{padding:9px 12px;font-size:.98rem}
  .tabs a.tab-cta{margin-inline-start:2px}
}
@media (max-width:760px){
  .ct{padding:18px}
  /* on phones each role is one compact row: icon beside the text */
  .jobs .ev-types{grid-template-columns:1fr;gap:12px}
  .jobs .ev{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center;padding:16px 18px}
  .jobs .ev .ev-ic{grid-row:span 2;width:56px;height:56px}
  .jobs .ev .ev-ic svg{width:32px;height:32px}
  .jobs .ev h3{margin:0;font-size:1.25rem}
}

/* ---------- keyboard focus (accessibility) ---------- */
:focus-visible{outline:3px solid var(--wine-2);outline-offset:3px;border-radius:6px}
.topbar :focus-visible,.footer :focus-visible,.story :focus-visible,.featured :focus-visible{outline-color:var(--peach)}

/* ---------- footer legal links ---------- */
.foot-legal{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;margin-top:22px;padding-top:16px;border-top:1px solid rgba(249,239,234,.18);font-size:.9rem}
.foot-legal a{color:var(--peach);text-decoration:none}
.foot-legal a:hover,.foot-legal a[aria-current]{text-decoration:underline;text-underline-offset:3px}

/* ---------- inner pages: terms, privacy, accessibility, site map ---------- */
.crumbs{font-size:.88rem;color:var(--ink-2);margin-bottom:14px}
.crumbs a{color:var(--wine-2)}
.legal{max-width:860px;padding:44px 20px 70px}
.legal h2{font-size:1.65rem;margin:34px 0 10px}
.legal p,.legal li{font-size:1.04rem;line-height:1.75}
.legal ul{padding-inline-start:22px;margin:8px 0}
.legal li{margin-bottom:6px}
.legal li::marker{color:var(--wine-2)}
.legal a{color:var(--wine-2)}
.legal-upd{color:var(--ink-2);font-size:.9rem;margin:0 0 16px}
.legal-lead{font-size:1.15rem !important;background:#fff;border-radius:var(--r);padding:20px 24px;box-shadow:var(--shadow)}
.legal-card{background:#fff;border-radius:var(--r);padding:22px 26px;box-shadow:var(--shadow);margin-top:14px}
.legal-card p{margin:4px 0}
.fill{background:#fff3c4;color:#6b4b00;border:1px dashed #d9a400;border-radius:6px;padding:0 6px;font-size:.92em}
.smap{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.smap section{background:#fff;border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.smap h2{margin:0 0 10px;font-size:1.5rem}
.smap ul{list-style:none;padding:0;margin:0}
.smap li{margin:0;border-bottom:1px solid var(--sand)}
.smap li:last-child{border:0}
.smap a{display:block;padding:10px 0;text-decoration:none;font-weight:700;color:var(--ink)}
.smap a:hover{color:var(--wine-2)}
@media (max-width:760px){
  .smap{grid-template-columns:1fr}
  .legal{padding:30px 20px 50px}
  .legal h2{font-size:1.4rem}
  .legal-lead{padding:16px 18px}
}

[data-phone]{direction:ltr;unicode-bidi:isolate;white-space:nowrap}
@media (max-width:760px){
  .footer{padding-bottom:96px}   /* keep the last links clear of the WhatsApp button */
}

/* ---------- moving between pages: a soft cross-fade, the header stays put ---------- */
@view-transition{navigation:auto}
.topbar{view-transition-name:topbar}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
@media (prefers-reduced-motion: reduce){@view-transition{navigation:none}}

/* what each phone line is for */
.line-for{display:block;margin:2px 0 0;font-size:.86rem;color:var(--ink-2);opacity:.85}
.vcard .line-for{margin-top:-6px}
.ct [data-wa-num],.vcard [data-wa-num]{direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.ct [data-email]{direction:ltr;unicode-bidi:isolate;word-break:break-all}

/* phone, WhatsApp and email numbers read left-to-right but sit on the right, like the rest of the Hebrew text */
.ct p[data-phone],.ct p[data-wa-num],.ct p[data-email]{text-align:right}

/* ---------- drone film on the visit page ---------- */
.drone{padding:0 20px 70px}
.drone-frame{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:#160c08;aspect-ratio:16/9}
.drone-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer}
.drone-cap{position:absolute;inset:auto 0 0 0;padding:60px 28px 22px;background:linear-gradient(to top,rgba(22,8,4,.85),rgba(22,8,4,0));color:var(--cream);pointer-events:none}
.drone-cap .script{color:var(--peach);margin:0}
.drone-cap h2{color:var(--cream);margin:0;font-size:clamp(1.6rem,3.4vw,2.6rem)}
.drone-btn{position:absolute;top:50%;left:50%;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;border:0;background:rgba(244,182,153,.92);color:var(--wine);display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s,transform .2s;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.drone-btn svg{width:34px;height:34px;margin-left:4px}
.drone-btn:hover{transform:scale(1.06)}
.drone.paused .drone-btn{opacity:1;pointer-events:auto}
.drone.ended .drone-btn svg{margin-left:0}
@media (max-width:760px){
  .drone{padding:0 20px 50px}
  .drone-cap{padding:40px 18px 14px}
  .drone-btn{width:62px;height:62px;margin:-31px 0 0 -31px}
}
/* the title steps aside a few seconds into the film, so the zoom onto the branch is clear; it returns when paused */
.drone-cap{transition:opacity .8s}
.drone:not(.paused) .drone-cap{opacity:0;transition-delay:2.5s}

/* the drone film on the home page, between the opening photo and the quick cards */
.drone--home{padding:40px 20px 0}
.drone--home + .quick{margin-top:30px}
@media (max-width:760px){.drone--home{padding:24px 20px 0}.drone--home + .quick{margin-top:20px}}

/* ---------- copyright + who built the site ---------- */
.foot-credit{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;margin-top:14px;font-size:.82rem;color:rgba(249,239,234,.7)}
.foot-credit a{color:var(--peach);text-decoration:none;font-weight:700}
.foot-credit a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.foot-credit{flex-direction:column;align-items:center;text-align:center}}
.footer{padding-bottom:100px}   /* the credit line stays clear of the WhatsApp button on every screen */
.foot-credit{align-items:center}
.foot-credit .by{display:inline-flex;align-items:center;gap:10px}
.by-badge{display:inline-block;line-height:0;border-radius:999px;overflow:hidden;box-shadow:0 0 0 1px rgba(249,239,234,.14);transition:transform .2s,box-shadow .2s}
.by-badge img{display:block;width:126px;height:auto;border-radius:999px}
.by-badge:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(244,182,153,.5),0 6px 16px rgba(0,0,0,.3)}

/* ---------- rugelach story: step buttons + scroll hint ---------- */
.story-nav{display:flex;align-items:center;justify-content:center;gap:14px;pointer-events:auto}
.story-dots button{width:28px;height:26px;padding:0;border:0;background:none;cursor:pointer;display:grid;align-items:center}
.story-dots button i{display:block;width:28px;height:4px;border-radius:2px}
.story-dots button:hover i{transform:scaleY(1.6)}
.story-dots i{transition:background .4s,transform .2s}
.sn-btn{font:inherit;font-size:.9rem;font-weight:700;padding:8px 16px;border-radius:999px;border:1.5px solid var(--wine);background:transparent;color:var(--wine);cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,opacity .3s}
.sn-btn:hover{background:var(--wine);color:var(--cream)}
.story.three .sn-btn,[data-mood=night] .sn-btn,[data-mood=closed] .sn-btn{border-color:var(--peach);color:var(--peach);background:rgba(22,8,4,.35)}
.story.three .sn-btn:hover,[data-mood=night] .sn-btn:hover,[data-mood=closed] .sn-btn:hover{background:var(--peach);color:var(--wine)}
.story.at-first .sn-prev,.story.at-last .sn-next{opacity:0;pointer-events:none}

.story-hint{position:absolute;left:clamp(14px,3vw,44px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--wine);pointer-events:none;transition:opacity .5s;z-index:3}
.story.three .story-hint,[data-mood=night] .story-hint,[data-mood=closed] .story-hint{color:var(--peach)}
.sh-txt{writing-mode:vertical-rl;font-size:.78rem;font-weight:700;letter-spacing:.18em;opacity:.85}
.sh-line{position:relative;width:2px;height:110px;border-radius:2px;background:currentColor;opacity:.3;overflow:visible}
.sh-line i{position:absolute;left:50%;top:0;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor;animation:shDrop 1.9s cubic-bezier(.55,0,.35,1) infinite}
.sh-arrow{width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-6px;opacity:.8;animation:shNudge 1.9s ease-in-out infinite}
@keyframes shDrop{0%{top:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}
@keyframes shNudge{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(5px) rotate(45deg)}}
.story.at-last .story-hint{opacity:0}
@media (max-width:760px){
  .story-nav{gap:8px}
  .sn-btn{padding:7px 11px;font-size:.8rem}
  .story-dots{gap:4px}
  .story-dots button,.story-dots button i{width:18px}
  .story-hint{left:8px;gap:6px}
  .sh-line{height:70px}
  .sh-txt{font-size:.68rem}
}
@media (prefers-reduced-motion: reduce){.sh-line i,.sh-arrow{animation:none}.sh-line i{top:40%}}
@media (max-width:760px){
  .story.three .story-visual{inset:auto 0 92px 0}   /* above the WhatsApp button */
  .story-hint{opacity:.75}
}
@media (max-width:760px){.story.three .story-hint{top:33%}}   /* on phones: above the board, on the dark table */

/* skip to the finished rugelach: small text over an arrow head */
.story-visual{flex-direction:column;align-items:center}
.story.three .story-visual{flex-direction:column;align-items:center;gap:10px}
.story-skip{display:flex;flex-direction:column;align-items:center;gap:2px;font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.04em;background:none;border:0;padding:4px 10px;color:var(--wine);cursor:pointer;pointer-events:auto;opacity:.85;transition:opacity .3s}
.story-skip:hover{opacity:1}
.story-skip i{width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);animation:shNudge 1.6s ease-in-out infinite}
.story.three .story-skip,[data-mood=night] .story-skip,[data-mood=closed] .story-skip{color:var(--peach)}
.story.at-last .story-skip{opacity:0;pointer-events:none}
@media (prefers-reduced-motion: reduce){.story-skip i{animation:none}}

/* the top of the 3D scene melts into the header colour, so "איך נולד רוזלך" and the animation read as one background on every screen size
   (on wide screens the camera shows more of the lighter table near the top) */
.story.three .story-sticky::after{content:"";position:absolute;inset:0 0 auto 0;height:32%;background:linear-gradient(#2a180f 0%,rgba(42,24,15,.85) 35%,rgba(42,24,15,0) 100%);pointer-events:none;z-index:1}
.story.three .story-in{z-index:2}

/* ---------- floating accessibility toolbar (a11y.js) ---------- */
.a11y{position:fixed;right:20px;bottom:20px;z-index:150;font-family:'SimplerPro',Assistant,Arial,sans-serif;font-size:15px;line-height:1.3;direction:rtl}
.a11y-btn{width:58px;height:58px;border-radius:50%;border:3px solid var(--cream);background:#1f4fb4;color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .2s}
.a11y-btn:hover{transform:scale(1.08)}
.a11y-btn:focus-visible,.a11y button:focus-visible,.a11y a:focus-visible{outline:3px solid #ffbf47;outline-offset:2px}
.a11y-panel{position:absolute;right:0;bottom:70px;width:320px;max-width:calc(100vw - 40px);max-height:calc(100vh - 110px);overflow-y:auto;background:#fff;color:#202020;border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.3);padding:16px}
.a11y-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.a11y-head h2{font-family:'SimplerPro',Assistant,Arial,sans-serif;font-size:19px;font-weight:700;color:#1f4fb4;margin:0}
.a11y-close{width:36px;height:36px;border-radius:50%;border:0;background:#eef1f8;color:#202020;display:grid;place-items:center;cursor:pointer}
.a11y-fs{display:flex;align-items:center;gap:8px;background:#eef1f8;border-radius:12px;padding:8px 10px;margin-bottom:10px}
.a11y-fs span{font-weight:700;margin-inline-end:auto}
.a11y-fs button{width:40px;height:36px;border-radius:10px;border:1.5px solid #1f4fb4;background:#fff;color:#1f4fb4;font:inherit;font-weight:700;cursor:pointer}
.a11y-fs button:disabled{opacity:.4;cursor:default}
.a11y-fs-val{min-width:44px;text-align:center;font-weight:700}
.a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a11y-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:78px;padding:10px 6px;border-radius:12px;border:1.5px solid #d5dbe8;background:#fff;color:#202020;font:inherit;font-size:14px;font-weight:700;cursor:pointer;text-align:center}
.a11y-opt:hover{border-color:#1f4fb4}
.a11y-opt[aria-pressed="true"]{background:#1f4fb4;border-color:#1f4fb4;color:#fff}
.a11y-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid #e3e6ee}
.a11y-reset{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:#202020;font:inherit;font-weight:700;cursor:pointer;padding:6px 0}
.a11y-foot a{color:#1f4fb4;font-weight:700}
@media (max-width:600px){.a11y{right:14px;bottom:14px}.a11y-btn{width:52px;height:52px}.a11y-panel{bottom:64px}}
@media print{.a11y{display:none}}

/* text size */
html.a11y-fs-1{font-size:115%}
html.a11y-fs-2{font-size:130%}
html.a11y-fs-3{font-size:145%}

/* high contrast */
html.a11y-contrast body,html.a11y-contrast body *:not(svg):not(svg *):not(img):not(video):not(canvas):not(.a11y):not(.a11y *){background-color:#000!important;color:#fff!important;border-color:#fff!important;text-shadow:none!important;box-shadow:none!important}
html.a11y-contrast body a:not(.a11y *),html.a11y-contrast body a:not(.a11y *) *{color:#ffeb3b!important}
html.a11y-contrast .brand-logo,html.a11y-contrast .foot-logo{filter:brightness(0) invert(1)!important}

/* grayscale (filter on the root keeps fixed elements in place) */
html.a11y-gray{filter:grayscale(1)}

/* highlighted links */
html.a11y-links a:not(.a11y *){text-decoration:underline!important;text-underline-offset:3px;outline:2px dashed currentColor;outline-offset:2px}

/* highlighted headings */
html.a11y-headings :is(h1,h2,h3,h4):not(.a11y *){outline:3px solid #1f4fb4;outline-offset:4px;border-radius:2px}

/* readable font */
html.a11y-font body,html.a11y-font body *:not(svg):not(svg *){font-family:Arial,Helvetica,sans-serif!important;letter-spacing:normal}

/* text spacing (WCAG 1.4.12 values) */
html.a11y-spacing body *:not(.a11y):not(.a11y *){line-height:1.6!important;letter-spacing:.06em!important;word-spacing:.16em!important}
html.a11y-spacing p:not(.a11y *){margin-bottom:1.5em}

/* stop animations */
html.a11y-still .intro{display:none}
html.a11y-still *,html.a11y-still *::before,html.a11y-still *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.a11y-still .rise:not(.risen){opacity:1}

/* big cursor */
html.a11y-cursor,html.a11y-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 10.5-6.4 1.4L16.4 21l-3 1.4-3.1-7.2L5 19.6z' fill='%23000' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 6 2,auto!important}