/* EVision UI features (2026-10-20): sticky mobile bar, quote wizard, page transitions,
   stat icons, trust strip, review snippet. Shared by index, projects and the 3 SEO pages. */
:root{--evu-deep:#02342B;--evu-ink:#02241C;--evu-brand:#6CBE64;--evu-lime:#92D050;--evu-gold:#FEC463;--evu-sub:#4A5B50;--evu-line:rgba(2,52,43,.10);--evu-ease:cubic-bezier(.16,1,.3,1)}

/* ───────── 3. cross-document view transitions ───────── */
@view-transition{navigation:auto}
#nav,header.nav{view-transition-name:evhead}
.evb{view-transition-name:evbar}
::view-transition-old(root){animation:evvt-out .2s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:evvt-in .38s var(--evu-ease) both}
::view-transition-group(evhead),::view-transition-group(evbar){animation-duration:.3s}
@keyframes evvt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes evvt-in{from{opacity:0;transform:translateY(16px)}}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ───────── 1. sticky mobile action bar ───────── */
.evb{display:none}
@media (max-width:760px){
  html.evb-on .evb{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:480;
    padding-bottom:env(safe-area-inset-bottom);background:rgba(2,52,43,.97);
    border-top:1px solid rgba(146,208,80,.28);box-shadow:0 -12px 30px -12px rgba(2,36,28,.45);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    transform:translateZ(0);transition:transform .34s var(--evu-ease)}
  html.evb-on .evb.evb-hide,html.evq-open .evb{transform:translateY(calc(100% + 6px))}
  .evb-b{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;height:56px;margin:0;padding:0 6px;
    border:0;background:none;color:#fff;text-decoration:none;cursor:pointer;
    font:600 14px/1 Poppins,system-ui,sans-serif;letter-spacing:0;-webkit-tap-highlight-color:transparent;white-space:nowrap}
  .evb-b+.evb-b{box-shadow:inset 1px 0 0 rgba(255,255,255,.1)}
  .evb-b svg{width:19px;height:19px;flex:none;fill:none;stroke:var(--evu-lime);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .evb-b .wa{fill:var(--evu-lime);stroke:none}
  .evb-b:active{background:rgba(255,255,255,.06)}
  .evb-q{background:var(--evu-lime);color:var(--evu-ink)}
  .evb-q svg{stroke:var(--evu-ink)}
  .evb-q:active{background:#a5dc68}
  /* the bar replaces the floating chat bubble on phones */
  html.evb-on #chat{display:none!important}
  /* the page end clears the bar */
  html.evb-on footer,html.evb-on .foot{padding-bottom:calc(86px + env(safe-area-inset-bottom))!important}
}

/* ───────── 2. quote wizard ───────── */
html.evq-open,html.evq-open body{overflow:hidden}
.evq{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;font-family:Poppins,system-ui,sans-serif}
.evq[hidden]{display:none}
.evq-bg{position:absolute;inset:0;background:rgba(2,36,28,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .3s}
.evq.on .evq-bg{opacity:1}
.evq-sheet{position:relative;width:100%;max-width:540px;max-height:calc(100% - 20px);overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:#fff;color:#10201A;border-radius:26px;box-shadow:0 40px 90px -30px rgba(2,36,28,.6);padding:22px 24px 20px;
  opacity:0;transform:translateY(16px) scale(.98);transition:opacity .3s,transform .4s var(--evu-ease)}
.evq.on .evq-sheet{opacity:1;transform:none}
.evq-grip{display:none}
.evq-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.evq-k{display:block;font:700 11px Jura,ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:#367E32}
.evq-hd h2{margin:4px 0 0;font:700 22px/1.15 Poppins,system-ui,sans-serif;letter-spacing:-.02em;color:var(--evu-deep)}
.evq-x{flex:none;width:44px;height:44px;margin:-6px -8px 0 0;border:0;border-radius:50%;background:#F1F5F2;color:var(--evu-deep);display:grid;place-items:center;cursor:pointer}
.evq-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.evq-prog{display:flex;gap:6px;margin:14px 0 4px}
.evq-prog i{flex:1;height:4px;border-radius:4px;background:#E3EBE5;overflow:hidden;position:relative}
.evq-prog i:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--evu-brand),var(--evu-lime));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--evu-ease)}
.evq-prog i.on:after{transform:none}
.evq-step{display:none;padding-top:10px}
.evq-step.on{display:block;animation:evq-in .35s var(--evu-ease)}
@keyframes evq-in{from{opacity:0;transform:translateX(14px)}}
.evq-step h3{margin:6px 0 12px;font:600 17px/1.3 Poppins,system-ui,sans-serif;color:var(--evu-deep);outline:none}
.evq-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.evq-opt{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:62px;padding:12px 14px 12px 16px;
  border:1.5px solid #DCE6DF;border-radius:16px;background:#fff;color:var(--evu-deep);text-align:left;cursor:pointer;
  font:600 15px/1.25 Poppins,system-ui,sans-serif;transition:border-color .2s,background .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.evq-opt small{display:block;margin-top:3px;font:500 12.5px/1.3 Poppins,system-ui,sans-serif;color:var(--evu-sub)}
.evq-opt[aria-pressed="true"]{border-color:var(--evu-brand);background:#F1F9EF;box-shadow:inset 0 0 0 1px var(--evu-brand)}
.evq-opt[aria-pressed="true"]:after{content:'';position:absolute;right:12px;top:12px;width:18px;height:18px;border-radius:50%;
  background:var(--evu-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-8' fill='none' stroke='%2302241C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.evq-opt:focus-visible,.evq-x:focus-visible,.evq-ft button:focus-visible,.evq-ft a:focus-visible,.evq-chip:focus-visible,.evq input:focus-visible{outline:3px solid rgba(108,190,100,.55);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.evq-opt:hover{border-color:var(--evu-brand)}.evq-chip:hover{border-color:var(--evu-brand)}}
.evq-opts .evq-opt:last-child:nth-child(odd){grid-column:1/-1}
.evq-f{display:block;margin-top:4px}
.evq-f+.evq-f{margin-top:16px}
.evq-f label{display:block;font:600 13px Poppins,system-ui,sans-serif;color:var(--evu-deep);margin-bottom:6px}
.evq-f label small{font-weight:400;color:var(--evu-sub)}
.evq input{width:100%;height:52px;padding:0 16px;border:1.5px solid #DCE6DF;border-radius:14px;background:#fff;color:#10201A;font:500 16px Poppins,system-ui,sans-serif;-webkit-appearance:none;appearance:none}
.evq input:focus{border-color:var(--evu-brand);outline:none}
.evq input.bad{border-color:#D9822B}
.evq-hint{display:none;margin-top:6px;font-size:12.5px;color:#A85B12}
.evq-hint.on{display:block}
.evq-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.evq-chip{min-height:40px;padding:0 14px;border:1.5px solid #DCE6DF;border-radius:100px;background:#fff;color:var(--evu-deep);font:500 13.5px Poppins,system-ui,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
.evq-chip[aria-pressed="true"]{border-color:var(--evu-brand);background:#F1F9EF}
.evq-ft{display:flex;align-items:center;gap:10px;margin-top:20px}
.evq-ft button,.evq-ft a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 20px;border-radius:100px;border:0;cursor:pointer;
  font:600 15px Poppins,system-ui,sans-serif;text-decoration:none;-webkit-tap-highlight-color:transparent}
.evq-back{background:#F1F5F2;color:var(--evu-deep)}
.evq-back[hidden]{display:none}
.evq-next,.evq-send{flex:1;background:var(--evu-deep);color:#fff;box-shadow:inset 0 -2px 0 var(--evu-lime)}
.evq-next[disabled]{opacity:.4;cursor:default}
.evq-send{background:var(--evu-brand);color:var(--evu-ink);box-shadow:0 12px 26px -10px rgba(108,190,100,.7)}
.evq-send svg{width:20px;height:20px;fill:currentColor}
.evq-next[hidden],.evq-send[hidden]{display:none}
.evq-note{margin-top:12px;font-size:12px;line-height:1.5;color:var(--evu-sub);text-align:center}
.evq-done{display:none;text-align:center;padding:18px 4px 6px}
.evq-done.on{display:block;animation:evq-in .35s var(--evu-ease)}
.evq-done .ok{width:58px;height:58px;margin:0 auto 12px;border-radius:50%;background:#F1F9EF;display:grid;place-items:center}
.evq-done .ok svg{width:28px;height:28px;fill:none;stroke:#367E32;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.evq-done h3{font:700 19px Poppins,system-ui,sans-serif;color:var(--evu-deep);outline:none}
.evq-done p{margin-top:6px;font-size:14px;color:var(--evu-sub);line-height:1.55}
.evq-done .evq-ft{justify-content:center}
.evq-done .evq-ft button{background:var(--evu-deep);color:#fff;flex:0 1 220px}
@media (max-width:760px){
  .evq{align-items:flex-end;padding:0}
  .evq-sheet{max-width:none;max-height:92%;border-radius:24px 24px 0 0;padding:8px 18px calc(18px + env(safe-area-inset-bottom));transform:translateY(100%)}
  .evq.on .evq-sheet{transform:none}
  .evq-sheet.drag{transition:none}
  .evq-grip{display:block;width:44px;height:5px;border-radius:5px;background:#D5DFD8;margin:4px auto 12px}
  .evq-opts{grid-template-columns:1fr}
  .evq-opt{min-height:58px}
}
@media (prefers-reduced-motion:reduce){
  .evq-bg,.evq-sheet,.evq-prog i:after{transition:none}
  .evq-step.on,.evq-done.on{animation:none}
}

/* ───────── 4. homepage stat icons ───────── */
.evs-ic{display:block;width:34px;height:34px;margin-bottom:14px;overflow:visible;fill:none;stroke:var(--evu-lime);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.evs-ic .d{stroke-dasharray:1;stroke-dashoffset:0}
.evs-ic .f{stroke:none;fill:var(--evu-lime)}
.evs-ic .g{stroke:var(--evu-brand);opacity:.55}
/* armed by JS (so no-JS keeps the icons drawn), drawn when the strip scrolls in */
.stats.evs-arm .evs-ic .d{stroke-dashoffset:1}
.stats.evs-arm .evs-ic .a{opacity:0}
.stats.evs-in .evs-ic .d{stroke-dashoffset:0;transition:stroke-dashoffset 1.3s cubic-bezier(.65,0,.35,1)}
.stats.evs-in .stat:nth-child(2) .evs-ic .d{transition-delay:.15s}
.stats.evs-in .stat:nth-child(3) .evs-ic .d{transition-delay:.3s}
.stats.evs-in .stat:nth-child(4) .evs-ic .d{transition-delay:.45s}
.stats.evs-in .evs-ic .a{opacity:1;transition:opacity .5s 1.3s}
/* looping accents */
.evs-clock .a{transform-origin:16px 16px;animation:evs-spin 6s linear infinite}
.evs-bus .a{animation:evs-run 2.6s cubic-bezier(.45,0,.55,1) infinite}
.evs-dc .a rect{transform-box:fill-box;transform-origin:50% 100%;animation:evs-bar 2.4s ease-in-out infinite}
.evs-dc .a rect:nth-child(2){animation-delay:.25s}.evs-dc .a rect:nth-child(3){animation-delay:.5s}
.evs-ac .a{stroke-dasharray:.08 .92;animation:evs-flow 2.2s linear infinite}
@keyframes evs-spin{to{transform:rotate(360deg)}}
@keyframes evs-run{0%{transform:translateY(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(16px);opacity:0}}
@keyframes evs-bar{0%,15%{transform:scaleY(.15)}45%,75%{transform:scaleY(1)}100%{transform:scaleY(.15)}}
@keyframes evs-flow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .stats.evs-arm .evs-ic .d{stroke-dashoffset:0}
  .stats.evs-arm .evs-ic .a{opacity:1}
  .evs-ic .a,.evs-ic .a rect{animation:none!important;transition:none!important}
  .stats .evs-ac .a{display:none}
}
@media (max-width:760px){.evs-ic{width:30px;height:30px;margin-bottom:12px}}

/* ───────── 5. trust strip ───────── */
.evt{position:relative;z-index:2;background:#fff;border-bottom:1px solid var(--evu-line);font-family:Poppins,system-ui,sans-serif}
.evt-in{max-width:1180px;margin:0 auto;padding:16px clamp(20px,5vw,56px)}
.evt ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px}
.evt li{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 16px 6px 6px;border:1px solid var(--evu-line);border-radius:100px;background:#F7FAF7;
  font-size:13.5px;font-weight:500;line-height:1.25;color:var(--evu-deep);white-space:nowrap}
.evt li i{flex:none;width:32px;height:32px;border-radius:50%;background:rgba(108,190,100,.14);display:grid;place-items:center}
.evt li svg{width:17px;height:17px;fill:none;stroke:#367E32;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){
  .evt-in{padding:12px 0}
  .evt ul{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
    padding:0 20px;scroll-padding:0 20px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent)}
  .evt ul::-webkit-scrollbar{display:none}
  .evt li{flex:none;scroll-snap-align:start;font-size:13px}
  .evt ul:after{content:'';flex:none;width:6px}
}
/* homepage: sits on the paper band next to "Sites we delivered" */
#trust.evt{background:var(--paper,#F5F8F5);border-top:1px solid var(--evu-line);border-bottom:0}
#trust.evt li{background:#fff}

/* ───────── 6. review snippet ───────── */
.evr{display:flex;align-items:flex-start;gap:12px;max-width:440px;margin-top:20px;padding:14px 16px;border-radius:18px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;text-decoration:none;font-family:Poppins,system-ui,sans-serif;
  opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s var(--evu-ease)}
.evr[hidden]{display:none}
.evr.on{opacity:1;transform:none}
.evr .av{flex:none;width:38px;height:38px;border-radius:50%;background:rgba(146,208,80,.16);color:var(--evu-lime);display:grid;place-items:center;font:700 13px Jura,ui-monospace,monospace;letter-spacing:.06em}
.evr .st{display:flex;gap:2px}.evr .st svg{width:13px;height:13px}
.evr q{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin-top:5px;font-size:14px;line-height:1.5;font-weight:400;color:rgba(255,255,255,.88);quotes:'\201C' '\201D'}
.evr .who{display:block;margin-top:6px;font-size:12.5px;color:rgba(255,255,255,.6)}
.evr .who b{color:#fff;font-weight:600}
.evr .more{display:inline-block;margin-top:4px;font-size:12.5px;font-weight:600;color:var(--evu-lime);text-decoration:none}
@media (prefers-reduced-motion:reduce){.evr{transition:none}}

/* ───────── 7. Arabic / RTL (2026-10-20) — only matches html[dir=rtl], English is untouched ───────── */
[dir=rtl] .evq,[dir=rtl] .evb-b,[dir=rtl] .evt,[dir=rtl] .evr{font-family:Poppins,'IBM Plex Sans Arabic',system-ui,sans-serif}
[dir=rtl] .evq *,[dir=rtl] .evb-b,[dir=rtl] .evt li,[dir=rtl] .evr *{letter-spacing:0}
[dir=rtl] .evq-k{font-size:12.5px}
[dir=rtl] .evq-hd h2,[dir=rtl] .evq-step h3,[dir=rtl] .evq-done h3{line-height:1.4}
[dir=rtl] .evq-x{margin:-6px 0 0 -8px}
[dir=rtl] .evq-prog i:after{transform-origin:right;background:linear-gradient(270deg,var(--evu-brand),var(--evu-lime))}
[dir=rtl] .evq-step.on{animation-name:evq-in-rtl}
@keyframes evq-in-rtl{from{opacity:0;transform:translateX(-14px)}}
[dir=rtl] .evq-opt{text-align:right;padding:12px 16px 12px 14px;line-height:1.4}
[dir=rtl] .evq-opt small{unicode-bidi:plaintext}
[dir=rtl] .evq-opt[aria-pressed="true"]:after{right:auto;left:12px}
[dir=rtl] .evq-f label{line-height:1.5}
@media (prefers-reduced-motion:reduce){[dir=rtl] .evq-step.on{animation:none}}
@media (max-width:760px){
  [dir=rtl] .evb-b{font-size:14.5px}
  [dir=rtl] .evb-b+.evb-b{box-shadow:inset -1px 0 0 rgba(255,255,255,.1)}
  [dir=rtl] .evt ul{-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(270deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent)}
}
[dir=rtl] .evt li{padding:6px 6px 6px 16px;font-size:14px}
[dir=rtl] .evr q{unicode-bidi:plaintext;line-height:1.6}
[dir=rtl] .evr .who{unicode-bidi:plaintext}