@font-face{font-family:'Inter Tight';src:url('/fonts/inter-tight-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter Tight';src:url('/fonts/inter-tight-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter Tight';src:url('/fonts/inter-tight-800.woff2') format('woff2');font-weight:800;font-display:swap}

:root{
  --cream:#FAFAF8; --ink:#1A1A1A; --muted:#55524D; --line:#DADAD6; --art:#ECECEC;
  --teal:#328690; --crimson:#AA313E; --magenta:#AA5690; --salmon:#E58862; --blue:var(--teal); --forest:var(--teal);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--cream); color:var(--ink);
  font-family:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.5;
  min-height:100vh; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:var(--ink)}
a:hover{color:var(--blue)}

.top{position:relative; z-index:2; padding:28px 24px 0; max-width:1280px; width:100%; margin:0 auto}
.brand{display:inline-block; line-height:0}
.brand img{width:280px; height:auto}

/* Hero: copy on the left, routes bleeding off the right edge */
.hero{position:relative; flex:1; width:100%; max-width:1280px; margin:0 auto; padding:0 24px; min-height:720px}
.art{position:absolute; top:-140px; bottom:0; left:54%; right:calc(-1 * (100vw - 100%) / 2); overflow:hidden; z-index:0; background:var(--art)}
.routes{display:block; width:100%; height:100%}
.routes g{mix-blend-mode:multiply}
.copy{position:relative; z-index:1; width:min(560px, 48%); padding:72px 0 80px}

h1{margin:0; font-weight:800; font-size:clamp(48px,6.2vw,88px); line-height:.95; letter-spacing:-.04em}
.lede{margin:28px 0 0; font-size:20px; line-height:1.5}
.soon{margin:16px 0 0; color:var(--muted)}

.form{margin-top:36px; display:flex; flex-direction:column; gap:16px}
.row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.field{display:flex; flex-direction:column; gap:6px}
label{font-size:14px; font-weight:500}
.opt{font-weight:400; color:var(--muted)}
input,select{
  font:inherit; color:var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:12px;
  padding:14px 16px; min-height:52px; width:100%;
}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%); background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%; background-size:6px 6px; background-repeat:no-repeat; padding-right:40px}
input:focus,select:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(50,134,144,.28)}
input[aria-invalid="true"]{border-color:#B3261E}

.btn{
  font:inherit; font-weight:500; font-size:17px; cursor:pointer;
  background:var(--ink); color:var(--cream); border:0; border-radius:999px;
  padding:16px 30px; min-height:52px; align-self:flex-start;
}
.btn:hover{background:var(--blue)}
.btn:focus-visible{outline:3px solid var(--blue); outline-offset:3px}
.btn[disabled]{opacity:.6; cursor:default}

.status{margin:0; font-weight:500}
.status:empty{display:none}
.status.ok{color:var(--forest)}
.status.err{color:#B3261E}
.fine{margin:0; font-size:14px; color:var(--muted)}

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

.foot{
  position:relative; z-index:1; background:var(--cream);
  max-width:1280px; width:100%; margin:0 auto; padding:24px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:14px; color:var(--muted); border-top:1px solid var(--line);
}
.foot a{color:var(--muted)}

@media (max-width:900px){
  .hero{min-height:0; padding:0}
  .art{position:relative; top:auto; bottom:auto; left:auto; right:auto; height:300px; margin-top:24px}
  .copy{width:auto; padding:32px 24px 64px}
  .brand img{width:220px}
}
@media (max-width:560px){
  .row{grid-template-columns:minmax(0,1fr)}
  .art{height:280px}
  .lede{font-size:18px}
  .btn{align-self:stretch}
}
@media (prefers-reduced-motion:no-preference){
  .routes path{stroke-dasharray:2400; stroke-dashoffset:2400; animation:route 1.8s cubic-bezier(.4,0,.2,1) forwards}
  .routes g:nth-child(2) path{animation-delay:.12s}
  .routes g:nth-child(3) path{animation-delay:.24s}
  .routes g:nth-child(4) path{animation-delay:.36s}
}
@keyframes route{to{stroke-dashoffset:0}}