:root{
  --navy:#16305c;
  --navy-deep:#0d1f3d;
  --gold:#b9902f;
  --ink:#1a2333;
  --muted:#5f6b7f;
  --line:#e3e7ee;
  /* Matches the logo PNG's own background (#fefefe, opaque) so it blends with
     no visible box. If you swap in a transparent logo, this can go back to #fff. */
  --bg:#fefefe;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit}

.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 32px}

/* ---------- top bar ---------- */
.topbar{padding:26px 0}
.topbar .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:34px;
}
.mark{display:block;width:150px;flex:none}
.mark img{width:100%;height:auto}
.topbar nav{margin-left:auto}
.topbar nav a{
  font-size:15px;
  color:var(--muted);
  text-decoration:none;
  transition:color .15s;
}
.topbar nav a:hover,
.topbar nav a:focus-visible{color:var(--gold)}

/* ---------- home ---------- */
main{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center}

.hero{text-align:center;padding:48px 0}
.hero .logo{width:min(560px,86vw);height:auto;margin:0 auto}
.rule{
  width:120px;height:1px;margin:44px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.enter{
  display:inline-block;
  margin-top:32px;
  font-size:15px;
  color:var(--muted);
  text-decoration:none;
  transition:color .15s;
}
.enter:hover,
.enter:focus-visible{color:var(--gold)}

/* ---------- contact page ---------- */
.contact{padding:24px 0 96px}
.contact h1{
  margin:0 0 40px;
  font-size:clamp(24px,3.4vw,32px);
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--navy);
}

form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  max-width:720px;
}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}

label{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
label .opt{text-transform:none;letter-spacing:0}

input,textarea{
  font:inherit;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:2px;
  padding:12px 14px;
  transition:border-color .15s,box-shadow .15s;
}
input:focus,textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(185,144,47,.14);
}
textarea{resize:vertical;min-height:150px}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

button{
  grid-column:1/-1;
  justify-self:start;
  font:inherit;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--navy-deep);
  background:var(--gold);
  border:0;
  border-radius:2px;
  padding:14px 34px;
  cursor:pointer;
  transition:filter .15s;
}
button:hover:not(:disabled){filter:brightness(1.08)}
button:disabled{opacity:.55;cursor:default}

.status{grid-column:1/-1;min-height:22px;font-size:14px;color:var(--muted)}
.status.err{color:#b3261e}
.status.ok{color:#1e6b3a}

/* ---------- footer ---------- */
footer{
  flex:none;
  padding:28px 0 36px;
  text-align:center;
  font-size:12px;
  letter-spacing:.1em;
  color:#98a2b2;
}

@media (max-width:640px){
  .wrap{padding:0 22px}
  form{grid-template-columns:1fr}
  .hero{padding:24px 0 64px}
  .mark{width:120px}
}