/* ==========================================================================
   PROMAXCARE - CLEAN MODERN BASE & HOMEPAGE DESIGN SYSTEM
   ========================================================================== */

:root {
  --ink: #10201D;
  --petrol: #123832;
  --petrol-2: #1B4A42;
  --petrol-3: #0C2A25;
  --paper: #F5F7F4;
  --paper-2: #EBEEE9;
  --amber: #F0A202;
  --amber-deep: #8A5C00;
  --amber-tint: #FCEBD1;
  --teal-deep: #0F6E56;
  --teal-tint: #E1F5EE;
  --sienna: #B0522D;
  --sienna-tint: #F5E3DA;
  --line: #DCE0DA;
  --muted: #5B6864;
  --white: #FFFFFF;
  --display: 'Archivo', sans-serif;
  --body: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  /* Legacy aliases for compatibility */
  --primary-color: var(--petrol);
  --primary-hover: var(--petrol-2);
  --accent-color: var(--amber);
  --dark-color: var(--ink);
  --light-bg: var(--paper);
  --border-color: var(--line);
  --text-muted: var(--muted);
  --body-font: var(--body);
  --max-width: 1120px;
}

/* Secondary design — teal primary (#20A69F) for client preview.
   The public site runs on this teal palette; the ZALV page keeps the
   :root petrol palette. Revert by swapping these back to the petrol set. */
body:not(.zalv-page) {
  --petrol: #20A69F;      /* primary brand */
  --petrol-2: #1A8E88;    /* primary hover / richer shade */
  --petrol-3: #0C3F3B;    /* deepest teal — dark sections & dark text */
  --teal-deep: #0E6B64;   /* readable teal for links, icons, accents on light */
  --teal-tint: #E3F5F2;   /* soft teal tint for chips & panels */
  --primary-color: var(--petrol);
  --primary-hover: var(--petrol-2);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Clip stray horizontal overflow (e.g. the off-canvas mobile nav drawer, which
   sits off-screen via translateX(100%) inside the backdrop-filtered header and
   would otherwise extend the page's scroll width on tablet/mobile). `clip` — not
   `hidden` — is used deliberately: it does not create a scroll container, so the
   sticky header keeps working. */
html,
body {
  overflow-x: clip;
}

/* ==========================================================================
   MODERN SCROLL REVEAL ANIMATION SYSTEM
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(36px) scale(0.98);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-left.in {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-right.in {
  opacity: 1;
  transform: translateX(0);
}

/* Content stays visible without JavaScript; only offscreen reveals are armed. */
:is(.home-page, .zalv-page) .home-scroll-pending { opacity: 0; }
.home-page .about,
.home-page .directory,
.home-page .results,
.home-page .why,
.home-page .testi {
  /* Keep section heights stable while scrolling and following anchor links. */
  content-visibility: visible;
  contain-intrinsic-size: none;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :is(.home-page, .zalv-page) [data-scroll-reveal] { opacity: 1 !important; translate: none !important; }
}
@media print {
  :is(.home-page, .zalv-page) [data-scroll-reveal] { opacity: 1 !important; translate: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  margin: 0;
  color: var(--ink);
}

p {
  margin: 0;
}

a {
  color: inherit;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

svg {
  display: block;
}

img {
  max-width: 100%;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
}

.wrap-full {
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 760px) {
  .wrap-full {
    padding: 0 20px;
  }
}

header .wrap-full {
  padding-left: 52px;
  padding-right: 52px;
}

@media (max-width: 760px) {
  header .wrap-full {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.mono {
  font-family: var(--mono);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

section {
  padding: 88px 0;
}

/* Offscreen Section Rendering Performance Optimization (Core Web Vitals) */
.about,
.directory,
.results,
.why,
.testi {
  content-visibility: auto;
  contain-intrinsic-size: 1px 600px;
}

@media (max-width: 760px) {
  section {
    padding: 56px 0;
  }
  .wrap {
    padding: 0 20px;
  }
}

/* Icon Defaults */
.icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 14.5px;
  padding: 13px 22px;
  border-radius: 9px;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn .icon {
  width: 17px;
  height: 17px;
}

.btn--amber {
  background: var(--amber);
  color: var(--petrol-3);
}

.btn--amber:hover {
  box-shadow: 0 6px 16px rgba(240, 162, 2, .35);
}

.btn--ghost {
  border-color: rgba(245, 247, 244, .35);
  color: var(--paper);
}

.btn--ghost:hover {
  background: rgba(245, 247, 244, .08);
}

.btn--petrol {
  background: var(--petrol);
  color: var(--paper);
}

.btn--petrol:hover {
  box-shadow: 0 6px 16px rgba(18, 56, 50, .25);
}

.btn--outline {
  border-color: var(--petrol-3);
  color: var(--petrol-3);
}

/* ===========================================================
   HEADER & NAVIGATION (Redesigned 2026)
   =========================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 247, 244, 0.82);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgba(220, 224, 218, 0.7);
  transition: background .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.site-header.is-scrolled {
  background: rgba(245, 247, 244, 0.94);
  box-shadow: 0 8px 26px -18px rgba(12, 42, 37, .3);
  border-bottom-color: transparent;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  gap: 20px;
}
/* Keep the navbar height constant on scroll so the logo and CTA stay put.
   The background/shadow still changes via .site-header.is-scrolled above. */

/* ---- Brand ---- */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}

/* Transparent logo sized to the original 46px navbar controls. */
.brand__logo-frame {
  display: flex;
  align-items: center;
  height: 46px;
  flex-shrink: 0;
}
.brand__logo {
  display: block;
  width: auto;
  height: 100%;
  object-fit: contain;
}
.footer__brand .brand__logo {
  filter: invert(1);
}

/* ---- Brand lockups ----
   Two artworks share one fixed-size box in the navbar: the stacked lockup
   rests at the top of the page, and the horizontal lockup takes over once
   the page is scrolled. Both are absolutely positioned, so the crossfade
   never reflows the nav. */
.brand--lockup {
  position: relative;
  display: block;
  width: 150px;
  height: 56px;
  flex-shrink: 0;
}
.brand__lockup {
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  width: auto;
  transform-origin: left center;
  /* One shared duration and curve for both properties, so opacity and
     transform land together instead of the artwork drifting after the
     fade has finished. No blur: animating `filter` on an image forces a
     repaint every frame and is what made the swap feel coarse. */
  transition: opacity .34s cubic-bezier(.4, 0, .2, 1), transform .34s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}
.brand__lockup--stacked {
  height: 56px;
  opacity: 1;
  transform: translateY(-50%) scale(1);
  /* Incoming lockup waits out most of the outgoing one's fade, so the two
     artworks never sit on top of each other at half opacity. */
  transition-delay: .1s;
}
.brand__lockup--inline {
  height: 36px;
  opacity: 0;
  transform: translate(-5px, -50%) scale(.97);
  transition-delay: 0s;
}
.site-header.is-scrolled .brand__lockup--stacked {
  opacity: 0;
  transform: translateY(-50%) scale(.97);
  transition-delay: 0s;
}
.site-header.is-scrolled .brand__lockup--inline {
  opacity: 1;
  transform: translate(0, -50%) scale(1);
  transition-delay: .1s;
}

/* Footer: the horizontal lockup only. It sits on the white brand card on
   standard pages, and flips to solid white on the dark ZALV footer. */
.brand--footer-lockup {
  display: block;
  flex-shrink: 0;
}
.brand--footer-lockup .brand__lockup {
  position: static;
  width: 210px;
  max-width: 100%;
  height: auto;
  transform: none;
  transition: none;
  will-change: auto;
}
.zalv-page .brand--footer-lockup .brand__lockup { filter: brightness(0) invert(1); }

@media (max-width: 1100px) {
  .brand--footer-lockup .brand__lockup { width: 188px; }
}
@media (max-width: 480px) {
  .site-header .brand--lockup { width: 138px; height: 50px; }
  .site-header .brand__lockup--stacked { height: 50px; }
  .site-header .brand__lockup--inline { height: 32px; }
}
@media (max-width: 360px) {
  .site-header .nav { gap: 12px; }
  .site-header .brand--lockup { width: 118px; height: 44px; }
  .site-header .brand__lockup--stacked { height: 44px; }
  .site-header .brand__lockup--inline { height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand__lockup { transition: opacity .2s ease; transition-delay: 0s !important; }
  .brand__lockup--inline { transform: translate(0, -50%); }
  .site-header.is-scrolled .brand__lockup--stacked { transform: translateY(-50%); }
  .site-header.is-scrolled .brand__lockup--inline { transform: translate(0, -50%); }
}

.brand__mark {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--petrol-3) 0%, var(--petrol) 50%, var(--petrol-2) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px -6px rgba(12, 42, 37, .5), inset 0 1px 0 rgba(255,255,255,.08);
  flex-shrink: 0;
  overflow: hidden;
}
.brand__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 60%);
  pointer-events: none;
}
.brand__mark-glyph {
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.brand__mark-dot {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px rgba(240, 162, 2, .8);
  z-index: 1;
}

/* Legacy: footer brand still uses an SVG inside .brand__mark */
.brand__mark svg,
.brand__mark .icon {
  width: 18px;
  height: 18px;
  color: var(--amber);
  stroke: var(--amber);
  position: relative;
  z-index: 1;
}

.brand__word {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.015em;
  line-height: 1;
  color: var(--petrol-3);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.brand__word > span {
  color: var(--amber-deep);
}
.brand__tag {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  font-style: normal;
  color: var(--muted);
  letter-spacing: .18em;
  text-transform: uppercase;
  border-left: 1px solid var(--line);
  padding-left: 6px;
  margin-left: 2px;
}

/* ---- Nav links ---- */
.nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  font-weight: 500;
  margin: 0 auto;
}

.nav__mobile-promo { display: none; }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  border-radius: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--body);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--petrol-3);
  text-decoration: none;
  letter-spacing: -.005em;
  transition: color .18s ease, background .18s ease;
}
.nav__link > span { position: relative; }
.nav__link > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--amber);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.nav__link:hover,
.nav__item:hover .nav__link,
.nav__item.open .nav__link {
  color: var(--petrol-3);
  background: rgba(15, 110, 86, .07);
}
.nav__link:hover > span::after,
.nav__item:hover .nav__link > span::after,
.nav__item.open .nav__link > span::after,
.nav__link.is-active > span::after {
  transform: scaleX(1);
}
.nav__link.is-active {
  color: var(--petrol-3);
}

/* One ZALV pill, split into its two departments. */
.nav__zalv-group {
  position: relative;
  display: flex;
  align-items: stretch;
  margin-inline: 3px;
  border: 1px solid rgba(216, 176, 106, .42);
  border-radius: 12px;
  background: #3b1f12;
  box-shadow: 0 7px 18px -12px rgba(59,31,18,.8);
  isolation: isolate;
  animation: zalvNavBeacon 2.4s cubic-bezier(.22, 1, .36, 1) .9s 3;
  transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease;
}
.nav__zalv-group::before {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -1;
  border: 1px solid rgba(240, 210, 156, .7);
  border-radius: 16px;
  opacity: 0;
  transform: scale(.94);
  pointer-events: none;
  animation: zalvNavRing 2.4s cubic-bezier(.22, 1, .36, 1) .9s 3;
}
.nav__zalv-group:hover,
.nav__zalv-group.is-active {
  border-color: rgba(240, 210, 156, .78);
  box-shadow: 0 10px 22px -10px rgba(59,31,18,.85), 0 0 0 3px rgba(216,176,106,.12);
  transform: translateY(-1px);
}
.nav__zalv {
  gap: 8px;
  padding: 9px 12px;
  border: 0;
  border-radius: 11px;
  color: #f0d29c;
  background: transparent;
  box-shadow: none;
  transition: color .2s ease, background .2s ease;
}
.nav__zalv--auto { justify-content: flex-end; text-align: right; border-radius: 11px 0 0 11px; }
.nav__zalv--reno { border-radius: 0 11px 11px 0; }
.nav__zalv:hover,
.nav__zalv.is-active {
  color: #ffe0a5;
  background: #5a341f;
}
.nav__zalv-mark {
  display: grid;
  place-items: center;
  flex: none;
  padding-inline: 9px;
  box-shadow: inset 1px 0 0 rgba(216, 176, 106, .38), inset -1px 0 0 rgba(216, 176, 106, .38);
}
.nav__zalv-mark img {
  width: 29px;
  height: 29px;
  border-radius: 8px;
  object-fit: cover;
  transform-origin: 50% 70%;
  animation: zalvNavMark 2.4s cubic-bezier(.22, 1, .36, 1) .9s 3;
}
.nav__zalv-copy { display: grid; gap: 1px; line-height: 1; }
.nav__zalv-copy::after { display: none !important; }
.nav__zalv-copy strong { font-family: var(--display); font-size: 13px; letter-spacing: .08em; }
.nav__zalv-copy small { color: rgba(255,224,165,.68); font-size: 8px; font-weight: 500; letter-spacing: .03em; }

@keyframes zalvNavBeacon {
  0%, 100% { box-shadow: 0 7px 18px -12px rgba(59,31,18,.8); }
  24% { box-shadow: 0 10px 24px -8px rgba(59,31,18,.9), 0 0 0 5px rgba(216,176,106,.14); }
  46% { box-shadow: 0 8px 20px -10px rgba(59,31,18,.82), 0 0 0 1px rgba(216,176,106,.04); }
}

@keyframes zalvNavRing {
  0%, 8%, 58%, 100% { opacity: 0; transform: scale(.94); }
  22% { opacity: .75; }
  48% { opacity: 0; transform: scale(1.08); }
}

@keyframes zalvNavMark {
  0%, 12%, 52%, 100% { transform: translateY(0) rotate(0) scale(1); }
  24% { transform: translateY(-2px) rotate(-4deg) scale(1.06); }
  36% { transform: translateY(0) rotate(2deg) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .nav__zalv-group,
  .nav__zalv-group::before,
  .nav__zalv-mark img {
    animation: none;
  }
}

.nav__item { position: relative; }

.nav__item .chevron {
  width: 12px;
  height: 12px;
  stroke-width: 2.4;
  color: currentColor;
  opacity: .7;
  transition: transform .2s ease, opacity .2s ease;
  margin-left: 2px;
}
.nav__item.open .chevron {
  transform: rotate(180deg);
  opacity: 1;
  color: var(--amber-deep);
}

/* ---- Dropdown (mega) ---- */
.nav__dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 260px;
  background: #fff;
  border: 1px solid rgba(220, 224, 218, .8);
  border-radius: 16px;
  box-shadow:
    0 24px 48px -20px rgba(12, 42, 37, .28),
    0 8px 16px -10px rgba(12, 42, 37, .18);
  padding: 14px;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav__dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid rgba(220, 224, 218, .8);
  border-top: 1px solid rgba(220, 224, 218, .8);
}
.nav__item.open .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Desktop dropdowns are centered on hover. Keep these transforms out of
   the mobile accordion so a lingering hover cannot shift it on collapse. */
@media (min-width: 1081px) {
  .nav__item:hover .nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .nav__item:hover .chevron {
    transform: rotate(180deg);
    opacity: 1;
    color: var(--amber-deep);
  }
}

.nav__dropdown--mega {
  width: 560px;
  padding: 18px;
}

.nav__dropdown-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--teal-deep);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 0 6px 10px;
  margin-bottom: 6px;
  border-bottom: 1px dashed rgba(220, 224, 218, .8);
}

.nav__dropdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.nav__dropdown a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}
.nav__dropdown a:hover {
  background: linear-gradient(90deg, rgba(15, 110, 86, .08) 0%, rgba(240, 162, 2, .04) 100%);
}

.nav__dropdown-ic {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--paper-2);
  color: var(--petrol);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav__dropdown-ic .icon { width: 18px; height: 18px; }
.nav__dropdown a:hover .nav__dropdown-ic {
  background: var(--petrol-3);
  color: var(--amber);
  transform: scale(1.05);
}

.nav__dropdown-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
  min-width: 0;
}
.nav__dropdown-txt strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--petrol-3);
  letter-spacing: -.005em;
}
.nav__dropdown-txt small {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 500;
}

/* ---- Right side ---- */
.nav__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: background .18s ease;
}
.nav__phone:hover { background: rgba(15, 110, 86, .07); }
.nav__phone-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--teal-tint);
  color: var(--teal-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav__phone-icon .icon { width: 17px; height: 17px; }
.nav__phone-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.nav__phone-text small {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 2px;
}
.nav__phone-text strong {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 800;
  color: var(--petrol-3);
  letter-spacing: -.01em;
}

.nav__cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 11px 18px !important;
  border-radius: 999px !important;
  font-size: 13.5px !important;
  box-shadow: 0 8px 18px -6px rgba(18, 56, 50, .35);
  animation: navQuoteGlow 2.8s ease-in-out 3;
}
.nav__cta::after {
  content: "";
  position: absolute;
  inset: -50% auto -50% -46%;
  z-index: -1;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .48), transparent);
  transform: skewX(-18deg) translateX(0);
  animation: navQuoteShine 3.6s ease-in-out 3;
  pointer-events: none;
}
.nav__cta .icon { width: 15px; height: 15px; }
.nav__cta:hover {
  animation-play-state: paused;
  box-shadow: 0 12px 22px -6px rgba(18, 56, 50, .45);
}

@keyframes navQuoteGlow {
  0%, 100% { box-shadow: 0 8px 18px -6px rgba(18, 56, 50, .35), 0 0 0 0 rgba(15, 110, 86, .28); }
  50% { box-shadow: 0 12px 24px -7px rgba(18, 56, 50, .5), 0 0 0 6px rgba(15, 110, 86, 0); }
}

@keyframes navQuoteShine {
  0%, 58% { transform: skewX(-18deg) translateX(0); opacity: 0; }
  64% { opacity: 1; }
  84%, 100% { transform: skewX(-18deg) translateX(520%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__cta,
  .nav__cta::after {
    animation: none;
  }
}

.nav__toggle {
  display: none;
  position: relative;
  width: 42px;
  height: 42px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  transition: background .18s, border-color .18s;
}
.nav__toggle:hover { background: var(--paper-2); }
.nav__toggle .icon { width: 20px; height: 20px; color: var(--petrol-3); position: absolute; transition: opacity .2s ease, transform .2s ease; }

/* ---- Scroll progress ---- */
.nav__scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--teal-deep) 0%, var(--amber) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .1s linear;
  pointer-events: none;
}
body:not(.zalv-page) .nav__scroll-progress {
  background: linear-gradient(90deg, var(--petrol-3) 0%, var(--petrol) 100%);
}

/* ---- Mobile drawer ---- */
.nav__scrim {
  position: fixed;
  inset: 0;
  background: rgba(12, 42, 37, .45);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility 0s linear .18s;
  z-index: 39;
}
body.nav-open .nav__scrim { opacity: 1; visibility: visible; transition-delay: 0s; }
body.nav-open, body.nav-closing { overflow: hidden; }

@media (max-width: 1080px) {
  /* The header's backdrop-filter turns it into a containing block for its
     position:fixed descendants, which would trap the mobile drawer inside the
     ~100px header instead of the viewport. Drop it here so the drawer can fill
     the screen; use a near-solid background since there's no blur behind it. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(245, 247, 244, 0.98);
  }
  /* Avoid repainting a full-screen blur during the drawer transition. */
  .nav__scrim { backdrop-filter: none; -webkit-backdrop-filter: none; }

  .nav__links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 88vw);
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    background: #fff;
    padding: 18px 18px 24px;
    box-shadow: -20px 0 40px -10px rgba(12, 42, 37, .25);
    transform: translate3d(100%, 0, 0);
    transition: transform .18s cubic-bezier(.22, 1, .36, 1);
    z-index: 60;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    margin: 0;
  }
  /* Expanded groups keep their natural height; the drawer, not its children,
     scrolls. Flex shrinking otherwise crops the promo and submenu content. */
  .nav__links > * { flex-shrink: 0; }
  body.nav-open .nav__links { transform: translate3d(0, 0, 0); }
  body.nav-open .nav__links, body.nav-closing .nav__links { will-change: transform; }
  body.nav-closing .nav__links { pointer-events: none; }

  .nav__mobile-promo {
    position: relative;
    display: block;
    margin: 0 0 10px;
    padding: 16px;
    border-radius: 14px;
    color: var(--paper);
    background:
      radial-gradient(circle at 92% 8%, rgba(99, 221, 184, .22), transparent 34%),
      linear-gradient(145deg, var(--petrol-2), var(--petrol-3));
    border: 1px solid rgba(99, 221, 184, .18);
    box-shadow: 0 16px 30px -20px rgba(12, 42, 37, .75);
    overflow: hidden;
  }
  .nav__mobile-promo::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -34px;
    width: 98px;
    height: 98px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 50%;
    pointer-events: none;
  }
  .nav__mobile-promo-tag {
    display: none;
    margin-bottom: 7px;
    color: #8EE6CA;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .nav__mobile-promo strong {
    display: block;
    font-family: var(--display);
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: -.02em;
  }
  .nav__mobile-promo p {
    max-width: 250px;
    margin: 7px 0 10px;
    color: rgba(245, 247, 244, .7);
    font-size: 11.5px;
    line-height: 1.5;
  }
  .nav__mobile-promo-link {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 11px 13px;
    border-radius: 11px;
    background: var(--amber);
    color: var(--petrol-3);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(240, 162, 2, .2);
  }
  .nav__mobile-promo-link .icon {
    width: 16px;
    height: 16px;
    transition: transform .2s ease;
  }
  .nav__mobile-promo-link:hover .icon { transform: translateX(3px); }

  .nav__toggle { z-index: 70; }
  body.nav-open .nav__toggle, body.nav-closing .nav__toggle { display: none; }

  .nav__link {
    padding: 12px 14px;
    font-size: 15px;
    justify-content: space-between;
    width: 100%;
  }
  .nav__link > span::after { display: none; }
  .nav__link[aria-current="page"],
  .nav__link.is-active,
  .nav__dropdown a[aria-current="page"] {
    background: rgba(15, 110, 86, .09);
    box-shadow: inset 3px 0 0 var(--amber);
  }
  .nav__dropdown a[aria-current="page"] { border-radius: 8px; }
  .nav__link:hover,
  .nav__item:hover .nav__link,
  .nav__item.open .nav__link {
    background: var(--paper-2);
  }

  .nav__zalv-group {
    width: 100%;
    margin-inline: 0;
    border-radius: 14px;
    animation: none;
  }
  .nav__zalv-group::before { animation: none; }
  .nav__zalv {
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 11px;
    color: #f0d29c;
    background: transparent;
    animation: none;
  }
  .nav__zalv--auto { justify-content: flex-end; text-align: right; border-radius: 13px 0 0 13px; }
  .nav__zalv--reno { border-radius: 0 13px 13px 0; }
  .nav__zalv-mark { padding-inline: 11px; }
  .nav__zalv-mark img { width: 34px; height: 34px; border-radius: 10px; animation: none; }
  .nav__zalv-copy strong { font-size: 14px; }
  .nav__zalv-copy small { display: block; font-size: 9px; }

  .nav__item { width: 100%; }
  .nav__item .chevron { margin-left: auto; }

  .nav__dropdown,
  .nav__dropdown--mega {
    display: none;
    position: static;
    width: 100%;
    min-width: 0;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 4px 4px 8px 8px;
    transform: none;
    opacity: 0;
    visibility: hidden;
    max-height: none;
    overflow: visible;
    transition: none;
  }
  .nav__dropdown::before { display: none; }
  .nav__item.open .nav__dropdown {
    display: block;
    opacity: 1;
    visibility: visible;
    max-height: none;
    transform: none;
  }
  .nav__dropdown-grid { grid-template-columns: 1fr; }
  .nav__dropdown-eyebrow { padding-top: 6px; }

  .nav__toggle { display: inline-flex; }
  .nav__phone-text small { display: none; }
  .nav__phone-text strong { font-size: 13.5px; }
}

@media (max-width: 1080px) and (prefers-reduced-motion: no-preference) {
  body.nav-open .nav__zalv-group {
    animation: zalvNavBeacon 2.4s cubic-bezier(.22, 1, .36, 1) .35s 3;
  }
  body.nav-open .nav__zalv-group::before {
    animation: zalvNavRing 2.4s cubic-bezier(.22, 1, .36, 1) .35s 3;
  }
  body.nav-open .nav__zalv-mark img {
    animation: zalvNavMark 2.4s cubic-bezier(.22, 1, .36, 1) .35s 3;
  }
}

@media (max-width: 1080px) and (prefers-reduced-motion: reduce) {
  .nav__links, .nav__scrim { transition: none; }
}

@media (max-width: 720px) {
  .brand__tag { display: none; }
  .nav__cta { display: none; }
}

@media (max-width: 480px) {
  .nav__phone-text { display: none; }
  .nav__phone { padding: 6px; }
}

/* ===== Site Main ===== */
.site-main {
  min-height: 60vh;
}

/* ===== Site Footer ===== */
.site-footer {
  /* Dark-chrome palette. Green is the ZALV default; the teal set below
     applies on every other page via body:not(.zalv-page). */
  --f-text: #BDCEC7;
  --f-text-2: #DCE9E3;
  --f-legal: #A8BDB3;
  --f-surface: #1B3B32;
  --f-panel: #15382E;
  --f-border: #355449;
  --f-border-soft: #2B4840;
  --f-accent: #A3E6CE;
  background: var(--petrol-3); color: var(--f-text); font-size: 13px; scroll-margin-top: 88px; }
body:not(.zalv-page) .site-footer {
  /* Secondary design: a confident bright-teal panel with white-alpha chrome,
     a soft top highlight and crown glow for depth, and a deeper-teal bottom
     bar (below) that anchors the whole footer. */
  position: relative;
  background:
    radial-gradient(130% 150% at 50% 0%, rgba(255, 255, 255, .07), transparent 52%),
    var(--petrol);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
  --f-text: rgba(255, 255, 255, .92);
  --f-text-2: #ffffff;
  --f-legal: rgba(255, 255, 255, .72);
  --f-surface: rgba(255, 255, 255, .14);
  --f-panel: rgba(255, 255, 255, .1);
  --f-border: rgba(255, 255, 255, .24);
  --f-border-soft: rgba(255, 255, 255, .16);
  --f-accent: #ffffff;
}

/* ---- Footer professional treatment (non-ZALV only) ---- */
/* Brand + social header: a full-width white card matching the panels below.
   The horizontal lockup is the full-colour artwork, so it reads on white. */
body:not(.zalv-page) .footer__wrap { padding-top: 56px; }
body:not(.zalv-page) .footer__header {
  margin: 0 0 22px;
  padding: 24px 30px;
  background: var(--white);
  border: 0;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(6, 40, 36, .22);
}
body:not(.zalv-page) .footer__brand p { color: var(--muted); }
body:not(.zalv-page) .footer__follow > span { color: var(--muted); }

/* Social: soft teal-tint chips that fill with brand teal and lift on hover */
body:not(.zalv-page) .footer__social a {
  color: var(--teal-deep);
  background: var(--teal-tint);
  border-color: transparent;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
body:not(.zalv-page) .footer__social a:hover {
  background: var(--petrol);
  color: #fff;
  border-color: var(--petrol);
  transform: translateY(-3px);
}

/* ---- Secondary footer: content lifted onto clean white cards over teal ----
   Two distinct sections — the contact panel and the services/company links —
   each sit on a solid white rounded card, mirroring the contact page's
   white form panel. The brand header and legal bar stay on the teal chrome. */
body:not(.zalv-page) .footer__main {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.92fr);
  gap: 22px;
  align-items: stretch;
  padding: 0 0 42px;
}

/* Shared white-card surface for both footer sections */
body:not(.zalv-page) .footer__contact-panel,
body:not(.zalv-page) .footer__links {
  background: var(--white);
  border: 0;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(6, 40, 36, .22);
}

/* --- Contact card --- */
body:not(.zalv-page) .footer__contact-panel { padding: 30px 28px; }
body:not(.zalv-page) .footer__contact-panel h2 { color: var(--ink); }
body:not(.zalv-page) .footer__contact-panel h2 .icon { color: var(--amber); }
body:not(.zalv-page) .footer__tollfree > span {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 10px;
  color: var(--muted);
}
body:not(.zalv-page) .footer__tollfree a { color: var(--petrol-3); }
body:not(.zalv-page) .footer__contact-detail { color: var(--ink); }
body:not(.zalv-page) .footer__contact-detail .icon { color: var(--teal-deep); }
body:not(.zalv-page) .footer__hours { color: var(--muted); }
body:not(.zalv-page) .footer__office { border-top-color: var(--line); }
body:not(.zalv-page) .footer__contact-detail:hover,
body:not(.zalv-page) .footer__tollfree a:hover { color: var(--teal-deep); text-decoration: none; }

/* --- Links card: the three nav columns share one white panel --- */
body:not(.zalv-page) .footer__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 34px;
  padding: 32px 32px 34px;
  align-content: start;
}

/* Column headers: short amber accent rule */
body:not(.zalv-page) .footer__col h3 {
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 18px;
  color: var(--ink);
}
body:not(.zalv-page) .footer__col h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--amber);
}

/* Links: muted ink that warms to brand teal and slides on hover */
body:not(.zalv-page) .footer__col li a {
  color: var(--muted);
  transition: color .18s ease, transform .18s ease;
}
body:not(.zalv-page) .footer__col li a:hover {
  color: var(--teal-deep);
  text-decoration: none;
  transform: translateX(4px);
}

/* CTA: fuller with a warm lift */
body:not(.zalv-page) .footer__col .footer__quote {
  margin-top: 26px;
  padding: 13px 20px;
  border-radius: 9px;
  font-size: 13px;
  box-shadow: 0 8px 20px rgba(240, 162, 2, .28);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
body:not(.zalv-page) .footer__col .footer__quote:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(240, 162, 2, .38);
}

/* Stacking for the white-card footer */
@media (max-width: 900px) {
  body:not(.zalv-page) .footer__main { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 650px) {
  body:not(.zalv-page) .footer__wrap { padding-top: 36px; }
  body:not(.zalv-page) .footer__header { margin: 0 0 18px; padding: 22px; }
  body:not(.zalv-page) .footer__contact-panel { padding: 24px 22px; }
  body:not(.zalv-page) .footer__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 20px;
    padding: 26px 22px 28px;
  }
}
@media (max-width: 400px) {
  body:not(.zalv-page) .footer__links { grid-template-columns: 1fr; }
}

/* Bottom bar: full-bleed deeper-teal strip anchors the footer */
body:not(.zalv-page) .footer__bottom {
  /* Same primary teal as the rest of the footer — one continuous panel,
     no separate dark band. */
  background: transparent;
}
body:not(.zalv-page) .footer__bottom-inner {
  padding-top: 26px;
  padding-bottom: 30px;
}
body:not(.zalv-page) .footer__copyright { color: rgba(255, 255, 255, .8); }
body:not(.zalv-page) .footer__legal a,
body:not(.zalv-page) .footer__legal button { color: rgba(255, 255, 255, .66); }
body:not(.zalv-page) .footer__payment-group > span { color: rgba(255, 255, 255, .7); }

/* Payment logos on clean white chips */
body:not(.zalv-page) .pay-icon {
  width: auto;
  height: 22px;
  padding: 6px 8px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.footer__wrap { max-width: 1280px; padding: 0 32px; margin: 0 auto; }
.footer__header { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 40px 0 32px; border-bottom: 1px solid var(--f-border-soft); }
.footer__brand { display: flex; align-items: center; gap: 40px; min-width: 0; }
.footer__brand .brand__logo-frame { height: 82px; }
.footer__brand p { max-width: 350px; margin: 0; color: var(--f-text); font-size: 15px; line-height: 1.7; }
.footer__follow { flex-shrink: 0; }
.footer__follow > span { display: block; margin-bottom: 12px; color: var(--f-text); font-size: 12px; }
.footer__social { display: flex; gap: 10px; }
.footer__social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--white); background: var(--f-surface); border: 1px solid var(--f-border); border-radius: 50%; text-decoration: none; }
.footer__social .icon { width: 17px; height: 17px; }
.footer__social a:hover { color: var(--petrol-3); background: var(--teal-tint); border-color: var(--teal-tint); }
.footer__main { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, .8fr); gap: 38px; padding: 36px 0 40px; align-items: start; }
/* Wrapper is transparent to the grid by default (keeps the ZALV 4-column
   footer intact); the non-ZALV secondary design turns it into a white card. */
.footer__links { display: contents; }
.footer__contact-panel { padding: 24px; border: 1px solid var(--f-border); border-radius: 12px; background: var(--f-panel); }
.footer__contact-panel h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: var(--white); font-family: var(--display); font-size: 18px; font-weight: 600; line-height: 1.4; }
.footer__contact-panel h2 .icon { width: 22px; height: 22px; color: var(--f-accent); flex-shrink: 0; }
.footer__tollfree { margin-bottom: 18px; }
.footer__tollfree > span { display: block; font-size: 11px; margin-bottom: 6px; }
.footer__tollfree a { display: inline-block; color: var(--amber); font-family: var(--display); font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: -.5px; text-decoration: none; }
.footer__contact-detail { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; color: var(--f-text-2); font-size: 13px; line-height: 1.65; text-decoration: none; }
.footer__contact-detail .icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--f-accent); }
.footer__contact-detail address { font-style: normal; }
.footer__contact-detail span, .footer__contact-detail address { min-width: 0; overflow-wrap: anywhere; }
.footer__office { border-top: 1px solid var(--f-border); margin-top: 22px; padding-top: 6px; }
.footer__hours { color: var(--f-text); font-size: 12px; }
.footer__col { padding-top: 4px; }
.footer__col h3 { margin: 0 0 18px; font-family: var(--display); font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--white); }
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li + li { margin-top: 5px; }
.footer__col li a { display: inline-block; padding: 6px 0; color: var(--f-text); font-size: 13px; line-height: 1.55; text-decoration: none; }
.footer__col li a:hover, .footer__contact-detail:hover, .footer__tollfree a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.footer__col .footer__quote { display: inline-flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; padding: 12px 16px; border-radius: 7px; background: var(--amber); color: var(--petrol-3); font-size: 12px; font-weight: 600; text-decoration: none; }
.footer__quote .icon { width: 15px; height: 15px; flex-shrink: 0; }
.footer__col .footer__quote:hover { background: var(--amber-tint); }
.site-footer a:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 5px; border-radius: 3px; }
.footer__bottom { padding: 0; }
.footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1280px; margin: 0 auto; padding: 24px 72px 28px 32px; border-top: 1px solid var(--f-border-soft); }
.footer__copyright { display: flex; flex-direction: column; gap: 8px; color: var(--f-text); font-size: 12px; line-height: 1.6; }
.footer__legal { color: var(--f-legal); font-size: 11px; }
.footer__payment-group { display: flex; flex-direction: column; gap: 9px; }
.footer__payment-group > span { font-size: 11px; color: var(--f-text); }
.footer__payments { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pay-icon { display: block; width: 44px; height: auto; flex-shrink: 0; }
@media (max-width: 1100px) {
  .footer__main { gap: 26px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .85fr); }
  .footer__contact-panel { padding: 20px; }
  .footer__contact-panel h2 { font-size: 16px; gap: 8px; }
  .footer__col h3 { font-size: 15px; }
  .footer__col .footer__quote { gap: 8px; padding: 12px; }
}
@media (max-width: 900px) {
  .footer__brand { gap: 28px; }
  .footer__brand p { max-width: 300px; font-size: 14px; }
  .footer__header { gap: 28px; }
  .footer__main { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
  .footer__contact-panel { grid-column: 1 / -1; }
  .footer__contact-panel h2 { font-size: 18px; }
  .footer__office { max-width: 520px; }
}
@media (max-width: 650px) {
  .footer__wrap { padding: 0 20px; }
  .footer__header { flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px 0; }
  .footer__brand { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer__brand .brand__logo-frame { height: 72px; }
  .footer__brand p { max-width: 380px; font-size: 14px; }
  .footer__follow { display: flex; align-items: center; gap: 20px; }
  .footer__follow > span { margin-bottom: 0; }
  .footer__social { gap: 8px; }
  .footer__social a { width: 38px; height: 38px; }
  .footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 22px; padding: 28px 0 32px; }
  .footer__col h3 { font-size: 14px; margin-bottom: 12px; }
  .footer__col li a { font-size: 13px; padding: 7px 0; }
  .footer__company { grid-column: 1 / -1; border-top: 1px solid var(--f-border-soft); padding-top: 24px; }
  .footer__company ul { display: flex; flex-wrap: wrap; gap: 6px 24px; }
  .footer__company li + li { margin-top: 0; }
  .footer__company .footer__quote { margin-top: 16px; padding: 12px 16px; }
  .footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    /* Reserve space beside the contact buttons, not a blank block below. */
    padding: 24px 68px max(24px, env(safe-area-inset-bottom)) 20px;
    gap: 20px;
  }
}
@media (max-width: 360px) {
  .footer__wrap { padding: 0 16px; }
  .footer__follow { gap: 12px; }
  .footer__social a { width: 34px; height: 34px; }
  .footer__main { column-gap: 16px; }
  .footer__col h3 { font-size: 13px; }
  .footer__contact-panel { padding: 20px 18px; }
}

/* ===== Floating WhatsApp ===== */
.fab {
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(15, 110, 86, .4);
  z-index: 50;
  text-decoration: none;
  transform: scale(0);
  transform-origin: center;
  animation: fabPopIn .55s cubic-bezier(.34, 1.56, .64, 1) .6s forwards,
             fabBounce 2.4s ease-in-out 1.6s 3;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
  will-change: transform;
}

.fab:hover {
  background: #1ebe57;
  box-shadow: 0 14px 30px rgba(15, 110, 86, .55);
  animation-play-state: paused;
  transform: scale(1.1) rotate(-6deg);
}

/* Direct-call FAB — stacked directly above the WhatsApp button */
.fab--call {
  bottom: 90px;
  background: var(--petrol);
  box-shadow: 0 10px 24px rgba(18, 56, 50, .42);
  animation: fabPopIn .55s cubic-bezier(.34, 1.56, .64, 1) .45s forwards;
}

.fab--call:hover {
  background: var(--petrol-2);
  box-shadow: 0 14px 30px rgba(18, 56, 50, .55);
  transform: scale(1.1) rotate(-6deg);
}

.fab:active {
  transform: scale(.95);
}

.fab .icon,
.fab .fab__icon {
  width: 30px;
  height: 30px;
  color: #fff;
  fill: currentColor;
  stroke: none;
  position: relative;
  z-index: 1;
}

/* Ringing-phone wiggle on the call FAB icon — a short, playful shake
   every few seconds that draws the eye without being obnoxious. */
.fab--call .fab__icon {
  transform-origin: 50% 55%;
  animation: fabCallRing 2.6s ease-in-out 1.6s 3;
}
.fab--call:hover .fab__icon {
  /* On hover the button already lifts and rotates; freeze the wiggle
     so the two motions don't fight each other. */
  animation-play-state: paused;
}

@keyframes fabCallRing {
  0%, 62%, 100% { transform: rotate(0); }
  66%           { transform: rotate(-18deg); }
  70%           { transform: rotate(16deg); }
  74%           { transform: rotate(-14deg); }
  78%           { transform: rotate(10deg); }
  82%           { transform: rotate(-6deg); }
  86%           { transform: rotate(3deg); }
  90%           { transform: rotate(0); }
}

.fab__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  opacity: .55;
  animation: fabPulse 2s ease-out 1.4s 3 forwards;
  pointer-events: none;
}

@keyframes fabPopIn {
  0%   { transform: scale(0)   rotate(-45deg); }
  60%  { transform: scale(1.2) rotate(8deg); }
  80%  { transform: scale(.92) rotate(-4deg); }
  100% { transform: scale(1)   rotate(0); }
}

@keyframes fabBounce {
  0%, 70%, 100% { transform: scale(1); }
  80%           { transform: scale(1.12); }
  90%           { transform: scale(.96); }
}

@keyframes fabPulse {
  0%   { transform: scale(1);   opacity: .5; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fab, .fab--call { animation: none; transform: scale(1); }
  .fab--call .fab__icon { animation: none; transform: none; }
  .fab__pulse { animation: none; opacity: 0; }
}

/* ===== Scroll Reveal Animation ===== */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Subpages / Content Details Compatibility ===== */
.page-details-wrapper {
  background-color: var(--paper);
  min-height: 80vh;
  padding-bottom: 48px;
}

/* ==========================================================================
   NOT FOUND PAGE — Helpful recovery route
   ========================================================================== */
.not-found-v2 {
  background: var(--paper);
}

.not-found-v2__wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

.not-found-v2__hero {
  position: relative;
  overflow: hidden;
  min-height: 620px;
  padding: 30px 0 76px;
  background: #22a6a0;
  color: var(--white);
}

.not-found-v2__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

.not-found-v2__crumbs {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 68px;
  color: #c8e8e6;
  font-size: 12px;
}

.not-found-v2__crumbs a {
  color: #e0f5f4;
  text-decoration: none;
}

.not-found-v2__crumbs a:hover {
  color: var(--white);
}

.not-found-v2__crumbs .icon {
  width: 12px;
  height: 12px;
  transform: rotate(-90deg);
}

.not-found-v2__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
  gap: 80px;
  align-items: center;
}

.not-found-v2__label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: #d4fcfa;
  font-size: 13px;
  font-weight: 600;
}

.not-found-v2__label::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--amber);
}

.not-found-v2__copy h1 {
  max-width: 760px;
  margin: 0;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(43px, 5vw, 66px);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -2.2px;
}

.not-found-v2__copy > p {
  max-width: 620px;
  margin-top: 24px;
  color: #e0f5f4;
  font-size: 15px;
  line-height: 1.75;
}

.not-found-v2__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.not-found-v2__primary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  min-width: 220px;
  min-height: 52px;
  padding: 13px 16px 13px 20px;
  border-radius: 8px;
  background: var(--amber);
  color: #0e524e;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.not-found-v2__primary:hover {
  background: #FFBC1D;
}

.not-found-v2__primary .icon {
  width: 16px;
  height: 16px;
}

.not-found-v2__secondary {
  color: #e0f5f4;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .35);
  text-underline-offset: 5px;
}

.not-found-v2__secondary:hover {
  color: var(--white);
  text-decoration-color: var(--amber);
}

.not-found-v2__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 420px);
  aspect-ratio: 1;
  margin-left: auto;
}

.not-found-v2__mark::before {
  content: '';
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  background: #1a8a85;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 70px rgba(0, 0, 0, .16);
}

.not-found-v2__orbit {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
}

.not-found-v2__orbit--outer {
  inset: 2%;
}

.not-found-v2__orbit--inner {
  inset: 9%;
  border-color: rgba(246, 166, 0, .22);
}

.not-found-v2__mark strong {
  position: relative;
  z-index: 1;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(86px, 10vw, 138px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -8px;
}

.not-found-v2__mark > .icon {
  position: absolute;
  right: 13%;
  bottom: 19%;
  z-index: 1;
  width: 27px;
  height: 27px;
  color: var(--amber);
  transform: rotate(12deg);
}

.not-found-v2__help {
  padding: 62px 0 72px;
  background: var(--paper);
}

.not-found-v2__help-grid {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 70px;
  align-items: start;
}

.not-found-v2__help-heading > span {
  display: block;
  margin-bottom: 10px;
  color: #22a6a0;
  font-size: 12px;
  font-weight: 600;
}

.not-found-v2__help-heading h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.8px;
}

.not-found-v2__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.not-found-v2__links > a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 13px;
  min-height: 100px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}

.not-found-v2__links > a + a {
  border-left: 1px solid var(--line);
}

.not-found-v2__link-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #d6f2ef;
  color: #22a6a0;
}

.not-found-v2__link-icon--amber {
  background: #FFF0D3;
  color: var(--amber-deep);
}

.not-found-v2__link-icon .icon {
  width: 18px;
  height: 18px;
}

.not-found-v2__links small,
.not-found-v2__links strong {
  display: block;
}

.not-found-v2__links small {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
}

.not-found-v2__links strong {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.not-found-v2__link-arrow {
  width: 15px;
  height: 15px;
  color: #22a6a0;
  transition: translate .2s ease;
}

.not-found-v2__links > a:hover .not-found-v2__link-arrow {
  translate: 3px 0;
}

.not-found-v2 a:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
}

@media (max-width: 980px) {
  .not-found-v2__hero {
    min-height: 580px;
  }
  .not-found-v2__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
    gap: 38px;
  }
  .not-found-v2__help-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

@media (max-width: 760px) {
  .not-found-v2__wrap {
    padding: 0 20px;
  }
  .not-found-v2__hero {
    min-height: auto;
    padding-top: 24px;
    padding-bottom: 52px;
  }
  .not-found-v2__crumbs {
    margin-bottom: 38px;
  }
  .not-found-v2__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
  .not-found-v2__copy h1 {
    font-size: 43px;
    letter-spacing: -1.5px;
  }
  .not-found-v2__mark {
    width: min(100%, 300px);
    margin: 0 auto;
  }
  .not-found-v2__mark strong {
    font-size: 94px;
  }
  .not-found-v2__help {
    padding: 44px 0 52px;
  }
  .not-found-v2__links {
    grid-template-columns: minmax(0, 1fr);
  }
  .not-found-v2__links > a + a {
    border-left: 0;
  }
}

@media (max-width: 420px) {
  .not-found-v2__copy h1 {
    font-size: 37px;
  }
  .not-found-v2__copy > p {
    font-size: 14px;
  }
  .not-found-v2__actions {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
  }
  .not-found-v2__primary {
    width: 100%;
  }
  .not-found-v2__secondary {
    width: fit-content;
  }
  .not-found-v2__mark {
    width: 250px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .not-found-v2__link-arrow {
    transition: none;
  }
  .not-found-v2__links > a:hover .not-found-v2__link-arrow {
    translate: none;
  }
}

/* Shared runtime performance controls */
/* Scroll/hover motion remains; decorative shadow effects do not repaint in a loop. */
.nav__zalv-group, .nav__zalv-group::before, .nav__zalv, .nav__zalv::after, .nav__zalv-mark img,
.nav__cta, .nav__cta::after,
.festival-foot .btn--sm, .festival-foot .btn--sm::after,
.service-landing__quote, .service-landing__quote::before, .service-landing__quote .icon,
.aqi-pulse-dot, .wthr-pulse-dot { animation: none !important; }
body.pmc-page-hidden *, body.pmc-page-hidden *::before, body.pmc-page-hidden *::after {
  animation-play-state: paused !important;
}