/* Subtle motion layer shared by the public pages. The request dialog stays still. */
.customer-page .nav {
  background: rgb(246 245 239 / 88%);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
}
.customer-page .nav::after {
  content: "";
  position: absolute;
  inset: auto auto -1px 0;
  width: var(--page-progress, 0%);
  height: 2px;
  background: linear-gradient(90deg, #729d76, #e4bc53);
  pointer-events: none;
}
.customer-page .hero {
  position: relative;
  isolation: isolate;
}
.customer-page .hero::before {
  content: "";
  position: absolute;
  inset: 0 -7vw;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 38% 47% at 63% 48%, rgb(188 218 185 / 25%), transparent 78%),
    radial-gradient(ellipse 27% 37% at 18% 71%, rgb(244 205 107 / 14%), transparent 82%),
    linear-gradient(90deg, rgb(25 50 46 / 3%) 1px, transparent 1px),
    linear-gradient(0deg, rgb(25 50 46 / 3%) 1px, transparent 1px);
  background-size: auto, auto, 42px 42px, 42px 42px;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  animation: ambient-drift 18s ease-in-out infinite alternate;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .customer-page .hero h1 em {
    background: linear-gradient(110deg, #476f56 12%, #9ba853 52%, #446d60 90%);
    background-size: 220% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: text-glow 10s ease-in-out infinite alternate;
  }
}
.customer-page .hero-copy > :where(.eyebrow, h1, .lead, .actions, .price-message, .micro, .ticks) {
  animation: rise-in .72s both cubic-bezier(.2,.7,.2,1);
}
.customer-page .hero-copy > h1 { animation-delay: .08s; }
.customer-page .hero-copy > .lead { animation-delay: .16s; }
.customer-page .hero-copy > .actions { animation-delay: .24s; }
.customer-page .hero-copy > :where(.price-message, .micro, .ticks) { animation-delay: .3s; }
.customer-page .hero-visual { box-shadow: 0 25px 65px rgb(25 50 46 / 12%); }
.customer-page .hero-visual > :where(img, svg) {
  animation: visual-breathe 13s ease-in-out infinite alternate;
  transform-origin: 56% 50%;
}
.customer-page .hero-visual.epc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 37%, rgb(255 255 255 / 18%) 48%, transparent 58%);
  transform: translateX(-130%);
  animation: light-sweep 12s ease-in-out infinite;
}
.customer-page .epc-hero-stamp,
.customer-page .visual-tag { animation: float-soft 7s ease-in-out infinite; }
.customer-page .btn {
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.customer-page .btn:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgb(25 50 46 / 16%);
}
.customer-page .btn:not(:disabled):active { transform: translateY(0); }
.customer-page .service {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .35s;
}
.customer-page .service::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(210px circle at var(--pointer-x, 50%) var(--pointer-y, 40%), rgb(188 222 187 / 33%), transparent 76%);
  transition: opacity .4s ease;
  pointer-events: none;
}
.customer-page .service:hover {
  transform: translateY(-6px);
  border-color: #90af91;
  box-shadow: 0 18px 38px rgb(25 50 46 / 11%);
}
.customer-page .service:hover::before { opacity: 1; }
.customer-page .service .icon,
.customer-page .service-foot b { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.customer-page .service:hover .icon {
  transform: translateY(-3px) rotate(-5deg);
  box-shadow: 0 8px 16px rgb(25 50 46 / 10%);
}
.customer-page .service:hover .service-foot b { transform: translate(3px, -3px); }
.customer-page .service-epb::before {
  background: radial-gradient(210px circle at var(--pointer-x, 50%) var(--pointer-y, 40%), rgb(243 204 98 / 20%), transparent 76%);
}
.customer-page .customer-energy,
.customer-page .paper { transition: box-shadow .35s ease, border-color .35s ease; }
.customer-page .paper:hover { box-shadow: 0 22px 55px rgb(25 50 46 / 10%); }
.motion-ready .reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.motion-ready .reveal-on-scroll.is-visible { opacity: 1; transform: none; }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes float-soft { 50% { transform: translateY(-6px); } }
@keyframes visual-breathe { from { transform: scale(1); } to { transform: scale(1.035); } }
@keyframes light-sweep { 0%, 61% { transform: translateX(-130%); } 82%, 100% { transform: translateX(130%); } }
@keyframes ambient-drift { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 18px -15px, -14px 14px, 8px 0, 0 8px; } }
@keyframes text-glow { from { background-position: 0 50%; } to { background-position: 100% 50%; } }
@media (max-width: 620px) {
  .customer-page .hero::before { inset: -10px -16px; background-size: auto, auto, 32px 32px, 32px 32px; }
  .customer-page .service:hover { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .customer-page *, .customer-page *::before, .customer-page *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .motion-ready .reveal-on-scroll { opacity: 1; transform: none; }
}
@media print {
  .customer-page *, .customer-page *::before, .customer-page *::after { animation: none !important; }
  .customer-page .hero::before, .customer-page .hero-visual.epc-hero::after { display: none; }
  .motion-ready .reveal-on-scroll { opacity: 1; transform: none; }
}