/* ==========================================================================
   TASITO Elementor Widgets — one stylesheet for the whole plugin.
   Everything is scoped under `.tasito` so it can never collide with the theme.
   Structure: tokens → base/util → sections → animation GATE → editor-preview → responsive
   ========================================================================== */

:root {
  --ts-brand-50:#f0f9ff; --ts-brand-100:#e0f2fe; --ts-brand-200:#bae6fd; --ts-brand-300:#7dd3fc;
  --ts-brand-400:#38bdf8; --ts-brand:#0284c7; --ts-brand-600:#0369a1; --ts-brand-700:#075985; --ts-brand-900:#0c2f45;
  --ts-mint-300:#6ee7d3; --ts-mint:#14b8a6;
  --ts-wa:#25d366; --ts-wa-hover:#1ebe57;
  --ts-ink:#0b1a24; --ts-ink-soft:#3f5563; --ts-muted:#64788a; --ts-line:rgba(12,47,69,.10);
  --ts-paper:#fff; --ts-cream:#f6fbff; --ts-star:#f5b301;
  --ts-font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ts-display:"Fraunces","Georgia",serif;
  --ts-r-sm:10px; --ts-r-md:18px; --ts-r-lg:28px; --ts-r-xl:40px; --ts-pill:999px;
  --ts-sh-sm:0 2px 10px rgba(12,47,69,.06); --ts-sh-md:0 14px 40px rgba(12,47,69,.10);
  --ts-sh-lg:0 30px 80px rgba(12,47,69,.16); --ts-sh-brand:0 18px 50px rgba(2,132,199,.28); --ts-sh-wa:0 16px 40px rgba(37,211,102,.32);
  --ts-ease:cubic-bezier(.22,1,.36,1); --ts-ease-io:cubic-bezier(.65,0,.35,1);
  --ts-maxw:1200px; --ts-gutter:clamp(1.25rem,5vw,2.5rem); --ts-section-y:clamp(4.5rem,10vw,8rem);
}

/* ---- base / reset (scoped) --------------------------------------------- */
.tasito, .tasito *, .tasito *::before, .tasito *::after { box-sizing: border-box; }
/* The host site is Hebrew/RTL — these widgets are an ENGLISH landing page.
   Force LTR inside .tasito only; the rest of the site stays RTL. */
.tasito { direction: ltr; text-align: left; unicode-bidi: isolate; }
.tasito input, .tasito select, .tasito textarea { direction: ltr; text-align: left; }
.tasito { font-family: var(--ts-font); color: var(--ts-ink); line-height: 1.65; -webkit-font-smoothing: antialiased; }
.tasito img { max-width: 100%; display: block; }
.tasito a { color: inherit; text-decoration: none; }
.tasito h1,.tasito h2,.tasito h3,.tasito h4 { margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.tasito p { margin: 0; }
.tasito :focus-visible { outline: 3px solid var(--ts-brand-400); outline-offset: 3px; border-radius: 4px; }

.tasito .wrap { width: 100%; max-width: var(--ts-maxw); margin-inline: auto; padding-inline: var(--ts-gutter); }
.tasito .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ts-brand-600); }
.tasito .accent, .tasito h1 em, .tasito h2 em { font-family: var(--ts-display); font-style: italic; font-weight: 500; color: var(--ts-brand); }

/* reveal (only hidden under the JS gate; static-first) */
.tasito .reveal { }
.tasito .reveal.d1{transition-delay:.08s}.tasito .reveal.d2{transition-delay:.16s}.tasito .reveal.d3{transition-delay:.24s}.tasito .reveal.d4{transition-delay:.32s}

/* ---- buttons ----------------------------------------------------------- */
.tasito .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: 1rem 1.9rem; border-radius: var(--ts-pill); font-weight: 700; font-size: 1.02rem; border: 2px solid transparent; cursor: pointer; transition: transform .35s var(--ts-ease), box-shadow .35s var(--ts-ease), background .3s, color .3s; white-space: nowrap; }
.tasito .btn i { font-size: 1.25em; }
.tasito .btn-wa { background: var(--ts-wa); color: #fff; box-shadow: var(--ts-sh-wa); }
.tasito .btn-wa:hover { background: var(--ts-wa-hover); transform: translateY(-3px); }
.tasito .btn-ghost { background: rgba(255,255,255,.7); color: var(--ts-ink); border-color: var(--ts-line); backdrop-filter: blur(6px); }
.tasito .btn-ghost:hover { border-color: var(--ts-brand); color: var(--ts-brand); transform: translateY(-3px); box-shadow: var(--ts-sh-md); }
.tasito .btn-brand { background: var(--ts-brand); color: #fff; box-shadow: var(--ts-sh-brand); }
.tasito .btn-brand:hover { background: var(--ts-brand-600); transform: translateY(-3px); }
.tasito .btn-dark { background: var(--ts-ink); color: #fff; }
.tasito .btn-dark:hover { background: #000; transform: translateY(-3px); box-shadow: var(--ts-sh-md); }
.tasito .btn-block { width: 100%; }
.tasito .btn.received { background: var(--ts-wa) !important; color: #fff; }

/* ---- Icon normalization -------------------------------------------------
   Elementor renders icon controls as inline SVG (<svg class="e-font-icon-svg">),
   not <i> font tags. Size every icon-SVG by the holder's font-size and paint
   it with currentColor so all the color rules below just work. */
.tasito .e-font-icon-svg,
.tasito .service-ico svg, .tasito .step-num .ico svg, .tasito .why-item .check svg,
.tasito .hero-trust svg, .tasito .footer-contact svg,
.tasito .stat > svg, .tasito .price-row .svc svg {
  width: 1em; height: 1em; fill: currentColor; display: inline-block; flex-shrink: 0;
}
/* svg twins for every icon spot that was styled via `i` */
.tasito.stats .stat > svg { color: var(--ts-mint); width: 1.3rem; height: 1.3rem; margin: 0 auto .7rem; display: block; }
.tasito.hero .hero-trust svg { color: var(--ts-brand); width: 1.1em; height: 1.1em; }
.tasito.pricing .price-row .svc svg { width: 38px; height: 38px; border-radius: 10px; background: var(--ts-brand-100); color: var(--ts-brand); padding: 10px; }
.tasito.footer .footer-contact svg { color: var(--ts-brand-300); margin-top: 3px; width: 18px; height: 18px; }

/* ---- section head ------------------------------------------------------ */
.tasito .section-head { text-align: center; max-width: 46rem; margin-inline: auto; margin-bottom: clamp(2.5rem,5vw,4rem); }
.tasito .section-head .eyebrow { margin-bottom: .9rem; }
.tasito .section-head h2 { font-size: clamp(1.9rem,3.6vw,3rem); margin-bottom: .9rem; }
.tasito .section-head p { font-size: clamp(1.05rem,1.5vw,1.3rem); color: var(--ts-ink-soft); }

/* ---- image slot (labeled placeholder until a photo is set) ------------- */
.tasito .img-slot { position: relative; overflow: hidden; border-radius: var(--ts-r-lg); background: linear-gradient(135deg,var(--ts-brand-100),var(--ts-cream)); box-shadow: var(--ts-sh-md); margin: 0; }
.tasito .img-slot::after { content: attr(data-label); position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; color: var(--ts-brand-600); font-weight: 700; font-size: .95rem; background: radial-gradient(circle at 50% 40%,rgba(255,255,255,.6),transparent 70%), repeating-linear-gradient(45deg,rgba(2,132,199,.05) 0 12px,transparent 12px 24px); }
.tasito .img-slot img { position: relative; z-index: 3; width: 100%; height: 100%; object-fit: cover; }

/* ======================================================================== */
/* HEADER                                                                    */
/* ======================================================================== */
.tasito.header { position: fixed; inset-inline: 0; top: 0; z-index: 1000; transition: background .4s, box-shadow .4s, backdrop-filter .4s; }
.tasito.header .header-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.tasito.header.is-scrolled, .tasito.header.header-solid { background: rgba(255,255,255,.85); backdrop-filter: saturate(180%) blur(14px); box-shadow: var(--ts-sh-sm); border-bottom: 1px solid var(--ts-line); }
.tasito.header .brand-logo { display: inline-flex; align-items: center; }
.tasito.header .logo-img { height: 54px; width: auto; filter: brightness(.42) saturate(1.1) drop-shadow(0 1px 1px rgba(255,255,255,.6)); transition: height .3s; }
.tasito.header.is-scrolled .logo-img { height: 48px; }
.tasito.header .header-nav { display: flex; align-items: center; gap: 1.6rem; }
.tasito.header .header-nav a { font-weight: 600; font-size: .95rem; color: var(--ts-ink-soft); transition: color .25s; }
.tasito.header .header-nav a:hover { color: var(--ts-brand); }
.tasito.header .header-actions { display: flex; align-items: center; gap: 1rem; }
.tasito.header .header-hours { display: none; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem; color: var(--ts-ink-soft); }
.tasito.header .header-hours i { color: var(--ts-brand); }
.tasito.header .btn { padding: .65rem 1.4rem; font-size: .92rem; }
.tasito.header .burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; }
.tasito.header .burger span { width: 24px; height: 2px; background: var(--ts-ink); border-radius: 2px; transition: transform .3s, opacity .3s; }

/* ======================================================================== */
/* HERO                                                                      */
/* ======================================================================== */
.tasito.hero { position: relative; padding-top: clamp(8rem,16vh,11rem); padding-bottom: clamp(3rem,6vw,5rem); overflow: hidden; background: radial-gradient(1100px 700px at 78% -8%, var(--ts-brand-100) 0%, transparent 60%), radial-gradient(900px 600px at 12% 12%, rgba(110,231,211,.16) 0%, transparent 55%), linear-gradient(180deg,#f4fbff,#eef7fe); }
.tasito.hero .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.tasito.hero .hero-badge { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.5rem; padding: .5rem 1rem; border-radius: var(--ts-pill); background: rgba(2,132,199,.10); color: var(--ts-brand-600); font-weight: 700; font-size: .85rem; }
.tasito.hero .hero-badge i { color: var(--ts-star); }
.tasito.hero h1 { font-size: clamp(2.6rem,6.2vw,5rem); line-height: 1.05; margin-bottom: 1.1rem; }
.tasito.hero .hero-sub { font-weight: 700; letter-spacing: .02em; color: var(--ts-brand-600); margin-bottom: 1.4rem; font-size: 1rem; }
.tasito.hero .hero-sub span { color: var(--ts-muted); font-weight: 500; padding-inline: .4rem; }
.tasito.hero .hero-lead { font-size: clamp(1.05rem,1.5vw,1.3rem); color: var(--ts-ink-soft); max-width: 34rem; margin-bottom: .9rem; }
.tasito.hero .hero-lead.small { font-size: 1.02rem; margin-bottom: 2rem; }
.tasito.hero .hero-lead strong { color: var(--ts-ink); font-weight: 700; }
.tasito.hero .hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.2rem; }
.tasito.hero .hero-trust { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.tasito.hero .hero-trust span { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--ts-ink-soft); font-size: .95rem; }
.tasito.hero .hero-trust i { color: var(--ts-brand); font-size: 1.1rem; }
.tasito.hero .hero-visual { position: relative; }
.tasito.hero .hero-visual .img-slot { aspect-ratio: 4/5; border-radius: var(--ts-r-xl); box-shadow: var(--ts-sh-lg); }
.tasito.hero .hero-visual .img-slot img { animation: ts-kenburns 20s var(--ts-ease-io) infinite alternate; }
.tasito.hero .hero-float { position: absolute; z-index: 5; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); border-radius: var(--ts-r-md); box-shadow: var(--ts-sh-md); padding: .85rem 1.1rem; display: flex; align-items: center; gap: .75rem; font-weight: 700; font-size: .9rem; animation: ts-floaty 5s var(--ts-ease-io) infinite; }
.tasito.hero .hero-float i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--ts-brand-100); color: var(--ts-brand); font-size: 1.1rem; }
.tasito.hero .hero-float small { display: block; font-weight: 500; color: var(--ts-muted); font-size: .75rem; }
.tasito.hero .hero-float.f1 { top: 6%; left: -3%; }
.tasito.hero .hero-float.f2 { bottom: 8%; right: -3%; animation-delay: 1.4s; }
.tasito.hero .hero-float.f2 i { background: rgba(37,211,102,.15); color: var(--ts-wa); }

/* ======================================================================== */
/* MARQUEE                                                                   */
/* ======================================================================== */
.tasito.marquee { position: relative; overflow: hidden; padding: 1.1rem 0; background: var(--ts-brand); color: #fff; }
.tasito.marquee::before, .tasito.marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; }
.tasito.marquee::before { left: 0; background: linear-gradient(90deg,var(--ts-brand),transparent); }
.tasito.marquee::after { right: 0; background: linear-gradient(270deg,var(--ts-brand),transparent); }
.tasito.marquee .marquee-track { display: flex; width: max-content; animation: ts-marquee 34s linear infinite; }
.tasito.marquee:hover .marquee-track { animation-play-state: paused; }
.tasito.marquee .marquee-item { display: inline-flex; align-items: center; gap: .9rem; padding-inline: 1.6rem; font-family: var(--ts-display); font-style: italic; font-size: 1.35rem; white-space: nowrap; }
.tasito.marquee .marquee-item i { font-size: .7rem; color: var(--ts-brand-200); font-style: normal; }

/* ======================================================================== */
/* STEPS                                                                     */
/* ======================================================================== */
.tasito.steps { padding-block: var(--ts-section-y); background: linear-gradient(180deg,#eef7fe,#ffffff); }
.tasito.steps .steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.2rem,3vw,2.2rem); position: relative; }
.tasito.steps .step-line { position: absolute; top: 76px; left: 20%; right: 20%; height: 2px; background: repeating-linear-gradient(90deg,var(--ts-brand-300) 0 10px,transparent 10px 20px); z-index: 0; }
.tasito.steps .step { position: relative; z-index: 1; text-align: center; background: rgba(255,255,255,.75); border: 1px solid var(--ts-line); border-radius: var(--ts-r-lg); padding: 2.4rem 1.6rem; backdrop-filter: blur(6px); transition: transform .4s var(--ts-ease), box-shadow .4s var(--ts-ease); }
.tasito.steps .step:hover { transform: translateY(-6px); box-shadow: var(--ts-sh-md); }
.tasito.steps .step-num { width: 76px; height: 76px; margin: 0 auto 1.3rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; color: #fff; background: linear-gradient(140deg,var(--ts-brand-400),var(--ts-brand-600)); box-shadow: var(--ts-sh-brand); position: relative; }
.tasito.steps .step-num .ico { position: absolute; bottom: -6px; right: -6px; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--ts-brand); display: grid; place-items: center; font-size: .85rem; box-shadow: var(--ts-sh-sm); }
.tasito.steps .step h3 { font-size: clamp(1.15rem,1.6vw,1.4rem); margin-bottom: .6rem; }
.tasito.steps .step p { color: var(--ts-ink-soft); }
.tasito.steps .step-tag { display: block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ts-brand); font-weight: 700; margin-bottom: .3rem; }

/* ======================================================================== */
/* SERVICES                                                                  */
/* ======================================================================== */
.tasito.services { padding-block: var(--ts-section-y); background: #ffffff; }
.tasito.services .services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.1rem,2.5vw,1.8rem); }
.tasito .service-card { position: relative; border-radius: var(--ts-r-lg); overflow: hidden; min-height: 320px; display: flex; align-items: flex-end; box-shadow: var(--ts-sh-md); isolation: isolate; transition: transform .45s var(--ts-ease), box-shadow .45s var(--ts-ease); }
.tasito .service-card:hover { transform: translateY(-6px); box-shadow: var(--ts-sh-lg); }
.tasito .service-media { position: absolute; inset: 0; z-index: 0; }
.tasito .service-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ts-ease); }
.tasito .service-card:hover .service-media img { transform: scale(1.08); }
.tasito .service-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg,rgba(8,42,63,.05) 0%,rgba(8,42,63,.35) 45%,rgba(7,30,44,.9) 100%); }
.tasito .service-body { position: relative; z-index: 2; padding: 1.6rem; color: #fff; width: 100%; }
.tasito .service-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); color: #fff; font-size: 1.2rem; margin-bottom: .9rem; border: 1px solid rgba(255,255,255,.25); }
.tasito .service-body h3 { font-size: 1.3rem; margin-bottom: .35rem; text-shadow: 0 2px 14px rgba(0,0,0,.4); }
.tasito .service-body p { color: rgba(255,255,255,.88); font-size: .95rem; }

/* ======================================================================== */
/* WHY                                                                       */
/* ======================================================================== */
.tasito.why { padding-block: var(--ts-section-y); background: linear-gradient(180deg,#ffffff,#f4fbff); }
.tasito.why .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,6vw,5rem); align-items: center; }
.tasito.why .why-visual { position: relative; }
.tasito.why .why-visual .img-slot { aspect-ratio: 4/3.4; }
.tasito.why .why-stat { position: absolute; z-index: 5; bottom: -22px; right: -18px; background: var(--ts-brand); color: #fff; border-radius: var(--ts-r-md); padding: 1rem 1.4rem; box-shadow: var(--ts-sh-brand); text-align: center; }
.tasito.why .why-stat b { display: block; font-size: 1.9rem; line-height: 1; font-family: var(--ts-display); }
.tasito.why .why-stat small { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.tasito.why h2 { font-size: clamp(1.9rem,3.6vw,3rem); margin-bottom: 2rem; }
.tasito.why .why-list { display: flex; flex-direction: column; gap: 1.4rem; }
.tasito.why .why-item { display: flex; gap: 1rem; }
.tasito.why .why-item .check { flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--ts-brand-100); color: var(--ts-brand); font-size: 1.2rem; }
.tasito.why .why-item h4 { font-size: 1.1rem; margin-bottom: .25rem; }
.tasito.why .why-item p { color: var(--ts-ink-soft); }
.tasito.why .why-item p strong { color: var(--ts-brand-600); }

/* ======================================================================== */
/* STATS                                                                     */
/* ======================================================================== */
.tasito.stats { padding-block: clamp(2rem,5vw,4rem); background: #f4fbff; }
.tasito.stats .stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.4rem; }
.tasito.stats .stat { text-align: center; padding: 1.8rem 1rem; border-radius: var(--ts-r-lg); background: rgba(255,255,255,.7); border: 1px solid var(--ts-line); backdrop-filter: blur(6px); transition: transform .4s var(--ts-ease); }
.tasito.stats .stat:hover { transform: translateY(-5px); }
.tasito.stats .stat i { color: var(--ts-mint); font-size: 1.3rem; margin-bottom: .7rem; display: block; }
.tasito.stats .stat .num { font-family: var(--ts-display); font-weight: 600; font-size: clamp(2.2rem,4vw,3.2rem); line-height: 1; color: var(--ts-brand); display: flex; justify-content: center; align-items: baseline; gap: .1rem; }
.tasito.stats .stat .num .suffix { font-size: .55em; }
.tasito.stats .stat .lbl { margin-top: .6rem; font-weight: 600; color: var(--ts-ink-soft); font-size: .95rem; }

/* ======================================================================== */
/* BAND                                                                      */
/* ======================================================================== */
.tasito.band { position: relative; min-height: clamp(440px,60vh,680px); display: grid; place-items: center; text-align: center; color: #fff; overflow: hidden; padding-block: 6rem; }
.tasito.band .band-bg { position: absolute; inset: -12% 0; z-index: 0; }
.tasito.band .band-bg img { width: 100%; height: 100%; object-fit: cover; animation: ts-kenburns 20s var(--ts-ease-io) infinite alternate; }
.tasito.band::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg,rgba(8,42,63,.7),rgba(8,42,63,.5) 45%,rgba(8,42,63,.72)); }
.tasito.band .band-inner { position: relative; z-index: 2; max-width: 44rem; padding-inline: var(--ts-gutter); }
.tasito.band .eyebrow { color: var(--ts-brand-200); margin-bottom: 1rem; }
.tasito.band h2 { font-size: clamp(1.9rem,4vw,3.2rem); line-height: 1.15; margin-bottom: 1rem; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.tasito.band h2 em { color: var(--ts-brand-200); }
.tasito.band p { font-size: clamp(1.05rem,1.5vw,1.3rem); color: rgba(255,255,255,.9); }
.tasito.band .band-cta { margin-top: 2rem; }

/* ======================================================================== */
/* GALLERY                                                                   */
/* ======================================================================== */
.tasito.gallery { padding-block: var(--ts-section-y); background: linear-gradient(180deg,#f4fbff,#eaf4fb); }
.tasito.gallery .gallery-grid { columns: 3; column-gap: 1rem; }
.tasito .gallery-item { break-inside: avoid; margin-bottom: 1rem; border-radius: var(--ts-r-md); overflow: hidden; position: relative; cursor: zoom-in; box-shadow: var(--ts-sh-sm); }
.tasito .gallery-item img { width: 100%; display: block; transition: transform .7s var(--ts-ease); }
.tasito .gallery-item:hover img { transform: scale(1.07); }
.tasito .gallery-item::after { content: "\f00e"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 1.6rem; background: rgba(8,42,63,.35); opacity: 0; transition: opacity .4s; }
.tasito .gallery-item:hover::after { opacity: 1; }
.tasito.lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(6,25,37,.92); display: flex; align-items: center; justify-content: center; padding: 4vw; opacity: 0; visibility: hidden; transition: opacity .35s; }
.tasito.lightbox.open { opacity: 1; visibility: visible; }
.tasito.lightbox img { max-width: 100%; max-height: 90vh; border-radius: var(--ts-r-md); box-shadow: var(--ts-sh-lg); transform: scale(.94); transition: transform .35s var(--ts-ease); }
.tasito.lightbox.open img { transform: scale(1); }
.tasito.lightbox .lb-close { position: absolute; top: 22px; right: 26px; color: #fff; font-size: 2rem; background: none; border: 0; line-height: 1; cursor: pointer; }

/* ======================================================================== */
/* PRICING                                                                   */
/* ======================================================================== */
.tasito.pricing { padding-block: var(--ts-section-y); background: linear-gradient(180deg,#eaf4fb,#ffffff); }
.tasito.pricing .pricing-note { text-align: center; color: var(--ts-ink-soft); margin-bottom: .3rem; }
.tasito.pricing .pricing-note b { color: var(--ts-brand-600); }
.tasito.pricing .pricing-warn { text-align: center; font-style: italic; color: var(--ts-muted); font-size: .9rem; margin-bottom: 2.4rem; }
.tasito.pricing .price-card { max-width: 760px; margin-inline: auto; background: rgba(255,255,255,.9); border: 1px solid var(--ts-line); border-radius: var(--ts-r-lg); box-shadow: var(--ts-sh-md); overflow: hidden; }
.tasito.pricing .price-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.6rem; border-bottom: 1px solid var(--ts-line); transition: background .25s; }
.tasito.pricing .price-row:last-child { border-bottom: 0; }
.tasito.pricing .price-row:hover { background: var(--ts-brand-50); }
.tasito.pricing .price-row .svc { display: flex; align-items: center; gap: .9rem; font-weight: 600; color: var(--ts-ink); }
.tasito.pricing .price-row .svc i { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--ts-brand-100); color: var(--ts-brand); font-size: .95rem; }
.tasito.pricing .price-row .amt { font-weight: 800; color: var(--ts-ink); white-space: nowrap; }
.tasito.pricing .price-row.featured { background: linear-gradient(90deg,rgba(2,132,199,.08),transparent); }
.tasito.pricing .price-row.featured .svc, .tasito.pricing .price-row.featured .amt { color: var(--ts-brand-600); }
.tasito.pricing .price-row.featured .amt { font-size: 1.1rem; }

/* ======================================================================== */
/* FORM                                                                      */
/* ======================================================================== */
.tasito.formscene { position: relative; color: #fff; padding-block: var(--ts-section-y); overflow: hidden; background: #0c2f45; }
.tasito.formscene .bg-deep { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.tasito.formscene .bg-deep img { width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.tasito.formscene .bg-deep::after { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 500px at 15% 0%,rgba(56,189,248,.30),transparent 60%), radial-gradient(600px 500px at 90% 100%,rgba(20,184,166,.22),transparent 60%), linear-gradient(160deg,rgba(12,47,69,.94),rgba(8,50,75,.9) 55%,rgba(7,37,54,.96)); }
.tasito.formscene .wrap { position: relative; z-index: 1; }
.tasito.formscene .form-card { max-width: 780px; margin-inline: auto; background: #fff; color: var(--ts-ink); border-radius: var(--ts-r-xl); box-shadow: var(--ts-sh-lg); padding: clamp(1.8rem,4vw,3rem); }
.tasito.formscene .form-card .section-head { margin-bottom: 2rem; }
.tasito.formscene .form-card .section-head h2 { color: var(--ts-ink); }
.tasito.formscene .form-card .section-head p { color: var(--ts-muted); font-size: 1rem; }
.tasito .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.tasito .field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.tasito .field.full { grid-column: 1/-1; }
.tasito .field label { font-weight: 600; font-size: .9rem; color: var(--ts-ink-soft); }
.tasito .field input, .tasito .field select, .tasito .field textarea { width: 100%; padding: .85rem 1rem; border: 1.5px solid var(--ts-line); border-radius: var(--ts-r-sm); font-family: inherit; font-size: 1rem; color: var(--ts-ink); background: var(--ts-cream); transition: border-color .25s, box-shadow .25s; }
.tasito .field input:focus, .tasito .field select:focus, .tasito .field textarea:focus { outline: none; border-color: var(--ts-brand); box-shadow: 0 0 0 4px rgba(2,132,199,.12); background: #fff; }
.tasito .svc-label { font-weight: 600; font-size: .9rem; color: var(--ts-ink-soft); margin-bottom: .6rem; display: block; }
.tasito .svc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem; margin-bottom: 1.3rem; }
.tasito .svc-check { display: flex; align-items: center; gap: .6rem; padding: .7rem .85rem; border: 1.5px solid var(--ts-line); border-radius: var(--ts-r-sm); cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--ts-ink-soft); transition: border-color .2s, background .2s, color .2s; user-select: none; }
.tasito .svc-check input { width: 18px; height: 18px; accent-color: var(--ts-brand); }
.tasito .svc-check:has(input:checked) { border-color: var(--ts-brand); background: var(--ts-brand-50); color: var(--ts-brand-600); }
.tasito .consent { display: flex; align-items: flex-start; gap: .6rem; margin: 1.2rem 0; font-size: .88rem; color: var(--ts-ink-soft); }
.tasito .consent input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--ts-brand); }
.tasito .form-note { text-align: center; font-size: .82rem; color: var(--ts-muted); margin-top: .9rem; }
.tasito .form-status { text-align: center; font-weight: 700; color: var(--ts-brand-600); margin-top: 1rem; min-height: 1.2em; }

/* ======================================================================== */
/* TESTIMONIALS                                                              */
/* ======================================================================== */
.tasito.testimonials { padding-block: var(--ts-section-y); background: #ffffff; }
.tasito.testimonials .testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; }
.tasito .testi { background: rgba(255,255,255,.85); border: 1px solid var(--ts-line); border-radius: var(--ts-r-lg); padding: 2rem 1.8rem; box-shadow: var(--ts-sh-sm); position: relative; transition: transform .4s var(--ts-ease), box-shadow .4s var(--ts-ease); }
.tasito .testi:hover { transform: translateY(-6px); box-shadow: var(--ts-sh-md); }
.tasito .testi .stars { color: var(--ts-star); margin-bottom: 1rem; letter-spacing: 2px; }
.tasito .testi .quote { font-size: 1.05rem; color: var(--ts-ink); font-style: italic; margin-bottom: 1.3rem; line-height: 1.6; }
.tasito .testi .who { display: flex; align-items: center; gap: .75rem; }
.tasito .testi .avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(140deg,var(--ts-brand-300),var(--ts-brand-600)); color: #fff; display: grid; place-items: center; font-weight: 800; }
.tasito .testi .who b { display: block; font-size: .95rem; }
.tasito .testi .who small { color: var(--ts-muted); }
.tasito .testi .qmark { position: absolute; top: 1rem; right: 1.4rem; font-family: var(--ts-display); font-size: 3.5rem; color: var(--ts-brand-100); line-height: 1; }

/* ======================================================================== */
/* FOOTER                                                                    */
/* ======================================================================== */
.tasito.footer { background: #071d2b; color: #cdd9e1; padding-top: clamp(4rem,8vw,6rem); padding-bottom: 2rem; }
.tasito.footer .footer-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem,6vw,5rem); margin-bottom: 3rem; }
.tasito.footer .footer-logo { height: 92px; width: auto; margin-bottom: 1.4rem; filter: brightness(1.15); }
.tasito.footer .footer-seo { font-size: .92rem; line-height: 1.75; color: #94a9b6; max-width: 40rem; }
.tasito.footer .footer-seo strong { color: #e6eef3; font-weight: 600; }
.tasito.footer h4 { color: #fff; font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1.2rem; }
.tasito.footer .footer-contact { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .9rem; font-size: .92rem; }
.tasito.footer .footer-contact li { display: flex; align-items: flex-start; gap: .8rem; }
.tasito.footer .footer-contact i { color: var(--ts-brand-300); margin-top: 3px; width: 18px; }
.tasito.footer .footer-contact a:hover { color: #fff; }
.tasito.footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; font-size: .82rem; color: #7d94a2; }
.tasito.footer .footer-bottom a:hover { color: #fff; }

/* ======================================================================== */
/* FLOATING WHATSAPP (rendered by header widget)                             */
/* ======================================================================== */
.tasito.wa-float { position: fixed; bottom: 22px; right: 22px; z-index: 900; width: 62px; height: 62px; border-radius: 50%; background: var(--ts-wa); color: #fff; display: grid; place-items: center; font-size: 2rem; box-shadow: var(--ts-sh-wa); transition: transform .3s var(--ts-ease); }
.tasito.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ts-wa); animation: ts-wa-pulse 2.4s var(--ts-ease) infinite; z-index: -1; }
.tasito.wa-float:hover { transform: scale(1.1); }

/* ======================================================================== */
/* KEYFRAMES                                                                 */
/* ======================================================================== */
@keyframes ts-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes ts-floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes ts-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ts-wa-pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.9); opacity: 0; } }

/* ======================================================================== */
/* ANIMATION GATE — pre-animation states apply ONLY when JS enabled them.    */
/* JS off / editor / reduced-motion / error → everything fully visible.      */
/* ======================================================================== */
html.tasito-anim .tasito .reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ts-ease), transform .9s var(--ts-ease); }
html.tasito-anim .tasito .reveal.in { opacity: 1; transform: none; }

/* ======================================================================== */
/* EDITOR PREVIEW — neutralise motion so sections render flat & editable.    */
/* ======================================================================== */
body.elementor-editor-preview .tasito .reveal, .tasito.tasito-editor-preview .reveal { opacity: 1 !important; transform: none !important; }
body.elementor-editor-preview .tasito.header, .tasito.header.tasito-editor-preview { position: static !important; }
body.elementor-editor-preview .tasito.band .band-bg img, body.elementor-editor-preview .tasito.hero .hero-visual .img-slot img { animation: none !important; }

/* ======================================================================== */
/* THANK YOU                                                                 */
/* ======================================================================== */
.tasito.thankyou { padding-block: var(--ts-section-y); text-align: center; background: radial-gradient(900px 500px at 50% -10%, var(--ts-brand-100), transparent 60%), linear-gradient(180deg,#f4fbff,#ffffff); }
.tasito.thankyou .ty-inner { max-width: 40rem; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.tasito.thankyou .ty-icon { font-size: 4.5rem; color: var(--ts-wa); line-height: 1; margin-bottom: 1.4rem; animation: ts-ty-pop .6s var(--ts-ease) both; }
.tasito.thankyou .ty-icon svg { width: 1em; height: 1em; fill: currentColor; }
.tasito.thankyou .eyebrow { margin-bottom: .9rem; }
.tasito.thankyou h1 { font-size: clamp(2.4rem,5vw,3.6rem); line-height: 1.05; margin-bottom: 1rem; }
.tasito.thankyou p { font-size: var(--ts-fs-lead, 1.2rem); font-size: clamp(1.05rem,1.5vw,1.25rem); color: var(--ts-ink-soft); margin-bottom: 2rem; }
.tasito.thankyou .ty-cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
@keyframes ts-ty-pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }

/* ======================================================================== */
/* NATIVE ELEMENTOR (PRO) FORM — TASITO skin                                 */
/* Add these classes in the editor (Advanced → CSS Classes):                 */
/*   • Section (the dark scene)          → tasito-form-scene                  */
/*   • Inner Column/Container (the card)  → tasito-form-card                   */
/*   • The Elementor Form widget          → tasito-form                        */
/* All three force LTR so the form stays English on an RTL (Hebrew) site.     */
/* ======================================================================== */
.tasito-form-scene, .tasito-form-card, .tasito-form { direction: ltr; text-align: left; }

/* --- Scene: cinematic dark background with the plugin's laundry photo --- */
.tasito-form-scene { position: relative; overflow: hidden; background-color: #0c2f45; }
.tasito-form-scene::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(700px 500px at 15% 0%, rgba(56,189,248,.30), transparent 60%),
    radial-gradient(600px 500px at 90% 100%, rgba(20,184,166,.22), transparent 60%),
    linear-gradient(160deg, rgba(12,47,69,.94), rgba(8,50,75,.9) 55%, rgba(7,37,54,.96)),
    url(../media/form-bg.jpg);
  background-size: cover; background-position: center;
}
/* keep the section's own content above the overlay (old sections + flex containers) */
.tasito-form-scene > .elementor-container,
.tasito-form-scene > .e-con-inner,
.tasito-form-scene > .elementor-widget-wrap { position: relative; z-index: 1; }

/* --- Card: white rounded panel that holds heading + form --- */
.tasito-form-card {
  background: #fff; border-radius: var(--ts-r-xl);
  box-shadow: var(--ts-sh-lg); padding: clamp(1.8rem, 4vw, 3rem) !important;
}

/* --- Fields --- */
.tasito-form .elementor-field-group > .elementor-field-label {
  font-weight: 600; font-size: .9rem; color: var(--ts-ink-soft); margin-bottom: .4rem;
}
.tasito-form .elementor-field-textual,
.tasito-form select.elementor-field {
  width: 100%; padding: .85rem 1rem; border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-sm); background: var(--ts-cream);
  font-family: var(--ts-font); font-size: 1rem; color: var(--ts-ink);
  transition: border-color .25s, box-shadow .25s;
}
.tasito-form .elementor-field-textual:focus,
.tasito-form select.elementor-field:focus {
  outline: none; border-color: var(--ts-brand);
  box-shadow: 0 0 0 4px rgba(2,132,199,.12); background: #fff;
}
.tasito-form textarea.elementor-field-textual { min-height: 120px; }

/* --- Checkbox group as chips (like the original service selector) --- */
.tasito-form .elementor-field-type-checkbox .elementor-field-subgroup {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem;
}
.tasito-form .elementor-field-type-checkbox .elementor-field-subgroup.elementor-subgroup-inline { display: grid; }
.tasito-form .elementor-field-type-checkbox .elementor-field-option {
  display: flex; align-items: center; gap: .55rem; margin: 0;
  padding: .7rem .85rem; border: 1.5px solid var(--ts-line); border-radius: var(--ts-r-sm);
  font-weight: 600; font-size: .9rem; color: var(--ts-ink-soft); cursor: pointer; transition: border-color .2s, background .2s, color .2s;
}
.tasito-form .elementor-field-type-checkbox .elementor-field-option:has(input:checked) {
  border-color: var(--ts-brand); background: var(--ts-brand-50); color: var(--ts-brand-600);
}
.tasito-form .elementor-field-subgroup input[type="checkbox"],
.tasito-form .elementor-field-subgroup input[type="radio"] { width: 18px; height: 18px; accent-color: var(--ts-brand); margin: 0; }
.tasito-form .elementor-field-type-acceptance .elementor-field-option { font-size: .88rem; color: var(--ts-ink-soft); }

/* --- Submit button: dark, full width like the original --- */
.tasito-form .elementor-button,
.tasito-form button[type="submit"] {
  background: var(--ts-ink); color: #fff; border: 0; border-radius: 14px;
  font-weight: 700; font-size: 1.05rem; width: 100%; padding: 1rem 1.5rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  transition: transform .35s var(--ts-ease), background .3s;
}
.tasito-form .elementor-button:hover,
.tasito-form button[type="submit"]:hover { background: #000; transform: translateY(-2px); }
.tasito-form .elementor-message { text-align: center; font-weight: 700; }

/* ======================================================================== */
/* RESPONSIVE                                                                */
/* ======================================================================== */
@media (min-width: 768px) { .tasito.header .header-hours { display: inline-flex; } }

@media (max-width: 1024px) {
  .tasito.header .header-nav { display: none; }
  .tasito.header .burger { display: flex; }
  body.tasito-menu-open .tasito.header .header-nav { display: flex; position: absolute; top: 76px; inset-inline: 0; flex-direction: column; background: #fff; padding: 1.2rem var(--ts-gutter); box-shadow: var(--ts-sh-md); gap: 1rem; }
}

@media (max-width: 980px) {
  .tasito.hero .hero-grid { grid-template-columns: 1fr; }
  .tasito.hero .hero-visual { max-width: 460px; margin: .5rem auto 0; }
  .tasito.why .why-grid { grid-template-columns: 1fr; }
  .tasito.why .why-visual { max-width: 560px; margin-inline: auto; }
  .tasito.services .services-grid { grid-template-columns: 1fr 1fr; }
  .tasito.stats .stats-grid { grid-template-columns: 1fr 1fr; }
  .tasito.gallery .gallery-grid { columns: 2; }
}

@media (max-width: 720px) {
  .tasito.steps .steps-grid { grid-template-columns: 1fr; }
  .tasito.steps .step-line { display: none; }
  .tasito.services .services-grid { grid-template-columns: 1fr; }
  .tasito .form-grid { grid-template-columns: 1fr; }
  .tasito .svc-grid { grid-template-columns: 1fr 1fr; }
  .tasito.testimonials .testi-grid { grid-template-columns: 1fr; }
  .tasito .testi.opt { display: none; }
  .tasito.footer .footer-grid { grid-template-columns: 1fr; }
  .tasito.hero .hero-float.f1 { left: 0; }
  .tasito.hero .hero-float.f2 { right: 0; }
  .tasito.hero .hero-cta .btn { width: 100%; }
  .tasito.marquee .marquee-item { font-size: 1.1rem; }
  .tasito .service-card { min-height: 260px; }
}

@media (max-width: 480px) {
  .tasito.gallery .gallery-grid { columns: 1; }
  .tasito.stats .stats-grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .tasito * { animation-duration: .001s !important; transition-duration: .001s !important; }
}