:root {
  --yellow:#f4b51f;
  --ink:#111;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#111}
body{overflow-x:hidden}
body::before{
  content:"";
  position:fixed;
  inset:-28px;
  background:
    linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.28)),
    url('/hero.jpeg') center center / cover no-repeat;
  filter:blur(20px) saturate(.9);
  transform:scale(1.06);
  z-index:-2;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.22));
  z-index:-1;
  pointer-events:none;
}
.page{
  width:100%;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:max(10px,env(safe-area-inset-top)) 0 max(10px,env(safe-area-inset-bottom));
}
.hero{
  position:relative;
  width:min(100vw,1536px);
  aspect-ratio:3/2;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.32);
}
.hero-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}
.notify-form{
  position:absolute;
  left:28.0%;
  top:68.25%;
  width:40.2%;
  z-index:3;
}
.input-wrap{
  height:clamp(40px,5.1vw,78px);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.16);
  box-shadow:0 4px 18px rgba(0,0,0,.14);
  overflow:hidden;
}
.mail-icon{font-size:clamp(15px,1.55vw,27px);margin-left:clamp(13px,1.6vw,28px);color:#111;transform:translateY(-1px)}
.notify-form input{min-width:0;width:100%;border:0;outline:0;background:transparent;padding:0 clamp(9px,1vw,16px);font-size:clamp(10px,1.25vw,20px);color:#555}
.notify-form input::placeholder{color:#777}
.notify-form button{align-self:stretch;min-width:32%;padding:0 clamp(14px,2.2vw,34px);border:0;border-radius:999px;background:linear-gradient(180deg,#f8c73d,#edae17);color:var(--ink);font-weight:800;font-size:clamp(10px,1.35vw,20px);cursor:pointer}
.notify-form button:hover{filter:brightness(1.04)}
.notify-form button:disabled{opacity:.7;cursor:wait}
.form-message{margin:.45rem 0 0;text-align:center;font-size:clamp(10px,1vw,14px);color:#fff;text-shadow:0 1px 4px #000;min-height:1.1em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:720px){
  .page{min-height:100svh;padding:0;place-items:center}
  .hero{width:100vw;aspect-ratio:3/2;box-shadow:0 14px 40px rgba(0,0,0,.35)}
  .notify-form{left:27.9%;top:68.15%;width:40.7%}
  .input-wrap{height:clamp(26px,5.8vw,38px)}
  .mail-icon{font-size:clamp(9px,2.4vw,13px);margin-left:clamp(7px,2vw,12px)}
  .notify-form input{padding:0 6px;font-size:clamp(7px,1.9vw,10px)}
  .notify-form button{min-width:31%;padding:0 8px;font-size:clamp(7px,1.9vw,10px)}
  .form-message{margin-top:4px;font-size:10px;padding:0 4px}
}