:root{
  --yellow:#f4ff1a;      /* neon yellow accent */
  --ink:#0d0d0d;
  --red:#e3000b;
  --blue:#0055bf;
  --green:#00a14b;
  --white:#fff;
  --err:#e3000b;
  --bw:3px;              /* border width */
  --shadow:5px 5px 0 var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{
  font-family:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  font-weight:500;
  color:var(--ink);
  background-color:var(--blue);
  /* baseplate studs */
  background-image:radial-gradient(circle at 50% 50%,rgba(255,255,255,.22) 0 7px,rgba(0,0,0,.18) 7px 9px,transparent 9px);
  background-size:36px 36px;
  display:flex;justify-content:center;
}
.card{
  width:100%;max-width:480px;min-height:100vh;
  background:var(--white);
  border-left:var(--bw) solid var(--ink);
  border-right:var(--bw) solid var(--ink);
  display:flex;flex-direction:column;
  position:relative;
}

/* Lego stud row across top of card */
.card::before{
  content:"";display:block;height:14px;flex:none;
  background:
    radial-gradient(circle at 50% 100%,var(--yellow) 0 8px,var(--ink) 8px 10px,transparent 10px) 0 0/32px 14px repeat-x,
    var(--ink);
}

/* Map */
.map-wrap{
  position:relative;width:100%;height:250px;overflow:hidden;
  border-bottom:var(--bw) solid var(--ink);
  background:var(--ink);
}
.map-wrap img{width:100%;height:100%;object-fit:cover;object-position:center 55%;display:block}
.pin{position:absolute;left:50%;top:52%;transform:translate(-50%,-100%);z-index:2}
.pin span{
  display:block;width:34px;height:34px;background:var(--yellow);
  border:var(--bw) solid var(--ink);
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  box-shadow:4px 4px 0 var(--ink);position:relative;
}
.pin span::after{
  content:"";position:absolute;width:10px;height:10px;background:var(--ink);
  border-radius:50%;top:8px;left:8px;
}
.map-tag{
  position:absolute;left:12px;top:12px;z-index:3;
  background:var(--yellow);border:var(--bw) solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  padding:6px 12px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
}

/* Form section */
.form-section{
  flex:1;position:relative;z-index:3;
  padding:26px 20px calc(32px + env(safe-area-inset-bottom));
  background:var(--white);
}
.eyebrow{
  display:inline-block;background:var(--red);color:#fff;
  border:var(--bw) solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  padding:4px 10px;margin-bottom:14px;transform:rotate(-2deg);
}
h1{
  font-family:'Lilita One','Arial Black',sans-serif;font-weight:400;
  font-size:28px;line-height:1.15;letter-spacing:.01em;text-transform:uppercase;
}
h1 em{
  font-style:normal;background:var(--yellow);padding:0 6px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  border:2px solid var(--ink);
}

/* decorative bricks */
.bricks{display:flex;gap:6px;margin:16px 0 4px}
.bricks i{
  position:relative;width:46px;height:20px;border:var(--bw) solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
}
.bricks i::before{
  content:"";position:absolute;top:-8px;left:6px;width:10px;height:6px;
  background:inherit;border:2px solid var(--ink);border-bottom:0;border-radius:3px 3px 0 0;
  box-shadow:18px 0 0 -0px inherit;
}
.bricks i::after{
  content:"";position:absolute;top:-8px;left:24px;width:10px;height:6px;
  background:inherit;border:2px solid var(--ink);border-bottom:0;border-radius:3px 3px 0 0;
}
.bricks i:nth-child(1){background:var(--red)}
.bricks i:nth-child(2){background:var(--yellow)}
.bricks i:nth-child(3){background:var(--blue)}
.bricks i:nth-child(4){background:var(--green)}
.bricks i::before{box-shadow:none}

.sub{font-size:14px;margin:18px 0 24px;line-height:1.5;font-weight:500}

.field{position:relative;margin-bottom:20px}
.field input,.field select{
  width:100%;height:60px;padding:24px 16px 6px;
  font:inherit;font-weight:700;font-size:16px;color:var(--ink);
  background:var(--white);border:var(--bw) solid var(--ink);border-radius:0;
  box-shadow:var(--shadow);
  outline:none;appearance:none;-webkit-appearance:none;
  transition:transform .12s,box-shadow .12s,background .12s;
}
.field label{
  position:absolute;left:16px;top:19px;font-size:15px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:#555;
  pointer-events:none;transition:all .15s ease;
}
.field label::after{content:" *";color:var(--red)}
.field input:focus+label,
.field input:not(:placeholder-shown)+label,
.field select:focus+label,
.field select:valid+label{top:8px;font-size:10px;color:var(--ink)}
.field input:focus,.field select:focus{
  background:var(--yellow);transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink);
}
.field.select::after{
  content:"";position:absolute;right:18px;top:22px;width:0;height:0;
  border-left:8px solid transparent;border-right:8px solid transparent;border-top:11px solid var(--ink);
  pointer-events:none;
}
.err{
  display:none;margin-top:8px;font-size:12px;font-weight:700;color:#fff;
  background:var(--err);border:2px solid var(--ink);padding:3px 8px;width:fit-content;
}
.field.invalid input,.field.invalid select{background:#ffe3e3}
.field.invalid .err{display:block}

/* Lego-brick button */
button{
  position:relative;width:100%;height:62px;margin-top:22px;
  background:var(--yellow);color:var(--ink);
  border:var(--bw) solid var(--ink);border-radius:0;
  font-family:'Lilita One','Arial Black',sans-serif;font-size:22px;letter-spacing:.05em;text-transform:uppercase;
  box-shadow:var(--shadow);cursor:pointer;
  transition:transform .1s,box-shadow .1s;
}
/* studs on the button */
button::before{
  content:"";position:absolute;left:14px;right:14px;top:-12px;height:9px;
  background:radial-gradient(circle at 50% 100%,var(--yellow) 0 7px,transparent 7px) 0 0/34px 9px repeat-x;
  filter:drop-shadow(0 -2px 0 var(--ink)) drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink));
}
button:hover{background:#fff95c}
button:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
button:disabled{background:#ddd;cursor:wait}

.success{text-align:center;padding:20px 0}
.success[hidden]{display:none}
.tick{
  width:80px;height:80px;margin:0 auto 18px;background:var(--yellow);
  border:var(--bw) solid var(--ink);box-shadow:var(--shadow);
  font-family:'Lilita One',sans-serif;font-size:46px;line-height:74px;
}
.success h2{font-family:'Lilita One',sans-serif;font-weight:400;font-size:30px;text-transform:uppercase;margin-bottom:8px}
.success p{font-size:15px}

@media (min-width:481px){
  body{padding:28px 0}
  .card{min-height:0;border:var(--bw) solid var(--ink);box-shadow:10px 10px 0 var(--ink)}
}