/* ZENITH Real Estate — coming soon
   Brand truth from zenithrealestate.hr: Poppins 700 lowercase wordmark (letter-spacing -.03em),
   pure black/white on photography. Headings poppins-v2 = Poppins. */

@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --ink:#000;
  --paper:#fff;
  --soft:rgba(255,255,255,.74);
  --line:rgba(255,255,255,.26);
  --maxw:820px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--paper);
  background:#0B0D0F;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.stage{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:56px 24px 84px;
  overflow:hidden;
  isolation:isolate;
}

/* client's own Adriatic terrace photo */
.stage::before{
  content:'';
  position:absolute;inset:0;z-index:-2;
  background:url('img/hero.jpg') center 58% / cover no-repeat;
  transform:scale(1.03);
}
/* scrim — the photo is bright, white type needs the contrast */
.stage::after{
  content:'';
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(0,0,0,.18) 0%, rgba(0,0,0,.52) 62%, rgba(0,0,0,.72) 100%),
    linear-gradient(180deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.30) 30%, rgba(0,0,0,.44) 56%, rgba(0,0,0,.78) 100%);
}

.inner{
  position:relative;
  width:100%;
  max-width:var(--maxw);
  text-align:center;
}

.eyebrow{
  margin:0 0 26px;
  font-size:11.5px;
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--soft);
}

/* the wordmark — Poppins 700, lowercased in CSS, tight tracking, exactly as on their site */
.mark{
  margin:0;
  font-weight:700;
  font-size:clamp(58px,15.5vw,178px);
  line-height:.92;
  letter-spacing:-.03em;
  text-transform:lowercase;
  color:var(--paper);
}

.rule{
  display:block;
  width:58px;
  height:1px;
  margin:38px auto 32px;
  background:var(--line);
}

.kicker{
  margin:0 0 16px;
  font-size:clamp(20px,3.4vw,27px);
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--paper);
}

.lead{
  margin:0 auto;
  max-width:47ch;
  font-size:16px;
  line-height:1.72;
  font-weight:400;
  color:var(--soft);
  text-wrap:pretty;
}

.cta{
  display:inline-flex;
  align-items:center;
  gap:11px;
  margin-top:38px;
  min-height:52px;
  padding:0 30px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:2px;
  font-size:13px;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--paper);
  text-decoration:none;
  background:transparent;
  transition:background .22s ease,color .22s ease,border-color .22s ease;
}
.cta:hover,.cta:focus-visible{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cta:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.cta svg{width:15px;height:15px;flex:none}

.foot{
  position:absolute;
  left:0;right:0;bottom:26px;
  margin:0;
  text-align:center;
  font-size:11px;
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.52);
}

@media (max-width:560px){
  .stage{padding:44px 20px 76px}
  .eyebrow{font-size:9.5px;letter-spacing:.15em;margin-bottom:20px}
  .rule{margin:30px auto 26px}
  .lead{font-size:15.5px;line-height:1.68}
  .cta{margin-top:32px;padding:0 24px;font-size:12px}
  .foot{bottom:22px;font-size:10px;letter-spacing:.16em}
}

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