:root{
  --bg:#f7f7fb;
  --ink:#1d232b;
  --muted:#5a6674;
  --card:#ffffff;
  --line:rgba(20,22,26,.08);
  --accent:#1c355e;
  --accent-2:#f0c36a;
  --shadow:0 18px 40px rgba(21,27,36,.08);
  --radius:18px;

  /* compact spacing scale */
  --space-xxs: 6px;
  --space-xs: 10px;
  --space-sm: 14px;
  --space-md: 18px;
  --space-lg: 22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(1100px 520px at 85% -10%, #e9eef6 0, transparent 60%),
    radial-gradient(800px 460px at -10% 90%, #f0efe9 0, transparent 60%),
    var(--bg);
  font:16px/1.55 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Center everything and keep it on one screen */
.wrap{
  min-height:100dvh;            /* viewport height with safe browser UI */
  display:flex;
  flex-direction:column;
  justify-content:center;       /* vertical centering */
  align-items:center;           /* horizontal centering */
  padding: var(--space-lg) var(--space-sm);
  gap: var(--space-sm);
}

.brand{ text-align:center; margin-bottom: var(--space-sm) }
.logo{
  width: clamp(110px, 14vw, 140px);
  height:auto; display:block; margin:0 auto var(--space-xs);
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.10));
}
/* Slightly smaller headline to avoid scroll on small screens */
.headline{
  font:700 clamp(28px, 4.2vw, 40px)/1.15 "Playfair Display",serif;
  letter-spacing:.2px; margin: var(--space-xxs) 0 var(--space-xxs);
  color:var(--ink);
}
.tagline{
  color:var(--muted);
  max-width:720px;
  margin:0 auto var(--space-sm);
  font-size: clamp(14px, 2.1vw, 18px);
}

/* Card kept compact */
.card{
  width:min(860px, 92vw);
  background: linear-gradient(180deg,#fff 0%,#fafbff 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding: clamp(14px, 2.4vw, 22px);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.6);
}

/* Form */
.grid{ display:grid; gap: var(--space-sm); grid-template-columns:1fr 1fr; }
@media (max-width:720px){ .grid{ grid-template-columns:1fr; } }

.field{ display:flex; flex-direction:column; gap:8px; margin-bottom: var(--space-sm); }
.field > span{ font-weight:600; color:var(--ink); letter-spacing:.2px; font-size: clamp(13px,1.8vw,15px); }

input, textarea{
  background:#fff; color:var(--ink);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.02);
  transition:border-color .15s ease, box-shadow .15s ease, transform .05s ease;
  font-size:16px;
}
textarea{
  resize:vertical;
  min-height:120px;            /* slightly shorter to help fit */
  max-height:32vh;             /* prevent pushing page taller than viewport */
}

input:focus, textarea:focus{
  border-color: color-mix(in oklab, var(--accent) 35%, #6d95ff 20%);
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 18%, #f0c36a 12%, #ffffff 70%);
}

.btn{
  appearance:none; border:0; cursor:pointer;
  font-weight:700; letter-spacing:.2px; font-size:16px;
  padding:11px 18px; border-radius:14px; color:#fff;
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 88%, #0e1a2e 12%), var(--accent));
  box-shadow: 0 10px 22px rgba(28,53,94,.18), inset 0 1px 0 rgba(255,255,255,.25);
  position:relative; overflow:hidden;
}
.btn-line::after{
  content:""; position:absolute; inset:auto 0 0 0; height:3px;
  background: linear-gradient(90deg, var(--accent-2), transparent 60%);
  opacity:.55;
}
.btn:active{ transform: translateY(1px) }

.note{ margin-top:8px; color:var(--muted) }

.foot{
  text-align:center; color:var(--muted);
  margin-top: var(--space-xs);
  font-size:13px;
}

/* Honeypot */
.hp{ position:absolute; left:-50000px; height:0; overflow:hidden }