@font-face {
  font-family: "Paytone One";
  src: url("PaytoneOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

h1, h2, .process > span {
  font-family: "Paytone One", Arial, sans-serif;
  font-weight: 400 !important;
}

.hero {
  position: relative;
  isolation: isolate;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -8rem;
  top: calc(-13rem + var(--scroll-y, 0px));
  width: 34rem;
  height: 34rem;
  border: 5rem solid rgba(19, 115, 186, .055);
  border-radius: 50%;
  transition: top .08s linear;
}

.hero-panel {
  transform: translateY(calc(var(--scroll-y, 0px) * .32));
  transition: transform .08s linear, box-shadow .25s ease;
}

.service-card,
.benefit,
.process,
.btn,
.nav-link,
.panel-item {
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, color .2s ease, background-color .2s ease;
}

.service-card:hover,
.benefit:hover {
  transform: translateY(-7px);
  box-shadow: 0 1rem 2.2rem rgba(15, 39, 66, .12);
}

.panel-item:hover {
  transform: translateX(5px);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 .6rem 1.25rem rgba(15, 39, 66, .15);
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1);
}

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

.service-card.reveal:nth-child(2),
.benefit.reveal:nth-child(2),
.process.reveal:nth-child(2) { transition-delay: .07s; }

.service-card.reveal:nth-child(3),
.benefit.reveal:nth-child(3),
.process.reveal:nth-child(3) { transition-delay: .14s; }

.navbar.scrolled {
  padding-top: .55rem !important;
  padding-bottom: .55rem !important;
  box-shadow: 0 .55rem 1.7rem rgba(15, 39, 66, .11);
}

.site-logo {
  transition: width .25s ease, height .25s ease;
}

.custom-menu-toggle {
  width: 50px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid #dce4eb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 .3rem .8rem rgba(15, 39, 66, .08);
}

.custom-menu-toggle:focus {
  box-shadow: 0 0 0 .22rem rgba(232, 8, 62, .16);
}

.menu-icon {
  position: relative;
  display: block;
  width: 25px;
  height: 19px;
}

.menu-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 5px;
  background: #e8083e;
  transform-origin: center;
  transition: top .28s ease, transform .28s ease, opacity .18s ease, width .28s ease, background-color .28s ease;
}

.menu-icon span:nth-child(1) { top: 0; }
.menu-icon span:nth-child(2) { top: 8px; width: 72%; background: #1373ba; }
.menu-icon span:nth-child(3) { top: 16px; }

.custom-menu-toggle:hover .menu-icon span:nth-child(2) { width: 100%; }
.custom-menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(1) { top: 8px; transform: rotate(45deg); }
.custom-menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.custom-menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(3) { top: 8px; transform: rotate(-45deg); }

.navbar.scrolled .site-logo {
  width: 116px;
  height: 52px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-panel { transform: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 991.98px) {
  .hero::after { width: 23rem; height: 23rem; right: -12rem; }
  .hero-panel { transform: none; }
}

.easter-hint {
  display: block;
  margin: 1.2rem auto -.65rem;
  padding: .2rem .75rem;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.38);
  font-size: .78rem;
  transition: color .2s ease, transform .2s ease;
}

.easter-hint:hover { color: #fff; transform: translateY(3px); }
.easter-hint i { display: inline-block; animation: hintBounce 1.6s ease-in-out infinite; }

.water-game {
  position: relative;
  max-height: 0;
  overflow: hidden;
  color: #fff;
  background: #071d31;
  opacity: 0;
  transition: max-height .75s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
}

.water-game.is-open { max-height: 620px; opacity: 1; }
.water-game h2 { color: #fff; }
.game-copy { color: #aec2d3; }
.game-close { position: absolute; top: 1rem; right: 1rem; border: 0; background: transparent; color: #fff; font-size: 1.2rem; }

.pipe-board {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  max-width: 720px;
  margin: 2rem auto 1.25rem;
  padding: 1.4rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.045);
}

.pipe {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  background: #102f4b;
  color: #91a8b9;
  font-size: 3.5rem;
  line-height: 1;
}

.pipe span { display: block; transform: rotate(var(--rotation)); transition: transform .28s ease, color .3s ease; }
.pipe:hover { border-color: #5aaee8; background: #153a59; }
.water-source, .water-home { display: grid; place-items: center; width: 45px; font-size: 1.8rem; }
.water-source { color: #54b8ff; }
.water-home { color: #fff; }
.game-status { min-height: 28px; color: #a9bdcc; font-weight: 700; }

.water-game.is-solved .pipe { border-color: #32d47b; background:#103c32; box-shadow: 0 0 20px rgba(50,212,123,.38); }
.water-game.is-solved .pipe span { color: #32d47b; text-shadow:0 0 12px rgba(50,212,123,.7); }
.water-game.is-solved .water-source { color:#32d47b; animation:waterFlow .7s ease-in-out infinite alternate; }
.water-game.is-solved .game-status { color: #70e0a4; }
.water-game.is-solved .water-home { color: #70e0a4; animation: homePulse .9s ease-in-out infinite alternate; }

@keyframes hintBounce { 50% { transform: translateY(4px); } }
@keyframes homePulse { to { transform: scale(1.12); } }
@keyframes waterFlow { to { transform:translateX(5px) scale(1.12); filter:drop-shadow(0 0 8px #32d47b); } }

@media (max-width: 575.98px) {
  .pipe-board { gap: .25rem; padding: 1rem .45rem; }
  .pipe { width: 44px; height: 52px; font-size: 2.4rem; }
  .water-source, .water-home { width: 30px; font-size: 1.3rem; }
}

.privacy-link,.footer-link{padding:0;border:0;background:none;color:inherit;text-decoration:underline;text-underline-offset:3px}.footer-link{text-decoration:none}.cookie-banner{position:fixed;z-index:1080;left:1rem;right:1rem;bottom:1rem;opacity:0;visibility:hidden;transform:translateY(24px);transition:.35s ease}.cookie-banner.is-visible{opacity:1;visibility:visible;transform:none}.cookie-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;max-width:1080px;margin:auto;padding:1.1rem 1.25rem;border:1px solid #dbe4eb;border-radius:12px;background:#fff;box-shadow:0 1rem 3rem rgba(7,29,49,.22)}.cookie-inner strong{color:#0f2742}.cookie-inner p{margin:.25rem 0 0;color:#65727e;font-size:.9rem}.cookie-actions{display:flex;gap:.5rem;flex:0 0 auto}.cookie-option{display:flex;justify-content:space-between;gap:1.5rem;padding:1rem 0;border-bottom:1px solid #e5ebef}.cookie-option:last-child{border-bottom:0}.cookie-option p,.privacy-copy p{color:#65727e;margin:.25rem 0 0}.privacy-copy h3{font-size:1.05rem;margin:1.4rem 0 .35rem;color:#0f2742}@media(max-width:767.98px){.cookie-inner{display:block}.cookie-actions{margin-top:1rem;flex-wrap:wrap}.cookie-actions .btn{flex:1}.footer-link{font-size:.8rem}}

/* Stability fix: keep sticky header/logo dimensions constant while scrolling.
   Resizing a sticky header near the scroll threshold can make the page jump/jitter. */
.navbar.scrolled {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.site-logo {
  transition: none !important;
}
.navbar.scrolled .site-logo {
  width: 220px !important;
  height: 72px !important;
}
@media (max-width: 991.98px) {
  .navbar.scrolled .site-logo {
    width: 190px !important;
    height: 62px !important;
  }
}
@media (max-width: 575.98px) {
  .navbar.scrolled .site-logo {
    width: 165px !important;
    height: 54px !important;
  }
}