/* ===============================
   3. HERO & BACKGROUND SECTIONS
================================ */

/* MAIN PAGE HERO (Home/Services) */
.hero,
.services-hero {
    position: relative;
    height: clamp(500px, 70vh, 750px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    background-color: #001f3f;
}

.hero-content,
.services-hero-content {
    position: relative;
    z-index: 5;
    text-align: center;
    width: 90%;
    max-width: 1400px;
    padding: 180px 20px 0;
    margin: 0 auto;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../assets/Background.png") center center no-repeat;
    background-size: cover;
    z-index: 0;
}

.hero::after,
.services-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.50) 0%,
        rgba(0,0,0,0.30) 40%,
        rgba(0,0,0,0.65) 100%
    );
    z-index: 1;
}

.hero h1,
.services-hero h1 {
    font-size: clamp(2.2rem, 3vw, 3.2rem);
    line-height: 1.15;
    margin-bottom: 14px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.hero p,
.services-hero p {
    font-size: 1rem;
    font-weight: 600;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.5;
}
/* INTERNAL PAGE HERO (Seamless Background Style) */

.internal-hero {
    position: relative;
    height: 400px; /* Fixed height to ensure blueprint has space */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    
    /* Background blend */
    background: linear-gradient(
        to bottom, 
        #4a4a4a 0%, 
        #eef3f7 100%  /* This MUST match the color below */
    );
}

.internal-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    
    /* Blueprint Image */
    background-position: center center;
    background-repeat: no-repeat;
   background-size: 45%; /* Adjust size to fit your preference */
    
    /* Visibility Boost */
    opacity: 0.6; /* Increased from 0.25 to make it visible */
    filter: brightness(1.1) contrast(1.1); /* Sharpens the white lines */
    
    z-index: 1;
    pointer-events: none;
    
    /* Soft edges for the blueprint */
    mask-image: radial-gradient(circle, black 50%, transparent 95%);
    -webkit-mask-image: radial-gradient(circle, black 50%, transparent 95%);
}

/* Page-specific Blueprint Assignments */
.about-hero::before   { background-image: url("../assets/blueprint-about.png"); }
.faq-hero::before     { background-image: url("../assets/blueprint-faq.png"); }
.enviro-hero::before  { background-image: url("../assets/blueprint-environmental.png"); }
.privacy-hero::before { background-image: url("../assets/blueprint-privacy.png"); }
.terms-hero::before   { background-image: url("../assets/blueprint-terms.png"); }
.contact-hero::before { background-image: url("../assets/blueprint-contact.png"); }
.quote-hero::before   { background-image: url("../assets/blueprint-quote.png"); }

/* CONTACT + QUOTE HERO SIZE FIX */
.contact-hero::before,
.quote-hero::before {
    background-size: contain;
}

/* INTERNAL CONTENT OVERLAY (Floating Title) */
.internal-hero-overlay {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 900px;
    padding: 0 20px;
    margin: 0 auto;
    text-align: center;
}

.internal-hero h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    color: #ffffff;
    margin: 0 0 10px 0;
    font-weight: 700;
    
    /* Strong shadow to pop against complex blueprint lines */
    text-shadow: 
        0 2px 15px rgba(0,0,0,0.9),
        0 0 5px rgba(0,0,0,1);
}

.internal-hero p {
    font-size: 1.2rem;
    color: #f0f4f8;
    margin: 0 auto;
    font-weight: 500;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

/* Transition to the white tile below */
.section-fade {
    height: 100px;
    background-color: #eef3f7; /* Solid color to act as a base */
    margin-top: -1px;          /* Pulls it up by 1 pixel to overlap any gap */
    position: relative;
    z-index: 3;
}

/* ANIMATIONS */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fade-up.delay { animation-delay: 0.3s; }

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* SERVICE SPECIFIC IMAGES */
.services-hero.service-pressure    { background-image: url("../assets/pressure.png"); }
.services-hero.service-temperature { background-image: url("../assets/temperature.png"); }
.services-hero.service-mass        { background-image: url("../assets/mass.png"); }
.services-hero.service-dimensional { background-image: url("../assets/dimensional.png"); }
.services-hero.service-gas         { background-image: url("../assets/gas.png"); }
.services-hero.service-healthcare  { background-image: url("../assets/healthcare.png"); }

.services-hero {
    background-size: cover !important;
    background-position: center center !important;
}

.hero h1,
.hero p,
.services-hero h1,
.services-hero p {
    color: #ffffff !important;
}

.hero h1,
.services-hero h1 {
    text-shadow: 0 3px 15px rgba(0,0,0,0.9);
}

.hero p,
.services-hero p {
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}