/* full-viewport band */
.hero{
    position: relative;
    isolation: isolate;         /* new stacking context */
    width: 100vw; height: 100vh;
    display: grid; place-items: center; text-align: center;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    /* If you had an animation here, consider removing it or ensure fill-mode: both */
    /* animation: none; */
}

/* gradient overlay above bg-fade */
.hero::after{
    content:""; position:absolute; inset:0; z-index: 1;
    background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.35));
    opacity: 1;
    transition: opacity 900ms ease;
    will-change: opacity;
}

.hero__inner{ position: relative; z-index: 2; }

/* enter-from directions */
.hero__title, .hero__sub{
    opacity:0; transition:opacity 420ms ease, transform 520ms ease;
    will-change: opacity, transform;
}
.hero__title, .hero__sub{ transform:translate3d(-120%,0,0) }
.hero__title, .hero__sub{ transform:translate3d( 120%,0,0) }
.hero__title, .hero__sub{ transform:translate3d(0,-120%,0) }
.hero.is-in .hero__title, .hero__sub{ opacity:1; transform:translate3d(0,0,0) }

/* --- fade-in background for hero sections --- */
.hero::before{
    content:""; position:absolute; inset:0; z-index: 0;
    background-image: var(--bg-img);
    background-size: cover; background-position: center;
    opacity: 0;                         /* base state */
    transition: opacity 900ms ease;
    will-change: opacity;
    transform: translateZ(0);           /* promote layer */
    backface-visibility: hidden;
    contain: paint;                     /* isolates paint, reduces flicker */
}
.hero.is-in::before {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 900ms;
}


@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Place content left/right of PN. wordmark */
.contact-grid{
    display:grid;
    grid-template-columns: minmax(340px, 560px) minmax(340px, 560px);
    column-gap: min(550px);
    row-gap: 28px;
    align-items:flex-start;
    justify-content:center;
    max-width: 1240px;                      /* keep the block narrower */
    padding: 0 6vw;
    margin-inline:auto;
}
@media (min-width: 1300px) {
    .contact-grid{
        column-gap: min(650px);
    }
}
@media (max-width: 1024px) {
    .contact-grid{
        grid-template-columns: minmax(280px, 460px) minmax(280px, 400px);
        column-gap: min(300px);
    }
}
/* second child of the grid = socials */
.contact-grid > :nth-child(2){
    align-self: center;
    transform: translateY(-2vh);
}
/* keep first child (form) high */
.contact-grid > :first-child{
    align-self: start;
    transform: translateY(-4vh);
}

/*Social media links*/

:root{ --brand-gold:#bfa400; }

.social{
    list-style:none; display:flex; gap:22px; margin:28px 0 0; padding:0;
}
.social a{
    display:inline-flex; width:34px; height:34px; color:#fff;
    transition:color .2s ease, opacity .2s ease;
}
.social a:hover{ color:var(--brand-gold); opacity:.95; }
.social svg{ width:100%; height:100%; fill:currentColor; }

/* footer */
.site-foot{ background:#000; border-top:1px solid rgba(255,255,255,.1); }
.site-foot__inner{ max-width:1200px; margin:0 auto; padding:14px 24px; text-align:center; font-size:14px; color:rgba(255,255,255,.85); }