/*
 * EJ Works visual polish layer.
 *
 * This file intentionally sits on top of the page-level styles so the
 * original layout, colors, typography, content, and responsive behavior stay
 * intact. Effects are restrained and reduced-motion preferences are honored.
 */

:root {
  --ej-shadow-rest: 0 1px 2px rgba(4, 52, 44, .04), 0 10px 28px rgba(4, 52, 44, .065);
  --ej-shadow-hover: 0 4px 8px rgba(4, 52, 44, .06), 0 16px 34px rgba(4, 52, 44, .13);
  --ej-shadow-green: 0 2px 4px rgba(4, 52, 44, .12), 0 11px 25px rgba(12, 115, 90, .22);
  --ej-shadow-green-hover: 0 4px 8px rgba(4, 52, 44, .13), 0 15px 30px rgba(12, 115, 90, .27);
  --ej-hero-glass: rgba(255, 255, 255, .36);
  --ej-hero-glass-border: rgba(255, 255, 255, .58);
  --ej-ease: cubic-bezier(.2, .7, .2, 1);
}

/* Buttons: tactile without becoming flashy. */
.btn,
.nav-call,
.zcwf_button {
  position: relative;
  isolation: isolate;
  transition:
    transform 200ms var(--ej-ease),
    box-shadow 200ms var(--ej-ease),
    border-color 200ms ease,
    background-color 200ms ease,
    filter 200ms ease !important;
  -webkit-tap-highlight-color: transparent;
}

.btn-solid,
.nav-call,
.formsubmit.zcwf_button {
  box-shadow: var(--ej-shadow-green) !important;
}

.btn-solid::after,
.nav-call::after,
.formsubmit.zcwf_button::after {
  content: "";
  position: absolute;
  inset: 1px 7px auto;
  height: 45%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), transparent);
  pointer-events: none;
  z-index: -1;
}

.btn-white {
  box-shadow: 0 2px 4px rgba(4, 52, 44, .06), 0 9px 22px rgba(4, 52, 44, .14) !important;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover,
  .nav-call:hover,
  .zcwf_button:hover {
    transform: translateY(-2px) !important;
    filter: saturate(1.04);
  }

  .btn-solid:hover,
  .nav-call:hover,
  .formsubmit.zcwf_button:hover {
    box-shadow: var(--ej-shadow-green-hover) !important;
  }

  .btn-white:hover {
    box-shadow: 0 4px 8px rgba(4, 52, 44, .07), 0 14px 27px rgba(4, 52, 44, .18) !important;
  }
}

.btn:active,
.nav-call:active,
.zcwf_button:active {
  transform: translateY(0) scale(.99) !important;
  transition-duration: 80ms !important;
}

.btn:focus-visible,
.nav-call:focus-visible,
.zcwf_button:focus-visible,
a.card:focus-visible,
a.feature:focus-visible,
a.check:focus-visible,
a.job:focus-visible {
  outline: 3px solid rgba(29, 158, 117, .42) !important;
  outline-offset: 3px !important;
}

/* Navigation: gentle translucency and a precise link indicator. */
.nav.ej-nav-polished {
  transition:
    background-color 240ms ease,
    border-color 240ms ease,
    box-shadow 240ms ease,
    backdrop-filter 240ms ease !important;
}

.nav.ej-nav-polished:not(.ej-home-nav),
.nav.ej-home-nav.is-scrolled {
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  backdrop-filter: blur(12px) saturate(1.08);
  box-shadow: 0 4px 22px rgba(4, 52, 44, .07);
}

.nav-links a:not(.nav-call) {
  position: relative;
}

.nav-links a:not(.nav-call)::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -6px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: .72;
  transition: left 180ms var(--ej-ease), right 180ms var(--ej-ease), opacity 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .nav-links a:not(.nav-call):hover::after,
  .nav-links a:not(.nav-call).active::after {
    left: 12%;
    right: 12%;
  }
}

.nav-links a:not(.nav-call):focus-visible::after,
.nav-links a:not(.nav-call).active::after {
  left: 12%;
  right: 12%;
}

/* Hero: preserve the imagery while giving it a little more depth. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .12),
    inset 0 -34px 48px rgba(4, 52, 44, .08),
    inset 28px 0 65px rgba(4, 52, 44, .045),
    inset -28px 0 65px rgba(4, 52, 44, .045);
}

.hero-inner,
.hero > .wrap {
  position: relative;
  z-index: 1;
}

.hero h1 {
  text-shadow: 0 3px 18px rgba(4, 52, 44, .34), 0 1px 2px rgba(0, 0, 0, .18) !important;
}

.hero p,
.hero p.sub {
  background: var(--ej-hero-glass) !important;
  border: 1px solid var(--ej-hero-glass-border) !important;
  border-radius: 18px !important;
  color: var(--ink, #2C2C2A) !important;
  font-weight: 500 !important;
  padding: 14px 22px !important;
  text-shadow: none !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .42),
    0 10px 30px rgba(4, 52, 44, .09) !important;
  -webkit-backdrop-filter: blur(4px) saturate(1.04);
  backdrop-filter: blur(4px) saturate(1.04);
}

.hero .hero-inner > *,
.hero > .wrap > * {
  animation: ej-hero-enter 480ms var(--ej-ease) both;
}

.hero .hero-inner > :nth-child(2),
.hero > .wrap > :nth-child(2) {
  animation-delay: 55ms;
}

.hero .hero-inner > :nth-child(3),
.hero > .wrap > :nth-child(3) {
  animation-delay: 105ms;
}

@keyframes ej-hero-enter {
  from {
    opacity: .88;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Clickable surfaces: low resting elevation and a restrained lift. */
a.card,
a.feature,
a.check,
a.job {
  border-color: rgba(12, 115, 90, .10) !important;
  box-shadow: var(--ej-shadow-rest);
  transition:
    transform 220ms var(--ej-ease),
    box-shadow 220ms var(--ej-ease),
    border-color 220ms ease,
    outline-color 220ms ease !important;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

a.card svg,
a.feature .tile,
a.card .tile,
a.feature svg,
a.card .pill {
  transition: transform 240ms var(--ej-ease);
  transform-origin: center;
}

@media (hover: hover) and (pointer: fine) {
  a.card:hover,
  a.feature:hover,
  a.check:hover,
  a.job:hover {
    transform: translateY(-3px);
    border-color: rgba(12, 115, 90, .28) !important;
    box-shadow: var(--ej-shadow-hover) !important;
  }

  a.card:hover svg,
  a.feature:hover .tile,
  a.card:hover .tile,
  a.feature:hover svg {
    transform: scale(1.035);
  }

  a.card:hover .pill {
    transform: translateY(-1px);
  }
}

a.card:active,
a.feature:active,
a.check:active,
a.job:active {
  transform: translateY(-1px) scale(.995);
  transition-duration: 80ms !important;
}

/* Informational surfaces stay calmer than interactive cards. */
.process-card,
.faq-item,
.form-panel,
.contact-card {
  border: 1px solid rgba(12, 115, 90, .09);
  box-shadow: var(--ej-shadow-rest);
}

.form-panel {
  border-top: 5px solid var(--green, #0C735A);
  box-shadow: 0 3px 8px rgba(4, 52, 44, .05), 0 20px 48px rgba(4, 52, 44, .11) !important;
}

.contact-card {
  box-shadow: 0 2px 4px rgba(4, 52, 44, .035), 0 12px 30px rgba(4, 52, 44, .075);
}

.tile {
  box-shadow: inset 0 1px rgba(255, 255, 255, .68), 0 8px 18px rgba(4, 52, 44, .07);
}

/* Long-form service pages: small accents and near-invisible dividers. */
.content > section {
  position: relative;
}

.content > section > h2::after {
  content: "";
  display: block;
  width: 42px;
  height: 2px;
  margin-top: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green, #0C735A), rgba(29, 158, 117, .28));
}

.content > section + section::before {
  content: "";
  position: absolute;
  top: -21px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(12, 115, 90, .16), transparent);
}

/* Trust, service area, and CTA bands get layered light rather than new colors. */
.trust {
  background: linear-gradient(135deg, #0C735A 0%, #0B6C56 52%, #075D4B 100%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), inset 0 -10px 25px rgba(4, 52, 44, .08);
}

.trust-grid > div {
  transition: background-color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .trust-grid > div:hover {
    background: rgba(255, 255, 255, .035);
  }
}

.stats .num {
  text-shadow: 0 6px 18px rgba(12, 115, 90, .10);
}

.service-area {
  box-shadow: inset 0 1px rgba(255, 255, 255, .38), inset 0 -18px 35px rgba(12, 115, 90, .055);
}

.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% -20%, rgba(255, 255, 255, .13), transparent 52%),
    linear-gradient(120deg, transparent 18%, rgba(255, 255, 255, .025) 50%, transparent 82%);
  pointer-events: none;
}

.cta .wrap {
  position: relative;
  z-index: 1;
}

/* Form refinements retain the existing validation and submission behavior. */
.zcwf_col_fld input[type="text"],
.zcwf_col_fld textarea {
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease !important;
}

.zcwf_col_fld input[type="text"]:hover,
.zcwf_col_fld textarea:hover {
  border-color: rgba(12, 115, 90, .32) !important;
}

.zcwf_col_fld input[type="text"]:focus,
.zcwf_col_fld textarea:focus {
  background: #FFFEFB;
  box-shadow: 0 0 0 4px rgba(12, 115, 90, .105), 0 8px 18px rgba(4, 52, 44, .045) !important;
}

/* One-time viewport reveals. JavaScript adds these classes after parsing. */
.ej-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 420ms var(--ej-ease),
    transform 420ms var(--ej-ease);
  transition-delay: var(--ej-delay, 0ms);
}

.ej-reveal.ej-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 720px) {
  .nav-links a:not(.nav-call)::after {
    display: none;
  }

  .hero p,
  .hero p.sub {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }

  .ej-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}