/* Mobile Optimization for Hero Section */

@media (max-width: 768px) {
  /* 0. Lock Hero Container to Small Viewport (100svh) so Chrome Address Bar never pushes content down */
  .capital-hero {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .capital-hero .hero-body {
    height: 100% !important;
    height: 100svh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 55px) !important;
    box-sizing: border-box !important;
  }

  /* 1. Fix the text (Find What Moves You) */
  .capital-hero .hero-title {
    white-space: normal !important; /* Allow wrapping */
    word-break: break-word;
    font-size: clamp(2.3rem, 11vw, 3.8rem) !important;
    line-height: 1.1 !important;
  }
  
  .capital-hero .hero-subtitle {
    font-size: clamp(0.9rem, 3.8vw, 1.1rem) !important; /* Smaller text */
    white-space: normal !important;
    padding-bottom: 5px;
    margin-bottom: 25px !important; /* Pulls button up */
  }

  .capital-hero .hero-content {
    margin-top: -25px !important; /* Perfectly centered within 100svh */
  }
  
  /* 2. Building Alignment: Anchored absolutely inside pinned hero at bottom: 12% so resting state sits right under the button */
  .hero-building-fixed {
    position: absolute !important;
    bottom: 12% !important;
    left: 50% !important;
    width: 145% !important;
    max-width: 145% !important;
  }

  .hero-building-fixed img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }

  /* 3. Fix Clouds */
  .capital-hero .cloud-left {
    width: 80% !important;
    bottom: 2% !important;
    left: -55% !important; /* Pushed significantly more left */
  }

  .capital-hero .cloud-right {
    width: 85% !important;
    bottom: 15% !important; /* Moved higher up */
    right: -60% !important; /* Pushed significantly more right */
  }

  /* 4. Logo & Mask Position (Centered at 50% 50% for 100% mathematical precision with mask-position) */
  .star-container {
    position: absolute !important;
    width: 340px !important;
    height: 346px !important;
    top: 50% !important;
    left: 50% !important;
    margin-top: -173px !important;
    margin-left: -170px !important;
  }

  .star-container svg {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 22px rgba(255, 255, 255, 0.75)) !important;
  }
  
  .clipped-building-wrapper.bg-masked {
    height: 100% !important;
    height: 100svh !important;
    max-height: 100svh !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    -webkit-mask-size: 340px 346px !important;
    -webkit-mask-position: 50% 50% !important;
    mask-size: 340px 346px !important;
    mask-position: 50% 50% !important;
  }
}

@media (max-width: 480px) {
  /* For very small mobile screens */
  .hero-building-fixed {
    position: absolute !important;
    bottom: 12% !important;
    left: 50% !important;
    width: 155% !important;
    max-width: 155% !important;
  }

  .star-container {
    position: absolute !important;
    width: 294px !important;
    height: 300px !important;
    top: 50% !important;
    left: 50% !important;
    margin-top: -150px !important;
    margin-left: -147px !important;
  }
  
  .clipped-building-wrapper.bg-masked {
    -webkit-mask-size: 294px 300px !important;
    -webkit-mask-position: 50% 50% !important;
    mask-size: 294px 300px !important;
    mask-position: 50% 50% !important;
  }
  
  .capital-hero .cloud-left {
    width: 100% !important;
    bottom: -2% !important;
    left: -65% !important; /* Pushed significantly more left */
  }

  .capital-hero .cloud-right {
    width: 105% !important;
    bottom: 18% !important; /* Moved higher up */
    right: -70% !important; /* Pushed significantly more right */
  }

  .capital-hero .hero-content {
    margin-top: -45px !important;
  }
}