/* EcoGreenPack — glass + neumorphism layer (2026-10-12)
   Glass on dark/photo backgrounds, soft neumorphism on the cream sections.
   Selectors are prefixed with `html body` so they win over the inline section styles. */

:root {
  --egp-cream: #F5F0E8;
  --egp-cream-in: #EFE9DE;
  --egp-ink: #1a3010;
  --egp-green: #4a8c3a;
  --egp-lime: #8dd468;
  --neu-hi: rgba(255, 255, 255, 0.92);
  --neu-lo: rgba(150, 134, 104, 0.30);
  --neu-raised: 10px 10px 24px var(--neu-lo), -10px -10px 24px var(--neu-hi);
  --neu-raised-sm: 6px 6px 14px var(--neu-lo), -6px -6px 14px var(--neu-hi);
  --neu-inset: inset 4px 4px 10px var(--neu-lo), inset -4px -4px 10px var(--neu-hi);
  --neu-inset-sm: inset 2px 2px 6px var(--neu-lo), inset -2px -2px 6px var(--neu-hi);
  /* green-tinted variant for the light green coverage section */
  --neu-g-bg: #f1f6ea;
  --neu-g-lo: rgba(104, 128, 84, 0.26);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

/* ---------- GLASS ---------- */

/* Top navigation: deeper frost, light edge at the bottom */
html body .an-wrap {
  background: linear-gradient(180deg, rgba(12, 30, 9, 0.66) 0%, rgba(12, 30, 9, 0.46) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(1.9);
  backdrop-filter: blur(22px) saturate(1.9);
  box-shadow: inset 0 -1px 0 rgba(141, 212, 104, 0.16), 0 10px 30px rgba(0, 0, 0, 0.16);
}

/* Liquid glass (assets/egp-liquid-glass.js, same model as the AdMattix site).
   The element turns transparent; ::before carries the backdrop (refracted in Chromium,
   frosted in Safari/Firefox) and the tint; ::after carries the rim light. */
.lg-on .lg {
  isolation: isolate;
  background: transparent;
  border-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.lg-on .lg::before,
.lg-on .lg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
.lg-on .lg::before {
  background: linear-gradient(var(--lg-hover, transparent), var(--lg-hover, transparent)), var(--lg-tint);
  -webkit-backdrop-filter: var(--lg-fallback);
  backdrop-filter: var(--lg-fallback);
  transition: background-color 0.3s ease;
}
.lg-refract .lg::before { backdrop-filter: var(--lg-filter, var(--lg-fallback)); }
.lg-on .lg::after {
  background: var(--lg-spec) center / 100% 100% no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.10), inset 0 -10px 18px -16px rgba(255, 255, 255, 0.22);
}

/* Dark glass: slightly softer rim, deeper drop shadow */
.lg-on .us-card-content.lg,
.lg-on .ah-stat.lg,
.lg-on .ah-drop-glass.lg { box-shadow: 0 18px 44px rgba(6, 18, 4, 0.30), 0 3px 10px rgba(6, 18, 4, 0.16); }
.lg-on .us-card-content.lg::after,
.lg-on .ah-stat.lg::after,
.lg-on #egp-consent.lg::after,
.lg-on .ah-drop-glass.lg::after {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 -10px 20px -16px rgba(141, 212, 104, 0.22);
}
.lg-on .us-card:hover .us-card-content.lg { --lg-hover: rgba(141, 212, 104, 0.08); }
.lg-on .us-card-content.lg { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }

/* The cookie banner is styled by id in analytics.js, so it needs the id here */
.lg-on #egp-consent.lg {
  background: transparent;
  border-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
}
html body #egp-consent,
html body #egp-consent * {
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Pills and buttons: lighter shadow, the rim light does the work */
.lg-on .la-card-tag.lg,
.lg-on .bl-card-tag.lg { box-shadow: 0 6px 16px rgba(13, 34, 8, 0.22), 0 1px 2px rgba(13, 34, 8, 0.10); }
.lg-on .ah-tag.lg { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
.lg-on .ah-btn.lg,
.lg-on .an-cta.lg { box-shadow: 0 10px 26px rgba(40, 90, 30, 0.38), 0 2px 4px rgba(20, 50, 12, 0.24); }
.lg-on .ah-btn.lg::after,
.lg-on .an-cta.lg::after {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 0 0 1px rgba(141, 212, 104, 0.30), inset 0 -10px 16px -12px rgba(141, 212, 104, 0.28);
}
.lg-on .ah-btn.lg:hover,
.lg-on .an-cta.lg:hover { --lg-hover: rgba(255, 255, 255, 0.08); }
/* the nav button had its own shine on ::before; the glass takes that layer over */
.lg-on .an-cta.lg::before,
.lg-on .an-cta.lg:hover::before { left: 0; width: auto; transform: none; transition: background-color 0.3s ease; }
.lg-on .us-why-float.lg { box-shadow: 0 18px 44px rgba(6, 18, 4, 0.32), 0 3px 10px rgba(6, 18, 4, 0.16); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
.lg-on .us-why-float.lg::after,
.lg-on .an-mobile-menu.lg::after,
.lg-on .ft-contact-card.lg::after,
.lg-on .ft-logo-wrap.lg::after,
.lg-on .ft-social-link.lg::after {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 -10px 20px -16px rgba(141, 212, 104, 0.20);
}
.lg-on .ah-legal-card.lg { box-shadow: 0 24px 60px rgba(40, 70, 30, 0.12), 0 3px 10px rgba(40, 70, 30, 0.05); }

/* Light glass on the cream/green sections */
.lg-on .hw-card-inner.lg,
.lg-on .la-card-body.lg { box-shadow: 0 16px 40px rgba(40, 70, 30, 0.10), 0 2px 6px rgba(40, 70, 30, 0.05); }

/* Glossy leaf-green orbs behind the step cards, so the glass has something to bend */
.egp-orb {
  position: absolute;
  z-index: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 32% 26%, #F4FFEC 0%, #CBEFB0 14%, #9ADB72 34%, #6BB84A 58%, #3F8A2C 78%, #1F5414 100%);
  box-shadow: inset -14px -18px 34px rgba(20, 60, 10, 0.35), inset 10px 12px 26px rgba(255, 255, 255, 0.35), 0 28px 60px rgba(74, 140, 58, 0.25);
}
.egp-orb::after {
  content: "";
  position: absolute;
  left: 18%; top: 12%;
  width: 34%; height: 22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
  rotate: -28deg;
}

/* Dark sidebar on service and article pages (no position change: it is sticky on desktop) */
html body .srv-sidebar {
  background:
    radial-gradient(circle at 85% 0%, rgba(141, 212, 104, 0.16), transparent 45%),
    linear-gradient(135deg, #1a3a12 0%, #0d2208 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 24px 60px rgba(13, 34, 8, 0.18);
}

/* ---------- NEUMORPHISM ---------- */

/* Coverage panel + city chips (index) */
html body .cv-panel {
  background: var(--neu-g-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 16px 16px 40px var(--neu-g-lo), -16px -16px 40px rgba(255, 255, 255, 0.95);
}
html body .cv-chip:not(.cv-chip--lead) {
  background: var(--neu-g-bg);
  box-shadow: 5px 5px 12px var(--neu-g-lo), -5px -5px 12px rgba(255, 255, 255, 0.95);
}
html body .cv-chip:not(.cv-chip--lead):hover {
  transform: none;
  box-shadow: inset 3px 3px 8px var(--neu-g-lo), inset -3px -3px 8px rgba(255, 255, 255, 0.95);
}

/* Booking page */
html body .zv-form-card,
html body .kt-card,
html body .kt-hours-card,
html body .kt-area-card {
  background: var(--egp-cream);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--neu-raised);
}
html body .zv-contact-card,
html body .zv-hours-card {
  background: var(--egp-cream);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--neu-raised-sm);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
html body .zv-contact-card:hover {
  transform: translateY(-2px);
  box-shadow: 9px 9px 20px var(--neu-lo), -9px -9px 20px var(--neu-hi);
}
html body .zv-contact-card:active { transform: none; box-shadow: var(--neu-inset-sm); }

html body .zv-card-icon,
html body .kt-card-icon {
  background: var(--egp-cream);
  box-shadow: var(--neu-inset-sm);
  border: none;
}

html body .zv-input,
html body .zv-textarea {
  background: var(--egp-cream-in);
  border: 1px solid transparent;
  box-shadow: var(--neu-inset);
}
html body .zv-input:focus,
html body .zv-input:focus-visible,
html body .zv-textarea:focus,
html body .zv-textarea:focus-visible {
  border-color: rgba(74, 140, 58, 0.45);
  box-shadow: var(--neu-inset), 0 0 0 3px rgba(141, 212, 104, 0.25);
  outline: none;
}

html body .zv-submit,
html body .srv-cta-btn,
html body .kt-cta-btn {
  box-shadow: 6px 6px 16px rgba(40, 70, 30, 0.30), -5px -5px 14px rgba(255, 255, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
html body .zv-submit {
  background: linear-gradient(145deg, #57a044, #3f7c31);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html body .zv-submit:hover { transform: translateY(-1px); }
html body .zv-submit:active,
html body .srv-cta-btn:active {
  transform: none;
  box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.25), inset -2px -2px 6px rgba(255, 255, 255, 0.15);
}

/* Service and article pages: image frame, short-answer box */
html body .srv-image-wrap {
  border-radius: 24px;
  padding: 10px;
  background: var(--egp-cream);
  box-shadow: var(--neu-raised);
}
html body .srv-image-wrap img { border-radius: 16px; display: block; }

html body .srv-answer {
  background: var(--egp-cream);
  border: none;
  box-shadow: var(--neu-inset);
}

/* Subheadings that used to be h3 keep their old size */
html body .srv-richtext h2.srv-h2s {
  font-size: 24px;
  color: #28461e;
  margin: 36px 0 14px;
}

/* FAQ (new) */
html body .egp-faq,
html body .egp-rel { margin-top: 56px; }
html body .egp-faq h2,
html body .egp-rel h2 {
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--egp-ink);
  line-height: 1.2;
  margin: 0 0 24px;
}
html body .egp-faq-item {
  background: var(--egp-cream);
  border-radius: 18px;
  margin: 0 0 16px;
  box-shadow: var(--neu-raised-sm);
  transition: box-shadow 0.25s ease;
}
html body .egp-faq-item[open] { box-shadow: var(--neu-inset-sm); }
html body .egp-faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 20px 24px;
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--egp-ink);
}
html body .egp-faq-item summary::-webkit-details-marker { display: none; }
html body .egp-faq-item summary::after {
  content: "+";
  flex: 0 0 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 400;
  color: var(--egp-green);
  background: var(--egp-cream);
  box-shadow: 3px 3px 8px var(--neu-lo), -3px -3px 8px var(--neu-hi);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
html body .egp-faq-item[open] summary::after {
  transform: rotate(45deg);
  box-shadow: var(--neu-inset-sm);
}
html body .egp-faq-item summary:focus-visible { outline: 2px solid var(--egp-green); outline-offset: 4px; border-radius: 18px; }
html body .egp-faq-a { padding: 0 24px 22px; }
html body .egp-faq-a p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #4a5d40;
}
html body .egp-faq-a a,
html body .srv-richtext a { color: #2f6d2a; text-decoration: underline; text-underline-offset: 3px; }

/* Related articles (new) */
html body .egp-rel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
}
html body .egp-rel-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 20px;
  border-radius: 20px;
  background: var(--egp-cream);
  box-shadow: var(--neu-raised-sm);
  text-decoration: none;
  color: var(--egp-ink);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
html body .egp-rel-card:hover { transform: translateY(-3px); box-shadow: var(--neu-raised); }
html body .egp-rel-card:active { transform: none; box-shadow: var(--neu-inset-sm); }
html body .egp-rel-tag {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--egp-green);
  padding: 5px 11px;
  border-radius: 100px;
  box-shadow: var(--neu-inset-sm);
}
html body .egp-rel-title {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
html body .egp-rel-more {
  margin-top: auto;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--egp-green);
}

/* Mission page: value cards */
html body .ms-value-card {
  background: var(--egp-cream);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--neu-raised-sm);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
html body .ms-value-card:hover { transform: translateY(-3px); box-shadow: var(--neu-raised); }
html body .ms-value-icon {
  background: var(--egp-cream);
  border: none;
  box-shadow: var(--neu-inset-sm);
}

/* Mission page: keyword line inside the H1 */
html body .ms-h1-kw {
  display: block;
  margin: 0 0 22px;
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(220, 242, 200, 0.75);
}

@media (max-width: 640px) {
  html body .egp-faq h2,
  html body .egp-rel h2 { font-size: 25px; }
  html body .egp-faq-item summary { font-size: 16px; padding: 18px 16px 18px 18px; }
  html body .egp-faq-a { padding: 0 18px 20px; }
  html body .srv-image-wrap { padding: 6px; border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html body .egp-rel-card,
  html body .zv-contact-card,
  html body .egp-faq-item summary::after { transition: none; }
}

/* Booking/contacts on phones: grid columns must not grow wider than the screen */
@media (max-width: 900px) {
  html body .zv-grid,
  html body .kt-grid { grid-template-columns: minmax(0, 1fr); }
  html body .zv-grid > *,
  html body .kt-grid > * { min-width: 0; }
  html body .zv-card-value { white-space: normal; overflow: visible; text-overflow: clip; }
}

html body .hw-step-card { position: relative; }
@media (max-width: 760px) {
  html body .egp-orb { transform: scale(0.75); }
}

/* Step cards: the theme paints a solid white fill on the active step, which hid the glass */
.lg-on .hw-card-inner.lg {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}