/* Hev Services Showcase v1.0.9 — clean consolidated frontend styles */

.hev-services-showcase,
.hev-services-showcase *{box-sizing:border-box}

.hev-services-showcase{
  --hev-section-title:#313030;
  --hev-service-title:#313030;
  --hev-body-text:#4f4f4f;
  --hev-quick-label:#4b4b4b;
  --hev-button-bg:#313030;
  --hev-button-text:#fff;
  --hev-nav:#313030;
  position:relative;
  isolation:isolate;
  direction:rtl;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow:hidden;
  background:transparent;
  color:var(--hev-section-title);
  font-family:inherit;
  -webkit-tap-highlight-color:transparent!important;
}

.hev-services-showcase img{
  -webkit-user-drag:none;
  user-select:none;
}

.hev-services-showcase a,
.hev-services-showcase button{
  font:inherit;
  -webkit-tap-highlight-color:transparent!important;
  -webkit-touch-callout:none;
}

.hev-showcase-content{
  position:relative;
  z-index:2;
  width:100%;
  min-width:0;
}

/* Background smoke */
.hev-incense-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  z-index:0;
  transform:translateZ(0);
}

.hev-incense-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 16%,rgba(255,255,255,.16),transparent 22%),
    radial-gradient(circle at 88% 76%,rgba(255,255,255,.14),transparent 20%),
    linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0) 18%,rgba(255,255,255,.03) 82%,rgba(255,255,255,.04));
  mix-blend-mode:screen;
}

/* =========================================================
   QUICK CATEGORIES — same approved appearance, native scrolling
   ========================================================= */
.hev-quick-section{
  position:relative;
  overflow:visible!important;
  padding:12px 0 6px;
  z-index:5;
  background:transparent;
}

.hev-quick-rail-shell{
  overflow:hidden;
  width:100%;
  touch-action:pan-x pan-y!important;
}

.hev-quick-rail{
  display:flex;
  align-items:flex-start;
  gap:18px;
  width:100%;
  max-width:none;
  overflow-x:auto;
  overflow-y:hidden;
  justify-content:flex-start;
  padding:8px calc(50% - 50px) 6px;
  scrollbar-width:none;
  -ms-overflow-style:none;
  scroll-snap-type:none!important;
  scroll-behavior:auto!important;
  overscroll-behavior-x:contain!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-x pan-y!important;
  user-select:none;
  direction:ltr;
  cursor:grab;
}

.hev-quick-rail::-webkit-scrollbar{display:none}
.hev-quick-rail.is-dragging{cursor:grabbing}

button.hev-quick-item,
button.hev-quick-item:hover,
button.hev-quick-item:focus,
button.hev-quick-item:focus-visible,
button.hev-quick-item:active{
  all:unset!important;
  box-sizing:border-box!important;
  flex:0 0 auto!important;
  min-width:100px!important;
  width:100px!important;
  direction:rtl!important;
  text-align:center!important;
  cursor:pointer!important;
  color:inherit!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  scroll-snap-align:none!important;
  scroll-snap-stop:normal!important;
  -webkit-tap-highlight-color:transparent!important;
}

.hev-quick-circle{
  width:100px;
  height:100px;
  margin:0 auto;
  overflow:hidden;
  display:block;
  position:relative;
  border-radius:50%;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(49,48,48,.09);
  box-shadow:0 10px 24px rgba(23,23,23,.04);
  transition:
    transform .22s cubic-bezier(.22,.78,.22,1),
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
  transform:translateZ(0);
  backface-visibility:hidden;
}

.hev-quick-circle::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  border:1px solid rgba(49,48,48,.06);
  pointer-events:none;
}

.hev-quick-image{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:50%!important;
  transition:transform .22s cubic-bezier(.22,.78,.22,1)!important;
}

.hev-quick-label{
  display:block;
  margin-top:10px;
  min-height:34px;
  color:var(--hev-quick-label);
  font-size:11.2px;
  line-height:1.45;
  white-space:normal;
  transition:color .18s ease;
}

/* Zoom only on actual click/open. */
.hev-quick-item.is-open .hev-quick-circle{
  transform:translateY(-2px) scale(1.055);
  border-color:rgba(49,48,48,.34);
  box-shadow:0 16px 32px rgba(23,23,23,.08);
  background:rgba(255,255,255,.96);
}
.hev-quick-item.is-open .hev-quick-circle::after{border-color:rgba(49,48,48,.12)}
.hev-quick-item.is-open .hev-quick-image{transform:scale(1.025)!important}
.hev-quick-item.is-open .hev-quick-label{color:var(--hev-section-title)}

/* Quick description */
.hev-quick-desc-slot{
  position:relative;
  height:0;
  max-height:none!important;
  overflow:hidden!important;
  opacity:0;
  padding:0 28px!important;
  transition:height .30s cubic-bezier(.22,.78,.22,1),opacity .20s ease!important;
  will-change:height;
}
.hev-quick-desc-slot.is-open{opacity:1}

.hev-quick-desc-card{
  --hev-pointer-x:50%;
  position:relative;
  width:fit-content;
  min-width:260px;
  max-width:min(94vw,680px);
  margin:9px auto 20px;
  padding:14px 18px 14px 48px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.92));
  border:1px solid rgba(49,48,48,.12);
  border-radius:22px;
  box-shadow:0 10px 24px rgba(23,23,23,.06);
  opacity:0;
  transform:translateY(5px) scale(.994);
  transition:opacity .20s ease,transform .28s cubic-bezier(.22,.78,.22,1);
  pointer-events:auto;
}

.hev-quick-desc-card::before{
  content:"";
  position:absolute;
  top:-8px;
  left:var(--hev-pointer-x);
  width:16px;
  height:16px;
  background:rgba(255,255,255,.95);
  border-left:1px solid rgba(49,48,48,.12);
  border-top:1px solid rgba(49,48,48,.12);
  transform:translateX(-50%) rotate(45deg);
  border-top-left-radius:3px;
}

.hev-quick-desc-card.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

.hev-quick-desc-text{
  margin:0;
  text-align:center;
  color:var(--hev-body-text);
  font-size:13px;
  line-height:1.45;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

button.hev-quick-desc-close,
button.hev-quick-desc-close:hover,
button.hev-quick-desc-close:focus,
button.hev-quick-desc-close:focus-visible{
  all:unset!important;
  box-sizing:border-box!important;
  position:absolute!important;
  left:10px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:31px!important;
  height:31px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  border:1px solid rgba(49,48,48,.12)!important;
  background:#fff!important;
  color:var(--hev-section-title)!important;
  font-size:21px!important;
  line-height:1!important;
  cursor:pointer!important;
  box-shadow:0 6px 16px rgba(23,23,23,.05)!important;
  text-align:center!important;
  -webkit-tap-highlight-color:transparent!important;
}
button.hev-quick-desc-close:active{transform:translateY(-50%) scale(.96)!important}

/* Desktop helper rail */
.hev-quick-dragbar{
  display:none;
  width:min(520px,46vw);
  height:18px;
  margin:4px auto 2px;
  position:relative;
  cursor:pointer;
  touch-action:none;
  user-select:none;
}
.hev-quick-dragbar-track{
  position:absolute;
  left:0;
  right:0;
  top:8px;
  height:1px;
  border-radius:999px;
  background:rgba(49,48,48,.13);
}
.hev-quick-dragbar-thumb{
  all:unset!important;
  box-sizing:border-box!important;
  position:absolute!important;
  left:0;
  top:4px;
  width:74px!important;
  height:9px!important;
  border-radius:999px!important;
  background:rgba(49,48,48,.50)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset!important;
  cursor:grab!important;
  transform:translate3d(0,0,0);
  transition:background .15s ease;
}
.hev-quick-dragbar-thumb:hover{background:rgba(49,48,48,.68)!important}
.hev-quick-dragbar.is-dragging .hev-quick-dragbar-thumb{
  cursor:grabbing!important;
  background:rgba(49,48,48,.78)!important;
}
@media (hover:hover) and (pointer:fine){
  .hev-quick-dragbar{display:block}
}

/* =========================================================
   SERVICES — one clean layout source, no legacy overrides
   ========================================================= */
.hev-services{
  position:relative;
  background:transparent;
  padding:22px 0 64px;
  overflow:hidden;
}

.hev-head{text-align:center;padding:0 22px 10px}

.hev-section-title{
  margin:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  font-size:clamp(28px,4vw,44px);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1.25;
  color:var(--hev-section-title);
  opacity:0;
  transform:translateY(14px);
  transition:opacity .58s ease,transform .62s cubic-bezier(.22,.78,.22,1);
}

.hev-section-title::before,
.hev-section-title::after{
  content:"";
  display:block;
  width:58px;
  height:1px;
  opacity:0;
  transform:scaleX(.22);
  transition:opacity .5s ease,transform .62s cubic-bezier(.22,.78,.22,1);
}
.hev-section-title::before{
  transform-origin:right center;
  background:linear-gradient(90deg,rgba(49,48,48,0),rgba(49,48,48,.95),rgba(49,48,48,.16));
}
.hev-section-title::after{
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(49,48,48,.16),rgba(49,48,48,.95),rgba(49,48,48,0));
}
.hev-head.is-visible .hev-section-title{opacity:1;transform:translateY(0)}
.hev-head.is-visible .hev-section-title::before,
.hev-head.is-visible .hev-section-title::after{opacity:1;transform:scaleX(1)}

.hev-services-viewport{
  position:relative;
  width:100%;
  overflow:hidden;
  touch-action:pan-y!important;
  user-select:none;
  cursor:grab;
}
.hev-services-viewport.is-dragging{cursor:grabbing}

.hev-services-stage{
  position:relative;
  height:610px;
  overflow:hidden;
}

.hev-service-slide{
  position:absolute;
  top:0;
  left:50%;
  width:405px;
  height:585px;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  transition:transform .27s cubic-bezier(.22,.72,.22,1),opacity .20s ease;
  will-change:transform,opacity;
  pointer-events:none!important;
}

.hev-service-slide.no-transition{transition:none!important}

.hev-service-image{
  display:block!important;
  position:static!important;
  width:auto!important;
  height:auto!important;
  max-width:110%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  margin:0 auto!important;
}

.hev-service-slide[data-pos="0"]{
  transform:translateX(-50%) scale(1.08);
  opacity:1;
  z-index:3;
}
.hev-service-slide[data-pos="-1"]{
  transform:translateX(calc(-50% - min(25vw,360px))) scale(.84);
  opacity:.62;
  z-index:2;
}
.hev-service-slide[data-pos="1"]{
  transform:translateX(calc(-50% + min(25vw,360px))) scale(.84);
  opacity:.62;
  z-index:2;
}
.hev-service-slide[data-pos="-2"]{
  transform:translateX(calc(-50% - min(50vw,720px))) scale(.79);
  opacity:0;
  z-index:1;
}
.hev-service-slide[data-pos="2"]{
  transform:translateX(calc(-50% + min(50vw,720px))) scale(.79);
  opacity:0;
  z-index:1;
}
.hev-service-slide[data-pos="-3"],
.hev-service-slide[data-pos="3"]{
  opacity:0;
  pointer-events:none!important;
  z-index:0;
}

/* Fixed physical navigation lane: left arrow and right arrow cannot overlap or disappear due RTL. */
.hev-service-nav-layer{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:0!important;
  width:100%!important;
  height:610px!important;
  padding:0 42px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  direction:ltr!important;
  z-index:80!important;
  pointer-events:none!important;
  overflow:visible!important;
}

.hev-service-nav-layer>.hev-service-prev{order:1!important}
.hev-service-nav-layer>.hev-service-next{order:2!important}

.hev-service-nav-layer>button.hev-service-nav,
.hev-service-nav-layer>button.hev-service-nav:hover,
.hev-service-nav-layer>button.hev-service-nav:focus,
.hev-service-nav-layer>button.hev-service-nav:focus-visible,
.hev-service-nav-layer>button.hev-service-nav:active{
  all:unset!important;
  box-sizing:border-box!important;
  position:static!important;
  width:42px!important;
  height:42px!important;
  flex:0 0 42px!important;
  margin:0!important;
  border-radius:50%!important;
  border:1px solid rgba(49,48,48,.16)!important;
  background:rgba(255,255,255,.96)!important;
  color:var(--hev-nav)!important;
  box-shadow:0 8px 22px rgba(23,23,23,.06)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  transform:none!important;
  transition:background .15s ease,border-color .15s ease!important;
  animation:none!important;
  -webkit-tap-highlight-color:transparent!important;
  touch-action:manipulation!important;
}

.hev-service-nav-layer>button.hev-service-nav[hidden]{display:none!important}

.hev-service-nav svg{
  width:14px!important;
  height:14px!important;
  display:block!important;
  flex:0 0 14px!important;
  transform:none!important;
}
.hev-service-nav path{
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.45!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  vector-effect:non-scaling-stroke!important;
}

.hev-service-info{
  text-align:center;
  padding:0 24px;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
}

.hev-service-title{
  margin:0;
  color:var(--hev-service-title);
  font-size:clamp(23px,3vw,30px);
  font-weight:500;
  line-height:1.35;
}

.hev-service-desc{
  margin:10px auto 0;
  max-width:min(88vw,720px);
  color:var(--hev-body-text);
  font-size:11.5px;
  line-height:1.55;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.hev-service-cta,
.hev-service-cta:hover,
.hev-service-cta:focus,
.hev-service-cta:focus-visible{
  position:relative!important;
  display:inline-grid!important;
  width:auto!important;
  min-width:214px!important;
  max-width:min(88vw,270px)!important;
  grid-template-columns:20px auto 20px!important;
  align-items:center!important;
  justify-items:center!important;
  column-gap:10px!important;
  margin:16px auto 0!important;
  padding:12px 18px!important;
  border-radius:999px!important;
  background:var(--hev-button-bg)!important;
  border:1px solid rgba(49,48,48,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 20px rgba(23,23,23,.07)!important;
  color:var(--hev-button-text)!important;
  text-decoration:none!important;
  outline:none!important;
  white-space:nowrap!important;
  direction:ltr!important;
  transform-origin:center center!important;
  -webkit-tap-highlight-color:transparent!important;
}
.hev-service-cta::before{
  content:"";
  grid-column:1;
  grid-row:1;
  width:20px;
  height:1px;
}
.hev-service-cta::after{display:none!important}

.hev-service-cta-text{
  grid-column:2!important;
  grid-row:1!important;
  width:auto!important;
  text-align:center!important;
  color:var(--hev-button-text)!important;
  font-size:12px;
  line-height:1.2;
  white-space:nowrap!important;
  direction:rtl!important;
}

.hev-service-cta-arrow{
  position:static!important;
  grid-column:3!important;
  grid-row:1!important;
  width:20px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:var(--hev-button-text)!important;
  font-size:14px;
  line-height:1;
  transform:none!important;
}
.hev-service-cta:hover{
  transform:translateY(-1px)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 10px 22px rgba(23,23,23,.09)!important;
}
.hev-service-cta:active{transform:scale(.975)!important}
.hev-service-cta[hidden]{display:none!important}

/* Responsive */
@media(max-width:720px){
  .hev-quick-section{padding-top:12px}
  .hev-quick-rail{
    gap:13px;
    padding:7px 14px 6px!important;
  }
  button.hev-quick-item,
  button.hev-quick-item:hover,
  button.hev-quick-item:focus,
  button.hev-quick-item:active{
    min-width:92px!important;
    width:92px!important;
  }
  .hev-quick-circle{width:92px;height:92px}
  .hev-quick-label{font-size:10.6px;margin-top:8px;min-height:31px}
  .hev-quick-desc-card{min-width:240px;max-width:94vw;padding:13px 15px 13px 44px}
  .hev-quick-desc-text{font-size:11.6px}

  .hev-services{padding-top:22px;padding-bottom:52px}
  .hev-head{padding-bottom:10px}
  .hev-section-title{font-size:29px;gap:11px}
  .hev-section-title::before,.hev-section-title::after{width:34px}

  .hev-services-stage{height:555px}
  .hev-service-slide{
    width:74vw;
    max-width:332px;
    height:535px;
  }
  .hev-service-slide[data-pos="0"]{
    transform:translateX(-50%) scale(1.07);
    opacity:1;
  }
  .hev-service-slide[data-pos="-1"]{
    transform:translateX(calc(-50% - 43vw)) scale(.84);
    opacity:.62;
  }
  .hev-service-slide[data-pos="1"]{
    transform:translateX(calc(-50% + 43vw)) scale(.84);
    opacity:.62;
  }
  .hev-service-slide[data-pos="-2"]{
    transform:translateX(calc(-50% - 86vw)) scale(.79);
    opacity:0;
  }
  .hev-service-slide[data-pos="2"]{
    transform:translateX(calc(-50% + 86vw)) scale(.79);
    opacity:0;
  }

  .hev-service-nav-layer{
    height:555px!important;
    padding:0 28px!important;
  }
  .hev-service-nav-layer>button.hev-service-nav,
  .hev-service-nav-layer>button.hev-service-nav:hover,
  .hev-service-nav-layer>button.hev-service-nav:focus,
  .hev-service-nav-layer>button.hev-service-nav:focus-visible,
  .hev-service-nav-layer>button.hev-service-nav:active{
    width:38px!important;
    height:38px!important;
    flex-basis:38px!important;
  }

  .hev-service-title{font-size:23px}
  .hev-service-desc{
    max-width:92vw;
    font-size:clamp(9.4px,2.8vw,10.8px);
  }

  .hev-service-cta,
  .hev-service-cta:hover,
  .hev-service-cta:focus,
  .hev-service-cta:focus-visible{
    min-width:196px!important;
    max-width:min(90vw,250px)!important;
    grid-template-columns:18px auto 18px!important;
    padding:11px 16px!important;
  }
  .hev-service-cta::before{width:18px}
  .hev-service-cta-arrow{width:18px!important;font-size:13px!important}
}

@media(max-width:370px){
  .hev-service-slide{width:74vw;height:515px}
  .hev-services-stage{height:535px}
  .hev-service-nav-layer{height:535px!important;padding-inline:24px!important}
}

@media(prefers-reduced-motion:reduce){
  .hev-incense-canvas{opacity:.7}
  .hev-services-showcase *{
    scroll-behavior:auto!important;
    animation:none!important;
  }
  .hev-service-slide,
  .hev-quick-circle,
  .hev-quick-desc-slot,
  .hev-quick-desc-card{transition-duration:.01ms!important}
}