:root{
  --bg:#ffffff;
  --text:#0f172a;        /* slate-900 */
  --muted:#475569;       /* slate-600 */
  --line:rgba(15,23,42,.10);

  /* Accent colors pulled from the logo */
  --accent:#242490;      /* deep blue */
  --accent2:#fca80c;     /* gold */
  --accent-soft:rgba(36,36,144,.12);

  --radius:18px;
  --shadow:0 18px 45px rgba(2,6,23,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  padding-top:5px; /* make room for top border bar */
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
}

/* 5px top border bar */
body::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:5px;
  background:var(--accent);
  z-index:50;
}

.bg-accent{
  position:fixed;
  inset:-20% -10% auto -10%;
  height:40vh;
  background:
    radial-gradient(800px 300px at 25% 20%, var(--accent-soft), transparent 60%),
    radial-gradient(700px 260px at 70% 30%, rgba(252,168,12,.10), transparent 62%),
    linear-gradient(to bottom, rgba(36,36,144,.06), transparent 65%);
  pointer-events:none;
  z-index:-1;
}

.wrap{
  width:min(980px, 92vw);
  margin:0 auto;
  padding:38px 0 46px;
}

.header{display:flex; justify-content:center; padding:6px 0 10px;}

.brand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-decoration:none;
  color:inherit;
}
.brand__logo{max-width:150px; width: min(150px, 36vw); height:auto;}
.brand__text{
  display:none; /* shown via JS if the logo image fails to load */
  font-weight:800;
  letter-spacing:.2px;
  font-size:28px;
}

.hero{ text-align:center; padding:18px 0 18px; }
.hero h1{
  font-size: clamp(16px, 3vw, 26px);
  line-height:1.18;
  margin:0 0 10px;
  letter-spacing:-.02em;
  color: var(--accent);
}
.subhead{
  margin:0;
  font-size: clamp(16px, 1.7vw, 18px);
  color:var(--muted);
}

.card{
  margin:22px auto 0;
  padding:22px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.form{margin:0}
.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

@media (min-width: 740px){
  .grid{ grid-template-columns:1fr 1fr; }
  .field--full{ grid-column:1 / -1; }
}

.field label{display:block; font-weight:600; font-size:14px; margin:0 0 8px;}

input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.18);
  background:#fff;
  color:var(--text);
  font-size:16px;
  outline:none;
}

input:focus, textarea:focus{
  border-color:rgba(36,36,144,.55);
  box-shadow:0 0 0 4px rgba(36,36,144,.14);
}

textarea{resize:vertical; min-height:140px;}

.hint{margin:8px 0 0; color:var(--muted); font-size:13px;}
.error{margin:8px 0 0; color:#b91c1c; font-size:13px; min-height:1em;}

.actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-top:16px;
}

.btn{
  appearance:none;
  border:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--accent), #1b1b6a);
  color:white;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 12px 28px rgba(2,6,23,.18);
}
.btn:hover{filter:brightness(1.02)}
.btn:active{transform:translateY(1px)}

.alt{margin:0; color:var(--muted); font-size:14px;}
.alt a{color:inherit}
.alt a:hover{color:var(--text)}

.fineprint{
  margin:14px 0 0;
  color:var(--muted);
  font-size:13px;
}

.footer{
  text-align:center;
  margin-top:22px;
  color:rgba(71,85,105,.9);
}

/* Hide honeypot but keep it in DOM */
.hp{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto}
  .btn:active{transform:none}
}