/* Craftex main navigation — approved prototype v12 (Sviat, 14 Oct 2026). Brand fonts only: Cera Pro 400/500. */
#cx-hdr{--cx-ink:#1e1e1e;--cx-muted:#5c6157;--cx-line:#e6e6e6;--cx-panel:#f5f5f5;--cx-sage:#b9d194;--cx-sage-ink:#46601f;--cx-sage-soft:#eef4e3;
  --cx-f:'Cera Pro','Cera-Pro',Arial,sans-serif;
  position:sticky;top:0;z-index:990;background:#fff;font-family:var(--cx-f);color:var(--cx-ink);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
#cx-hdr *{box-sizing:border-box}
#cx-hdr [hidden]{display:none!important}
#cx-hdr a:focus-visible,#cx-hdr button:focus-visible{outline:2px solid var(--cx-sage-ink);outline-offset:2px}
.cx-in{max-width:1200px;margin:0 auto;padding:0 20px}
.cx-util{background:var(--cx-ink);color:#fff;font-size:13px}
.cx-util .cx-in{display:flex;justify-content:space-between;align-items:center;gap:12px}
.cx-util .cx-tel{color:#fff;padding:0 4px}
.cx-util a{color:var(--cx-sage);text-decoration:none;font-weight:500;display:inline-flex;align-items:center;min-height:44px}
.cx-util a:hover{text-decoration:underline}
.cx-bar{border-bottom:1px solid var(--cx-line)}
.cx-bar>.cx-in{display:flex;align-items:center;gap:20px;height:84px}
.cx-logo{display:flex;flex:none;align-items:center;min-height:44px}
.cx-logo img{width:222px;height:auto;display:block}
.cx-nav{display:flex;flex:1;justify-content:center;list-style:none;margin:0;padding:0;height:100%}
.cx-nav>li{display:flex;align-items:stretch;margin:0}
.cx-tl{font:500 13px var(--cx-f);letter-spacing:.09em;text-transform:uppercase;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--cx-ink);padding:0 11px;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap}
.cx-tl[aria-expanded="true"]{border-bottom-color:var(--cx-sage)}
.cx-tl.cx-cur{color:var(--cx-sage-ink)}
.cx-tl svg{width:10px;height:10px;transition:transform .15s}
.cx-tl[aria-expanded="true"] svg{transform:rotate(180deg)}
.cx-cta{flex:none;background:var(--cx-sage);color:#1e1e1e!important;font:500 14px var(--cx-f);letter-spacing:.04em;text-transform:uppercase;padding:14px 30px;text-decoration:none;min-height:44px;display:flex;align-items:center;justify-content:center}
.cx-cta:hover{filter:brightness(.95)}
.cx-cta-s{display:none!important}
.cx-burger{display:none;gap:8px;padding:0 12px;margin-left:auto;background:none;border:1px solid var(--cx-line);color:var(--cx-ink);min-width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center;font:500 14px var(--cx-f)}

.cx-skip{position:absolute;left:8px;top:-60px;z-index:1000;background:var(--cx-ink);color:#fff;padding:12px 16px;text-decoration:none;font-weight:500}
.cx-skip:focus{top:8px}
html{scroll-padding-top:136px}
@media (max-width:1024px){html{scroll-padding-top:80px}}

/* desktop panel: one style for every top item */
.cx-mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--cx-line);box-shadow:0 18px 30px -24px rgba(0,0,0,.35);padding:28px 0 32px;animation:cxfade .15s ease-out;max-height:calc(100vh - 140px);overflow:auto}
@keyframes cxfade{from{opacity:0}to{opacity:1}}
.cx-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px;align-items:start}
.cx-col{display:flex;flex-direction:column;min-width:0;padding:12px;margin:-12px;transition:background .15s}
.cx-col.cx-on{background:var(--cx-panel)}
.cx-cimg{display:block;margin-bottom:12px}
.cx-cimg img{width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;display:block}
.cx-colh{display:flex;flex-direction:column;gap:2px;padding-bottom:8px;border-bottom:2px solid var(--cx-sage)}
.cx-colh a{color:var(--cx-ink);text-decoration:none;font-size:17px;font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:8px}
.cx-colh a:hover{color:var(--cx-sage-ink)}
.cx-colh a .cx-chev{width:10px;height:10px;color:var(--cx-muted);transition:transform .15s;flex:none}
.cx-col.cx-on .cx-colh a .cx-chev{transform:rotate(180deg)}
.cx-colh span{font-size:13px;color:var(--cx-muted)}
.cx-proj{margin-top:8px;color:var(--cx-ink);text-decoration:none;font-size:14px}
.cx-proj:hover{color:var(--cx-sage-ink)}
.cx-kids{list-style:none;margin:0;padding:0}
.cx-kids li{margin:0}
.cx-kids a{display:block;color:var(--cx-ink);text-decoration:none;padding:11px 0;border-bottom:1px solid var(--cx-line);font-size:15px}
.cx-kids a:hover{color:var(--cx-sage-ink)}
.cx-kids a.cx-hub{color:var(--cx-sage-ink);font-weight:500;border-bottom:0}
.cx-free{display:flex;flex-direction:column;gap:2px;margin-top:12px;padding:10px 12px;background:var(--cx-sage-soft);color:var(--cx-ink);text-decoration:none;font-size:14px;font-weight:500}
.cx-free b{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--cx-sage-ink);font-weight:500}
.cx-free:hover{background:var(--cx-sage)}
.cx-viewall{margin-top:20px;padding-top:14px;border-top:1px solid var(--cx-line)}
.cx-viewall a{color:var(--cx-sage-ink);font-weight:500;text-decoration:none}

/* phone / tablet: drill-down */
.cx-mob{display:none}
@media (max-width:1024px){
  .cx-util{font-size:12px}
  .cx-util .cx-tel{display:none}
  .cx-bar>.cx-in{height:60px;gap:12px;padding:0 16px}
  .cx-logo img{width:150px}
  .cx-nav,.cx-bar .cx-cta{display:none}
  .cx-burger{display:flex;margin-left:0}
  .cx-bar .cx-cta-s{display:flex!important;margin-left:auto;padding:0 14px;font-size:13px;min-height:44px}
  #cx-hdr{top:-44px}
  .cx-mega{display:none!important}
  .cx-mob{display:block;border-bottom:1px solid var(--cx-line);background:#fff;max-height:calc(100vh - 100px);overflow:auto}
}
.cx-mob ul{list-style:none;margin:0;padding:0}
.cx-mob .cx-dl>li{border-bottom:1px solid var(--cx-line);margin:0}
.cx-mob .cx-drow,.cx-mob .cx-dl a{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:0;color:var(--cx-ink);font:500 16px var(--cx-f);padding:12px 16px;min-height:48px;text-align:left;text-decoration:none;cursor:pointer}
.cx-mob .cx-dl a.cx-vall,.cx-mob .cx-dl a.cx-mfree{color:var(--cx-sage-ink)}
.cx-mob .cx-back{background:none;border:0;color:var(--cx-sage-ink);font:500 15px var(--cx-f);padding:12px 16px;min-height:48px;cursor:pointer}
.cx-mob .cx-dtitle{font-size:20px;font-weight:500;padding:0 16px 10px;border-bottom:2px solid var(--cx-sage)}
.cx-mob .cx-mcta{margin:16px}
@media (prefers-reduced-motion:reduce){#cx-hdr *{transition:none!important;animation:none!important}}

/* old Tilda header (record 1215940686) stays in the HTML for its global CSS/JS but is replaced by #cx-hdr */
#rec1215940686,#rec346901610,#rec1805791721,#rec1592766711{display:none!important}