/* Fozproperties — holding page
   Styled after the lagom-development.com landing hero:
   full-bleed photo, giant cream Mulish wordmark up top,
   short line bottom-left. Background image is the Unsplash
   night house (assets/bg.jpg). */
:root{
  --cream:#f2efe9;
  --dark:#141620;
  --font-head:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--dark);
  color:var(--cream);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:clamp(1.5rem,4vw,3.25rem);
  overflow:hidden;
  background:var(--dark) url("../assets/bg.jpg") center center / cover no-repeat;
}
/* legibility wash — darker at top and bottom, like the reference */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(18,20,28,.58) 0%,
    rgba(18,20,28,.22) 38%,
    rgba(18,20,28,.30) 62%,
    rgba(18,20,28,.68) 100%);
}
.hero > *{position:relative;z-index:1}

.hero h1{
  margin:clamp(1.5rem,7vh,5.5rem) 0 0;
  text-align:center;
  font-family:var(--font-head);
  font-weight:800;
  color:var(--cream);
  font-size:clamp(2.4rem,12.5vw,11rem);
  line-height:.9;
  letter-spacing:-.025em;
  text-shadow:0 2px 40px rgba(0,0,0,.28);
}

.hero .tag{
  margin:0 0 clamp(.75rem,4vh,2.25rem);
  font-family:var(--font-head);
  font-weight:700;
  color:var(--cream);
  font-size:clamp(1.05rem,3.4vw,1.9rem);
  letter-spacing:.02em;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}