/* ── shared components (used by 2+ areas) ────────────────────────────── */

/* floaters */
.a11y{position:fixed;left:12px;top:53%;z-index:45;width:36px;height:36px;border-radius:50%;background:var(--navy);border:1px solid rgba(255,255,255,.6);color:var(--white);display:flex;align-items:center;justify-content:center}
.a11y svg{width:22px;height:14px}
.a11y:hover{background:var(--navy-2)}
/* floating widget — Figma 45:1017: navy circle (dot top-left) + green bar with a notch */
.wa{position:fixed;right:18px;bottom:92px;z-index:45;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.wa__circle{position:relative;width:62px;height:62px;border-radius:50%;background:var(--navy);border:2px solid var(--blush);display:flex;align-items:center;justify-content:center;transition:background .2s}
.wa__circle svg{width:41px;height:23px}
.wa__circle:hover{background:var(--navy-2)}
.wa__dot{position:absolute;top:4px;left:0;width:12px;height:12px;border-radius:50%;background:#32d851}
.wa__bar{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:125px;height:39px;padding:0 9px;white-space:nowrap;border-radius:4px;background:#32d851;color:var(--white);font-family:var(--ff-alt);font-size:15px;font-weight:700;line-height:1;box-shadow:0 0 10px rgba(0,0,0,.1)}
.wa__bar::before{content:"";position:absolute;inset-block-start:-9px;right:24px;border:10px solid transparent;border-block-end-color:#32d851;border-block-start-width:0}
.wa__bar svg{width:20px;height:20px;flex:none}
.wa__bar:hover{filter:brightness(1.06)}

/* lead form strip (home + about + service) */
.lf{padding-block:60px 0}
.lead-form{background:var(--white);border:1px solid #f3f5f8;border-radius:10px;box-shadow:0 0 15px rgba(10,53,107,.12);padding:31px 31px 16px 42px}
.lead-form__title{font-size:clamp(20px,1.88vw,36px);line-height:34px;font-weight:700;color:var(--navy-2);text-align:center}
.lead-form__note{margin-top:13px;font-size:clamp(14px,1.15vw,22px);line-height:34px;color:var(--navy-2);text-align:center}
.lead-form__note b{font-weight:700}
.lead-form__note .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blush);vertical-align:middle;margin-inline:10px}
.lead-form__row{margin-top:17px;display:grid;grid-template-columns:378fr 378fr 378fr 213fr;gap:26px;align-items:center}
.lead-form__row .btn{height:56px;width:100%}
.fld{position:relative}
.fld input,.fld select{width:100%;height:56px;border:0;border-radius:4px;background:rgba(28,53,85,.1);padding:0 16px;font-size:clamp(15px,1.15vw,22px);color:var(--navy-3);appearance:none;direction:rtl;text-align:start}
.fld input::placeholder{color:var(--navy-4);opacity:1}
.fld select{padding-inline-end:18px}
.fld--sel::after{content:"";position:absolute;left:16px;top:50%;width:17px;height:17px;margin-block-start:-8px;pointer-events:none;background:url(../images/icon-chev-navy.svg) no-repeat center/contain}
.fld input:focus,.fld select:focus{outline:2px solid var(--blush);outline-offset:1px}
.lead-form--in .lead-form__row{grid-template-columns:326fr 326fr 173fr;gap:17px}
.lead-form--in{padding:25px 31px 16px 29px}
.lead-form__ok{margin-top:12px;display:flex;align-items:center;justify-content:flex-start;gap:8px;font-size:16px;line-height:24px;color:var(--navy-3);cursor:pointer}
.lead-form__ok input{accent-color:#001744;width:18px;height:18px;border-radius:2px}

/* section head spacing helper */
.sec-pad{padding-block:clamp(48px,4.6vw,88px)}

@media(max-width:1023px){
	.lf{padding-block:34px 0}
	.lead-form{padding:20px 16px 14px}
	.lead-form__title{font-size:20px;line-height:1.25}
	.lead-form__note{font-size:14px;line-height:24px}
	.lead-form__note .dot{margin-inline:6px}
	.lead-form__row{grid-template-columns:1fr;gap:10px}
	.fld input,.fld select{height:48px;font-size:16px}
	.lead-form__row .btn{height:48px;font-size:17px}
	.lead-form__ok{font-size:13px}
}

/* mobile slider indicator — swipe icon + progress track (Figma 127:3073/3074/3076) */
.swipebar{display:none}
@media(max-width:1023px){
	.swipebar{display:flex;align-items:center;gap:19px;margin:22px 17px 0;color:var(--navy)}
	.swipebar svg{width:34px;height:34px;flex:none}
	.swipebar__track{position:relative;flex:1;height:4px;border-radius:2px;background:#e2e8f0;overflow:hidden}
	.swipebar__thumb{position:absolute;inset-block:0;right:0;width:36%;border-radius:2px;background:var(--navy);transition:right .3s,width .3s}
}
/* Owl-driven variant — the track IS Owl's dots (dotsContainer): one segment per card,
   the active one navy, tap to jump. Hand in a 44px ring on the left (Figma 127:3073). */
@media(max-width:1023px){
	.swipebar--owl{flex-direction:row-reverse;gap:13px;margin-inline:17px 13px}
	.swipebar--owl svg{width:44px;height:44px;padding:8px;border:1px solid #e2e8f0;border-radius:50%}
	.swipebar--owl .swipebar__track{display:flex;overflow:visible}
	.swipebar--owl .owl-dot{position:relative;flex:1;height:4px;padding:0;border:0;border-radius:2px;background:none;cursor:pointer;transition:background-color .35s}
	.swipebar--owl .owl-dot::before{content:"";position:absolute;inset:-12px 0}
	.swipebar--owl .owl-dot.active{background:var(--navy)}
	.swipebar--owl .owl-dot span{display:none}
}

@media(max-width:1023px){
	/* no WhatsApp bubble on mobile (Kfir) — the floating to-top stays */
	.wa{display:none}
	.a11y{inset-block-start:auto;inset-block-end:76px;left:16px}
}

/* ── lead forms · live behaviour (A5) ────────────────────────────────────
 * Hebrew validation feedback, honeypot, and the mobile order the design asks
 * for: fields → checkbox → button → selling points.
 * -------------------------------------------------------------------- */
.lf-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.fld__err{position:absolute;inset-block-start:6px;inset-inline-start:13px;z-index:2;font-size:11px;line-height:1;font-weight:700;color:#c0392b;pointer-events:none}
.fld.is-err input,.fld.is-err select{outline:2px solid #c0392b;outline-offset:0;padding-block-start:14px;background:rgba(192,57,43,.06)}
.fld.is-err input::placeholder{color:#c0392b;opacity:.75}

.lf-msg{margin-top:10px;font-size:14px;line-height:1.4;font-weight:700;color:#c0392b;text-align:center}
.lf-msg[hidden]{display:none}
.btn.is-busy{opacity:.7;pointer-events:none}

/* selling points — inline on desktop, one bulleted line each on mobile */
.lead-form__i{display:inline}

@media(max-width:1023px){
	/* the row is only a desktop grid; on mobile its children join the form's
	   own column so the checkbox can sit between the fields and the button */
	.lead-form{display:flex;flex-direction:column;gap:12px}
	.lead-form__row{display:contents}
	.lead-form__title{order:1;margin:0;font-size:24px;line-height:33px}
	.lead-form .fld{order:3}
	.lead-form__ok{order:4;align-items:flex-start;gap:9px;margin-top:2px;font-size:13px;line-height:19px;text-align:start}
	.lead-form__ok input{flex:none;margin-top:1px}
	/* the design's button is a centred pill, not a full-width bar (Figma 118:1742) */
	.lead-form__row .btn{order:5;align-self:center;width:auto;min-width:186px;height:56px;margin-top:6px;padding-inline:30px}
	.lead-form__note{order:6;margin-top:14px;text-align:start}

	.lead-form__note .dot{display:none}
	.lead-form__i{position:relative;display:block;padding-inline-start:17px;margin-block-start:6px;font-size:14px;line-height:20px}
	.lead-form__i:first-child{margin-block-start:0}
	.lead-form__i::before{content:"";position:absolute;inset-inline-start:2px;inset-block-start:7px;width:6px;height:6px;border-radius:50%;background:var(--blush)}

	.fld__err{font-size:10px;inset-block-start:5px;inset-inline-start:11px}
	.fld.is-err input,.fld.is-err select{padding-block-start:12px}
}

/* ── reusable section shortcodes ─────────────────────────────────────────
 * The blocks render full-bleed (page.php drops the article wrapper when a
 * perfection_* shortcode is present), so they keep their own typography.
 * -------------------------------------------------------------------- */
.perf-sc{display:block}
.perf-sc>section{margin-inline:auto}
.perf-sc .scards{margin-block:10px}

/* ── anchor landing offset — the sticky header hides the top of a #section
 * when you jump to it (header ~150px desktop, ~58px mobile). The rule covers
 * every <section id="..."> plus any element explicitly tagged .anchor-offset.
 * -------------------------------------------------------------------- */
section[id],[id].anchor-offset{scroll-margin-top:170px}
@media(max-width:1023px){section[id],[id].anchor-offset{scroll-margin-top:75px}}