/* ─────────────────────────────────────────────
   ULTRA SMALL DEVICES (LITE MODE)
   Only show: HERO + MINI + CONTACT
   max-width: 400px AND max-height: 786px
   ───────────────────────────────────────────── */

   @media screen and (max-width:349px) {


    :root{
        --ultra-bg: #f4e9d1; /* cream */
        --ultra-ink: #1a1a1a;  /* black */
        --gold:  #d4af37;
      }
      
      nav#navbar.show .close-menu {
        opacity: 1;
        color: var(--gold);
    }

      body{
        background: var(--ultra-bg) !important;
        color: var(--ultra-ink) !important;
      }
      
    /* Kill the base scroll-snap + 100vh section system on tiny screens */
    html { scroll-snap-type: none !important; }
    main { margin-top: 88px !important; } /* header offset */
  
    /* Base CSS forces height:100vh & overflow:hidden on ALL sections */
    section{
      height: auto !important;
      min-height: 0 !important;
      overflow: visible !important;
      scroll-snap-align: none !important;
      padding: 1.15rem 0.95rem !important;
      opacity: 1 !important;
      transform: none !important;
    }
  
    /* NAV: keep it simple */
    header{ top: 10px !important; }
    .nav-wrapper{ padding: .45rem .9rem !important; }
    nav#navbar a{ font-size: 1.4rem !important; } /* if menu opens */
  
    /* ─────────────────────────────────────────────
       SHOW ONLY: #hero + #ultra-mini + #contact
       ───────────────────────────────────────────── */
  
    /* Hide everything by default */

    /* Hide ALL sections, even if they are nested in wrappers */
/* Hide EVERYTHING */
main section { display: none !important; }

/* But mobile CSS forces safety on with #safety { display:flex !important; }
   so we must explicitly shut it off */
#safety { display: none !important; }

/* Show ONLY what we want */
#hero, #ultra-mini, #contact { display: flex !important; }

  
    /* Show the 3 sections */
    #hero,
    #ultra-mini,
    #contact{
      display: flex !important;
    }
  
    /* ─────────────────────────────────────────────
       HERO tweaks (compact)
       ───────────────────────────────────────────── */
  
    #hero{
      flex-direction: column !important;
      justify-content: center !important;
      text-align: center !important;
      padding-top: 5.2rem !important;
      padding-bottom: 1.2rem !important;
      overflow: visible !important;
      top: 0 !important; /* override base top:-3rem */
    }
  
    .hero-bottom-img{ display: none !important; }
  
    #hero .logo-hero{
      width: 120px !important;
      height: 120px !important;
      margin-bottom: .65rem !important;
    }
  
    #hero .hero-title-main{
      font-size: clamp(44px, 12vw, 56px) !important;
      line-height: 1.05 !important;
      white-space: normal !important;
    }
  
    #hero .hero-title-sub{
      font-size: clamp(13px, 4.2vw, 17px) !important;
      letter-spacing: .18em !important;
      white-space: normal !important;
    }
  
    #hero .headline-rotate{
      font-size: 1.05rem !important;
      min-height: 3.2rem !important;
      margin: .55rem 0 .9rem !important;
    }
  
    #hero .hero-btn{
      margin: .75rem auto 0 !important;
      font-size: 1.6rem !important;
      padding: .55rem 1.1rem !important;
    }
  
    /* ─────────────────────────────────────────────
       MINI DESCRIPTION SECTION
       ───────────────────────────────────────────── */
  
    .ultra-only{ display: flex !important; }
  
    /* ─────────────────────────────────────────────
   MINI SUMMARY — unified cream/black + cards
   ───────────────────────────────────────────── */

#ultra-mini{
    justify-content: center;
    text-align: center;
  }
  
  .ultra-mini-inner{
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding: 0.25rem 0 0;
  }
  
  #ultra-mini h2{
    font-family: 'Cal Sans', sans-serif;
    font-size: 1.55rem;
    margin: 0 0 .5rem;
  }
  
  .ultra-mini-lead{
    font-size: .95rem;
    line-height: 1.35;
    margin: 0 auto .85rem;
    max-width: 340px;
  }
  
  .ultra-mini-cards{
    display: grid;
    gap: .7rem;
    margin: 0 auto;
    max-width: 360px;
  }
  
  .ultra-mini-card{
    text-align: left;
    background: transparent;
    border: 1px solid #000;
    border-radius: 12px;
    padding: .85rem .9rem;
  }
  
  .ultra-mini-card h3{
    font-family: 'Cal Sans', sans-serif;
    font-size: 1.05rem;
    margin: 0 0 .35rem;
  }
  
  .ultra-mini-card p{
    margin: 0;
    font-size: .93rem;
    line-height: 1.35;
  }
  
  
    /* ─────────────────────────────────────────────
       CONTACT: prevent cropping + icon-only socials
       ───────────────────────────────────────────── */
  
    #contact{
      padding-bottom: 2rem !important;
    }
  
    /* You already have a 2-col grid on contact; force 1-col */
    #contact .contact-main{
      grid-template-columns: 1fr !important;
      width: 100% !important;
      max-width: 360px;
      margin: 0 auto;
      gap: 1rem !important;
    }
  
    #contact .contact-details h2{
      font-size: 2.1rem !important;
      line-height: 1.05;
      margin-bottom: .65rem !important;
    }
  
    #contact .social-links{
      padding-bottom: 0 !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: .55rem !important;
    }
  
    /* Hide names on socials, keep WhatsApp unchanged */
    #contact .social-link:not(.whatsapp) span{ display: none !important; }
    #contact .social-link:not(.whatsapp){
      justify-content: center !important;
      gap: 0 !important;
      padding: .6rem 0 !important;
      min-height: 44px;
    }
    #contact .social-link:not(.whatsapp) i{ font-size: 1.25rem !important; }


    #hero, #ultra-mini, #contact{
        background: var(--ultra-bg) !important;
        color: var(--ultra-ink) !important;
      }


      /* Unified cream background, spacing instead of borders */
#hero,
#ultra-mini,
#contact{
  background: var(--ultra-bg) !important;
  color: var(--ultra-ink) !important;
}

/* Visual separation using spacing */
#hero{
  padding-bottom: 2.2rem !important;
}

#ultra-mini{
  padding-top: 1.8rem !important;
  padding-bottom: 2rem !important;
}

#contact{
  padding-top: 2rem !important;
}

/* Gentle rhythm between sections */
#hero::after,
#ultra-mini::after{
  content: "";
  display: block;
  height: 2px;
  background: #000;
  margin: 1.5rem auto 0;
  opacity: .12;
}

#ultra-mini h2{
letter-spacing: 0.05em;
font-size: 2.1rem !important;
line-height: 1.05;
margin-bottom: .65rem !important;
}


#ultra-mini h3{

    letter-spacing: 0.05em;


}

      #hero h1, #hero h2, #hero p,
#ultra-mini h2, #ultra-mini h3, #ultra-mini p,
#contact h2, #contact h3, #contact p, #contact a{
  color: var(--ultra-ink) !important;
}

i, .fas, .fa{
  color: var(--ultra-ink) !important;
}


#hero .hero-btn{
    background: transparent !important;
    color: #000 !important;
    border: 2px solid #000 !important;
    box-shadow: none !important;
    border-radius: 12px !important;
  }

  .hours-card {
    border: 1px solid var(--black) !important;
    background: rgba(255, 255, 255, .04) !important;
    border-radius: 12px !important;
    padding: .75rem .9rem !important;
}


/* ─────────────────────────────────────────────
   HERO SCALE & SPACING FIX (ultra-small)
   ───────────────────────────────────────────── */

/* Reduce overall hero vertical breathing room */
#hero{
    padding-top: 4.2rem !important;
    padding-bottom: 1.6rem !important;
  }
  
  /* Logo (bear badge) smaller */
  #hero .logo-hero{
    width: 200px !important;
    height: 200px !important;
    margin-bottom: .4rem !important;
  }
  
  /* Main title tighter */
  #hero .hero-title-main{
    font-size: clamp(36px, 10vw, 44px) !important;
    line-height: 1.05 !important;
    margin-bottom: .2rem !important;
  }
  
  /* Paw icon smaller + closer */
  #hero .hero-title-main .paw,
  #hero .hero-title-main .fa-paw{
    font-size: .65em !important;
    margin-left: .15em !important;
    vertical-align: middle;
  }
  
  /* Subtitle tightened */
  #hero .hero-title-sub{
    font-size: 13px !important;
    margin-top: .2rem !important;
    margin-bottom: .6rem !important;
    letter-spacing: .15em !important;
  }
  
  /* Tagline line ("24/7 emergency pet tran…") */
  #hero .headline-rotate,
  #hero .hero-tagline{
    font-size: .95rem !important;
    min-height: auto !important;
    margin: -2.65rem 0 .75rem !important;
  }
  
  /* Contact button closer + slightly smaller */
  #hero .hero-btn{
    margin-top: .4rem !important;
    padding: .55rem 1.15rem !important;
    font-size: 1.4rem !important;
  }
  

  /* ─────────────────────────────────────────────
   STOP headline rotator causing layout shift
   ───────────────────────────────────────────── */

/* Make hero a stable viewport block (prevents next section peeking) */
#hero{
    min-height: 100svh !important;   /* stable viewport height on mobile */
         /* keeps next section from showing during reflow */
  }
  
  /* Reserve a fixed “slot” for the rotating headline */
  .headline-rotate-wrapper{
    width: 100%;
    max-width: 320px;
    margin: 0 auto !important;
  
    /* lock height so text changes don't move the button */
    line-height: 1.25 !important;
    height: calc(1.25em * 2) !important;  /* exactly 2 lines */
  }
  
  /* Clamp the rotating text to 2 lines so it never grows taller */
  .headline-rotate{
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  
    /* consistency */
    line-height: 1.25 !important;
    margin: 0 !important;
  }
  
  /* Keep the CTA from “chasing” the rotator */
  #hero .hero-btn{
    margin-top: 0.9rem !important;
    position: absolute;
    bottom: 10vh;  }

    .headline-rotate{

        display: none !important;
    }
  

    #read-journey-btn{
  
      display: none;
    
      }
    


  }