@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("/static/landing/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("/static/landing/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url("/static/landing/fonts/manrope-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url("/static/landing/fonts/manrope-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("/static/landing/fonts/manrope-latin-600-normal.woff2") format("woff2")}

:root{
  --night:#071923;
  --petro:#0B2730;
  --mineral:#143C3D;
  --ivory:#F3F0E8;
  --mist:#C6CFCC;
  --diag:#63A89C;
  --copper:#B9805A;
  --line:rgba(198,207,204,.16);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Manrope",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ivory);
  background:var(--night);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
:focus-visible{outline:2px solid var(--diag);outline-offset:3px}

.login-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:1.15fr .85fr;
}

/* HERO VISUAL */
.login-hero{
  position:relative;
  overflow:visible;
  background:
    linear-gradient(165deg, rgba(7,25,35,.28) 0%, rgba(7,25,35,.72) 55%, rgba(7,25,35,.92) 100%),
    #071923;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:clamp(1.75rem,3.5vw,2.75rem);
  min-height:100vh;
}
.login-hero__media{
  position:absolute;inset:0;z-index:0;overflow:hidden;
}
.login-hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:58% 40%;
  display:block;filter:saturate(.92) contrast(1.05);
}
.login-hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(7,25,35,.15), rgba(7,25,35,.55) 70%, rgba(7,25,35,.85)),
    linear-gradient(180deg, rgba(7,25,35,.35), transparent 35%, rgba(7,25,35,.75) 100%);
}
.login-hero__top,
.login-hero__copy,
.login-hero__foot{position:relative;z-index:1}
.login-hero__top{padding-top:.5rem;overflow:visible !important}
.login-hero__logo{
  display:block;
  height:auto !important;
  width:auto !important;
  max-height:112px;
  max-width:min(480px, 78vw);
  object-fit:contain !important;
  object-position:left center;
  background:transparent !important;
}
.login-card__mark{
  width:64px;height:64px;display:block;margin-bottom:1.35rem;
  border-radius:0;object-fit:contain;object-position:center;
  background:transparent;flex-shrink:0;
}
.login-hero__copy{max-width:28rem;margin-top:auto;padding-bottom:1rem}
.login-hero__copy .eyebrow{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--diag);margin:0 0 1rem;font-weight:500;
}
.login-hero__copy h1{
  font-family:var(--serif);font-weight:600;font-size:clamp(2.1rem,4vw,3.35rem);
  line-height:1.02;margin:0;letter-spacing:-.01em;
}
.login-hero__copy p{
  margin:1.1rem 0 0;color:rgba(243,240,232,.78);font-size:1rem;line-height:1.55;
  max-width:26rem;
}
.login-hero__foot{
  display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(198,207,204,.65);
  border-top:1px solid rgba(198,207,204,.14);padding-top:1.1rem;margin-top:1.5rem;
}
.login-hero__foot a{color:var(--mist)}
.login-hero__foot a:hover{color:var(--ivory)}

/* PANEL */
.login-panel{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(1.5rem,4vw,3rem);
  background:
    radial-gradient(ellipse 80% 50% at 100% 0%, rgba(20,60,61,.35), transparent 55%),
    linear-gradient(180deg, #0a1f28 0%, var(--night) 100%);
  border-left:1px solid var(--line);
}
.login-card{
  width:min(100%, 420px);
}
.login-card h2{
  font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.25rem);font-weight:600;
  margin:0 0 .35rem;line-height:1.1;
}
.login-card .lede{
  margin:0 0 1.75rem;color:rgba(198,207,204,.8);font-size:.95rem;
}
.field{display:grid;gap:.4rem;margin-bottom:1rem}
.field label{
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);
}
.field input{
  width:100%;min-height:48px;padding:.85rem 1rem;
  border:1px solid var(--line);border-radius:0;
  background:rgba(255,255,255,.03);color:var(--ivory);
  transition:border-color .2s, background .2s;
}
.field input::placeholder{color:rgba(198,207,204,.4)}
.field input:hover{border-color:rgba(198,207,204,.28)}
.field input:focus{
  outline:none;border-color:rgba(99,168,156,.65);
  background:rgba(255,255,255,.045);
}
.login-actions{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center;margin-top:1.35rem}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:.8rem 1.35rem;border:1px solid transparent;
  font-weight:600;font-size:.92rem;cursor:pointer;transition:background .2s,transform .2s,border-color .2s;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--ivory);color:var(--night)}
.btn-primary:hover{background:#fff}
.btn-ghost{border-color:var(--line);color:var(--ivory);background:transparent}
.btn-ghost:hover{border-color:rgba(99,168,156,.5);color:var(--diag)}
#msg{
  min-height:1.2em;margin-top:.9rem;font-size:.85rem;color:#e8b4a0;
}
.login-meta{
  margin-top:1.75rem;padding-top:1.15rem;border-top:1px solid var(--line);
  font-size:.78rem;color:rgba(198,207,204,.65);line-height:1.45;
}
.login-meta a{color:var(--diag);border-bottom:1px solid transparent}
.login-meta a:hover{border-bottom-color:var(--diag)}

@media (max-width:960px){
  .login-shell{grid-template-columns:1fr}
  .login-hero{min-height:42vh;padding-bottom:2rem}
  .login-hero__copy h1{font-size:clamp(1.8rem,6vw,2.4rem)}
  .login-panel{border-left:0;border-top:1px solid var(--line);padding-top:2rem;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
  .btn:hover{transform:none}
}