/* ===== Custom styles for Alpha Plumbing and Heating ===== */

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Selection color */
  ::selection {
    background-color: #9f2638;
    color: #fff;
  }

  /* Scrollbar styling */
  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-track {
    background: #fdf2f4;
  }
  ::-webkit-scrollbar-thumb {
    background: #c2354e;
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #9f2638;
  }

  /* ===== Scroll-reveal animations (progressive enhancement) ===== */
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .reveal.revealed {
      opacity: 1;
      transform: translateY(0);
    }
    /* Staggered delays for grid children */
    .service-card {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.5s ease, transform 0.5s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    }
    .service-card.revealed {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Always-visible fallback for reduced-motion or no-JS */
  @media (prefers-reduced-motion: reduce) {
    .reveal,
    .service-card {
      opacity: 1;
      transform: none;
    }
  }

  /* ===== Mobile menu transitions ===== */
  #mobileNav {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  #mobileNav.open {
    max-height: 400px;
  }

  /* ===== Navbar scroll state ===== */
  header.scrolled {
    box-shadow: 0 1px 12px rgba(159, 38, 56, 0.08);
  }

  /* ===== CTA section gradient overlay ===== */
  #contact {
    background: linear-gradient(135deg, #6f1f2c 0%, #9f2638 50%, #c2354e 100%);
  }

  /* ===== Subtle pattern overlay on blush sections ===== */
  #services,
  #why-us {
    position: relative;
  }
  #services::before,
  #why-us::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 20%, rgba(194, 53, 78, 0.03) 0%, transparent 50%),
                      radial-gradient(circle at 80% 80%, rgba(194, 53, 78, 0.03) 0%, transparent 50%);
    pointer-events: none;
  }