/* Constructors — global stylesheet for Elementor (Free).
   Enqueue from the child theme. Attach to widgets/containers via Advanced › CSS Classes.
   Never put copy or image URLs here (except texture backgrounds), so editors keep full control. */

:root {
  --cn-lime: #C8F135; --cn-orange: #FF7A1A; --cn-charcoal: #202624; --cn-paper: #F5F3EE; --cn-silver: #BCC3C5;
  --cn-ink-2: #3A423F; --cn-ink-3: #55605C; --cn-line: #DADDDA; --cn-error: #B3311A;
  --cn-lime-wash: #F1F9D6; --cn-orange-wash: #FFF4EB;
  --cn-ease-out: cubic-bezier(.23,1,.32,1); --cn-ease-move: cubic-bezier(.77,0,.175,1);
  --cn-display: 'Rubik', sans-serif; --cn-body: 'Assistant', 'Rubik', sans-serif; --cn-mono: 'IBM Plex Mono', monospace;
}
body { background: var(--cn-paper); color: var(--cn-charcoal); font-family: var(--cn-body); -webkit-font-smoothing: antialiased; }
a { color: var(--cn-charcoal); text-decoration-color: var(--cn-orange); text-underline-offset: 3px; }
a:hover { color: #000; }
:focus-visible { outline: 3px solid var(--cn-orange); outline-offset: 2px; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
main { animation: cnPageIn .15s var(--cn-ease-out) both; }
@keyframes cnPageIn { from { opacity: 0 } to { opacity: 1 } }

/* ---------- header ---------- */
.cn-header { position: sticky; top: 0; z-index: 40; background: rgba(245,243,238,.78); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); border-bottom: 1px solid rgba(188,195,197,.8); transition: box-shadow .25s var(--cn-ease-out); }
.cn-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(32,38,36,.45); }

/* ---------- buttons (Button widget) ---------- */
.cn-btn .elementor-button, .cn-btn-dark .elementor-button, .cn-btn-ghost .elementor-button {
  min-height: 56px; padding: 0 26px; border-radius: 4px; font: 700 17px/1 var(--cn-display);
  display: inline-flex; align-items: center; gap: 10px;
  transition: background-position .8s ease, transform .16s var(--cn-ease-out), box-shadow .2s var(--cn-ease-out), background-color .15s ease, color .15s ease;
}
.cn-btn .elementor-button {
  background-color: var(--cn-orange); color: var(--cn-charcoal);
  background-image: linear-gradient(110deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 65%);
  background-repeat: no-repeat; background-size: 250% 100%; background-position: 130% 0;
}
.cn-btn-dark .elementor-button { background: var(--cn-charcoal); color: var(--cn-paper); }
.cn-btn-ghost .elementor-button { background: transparent; color: inherit; border: 1.5px solid currentColor; }
.cn-btn .elementor-button:active, .cn-btn-dark .elementor-button:active, .cn-btn-ghost .elementor-button:active { transform: scale(.97); transition-duration: .08s; }
@media (hover: hover) and (pointer: fine) {
  .cn-btn .elementor-button:hover { background-position: -30% 0; transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(255,122,26,.95); color: var(--cn-charcoal); }
  .cn-btn-dark .elementor-button:hover { background: #000; color: var(--cn-paper); }
  .cn-btn-ghost .elementor-button:hover { border-color: var(--cn-lime); color: var(--cn-lime); }
}

/* ---------- cards ---------- */
.cn-card { background: #fff; border: 1px solid var(--cn-silver); border-radius: 10px; overflow: hidden; transition: transform .22s var(--cn-ease-out), box-shadow .22s var(--cn-ease-out), border-color .2s ease; }
@media (hover: hover) and (pointer: fine) { .cn-card:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -26px rgba(0,0,0,.6); border-color: var(--cn-charcoal); } }
.cn-card:active { transform: scale(.99); }
.cn-card .elementor-image img { transition: transform .8s var(--cn-ease-out); }
@media (hover: hover) and (pointer: fine) { .cn-card:hover .elementor-image img { transform: scale(1.06); } }

/* ---------- glass ---------- */
.cn-glass { background: rgba(245,243,238,.8); border: 1px solid rgba(255,255,255,.8); border-radius: 10px; -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 40px 80px -40px rgba(0,0,0,.6); }
.cn-glass-dark { background: rgba(32,38,36,.6); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; color: var(--cn-paper); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }

/* ---------- vest band (outer container .cn-vest, inner container .cn-vest-strip) ---------- */
.cn-vest { background: var(--cn-lime); padding: 8px 0; overflow: hidden; }
.cn-vest-strip { position: relative; height: 14px; background: var(--cn-silver); overflow: hidden; border-top: 1px solid #EDF0F1; border-bottom: 1px solid #9EA6A8; }
.cn-vest-strip::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 30%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95), rgba(255,255,255,0)); animation: cnSheen 4.5s ease-in-out infinite; }
.cn-vest.is-orange { background: var(--cn-orange); }
@keyframes cnSheen { 0% { transform: translateX(160%) } 60%, 100% { transform: translateX(-260%) } }

/* ---------- caution tape ---------- */
.cn-tape { height: 8px; background: repeating-linear-gradient(-45deg, var(--cn-orange) 0 14px, var(--cn-charcoal) 14px 28px); }
.cn-tape.is-loading { background-size: 56px 8px; animation: cnStripes .9s linear infinite; }
@keyframes cnStripes { to { background-position: -56px 0 } }

/* ---------- textures (container background + overlay) ---------- */
.cn-tex-concrete, .cn-tex-rebar, .cn-tex-wood { position: relative; background-size: cover; background-position: center; }
.cn-tex-concrete { background-image: url('assets/tex-concrete-rough.webp'); }
.cn-tex-rebar { background-image: url('assets/tex-rebar.webp'); }
.cn-tex-wood { background-image: url('assets/tex-wood.webp'); }
/* the overlay: use Elementor's own Background Overlay (free) — light 0.74 on concrete/wood, charcoal 0.86 on rebar */

/* ---------- "המחשה" label (Text Editor positioned absolute) ---------- */
.cn-illus { font: 500 11px/1 var(--cn-mono) !important; background: rgba(245,243,238,.9); color: var(--cn-charcoal); padding: 6px 8px; border-radius: 2px; }

/* ---------- section index + mono numbers ---------- */
.cn-index .elementor-heading-title, .cn-index { font: 500 13px var(--cn-mono) !important; color: var(--cn-ink-3); }
.cn-mono, .cn-mono .elementor-heading-title { font-family: var(--cn-mono) !important; }

/* ---------- chips / pills (Icon List or Button) ---------- */
.cn-chip .elementor-button { min-height: 44px; padding: 0 15px; border-radius: 999px; border: 1.5px solid var(--cn-silver); background: #fff; color: var(--cn-charcoal); font: 600 15px var(--cn-display); }
.cn-chip.is-selected .elementor-button { background: var(--cn-lime); border-color: var(--cn-charcoal); }
.cn-pill-live { display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--cn-lime); color: var(--cn-charcoal); font: 700 12px var(--cn-display); }
.cn-pill-soon { display: inline-block; padding: 3px 9px; border-radius: 999px; background: #ECEDEA; color: var(--cn-ink-2); font: 700 12px var(--cn-display); }

/* ---------- highlight sweep on H1 line (wrap the line in <span class="cn-hl"> inside the Heading) ---------- */
.cn-hl { background-image: linear-gradient(var(--cn-lime), var(--cn-lime)); background-repeat: no-repeat; background-position: 100% 0; background-size: 100% 100%; color: var(--cn-charcoal); padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cn-motion .cn-hl { animation: cnHi .9s .6s var(--cn-ease-move) backwards; }
@keyframes cnHi { from { background-size: 0% 100%; color: var(--cn-paper) } to { background-size: 100% 100%; color: var(--cn-charcoal) } }

/* ---------- FAQ (Accordion widget) ---------- */
.cn-faq .elementor-accordion-item { border: none !important; border-bottom: 1px solid var(--cn-silver) !important; }
.cn-faq .elementor-tab-title { padding: 18px 0 !important; font: 700 clamp(18px,1.8vw,22px)/1.35 var(--cn-display) !important; }
.cn-faq .elementor-tab-content { padding: 0 0 22px 48px !important; font: 400 17px/1.65 var(--cn-body); color: var(--cn-ink-2); border: none !important; }

/* ---------- dividers ---------- */
.cn-measure { position: relative; height: 22px; border-bottom: 1.5px solid var(--cn-charcoal); background-image: repeating-linear-gradient(270deg, var(--cn-charcoal) 0 1.5px, transparent 1.5px 120px), repeating-linear-gradient(270deg, var(--cn-silver) 0 1px, transparent 1px 24px); background-size: 100% 22px, 100% 10px; background-position: bottom, bottom; background-repeat: no-repeat; transform-origin: right; }
.cn-motion .cn-measure.cn-reveal-wait { transform: scaleX(0); }
.cn-measure.cn-in { transform: scaleX(1); transition: transform .9s var(--cn-ease-out); }

/* ---------- reveal (JS adds .cn-motion on <html>, .cn-reveal-wait before, .cn-in when visible) ---------- */
.cn-motion .cn-reveal.cn-reveal-wait { opacity: 0; transform: translate3d(0,24px,0); }
.cn-motion .cn-reveal-fade.cn-reveal-wait { opacity: 0; }
.cn-motion .cn-reveal-img.cn-reveal-wait { opacity: 0; transform: scale(.97); }
.cn-reveal.cn-in, .cn-reveal-fade.cn-in, .cn-reveal-img.cn-in { opacity: 1; transform: none; transition: opacity .6s var(--cn-ease-out), transform .7s var(--cn-ease-out); transition-delay: var(--cn-d, 0ms); }

/* ---------- popup (hidden container in footer template) ---------- */
.cn-popup { position: fixed; inset: auto 16px 16px 16px; z-index: 70; max-width: 520px; margin-inline: auto; opacity: 0; transform: translateY(12px) scale(.97); visibility: hidden; transition: opacity .25s var(--cn-ease-out), transform .3s var(--cn-ease-out), visibility .3s; }
.cn-popup.is-open { opacity: 1; transform: none; visibility: visible; }
.cn-popup .cn-underline { background-image: linear-gradient(var(--cn-orange), var(--cn-orange)); background-repeat: no-repeat; background-position: 100% 100%; background-size: 0% 4px; padding-bottom: 4px; }
.cn-popup.is-open .cn-underline { background-size: 100% 4px; transition: background-size .7s .25s var(--cn-ease-move); }

/* ---------- scroll progress (created by JS) ---------- */
.cn-progress { position: fixed; top: 0; right: 0; left: 0; height: 3px; z-index: 60; pointer-events: none; transform-origin: right; transform: scaleX(0); background: linear-gradient(90deg, var(--cn-orange), var(--cn-lime) 60%, var(--cn-paper)); }

/* ---------- reduced motion + lite devices ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .cn-motion .cn-reveal.cn-reveal-wait, .cn-motion .cn-reveal-img.cn-reveal-wait { transform: none; }
}
.cn-lite .cn-vest-strip::after, .cn-lite .cn-tape.is-loading { animation: none; }
.cn-lite .cn-btn .elementor-button { background-image: none; }
@media (hover: none) { .cn-card:hover, .cn-btn .elementor-button:hover { transform: none; box-shadow: none; } }