/* Page Specific Overrides */
    .hero {
      height: 85vh;
      /* Slightly shorter than full screen for modern feel */
      position: relative;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      color: #fff;
      overflow: hidden;
    }

    .hero-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
      filter: brightness(0.7);
      opacity: 0;
      transition: opacity 3s ease;
    }

    .hero-bg.active {
      opacity: 1;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      text-align: center;
      padding-bottom: 80px;
    }

    .hero h1 {
      font-size: 2.5rem;
      line-height: 1.4;
      margin-bottom: 24px;
      text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
    }

    .hero-sub-text {
      font-size: 1.1rem;
      margin-bottom: 40px;
      opacity: 0.9;
      line-height: 2;
    }

    .feature-icon {
      width: 60px;
      height: 60px;
      margin-bottom: 24px;
      color: var(--color-text-dark);
    }

    /* Contrast Section Background */
    .section-contrast {
      background-color: #f7f7f7;
    }

    /* Mobile Responsive - Hero & Headings */
    @media (max-width: 768px) {
      .hero {
        height: 75vh;
      }

      .hero-content {
        padding-bottom: 40px;
      }

      .hero h1 {
        font-size: 1.5rem;
        line-height: 1.5;
        padding: 0 16px;
      }

      .hero-sub-text {
        font-size: 0.85rem;
        line-height: 1.8;
        padding: 0 16px;
      }
    }

    @media (max-width: 480px) {
      .hero h1 {
        font-size: 1.3rem;
      }

      .hero-sub-text {
        font-size: 0.8rem;
        margin-bottom: 24px;
      }
    }