/* =========================================================================
   Vantage Properties — faithful static recreation of the Wix site
   Measurements captured from www.vantage-property.com (Wix revision 43).
   Desktop is a fixed-height layout (header 54 + hero 863 + footer 40 = 957px),
   exactly as Wix renders it. Mobile reproduces Wix's 320px design grid,
   scaled to the viewport via --u.
   ========================================================================= */

/* ---------- Fonts (self-hosted Montserrat, same cut Wix serves) ---------- */
/* Montserrat is a variable font: one file per subset covers weights 100-900. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/montserrat-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:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/montserrat-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;}

/* ---------- Design tokens (sampled from the live site) ---------- */
:root{
  --ink:#112121;          /* brand near-black: nav on white, form text, button */
  --page-bg:#111111;      /* page background behind the hero */
  --bar:#000000;          /* header + footer bar */
  --nav-current:#ffffff;  /* "Investor Login" */
  --nav-muted:#c4c8c8;    /* "Contact" */
  --font:'Montserrat',sans-serif;

  --header-h:54px;
  --bar-top:2px;
  --bar-h:48px;
  --hero-h:863px;
  --footer-h:40px;
  --logo-w:600px;
  --logo-h:193px;
  --logo-top:240px;       /* from top of hero */
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--page-bg);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
ul{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:#fff;color:var(--ink);padding:12px 20px;font-size:14px;
}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid #6aa9ff;outline-offset:2px}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:52;
  height:var(--header-h);
}
.site-header__bar{
  position:absolute;top:var(--bar-top);left:0;right:0;
  height:var(--bar-h);
  background:var(--bar);
}

.nav{
  position:absolute;top:var(--bar-top);left:0;right:0;
  height:var(--bar-h);
  display:flex;align-items:center;justify-content:flex-end;
}
.nav__list{display:flex;align-items:center}
.nav__link{
  display:flex;align-items:center;
  height:37px;padding:0 15px;
  font-size:18px;line-height:37px;font-weight:400;
  color:var(--nav-muted);
  white-space:nowrap;
}
.nav__link--current{color:var(--nav-current)}

/* Hamburger — hidden on desktop */
.nav-toggle{display:none}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  height:var(--hero-h);
  overflow:hidden;
  background:var(--page-bg);
}
.hero__video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center center;
  border:0;
}
.hero__logo{
  position:absolute;
  top:var(--logo-top);
  left:50%;transform:translateX(-50%);
  width:var(--logo-w);height:var(--logo-h);
  object-fit:contain;
}

/* ---------- Footer ---------- */
.site-footer{
  height:var(--footer-h);
  background:var(--bar);
}

/* =========================================================================
   Mobile — Wix serves a separate 320px-wide layout to phones and lets the
   browser scale it up. We reproduce that grid with --u = 1 design px.
   ========================================================================= */
@media (max-width:750px){
  :root{
    --u:calc(100vw / 320);
    --header-h:calc(54 * var(--u));
    --bar-top:calc(2 * var(--u));
    --bar-h:calc(48 * var(--u));
    --hero-h:calc(708 * var(--u));
    --footer-h:calc(40 * var(--u));
    --logo-w:calc(280 * var(--u));
    --logo-h:calc(90 * var(--u));
    --logo-top:calc(242 * var(--u));
  }

  .nav{display:none}

  .nav-toggle{
    display:block;position:absolute;
    top:calc(6 * var(--u));right:calc(9 * var(--u));
    width:calc(50 * var(--u));height:calc(35 * var(--u));
  }
  .nav-toggle span{
    position:absolute;left:calc(14 * var(--u));
    width:calc(22 * var(--u));height:calc(2 * var(--u));
    border-radius:calc(2 * var(--u));
    background:#fff;
  }
  .nav-toggle span:nth-child(1){top:calc(7.5 * var(--u))}
  .nav-toggle span:nth-child(2){top:calc(16.5 * var(--u))}
  .nav-toggle span:nth-child(3){top:calc(25.5 * var(--u))}

  .mobile-menu{
    position:fixed;inset:0;z-index:60;
    background:#fff;
  }
  .mobile-menu[hidden]{display:none}
  .mobile-menu__close{
    position:absolute;
    top:calc(6 * var(--u));right:calc(9 * var(--u));
    width:calc(50 * var(--u));height:calc(35 * var(--u));
    display:flex;align-items:center;justify-content:center;
  }
  .mobile-menu__close svg{
    width:calc(26 * var(--u));height:calc(26 * var(--u));
    fill:var(--ink);
  }
  .mobile-menu__list{
    padding-top:calc(76 * var(--u));
    padding-right:calc(41 * var(--u));
    text-align:right;
  }
  .mobile-menu__link{
    display:block;width:100%;
    font-size:calc(18 * var(--u));
    line-height:calc(46 * var(--u));
    color:var(--ink);
    text-align:right;
  }
}

/* Desktop: the mobile menu never renders */
@media (min-width:751px){
  .mobile-menu{display:none}
}

/* =========================================================================
   Investor Login lightbox
   Panel 514x679, content column 300px, centred. Matches the Wix members
   dialog 1:1. NOTE: authentication is NOT wired up — see README.
   ========================================================================= */
.lightbox{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-start;justify-content:center}
.lightbox[hidden]{display:none}
.lightbox__scrim{position:absolute;inset:0;background:rgba(0,0,0,.6)}

.lightbox__panel{
  position:relative;
  width:514px;min-height:679px;
  margin-top:110px;margin-bottom:40px;
  background:#fff;
  padding:89px 107px 0;
  color:var(--ink);
}
.lightbox__close{
  position:absolute;top:25px;right:24px;
  width:35px;height:35px;
  display:flex;align-items:center;justify-content:center;
}
.lightbox__close svg{width:35px;height:35px;fill:#000}

.login__logo{width:288px;height:85px;object-fit:contain;margin:0 auto}
.login__title{
  margin:38px 0 0;
  font-size:20px;font-weight:400;line-height:1.225;
  text-align:center;color:var(--ink);
}
.login__form{position:relative;margin-top:52px;width:300px}
.login__label{
  display:block;
  font-size:16px;line-height:16px;font-weight:400;
  color:var(--ink);
  padding-right:20px;
  margin-bottom:8px;
}
.login__input{
  display:block;width:300px;height:46px;
  padding:3px 3px 3px 12px;
  border:1px solid var(--ink);border-radius:0;
  background:#fff;color:var(--ink);
  font-family:var(--font);font-size:18px;line-height:25.2px;
}
.login__input + .login__label{margin-top:18px}
.login__forgot{
  display:inline-block;margin-top:6px;
  font-size:14px;line-height:18.2px;letter-spacing:.42px;
  color:var(--ink);text-decoration:underline;
}
.login__error{
  /* Absolutely placed in the gap between "Forgot password?" and the button so
     showing it never reflows the panel. */
  position:absolute;top:190px;left:0;right:0;margin:0;
  font-size:14px;line-height:1.45;color:var(--ink);
}
.login__error[hidden]{display:none}
.login__submit{
  display:block;width:300px;height:46px;
  margin-top:87px;margin-bottom:56px;
  background:var(--ink);color:#fff;
  font-family:var(--font);font-size:18px;line-height:25.2px;
  text-align:center;
}

@media (max-width:750px){
  .lightbox__panel{
    width:calc(100vw - 32px);min-height:0;
    margin-top:40px;
    padding:48px 24px 40px;
  }
  .login__form,.login__input,.login__submit{width:100%}
  .login__logo{width:min(288px,70vw);height:auto}
}

/* Respect reduced-motion: hold the poster frame instead of looping video */
@media (prefers-reduced-motion:reduce){
  .hero__video{display:none}
  .hero{
    background:#111 url('../img/hero-poster.jpg') center center / cover no-repeat;
  }
}