:root{
    --orange-500:#ff7a1c;
    --grey-700:#1f1f1f;
    --radius-sm:.5rem;
    --fade-ms: 500ms;
}

/* ---------- RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;font-family:'Poppins',sans-serif;color:var(--grey-700);background:#fff;}

/* ---------- WRAPPER ---------- */
.wrapper{
    max-width:95%;
    margin-inline:auto;
    padding:0 1rem 2rem;
    min-height:100%;
    display:flex;
    flex-direction:column;
}

/* ---------- NAV ---------- */
.nav{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.25rem 0;
    gap: 1rem;
}
.brand{font-weight:700;font-size:1.25rem;display:flex;align-items:center;gap:.5rem;font-size: 2.5rem;}
.nav ul{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0;}
.nav a{font-weight:600;}
.nav a.active{color:var(--orange-500);}
.nav a:hover{color:var(--orange-500);text-decoration:none;}
.nav a {
    color: var(--grey-700);
    text-decoration: none;
}

/* ---------- HERO ---------- */
.hero{display:flex;flex:1 1 auto;overflow:hidden;border-radius:var(--radius-sm);
        min-height:clamp(420px,60vh,800px);}

.slideshow{flex:2 1 0;position:relative;aspect-ratio:3/2;overflow:hidden;}
.slide{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:0;
    transition: opacity var(--fade-ms) ease-in-out;
    will-change: opacity;
    pointer-events:none; 
}

.slide.active{                   /* fading in */
  opacity:1;
  z-index:2;
}
.slide.leaving{                  /* fading out */
  opacity:0;
  z-index:1;
}

/* text fade */
#city{
  display:inline-block;
  transition: opacity var(--fade-ms) ease-in-out;
  opacity:1;
}

#city.fade-out {
  opacity: 0;
}


.hero__content{
    flex:1 1 0;                  /* 1/3 width */
    min-width:0;                 /* prevents flex overflow */
    background:rgba(0,0,0,.75);
    color:#fff;
    padding:4rem 3rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:1.5rem;
}
.hero__content h1{font-size:clamp(2rem,2.7vw+1rem,3rem);margin:0;line-height:1.15;}
.hero__content h1 span{color:var(--orange-500);}
.btn-primary{
    align-self:flex-start;background:var(--orange-500);border:none;color:#fff;
    padding:1rem 2.4rem;border-radius:var(--radius-sm);font-size:1rem;cursor:pointer;
}

/* ---------- EMAIL FORM ---------- */
.email-bar{
    display:flex;
    flex-wrap:wrap;        /* allows button to break below input */
    gap:1rem;
    margin-top:.5rem;
}
.email-bar input{
    flex:1 1 14rem;        /* prefers 14 rem but can grow / shrink */
    min-width:150px;       /* stops collapsing too small */
    padding:.9rem 1rem;
    border:1px solid #ccc;
    border-radius:var(--radius-sm);
    font-size:1rem;
    outline:none;
}
.email-bar button{
    flex:1 1 8rem;         /* side-by-side: ~8 rem ; on its own row: fills 100 % */
    padding:.9rem 1.6rem;
    border:none;
    border-radius:var(--radius-sm);
    background:var(--grey-700);
    color:#fff;
    font-size:1rem;
    cursor:pointer;
}

.email-bar button:hover{
    background:var(--orange-500);
}

/* ---------- PHONE / TABLET (≤ 960 px) ---------- */
@media (max-width:960px){
    .wrapper{max-width:100%;padding-bottom:1.5rem;}

    .nav{flex-wrap:wrap;justify-content:center;}
    .nav ul{flex-wrap:wrap;gap:1rem;}

    .hero{flex-direction:column;min-height:auto;}
    .slideshow{width:100%;height:60vh;flex:none;aspect-ratio:auto;}
    .hero__content{width:100%;padding:2rem 1.25rem;}

    .email-bar{
    display:flex;
    flex-wrap:nowrap;
    gap:1rem;
    margin-top:.5rem;
    }

    /* stack input over button */
    .email-bar{flex-direction:column;gap:1rem;}
    .email-bar input,
    .email-bar button{flex:1 1 100%;}
}