/* Fluid design: same root font-size scaling as live site (makes page scale match) */
html { font-size: 1rem; }
@media screen and (max-width: 1920px) { html { font-size: 1.5rem; } }
@media screen and (max-width: 1800px) { html { font-size: calc(0.375rem + 0.41666666666666663vw); } }
@media screen and (max-width: 1680px) { html { font-size: calc(0.375rem + 0.41666666666666663vw); } }
@media screen and (max-width: 1440px) { html { font-size: calc(-0.3750000000000002rem + 1.2500000000000002vw); } }
@media screen and (max-width: 1280px) { html { font-size: calc(0.5020000000000002rem + 0.1563721657544957vw); } }
@media screen and (max-width: 960px) { html { font-size: 1rem; } }
@media screen and (max-width: 720px) { html { font-size: calc(0.5015560165975104rem + 0.8298755186721991vw); } }
@media screen and (max-width: 479px) { html { font-size: calc(0.7498692468619247rem + 0.20920502092050208vw); } }

/* Scroll-driven effects and reveals */

/* ---- Services section: desktop card grid ---- */
@media screen and (min-width: 992px) {
  .section-services {
    position: relative;
    z-index: 1;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible;
  }

  .section-services .hero-paralax {
    display: none;
  }

  .section-why-us {
    position: relative;
    z-index: 2;
    clear: both;
  }

  .section-services .container-services {
    position: relative;
    top: auto;
  }

  .section-services .container-services .heading-container {
    margin-bottom: 3rem;
  }

  .section-services .sticky-container {
    position: relative;
    top: auto;
    height: auto;
    display: block;
    padding-top: 0;
    overflow: visible;
  }

  .section-services .sticky-wrap {
    height: auto;
    padding: 0;
    overflow: visible;
  }

  .section-services .scroll-inner {
    width: 100%;
    max-width: 72rem;
    height: auto;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
    transform: none !important;
    will-change: auto;
  }

  .section-services .services-cms-item-card {
    width: auto;
    min-width: 0;
    height: auto;
  }

  .section-services .services-item-container {
    width: auto;
    height: 100%;
    display: block;
  }

  .section-services .bracket {
    display: none;
  }

  .section-services .services-item {
    min-height: 17rem;
    padding: 2rem;
  }
}

@media screen and (max-width: 479px) {
  .section-hero {
    height: 57rem;
    background-position: 50% 136%;
  }
}

/* ---- Scroll-triggered reveal: initial state ---- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children (e.g. service cards on mobile, why-us items) */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.15s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.2s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.25s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.3s; }
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Hero and headings: subtle fade-up */
.slide-in.reveal-on-scroll,
.slide-in2.reveal-on-scroll,
.slide-in3.reveal-on-scroll,
.slide-in4.reveal-on-scroll,
.slide-in5.reveal-on-scroll,
.slide-in7.reveal-on-scroll {
  transform: translateY(28px);
}
.slide-in.reveal-on-scroll.is-visible,
.slide-in2.reveal-on-scroll.is-visible,
.slide-in3.reveal-on-scroll.is-visible,
.slide-in4.reveal-on-scroll.is-visible,
.slide-in5.reveal-on-scroll.is-visible,
.slide-in7.reveal-on-scroll.is-visible {
  transform: translateY(0);
}

/* T.RICKS letter animation (same as live site) */
.letter { display: inline-block; }
.tricks .letter { opacity: 0; }
.tricksword { white-space: nowrap; }

/* Hero lion image enters with the headline instead of waiting for the letter timeline. */
.hero-img-animate {
  opacity: 0;
  animation: pcHeroImageIn 650ms ease-out 80ms both;
}

@keyframes pcHeroImageIn {
  from {
    opacity: 0;
    transform: translate3d(12px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-img-animate {
    opacity: 1;
    animation: none;
    transform: none;
  }
}

.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Nav: Services dropdown – show submenu on hover (desktop), match original penchukcyber.com */
@media screen and (min-width: 992px) {
  .navbar1_component .w-dropdown:hover .w-dropdown-list,
  .navbar1_component .w-dropdown.w--open .w-dropdown-list {
    display: block;
  }
}
