:root{--black:#000;--white:#fff;--red:#E10600;}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--black);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.wrapper{max-width:1100px;margin:0 auto;position:relative;overflow:hidden}

/* HERO IMAGE – further right nudge */
.page-img{
  width:100%;
  height:auto;
  display:block;
  transform: translateX(1.65%);
}

/* Symbols – DESKTOP ONLY */
.logo-symbol{
  position:absolute;
  top:3.55%;
  width:128px;
  height:128px;
  z-index:5;
}
.logo-left{left:3%}

/* Push RIGHT symbol outward more */
.logo-right{right:calc(3% + 28px);}

/* Mobile */
@media (max-width:768px){
  .logo-symbol{display:none;}
  .page-img{transform: translateX(1.0%);}
}

/* LEARN MORE hotspot */
.hotspot-btn{
  position:absolute;
  left:32.8%;
  top:27.45%;
  width:34.8%;
  height:6.6%;
  background:transparent;
  border:0;
  cursor:pointer;
  border-radius:14px;
  z-index:10;
}


/* Ensure wrapper positioning */
.wrapper{max-width:1100px;margin:0 auto;position:relative;overflow:hidden}
.page-img{width:100%;height:auto;display:block}

/* Symbols (desktop only) */
.logo-symbol{position:absolute;top:3.55%;width:128px;height:128px;z-index:5;}
.logo-left{left:3%}
.logo-right{right:3%}
@media (max-width:768px){ .logo-symbol{display:none} }

/* Learn more clickable hotspot */
.hotspot-btn{
  position:absolute;
  left:32.8%;
  top:27.45%;
  width:34.8%;
  height:6.6%;
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  border-radius:14px;
  z-index:50;
  appearance:none;
  -webkit-appearance:none;
}
.hotspot-btn:focus{outline:none}

/* Popup styles (matches simple Zip-22-era look: clean white box) */
.popup-backdrop{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,0.75);
  z-index:9999;
}
.popup{
  width:min(520px, 100%);
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(225,6,0,0.22);
  box-shadow:0 22px 70px rgba(0,0,0,0.45);
}
.popup-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  border-bottom:1px solid rgba(0,0,0,0.08);
}
.popup-header h2{
  margin:0;
  font-size:14px;
  font-weight:900;
  letter-spacing:0.10em;
  text-transform:uppercase;
}
.popup-close{
  border:0;
  background:transparent;
  font-size:22px;
  cursor:pointer;
  line-height:1;
}
.popup-body{padding:18px}
.popup-body label{
  display:block;
  margin:10px 0 6px;
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#111;
}
.popup-body input, .popup-body select, .popup-body textarea{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.18);
  font-size:14px;
  outline:none;
}
.popup-body textarea{min-height:110px;resize:vertical}
.popup-send{
  margin-top:14px;
  width:100%;
  background:#E10600;
  color:#fff;
  border:0;
  padding:12px 14px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
}
.popup-note{margin:10px 0 0;font-size:12px;color:rgba(0,0,0,0.65)}