/* ============================================================
   בינון — tokens.  --accent is injected inline per-page from content.json.
   ============================================================ */
:root{
  --paper:#F5F2EC;
  --paper-2:#EDE8E0;
  --card:#FCFAF7;
  --ink:#16211C;
  --ink-2:#43514A;
  --ink-3:#77857D;
  --line:#DDD6CB;
  --accent:#2F5C4C;
  --contact-bg:#16211C;
  --contact-fg:#F5F2EC;
  --wa:#25D366;
  --shadow:0 1px 2px rgba(22,33,28,.05), 0 14px 30px -14px rgba(22,33,28,.18);
  --maxw:1160px;
  --r:16px;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0D1512;
    --paper-2:#121D18;
    --card:#15211C;
    --ink:#EFEDE7;
    --ink-2:#B2BEB7;
    --ink-3:#7F8D85;
    --line:#22322B;
    --accent:#6FA891;
    --contact-bg:#070C0A;
    --contact-fg:#EFEDE7;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 16px 34px -16px rgba(0,0,0,.65);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:92px; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Assistant",system-ui,"Segoe UI",Arial,sans-serif;
  font-size:clamp(16px,.4vw + 15px,18px); line-height:1.75;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{font-family:"Heebo",system-ui,Arial,sans-serif; line-height:1.15; margin:0; font-weight:900; letter-spacing:-.02em}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
.wrap{width:min(100% - 40px, var(--maxw)); margin-inline:auto}
.skip{position:absolute; inset-inline-start:-9999px; top:0; z-index:200; background:var(--ink); color:var(--paper); padding:12px 20px}
.skip:focus{inset-inline-start:16px}

/* ---------------------------------------------------------------- header */
.hdr{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--paper) 84%, transparent);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-block-end:1px solid transparent; transition:border-color .25s ease;
}
.hdr.is-stuck{border-block-end-color:var(--line)}
.hdr__in{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:76px}
.brand{display:inline-flex; align-items:center; gap:11px}
.brand__mark{width:30px; height:30px; flex:none}
.brand__txt{display:flex; flex-direction:column; line-height:1.1}
.brand__name{font-family:"Heebo",sans-serif; font-weight:900; font-size:1.28rem; letter-spacing:-.02em}
.brand__tag{font-size:.72rem; color:var(--ink-3); font-weight:600}

.nav{display:flex; align-items:center; gap:4px}
.nav a{padding:9px 13px; border-radius:999px; font-size:.95rem; font-weight:600; color:var(--ink-2); transition:color .18s, background .18s}
.nav a:hover{color:var(--ink); background:var(--paper-2)}
.nav__cta{background:var(--accent) !important; color:#fff !important; padding-inline:20px !important; margin-inline-start:8px}
.nav__cta:hover{opacity:.88}
@media (prefers-color-scheme: dark){ .nav__cta{color:#0D1512 !important} }

.burger{display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:transparent; cursor:pointer; padding:0; flex-direction:column; align-items:center; justify-content:center; gap:5px}
.burger span{display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (max-width:900px){
  .burger{display:flex}
  .nav{position:absolute; inset-inline:0; top:100%; flex-direction:column; align-items:stretch; gap:2px;
    background:var(--paper); border-block-end:1px solid var(--line); padding:12px 20px 20px;
    visibility:hidden; opacity:0; transform:translateY(-8px);
    transition:opacity .2s, transform .2s, visibility .2s}
  .nav.is-open{visibility:visible; opacity:1; transform:none}
  .nav a{padding:13px 14px; font-size:1.05rem}
  .nav__cta{text-align:center; margin:8px 0 0}
}

/* ------------------------------------------------------------------ hero */
.hero{position:relative; padding-block:clamp(64px,11vw,132px) clamp(56px,9vw,112px); overflow:hidden}
.hero__in{position:relative; z-index:1; max-width:880px}
.hero__h{font-size:clamp(2.3rem,6.2vw,4.4rem); margin-block:16px 24px}
.hero__h em{font-style:normal; color:var(--accent)}
.hero__p{font-size:clamp(1.05rem,1.5vw,1.28rem); color:var(--ink-2); max-width:58ch}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-block-start:36px}
.hero__glow{position:absolute; z-index:0; inset-block-start:-34%; inset-inline-start:-12%;
  width:min(780px,92vw); aspect-ratio:1; pointer-events:none; filter:blur(16px);
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent) 0%, transparent 68%)}
.bsd{position:absolute; top:14px; inset-inline-start:24px; font-size:.78rem; color:var(--ink-3); z-index:2}

.eyebrow{font-size:.82rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:14px 30px; border-radius:999px;
  font-weight:600; font-size:1rem; border:1px solid transparent;
  transition:transform .18s, opacity .18s, background .18s, border-color .18s}
.btn:hover{transform:translateY(-2px)}
.btn--solid{background:var(--accent); color:#fff; box-shadow:var(--shadow)}
.btn--solid:hover{opacity:.9}
.btn--ghost{border-color:var(--line); color:var(--ink)}
.btn--ghost:hover{border-color:var(--accent); background:var(--paper-2)}
@media (prefers-color-scheme: dark){ .btn--solid{color:#0D1512} }

/* -------------------------------------------------------------- sections */
.section{padding-block:clamp(60px,8vw,116px)}
.section--alt{background:var(--paper-2); border-block:1px solid var(--line)}
.label{font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-block-end:12px}
.h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
.sec-head{max-width:46ch; margin-block-end:clamp(36px,4.5vw,60px)}
.note{margin-block-start:28px; font-size:.9rem; color:var(--ink-3); max-width:70ch}

/* adaptive grids — driven by item count in template.js */
.grid-1{grid-template-columns:1fr}
.grid-2c{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){ .grid-2c,.grid-3,.grid-4{grid-template-columns:1fr} }
@media (min-width:901px) and (max-width:1100px){ .grid-3{grid-template-columns:repeat(2,1fr)} }

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:start}
@media (max-width:900px){ .grid-2{grid-template-columns:1fr} }

.cards{display:grid; gap:18px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:28px 26px;
  transition:transform .22s, box-shadow .22s, border-color .22s}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--accent) 45%, var(--line))}
.card__h{font-size:1.16rem; margin-block-end:8px}
.card__p{color:var(--ink-2); font-size:.97rem}

.prose p{color:var(--ink-2)}
.ticks{margin-block-start:22px; display:grid; gap:12px}
.ticks li{position:relative; padding-inline-start:28px; color:var(--ink-2)}
.ticks li::before{content:""; position:absolute; inset-inline-start:0; top:11px; width:9px; height:9px;
  border-radius:50%; background:var(--accent)}

/* ---------------------------------------------------------------- models */
.mdls{display:grid; gap:22px}
.mdl{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .22s, box-shadow .22s, border-color .22s}
.mdl:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--accent) 45%, var(--line))}
.mdl.is-out{opacity:.72}
.mdl__media{position:relative}
.mdl__badge{position:absolute; top:12px; inset-inline-start:12px; z-index:2; background:var(--accent); color:#fff;
  font-size:.76rem; font-weight:700; padding:5px 12px; border-radius:999px}
.mdl__oos{position:absolute; top:12px; inset-inline-end:12px; z-index:2; background:var(--ink); color:var(--paper);
  font-size:.76rem; font-weight:700; padding:5px 12px; border-radius:999px}
.mdl__body{padding:24px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1}
.mdl__h{font-size:1.34rem}
.mdl__meta{display:flex; flex-wrap:wrap; gap:8px}
.mdl__meta span{font-size:.84rem; font-weight:600; color:var(--ink-2); background:var(--paper-2);
  border:1px solid var(--line); padding:3px 11px; border-radius:999px}
.mdl__desc{color:var(--ink-2); font-size:.97rem}
.mdl__price{font-family:"Heebo",sans-serif; font-weight:900; font-size:1.42rem; color:var(--accent); letter-spacing:-.02em}
.mdl__price span{font-family:"Assistant",sans-serif; font-weight:600; font-size:.85rem; color:var(--ink-3);
  letter-spacing:0; margin-inline-end:6px}
.mdl__feats{display:grid; gap:7px; margin-block-start:4px}
.mdl__feats li{position:relative; padding-inline-start:22px; font-size:.95rem; color:var(--ink-2)}
.mdl__feats li::before{content:""; position:absolute; inset-inline-start:0; top:10px; width:6px; height:6px;
  border-radius:50%; background:var(--accent)}

/* single model: image beside the text instead of stacked */
.grid-1 .mdl{flex-direction:row}
.grid-1 .mdl__media{flex:1 1 52%; min-width:0}
.grid-1 .mdl__body{flex:1 1 48%; padding:32px; justify-content:center}
@media (max-width:900px){ .grid-1 .mdl{flex-direction:column} }

/* --------------------------------------------------------------- gallery */
.gal__main{width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--paper-2)}
.ph{width:100%; aspect-ratio:4/3; display:grid; place-content:center; background:var(--paper-2);
  color:var(--ink-3); font-family:"Heebo",sans-serif; font-weight:700; border-block-end:1px solid var(--line)}
.gal__thumbs{display:flex; gap:6px; padding:6px; overflow-x:auto; scrollbar-width:thin; background:var(--paper-2)}
.gal__t{flex:0 0 68px; height:52px; padding:0; border:2px solid transparent; border-radius:8px;
  overflow:hidden; cursor:pointer; background:none; transition:border-color .18s, opacity .18s; opacity:.65}
.gal__t img{width:100%; height:100%; object-fit:cover}
.gal__t.is-on,.gal__t:hover{border-color:var(--accent); opacity:1}
.gal__vid{aspect-ratio:16/9; background:#000}
.gal__vid iframe,.gal__vid video{width:100%; height:100%; border:0; display:block}

/* ----------------------------------------------------------------- stats */
.stats{display:grid; grid-template-columns:repeat(var(--cols,4),1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-block-end:clamp(32px,4vw,52px)}
.stat{background:var(--card); padding:28px 22px; display:flex; flex-direction:column; gap:2px}
/* direction:ltr stops the RTL bidi algorithm reordering "14+" into "+14" */
.stat__n{font-family:"Heebo",sans-serif; font-size:clamp(1.5rem,2.8vw,2.15rem); font-weight:900;
  letter-spacing:-.03em; direction:ltr; text-align:right; unicode-bidi:isolate}
.stat__l{font-size:.88rem; color:var(--ink-3)}
@media (max-width:760px){ .stats{grid-template-columns:1fr 1fr} }

.points{display:grid; gap:2px; max-width:72ch}
.points li{position:relative; padding-block:15px; padding-inline-start:28px; color:var(--ink-2);
  border-block-end:1px solid var(--line)}
.points li::before{content:""; position:absolute; inset-inline-start:0; top:25px; width:8px; height:8px;
  border-radius:50%; background:var(--accent)}
.points li:last-child{border-block-end:0}

/* ----------------------------------------------------------------- steps */
.steps{display:grid; gap:18px}
.step{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:26px 24px}
.step__n{font-family:"Heebo",sans-serif; font-size:.8rem; font-weight:900; color:var(--accent);
  letter-spacing:.08em; display:block; margin-block-end:12px; direction:ltr; text-align:right}
.step__h{font-size:1.1rem; margin-block-end:6px}
.step__p{color:var(--ink-2); font-size:.94rem}

/* --------------------------------------------------------------- contact */
.contact{background:var(--contact-bg); color:var(--contact-fg)}
.contact .label{color:color-mix(in srgb, var(--contact-fg) 55%, transparent)}
.contact__h{font-family:"Heebo",sans-serif; font-weight:900; font-size:clamp(1.9rem,4.6vw,3.2rem); letter-spacing:-.025em}
.contact__p{margin-block-start:18px; max-width:52ch; color:color-mix(in srgb, var(--contact-fg) 72%, transparent)}
.contact__who{margin-block-start:26px; font-size:.92rem; color:color-mix(in srgb, var(--contact-fg) 55%, transparent)}
.links{display:flex; flex-wrap:wrap; gap:12px 28px; margin-block-start:38px; font-size:1.08rem; font-weight:600}
.links a{border-block-end:1px solid color-mix(in srgb, var(--contact-fg) 30%, transparent); padding-block-end:3px;
  transition:border-color .18s, color .18s}
.links a:hover{border-block-end-color:var(--accent); color:var(--accent)}
.links .wa{border:0; background:var(--wa); color:#042313; padding:10px 22px; border-radius:999px}
.links .wa:hover{opacity:.9; color:#042313}

.ftr{padding-block:26px; border-block-start:1px solid var(--line); font-size:.88rem; color:var(--ink-3)}
.ftr__in{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* floating whatsapp */
.fab{position:fixed; inset-block-end:20px; inset-inline-end:20px; z-index:90; width:56px; height:56px;
  border-radius:50%; background:var(--wa); color:#042313; display:grid; place-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.25); transition:transform .2s}
.fab:hover{transform:scale(1.07)}

/* ---------------------------------------------------------------- reveal */
.reveal{opacity:0; transform:translateY(16px);
  transition:opacity .6s ease var(--d,0ms), transform .6s cubic-bezier(.2,.7,.3,1) var(--d,0ms)}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .reveal{opacity:1; transform:none}
}