:root { --scrim: rgba(0,0,0,.6); }

html, body {
    height: 100%;
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    color: #fff;
    display: grid;
    grid-template-rows: 1fr auto;
    /*background-color: rgba(0, 0, 0, 0.65);*/
}
.hero {
    min-height: 100%;
    display: grid; place-items: center; text-align: center;
    background:
    linear-gradient(to bottom, var(--scrim), var(--scrim)),
    url('../img/coming-soon-background.jpg') center/cover no-repeat;
    padding: 2rem;
}

.hero p {
    /*line-height: .6rem;*/
}

.hero a {
    border-radius: 10x;
    text-decoration: none;
    color: #fff;
        text-shadow: 0 1px 2px rgba(0,0,0,.35); /* match your <p> style */
    border-bottom: 2px solid rgba(56,189,248,.7); 
    padding-bottom: 0px;
    
}

.hero a:hover {
    /*background-color: rgba(56, 191, 248, 0.2) !important;*/
    border-radius: 10x;
    transform: translate(-50%, -100%);
    border-bottom: 3px solid rgba(56,189,248,1); 
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.45);
}

.content { 
    max-width: 720px; padding: 1rem; 
}


h1 {
    font-size: clamp(3rem, 7vw, 4.5rem);
    font-weight: 800; letter-spacing: .5px; line-height: 1.06;
    line-height: 5rem;
    margin: 0 0 .75rem;
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

h2 {
    font-size: clamp(1.75rem, 7vw, 2.4rem);
    font-weight: 700; letter-spacing: .5px; line-height: 1.06;
    line-height: 3rem;
    margin: 0 0 .75rem;
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

p {
    font-size: 1.13rem; font-weight: 400; line-height: 1.55;
    margin: 0; color: rgba(255,255,255,.92);
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

br.contact-break {
    display:none;
}

.divider {
    width: 220px;
    height: .18rem;
    border: none;
    margin: 1.1rem auto 1.65rem;
    background: linear-gradient(to right, rgba(56,189,248,0), rgba(56,189,248,.8), rgba(56,189,248,0));
}

footer {
    text-align: center;
    font-size: .9rem;
    color: rgba(255,255,255,.8);
    padding: 1rem 1rem 2rem;
    background:
    linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.2)); /*commenting out to see if it helps footer background not be black */
}

footer a { 
    border-radius: 10x;
    text-decoration: none;
    color: rgba(255,255,255,.8);
        text-shadow: 0 1px 2px rgba(0,0,0,.35); /* match your <p> style */
    border-bottom: 2px solid rgba(56,189,248,.7); 
    padding-bottom: 0px;
}

footer a:hover {
    /*background-color: rgba(56, 191, 248, 0.2) !important;*/
    color: rgba(255,255,255,1);
    border-radius: 10x;
    transform: translate(-50%, -100%);
    border-bottom: 3px solid rgba(56,189,248,1); 
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.45);
}

/* Mobile: center hero vertically + keep footer always visible */
@media (max-width: 600px) {
    html, body { min-height: 100svh; background: #000; }

    /* Center the headline/subhead */
    .hero {
        display: flex;
        flex-direction: column;
        justify-content: center;   /* vertical center */
        align-items: center;       /* horizontal center */
        text-align: center;
        padding: 2.15rem 1rem 3.1rem;/* extra bottom space so footer doesn't overlap */
        min-height: unset;         /* don't force extra height */
    }

    .hero p {
        line-height: 1.75rem;
        margin-bottom: -.25rem;
    }

    h1 {
        line-height: 3.75rem;
    }

    h2 {
        line-height: 2.5rem;
        margin-bottom: 1.5rem;
    }

    br.contact-break {
        display:block;
    }

    .divider {
        margin-bottom: 1.25rem;
    }

    /* Pin the footer to the bottom, above the URL bar */
    footer {
        position: sticky;
        bottom: 0;
        padding: .75rem 1rem;
        color: #fff;
        text-shadow: 0 1px 2px rgba(0,0,0,.35); /* match your <p> style */
            background-color: #1c1a1a;
        font-size: .9rem;
    }
    
}